fj-dc-ui/.svn/pristine/c8/c82e188e2ac8fd38c6d77b6e6f42dd0f4ea4c24c.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" :rules="rules" ref="formObj">
                <p style="margin-top:10px;margin-bottom: 10px"><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="项目名称" prop="name">
                    <el-input v-model="formObj.name" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="流域机构">
                  <el-select v-model="formObj.admOrg" placeholder="请选择" clearable style="width:70%;">
                    <el-option
                      v-for="(item,index) in gcType"
                      :key="index"
                      :label="item.basName"
                      :value="item.basCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="项目编码">
                   <el-input v-model="formObj.code" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="检查分类" prop="type">
                  <el-select v-model="formObj.type" placeholder="请选择" clearable style="width:70%;">
                    <el-option label="水库" value="1"></el-option>
                    <el-option label="水闸" value="2"></el-option>
                    <el-option label="人饮" value="3"></el-option>
                    <el-option label="水利工程建设" value="4"></el-option>
                    <el-option label="水利工程运行" value="5"></el-option>
                  </el-select>
                </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">更改</span>
                    </div>
                </el-form-item>
                <el-form-item label="工程详细位置">
                    <el-input v-model="formObj.location" placeholder="请输入详细位置" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>

                <el-form-item label="经度">
                    <el-input clearable v-model="formObj.centerX" autocomplete="off" style="width:70%;" placeholder="经度的整数范围应在74-136之间"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input clearable v-model="formObj.centerY" autocomplete="off" style="width:70%;"placeholder="纬度的整数范围应在4-54之间"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <!-- <el-button @click="cancelHandler">取 消</el-button> -->
                    <el-button type="primary" @click="addHandler('formObj')">保 存</el-button>
                </el-form-item>
            </el-form>

        </el-main>

    </el-container>
  <theRecentAppearance v-if="xcztShow" @jqmmDialogClose="jqmmDialog" :jqmmShow="xcztShow" :jqmmEngId="currentObjectRgstrId" :dialogTitle="currentObjectName + '近期面貌'" style="z-index: 9999;"></theRecentAppearance>
  <!--影像弹窗-->
  <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"></mapLocation>
        </div>
  </el-dialog>
</div>
</template>

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

    data() {
        return {
            formObj: {
                "rsName": '',
                "rsAdmName": "",
                "rsLoc": "",
                "intm": "",
                "engScal": "",
                "totCap": "",
                "damMaxHigh": "",
                "damTypeStr": "",
                "damType":"",
                "rsType":'',
                "regCode": "",
                "rsvrLong": "",
                "rsvrLat": "",
                "compDate": "",
                "compDateStr": "",
                "location": "",
                "admDiv": "",
                "admOrg": "",
                "centerX": "",
                "centerY": "",
                "type": ""
            },
            rules: {
            name: [
              { required: true, message: '请输入项目名称', trigger: 'blur' }
            ],
            type: [
              { required: true, message: '请选择检查分类', trigger: 'change' }
            ]
          },
            dialogFormVisible: false,
            formLabelWidth: '160px',
            loading: true,
            operationType1: '',
            currentResCode1: '',
            currentObjectId1: '',
            value1: '',
            provList: [],
            cityList: [],
            countryList: [],
            provName: '',
            cityName: '',
            countryName: '',
            provNames: '',
            cityNames: '',
            countryNames: '',
            curSelectItem: 0,
            showLocSelect: false,
            locat: {
                location: "",
                admDiv: ""
            },
            xcztShow: false,
            imageShow: false,
            xcztEngId:'',
            centerX: 0,
            centerY: 0,
            gcType:[]
        }
    },
    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.location = this.locat.location
                // this.formObj.admDiv = this.locat.admDiv
                this.provName = ''
                this.cityName = ''
                this.countryName = ''
            }
        }
    },
    methods: {
        getRgstridObj() {
            var _self = this;
            request.get(`/att/fsc/base/${_self.currentObjectId1}`).then(res =>{
              _self.formObj = res.data;
              // _self.formObj.intm = dateFormat(res.data.intm, 'yyyy-MM-dd');
              this.centerX = res.data.centerX;
              this.centerY = res.data.centerY;
            })
        },
        addHandler(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              var _self = this;
              _self.formObj['persId'] = _self.recPersId;
              _self.formObj['rgstrId'] = _self.currentObjectRgstrId;
              _self.formObj.objId = _self.currentObjectId1;
              console.log(_self.formObj);
              if(this.formObj.centerX || this.formObj.centerY){
                //基础信息纠错，经纬度修改粗略校验经度纬度整数部分的范围
                if(this.formObj.centerX < 74 || this.formObj.centerX > 136){
                  this.$message.error('经度的整数范围应在74-136之间，请重新填写！');
                  this.formObj.centerX = '';
                  return;
                }
                if(this.formObj.centerY < 4 || this.formObj.centerY > 54){
                  this.$message.error('纬度的整数范围应在4-54之间，请重新填写！');
                  this.formObj.centerY = '';
                  return;
                }
              }
              try {
                this.$confirm('确认保存基础信息？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  delete _self.formObj.adName;
                  delete _self.formObj.basName;
                  request.post('/att/fsc/base', _self.formObj).then((res) => {
                    if (res.success) {
                      _self.$emit("addTeDingFeiJianSuccess");
                      _self.showLocSelect = false
                      _self.getRgstridObj()
                      _self.$message.success("修改成功");
                    } else {
                      _self.$emit('cancelHandler');
                    }
                  });
                })

              } catch (e) {

              }
            } else {
              console.log('error submit!!');
              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
            }
            this.formObj.adCode = adCode;
            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
                    }


                    request.post(`/att/bas/base/list`,{}).then(res =>{
                      if(res.success){
                        this.gcType = 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.location = 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.location = 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.location = this.provNames + this.cityNames + this.countryNames
              this.getAreaList(val)
            }
        },
        //  近期面貌
        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>