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

2023-05-01 19:01:24 +08:00 · 2023-05-01 19:01:24 +08:00 · 6478d295df
commit 6478d295df
parent 64f6f67ddd
6 changed files with 195 additions and 78 deletions
--- 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 // 商品简介
--- 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' // 商品单位
 }
--- 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
  }
--- 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="批量设置">
+        <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>
+          <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 () => {
--- a/src/views/mall/product/management/components/SkuList/index.vue
+++ b/src/views/mall/product/management/components/SkuList/index.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
        }
      ]
    }
--- 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
+}