重构：商品详情界面的路由、文件路径

src/router/modules/remaining.ts

@@ -195,22 +195,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
-  {
-    path: '/trade/order',
-    component: Layout,
-    name: 'order',
-    meta: {
-      hidden: true
-    },
-    children: [
-      {
-        path: 'detail',
-        name: 'TradeOrderDetail',
-        component: () => import('@/views/mall/trade/order/tradeOrderDetail.vue'),
-        meta: { title: '订单详情', hidden: true }
-      }
-    ]
-  },
   {
     path: '/403',
     component: () => import('@/views/Error/403.vue'),
@@ -356,7 +340,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     children: [
       {
         path: 'spu/add',
-        component: () => import('@/views/mall/product/spu/addForm.vue'),
+        component: () => import('@/views/mall/product/spu/form/index.vue'),
         name: 'ProductSpuAdd',
         meta: {
           noCache: true,
@@ -369,7 +353,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: 'spu/edit/:spuId(\\d+)',
-        component: () => import('@/views/mall/product/spu/addForm.vue'),
+        component: () => import('@/views/mall/product/spu/form/index.vue'),
         name: 'ProductSpuEdit',
         meta: {
           noCache: true,
@@ -382,7 +366,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: 'spu/detail/:spuId(\\d+)',
-        component: () => import('@/views/mall/product/spu/addForm.vue'),
+        component: () => import('@/views/mall/product/spu/form/index.vue'),
         name: 'ProductSpuDetail',
         meta: {
           noCache: true,

src/views/mall/product/spu/components/index.ts

@@ -1,12 +1,5 @@
-import BasicInfoForm from './BasicInfoForm.vue'
-import DescriptionForm from './DescriptionForm.vue'
-import OtherSettingsForm from './OtherSettingsForm.vue'
-import ProductAttributes from './ProductAttributes.vue'
-import ProductPropertyAddForm from './ProductPropertyAddForm.vue'
 import SkuList from './SkuList.vue'
 
-import { Spu } from '@/api/mall/product/spu'
-
 interface PropertyAndValues {
   id: number
   name: string
@@ -29,42 +22,4 @@ interface RuleConfig {
   message: string
 }
 
-/**
- * 获得商品的规格列表
- *
- * @param spu
- * @return PropertyAndValues 规格列表
- */
-const getPropertyList = (spu: Spu): PropertyAndValues[] => {
-  //  直接拿返回的 skus 属性逆向生成出 propertyList
-  const properties: PropertyAndValues[] = []
-  // 只有是多规格才处理
-  if (spu.specType) {
-    spu.skus?.forEach((sku) => {
-      sku.properties?.forEach(({ propertyId, propertyName, valueId, valueName }) => {
-        // 添加属性
-        if (!properties?.some((item) => item.id === propertyId)) {
-          properties.push({ id: propertyId!, name: propertyName!, values: [] })
-        }
-        // 添加属性值
-        const index = properties?.findIndex((item) => item.id === propertyId)
-        if (!properties[index].values?.some((value) => value.id === valueId)) {
-          properties[index].values?.push({ id: valueId!, name: valueName! })
-        }
-      })
-    })
-  }
-  return properties
-}
-
-export {
-  BasicInfoForm,
-  DescriptionForm,
-  OtherSettingsForm,
-  ProductAttributes,
-  ProductPropertyAddForm,
-  SkuList,
-  getPropertyList,
-  PropertyAndValues,
-  RuleConfig
-}
+export { SkuList, PropertyAndValues, RuleConfig }

src/views/mall/product/spu/form/BasicInfoForm.vue

@@ -175,13 +175,17 @@ import { propTypes } from '@/utils/propTypes'
 import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/utils/tree'
 import { createImageViewer } from '@/components/ImageViewer'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { UploadImg, UploadImgs } from '@/components/UploadFile'
-import { getPropertyList, ProductAttributes, ProductPropertyAddForm, SkuList } from './index'
+import { PropertyAndValues, SkuList } from '@/views/mall/product/spu/components/index.ts'
+import ProductAttributes from './ProductAttributes.vue'
+import ProductPropertyAddForm from './ProductPropertyAddForm.vue'
 import { basicInfoSchema } from './spu.data'
 import type { Spu } from '@/api/mall/product/spu'
 import * as ProductCategoryApi from '@/api/mall/product/category'
-import { getSimpleBrandList } from '@/api/mall/product/brand'
-import { getSimpleTemplateList } from '@/api/mall/trade/delivery/expressTemplate/index'
+import * as ProductBrandApi from '@/api/mall/product/brand'
+import * as ExpressTemplateApi from '@/api/mall/trade/delivery/expressTemplate'
+
+defineOptions({ name: 'ProductSpuBasicInfoForm' })
+
 // ====== 商品详情相关操作 ======
 const { allSchemas } = useCrudSchemas(basicInfoSchema)
 /** 商品图预览 */
@@ -198,9 +202,36 @@ const imagePreview = (args) => {
     urlList
   })
 }
-// ====== end ======
 
-defineOptions({ name: 'ProductSpuBasicInfoForm' })
+/**
+ * 获得商品的规格列表
+ *
+ * @param spu
+ * @return PropertyAndValues 规格列表
+ */
+const getPropertyList = (spu: Spu): PropertyAndValues[] => {
+  //  直接拿返回的 skus 属性逆向生成出 propertyList
+  const properties: PropertyAndValues[] = []
+  // 只有是多规格才处理
+  if (spu.specType) {
+    spu.skus?.forEach((sku) => {
+      sku.properties?.forEach(({ propertyId, propertyName, valueId, valueName }) => {
+        // 添加属性
+        if (!properties?.some((item) => item.id === propertyId)) {
+          properties.push({ id: propertyId!, name: propertyName!, values: [] })
+        }
+        // 添加属性值
+        const index = properties?.findIndex((item) => item.id === propertyId)
+        if (!properties[index].values?.some((value) => value.id === valueId)) {
+          properties[index].values?.push({ id: valueId!, name: valueName! })
+        }
+      })
+    })
+  }
+  return properties
+}
+
+// ====== end ======
 
 const message = useMessage() // 消息弹窗
 
@@ -346,8 +377,8 @@ onMounted(async () => {
   const data = await ProductCategoryApi.getCategoryList({})
   categoryList.value = handleTree(data, 'id', 'parentId')
   // 获取商品品牌列表
-  brandList.value = await getSimpleBrandList()
+  brandList.value = await ProductBrandApi.getSimpleBrandList()
   // 获取运费模版
-  deliveryTemplateList.value = await getSimpleTemplateList()
+  deliveryTemplateList.value = await ExpressTemplateApi.getSimpleTemplateList()
 })
 </script>

src/views/mall/product/spu/form/index.vue

@@ -39,13 +39,12 @@
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash-es'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
-// 业务api
 import * as ProductSpuApi from '@/api/mall/product/spu'
+import BasicInfoForm from './BasicInfoForm.vue'
+import DescriptionForm from './DescriptionForm.vue'
+import OtherSettingsForm from './OtherSettingsForm.vue'
 import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
 
-// TODO @芋艿：后续稍微调整下；
-
 defineOptions({ name: 'ProductSpuForm' })
 
 const { t } = useI18n() // 国际化