feat: 更新产品添加和编辑页面,添加封面图片上传功能及相关验证
This commit is contained in:
@@ -51,7 +51,7 @@
|
||||
"@better-scroll/core": "2.5.1",
|
||||
"@elysiajs/eden": "^1.4.5",
|
||||
"@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/color": "workspace:*",
|
||||
"@sa/hooks": "workspace:*",
|
||||
|
||||
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
@@ -18,8 +18,8 @@ importers:
|
||||
specifier: 5.0.0
|
||||
version: 5.0.0(vue@3.5.25(typescript@5.9.3))
|
||||
'@riwa/api-types':
|
||||
specifier: http://192.168.1.2:9538/api/capp-eden-0.0.32.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)))'
|
||||
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.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':
|
||||
specifier: workspace:*
|
||||
version: link:packages/axios
|
||||
@@ -496,9 +496,9 @@ packages:
|
||||
'@borewit/text-codec@0.1.1':
|
||||
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':
|
||||
resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.32.tgz}
|
||||
version: 0.0.32
|
||||
'@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.35.tgz}
|
||||
version: 0.0.35
|
||||
peerDependencies:
|
||||
'@elysiajs/eden': ^1.4.6
|
||||
|
||||
@@ -4871,7 +4871,7 @@ snapshots:
|
||||
|
||||
'@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:
|
||||
'@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))
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user