feat: antdv mall spu form
xingyu4j
parent
f30a3451de
commit
817a157645
|
|
@ -22,6 +22,9 @@ const AutoComplete = defineAsyncComponent(
|
||||||
() => import('ant-design-vue/es/auto-complete'),
|
() => import('ant-design-vue/es/auto-complete'),
|
||||||
);
|
);
|
||||||
const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
|
const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
|
||||||
|
const Cascader = defineAsyncComponent(
|
||||||
|
() => import('ant-design-vue/es/cascader'),
|
||||||
|
);
|
||||||
const Checkbox = defineAsyncComponent(
|
const Checkbox = defineAsyncComponent(
|
||||||
() => import('ant-design-vue/es/checkbox'),
|
() => import('ant-design-vue/es/checkbox'),
|
||||||
);
|
);
|
||||||
|
|
@ -103,6 +106,7 @@ const withDefaultPlaceholder = <T extends Component>(
|
||||||
|
|
||||||
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
|
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
|
||||||
export type ComponentType =
|
export type ComponentType =
|
||||||
|
| 'ApiCascader'
|
||||||
| 'ApiSelect'
|
| 'ApiSelect'
|
||||||
| 'ApiTreeSelect'
|
| 'ApiTreeSelect'
|
||||||
| 'AutoComplete'
|
| 'AutoComplete'
|
||||||
|
|
@ -139,6 +143,21 @@ async function initComponentAdapter() {
|
||||||
// 如果你的组件体积比较大，可以使用异步加载
|
// 如果你的组件体积比较大，可以使用异步加载
|
||||||
// Button: () =>
|
// Button: () =>
|
||||||
// import('xxx').then((res) => res.Button),
|
// import('xxx').then((res) => res.Button),
|
||||||
|
ApiCascader: withDefaultPlaceholder(
|
||||||
|
{
|
||||||
|
...ApiComponent,
|
||||||
|
name: 'ApiCascader',
|
||||||
|
},
|
||||||
|
'select',
|
||||||
|
{
|
||||||
|
component: Cascader,
|
||||||
|
fieldNames: { label: 'label', value: 'value', children: 'children' },
|
||||||
|
loadingSlot: 'suffixIcon',
|
||||||
|
modelPropName: 'value',
|
||||||
|
optionsPropName: 'treeData',
|
||||||
|
visibleEvent: 'onVisibleChange',
|
||||||
|
},
|
||||||
|
),
|
||||||
ApiSelect: withDefaultPlaceholder(
|
ApiSelect: withDefaultPlaceholder(
|
||||||
{
|
{
|
||||||
...ApiComponent,
|
...ApiComponent,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,262 @@
|
||||||
|
import type { VbenFormSchema } from '#/adapter/form';
|
||||||
|
|
||||||
|
import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
|
||||||
|
import { getDictOptions } from '@vben/hooks';
|
||||||
|
import { handleTree } from '@vben/utils';
|
||||||
|
|
||||||
|
import { z } from '#/adapter/form';
|
||||||
|
import { getSimpleBrandList } from '#/api/mall/product/brand';
|
||||||
|
import { getCategoryList } from '#/api/mall/product/category';
|
||||||
|
import { getSimpleTemplateList } from '#/api/mall/trade/delivery/expressTemplate';
|
||||||
|
|
||||||
|
/** 基础设置的表单 */
|
||||||
|
export function useInfoFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: [''],
|
||||||
|
show: () => false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '商品名称',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请输入商品名称',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'categoryId',
|
||||||
|
label: '分类名称',
|
||||||
|
// component: 'ApiCascader',
|
||||||
|
component: 'ApiTreeSelect',
|
||||||
|
componentProps: {
|
||||||
|
api: async () => {
|
||||||
|
const data = await getCategoryList({});
|
||||||
|
return handleTree(data);
|
||||||
|
},
|
||||||
|
fieldNames: { label: 'name', value: 'id', children: 'children' },
|
||||||
|
placeholder: '请选择商品分类',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'brandId',
|
||||||
|
label: '商品品牌',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
api: () => getSimpleBrandList(),
|
||||||
|
labelField: 'name',
|
||||||
|
valueField: 'id',
|
||||||
|
allowClear: true,
|
||||||
|
placeholder: '请选择商品品牌',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'keyword',
|
||||||
|
label: '商品关键字',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入商品关键字',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'introduction',
|
||||||
|
label: '商品简介',
|
||||||
|
component: 'Textarea',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入商品简介',
|
||||||
|
autoSize: { minRows: 2, maxRows: 2 },
|
||||||
|
showCount: true,
|
||||||
|
maxlength: 128,
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'picUrl',
|
||||||
|
label: '商品封面图',
|
||||||
|
component: 'ImageUpload',
|
||||||
|
componentProps: {
|
||||||
|
maxSize: 30,
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'sliderPicUrls',
|
||||||
|
label: '商品轮播图',
|
||||||
|
component: 'ImageUpload',
|
||||||
|
componentProps: {
|
||||||
|
maxNumber: 10,
|
||||||
|
multiple: true,
|
||||||
|
maxSize: 30,
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 价格库存的表单 */
|
||||||
|
export function useSkuFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: [''],
|
||||||
|
show: () => false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'subCommissionType',
|
||||||
|
label: '分销类型',
|
||||||
|
component: 'RadioGroup',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '默认设置',
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '单独设置',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'specType',
|
||||||
|
label: '商品规格',
|
||||||
|
component: 'RadioGroup',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '单规格',
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '多规格',
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
// TODO @xingyu：待补充商品属性
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 物流设置的表单 */
|
||||||
|
export function useDeliveryFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: [''],
|
||||||
|
show: () => false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'deliveryTypes',
|
||||||
|
label: '配送方式',
|
||||||
|
component: 'CheckboxGroup',
|
||||||
|
componentProps: {
|
||||||
|
options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'deliveryTemplateId',
|
||||||
|
label: '运费模板',
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
api: getSimpleTemplateList,
|
||||||
|
labelField: 'name',
|
||||||
|
valueField: 'id',
|
||||||
|
},
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: ['deliveryTypes'],
|
||||||
|
show: (values) =>
|
||||||
|
!!values.deliveryTypes &&
|
||||||
|
values.deliveryTypes.includes(DeliveryTypeEnum.EXPRESS.type),
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 商品详情的表单 */
|
||||||
|
export function useDescriptionFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: [''],
|
||||||
|
show: () => false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'description',
|
||||||
|
label: '商品详情',
|
||||||
|
component: 'RichTextarea',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入商品详情',
|
||||||
|
height: 1000,
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 其它设置的表单 */
|
||||||
|
export function useOtherFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: [''],
|
||||||
|
show: () => false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'sort',
|
||||||
|
label: '商品排序',
|
||||||
|
component: 'InputNumber',
|
||||||
|
componentProps: {
|
||||||
|
min: 0,
|
||||||
|
},
|
||||||
|
rules: z.number().min(0).optional().default(0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'giveIntegral',
|
||||||
|
label: '赠送积分',
|
||||||
|
component: 'InputNumber',
|
||||||
|
componentProps: {
|
||||||
|
min: 0,
|
||||||
|
},
|
||||||
|
rules: z.number().min(0).optional().default(0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'virtualSalesCount',
|
||||||
|
label: '虚拟销量',
|
||||||
|
component: 'InputNumber',
|
||||||
|
componentProps: {
|
||||||
|
min: 0,
|
||||||
|
},
|
||||||
|
rules: z.number().min(0).optional().default(0),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,178 @@
|
||||||
<script lang="ts" setup></script>
|
<script lang="ts" setup>
|
||||||
|
import type { MallSpuApi } from '#/api/mall/product/spu';
|
||||||
|
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
import { Page } from '@vben/common-ui';
|
||||||
|
import { convertToInteger, formatToFraction } from '@vben/utils';
|
||||||
|
|
||||||
|
import { Button, Tabs } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
import { createSpu, getSpu, updateSpu } from '#/api/mall/product/spu';
|
||||||
|
import { ContentWrap } from '#/components/content-wrap';
|
||||||
|
|
||||||
|
import {
|
||||||
|
useDeliveryFormSchema,
|
||||||
|
useDescriptionFormSchema,
|
||||||
|
useInfoFormSchema,
|
||||||
|
useOtherFormSchema,
|
||||||
|
useSkuFormSchema,
|
||||||
|
} from './form-data';
|
||||||
|
|
||||||
|
const spuId = ref<number>();
|
||||||
|
const { params } = useRoute();
|
||||||
|
|
||||||
|
const activeTabName = ref('info');
|
||||||
|
|
||||||
|
const [InfoForm, infoFormApi] = useVbenForm({
|
||||||
|
commonConfig: {
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
formItemClass: 'col-span-2',
|
||||||
|
labelWidth: 120,
|
||||||
|
},
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: useInfoFormSchema(),
|
||||||
|
showDefaultActions: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [SkuForm, skuFormApi] = useVbenForm({
|
||||||
|
commonConfig: {
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
formItemClass: 'col-span-2',
|
||||||
|
labelWidth: 120,
|
||||||
|
},
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: useSkuFormSchema(),
|
||||||
|
showDefaultActions: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [DeliveryForm, deliveryFormApi] = useVbenForm({
|
||||||
|
commonConfig: {
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
formItemClass: 'col-span-2',
|
||||||
|
labelWidth: 120,
|
||||||
|
},
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: useDeliveryFormSchema(),
|
||||||
|
showDefaultActions: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [DescriptionForm, descriptionFormApi] = useVbenForm({
|
||||||
|
commonConfig: {
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
formItemClass: 'col-span-2',
|
||||||
|
labelWidth: 120,
|
||||||
|
},
|
||||||
|
layout: 'vertical',
|
||||||
|
schema: useDescriptionFormSchema(),
|
||||||
|
showDefaultActions: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [OtherForm, otherFormApi] = useVbenForm({
|
||||||
|
commonConfig: {
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
formItemClass: 'col-span-2',
|
||||||
|
labelWidth: 120,
|
||||||
|
},
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: useOtherFormSchema(),
|
||||||
|
showDefaultActions: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit() {
|
||||||
|
const values: MallSpuApi.Spu = await infoFormApi
|
||||||
|
.merge(skuFormApi)
|
||||||
|
.merge(deliveryFormApi)
|
||||||
|
.merge(descriptionFormApi)
|
||||||
|
.merge(otherFormApi)
|
||||||
|
.submitAllForm(true);
|
||||||
|
|
||||||
|
if (values.skus) {
|
||||||
|
values.skus.forEach((item) => {
|
||||||
|
// sku相关价格元转分
|
||||||
|
item.price = convertToInteger(item.price);
|
||||||
|
item.marketPrice = convertToInteger(item.marketPrice);
|
||||||
|
item.costPrice = convertToInteger(item.costPrice);
|
||||||
|
item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice);
|
||||||
|
item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 处理轮播图列表
|
||||||
|
const newSliderPicUrls: any[] = [];
|
||||||
|
values.sliderPicUrls!.forEach((item: any) => {
|
||||||
|
// 如果是前端选的图
|
||||||
|
typeof item === 'object'
|
||||||
|
? newSliderPicUrls.push(item.url)
|
||||||
|
: newSliderPicUrls.push(item);
|
||||||
|
});
|
||||||
|
values.sliderPicUrls = newSliderPicUrls;
|
||||||
|
|
||||||
|
await (spuId.value ? updateSpu(values) : createSpu(values));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function initDate() {
|
||||||
|
spuId.value = params.id as unknown as number;
|
||||||
|
if (!spuId.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const res = await getSpu(spuId.value);
|
||||||
|
if (res.skus) {
|
||||||
|
res.skus.forEach((item) => {
|
||||||
|
// 回显价格分转元
|
||||||
|
item.price = formatToFraction(item.price);
|
||||||
|
item.marketPrice = formatToFraction(item.marketPrice);
|
||||||
|
item.costPrice = formatToFraction(item.costPrice);
|
||||||
|
item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
|
||||||
|
item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
infoFormApi.setValues(res);
|
||||||
|
skuFormApi.setValues(res);
|
||||||
|
deliveryFormApi.setValues(res);
|
||||||
|
descriptionFormApi.setValues(res);
|
||||||
|
otherFormApi.setValues(res);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await initDate();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- TODO @xingyu：待开发 -->
|
<Page auto-content-height>
|
||||||
<div>form</div>
|
<ContentWrap class="h-full w-full pb-8">
|
||||||
|
<template #extra>
|
||||||
|
<Button type="primary" @click="onSubmit">保存</Button>
|
||||||
|
</template>
|
||||||
|
<Tabs v-model:active-key="activeTabName">
|
||||||
|
<Tabs.TabPane tab="基础设置" key="info">
|
||||||
|
<InfoForm class="w-3/5" />
|
||||||
|
</Tabs.TabPane>
|
||||||
|
<Tabs.TabPane tab="价格库存" key="sku">
|
||||||
|
<SkuForm class="w-3/5" />
|
||||||
|
</Tabs.TabPane>
|
||||||
|
<Tabs.TabPane tab="物流设置" key="delivery">
|
||||||
|
<DeliveryForm class="w-3/5" />
|
||||||
|
</Tabs.TabPane>
|
||||||
|
<Tabs.TabPane tab="商品详情" key="description">
|
||||||
|
<DescriptionForm class="w-3/5" />
|
||||||
|
</Tabs.TabPane>
|
||||||
|
<Tabs.TabPane tab="其它设置" key="other">
|
||||||
|
<OtherForm class="w-3/5" />
|
||||||
|
</Tabs.TabPane>
|
||||||
|
</Tabs>
|
||||||
|
</ContentWrap>
|
||||||
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue