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

2
package.json
View File

@@ -51,7 +51,7 @@
"@better-scroll/core": "2.5.1", "@better-scroll/core": "2.5.1",
"@elysiajs/eden": "^1.4.5", "@elysiajs/eden": "^1.4.5",
"@iconify/vue": "5.0.0", "@iconify/vue": "5.0.0",
"@riwa/api-types": "http://192.168.1.2:9538/api/capp-eden-0.0.32.tgz", "@riwa/api-types": "http://192.168.1.2:9538/api/capp-eden-0.0.35.tgz",
"@sa/axios": "workspace:*", "@sa/axios": "workspace:*",
"@sa/color": "workspace:*", "@sa/color": "workspace:*",
"@sa/hooks": "workspace:*", "@sa/hooks": "workspace:*",

12
pnpm-lock.yaml generated
View File

@@ -18,8 +18,8 @@ importers:
specifier: 5.0.0 specifier: 5.0.0
version: 5.0.0(vue@3.5.25(typescript@5.9.3)) version: 5.0.0(vue@3.5.25(typescript@5.9.3))
'@riwa/api-types': '@riwa/api-types':
specifier: http://192.168.1.2:9538/api/capp-eden-0.0.32.tgz specifier: http://192.168.1.2:9538/api/capp-eden-0.0.35.tgz
version: '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.32.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))' version: '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.35.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))'
'@sa/axios': '@sa/axios':
specifier: workspace:* specifier: workspace:*
version: link:packages/axios version: link:packages/axios
@@ -496,9 +496,9 @@ packages:
'@borewit/text-codec@0.1.1': '@borewit/text-codec@0.1.1':
resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==} resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==}
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.32.tgz': '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.35.tgz':
resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.32.tgz} resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.35.tgz}
version: 0.0.32 version: 0.0.35
peerDependencies: peerDependencies:
'@elysiajs/eden': ^1.4.6 '@elysiajs/eden': ^1.4.6
@@ -4871,7 +4871,7 @@ snapshots:
'@borewit/text-codec@0.1.1': {} '@borewit/text-codec@0.1.1': {}
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.32.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))': '@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.35.tgz(@elysiajs/eden@1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)))':
dependencies: dependencies:
'@elysiajs/eden': 1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3)) '@elysiajs/eden': 1.4.5(elysia@1.4.19(@sinclair/typebox@0.34.41)(exact-mirror@0.2.5(@sinclair/typebox@0.34.41))(file-type@21.1.1)(openapi-types@12.1.3)(typescript@5.9.3))

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

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

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

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