!217 完善 TODO 提到的问题，优化订单列表相关页面结构

Merge pull request !217 from puhui999/dev-to-dev

src/views/mall/product/property/index.vue

@@ -101,6 +101,7 @@
 import { dateFormatter } from '@/utils/formatTime'
 import * as PropertyApi from '@/api/mall/product/property'
 import PropertyForm from './PropertyForm.vue'
+
 const { push } = useRouter()
 
 defineOptions({ name: 'ProductProperty' })
@@ -164,7 +165,7 @@ const handleDelete = async (id: number) => {
 
 /** 跳转商品属性列表 */
 const goValueList = (id: number) => {
-  push({ path: '/property/value/' + id })
+  push({ path: '/product/property/value/' + id })
 }
 
 /** 初始化 **/

src/views/mall/product/spu/addForm.vue

@@ -42,7 +42,7 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
 import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
 // 业务api
 import * as ProductSpuApi from '@/api/mall/product/spu'
-import { convertToInteger, formatToFraction } from '@/utils'
+import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
 
 // TODO @芋艿：后续稍微调整下；
 
@@ -109,12 +109,20 @@ const getDetail = async () => {
     try {
       const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
       res.skus?.forEach((item) => {
-        // 回显价格分转元
-        item.price = formatToFraction(item.price)
-        item.marketPrice = formatToFraction(item.marketPrice)
-        item.costPrice = formatToFraction(item.costPrice)
-        item.subCommissionFirstPrice = formatToFraction(item.subCommissionFirstPrice)
-        item.subCommissionSecondPrice = formatToFraction(item.subCommissionSecondPrice)
+        if (isDetail.value === true) {
+          item.price = floatToFixed2(item.price)
+          item.marketPrice = floatToFixed2(item.marketPrice)
+          item.costPrice = floatToFixed2(item.costPrice)
+          item.subCommissionFirstPrice = floatToFixed2(item.subCommissionFirstPrice)
+          item.subCommissionSecondPrice = floatToFixed2(item.subCommissionSecondPrice)
+        } else {
+          // 回显价格分转元
+          item.price = formatToFraction(item.price)
+          item.marketPrice = formatToFraction(item.marketPrice)
+          item.costPrice = formatToFraction(item.costPrice)
+          item.subCommissionFirstPrice = formatToFraction(item.subCommissionFirstPrice)
+          item.subCommissionSecondPrice = formatToFraction(item.subCommissionSecondPrice)
+        }
       })
       formData.value = res
     } finally {
@@ -134,19 +142,19 @@ const submitForm = async () => {
     await unref(descriptionRef)?.validate()
     await unref(otherSettingsRef)?.validate()
     // 深拷贝一份, 这样最终 server 端不满足，不需要恢复，
-    const deepCopyFormData = cloneDeep(unref(formData.value))
+    const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
     // 兜底处理 sku 空数据
     formData.value.skus!.forEach((sku) => {
       // 因为是空数据这里判断一下商品条码是否为空就行
       if (sku.barCode === '') {
-        const index = deepCopyFormData.skus.findIndex(
+        const index = deepCopyFormData.skus!.findIndex(
           (item) => JSON.stringify(item.properties) === JSON.stringify(sku.properties)
         )
         // 删除这条 sku
-        deepCopyFormData.skus.splice(index, 1)
+        deepCopyFormData.skus!.splice(index, 1)
       }
     })
-    deepCopyFormData.skus.forEach((item) => {
+    deepCopyFormData.skus!.forEach((item) => {
       // 给sku name赋值
       item.name = deepCopyFormData.name
       // sku相关价格元转分
@@ -158,7 +166,7 @@ const submitForm = async () => {
     })
     // 处理轮播图列表
     const newSliderPicUrls: any[] = []
-    deepCopyFormData.sliderPicUrls.forEach((item: any) => {
+    deepCopyFormData.sliderPicUrls!.forEach((item: any) => {
       // 如果是前端选的图
       typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
     })

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

@@ -7,7 +7,6 @@ import SkuList from './SkuList.vue'
 
 import { Spu } from '@/api/mall/product/spu'
 
-// TODO @puhui999：Properties 改成 Property 更合适？Property 在 Spu 中已存在避免冲突 PropertyAndValues
 interface PropertyAndValues {
   id: number
   name: string

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

@@ -80,7 +80,7 @@
     <el-table v-loading="loading" :data="list">
       <el-table-column type="expand" width="30">
         <template #default="{ row }">
-          <el-form class="demo-table-expand" label-position="left">
+          <el-form class="spu-table-expand" label-position="left">
             <el-row>
               <el-col :span="24">
                 <el-row>
@@ -91,12 +91,12 @@
                   </el-col>
                   <el-col :span="8">
                     <el-form-item label="市场价:">
-                      <span>{{ formatToFraction(row.marketPrice) }}</span>
+                      <span>{{ floatToFixed2(row.marketPrice) }}元</span>
                     </el-form-item>
                   </el-col>
                   <el-col :span="8">
                     <el-form-item label="成本价:">
-                      <span>{{ formatToFraction(row.costPrice) }}</span>
+                      <span>{{ floatToFixed2(row.costPrice) }}元</span>
                     </el-form-item>
                   </el-col>
                 </el-row>
@@ -130,9 +130,7 @@
       </el-table-column>
       <el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
       <el-table-column align="center" label="商品售价" min-width="90" prop="price">
-        <template #default="{ row }">
-          {{ formatToFraction(row.price) }}
-        </template>
+        <template #default="{ row }"> {{ floatToFixed2(row.price) }}元</template>
       </el-table-column>
       <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
       <el-table-column align="center" label="库存" min-width="90" prop="stock" />
@@ -229,7 +227,7 @@ import { createImageViewer } from '@/components/ImageViewer'
 import { dateFormatter } from '@/utils/formatTime'
 import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/utils/tree'
 import { ProductSpuStatusEnum } from '@/utils/constants'
-import { formatToFraction } from '@/utils'
+import { floatToFixed2 } from '@/utils'
 import download from '@/utils/download'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import * as ProductCategoryApi from '@/api/mall/product/category'
@@ -392,7 +390,7 @@ const resetQuery = () => {
 const openForm = (id?: number) => {
   // 修改
   if (typeof id === 'number') {
-    push('/product/spu/edit/' + id)
+    push({ name: 'ProductSpuEdit', params: { spuId: id } })
     return
   }
   // 新增
@@ -402,8 +400,8 @@ const openForm = (id?: number) => {
 /**
  * 查看商品详情
  */
-const openDetail = (id?: number) => {
-  push('/product/spu/detail/' + id)
+const openDetail = (id: number) => {
+  push({ name: 'ProductSpuDetail', params: { spuId: id } })
 }
 
 /** 导出按钮操作 */
@@ -458,7 +456,7 @@ onMounted(async () => {
 })
 </script>
 <style lang="scss" scoped>
-.demo-table-expand {
+.spu-table-expand {
   padding-left: 42px;
 
   :deep(.el-form-item__label) {