code review 商品管理的实现

Author: YunaiV

src/api/mall/product/management/spu.ts

@@ -1,30 +1,38 @@
 import request from '@/config/axios'
-import type { SpuType } from './type/spuType'
+import type { SpuType } from './type/spuType' // TODO  @puhui999: type 和 api 一起放,简单一点哈~
 
-// 获得spu列表
-export const getSpuList = (params: any) => {
+// TODO @puhui999：中英文之间有空格
+
+// 获得spu列表 TODO @puhui999：这个是 getSpuPage 哈
+export const getSpuList = (params: PageParam) => {
   return request.get({ url: '/product/spu/page', params })
 }
+
 // 获得spu列表tabsCount
 export const getTabsCount = () => {
   return request.get({ url: '/product/spu/tabsCount' })
 }
+
 // 创建商品spu
 export const createSpu = (data: SpuType) => {
   return request.post({ url: '/product/spu/create', data })
 }
+
 // 更新商品spu
 export const updateSpu = (data: SpuType) => {
   return request.put({ url: '/product/spu/update', data })
 }
+
 // 更新商品spu status
 export const updateStatus = (data: { id: number; status: number }) => {
   return request.put({ url: '/product/spu/updateStatus', data })
 }
-// 获得商品spu
+
+// 获得商品 spu
 export const getSpu = (id: number) => {
   return request.get({ url: `/product/spu/get-detail?id=${id}` })
 }
+
 // 删除商品Spu
 export const deleteSpu = (id: number) => {
   return request.delete({ url: `/product/spu/delete?id=${id}` })

src/router/modules/remaining.ts

@@ -355,8 +355,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'productManagementAdd',
-        component: () => import('@/views/mall/product/management/addForm.vue'),
+        path: 'productManagementAdd', // TODO @puhui999：最好拆成 add 和 edit 两个路由；添加商品；修改商品
+        component: () => import('@/views/mall/product/spu/addForm.vue'),
         name: 'ProductManagementAdd',
         meta: {
           noCache: true,

src/utils/constants.ts

@@ -220,6 +220,7 @@ export const PayRefundStatusEnum = {
     name: '退款关闭'
   }
 }
+
 /**
  * 商品SPU枚举类
  */

src/utils/object.ts

@@ -1,3 +1,4 @@
+// TODO @puhui999：这个方法，可以考虑放到 index.js
 /**
  * 将值复制到目标对象，且以目标对象属性为准，例：target: {a:1} source:{a:2,b:3} 结果为：{a:2}
  * @param target 目标对象

src/views/mall/product/management/addForm.vue renamed to src/views/mall/product/spu/addForm.vue

@@ -37,7 +37,6 @@ import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
 import type { SpuType } from '@/api/mall/product/management/type/spuType' // 业务api
 import * as managementApi from '@/api/mall/product/management/spu'
 import * as PropertyApi from '@/api/mall/product/property'
-
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push, currentRoute } = useRouter() // 路由
@@ -69,7 +68,7 @@ const formData = ref<SpuType>({
   skus: [
     {
       /**
-       * 商品价格，单位：分
+       * 商品价格，单位：分 TODO @puhui999：注释放在尾巴哈，简洁一点~
        */
       price: 0,
       /**
@@ -120,6 +119,7 @@ const formData = ref<SpuType>({
   recommendNew: false, // 是否新品
   recommendGood: false // 是否优品
 })
+
 /** 获得详情 */
 const getDetail = async () => {
   const id = query.id as unknown as number
@@ -129,6 +129,7 @@ const getDetail = async () => {
       const res = (await managementApi.getSpu(id)) as SpuType
       formData.value = res
       // 直接取第一个值就能得到所有属性的id
+      // TODO @puhui999：可以直接拿 propertyName 拼接处规格 id + 属性，可以看下商品 uniapp 详情的做法
       const propertyIds = res.skus[0]?.properties.map((item) => item.propertyId)
       const PropertyS = await PropertyApi.getPropertyListAndValue({ propertyIds })
       await nextTick()
@@ -151,6 +152,7 @@ const submitForm = async () => {
     await unref(BasicInfoRef)?.validate()
     await unref(DescriptionRef)?.validate()
     await unref(OtherSettingsRef)?.validate()
+    // TODO @puhui：直接做深拷贝？这样最终 server 端不满足，不需要恢复
     // 处理掉一些无关数据
     formData.value.skus.forEach((item) => {
       // 给sku name赋值
@@ -166,6 +168,7 @@ const submitForm = async () => {
     const newSliderPicUrls = []
     formData.value.sliderPicUrls.forEach((item) => {
       // 如果是前端选的图
+      // TODO @puhui999：疑问哈，为啥会是 object 呀？
       if (typeof item === 'object') {
         newSliderPicUrls.push(item.url)
       } else {
@@ -224,6 +227,7 @@ const resetForm = async () => {
 }
 /** 关闭按钮 */
 const close = () => {
+  // TODO @puhui999：是不是不用 reset 呀？close 默认销毁
   resetForm()
   delView(unref(currentRoute))
   push('/product/product-management')

src/views/mall/product/management/components/BasicInfoForm.vue renamed to src/views/mall/product/spu/components/BasicInfoForm.vue

@@ -7,6 +7,7 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
+        <!-- TODO @puhui999：只能选根节点 -->
         <el-form-item label="商品分类" prop="categoryId">
           <el-tree-select
             v-model="formData.categoryId"
@@ -15,6 +16,7 @@
             check-strictly
             node-key="id"
             placeholder="请选择商品分类"
+            class="w-1/1"
           />
         </el-form-item>
       </el-col>
@@ -25,7 +27,7 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="单位" prop="unit">
-          <el-select v-model="formData.unit" placeholder="请选择单位">
+          <el-select v-model="formData.unit" placeholder="请选择单位" class="w-1/1">
             <el-option
               v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_UNIT)"
               :key="dict.value"
@@ -57,7 +59,7 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="运费模板" prop="deliveryTemplateId">
-          <el-select v-model="formData.deliveryTemplateId" placeholder="请选择" style="width: 100%">
+          <el-select v-model="formData.deliveryTemplateId" placeholder="请选择" class="w-1/1">
             <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
@@ -84,9 +86,8 @@
       <!-- 多规格添加-->
       <el-col :span="24">
         <el-form-item v-if="formData.specType" label="商品属性">
-          <el-button class="mr-15px mb-10px" @click="AttributesAddFormRef.open()"
-            >添加规格
-          </el-button>
+          <!-- TODO @puhui999：参考 https://admin.java.crmeb.net/store/list/creatProduct 添加规格好做么？添加的时候，不用输入备注哈 -->
+          <el-button class="mr-15px mb-10px" @click="AttributesAddFormRef.open">添加规格</el-button>
           <ProductAttributes :attribute-data="attributeList" />
         </el-form-item>
         <template v-if="formData.specType && attributeList.length > 0">
@@ -108,28 +109,27 @@
 <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 { copyValueToTarget } from '@/utils/object'
 import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
-// 业务Api
 import * as ProductCategoryApi from '@/api/mall/product/category'
 import { propTypes } from '@/utils/propTypes'
-
 const message = useMessage() // 消息弹窗
+
 const props = defineProps({
   propFormData: {
     type: Object as PropType<SpuType>,
     default: () => {}
   },
   activeName: propTypes.string.def('')
 })
-const AttributesAddFormRef = ref() // 添加商品属性表单
-const ProductManagementBasicInfoRef = ref() // 表单Ref
+const AttributesAddFormRef = ref() // 添加商品属性表单 TODO @puhui999：小写开头哈
+const ProductManagementBasicInfoRef = ref() // 表单Ref TODO @puhui999：小写开头哈
+// TODO @puhui999：attributeList 改成 propertyList，会更统一一点
 const attributeList = ref([]) // 商品属性列表
-/** 添加商品属性 */
+/** 添加商品属性 */ // TODO @puhui999：propFormData 算出来
 const addAttribute = (property: any) => {
   if (Array.isArray(property)) {
     attributeList.value = property
@@ -162,8 +162,9 @@ const rules = reactive({
   specType: [required],
   subCommissionType: [required]
 })
+
 /**
- * 将传进来的值赋值给formData
+ * 将传进来的值赋值给 formData
  */
 watch(
   () => props.propFormData,
@@ -176,10 +177,11 @@ watch(
     immediate: true
   }
 )
-const emit = defineEmits(['update:activeName'])
+
 /**
  * 表单校验
  */
+const emit = defineEmits(['update:activeName'])
 const validate = async () => {
   // 校验表单
   if (!ProductManagementBasicInfoRef) return
@@ -197,15 +199,16 @@ const validate = async () => {
 }
 defineExpose({ validate, addAttribute })
 
-// 分销类型
+/** 分销类型 */
 const changeSubCommissionType = () => {
   // 默认为零，类型切换后也要重置为零
   for (const item of formData.skus) {
     item.subCommissionFirstPrice = 0
     item.subCommissionSecondPrice = 0
   }
 }
-// 选择规格
+
+/** 选择规格 */
 const onChangeSpec = () => {
   // 重置商品属性列表
   attributeList.value = []

src/views/mall/product/management/components/DescriptionForm.vue renamed to src/views/mall/product/spu/components/DescriptionForm.vue

@@ -25,6 +25,11 @@ const DescriptionFormRef = ref() // 表单Ref
 const formData = ref<SpuType>({
   description: '' // 商品详情
 })
+// 表单规则
+const rules = reactive({
+  description: [required]
+})
+
 /**
  * 富文本编辑器如果输入过再清空会有残留，需再重置一次
  */
@@ -40,10 +45,7 @@ watch(
     immediate: true
   }
 )
-// 表单规则
-const rules = reactive({
-  description: [required]
-})
+
 /**
  * 将传进来的值赋值给formData
  */
@@ -58,10 +60,11 @@ watch(
     immediate: true
   }
 )
-const emit = defineEmits(['update:activeName'])
+
 /**
  * 表单校验
  */
+const emit = defineEmits(['update:activeName'])
 const validate = async () => {
   // 校验表单
   if (!DescriptionFormRef) return

src/views/mall/product/management/components/OtherSettingsForm.vue renamed to src/views/mall/product/spu/components/OtherSettingsForm.vue

@@ -1,6 +1,7 @@
 <template>
   <el-form ref="OtherSettingsFormRef" :model="formData" :rules="rules" label-width="120px">
     <el-row>
+      <!-- TODO @puhui999：横着三个哈 -->
       <el-col :span="24">
         <el-col :span="8">
           <el-form-item label="商品排序" prop="sort">
@@ -40,6 +41,7 @@
           <el-tag class="ml-2" type="warning">拼团</el-tag>
         </el-form-item>
       </el-col>
+      <!-- TODO @puhui999：等优惠劵 ok 在搞 -->
       <el-col :span="24">
         <el-form-item label="赠送优惠劵">
           <el-button>选择优惠券</el-button>
@@ -49,32 +51,31 @@
   </el-form>
 </template>
 <script lang="ts" name="OtherSettingsForm" setup>
-// 商品推荐
 import type { SpuType } from '@/api/mall/product/management/type/spuType'
 import { PropType } from 'vue'
 import { copyValueToTarget } from '@/utils/object'
 import { propTypes } from '@/utils/propTypes'
-
 const message = useMessage() // 消息弹窗
+
 const props = defineProps({
   propFormData: {
     type: Object as PropType<SpuType>,
     default: () => {}
   },
   activeName: propTypes.string.def('')
 })
-// 商品推荐选项
+// 商品推荐选项 TODO @puhui999：这种叫 recommendOptions 会更合适哈
 const recommend = [
   { name: '是否热卖', value: 'recommendHot' },
   { name: '是否优惠', value: 'recommendBenefit' },
   { name: '是否精品', value: 'recommendBest' },
   { name: '是否新品', value: 'recommendNew' },
   { name: '是否优品', value: 'recommendGood' }
 ]
-// 选中推荐选项
-const checkboxGroup = ref<string[]>(['recommendHot'])
-// 选择商品后赋值
+const checkboxGroup = ref<string[]>(['recommendHot']) // 选中推荐选项
+/** 选择商品后赋值 */
 const onChangeGroup = () => {
+  // TODO @puhui999：是不是可以遍历 recommend，然后进行是否选中；
   checkboxGroup.value.includes('recommendHot')
     ? (formData.value.recommendHot = true)
     : (formData.value.recommendHot = false)
@@ -109,6 +110,7 @@ const rules = reactive({
   giveIntegral: [required],
   virtualSalesCount: [required]
 })
+
 /**
  * 将传进来的值赋值给formData
  */
@@ -130,10 +132,11 @@ watch(
     immediate: true
   }
 )
-const emit = defineEmits(['update:activeName'])
+
 /**
  * 表单校验
  */
+const emit = defineEmits(['update:activeName'])
 const validate = async () => {
   // 校验表单
   if (!OtherSettingsFormRef) return
@@ -149,6 +152,5 @@ const validate = async () => {
     }
   })
 }
-
 defineExpose({ validate })
 </script>

src/views/mall/product/management/components/ProductAttributes.vue renamed to src/views/mall/product/spu/components/ProductAttributes.vue

@@ -71,16 +71,19 @@ watch(
     immediate: true
   }
 )
+
 /** 删除标签 tagValue 标签值*/
 const handleClose = (index, valueIndex) => {
   attributeList.value[index].values?.splice(valueIndex, 1)
 }
+
 /** 显示输入框并获取焦点 */
 const showInput = async (index) => {
   attributeIndex.value = index
   // 因为组件在ref中所以需要用索引获取对应的Ref
   InputRef.value[index]!.input!.focus()
 }
+
 /** 输入框失去焦点或点击回车时触发 */
 const handleInputConfirm = async (index, propertyId) => {
   if (inputValue.value) {