feat: 新增产品编辑功能,完善产品表单及验证规则

This commit is contained in:
2025-12-22 00:46:16 +07:00
parent aaf76f83e1
commit 9ee1f1090e
3 changed files with 143 additions and 8 deletions

View File

@@ -24,7 +24,10 @@ const form = ref<Body>({
name: '',
code: '',
categoryId: '',
description: ''
description: '',
estimatedValue: '',
totalSupplyLimit: '',
proofDocuments: ''
});
const rules: FormRules = {

View File

@@ -0,0 +1,111 @@
<script lang="ts" setup>
import { ref, useTemplateRef } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import type { Treaty } from '@elysiajs/eden';
import { client, safeClient } from '@/service/api';
defineOptions({ name: 'RwaProductEdit' });
const props = defineProps<{
data: Treaty.Data<typeof client.api.admin.rwa.issuance.products.post>;
}>();
const emit = defineEmits<{
(e: 'close'): void;
}>();
type Body = CommonType.TreatyBody<typeof client.api.admin.rwa.issuance.products.post>;
const formInst = useTemplateRef<FormInst>('formInst');
const { data: categories } = safeClient(
client.api.admin.rwa.category.categories.get({
query: {
pageIndex: 1,
pageSize: 9999
}
})
);
const form = ref<Body>({
name: props.data.name,
code: props.data.code,
categoryId: props.data.categoryId,
description: props.data.description,
estimatedValue: props.data.estimatedValue,
totalSupplyLimit: props.data.totalSupplyLimit,
proofDocuments: props.data.proofDocuments
});
const rules: FormRules = {
name: [{ required: true, message: '请输入产品名称', trigger: ['blur', 'input'] }],
code: [{ required: true, message: '请输入产品编号', trigger: ['blur', 'input'] }],
categoryId: [{ required: true, message: '请输入产品类型', trigger: ['blur', 'input'] }],
estimatedValue: [{ required: true, message: '请输入产品估值', trigger: ['blur', 'input'] }],
totalSupplyLimit: [{ required: true, message: '请输入总发行量', trigger: ['blur', 'input'] }]
};
function handleSubmit() {
formInst.value?.validate(async errors => {
if (!errors) {
await safeClient(
client.api.admin.rwa.issuance.products.post({
...form.value
})
);
emit('close');
}
});
}
</script>
<template>
<div class="my-10">
<NForm
ref="formInst"
:model="form"
label-width="auto"
label-placement="left"
:rules="rules"
require-mark-placement="left"
>
<NFormItem path="name" label="产品名称">
<NInput v-model:value="form.name" />
</NFormItem>
<NFormItem path="code" label="产品编号">
<NInput v-model:value="form.code" />
</NFormItem>
<NFormItem path="categoryId" label="产品类型">
<NSelect
:value="form.categoryId || null"
:options="categories?.data?.map(item => ({ label: item.name, value: item.id }))"
@update:value="val => (form.categoryId = val as string)"
/>
</NFormItem>
<NFormItem path="estimatedValue" label="产品估值">
<NInput v-model:value="form.estimatedValue" />
</NFormItem>
<NFormItem path="totalSupplyLimit" label="总发行量">
<NInput v-model:value="form.totalSupplyLimit" />
</NFormItem>
<NFormItem path="description" label="产品描述">
<NInput v-model:value="form.description" type="textarea" />
</NFormItem>
<NFormItem path="proofDocuments" label="资产证明 ">
<NUpload
action="https://naive-upload.free.beeceptor.com/"
:headers="{ 'naive-info': 'hello!' }"
:data="{
'naive-data': 'cool! naive!'
}"
>
<NButton>上传文件</NButton>
</NUpload>
</NFormItem>
<NSpace justify="end">
<NButton @click="$emit('close')"> </NButton>
<NButton type="primary" @click="handleSubmit"> </NButton>
</NSpace>
</NForm>
</div>
</template>
<style lang="css" scoped></style>

View File

@@ -6,6 +6,7 @@ import { client, safeClient } from '@/service/api';
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
import { RwaStatusEnum } from '@/enum';
import Add from './components/add.vue';
import Edit from './components/edit.vue';
const dialog = useDialog();
const message = useMessage();
@@ -100,14 +101,14 @@ const columns: TableBaseColumns = [
);
tableInst.value?.reload();
}
},
{
contentText: '编辑',
size: 'small',
onClick: () => {
handleEdit(row);
}
}
// {
// contentText: '编辑',
// size: 'small',
// onClick: () => {
// tableInst.value?.reload();
// }
// }
]
}
];
@@ -146,6 +147,26 @@ function handleAdd() {
}
});
}
function handleEdit(row: any) {
const dialogInstance = dialog.create({
title: '编辑产品',
content: () =>
h(Edit, {
data: row,
onClose: () => {
dialogInstance.destroy();
tableInst.value?.reload();
}
}),
style: { width: '600px' },
showIcon: false,
onPositiveClick: () => {
message.success('更新成功');
tableInst.value?.reload();
}
});
}
</script>
<template>