fj-dc-ui/.svn/pristine/f4/f4ab74b2bccfd8a6539dd7b79d4c213bcc63974b.svn-base

<template>
  <div>
    <el-container>
      <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">
          <p style="margin-top:10px;margin-bottom: 10px;">
            <i class="left-vertical"></i>
            <span>基本信息</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>
            <span class="hrs"></span>
          </p>
          <el-form-item label="机井名称" required >
            <el-input v-model="formObj.wellName" 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"
                                                                    v-if="openType"
                                                                    style="color: #009fff;font-size:12px;cursor:pointer">更改</span>
            </div>
          </el-form-item>
          <el-form-item label="机井类型">
            <el-select v-model="formObj.wellType" placeholder="机井类型">
              <el-option value="1" label="市域内保留井"></el-option>
              <el-option value="2" label="市域外保留井"></el-option>
              <el-option value="3" label="封存抗旱井"></el-option>
              <el-option value="4" label="关闭井"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="井深(米)">
            <el-input v-model="formObj.wellHeight" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="成井日期">
            <el-date-picker
              v-model="formObj.wellTime"
              type="year"
              format="yyyy"
              value-format="yyyy"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="formObj.contact" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="formObj.contactTel" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="经度">
            <el-input v-model="formObj.centerX" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="formObj.centerY" autocomplete="off" 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 unlimitDatePicker from '@baseWidget/unLimitdatePicker.vue'
    import mapLocation from '../mapLocation'

    export default {
        components: {
            inputWith: inputWith,
            unlimitDatePicker: unlimitDatePicker,
            theRecentAppearance,
            mapLocation
        },
        props: ['id', 'currentObjectRgstrId', 'currentResCode', 'currentObjectId', 'currentObjectName', 'openType'],

        data() {
            return {
                formObj: {
                    wellName:'',
                    wellType:'',
                    wellTime:'',
                    wellHeight:'',
                    adCode: "",//行政区划编码 ,
                    adName: "",//行政区划名称 ,
                    centerX: "",//经度 ,
                    centerY: "",//纬度 ,
                    contact: "",//单位联系人 ,
                    contactTel: "",//单位联系人电话 ,

                },
                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
            }
        },
        computed: {
            recPersId() {
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
            }
        },
        mounted() {

            this.currentResCode1 = this.currentResCode;
            this.currentObjectId1 = this.currentObjectId;
            this.getRgstridObj();
            this.getAreaList()
        },
        watch: {
            id(n, o) {
                this.getRgstridObj();
            },
            showLocSelect(val) {
                if (!val) {
                    this.formObj.rvLoc = this.locat.location
                    this.formObj.admDiv = this.locat.admDiv
                    this.provName = ''
                    this.cityName = ''
                    this.countryName = ''
                }
            }
        },
        methods: {
            getRgstridObj() {
                var _self = this;
                request.post(`/att/grow/base/getObjId/${_self.currentObjectId}`).then(
                    (res) => {
                        if (res.data) {
                            _self.formObj = res.data;
                        } else {
                            _self.formObj = {};
                        }
                    },
                    (err) => {
                    }
                );
            },
            addHandler() {
                var _self = this;
                _self.formObj['persId'] = _self.recPersId;
                _self.formObj.objId = _self.currentObjectId1;
                try {
                    this.$confirm('确认保存基础信息？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.post('/bis/insp/grow', _self.formObj).then((res) => {
                            if (res.success) {
                                _self.$emit("addShuiKuSuccess");
                                _self.$emit("changeWellType",_self.formObj.wellType);
                                _self.showLocSelect = false
                                _self.getRgstridObj()
                                _self.$message.success("修改成功");
                            } else {
                                _self.$emit('cancelHandler');
                            }
                        });
                    })

                } catch (e) {

                }
            },
            cancelHandler() {
                this.$emit('cancelHandler');
            },
            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)
            },
            RsvrTypeChange(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; */
  }

  .left-vertical {
    width: 8px;
    height: 17px;
    background: rgb(250, 205, 145);
    display: inline-block;
    vertical-align: bottom;
  }

  .hrs {
    display: inline-block;
    width: calc(100% - 40px);
    margin-left: 10px;
    height: 1px;
    vertical-align: middle;
    background-color: #ddd;
  }
</style>