<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { SignModeItem } from './types';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { deleteSignMode, getSignModeList, setSignModeEnabled } from '#/api/x/tms/signMode';
|
|
import Form from './Form.vue';
|
import { ENABLE_OPTIONS, labelOfEnabled, labelOfYesNo } from './constants';
|
|
defineOptions({ name: 'TmsSignMode' });
|
|
const { createMessage } = useMessage();
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
|
const columns: BasicColumn[] = [
|
{ title: '方式编码', dataIndex: 'modeCode', width: 140 },
|
{ title: '方式名称', dataIndex: 'modeName', width: 140 },
|
{
|
title: '要点阅读秒数',
|
dataIndex: 'tipSeconds',
|
width: 130,
|
align: 'center',
|
customRender: ({ record }) => `${(record as SignModeItem).tipSeconds ?? 0} 秒`,
|
},
|
{
|
title: '须匹配名单',
|
dataIndex: 'matchRoster',
|
width: 120,
|
align: 'center',
|
customRender: ({ record }) => labelOfYesNo((record as SignModeItem).matchRoster),
|
},
|
{
|
title: '状态',
|
dataIndex: 'enabled',
|
width: 90,
|
align: 'center',
|
slots: { default: 'enabled' },
|
},
|
{ title: '备注', dataIndex: 'remark', minWidth: 220 },
|
];
|
|
const [registerTable, { reload }] = useVxeTable({
|
api: fetchList,
|
columns,
|
immediate: true,
|
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: ENABLE_OPTIONS },
|
},
|
],
|
},
|
actionColumn: {
|
width: 180,
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
},
|
});
|
|
async function fetchList(params: Record<string, any>) {
|
return { data: await getSignModeList(params) };
|
}
|
|
function handleAdd() {
|
openFormModal(true, {});
|
}
|
|
function handleEdit(record: SignModeItem) {
|
openFormModal(true, { id: record.id });
|
}
|
|
async function handleToggleEnabled(record: SignModeItem) {
|
const next = record.enabled === '1' ? '0' : '1';
|
const action = next === '1' ? '启用' : '停用';
|
try {
|
await setSignModeEnabled(record.id, next);
|
createMessage.success(`已${action}`);
|
reload();
|
} catch (e: any) {
|
createMessage.error(e?.message || `${action}失败`);
|
}
|
}
|
|
async function handleDelete(record: SignModeItem) {
|
try {
|
await deleteSignMode(record.id);
|
createMessage.success('删除成功');
|
reload();
|
} catch (e: any) {
|
createMessage.error(e?.message || '删除失败');
|
}
|
}
|
|
function getTableActions(record: SignModeItem): ActionItem[] {
|
const enableLabel = record.enabled === '1' ? '停用' : '启用';
|
return [
|
{ label: '编辑', onClick: handleEdit.bind(null, record) },
|
{
|
label: enableLabel,
|
modelConfirm: {
|
content: `确定${enableLabel}签到方式「${record.modeName}」吗？`,
|
onOk: handleToggleEnabled.bind(null, record),
|
},
|
},
|
{
|
label: '删除',
|
color: 'error',
|
modelConfirm: {
|
content: `确定删除签到方式「${record.modeName}」吗？`,
|
onOk: handleDelete.bind(null, record),
|
},
|
},
|
];
|
}
|
</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'">
|
{{ labelOfEnabled(record.enabled) }}
|
</a-tag>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Form @register="registerForm" @reload="reload" />
|
</div>
|
</template>
|
