web_sh_audit/src/components/common/BottomForm/CustomModelDialog.vue

<template>
  <el-dialog
    :title="modelTitle ? modelTitle : '自定义模型'"
    :visible="outerDialogVisible"
    width="40%"
    center
  >
    <el-dialog
      title="请输入模型名称"
      width="20%"
      :visible="innerDialogVisible"
      append-to-body
      center
      ><div class="model-name">
        <div class="model-name-title">名称 :</div>
        <el-input v-model="inputName" placeholder="请输入模型名称"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm()">确认</el-button>
      </span>
    </el-dialog>
    <el-checkbox-group v-model="checkedList">
      <el-checkbox
        v-for="item in checkArr"
        :key="item"
        :label="item"
      ></el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <input
        v-if="overlayBtnShow"
        type="button"
        value="叠置分析"
        class="overlay-btn"
        @click="executeOverlay"
      />
      <el-button @click="clearDialogVisible()">取 消</el-button>
      <el-button type="primary" @click="saveModel()">保存模型</el-button>
    </span>
  </el-dialog>
</template>
<script>
/**
 * 底部菜单（自定义模型）组件
 * @author: Gao Lu
 * @Date: 2022.11.22
 */
export default {
  name: "CustomModelDialog",
  components: {},
  data() {
    return {
      outerDialogVisible: false,
      innerDialogVisible: false,
      overlayBtnShow: false,
      modelTitle: null,
      inputName: "自定义模型1",
      checkedList: [],
      checkArr: [
        "永久基本农田",
        "建设用地减量化",
        "一般耕地种林",
        "一般耕地",
        "基本农田被违规占用",
        "一般耕地抛荒",
        "高标准农田",
        "一般耕地被违规占用",
        "减量化复垦地块后种林",
      ],
    };
  },
  watch: {
    checkedList(val) {
      console.log(val, "checkedList");
    },
  },
  mounted() {
    // 监听自定义模型
    this.$bus.$on("customModelEvent", () => {
      this.customModelEvent();
    });

    // 监听模型修改事件
    this.$bus.$on("updateModel", (node) => {
      console.log("监听模型中");
      console.log(node, "节点数据");
      this.outerDialogVisible = true;
      this.checkedList = node.data.data;
      this.inputName = node.data.label;
      this.overlayBtnShow = true;
      this.modelTitle = node.data.label;
      this.$store.state.modelStatus = "modify";
    });
  },
  beforeDestroyed() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("customModelEvent");
    this.$bus.$off("updateModel");
    this.overlayBtnShow = false;
  },
  methods: {
    // 弹窗关闭时询问
    handleClose() {
      // if (this.outerDialogVisible) {
      //   this.$confirm("").then(() => {
      //     this.clearDialogVisible();
      //   });
      // }
    },
    clearDialogVisible() {
      this.outerDialogVisible = false;
      this.innerDialogVisible = false;
    },
    // 底部按钮自定义模型事件
    customModelEvent() {
      this.modelTitle = null;
      this.overlayBtnShow = false;
      this.$store.state.modelStatus = "create";
      this.outerDialogVisible = true;
      this.checkedList = [];
      this.inputName = "自定义模型1";
    },
    saveModel() {
      if (this.checkedList.length < 2) {
        this.$message.info("请至少选择两个类型!");
      } else {
        if (this.$store.state.modelStatus === "create") {
          this.innerDialogVisible = true;
        } else {
          this.confirm();
        }
      }
    },
    confirm() {
      this.$confirm("确认保存吗?").then(() => {
        this.$message.success("模型以保存");
        this.clearDialogVisible();
        // modify -- 改变数组类型
        if (this.$store.state.modelStatus === "modify") {
          this.$store.state.customModelsArr.map((v) => {
            if (v.name === this.inputName) {
              v.data = this.checkedList;
            }
          });
        }

        console.log(this.$store.state.customModelsArr, "先获取的模型数据");
        // create -- 创建新的数组
        if (this.$store.state.modelStatus === "create") {
          this.$store.state.customModelsArr.push({
            name: this.inputName,
            data: this.checkedList,
          });
        }
      });
    },
    // 执行叠置分析
    executeOverlay() {
      alert("正在开发中");
      // console.log("execute overlay");
    },
  },
};
</script>
<style lang="less" scoped>
.model-name {
  // pointer-events: auto;
  width: 100%;
  height: 100%;
  display: flex;
  &-title {
    width: 30%;
    height: 100%;
    color: #fff;
    font-size: 18px;
    line-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-input {
    width: 70%;
  }
}

.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.el-checkbox {
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  width: 27%;
  height: 30px;
  line-height: 30px;
  color: #e6e6e6;
  margin-right: 0;
}
.overlay-btn {
  width: 80px;
  height: 40px;
  position: absolute;
  left: 50px;
  bottom: 22px;
  border-radius: 4px;
  cursor: pointer;
  color: #e6e6e6;
  border: none;
  background: rgba(129, 140, 164, 1);
}
</style>