From 6478d295dfc0b7a01c46abf3eb0dbc1b633f4f27 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 1 May 2023 19:01:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E7=AE=A1=E7=90=86:=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/management/type/spuType.ts   |  4 +-
 src/utils/dict.ts                             |  5 +-
 src/views/mall/product/management/addForm.vue | 97 ++++++++++++++++---
 .../management/components/BasicInfoForm.vue   | 97 +++++++++----------
 .../{SkuList/index.vue => SkuList.vue}        | 58 ++++++++---
 .../product/management/components/index.ts    | 12 ++-
 6 files changed, 195 insertions(+), 78 deletions(-)
 rename src/views/mall/product/management/components/{SkuList/index.vue => SkuList.vue} (80%)

diff --git a/src/api/mall/product/management/type/spuType.ts b/src/api/mall/product/management/type/spuType.ts
index 5d9b65ef..f0deaed3 100644
--- a/src/api/mall/product/management/type/spuType.ts
+++ b/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 // 商品简介
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 03e17e75..f4e77c22 100644
--- a/src/utils/dict.ts
+++ b/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' // 商品单位
 }
diff --git a/src/views/mall/product/management/addForm.vue b/src/views/mall/product/management/addForm.vue
index ad973394..673aa2a3 100644
--- a/src/views/mall/product/management/addForm.vue
+++ b/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
   }
diff --git a/src/views/mall/product/management/components/BasicInfoForm.vue b/src/views/mall/product/management/components/BasicInfoForm.vue
index d06a787d..b04a9ef3 100644
--- a/src/views/mall/product/management/components/BasicInfoForm.vue
+++ b/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 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'
-// 业务Api
-import * as ProductCategoryApi from '@/api/mall/product/category'
 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 { copyValueToTarget } from '@/utils/object'
+import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
+// 业务Api
+import * as ProductCategoryApi from '@/api/mall/product/category'
 
 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 () => {
diff --git a/src/views/mall/product/management/components/SkuList/index.vue b/src/views/mall/product/management/components/SkuList.vue
similarity index 80%
rename from src/views/mall/product/management/components/SkuList/index.vue
rename to src/views/mall/product/management/components/SkuList.vue
index b46e02d0..9ed41f50 100644
--- a/src/views/mall/product/management/components/SkuList/index.vue
+++ b/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
         }
       ]
     }
diff --git a/src/views/mall/product/management/components/index.ts b/src/views/mall/product/management/components/index.ts
index 04e6f74d..f908e7d3 100644
--- a/src/views/mall/product/management/components/index.ts
+++ b/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
+}