feat: 新增产品编辑功能,完善产品表单及验证规则
This commit is contained in:
@@ -24,7 +24,10 @@ const form = ref<Body>({
|
||||
name: '',
|
||||
code: '',
|
||||
categoryId: '',
|
||||
description: ''
|
||||
description: '',
|
||||
estimatedValue: '',
|
||||
totalSupplyLimit: '',
|
||||
proofDocuments: ''
|
||||
});
|
||||
|
||||
const rules: FormRules = {
|
||||
|
||||
111
src/views/rwa/product/components/edit.vue
Normal file
111
src/views/rwa/product/components/edit.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user