real3d-portalsite/src/views/complianceAnalysis/components/hgxsc.vue

<template>
  <div class="hgxsc">
    <div class="rangDiv">
      <div class="block-title">选址范围</div>
      <range :keys="['hx', 'sc']" class="range" ref="range" />
    </div>
    <el-form :model="ruleForm" label-width="75px">
      <div class="block-title">基本信息</div>
      <el-form-item label="项目名称:" prop="xmmc">
        <el-input
          v-model="ruleForm.xmmc"
          size="mini"
          placeholder="请输入项目名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目类型:" prop="xmlx">
        <el-input
          v-model="ruleForm.xmlx"
          size="mini"
          placeholder="请输入项目类型"
        ></el-input>
      </el-form-item>
      <el-form-item label="建设单位:" prop="jsdw">
        <el-input
          v-model="ruleForm.jsdw"
          size="mini"
          placeholder="请输入建设单位"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="block-title">
      分析因子
      <div
        v-show="$store.getters.name == 'admin'"
        class="posi-abs pointer"
        style="right: 0; top: 1px; color: #409eff"
        @click="updateScx"
      >
        关联资源目录
      </div>
    </div>
    <div class="treeDiv">
      <el-tree
        :data="treedata"
        ref="tree"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :default-expanded-keys="xz"
      >
      </el-tree>
    </div>
    <div class="bottomBtns">
      <el-button round class="btn-style" @click="reset">重置</el-button>
      <el-button type="primary" round class="btn-style" @click="submitData">
        确定</el-button
      >
    </div>
  </div>
</template>

<script>
import { Add, GetScx, UpdateScx } from "@/api/ghss/hgxfx.js";
import { ElMessage, ElMessageBox } from "element-ui";
import range from "@/components/mapview/range.vue"; ///mapview/range
import hgxfx from "../../../../static/data/ghss/data.js";
export default {
  components: {
    range,
  },
  props: {},

  data() {
    return {
      xz: [],
      treedata: [
        {
          id: 1,
          label: "一级控制线",
          children: [],
        },
        {
          id: 2,
          label: "二级控制线",
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      ruleForm: {
        xmmc: "",
        jsdw: "",
        xmlx: "",
        xzdw: "",
        ydxz_bsm: "",
        yjydlx: "",

        fwlx: 1,
        xzfw: "",
        xzmj: 0,
      },

      options: [],
    };
  },
  mounted() {
    this.getTreeData(); //getKzx();
  },
  methods: {
    //获取检查要素
    getKzx() {
      GetScx().then((res) => {
        if (res) {
          let GetAll = res.data;
          for (var t in GetAll) {
            const getall = GetAll[t];
            if (getall.kzxjb == 1) {
              this.treedata[0].children.push({
                id: getall.bsm,
                label: getall.ysmc,
              });
              this.xz.push(getall.bsm);
            } else if (getall.kzxjb == 2) {
              this.treedata[1].children.push({
                id: getall.bsm,
                label: getall.ysmc,
              });
              this.xz.push(getall.bsm);
            } else {
              let bool = false;
              for (let i = 0; i < this.treedata.length; i++) {
                if (this.treedata[i].id == getall.kzxjb) {
                  bool = true;
                  this.treedata[i].children.push({
                    id: getall.bsm,
                    label: getall.ysmc,
                  });
                  break;
                }
              }
              if (!bool) {
                this.treedata.push({
                  id: getall.kzxjb,
                  label: getall.tjzd,
                  children: [
                    {
                      id: getall.bsm,
                      label: getall.ysmc,
                    },
                  ],
                });
              }
            }
          }
          setTimeout(() => {
            this.$refs.tree.setCheckedKeys(this.xz);
          }, 1);
        }
      });
    },
    //获取检查要素
    getTreeData() {
      this.treedata = [
        { id: "XZFX", label: "现状分析" },
        {
          id: 2,
          label: "三线分析",
          children: [
            { id: "YJJBNT", label: "永久基本农田" },
            { id: "CZKFBJ", label: "城镇开发边界" },
            { id: "STBHHX", label: "生态保护红线" },
          ],
        },
        // { id: "TDLYGH", label: "土地利用规划" },
        { id: "KZXXXGH", label: "控制性详细规划" },
      ];
    },
    updateScx() {
      UpdateScx().then((res) => {
        if (res.statuscode == 200) {
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.message);
        }
      });
    },
    setydlx() {
      this.ruleForm.yjydlx = this.$refs.ydcascader
        .getCheckedNodes()[0]
        .pathLabels.join(",");
      this.$refs.ydcascader.togglePopperVisible();
    },
    reset() {
      this.ruleForm = {
        xmmc: "",
        jsdw: "",
        xmlx: "",
        xzdw: "",
        ydxz_bsm: "",
        yjydlx: "",
        scxs: [],

        fwlx: 1,
        xzfw: "",
        xzmj: 0,
      };
      this.$refs.range.reset();
    },
    submitData() {
      //更新范围
      var _temp = this.$refs.range.getRange();
      this.ruleForm.xzfw = _temp.xzfw;
      this.ruleForm.xzmj = _temp.xzmj || hgxfx.xzmj;

      this.is_form()
        .then((res) => {
          // ElMessageBox.confirm("是否开始进行合规性检查?", "合规性检查", {
          //   confirmButtonText: "确定",
          //   cancelButtonText: "取消",
          //   type: "warning",
          // }).then(() => {
          this.$emit("updateParent", "loading", true);
          Add({ ...this.ruleForm }).then((res) => {
            if (res.success) {
              this.$emit("updateParent", "rzMc", this.ruleForm.xmmc);
              this.$emit("updateParent", "rzBsm", res.data);
              this.$emit("updateParent", "rwBsm", res.data);
            }
            this.$emit("updateParent", "loading", false);
          });
          // });
        })
        .catch((res) => {
          console.log("RES", res);
          // ElMessage.warning(res);
        });
    },
    is_form() {
      this.ruleForm.scxs = this.$refs.tree.getCheckedNodes(true).map((item) => {
        return item.id;
      });
      return new Promise((resolve, reject) => {
        if (this.ruleForm.xzmj == 0) {
          reject("请填写范围的数据！");
        }
        if (this.ruleForm.xmmc == "") {
          reject("请填写项目名称");
        }
        if (this.ruleForm.jsdw == "") {
          reject("请填写建设单位");
        }
        if (this.ruleForm.xmlx == "") {
          reject("请填写项目类型");
        }
        // if (this.ruleForm.ydxz_bsm ==  ("" || null)) {
        //    reject("请选择用地性质");
        // }
        if (this.ruleForm.scxs.length == 0) {
          reject("至少选择一个项目信息");
        }
        resolve(true);
      });
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.hgxsc {
  height: 100%;
  line-height: 40px;
  .rangDiv {
    width: 100%;
    // height: 100px;
    display: flex;
    justify-content: space-between;
  }
  .range {
    flex: 1;
    width: calc(100% - 100px);
    position: absolute;
    left: 100px;
  }

  .treeDiv {
    width: 100%;
    height: calc(100% - 390px);
    padding: 7px;
    margin-bottom: 10px;
    overflow-y: auto;
  }
}
</style>