stmms-web-admin/src/views/exam/IssuePaperTypeDialog.vue

<template>
  <el-dialog
    v-model="visible"
    title="问题卷分类管理"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="10vh"
    append-to-body
    @close="handleClose"
    @open="modalBeforeOpen"
  >
    <div class="issue-type-content">
      <!-- 操作按钮 -->
      <div class="action-bar">
        <el-button type="primary" @click="onAdd">新增</el-button>
      </div>

      <!-- 表格 -->
      <el-table :data="typeList" :loading="loading" class="type-table">
        <el-table-column property="id" label="编号" width="80" />
        <el-table-column property="name" label="分类名称" />
        <el-table-column property="type" label="类型" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" link @click="onEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              link
              type="danger"
              @click="onDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer> </template>
  </el-dialog>

  <!-- 新增/编辑问题卷分类弹窗 -->
  <ModifyIssuePaperType
    ref="modifyTypeRef"
    :row-data="curRow"
    :exam-id="examId"
    @modified="getTypeList"
  />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import type { IssuePaperTypeItem } from '@/api/types/issue-paper';
  import {
    getIssuePaperTypeList,
    deleteIssuePaperType,
  } from '@/api/issue-paper';
  import useModal from '@/hooks/modal';
  import useLoading from '@/hooks/loading';
  import { modalConfirm } from '@/utils/ui';

  import ModifyIssuePaperType from './ModifyIssuePaperType.vue';

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

  interface Props {
    examId: number;
  }

  const props = withDefaults(defineProps<Props>(), {
    examId: 0,
  });

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

  const { loading, setLoading } = useLoading();

  // 问题卷分类列表
  const typeList = ref<IssuePaperTypeItem[]>([]);

  // 获取问题卷分类列表
  async function getTypeList() {
    if (!props.examId) return;

    setLoading(true);
    try {
      const result = await getIssuePaperTypeList(props.examId);
      typeList.value = result;
    } catch (error) {
      console.error('获取问题卷分类列表失败:', error);
      ElMessage.error('获取问题卷分类列表失败');
    } finally {
      setLoading(false);
    }
  }

  // 新增/编辑相关
  const curRow = ref({} as IssuePaperTypeItem);
  const modifyTypeRef = ref();

  function onAdd() {
    curRow.value = {} as IssuePaperTypeItem;
    modifyTypeRef.value?.open();
  }

  function onEdit(row: IssuePaperTypeItem) {
    curRow.value = row;
    modifyTypeRef.value?.open();
  }

  // 删除
  async function onDelete(row: IssuePaperTypeItem) {
    const confirm = await modalConfirm(
      `确定要删除分类"${row.name}"吗？`,
      '删除确认'
    ).catch(() => false);
    if (!confirm) return;

    try {
      setLoading(true);
      await deleteIssuePaperType(row.id);
      ElMessage.success('删除成功');
      getTypeList();
    } catch (error) {
      console.log('删除失败', error);
    } finally {
      setLoading(false);
    }
  }

  const handleClose = () => {
    // 清理数据
  };

  /* init modal */
  function modalBeforeOpen() {
    getTypeList();
  }
</script>

<style scoped>
  .issue-type-content {
    min-height: 400px;
  }

  .action-bar {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-start;
  }

  .type-table {
    width: 100%;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
</style>