teachcloud-print-web/src/modules/target/components/target-score/SelectBlueDimensionDialog.vue

<template>
  <el-dialog
    class="select-blue-dimension-dialog"
    :visible.sync="modalIsShow"
    title="选择知识点"
    top="10vh"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
  >
    <el-tree
      v-if="treeData.length"
      ref="treeRef"
      :data="treeData"
      show-checkbox
      check-on-click-node
      node-key="kid"
      :props="defaultProps"
      @check-change="updateTreeStatus"
    >
    </el-tree>

    <div slot="footer">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "select-blue-dimension-dialog",
  props: {
    selectedData: {
      type: Array,
      default() {
        return [];
      },
    },
    treeData: {
      type: Array,
      default() {
        return [];
      },
    },
    unuseTargets: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    visibleChange() {
      this.$refs.treeRef.setCheckedKeys(this.selectedData);

      this.$nextTick(() => {
        this.updateTreeStatus();
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    updateTreeStatus() {
      const selectedNodes = this.$refs.treeRef.getCheckedNodes(false, true);
      const targetNodes = selectedNodes.filter(
        (item) => item.children && item.children.length
      );
      const selectTargetId = targetNodes.length ? targetNodes[0].id : "";

      this.treeData.forEach((item) => {
        if (this.unuseTargets.includes(item.id)) {
          item.disabled = true;
        } else {
          item.disabled = selectTargetId ? item.id !== selectTargetId : false;
        }
        item.children.forEach((elem) => {
          elem.disabled = item.disabled;
        });
      });
    },
    submit() {
      const selectedNodes = this.$refs.treeRef.getCheckedNodes(false, true);

      if (!selectedNodes.length) {
        this.$message.error("请选择知识点");
        return;
      }

      const targetNodes = selectedNodes.filter(
        (item) => item.children && item.children.length
      );
      if (targetNodes.length > 1) {
        this.$message.error("只能选择一个课程目标的知识点");
        return;
      }

      const dimensionIds = selectedNodes
        .filter((item) => !item.children)
        .map((item) => item.id);

      this.$emit(
        "confirm",
        targetNodes.map((item) => {
          return {
            targetId: item.id,
            targetName: item.name,
            dimensionList: item.children
              .filter((ditem) => dimensionIds.includes(ditem.id))
              .map((dimension) => {
                return {
                  dimensionId: dimension.id,
                  dimensionCode: dimension.code,
                  dimensionName: dimension.name,
                };
              }),
          };
        })
      );
      this.cancel();
    },
  },
};
</script>