📖 MALL:商品编辑 => 优化 DeliveryForm 表单
This commit is contained in:
parent
20b4a7fd66
commit
a38ddb699a
@ -39,6 +39,7 @@ export interface Spu {
|
||||
picUrl?: string // 商品封面图
|
||||
sliderPicUrls?: string[] // 商品轮播图
|
||||
introduction?: string // 商品简介
|
||||
deliveryTypes?: number[] // 配送方式
|
||||
deliveryTemplateId?: number | undefined // 运费模版
|
||||
brandId?: number // 商品品牌编号
|
||||
specType?: boolean // 商品规格
|
||||
|
@ -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 模块 ==========
|
||||
|
@ -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>
|
||||
|
@ -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()
|
||||
|
@ -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) // 是否作为详情组件
|
||||
})
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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, // 商品规格
|
||||
|
Loading…
Reference in New Issue
Block a user