fj-dc-ui/.svn/pristine/03/0384132a12e6cec3bc94718e54e02c575c9ddec3.svn-base

<template>
    <div>
        <el-container style="height:520px;">
            <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">信息填报</p>
                <el-form :model="formObj" :label-width="formLabelWidth" ref="baseinfoForm" :rules="baseinfoRule">
                    <p style="margin-top:10px;margin-bottom: 10px;overflow: hidden;"><i class="el-icon-caret-right"></i><span style="width:120px;padding-left: 10px">基础信息</span><span class="hrs"></span>
                        <el-button type="warning" style="float: right;" @click="recentAppearance">近期面貌</el-button>
                        <el-button type="warning" style="float: right; margin-right: 10px;" @click="imageClick">影像</el-button>
                    </p>
                    <el-form-item label="水库名称">
                        <el-input v-model="formObj.rsName" readonly autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="管理机构">
                        <el-input v-model="formObj.rsAdmName" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="行政区划">
                        <div v-if="showLocSelect">
                            <el-select v-model="provName" placeholder="选择省" @change="provChange" style="width:20%">
                            <el-option
                                v-for="item in provList"
                                :key="item.adCode"
                                :label="item.adName"
                                :value="item.adCode">
                            </el-option>
                            </el-select>
                            <el-select v-model="cityName" placeholder="选择市" @change="cityChange" style="width:20%">
                            <el-option
                                v-for="item in cityList"
                                :key="item.adCode"
                                :label="item.adName"
                                :value="item.adCode">
                            </el-option>
                            </el-select>
                            <el-select v-model="countryName" placeholder="选择县" @change="countryChange" style="width:20%">
                            <el-option
                                v-for="item in countryList"
                                :key="item.adCode"
                                :label="item.adName"
                                :value="item.adCode">
                            </el-option>
                            </el-select>
                            &#x3000;<span v-if="showLocSelect" @click="showLocSelect = false" style="color: #009fff;font-size:12px;cursor:pointer">取消</span>
                        </div>
                        <div v-else>
                            <el-input v-model="formObj.adName" readonly autocomplete="off" style="width:70%;"></el-input>&#x3000;<span @click="showLocSelect = true" style="color: #009fff;font-size:12px;cursor:pointer" v-if="openType">更改</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="所在地点">
                        <el-input v-model="formObj.addr" placeholder="请输入详细地点" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="建成时间">
                        <el-date-picker v-model="formObj.resCreateTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="注册登记号">
                        <el-input v-model="formObj.damRegCode" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="工程规模" prop="engScal">
                        <el-select v-model="formObj.engScal"  placeholder="请选择">
                            <el-option v-for="item in gongchengguimo" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="主坝坝型" prop="rsType">
                        <el-select v-model="formObj.damType"  placeholder="请选择">
                            <el-option v-for="item in zhubaleixing" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="总库容(万m³)" prop="totCap">
                        <el-input v-model="formObj.totCap" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="主坝最大坝高(m)" prop="damSizeHig">
                        <el-input v-model="formObj.damSizeHig" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="经度">
                        <el-input v-model="formObj.gdX" autocomplete="off" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度">
                      <el-input v-model="formObj.gdY" autocomplete="off" style="width:70%;"/>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="addHandler" v-if="openType">保 存</el-button>
                    </el-form-item>
                </el-form>

            </el-main>

        </el-container>
      <theRecentAppearance v-if="xcztShow" @jqmmDialogClose="jqmmDialog" :jqmmShow="xcztShow" :openType="openType"
                           :jqmmEngId="currentObjectRgstrId" :dialogTitle="currentObjectName + '近期面貌'"
                           style="z-index: 9999;"/>
        <!--影像弹窗-->
        <el-dialog :title="currentObjectName + '影像'" :visible.sync="imageShow" append-to-body :close-on-click-modal="false" width="60%">
                <div style="height: 60vh;">
                  <mapLocation ref="mapRef" v-if="imageShow" :gdX="centerX" :gdY="centerY"/>
                </div>
        </el-dialog>
    </div>
</template>

<script>
import inputWith from "@widget/inuptWith.vue"
import request from "@util/gw_ajax_request.js"
import theRecentAppearance from '../../duChaDuiXiang/theRecentAppearance'
import unlimitDatePicker from '@baseWidget/unLimitdatePicker.vue'
import mapLocation from '../../../views/duChaTianBao/mapLocation'
import {
    getRssfdrRgstrApi
} from "@api/duChaTianBao.js"
import {
    dateFormat
} from "@util/gw_date.js"
export default {
    components: {
        inputWith: inputWith,
        unlimitDatePicker:unlimitDatePicker,
        theRecentAppearance,
        mapLocation
    },
    props: ['currentObjectRgstrId', 'currentResCode', 'currentObjectId','currentObjectName','openType'],

    data() {
        var checkInput = (rule, value, callback) => {
            if(value && value.toString().length>8){
                return callback(new Error('输入位数过长'));
            }
            setTimeout(() => {
                if (value && isNaN(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    callback();
                }
            }, 500);
        };
        return {
            formObj: {
                "rsvrNm": '',
                "rsvrAdmName": "",
                "hystSite": "",
                "engScal": "",
                "damRegCode": "",
                "totCap": "",
                "damType":"",
                "damMaxHigh": "",
                // "flConTopStag": "",
                "adName": "",
                "admDiv": "",
                "compDateStr": ""
            },
            dialogFormVisible: false,
            formLabelWidth: '160px',
            loading: true,
            operationType1: '',
            currentResCode1: '',
            currentObjectId1: '',
            value1: '',
            gongchengguimo:[
                {
                    value: "1",
                    label: "大（1）型"
                },
                {
                    value: "2",
                    label: "大（2）型"
                },
                {
                    value: "3",
                    label: "中型"
                },
                {
                    value: "4",
                    label: "小（1）型"
                },
                {
                    value: "5",
                    label: "小（2）型"
                },
            ],
            zhubaleixing:[
                {
                    value: "1",
                    label: "混凝土坝"
                },
                {
                    value: "2",
                    label: "碾压混凝土坝"
                },
                {
                    value: "3",
                    label: "浆砌石坝"
                },
                {
                    value: "4",
                    label: "土坝"
                },
                {
                    value: "5",
                    label: "堆石坝"
                },
                {
                    value: "6",
                    label: "挡水坝"
                },
                {
                    value: "7",
                    label: "其他"
                },
            ],
            provList: [],
            cityList: [],
            countryList: [],
            provName: '',
            cityName: '',
            countryName: '',
            provNames: '',
            cityNames: '',
            countryNames: '',
            curSelectItem: 0,
            showLocSelect: false,
            locat: {
                adName: "",
                admDiv: ""
            },
            xcztShow: false,
            imageShow: false,
            xcztEngId:'',
            centerX: 0,
            centerY: 0,
            baseinfoRule: {
                totCap: [
                    { validator: checkInput, trigger: 'blur' }
                ],
                damSizeHig: [
                    { validator: checkInput, trigger: 'blur' }
                ],
            },
            saveLoading: false
        }
    },
    computed: {
        recPersId() {
            return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
        }
    },
    mounted() {
        this.currentResCode1 = this.currentResCode;
        this.currentObjectId1 = this.currentObjectId;
        this.getRgstridObj();
        this.getAreaList()
    },
    watch: {
        currentObjectRgstrId(n, o) {
            this.getRgstridObj();
        },
        showLocSelect(val){
            if(!val){
                this.formObj.adName = this.locat.adName
                this.formObj.admDiv = this.locat.admDiv
                this.provName = ''
                this.cityName = ''
                this.countryName = ''
            }
        }
    },
    methods: {
        getRgstridObj() {
            var _self = this;
            getRssfdrRgstrApi(_self.currentObjectRgstrId).then(
                (res) => {
                    if (res.data) {
                        _self.formObj = res.data;
                        _self.locat.adName = res.data.adName
                        _self.locat.admDiv = res.data.admDiv
                        _self.centerX = res.data.gdX;
                        _self.centerY = res.data.gdY;
                        _self.formObj.resCreateTime = dateFormat(res.data.resCreateTime, 'yyyy-MM-dd');
                    } else {
                        _self.formObj = {};
                    }
                },
                (err) => {
                }
            );
        },
        addHandler() {
            this.$refs.baseinfoForm.validate((valid) => {
                if(valid){
                    var _self = this;
                    _self.formObj['persId'] = _self.recPersId;
                    _self.formObj.objId = _self.currentObjectId1;
                    console.log(_self.formObj);
                    //基础信息纠错，经纬度修改粗略校验经度纬度整数部分的范围
                    this.$confirm('确认保存基础信息？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        if(!this.saveLoading){
                            this.saveLoading = true
                            request.post('/bis/insp/rssfdr/rgstr', _self.formObj).then((res) => {
                                if (res.success) {
                                    _self.$emit("addShuiKuSuccess");
                                    _self.showLocSelect = false
                                    _self.getRgstridObj()
                                    _self.$message.success("修改成功");
                                } else {
                                    _self.$emit('cancelHandler');
                                }
                                this.saveLoading = false
                            }).catch(err=>{
                                this.saveLoading = false
                            });
                        }
                    })
                }else{
                    return false
                }
            })
        },
        cancelHandler() {
            this.$emit('cancelHandler');
        },
        formatRadio(val) {
            if (val == '1') {
                return '是'
            } else if (val == '0') {
                return '否'
            } else {
                return val
            }
        },
        getAreaList(val){
            let areaParams = {
                adName: "",
                id: this.dczId,
                pageNum: 1,
                pageSize: 10000
            }
            let adCode = ''
            if(!val){
                adCode = '000000000000'
            }else{
                adCode = val
            }
            request.get('/dc/ad/base/getAdData',{params:{'adCode':adCode}}).then(res=>{
                if(res.success){
                if(this.curSelectItem == 1){
                    this.cityList = res.data
                }else if(this.curSelectItem == 2){
                    this.countryList = res.data
                }else{
                    this.provList = res.data
                }

                }
            })
        },
        provChange(val){
            this.curSelectItem = 1
            this.cityName = ''
            this.countryName = ''
            this.formObj.admDiv = val
            this.provList.forEach(ele=>{
                if(ele.adCode == this.provName){
                    this.provNames = ele.adName
                }
            })
            this.formObj.adName = this.provNames
            this.getAreaList(val)
        },
        cityChange(val){
            this.curSelectItem = 2
            if(val && val != ''){
                this.formObj.admDiv = val
                this.countryName = ''
                this.cityList.forEach(ele=>{
                    if(ele.adCode == this.cityName){
                        this.cityNames = ele.adName
                    }
                })
                this.formObj.adName = this.provNames + this.cityNames
                this.getAreaList(val)
            }
        },
        countryChange(val){
            if(val && val != ''){
                this.formObj.admDiv = val
                this.countryList.forEach(ele=>{
                    if(ele.adCode == this.countryName){
                        this.countryNames = ele.adName
                    }
                })
                this.formObj.adName = this.provNames + this.cityNames + this.countryNames
            }
        },
        //  近期面貌
        recentAppearance(){
            this.xcztShow = true;
        },
        jqmmDialog(){
            this.xcztShow = false;
        },
        //影像
        imageClick(){
            if(!this.centerX && !this.centerY){
                this.$message.warning('暂无经纬度信息！');
                return false;
            }
            this.imageShow = true;
        }
    },
}
</script>

<style>
#dcdxHeader {
    padding: 15px 20px;
}

#dxdcFooter {
    text-align: center;
}

#dxdcAside {
    border: 1px solid #d5d5ff;
}

.el-dialog__wrapper .el-treeWhite {
    /* max-height: 260px !important; */
}
</style>