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

a38ddb69 · YunaiV · 20b4a7fd · a38ddb69 · a38ddb69 · a38ddb69
Commit a38ddb69 authored Jan 12, 2024 by YunaiV
8 changed files
--- a/src/api/mall/product/spu.ts
+++ b/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 // 商品规格

--- a/src/utils/dict.ts
+++ b/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 模块 ==========

--- a/src/views/mall/product/spu/components/SkuList.vue
+++ b/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>

--- a/src/views/mall/product/spu/form/DeliveryForm.vue
+++ b/src/views/mall/product/spu/form/DeliveryForm.vue
+<!-- 商品发布 - 物流设置 -->
 <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()

--- a/src/views/mall/product/spu/form/InfoForm.vue
+++ b/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) // 是否作为详情组件
 })

--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/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 {

--- a/src/views/mall/product/spu/form/SkuForm.vue
+++ b/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>

--- a/src/views/mall/product/spu/form/index.vue
+++ b/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, // 商品规格