teachcloud-print-web/src/modules/admin/components/school/SchoolSetBase.vue

<template>
  <div class="school-set-base">
    <div v-for="tab in tabs" :key="tab.val" class="part-box mb-4">
      <div class="part-title">{{ tab.name }}</div>
      <component
        :is="getCompName(tab.val)"
        :school="school"
        :ref="tab.val"
        @config-changed="(isChanged) => handleConfigChanged(tab.val, isChanged)"
      ></component>
    </div>

    <div class="text-center mt-4">
      <el-button type="primary" @click="submit" :loading="loading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import SchoolSetCheck from "./SchoolSetCheck.vue";
import SchoolSetStdno from "./SchoolSetStdno.vue";
import SchoolSetRole from "./SchoolSetRole.vue";
import SchoolSetPaper from "./SchoolSetPaper.vue";
import SchoolSetTarget from "./SchoolSetTarget.vue";
import SchoolSetRecognition from "./SchoolSetRecognition.vue";
import SchoolSetRobot from "./SchoolSetRobot.vue";
import SchoolSetAi from "./SchoolSetAi.vue";

export default {
  name: "school-set-base",
  components: {
    SchoolSetCheck,
    SchoolSetStdno,
    SchoolSetRole,
    SchoolSetPaper,
    SchoolSetTarget,
    SchoolSetRecognition,
    SchoolSetRobot,
    SchoolSetAi,
  },
  props: {
    school: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      tabs: [
        {
          name: "用户验证配置",
          val: "check",
        },
        {
          name: "学号配置",
          val: "stdno",
        },
        {
          name: "角色管理",
          val: "role",
        },
        {
          name: "试卷规格配置",
          val: "paper",
        },
        {
          name: "课程目标",
          val: "target",
        },
        {
          name: "识别配置",
          val: "recognition",
        },
        {
          name: "机器人配置",
          val: "robot",
        },
        {
          name: "AI智能评卷",
          val: "ai",
        },
      ],
      // 记录各个组件的配置是否有变更
      configChangedMap: {},
    };
  },
  methods: {
    getCompName(val) {
      const map = {
        check: "SchoolSetCheck",
        stdno: "SchoolSetStdno",
        role: "SchoolSetRole",
        paper: "SchoolSetPaper",
        target: "SchoolSetTarget",
        recognition: "SchoolSetRecognition",
        robot: "SchoolSetRobot",
        ai: "SchoolSetAi",
      };
      return map[val];
    },
    handleConfigChanged(val, isChanged) {
      this.$set(this.configChangedMap, val, isChanged);
    },
    async submit() {
      if (this.loading) return;
      this.loading = true;
      try {
        const promises = Object.keys(this.configChangedMap)
          .filter((key) => this.configChangedMap[key])
          .map((key) => this.$refs[key][0].confirm());
        await Promise.all(promises);
        this.$message.success("保存成功");
        this.configChangedMap = {};
      } catch (error) {
        this.$message.error(error.message || "保存失败");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.school-set-base {
  padding: 20px;
}
</style>