From 158585670ccab231b7a0902f62b9d134af747d50 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 3 Jun 2023 20:50:07 +0800
Subject: [PATCH] =?UTF-8?q?code=20review=EF=BC=9A=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/tree.ts                             |  3 +++
 .../product/spu/components/BasicInfoForm.vue  | 22 +++++++++++++------
 .../spu/components/DescriptionForm.vue        |  6 +++--
 .../spu/components/OtherSettingsForm.vue      |  3 +++
 .../mall/product/spu/components/SkuList.vue   |  4 +++-
 .../mall/product/spu/components/spu.data.ts   |  1 +
 src/views/mall/product/spu/index.vue          |  1 -
 7 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/utils/tree.ts b/src/utils/tree.ts
index 65a9345c..c8503f54 100644
--- a/src/utils/tree.ts
+++ b/src/utils/tree.ts
@@ -306,11 +306,14 @@ export const handleTree2 = (data, id, parentId, children, rootId) => {
   })
   return treeData !== '' ? treeData : data
 }
+
 /**
+ * 校验选中的节点，是否为指定 level
  *
  * @param tree 要操作的树结构数据
  * @param nodeId 需要判断在什么层级的数据
  * @param level 检查的级别, 默认检查到二级
+ * @return true 是；false 否
  */
 export const checkSelectedNode = (tree: any[], nodeId: any, level = 2): boolean => {
   if (typeof tree === 'undefined' || !Array.isArray(tree) || tree.length === 0) {
diff --git a/src/views/mall/product/spu/components/BasicInfoForm.vue b/src/views/mall/product/spu/components/BasicInfoForm.vue
index 00a82a87..b8ae405c 100644
--- a/src/views/mall/product/spu/components/BasicInfoForm.vue
+++ b/src/views/mall/product/spu/components/BasicInfoForm.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 情况一：添加/修改 -->
   <el-form
     v-if="!isDetail"
     ref="productSpuBasicInfoRef"
@@ -23,7 +24,7 @@
             class="w-1/1"
             node-key="id"
             placeholder="请选择商品分类"
-            @change="nodeClick"
+            @change="categoryNodeClick"
           />
         </el-form-item>
       </el-col>
@@ -126,8 +127,8 @@
       </el-col>
     </el-row>
   </el-form>
-  <ProductAttributesAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
-  <!-- 详情跟表单放在一块可以共用已有功能，再抽离成组件有点过度封装的感觉 -->
+
+  <!-- 情况二：详情 -->
   <Descriptions v-if="isDetail" :data="formData" :schema="allSchemas.detailSchema">
     <template #categoryId="{ row }"> {{ categoryString(row.categoryId) }}</template>
     <template #brandId="{ row }">
@@ -163,6 +164,10 @@
       />
     </template>
   </Descriptions>
+
+  <!-- 商品属性添加 Form 表单 -->
+  <!-- TODO @puhui999: ProductPropertyAddForm 是不是更合适呀 -->
+  <ProductAttributesAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
 </template>
 <script lang="ts" name="ProductSpuBasicInfoForm" setup>
 import { PropType } from 'vue'
@@ -257,7 +262,9 @@ watch(
       url: item
     }))
     // 只有是多规格才处理
-    if (!formData.specType) return
+    if (!formData.specType) {
+      return
+    }
     //  直接拿返回的 skus 属性逆向生成出 propertyList
     const properties = []
     formData.skus.forEach((sku) => {
@@ -287,8 +294,8 @@ const emit = defineEmits(['update:activeName'])
 const validate = async () => {
   // 校验 sku
   if (!skuListRef.value.validateSku()) {
-    message.warning('商品相关价格不能低于0.01元！！')
-    throw new Error('商品相关价格不能低于0.01元！！')
+    message.warning('商品相关价格不能低于 0.01 元！！')
+    throw new Error('商品相关价格不能低于 0.01 元！！')
   }
   // 校验表单
   if (!productSpuBasicInfoRef) return
@@ -340,7 +347,7 @@ const categoryList = ref([]) // 分类树
 /**
  * 选择分类时触发校验
  */
-const nodeClick = () => {
+const categoryNodeClick = () => {
   if (!checkSelectedNode(categoryList.value, formData.categoryId)) {
     formData.categoryId = null
     message.warning('必须选择二级及以下节点！！')
@@ -348,6 +355,7 @@ const nodeClick = () => {
 }
 /**
  * 获取分类的节点的完整结构
+ *
  * @param categoryId 分类id
  */
 const categoryString = (categoryId) => {
diff --git a/src/views/mall/product/spu/components/DescriptionForm.vue b/src/views/mall/product/spu/components/DescriptionForm.vue
index f7597006..c272b239 100644
--- a/src/views/mall/product/spu/components/DescriptionForm.vue
+++ b/src/views/mall/product/spu/components/DescriptionForm.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 情况一：添加/修改 -->
   <el-form
     v-if="!isDetail"
     ref="descriptionFormRef"
@@ -11,6 +12,8 @@
       <Editor v-model:modelValue="formData.description" />
     </el-form-item>
   </el-form>
+
+  <!-- 情况二：详情 -->
   <Descriptions
     v-if="isDetail"
     :data="formData"
@@ -30,10 +33,9 @@ import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { copyValueToTarget } from '@/utils'
 import { descriptionSchema } from './spu.data'
+const message = useMessage() // 消息弹窗
 
 const { allSchemas } = useCrudSchemas(descriptionSchema)
-
-const message = useMessage() // 消息弹窗
 const props = defineProps({
   propFormData: {
     type: Object as PropType<Spu>,
diff --git a/src/views/mall/product/spu/components/OtherSettingsForm.vue b/src/views/mall/product/spu/components/OtherSettingsForm.vue
index 09a4f222..98f35727 100644
--- a/src/views/mall/product/spu/components/OtherSettingsForm.vue
+++ b/src/views/mall/product/spu/components/OtherSettingsForm.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 情况一：添加/修改 -->
   <el-form
     v-if="!isDetail"
     ref="otherSettingsFormRef"
@@ -56,6 +57,8 @@
       </el-col>
     </el-row>
   </el-form>
+
+  <!-- 情况二：详情 -->
   <Descriptions v-if="isDetail" :data="formData" :schema="allSchemas.detailSchema">
     <template #recommendHot="{ row }">
       {{ row.recommendHot ? '是' : '否' }}
diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue
index ebb54a96..916746e3 100644
--- a/src/views/mall/product/spu/components/SkuList.vue
+++ b/src/views/mall/product/spu/components/SkuList.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 情况一：添加/修改 -->
   <el-table
     v-if="!isDetail"
     :data="isBatch ? skuList : formData!.skus"
@@ -109,6 +110,8 @@
       </template>
     </el-table-column>
   </el-table>
+
+  <!-- 情况二：详情 -->
   <el-table
     v-if="isDetail"
     :data="formData!.skus"
@@ -132,7 +135,6 @@
         min-width="80"
       >
         <template #default="{ row }">
-          <!-- TODO puhui999：展示成蓝色，有点区分度哈 fix-->
           <span style="font-weight: bold; color: #40aaff">
             {{ row.properties[index]?.valueName }}
           </span>
diff --git a/src/views/mall/product/spu/components/spu.data.ts b/src/views/mall/product/spu/components/spu.data.ts
index 41c43df9..befb6e8a 100644
--- a/src/views/mall/product/spu/components/spu.data.ts
+++ b/src/views/mall/product/spu/components/spu.data.ts
@@ -1,5 +1,6 @@
 import { CrudSchema } from '@/hooks/web/useCrudSchemas'
 
+// TODO @puhui999：如果只要 detail，可以不用 CrudSchema，只要描述的 Schema
 export const basicInfoSchema = reactive<CrudSchema[]>([
   {
     label: '商品名称',
diff --git a/src/views/mall/product/spu/index.vue b/src/views/mall/product/spu/index.vue
index 47a9c8d5..5cd90bf4 100644
--- a/src/views/mall/product/spu/index.vue
+++ b/src/views/mall/product/spu/index.vue
@@ -171,7 +171,6 @@
       </el-table-column>
       <el-table-column align="center" fixed="right" label="操作" min-width="200">
         <template #default="{ row }">
-          <!-- TODO @puhui999：【详情】，可以后面点做哈 fix-->
           <el-button
             v-hasPermi="['product:spu:update']"
             link