<script lang="ts" setup>
|
import type { FormSchema } from '@jnpf/ui/form';
|
|
import type { CreateFormulaDraftParams, ParameterSlot } from '#/api/x/eln/formulas';
|
|
import { ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { createFormulaDraft } from '#/api/x/eln/formulas';
|
|
import ParameterTable from './ParameterTable.vue';
|
|
defineOptions({ name: 'ElnFormulaForm' });
|
|
const emit = defineEmits(['created', 'register']);
|
const { createMessage } = useMessage();
|
type EditableParameterSlot = ParameterSlot & { _clientKey?: string };
|
|
const parameters = ref<EditableParameterSlot[]>([]);
|
const schemas: FormSchema[] = [
|
{
|
component: 'Input',
|
componentProps: { maxlength: 200, placeholder: '请输入公式名称' },
|
field: 'gongshiMingcheng',
|
label: '公式名称',
|
rules: [{ message: '请输入公式名称', required: true, trigger: 'blur' }],
|
},
|
{ component: 'Input', componentProps: { maxlength: 200, placeholder: '请输入用途' }, field: 'yewuYongtu', label: '用途' },
|
{ component: 'Textarea', componentProps: { maxlength: 500, placeholder: '请输入备注', rows: 3, showCount: true }, field: 'beizhu', label: '备注' },
|
];
|
const [registerForm, { resetFields, validate }] = useForm({
|
baseColProps: { span: 24 },
|
labelWidth: 90,
|
schemas,
|
showActionButtonGroup: false,
|
});
|
const [registerModal, { changeOkLoading, closeModal }] = useModalInner(init);
|
|
async function init() {
|
parameters.value = [];
|
await resetFields();
|
}
|
|
async function handleSubmit() {
|
const values = await validate();
|
if (!values) return;
|
const payload: CreateFormulaDraftParams = {
|
beizhu: trimOrUndefined(values.beizhu),
|
gongshiMingcheng: values.gongshiMingcheng.trim(),
|
parameters: parameters.value.map(({ _clientKey, ...slot }) => slot),
|
yewuYongtu: trimOrUndefined(values.yewuYongtu),
|
};
|
changeOkLoading(true);
|
try {
|
const response = await createFormulaDraft(payload);
|
createMessage.success('公式创建成功');
|
closeModal();
|
emit('created', response.data);
|
} finally {
|
changeOkLoading(false);
|
}
|
}
|
|
function trimOrUndefined(value?: string) {
|
const trimmed = value?.trim();
|
return trimmed || undefined;
|
}
|
</script>
|
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" destroy-on-close :min-height="560" title="新增公式" width="960px" @ok="handleSubmit">
|
<BasicForm @register="registerForm" />
|
<ParameterTable v-model="parameters" status="DRAFT" />
|
</BasicModal>
|
</template>
|
