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

<template>
  <div class="hgxsc">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="选址范围:" prop="xzmj">
        <range type="hgxfx" :keys="['hx', 'sc']" class="range" ref="range" />
      </el-form-item>
      <!-- <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="site-title">
      <div class="siteCon">
        <div class="site_Icon"></div>
        <span>分析因子</span>
      </div>
      <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="bsm"
        :props="defaultProps"
        :default-expanded-keys="xz"
      >
      </el-tree>
    </div>
    <div class="bottomBtns">
      <span class="clearBtn" @click="reset">取消</span>
      <span class="sureBtn" @click="submitData">确定</span>
    </div>
  </div>
</template>

<script>
import { Add, GetScx, UpdateScx } from "@/api/ghss/hgxfx.js";
import { Message, MessageBox } 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: "ysmc",
      },
      ruleForm: {
        xmmc: "",
        jsdw: "",
        xmlx: "",
        // xzdw: "",
        ydxz_bsm: "",
        yjydlx: "",

        fwlx: 1,
        xzfw: "",
        xzmj: 0,
      },
      rules: {
        xzmj: [{ required: true, message: "请填写范围的数据" }],
        xmmc: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
        jsdw: [{ required: true, message: "请输入建设单位", trigger: "blur" }],
        xmlx: [{ required: true, message: "请输入项目类型", trigger: "blur" }],
      },

      options: [],
    };
  },
  mounted() {
    this.getKzx();
  },
  methods: {
    //获取检查要素
    getKzx() {
      GetScx().then((res) => {
        if (res) {
          this.treedata = this.tranListToTreeData(res.data, "0");
          res.data.forEach((item) => {
            if (item.kzxjb == 1) this.xz.push(item.bsm);
          });
          setTimeout(() => {
            this.$refs.tree.setCheckedKeys(this.xz);
          }, 1);
        }
      });
    },
    tranListToTreeData(list, pbsm) {
      var map = {};
      list.forEach((item) => {
        if (map[item.pbsm]) map[item.pbsm].push(item);
        else map[item.pbsm] = [item];
      });
      list.forEach((item) => {
        if (map[item.pbsm]) item.children = map[item.bsm];
      });
      map = list.filter((item) => {
        return item.pbsm == pbsm;
      });
      return map;
    },
    updateScx() {
      UpdateScx().then((res) => {
        if (res.statuscode == 200) {
          Message.success(res.message);
        } else {
          Message.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: "",
        scxList: [],

        fwlx: 1,
        xzfw: "",
        xzmj: 0,
      };
      this.$refs.range.reset();
      setTimeout(() => {
        this.$refs.tree.setCheckedKeys(this.xz);
      }, 1);
    },
    submitData() {
      //更新范围
      var _temp = this.$refs.range.getRange();
      this.ruleForm.xzfw = _temp.xzfw;
      this.ruleForm.xzmj = _temp.xzmj || hgxfx.xzmj;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.getCheckedNodes();
          if (this.ruleForm.scxList.length == 0) {
            Message.warning("至少选择一个项目信息");
          }
          MessageBox.confirm("是否开始进行合规性检查?", "合规性检查", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$emit("updateParent", "loading", true);
            Add({ ...this.ruleForm }).then((res) => {
              if (res.success) {
                this.$emit("updateParent", "nowObj", this.ruleForm);
                this.$emit("updateParent", "rzBsm", res.data);
                this.reset();
              } else {
                Message.warning(res.message);
              }
              this.$emit("updateParent", "loading", false);
            });
          });
        }
      });
    },
    getCheckedNodes() {
      // .getCheckedNodes(true) 是否只是叶子节点
      this.ruleForm.scxList = this.$refs.tree.getCheckedNodes().map((item) => {
        return { scxbsm: item.bsm };
      });
    },
  },
  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: 100%;
    // position: absolute;
    // left: 100px;
  }

  .treeDiv {
    width: 100%;
    height: calc(100% - 390px);
    padding: 7px;
    margin-bottom: 10px;
    overflow-y: auto;
  }
}
/deep/ .el-input .el-input--mini .el-input--suffix {
  width: 100%;
}
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-form-item__error {
  top: 32px !important;
}
</style>