fj-dc-ui/.svn/pristine/91/915777f9440b864085a6aaa00a74bc43e40d83e3.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.sapName" readonly autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <!--<el-form-item label="所在堤防">-->
            <!--<el-input v-model="formObj.diskName" autocomplete="off" style="width:70%;"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="堤防等级">-->
            <!--<el-select v-model="formObj.dikeGrad" placeholder="请选择" clearable>-->
              <!--<el-option v-for="item in difangdengji" :key="item.value" :label="item.label"-->
                         <!--:value="item.value"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="险工险段长度(m)">-->
            <!--<el-input v-model="formObj.sapLen" placeholder="请输入详细地点" autocomplete="off"-->
                      <!--style="width:70%;"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="险工险段类型">
            <el-input type="textarea" rows="6" v-model="formObj.sapType" clearable
                      placeholder="请输入险工险段类型" 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" v-if="openType"
                                                                    style="color: #009fff;font-size:12px;cursor:pointer">更改</span>
            </div>
          </el-form-item>
          <el-form-item label="起所在地">
            <el-input v-model="formObj.startLoc" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="终所在地">
            <el-input v-model="formObj.endLoc" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <!--<el-form-item label="所在河岸">-->
            <!--<el-input v-model="formObj.riverBank" autocomplete="off" style="width:70%;"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="所在湖泊">-->
            <!--<el-input v-model="formObj.lake" autocomplete="off" style="width:70%;"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="所在海岸">-->
            <!--<el-input v-model="formObj.coast" autocomplete="off" style="width:70%;"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="信息审核状态">
            <el-select v-model="formObj.chkState" placeholder="请选择" clearable>
              <el-option v-for="item in checkState" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="管理单位">-->
            <!--<el-input v-model="formObj.mampu" autocomplete="off" style="width:70%;"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="管理单位联系人">-->
            <!--<el-input v-model="formObj.mampuAttn" autocomplete="off" style="width:70%;"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="管理单位联系人电话">-->
            <!--<el-input v-model="formObj.mampuAttnTel" autocomplete="off" style="width:70%;"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="主管单位联系人">
            <el-input v-model="formObj.compUnitAttn" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="主管单位联系人电话">
            <el-input v-model="formObj.compUnitAttnTel" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="政府防汛责任人">
            <el-input v-model="formObj.gvmtFldWho" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="政府防汛责任人电话">
            <el-input v-model="formObj.gvmtFldWhoTel" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="经度">
            <el-input clearable v-model="formObj.centerX" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input clearable v-model="formObj.centerY" style="width:70%;"></el-input>
          </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;"></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 "@widget/inuptWith.vue"
  import request from "@util/gw_ajax_request.js"
  import theRecentAppearance from '../../duChaDuiXiang/theRecentAppearance'
  import mapLocation from '../../../views/duChaTianBao/mapLocation'
  import {getBaseJiuCuo} from "@api/duChaTianBao.js"

  export default {
    components: {
      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: {
          adCode: "",//起点行政区编码 ,
          adName: "",//起点行政区名称 ,
          basCode: "",//所属流域机构 ,
          centerX: "",//起点经度 ,
          centerY: "",//
          chkState: "",//信息审核状态 ,
          coast: "",//所在海岸 ,
          compUnitAttn: "",//主管单位联系人 ,
          compUnitAttnTel: "",//主管单位联系人电话 ,
          dikeGrad: "",//堤防等级 ,
          diskName: "",//所在堤防 ,
          endLoc: "",//终点所在地 ,
          gdX: "",//起点高德经度 ,
          gdY: "",//起点高德纬度 ,
          gvmtFldWho: "",//政府防汛责任人 ,
          gvmtFldWhoTel: "",//政府防汛责任人电话 ,
          lake: "",//所在湖泊 ,
          mampu: "",//管理单位 ,
          mampuAttn: "",//管理单位联系人 ,
          mampuAttnTel: "",//管理单位联系人电话 ,
          persId: "",//创建人 ,
          riverBank: "",//所在河岸 ,
          sapLen: "",//险工险段长度(m) ,
          sapName: "",//险工险段名称 ,
          sapType: "",//险工险段类型 ,
          startLoc: "",//起点所在地 ,
        },
        dialogFormVisible: false,
        formLabelWidth: '160px',
        loading: true,
        operationType1: '',
        currentResCode1: '',
        currentObjectId1: '',
        value1: '',
        difangdengji: [
          {
            value: "1",
            label: "1级"
          },
          {
            value: "2",
            label: "2级"
          },
          {
            value: "3",
            label: "3级"
          },
          {
            value: "4",
            label: "4级"
          },
          {
            value: "5",
            label: "5级"
          },
          {
            value: "6",
            label: "5级以下"
          }
        ],
        checkState: [
          {
            label: "是",
            value: "1"
          },
          {
            label: "否",
            value: "2"
          }
        ],
        provList: [],
        cityList: [],
        countryList: [],
        provName: '',
        cityName: '',
        countryName: '',
        provNames: '',
        cityNames: '',
        countryNames: '',
        curSelectItem: 0,
        showLocSelect: false,
        locat: {
          adName: "",
          adCode: ""
        },
        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.adCode = this.locat.adCode
          this.provName = ''
          this.cityName = ''
          this.countryName = ''
        }
      }
    },
    methods: {
      getRgstridObj() {
        var _self = this;
        getBaseJiuCuo(_self.currentObjectRgstrId).then(
          (res) => {
            if (res.data) {
              _self.formObj = res.data;
              this.locat.adName = res.data.adName
              this.locat.adCode = res.data.adCode
              this.centerX = res.data.centerX;
              this.centerY = res.data.centerY;
              // _self.value1 = dateFormat(res.data.compDate, '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;
            //基础信息纠错，经纬度修改粗略校验经度纬度整数部分的范围
            this.$confirm('确认保存基础信息？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if (!this.saveLoading) {
                this.saveLoading = true
                request.post('/bis/insp/waga/sap/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
                  this.$message.info(err)
                });
              }
            })
          } 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.adCode = 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.adCode = 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.adCode = 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>