root/financial-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新产品添加和编辑页面，添加封面图片上传功能及相关验证

Browse Source
This commit is contained in:
Seven
2026-01-20 03:25:27 +07:00
parent e4b0b0d63f
commit 970f190218
4 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/product/components/add.vue
View File

@@ -2,6 +2,7 @@
import { ref, useTemplateRef } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import { client, safeClient } from '@/service/api';
import UploadS3 from '@/components/upload/index.vue';
type Body = CommonType.TreatyBody<typeof client.api.admin.subscription.products.post>;
@@ -15,6 +16,7 @@ const emit = defineEmits<{
const formInst = useTemplateRef<FormInst>('formInst');
const form = ref<Body>({
coverImage: '',
name: '',
price: '',
cycleDays: 1,
@@ -28,6 +30,7 @@ const form = ref<Body>({
});
const rules: FormRules = {
coverImage: [{ required: true, message: '请上传封面图片', trigger: ['blur', 'input'] }],
name: [{ required: true, message: '请输入产品名称', trigger: ['blur', 'input'] }],
price: [{ required: true, message: '请输入产品价格', trigger: ['blur', 'change'] }],
maturityYield: [{ required: true, message: '请输入到期收益率', trigger: ['blur', 'change'] }],
@@ -54,6 +57,17 @@ function handleSubmit() {
:rules="rules"
require-mark-placement="left"
>
<NFormItem path="coverImage" label="产品封面">
<UploadS3
:model-value="form.coverImage ? [form.coverImage] : undefined"
:max-size="20"
:max-files="1"
accept="image/*"
placeholder="上传图片"
:fetch-options="{ businessType: 'cover_image' }"
@update:model-value="evt => (form.coverImage = evt.length > 0 ? evt[0] : undefined)"
/>
</NFormItem>
<NFormItem path="name" label="产品名称">
<NInput v-model:value="form.name" placeholder="请输入产品名称" />
</NFormItem>

15
src/views/product/components/edit.vue
View File

@@ -2,6 +2,7 @@
import { onMounted, ref, useTemplateRef } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import { client, safeClient } from '@/service/api';
import UploadS3 from '@/components/upload/index.vue';
type Body = CommonType.TreatyBody<typeof client.api.admin.subscription.products.post>;
@@ -21,6 +22,7 @@ const emit = defineEmits<{
const formInst = useTemplateRef<FormInst>('formInst');
const form = ref<Body>({
coverImage: '',
name: '',
price: '',
cycleDays: 1,
@@ -34,6 +36,7 @@ const form = ref<Body>({
});
const rules: FormRules = {
coverImage: [{ required: true, message: '请上传封面图片', trigger: ['blur', 'input'] }],
name: [{ required: true, message: '请输入产品名称', trigger: ['blur', 'input'] }],
price: [{ required: true, message: '请输入产品价格', trigger: ['blur', 'change'] }],
maturityYield: [{ required: true, message: '请输入到期收益率', trigger: ['blur', 'change'] }],
@@ -56,6 +59,7 @@ function handleSubmit() {
onMounted(() => {
form.value = {
coverImage: props.data.coverImage || '',
name: props.data.name || '',
price: String(props.data.price || ''),
cycleDays: props.data.cycleDays || 1,
@@ -80,6 +84,17 @@ onMounted(() => {
:rules="rules"
require-mark-placement="left"
>
<NFormItem path="coverImage" label="产品封面">
<UploadS3
:model-value="form.coverImage ? [form.coverImage] : undefined"
:max-size="20"
:max-files="1"
accept="image/*"
placeholder="上传图片"
:fetch-options="{ businessType: 'cover_image' }"
@update:model-value="evt => (form.coverImage = evt.length > 0 ? evt[0] : undefined)"
/>
</NFormItem>
<NFormItem path="name" label="产品名称">
<NInput v-model:value="form.name" placeholder="请输入产品名称" />
</NFormItem>