商品管理: 调整相关组件优化逻辑

src/api/mall/product/management/type/spuType.ts

@@ -2,9 +2,9 @@ import { SkuType } from './skuType'
 
 export interface SpuType {
   name?: string // 商品名称
-  categoryId?: number | undefined // 商品分类
+  categoryId?: number | null // 商品分类
   keyword?: string // 关键字
-  unit?: string // 单位
+  unit?: number | null // 单位
   picUrl?: string // 商品封面图
   sliderPicUrls?: string[] // 商品轮播图
   introduction?: string // 商品简介

src/utils/dict.ts

@@ -144,5 +144,8 @@ export enum DICT_TYPE {
 
   // ========== MP 模块 ==========
   MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
-  MP_MESSAGE_TYPE = 'mp_message_type' // 消息类型
+  MP_MESSAGE_TYPE = 'mp_message_type', // 消息类型
+
+  // ========== MALL 模块 ==========
+  PRODUCT_UNIT = 'product_unit' // 商品单位
 }

src/views/mall/product/management/addForm.vue

@@ -34,8 +34,7 @@
 <script lang="ts" name="ProductManagementForm" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
-import type { SpuType } from '@/api/mall/product/management/type/spuType'
-// 业务api
+import type { SpuType } from '@/api/mall/product/management/type/spuType' // 业务api
 import * as managementApi from '@/api/mall/product/management/spu'
 
 const { t } = useI18n() // 国际化
@@ -50,18 +49,67 @@ const BasicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Re
 const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
 const OtherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
 const formData = ref<SpuType>({
-  name: '', // 商品名称
-  categoryId: undefined, // 商品分类
-  keyword: '', // 关键字
-  unit: '', // 单位
-  picUrl: '', // 商品封面图
-  sliderPicUrls: [], // 商品轮播图
-  introduction: '', // 商品简介
+  name: '213', // 商品名称
+  categoryId: null, // 商品分类
+  keyword: '213', // 关键字
+  unit: null, // 单位
+  picUrl:
+    'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png', // 商品封面图
+  sliderPicUrls: [
+    {
+      name: 'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png',
+      url: 'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png'
+    }
+  ], // 商品轮播图
+  introduction: '213', // 商品简介
   deliveryTemplateId: 0, // 运费模版
-  selectRule: '',
   specType: false, // 商品规格
   subCommissionType: false, // 分销类型
-  description: '', // 商品详情
+  skus: [
+    {
+      /**
+       * 商品价格，单位：分
+       */
+      price: 0,
+      /**
+       * 市场价，单位：分
+       */
+      marketPrice: 0,
+      /**
+       * 成本价，单位：分
+       */
+      costPrice: 0,
+      /**
+       * 商品条码
+       */
+      barCode: '',
+      /**
+       * 图片地址
+       */
+      picUrl: '',
+      /**
+       * 库存
+       */
+      stock: 0,
+      /**
+       * 商品重量，单位：kg 千克
+       */
+      weight: 0,
+      /**
+       * 商品体积，单位：m^3 平米
+       */
+      volume: 0,
+      /**
+       * 一级分销的佣金，单位：分
+       */
+      subCommissionFirstPrice: 0,
+      /**
+       * 二级分销的佣金，单位：分
+       */
+      subCommissionSecondPrice: 0
+    }
+  ],
+  description: '5425', // 商品详情
   sort: 1, // 商品排序
   giveIntegral: 1, // 赠送积分
   virtualSalesCount: 1, // 虚拟销量
@@ -83,14 +131,38 @@ const getDetail = async () => {
 const submitForm = async () => {
   // 提交请求
   formLoading.value = true
+  const newSkus = [...formData.value.skus] //复制一份skus保存失败时使用
   // TODO 三个表单逐一校验，如果有一个表单校验不通过则切换到对应表单，如果有两个及以上的情况则切换到最前面的一个并弹出提示消息
   // 校验各表单
   try {
     await unref(BasicInfoRef)?.validate()
     await unref(DescriptionRef)?.validate()
     await unref(OtherSettingsRef)?.validate()
+    // 处理掉一些无关数据
+    formData.value.skus.forEach((item) => {
+      // 给sku name赋值
+      item.name = formData.value.name
+      // 多规格情况移除skus相关属性值value
+      if (formData.value.specType) {
+        item.properties.forEach((item2) => {
+          delete item2.value
+        })
+      }
+    })
+    // 处理轮播图列表
+    const newSliderPicUrls = []
+    formData.value.sliderPicUrls.forEach((item) => {
+      // 如果是前端选的图
+      if (typeof item === 'object') {
+        newSliderPicUrls.push(item.url)
+      } else {
+        newSliderPicUrls.push(item)
+      }
+    })
+    formData.value.sliderPicUrls = newSliderPicUrls
     // 校验都通过后提交表单
     const data = formData.value as SpuType
+    // 移除skus.
     const id = query.id as unknown as number
     if (!id) {
       await managementApi.createSpu(data)
@@ -99,6 +171,9 @@ const submitForm = async () => {
       await managementApi.updateSpu(data)
       message.success(t('common.updateSuccess'))
     }
+  } catch (e) {
+    console.log(e)
+    console.log(newSkus)
   } finally {
     formLoading.value = false
   }

src/views/mall/product/management/components/BasicInfoForm.vue

@@ -25,7 +25,14 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="单位" prop="unit">
-          <el-input v-model="formData.unit" placeholder="请输入单位" />
+          <el-select v-model="formData.unit" placeholder="请选择单位">
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_UNIT)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -60,7 +67,7 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="商品规格" props="specType">
-          <el-radio-group v-model="formData.specType">
+          <el-radio-group v-model="formData.specType" @change="onChangeSpec">
             <el-radio :label="false" class="radio">单规格</el-radio>
             <el-radio :label="true">多规格</el-radio>
           </el-radio-group>
@@ -82,10 +89,15 @@
           </el-button>
           <ProductAttributes :attribute-data="attributeList" />
         </el-form-item>
-        <el-form-item v-if="formData.specType" label="批量设置">
-          <SkuList :attributeList="attributeList" :is-batch="true" :prop-form-data="formData" />
-        </el-form-item>
-        <el-form-item>
+        <template v-if="formData.specType && attributeList.length > 0">
+          <el-form-item label="批量设置">
+            <SkuList :attributeList="attributeList" :is-batch="true" :prop-form-data="formData" />
+          </el-form-item>
+          <el-form-item label="属性列表">
+            <SkuList :attributeList="attributeList" :prop-form-data="formData" />
+          </el-form-item>
+        </template>
+        <el-form-item v-if="!formData.specType">
           <SkuList :attributeList="attributeList" :prop-form-data="formData" />
         </el-form-item>
       </el-col>
@@ -95,16 +107,15 @@
 </template>
 <script lang="ts" name="ProductManagementBasicInfoForm" setup>
 import { PropType } from 'vue'
+import { defaultProps, handleTree } from '@/utils/tree'
+import { ElInput } from 'element-plus'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import type { SpuType } from '@/api/mall/product/management/type/spuType'
 import { UploadImg, UploadImgs } from '@/components/UploadFile'
-import SkuList from './SkuList/index.vue'
-import ProductAttributesAddForm from './ProductAttributesAddForm.vue'
-import ProductAttributes from './ProductAttributes.vue'
 import { copyValueToTarget } from '@/utils/object'
+import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
 // 业务Api
 import * as ProductCategoryApi from '@/api/mall/product/category'
-import { defaultProps, handleTree } from '@/utils/tree'
-import { ElInput } from 'element-plus'
 
 const message = useMessage() // 消息弹窗
 const props = defineProps({
@@ -131,42 +142,7 @@ const formData = reactive<SpuType>({
   deliveryTemplateId: 1, // 运费模版
   specType: false, // 商品规格
   subCommissionType: false, // 分销类型
-  skus: [
-    {
-      /**
-       * 商品价格，单位：分
-       */
-      price: 0,
-      /**
-       * 市场价，单位：分
-       */
-      marketPrice: 0,
-      /**
-       * 成本价，单位：分
-       */
-      costPrice: 0,
-      /**
-       * 商品条码
-       */
-      barCode: '',
-      /**
-       * 图片地址
-       */
-      picUrl: '',
-      /**
-       * 库存
-       */
-      stock: 0,
-      /**
-       * 商品重量，单位：kg 千克
-       */
-      weight: 0,
-      /**
-       * 商品体积，单位：m^3 平米
-       */
-      volume: 0
-    }
-  ]
+  skus: []
 })
 const rules = reactive({
   name: [required],
@@ -223,6 +199,27 @@ const changeSubCommissionType = () => {
     item.subCommissionSecondPrice = 0
   }
 }
+// 选择规格
+const onChangeSpec = () => {
+  console.log(111)
+  // 重置商品属性列表
+  attributeList.value = []
+  // 重置sku列表
+  formData.skus = [
+    {
+      price: 0,
+      marketPrice: 0,
+      costPrice: 0,
+      barCode: '',
+      picUrl: '',
+      stock: 0,
+      weight: 0,
+      volume: 0,
+      subCommissionFirstPrice: 0,
+      subCommissionSecondPrice: 0
+    }
+  ]
+}
 
 const categoryList = ref() // 分类树
 onMounted(async () => {

src/views/mall/product/management/components/SkuList/index.vue → src/views/mall/product/management/components/SkuList.vue

@@ -21,48 +21,68 @@
     </template>
     <el-table-column align="center" label="商品条码" min-width="120">
       <template #default="{ row }">
-        <el-input v-model="row.barCode" :min="0" class="w-100%" />
+        <el-input v-model="row.barCode" class="w-100%" />
       </template>
     </el-table-column>
     <el-table-column align="center" label="销售价(分)" min-width="120">
       <template #default="{ row }">
-        <el-input v-model="row.price" :min="0" class="w-100%" type="number" />
+        <el-input-number v-model="row.price" :min="0" class="w-100%" controls-position="right" />
       </template>
     </el-table-column>
     <el-table-column align="center" label="市场价(分)" min-width="120">
       <template #default="{ row }">
-        <el-input v-model="row.marketPrice" :min="0" class="w-100%" type="number" />
+        <el-input-number
+          v-model="row.marketPrice"
+          :min="0"
+          class="w-100%"
+          controls-position="right"
+        />
       </template>
     </el-table-column>
     <el-table-column align="center" label="成本价(分)" min-width="120">
       <template #default="{ row }">
-        <el-input v-model="row.costPrice" :min="0" class="w-100%" type="number" />
+        <el-input-number
+          v-model="row.costPrice"
+          :min="0"
+          class="w-100%"
+          controls-position="right"
+        />
       </template>
     </el-table-column>
     <el-table-column align="center" label="库存" min-width="120">
       <template #default="{ row }">
-        <el-input v-model="row.stock" :min="0" class="w-100%" type="number" />
+        <el-input-number v-model="row.stock" :min="0" class="w-100%" controls-position="right" />
       </template>
     </el-table-column>
     <el-table-column align="center" label="重量(kg)" min-width="120">
       <template #default="{ row }">
-        <el-input v-model="row.weight" :min="0" class="w-100%" type="number" />
+        <el-input-number v-model="row.weight" :min="0" class="w-100%" controls-position="right" />
       </template>
     </el-table-column>
     <el-table-column align="center" label="体积(m^3)" min-width="120">
       <template #default="{ row }">
-        <el-input v-model="row.volume" :min="0" class="w-100%" type="number" />
+        <el-input-number v-model="row.volume" :min="0" class="w-100%" controls-position="right" />
       </template>
     </el-table-column>
     <template v-if="formData.subCommissionType">
       <el-table-column align="center" label="一级返佣(分)" min-width="120">
         <template #default="{ row }">
-          <el-input v-model="row.subCommissionFirstPrice" :min="0" class="w-100%" type="number" />
+          <el-input-number
+            v-model="row.subCommissionFirstPrice"
+            :min="0"
+            class="w-100%"
+            controls-position="right"
+          />
         </template>
       </el-table-column>
       <el-table-column align="center" label="二级返佣(分)" min-width="120">
         <template #default="{ row }">
-          <el-input v-model="row.subCommissionSecondPrice" :min="0" class="w-100%" type="number" />
+          <el-input-number
+            v-model="row.subCommissionSecondPrice"
+            :min="0"
+            class="w-100%"
+            controls-position="right"
+          />
         </template>
       </el-table-column>
     </template>
@@ -77,7 +97,7 @@
   </el-table>
 </template>
 
-<script lang="ts" name="index" setup>
+<script lang="ts" name="SkuList" setup>
 import { UploadImg } from '@/components/UploadFile'
 import { PropType } from 'vue'
 import { SpuType } from '@/api/mall/product/management/type/spuType'
@@ -131,7 +151,15 @@ const SkuData = ref<SkuType[]>([
     /**
      * 商品体积，单位：m^3 平米
      */
-    volume: 0
+    volume: 0,
+    /**
+     * 一级分销的佣金，单位：分
+     */
+    subCommissionFirstPrice: 0,
+    /**
+     * 二级分销的佣金，单位：分
+     */
+    subCommissionSecondPrice: 0
   }
 ])
 /** 批量添加 */
@@ -180,7 +208,9 @@ const generateTableData = (data: any[]) => {
       picUrl: '',
       stock: 0,
       weight: 0,
-      volume: 0
+      volume: 0,
+      subCommissionFirstPrice: 0,
+      subCommissionSecondPrice: 0
     }
     if (Array.isArray(item)) {
       row.properties = item
@@ -229,7 +259,9 @@ watch(
           picUrl: '',
           stock: 0,
           weight: 0,
-          volume: 0
+          volume: 0,
+          subCommissionFirstPrice: 0,
+          subCommissionSecondPrice: 0
         }
       ]
     }

src/views/mall/product/management/components/index.ts

@@ -1,5 +1,15 @@
 import BasicInfoForm from './BasicInfoForm.vue'
 import DescriptionForm from './DescriptionForm.vue'
 import OtherSettingsForm from './OtherSettingsForm.vue'
+import ProductAttributes from './ProductAttributes.vue'
+import ProductAttributesAddForm from './ProductAttributesAddForm.vue'
+import SkuList from './SkuList.vue'
 
-export { BasicInfoForm, DescriptionForm, OtherSettingsForm }
+export {
+  BasicInfoForm,
+  DescriptionForm,
+  OtherSettingsForm,
+  ProductAttributes,
+  ProductAttributesAddForm,
+  SkuList
+}