fj-dc-ui/.svn/pristine/b9/b9dffae27469b02e1e9e44e336b3aec0d6afb589.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.name"
              autocomplete="off"
              style="width:70%;"
            ></el-input>
          </el-form-item>
          <el-form-item label="行政区划" required>
            <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.regAddr" autocomplete="off" style="width:70%;"></el-input>
          </el-form-item> -->
          <el-form-item label="地址">
            <el-input
              v-model="formObj.busAddr"
              autocomplete="off"
              style="width:70%;"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              v-model="formObj.conPers"
              autocomplete="off"
              style="width:70%;"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="联系人电话">
            <el-input
              v-model="formObj.conPersTel"
              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-radio-group v-model="formObj.isCnfm">
              <el-radio label="1">符合</el-radio>
              <el-radio label="2">不符合</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="">
            <!-- <el-button @click="cancelHandler">取 消</el-button> -->
            <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: {
        adCode: "",
        adName: "",
        name: "",
        busAddr: "",
        conPersTel: "",
        // 'regAddr': '',
        conPers: "",
        centerX: "",
        centerY: ""
      },
      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.get(`/att/fjsdu/base/getObjId/${_self.currentObjectId}`).then(
        res => {
          if (res.data) {
            _self.formObj = res.data;
            _self.centerX = res.data.centerX;
            _self.centerY = res.data.centerY;
          } else {
            _self.formObj = {};
          }
        },
        err => {}
      );
    },
    addHandler() {
      var _self = this;
      _self.formObj["persId"] = _self.recPersId;
      _self.formObj.objId = _self.currentObjectId1;
      _self.formObj.id = _self.currentObjectRgstrId;
      try {
        this.$confirm("确认保存基础信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          request.post("/bis/insp/fjsdu", _self.formObj).then(res => {
            if (res.success) {
              _self.$emit("addShuiKuSuccess");
              _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>