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

(cherry picked from commit a38ddb699a)
This commit is contained in:
YunaiV 2024-01-12 20:53:17 +08:00 committed by shizhong
parent 48fe4332bc
commit 890d31ff5f
8 changed files with 52 additions and 43 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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