teachcloud-print-web/src/modules/admin/components/ModifySchoolSet.vue

<template>
  <el-dialog
    class="modify-school-set"
    :visible.sync="modalIsShow"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    @opened="visibleChange"
  >
    <div class="mb-4 tab-btns">
      <el-button
        v-for="tab in tabs"
        :key="tab.val"
        size="medium"
        :type="curTab == tab.val ? 'primary' : 'default'"
        @click="selectMenu(tab.val)"
        >{{ tab.name }}
      </el-button>
    </div>

    <component :is="compName" :school="school"></component>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import SchoolSetCheck from "./school/SchoolSetCheck.vue";
import SchoolSetData from "./school/SchoolSetData.vue";
import SchoolSetMenu from "./school/SchoolSetMenu.vue";
import SchoolSetPaper from "./school/SchoolSetPaper.vue";
import SchoolSetRole from "./school/SchoolSetRole.vue";
import SchoolSetSync from "./school/SchoolSetSync.vue";

export default {
  name: "modify-school-set",
  components: {
    SchoolSetCheck,
    SchoolSetData,
    SchoolSetMenu,
    SchoolSetPaper,
    SchoolSetRole,
    SchoolSetSync
  },
  props: {
    school: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      curTab: "check",
      tabs: [
        {
          name: "用户验证配置",
          val: "check"
        },
        {
          name: "菜单管理",
          val: "menu"
        },
        {
          name: "角色管理",
          val: "role"
        },
        {
          name: "试卷规格配置",
          val: "paper"
        },
        {
          name: "同步配置",
          val: "sync"
        },
        {
          name: "数据还原",
          val: "data"
        }
      ]
    };
  },
  computed: {
    compName() {
      return `school-set-${this.curTab}`;
    },
    title() {
      return `学校设置--${this.school.name}`;
    }
  },
  methods: {
    visibleChange() {},
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    selectMenu(tab) {
      this.curTab = tab;
    }
  }
};
</script>