<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { EvalModeItem } from './types';
|
|
import { onMounted, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { deleteEvalMode, getEvalModeList, setEvalModeEnabled } from '#/api/x/tms/evalMode';
|
import { useBaseStore } from '#/store';
|
import {
|
TMS_DIC,
|
TMS_DIC_FIELD_NAMES,
|
labelOfDic,
|
loadTmsDic,
|
type TmsDicOpt,
|
} from '#/views/x/tms/shared/dic';
|
|
import Form from './Form.vue';
|
|
defineOptions({ name: 'TmsEvalMode' });
|
|
const { createMessage } = useMessage();
|
const baseStore = useBaseStore();
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
|
const yesNoOpts = ref<TmsDicOpt[]>([]);
|
const enableOpts = ref<TmsDicOpt[]>([]);
|
|
const columns: BasicColumn[] = [
|
{ title: '方式编码', dataIndex: 'modeCode', width: 120 },
|
{ title: '方式名称', dataIndex: 'modeName', width: 140 },
|
{
|
title: '需要试卷',
|
dataIndex: 'needPaper',
|
width: 100,
|
align: 'center',
|
customRender: ({ record }) => labelOfDic(yesNoOpts.value, (record as EvalModeItem).needPaper),
|
},
|
{
|
title: '需要提问预设',
|
dataIndex: 'needQuiz',
|
width: 120,
|
align: 'center',
|
customRender: ({ record }) => labelOfDic(yesNoOpts.value, (record as EvalModeItem).needQuiz),
|
},
|
{
|
title: '需要实操评分',
|
dataIndex: 'needPractice',
|
width: 120,
|
align: 'center',
|
customRender: ({ record }) => labelOfDic(yesNoOpts.value, (record as EvalModeItem).needPractice),
|
},
|
{
|
title: '状态',
|
dataIndex: 'enabled',
|
width: 90,
|
align: 'center',
|
slots: { default: 'enabled' },
|
},
|
{ title: '备注', dataIndex: 'remark', minWidth: 200 },
|
];
|
|
const [registerTable, { reload, getForm }] = useVxeTable({
|
api: fetchList,
|
columns,
|
immediate: false,
|
rowKey: 'id',
|
useSearchForm: true,
|
formConfig: {
|
baseColProps: { span: 6 },
|
compact: true,
|
schemas: [
|
{
|
field: 'keyword',
|
label: '关键词',
|
component: 'Input',
|
componentProps: { placeholder: '编码/名称', submitOnPressEnter: true },
|
},
|
{
|
field: 'enabled',
|
label: '状态',
|
component: 'Select',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请选择',
|
options: enableOpts.value,
|
fieldNames: TMS_DIC_FIELD_NAMES,
|
},
|
},
|
],
|
},
|
actionColumn: {
|
width: 180,
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
},
|
});
|
|
onMounted(async () => {
|
yesNoOpts.value = await loadTmsDic(baseStore, TMS_DIC.yesNo);
|
enableOpts.value = await loadTmsDic(baseStore, TMS_DIC.enableStatus);
|
getForm()?.updateSchema?.({
|
field: 'enabled',
|
componentProps: {
|
allowClear: true,
|
placeholder: '请选择',
|
options: enableOpts.value,
|
fieldNames: TMS_DIC_FIELD_NAMES,
|
},
|
});
|
reload();
|
});
|
|
async function fetchList(params: Record<string, any>) {
|
return { data: await getEvalModeList(params) };
|
}
|
|
function handleAdd() {
|
openFormModal(true, {});
|
}
|
|
function handleEdit(record: EvalModeItem) {
|
openFormModal(true, { id: record.id });
|
}
|
|
async function handleToggleEnabled(record: EvalModeItem) {
|
const next = record.enabled === '1' ? '0' : '1';
|
const action = next === '1' ? '启用' : '停用';
|
try {
|
await setEvalModeEnabled(record.id, next);
|
createMessage.success(`已${action}`);
|
reload();
|
} catch (e: any) {
|
createMessage.error(e?.message || `${action}失败`);
|
}
|
}
|
|
async function handleDelete(record: EvalModeItem) {
|
if (record.enabled !== '0') {
|
createMessage.warning('请先停用后再删除');
|
return;
|
}
|
try {
|
await deleteEvalMode(record.id);
|
createMessage.success('删除成功');
|
reload();
|
} catch (e: any) {
|
createMessage.error(e?.message || '删除失败');
|
}
|
}
|
|
function getTableActions(record: EvalModeItem): ActionItem[] {
|
const enableLabel = record.enabled === '1' ? '停用' : '启用';
|
const actions: ActionItem[] = [
|
{ label: '编辑', onClick: handleEdit.bind(null, record) },
|
{
|
label: enableLabel,
|
modelConfirm: {
|
content: `确定${enableLabel}考核方式「${record.modeName}」吗？`,
|
onOk: handleToggleEnabled.bind(null, record),
|
},
|
},
|
];
|
if (record.enabled === '0') {
|
actions.push({
|
label: '删除',
|
color: 'error',
|
modelConfirm: {
|
content: `确定删除考核方式「${record.modeName}」吗？`,
|
onOk: handleDelete.bind(null, record),
|
},
|
});
|
}
|
return actions;
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="handleAdd">新增</a-button>
|
</template>
|
<template #enabled="{ record }">
|
<a-tag :color="record.enabled === '1' ? 'success' : 'default'">
|
{{ labelOfDic(enableOpts, record.enabled) }}
|
</a-tag>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Form @register="registerForm" @reload="reload" />
|
</div>
|
</template>
|
