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

src/api/mall/product/spu.ts

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

src/utils/dict.ts

@@ -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 模块 ==========

src/views/mall/product/spu/components/SkuList.vue

@@ -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>

src/views/mall/product/spu/form/DeliveryForm.vue

@@ -1,15 +1,23 @@
+<!-- 商品发布 - 物流设置 -->
 <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 芋艿：宽度！！ -->
+        >
-    <!-- TODO 芋艿：这里要挪出去 -->
+          {{ dict.label }}
-    <el-form-item label="运费模板" prop="deliveryTemplateId">
+        </el-checkbox>
-      <el-select v-model="formData.deliveryTemplateId" placeholder="请选择">
+      </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
+  if (!formRef) return
-  return await unref(productSpuBasicInfoRef).validate((valid) => {
+  try {
-    if (!valid) {
+    await unref(formRef)?.validate()
-      message.warning('商品信息未完善！！')
+    // 校验通过更新数据
-      emit('update:activeName', 'delivery')
+    Object.assign(props.propFormData, formData)
-      // 目的截断之后的校验
+  } catch (e) {
-      throw new Error('商品信息未完善！！')
+    message.error('【物流设置】不完善，请填写相关信息')
-    } else {
+    emit('update:activeName', 'delivery')
-      // 校验通过更新数据
+    throw e // 目的截断之后的校验
-      Object.assign(props.propFormData, formData)
+  }
-    }
-  })
 }
 defineExpose({ validate })
 
+/** 初始化 */
 const deliveryTemplateList = ref([]) // 运费模版
 onMounted(async () => {
   deliveryTemplateList.value = await ExpressTemplateApi.getSimpleTemplateList()

src/views/mall/product/spu/form/InfoForm.vue

@@ -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) // 是否作为详情组件
 })
 

src/views/mall/product/spu/form/ProductAttributes.vue

@@ -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 {

src/views/mall/product/spu/form/SkuForm.vue

@@ -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>

src/views/mall/product/spu/form/index.vue

@@ -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, // 商品规格