feat: antdv mall spu form
xingyu4j
parent
f30a3451de
commit
817a157645
|
|
@ -22,6 +22,9 @@ const AutoComplete = defineAsyncComponent(
|
|||
() => import('ant-design-vue/es/auto-complete'),
|
||||
);
|
||||
const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
|
||||
const Cascader = defineAsyncComponent(
|
||||
() => import('ant-design-vue/es/cascader'),
|
||||
);
|
||||
const Checkbox = defineAsyncComponent(
|
||||
() => import('ant-design-vue/es/checkbox'),
|
||||
);
|
||||
|
|
@ -103,6 +106,7 @@ const withDefaultPlaceholder = <T extends Component>(
|
|||
|
||||
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
|
||||
export type ComponentType =
|
||||
| 'ApiCascader'
|
||||
| 'ApiSelect'
|
||||
| 'ApiTreeSelect'
|
||||
| 'AutoComplete'
|
||||
|
|
@ -139,6 +143,21 @@ async function initComponentAdapter() {
|
|||
// 如果你的组件体积比较大，可以使用异步加载
|
||||
// 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(
|
||||
{
|
||||
...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>
|
||||
<!-- TODO @xingyu：待开发 -->
|
||||
<div>form</div>
|
||||
<Page auto-content-height>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue