marking-cet-web/src/modules/admin-exam/manage/index.vue

<template>
  <div class="full flex direction-column exam-manage-view">
    <div class="p-t-base p-l-base fill-blank">
      <base-form :items="items" :model="model" :label-width="useVW(66)" size="small">
        <template #form-item-button>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button special @click="onCreateExam">创建考试</el-button>
        </template>
      </base-form>
    </div>
    <div class="p-base">
      <div class="p-base fill-blank">
        <base-table :data="data" :columns="columns">
          <template #column-operation="{ row }">
            <el-button type="primary" link @click="onEdit(row)">编辑</el-button>
            <el-popconfirm
              :width="useVW(220)"
              hide-icon
              :title="`确认${row.enable ? '禁用' : '启用'}考试?`"
              @confirm="toggleEnable(row)"
            >
              <template #reference>
                <el-button type="primary" link>
                  {{ row.enable ? '禁用' : '启用' }}
                </el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm :width="useVW(220)" hide-icon :title="`确认删除考试?`" @confirm="onDelete(row)">
              <template #reference>
                <el-button type="primary" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </base-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ExamManage">
/** 考试批次管理 */
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElButton, ElPopconfirm } from 'element-plus'
import BaseForm from '@/components/element/BaseForm.vue'
import BaseTable from '@/components/element/BaseTable.vue'
import useForm from '@/hooks/useForm'
import useTable from '@/hooks/useTable'
import useFetch from '@/hooks/useFetch'
import useVW from '@/hooks/useVW'
import { StatusMap } from '@/constants/dicts'

import type { EpFormItem, EpTableColumn } from 'global-type'
import type { ExtractMultipleApiParams, ExtractMultipleApiResponse } from '@/api/api'

const { push } = useRouter()

const model = reactive<ExtractMultipleApiParams<'getExamList'>>({ name: '', enable: void 0 })

const { defineColumn, _ } = useForm()

const onRow = defineColumn(_, 'row-1', { span: 5 })

const items: EpFormItem[] = [
  onRow({ label: '考试名称', slotType: 'input', prop: 'name', slot: { clearable: true } }),
  onRow({ label: '状态', slotType: 'select', prop: 'enable', slot: { clearable: true, options: StatusMap } }),
  onRow({ slotName: 'button' }),
]

const requestModel = reactive<ExtractMultipleApiParams<'getExamList'>>({ ...model })

/** 查询 */
function onSearch() {
  Object.assign(requestModel, { ...model })
}

/** 创建考试 */
function onCreateExam() {
  push({ name: 'EditExam' })
}

const { data, fetchTable } = useTable('getExamList', requestModel)

const columns: EpTableColumn<ExtractMultipleApiResponse<'getExamList'>>[] = [
  { prop: 'id', label: 'ID' },
  { prop: 'name', label: '考试名称' },
  { prop: 'enable', label: '状态', formatter: (row) => (row.enable ? '启用' : '禁用') },
  { prop: 'updateTime', label: '更新时间' },
  { label: '操作', slotName: 'operation' },
]

function onEdit(row: ExtractMultipleApiResponse<'getExamList'>) {
  push({ name: 'EditExam', params: { id: row.id } })
}

const { fetch: toggleEnableExam } = useFetch('toggleEnableExam')

function toggleEnable(row: ExtractMultipleApiResponse<'getExamList'>) {
  row.id && toggleEnableExam({ ids: [row.id], enable: !row.enable }).then(fetchTable)
}

const { fetch: deleteExam } = useFetch('deleteExam')

function onDelete(row: ExtractMultipleApiResponse<'getExamList'>) {
  row.id && deleteExam({ id: row.id }).then(fetchTable)
}
</script>

<style scoped lang="scss">
.exam-manage-view {
}
</style>