web-admin/src/views/base/common-rule/index.vue

<template>
  <div class="common-rule">
    <div class="tab-btns">
      <a-button
        v-for="item in menus"
        :key="item.id"
        :type="item.id == curMenu.id ? 'primary' : undefined"
        @click="selectMenu(item)"
        >{{ item.name }}</a-button
      >
    </div>
    <component
      :is="curMenu.component"
      v-if="permissions.button_add"
      ref="ruleDetailRef"
    ></component>
  </div>
</template>

<script setup lang="ts">
  import { Message } from '@arco-design/web-vue';
  import { ref, shallowRef } from 'vue';
  import usePermission from '@/hooks/permission';

  import RuleExam from './RuleExam.vue';
  import RulePackage from './RulePackage.vue';
  import RuleSign from './RuleSign.vue';

  defineOptions({
    name: 'CommonRule',
  });
  const { permissions } = usePermission();

  const menus = shallowRef([
    { id: '1', name: '考务规则配置', component: RuleExam },
    { id: '2', name: '卷袋贴字段配置', component: RulePackage },
    { id: '3', name: '签到表字段配置', component: RuleSign },
  ]);
  const curMenu = shallowRef({});
  const ruleDetailRef = ref(null);

  function selectMenu(item) {
    if (
      curMenu.value.id === '1' &&
      item.id !== '1' &&
      !ruleDetailRef.value?.checkRuleExist()
    ) {
      Message.error('请先保存考务规则配置！');
      return;
    }
    curMenu.value = item;
  }
  selectMenu(menus.value[0]);
</script>