<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { FormulaDetail, FormulaListItem, FormulaPageQuery } from '#/api/x/eln/formulas';
|
|
import { ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useDrawer } from '@jnpf/ui/drawer';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { BasicModal, useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { disableFormula, enableFormula, getFormulaPage } from '#/api/x/eln/formulas';
|
|
import FormulaForm from './FormulaForm.vue';
|
import VersionDrawer from './VersionDrawer.vue';
|
|
defineOptions({ name: 'ElnFormulaCatalog' });
|
|
type FormulaChange = 'disable' | 'enable';
|
|
const { createMessage } = useMessage();
|
const [registerFormulaForm, { openModal: openFormulaForm }] = useModal();
|
const [registerReasonModal, { closeModal: closeReasonModal, openModal: openReasonModal }] = useModal();
|
const [registerVersionDrawer, { openDrawer: openVersionDrawer }] = useDrawer();
|
const reason = ref('');
|
const pendingChange = ref<{ formula: FormulaListItem; type: FormulaChange }>();
|
|
const columns: BasicColumn[] = [
|
{ dataIndex: 'gongshiBianma', minWidth: 210, title: '公式编码', slots: { default: 'gongshiBianma' } },
|
{ dataIndex: 'gongshiMingcheng', minWidth: 150, title: '名称' },
|
{ dataIndex: 'yewuYongtu', minWidth: 130, title: '用途' },
|
{ dataIndex: 'dangqianBanbenHao', title: '当前版本', width: 100, slots: { default: 'dangqianBanbenHao' } },
|
{ dataIndex: 'zuixinFabuBanbenHao', title: '最新发布版本', width: 120, slots: { default: 'zuixinFabuBanbenHao' } },
|
{ dataIndex: 'bizEnabled', title: '启用状态', width: 100, slots: { default: 'bizEnabled' } },
|
{ align: 'right', dataIndex: 'mubanYinyongShu', title: '模板引用数', width: 110 },
|
{ dataIndex: 'gengxinShijian', format: 'date|YYYY-MM-DD HH:mm:ss', title: '更新时间', width: 165 },
|
];
|
|
const [registerSearchForm, { getFieldsValue, resetFields }] = useForm({
|
baseColProps: { lg: 8, md: 12, sm: 12, xl: 6, xs: 24 },
|
compact: true,
|
labelWidth: 76,
|
schemas: [
|
{ component: 'Input', componentProps: { placeholder: '公式编码或名称', submitOnPressEnter: true }, field: 'keyword', label: '关键字' },
|
{
|
component: 'Select',
|
componentProps: {
|
allowClear: true,
|
options: [
|
{ fullName: '启用', id: 'enabled' },
|
{ fullName: '停用', id: 'disabled' },
|
],
|
placeholder: '全部',
|
},
|
field: 'bizEnabled',
|
label: '状态',
|
},
|
],
|
showActionButtonGroup: true,
|
showAdvancedButton: false,
|
});
|
|
const [registerTable, { reload }] = useVxeTable({
|
actionColumn: { dataIndex: 'action', fixed: 'right', title: '操作', width: 180 },
|
api: fetchFormulaPage,
|
beforeFetch: normalizeQuery,
|
columns,
|
immediate: true,
|
pagination: { pageSize: 20, pageSizeOptions: ['20', '50', '100'], showQuickJumper: true, showSizeChanger: true, showTotal: (total) => `共 ${total} 个公式` },
|
rowKey: 'id',
|
showIndexColumn: false,
|
});
|
|
function normalizeQuery(raw: Record<string, unknown>): FormulaPageQuery {
|
const query: Record<string, unknown> = { ...raw };
|
if (typeof query.keyword === 'string') query.keyword = query.keyword.trim();
|
if (!query.keyword) delete query.keyword;
|
if (!query.bizEnabled) delete query.bizEnabled;
|
query.currentPage = Math.max(1, Number(query.currentPage) || 1);
|
query.pageSize = Math.max(1, Number(query.pageSize) || 20);
|
return query as unknown as FormulaPageQuery;
|
}
|
|
async function fetchFormulaPage(query: FormulaPageQuery) {
|
const response = await getFormulaPage(query);
|
return { data: response.data };
|
}
|
|
function handleSearch() {
|
reload({ page: 1, searchInfo: getFieldsValue() });
|
}
|
|
async function handleReset() {
|
await resetFields();
|
reload({ page: 1, searchInfo: {} });
|
}
|
|
function handleFormulaCreated(formula: FormulaDetail) {
|
reload();
|
openVersionDrawer(true, { formulaId: formula.id, openDraft: true });
|
}
|
|
function getTableActions(formula: FormulaListItem): ActionItem[] {
|
const actions: ActionItem[] = [{ label: '版本', onClick: () => openVersionDrawer(true, { formulaId: formula.id }) }];
|
if (formula.bizEnabled === 'enabled') actions.push({ color: 'error', label: '停用', onClick: () => requestFormulaChange(formula, 'disable') });
|
else actions.push({ color: 'success', label: '启用', onClick: () => requestFormulaChange(formula, 'enable') });
|
return actions;
|
}
|
|
function requestFormulaChange(formula: FormulaListItem, type: FormulaChange) {
|
reason.value = '';
|
pendingChange.value = { formula, type };
|
openReasonModal(true);
|
}
|
|
async function confirmFormulaChange() {
|
const change = pendingChange.value;
|
const actualReason = reason.value.trim();
|
if (!change || !actualReason) {
|
createMessage.warning('请输入操作原因');
|
return;
|
}
|
await (change.type === 'enable' ? enableFormula(change.formula.id, actualReason) : disableFormula(change.formula.id, actualReason));
|
createMessage.success(change.type === 'enable' ? '公式已启用' : '公式已停用');
|
closeReasonModal();
|
reload();
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-search-box">
|
<BasicForm @register="registerSearchForm" @reset="handleReset" @submit="handleSearch" />
|
</div>
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="openFormulaForm(true, {})">新增公式</a-button>
|
</template>
|
<template #gongshiBianma="{ record }">
|
<span :title="record.gongshiBianma">{{ record.gongshiBianma }}</span>
|
</template>
|
<template #dangqianBanbenHao="{ record }">{{ record.dangqianBanbenHao ? `V${record.dangqianBanbenHao}` : '-' }}</template>
|
<template #zuixinFabuBanbenHao="{ record }">{{ record.zuixinFabuBanbenHao ? `V${record.zuixinFabuBanbenHao}` : '-' }}</template>
|
<template #bizEnabled="{ record }">
|
<a-tag :color="record.bizEnabled === 'enabled' ? 'success' : 'default'">{{ record.bizEnabled === 'enabled' ? '启用' : '停用' }}</a-tag>
|
</template>
|
<template #action="{ record }"><TableAction :actions="getTableActions(record)" /></template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<FormulaForm @created="handleFormulaCreated" @register="registerFormulaForm" />
|
<VersionDrawer @register="registerVersionDrawer" @reload="reload" />
|
<BasicModal @register="registerReasonModal" :title="pendingChange?.type === 'enable' ? '启用公式' : '停用公式'" destroy-on-close @ok="confirmFormulaChange">
|
<a-form-item label="操作原因" required>
|
<a-textarea v-model:value="reason" :maxlength="500" :rows="4" placeholder="请输入操作原因" show-count />
|
</a-form-item>
|
</BasicModal>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
:deep(.jnpf-vxe-table) {
|
min-width: 0;
|
}
|
</style>
|
