code review：商品管理

(cherry picked from commit 158585670c)

src/utils/tree.ts

@@ -304,11 +304,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) {

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元！！')
+    message.warning('商品相关价格不能低于 0.01 元！！')
-    throw new Error('商品相关价格不能低于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) => {

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>,

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 ? '是' : '否' }}

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>

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: '商品名称',

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