web-admin/src/views/order/task-manage/modifyTask.vue

<template>
  <a-modal
    v-model:visible="visible"
    title-align="start"
    :width="800"
    :footer="false"
    top="10vh"
    :align-center="false"
    @before-open="modalBeforeOpen"
  >
    <template #title> {{ title }} </template>

    <a-tabs
      v-if="isEdit"
      v-model:activeKey="compType"
      type="card-gutter"
      hide-content
    >
      <a-tab-pane key="rule" title="基础规则"> </a-tab-pane>
      <a-tab-pane key="time" title="预约时段"> </a-tab-pane>
      <a-tab-pane key="notice" title="考试说明"> </a-tab-pane>
    </a-tabs>

    <component
      :is="formComp"
      v-if="visible"
      :row-data="rowData"
      @cancel="close"
      @modified="modifiedHandle"
    ></component>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import useModal from '@/hooks/modal';
  import { TaskItem } from '@/api/types/order';

  import ruleForm from './ruleForm.vue';
  import timeForm from './timeForm.vue';
  import noticeForm from './noticeForm.vue';

  defineOptions({
    name: 'ModifyTask',
  });

  /* modal */
  const { visible, open, close } = useModal();
  defineExpose({ open, close });

  const props = defineProps<{
    rowData: TaskItem;
  }>();
  const emit = defineEmits(['modified']);

  const isEdit = computed(() => !!props.rowData.id);
  const title = computed(() => `${isEdit.value ? '编辑' : '新增'}任务`);

  const comps = {
    rule: ruleForm,
    time: timeForm,
    noitce: noticeForm,
  };

  const compType = ref('rule');
  const formComp = computed(() => comps[compType.value]);

  function modifiedHandle() {
    emit('modified');
    if (isEdit.value) return;
    close();
  }

  function modalBeforeOpen() {
    compType.value = 'rule';
  }
</script>