real3d-portalsite/src/views/siteselection/components/yxyzPop.vue

<template>
  <div class="dialog">
    <el-dialog
      title="选址因子设置"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="close"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="6">
          <div class="yztitle">可选因子</div>
          <el-scrollbar class="left-tree">
            <el-tree
              :data="options"
              :props="defaultProps"
              highlight-current
              show-checkbox
              node-key="value"
              ref="tree"
            ></el-tree>
          </el-scrollbar>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg_purple">
            <el-button
              icon="el-icon-d-arrow-right"
              @click="turnLeftToRight"
            ></el-button>
            <el-button
              icon="el-icon-d-arrow-left"
              @click="turnRightToLeft"
            ></el-button>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="yztitle">已选因子</div>
          <el-table
            :data="dialogData"
            border
            class="right-table scroll-style"
            size="small"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="yxyzmc" label="因子名称"> </el-table-column>
            <el-table-column prop="spatial_type" label="条件" width="150">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.spatial_type"
                  placeholder="请选择"
                  class="input-style"
                  v-if="
                    scope.row.spatial_type == 'identity' ||
                    scope.row.spatial_type == 'n_identity'
                  "
                >
                  <el-option
                    v-for="item in conditionList1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="scope.row.spatial_type"
                  placeholder="请选择"
                  class="input-style"
                  v-if="
                    scope.row.spatial_type == 'contain' ||
                    scope.row.spatial_type == 'n_contain'
                  "
                >
                  <el-option
                    v-for="item in conditionList2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="yxz" label="约束值(m)" width="120">
              <template slot-scope="scope">
                <el-input
                  Onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
                  v-model="scope.row.yxz"
                  placeholder="距离"
                  class="input-style font-14"
                ></el-input>
                <!-- :disabled="scope.row.condition == 'F'" -->
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetFxyzList } from "../../../api/ghss/ghxz.js";
export default {
  components: {},
  props: {
    tableData: {
      type: Array,
    },
  },

  data() {
    return {
      defaultProps: {
        children: "children",
        label: "yxyzmc",
      },
      dialogVisible: false,
      options: [],
      kxyzList: [],
      tempList: [],
      optionsTemp: [],
      selectdialogData: [],
      dialogData: [],
      conditionList1: [
        { label: "范围内", value: "identity" },
        { label: "范围外", value: "n_identity" },
      ],
      conditionList2: [
        { label: "距离包含", value: "contain" },
        { label: "距离不包含", value: "n_contain" },
      ],
    };
  },
  computed: {
    conditionList(val) {
      if (val == "identity") {
        return this.conditionList1;
      } else {
        return this.conditionList2;
      }
    },
  },
  mounted() {
    this.GetFxyzList();
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    GetFxyzList() {
      GetFxyzList().then((res) => {
        this.kxyzList = res.data;
        this.tempList = JSON.parse(JSON.stringify(res.data));
        this.getTreeList();
      });
    },

    getTreeList() {
      function arrayToTreeLoop(nodes) {
        const map = {};
        const tree = [];
        for (const node of nodes) {
          map[node.bsm] = { ...node, children: [] };
        }
        for (const node of Object.values(map)) {
          if (node.parent_bsm === null) {
            tree.push(node);
          } else {
            map[node.parent_bsm].children.push(node);
          }
        }
        return tree;
      }
      this.options = arrayToTreeLoop(this.kxyzList);
      this.optionsTemp = JSON.parse(JSON.stringify(this.options));
    },

    getList() {
      // yzlist().then((res) => {
      //   if (res.success) {
      this.tempList.forEach((item) => {
        var num = item.lx == "FZXZ01" ? 0 : item.lx == "FZXZ02" ? 1 : 2;
        this.options[num].children.push({
          type: num,
          value: item.bsm,
          label: item.yxyzmc,
          sjlx: item.sjlx,
          yztj: item.yztj,
          sjy: item.sjy,
        });
      });
      this.optionsTemp = JSON.parse(JSON.stringify(this.options));
      // }
      // });
    },

    setTable(selectdata) {
      let tableList = [];
      selectdata.forEach((item) => {
        console.log(item, "item----");
        tableList.push({
          // id: item.bsm,
          // name: item.yxyzmc,
          // condition: item.spatial_type,
          // value: "",
          // sjy: item.has_yxz,
          // sjlx: item.spatial_type,
          yzbsm: item.bsm,
          yxyzmc: item.yxyzmc,
          spatial_type: item.spatial_type,
          yxz: "",
        });
      });
      tableList.forEach((item) => {
        this.resetTree(this.options, item);
      });
      this.removeChildrenZero(this.options);
      return tableList;
    },
    resetTree(data, item1) {
      data.forEach((item, index) => {
        if (item.bsm == item1.id) {
          data.splice(index, 1);
        }
        if (item.children != undefined && item.children.length != 0) {
          this.resetTree(item.children, item1);
        }
      });
    },

    removeChildrenZero(data) {
      data.forEach((item, index) => {
        if (item.children != undefined && item.children.length == 0) {
          if (item.disabled != undefined) {
            item.disabled = true;
          }
        }
        if (item.children != undefined && item.children.length > 0) {
          this.removeChildrenZero(item.children);
        }
      });
    },

    turnLeftToRight() {
      if (this.$refs.tree.getCheckedNodes().length == 0) {
        this.$message.warning("请勾选可选因子");
        return false;
      }

      let list = this.$refs.tree.getCheckedNodes().filter((item) => {
        return item.children == undefined || item.children.length == 0;
      });
      list = this.setTable(list);
      this.dialogData = [...this.dialogData, ...list];
    },
    turnRightToLeft() {
      if (this.selectdialogData.length == 0) {
        this.$message.warning("请勾选已选因子");
        return false;
      }
      let list = this.dialogData;
      this.selectdialogData.forEach((item) => {
        list = list.filter((item1) => {
          return item.id != item1.id;
        });
      });
      this.dialogData = list;

      this.options = JSON.parse(JSON.stringify(this.optionsTemp));
      list.forEach((item) => {
        this.resetTree(this.options, item);
      });
    },
    handleSelectionChange(val) {
      this.selectdialogData = val;
    },
    submit() {
      var sign = true;
      this.dialogData.forEach((item) => {
        item.type && item.value == "" && (sign = false);
      });
      if (sign) {
        // parent.emit("update:tableData", this.dialogData);
        // parent.emit("update:dialogVisible", false);
        this.$parent.tableData = this.dialogData;
        this.dialogVisible = false;
      } else {
        this.$message.warning("请将信息补充完整！");
      }
    },
    setData(data) {
      data.filter((item) => {
        this.clearitem(item);
      });
    },
    clearitem(item) {
      this.options[0].children = this.options[0].children.filter((item1) => {
        return item.id != item1.value;
      });
      this.options[1].children = this.options[1].children.filter((item1) => {
        return item.id != item1.value;
      });
      this.options[0].children.length == 0
        ? (this.options[0].disabled = true)
        : (this.options[0].disabled = false);
      this.options[1].children.length == 0
        ? (this.options[1].disabled = true)
        : (this.options[1].disabled = false);
    },
  },
  watch: {
    dialogVisible(oldVal, newVal) {
      if (this.tableData.length == []) {
        // 重置时，树的数据恢复
        this.dialogData = [];
        this.options = JSON.parse(JSON.stringify(this.optionsTemp));
        this.selectdialogData = [];
      } else {
        // 选择模板时，生成新的树
        this.dialogData = JSON.parse(JSON.stringify(this.tableData));
        this.setData(this.dialogData);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hgxsc {
  height: 100%;
}
.yztitle {
  color: #fff !important;
}

.dialog {
  /deep/.el-dialog__body {
    color: #fff !important;
  }
  .left-tree {
    height: 400px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #ddd;
    .el-tree {
      margin-top: 10px;
      .el-tree-node__content {
        height: 35px;
        line-height: 35px;
      }
    }
  }
  /deep/.el-dialog__body {
    padding: 10px 30px;
  }

  .bg_purple {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    .el-button + .el-button {
      margin-left: 0;
      margin-top: 20px;
    }
  }
  .right-table {
    margin-top: 10px;
    height: 400px;
    /deep/ .el-table__inner-wrapper {
      height: 100%;
    }
    /deep/.el-table__header-wrapper,
    .el-table__header {
      height: 40px;
    }
    /deep/.el-table__body-wrapper {
      height: calc(100% - 40px);
      overflow-y: auto;
    }
  }
}
/deep/.el-dialog__body {
  color: #fff !important;
}
</style>