📖 MALL:商品编辑 => 优化 DeliveryForm 表单

This commit is contained in:
YunaiV 2024-01-12 20:53:17 +08:00
parent 20b4a7fd66
commit a38ddb699a
8 changed files with 52 additions and 43 deletions

View File

@ -39,6 +39,7 @@ export interface Spu {
picUrl?: string // 商品封面图
sliderPicUrls?: string[] // 商品轮播图
introduction?: string // 商品简介
deliveryTypes?: number[] // 配送方式
deliveryTemplateId?: number | undefined // 运费模版
brandId?: number // 商品品牌编号
specType?: boolean // 商品规格

View File

@ -103,7 +103,6 @@ export const getDictLabel = (dictType: string, value: any): string => {
export enum DICT_TYPE {
USER_TYPE = 'user_type',
COMMON_STATUS = 'common_status',
SYSTEM_TENANT_PACKAGE_ID = 'system_tenant_package_id',
TERMINAL = 'terminal', // 终端
// ========== SYSTEM 模块 ==========

View File

@ -8,9 +8,9 @@
max-height="500"
size="small"
>
<el-table-column align="center" fixed="left" label="图片" min-width="100">
<el-table-column align="center" label="图片" min-width="65">
<template #default="{ row }">
<UploadImg v-model="row.picUrl" height="80px" width="100%" />
<UploadImg v-model="row.picUrl" height="50px" width="50px" />
</template>
</el-table-column>
<template v-if="formData!.specType && !isBatch">
@ -152,7 +152,7 @@
<el-image
v-if="row.picUrl"
:src="row.picUrl"
class="h-60px w-60px"
class="h-50px w-50px"
@click="imagePreview(row.picUrl)"
/>
</template>

View File

@ -1,15 +1,23 @@
<!-- 商品发布 - 物流设置 -->
<template>
<el-form
ref="productSpuBasicInfoRef"
:model="formData"
:rules="rules"
label-width="120px"
:disabled="isDetail"
>
<!-- TODO 芋艿宽度 -->
<!-- TODO 芋艿这里要挪出去 -->
<el-form-item label="运费模板" prop="deliveryTemplateId">
<el-select v-model="formData.deliveryTemplateId" placeholder="请选择">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
<el-form-item label="配送方式" prop="deliveryTypes">
<el-checkbox-group v-model="formData.deliveryTypes" class="w-80">
<el-checkbox
v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item
label="运费模板"
prop="deliveryTemplateId"
v-if="formData.deliveryTypes?.includes(DeliveryTypeEnum.EXPRESS.type)"
>
<el-select placeholder="请选择运费模板" v-model="formData.deliveryTemplateId" class="w-80">
<el-option
v-for="item in deliveryTemplateList"
:key="item.id"
@ -26,8 +34,10 @@ import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import type { Spu } from '@/api/mall/product/spu'
import * as ExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { DeliveryTypeEnum } from '@/utils/constants'
defineOptions({ name: 'ProductSpuBasicInfoForm' })
defineOptions({ name: 'ProductDeliveryForm' })
const message = useMessage() //
@ -36,20 +46,19 @@ const props = defineProps({
type: Object as PropType<Spu>,
default: () => {}
},
activeName: propTypes.string.def(''),
isDetail: propTypes.bool.def(false) //
})
const productSpuBasicInfoRef = ref() // Ref
const formRef = ref() // Ref
const formData = reactive<Spu>({
deliveryTypes: [], //
deliveryTemplateId: undefined //
})
const rules = reactive({
deliveryTypes: [required],
deliveryTemplateId: [required]
})
/**
* 将传进来的值赋值给 formData
*/
/** 将传进来的值赋值给 formData */
watch(
() => props.propFormData,
(data) => {
@ -63,27 +72,24 @@ watch(
}
)
/**
* 表单校验
*/
/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
//
if (!productSpuBasicInfoRef) return
return await unref(productSpuBasicInfoRef).validate((valid) => {
if (!valid) {
message.warning('商品信息未完善!!')
emit('update:activeName', 'delivery')
//
throw new Error('商品信息未完善!!')
} else {
//
Object.assign(props.propFormData, formData)
}
})
if (!formRef) return
try {
await unref(formRef)?.validate()
//
Object.assign(props.propFormData, formData)
} catch (e) {
message.error('【物流设置】不完善,请填写相关信息')
emit('update:activeName', 'delivery')
throw e //
}
}
defineExpose({ validate })
/** 初始化 */
const deliveryTemplateList = ref([]) //
onMounted(async () => {
deliveryTemplateList.value = await ExpressTemplateApi.getSimpleTemplateList()

View File

@ -68,13 +68,12 @@ import * as ProductBrandApi from '@/api/mall/product/brand'
import { BrandVO } from '@/api/mall/product/brand'
import { CategoryVO } from '@/api/mall/product/category'
defineOptions({ name: 'ProductSpuBasicInfoForm' })
defineOptions({ name: 'ProductSpuInfoForm' })
const props = defineProps({
propFormData: {
type: Object as PropType<Spu>,
default: () => {}
},
activeName: propTypes.string.def(''),
isDetail: propTypes.bool.def(false) //
})

View File

@ -107,7 +107,7 @@ const showInput = async (index) => {
/** 输入框失去焦点或点击回车时触发 */
const emit = defineEmits(['success']) // success
const handleInputConfirm = async (index, propertyId) => {
const handleInputConfirm = async (index: number, propertyId: number) => {
if (inputValue.value) {
//
try {

View File

@ -2,13 +2,17 @@
<template>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
<el-form-item label="分销类型" props="subCommissionType">
<el-radio-group v-model="formData.subCommissionType" @change="changeSubCommissionType">
<el-radio-group
v-model="formData.subCommissionType"
@change="changeSubCommissionType"
class="w-80"
>
<el-radio :label="false">默认设置</el-radio>
<el-radio :label="true" class="radio">单独设置</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="商品规格" props="specType">
<el-radio-group v-model="formData.specType" @change="onChangeSpec">
<el-radio-group v-model="formData.specType" @change="onChangeSpec" class="w-80">
<el-radio :label="false" class="radio">单规格</el-radio>
<el-radio :label="true">多规格</el-radio>
</el-radio-group>

View File

@ -42,7 +42,6 @@
/>
</el-tab-pane>
</el-tabs>
<!-- TODO 芋艿位置 -->
<el-form>
<el-form-item style="float: right">
<el-button v-if="!isDetail" :loading="formLoading" type="primary" @click="submitForm">
@ -80,7 +79,7 @@ const skuRef = ref() // 商品规格 Ref
const deliveryRef = ref() // Ref
const descriptionRef = ref() // Ref
const otherSettingsRef = ref() // Ref
// spu
// SPU
const formData = ref<ProductSpuApi.Spu>({
name: '', //
categoryId: undefined, //
@ -88,6 +87,7 @@ const formData = ref<ProductSpuApi.Spu>({
picUrl: '', //
sliderPicUrls: [], //
introduction: '', //
deliveryTypes: [], //
deliveryTemplateId: undefined, //
brandId: undefined, //
specType: false, //