From 7db6c121bb6e788bf4b05a0772a510cdcb3d9ed1 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 23 Aug 2023 15:04:46 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E5=AE=8C=E5=96=84=20code=20review=20?=
 =?UTF-8?q?=E6=8F=90=E5=88=B0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/spu.ts                   |  11 +-
 src/api/mall/trade/order/index.ts             |  14 +--
 src/router/modules/remaining.ts               |   4 +-
 src/utils/dict.ts                             |   4 +-
 src/utils/index.ts                            |  26 ++++-
 src/views/mall/product/property/index.vue     |   3 +-
 src/views/mall/product/spu/addForm.vue        |  32 ++++--
 .../mall/product/spu/components/index.ts      |   1 -
 src/views/mall/product/spu/index.vue          |  20 ++--
 .../seckill/activity/SeckillActivityForm.vue  |  12 --
 ...eryOrderForm.vue => OrderDeliveryForm.vue} |  24 ++--
 ...essForm.vue => OrderUpdateAddressForm.vue} |  40 +++++--
 ...PriceForm.vue => OrderUpdatePriceForm.vue} |   6 +-
 ...arksForm.vue => OrderUpdateRemarkForm.vue} |  14 ++-
 .../OrderDetailForm.vue => detail/index.vue}  | 108 ++++++------------
 src/views/mall/trade/order/index.vue          |  54 +++++----
 16 files changed, 184 insertions(+), 189 deletions(-)
 rename src/views/mall/trade/order/components/{DeliveryOrderForm.vue => OrderDeliveryForm.vue} (77%)
 rename src/views/mall/trade/order/components/{OrderAdjustAddressForm.vue => OrderUpdateAddressForm.vue} (67%)
 rename src/views/mall/trade/order/components/{OrderAdjustPriceForm.vue => OrderUpdatePriceForm.vue} (93%)
 rename src/views/mall/trade/order/components/{OrderRemarksForm.vue => OrderUpdateRemarkForm.vue} (84%)
 rename src/views/mall/trade/order/{components/OrderDetailForm.vue => detail/index.vue} (79%)

diff --git a/src/api/mall/product/spu.ts b/src/api/mall/product/spu.ts
index 0ea324b8..2ad9bc60 100644
--- a/src/api/mall/product/spu.ts
+++ b/src/api/mall/product/spu.ts
@@ -9,18 +9,19 @@ export interface Property {
 
 export interface Sku {
   id?: number // 商品 SKU 编号
+  name?: string // 商品 SKU 名称
   spuId?: number // SPU 编号
   properties?: Property[] // 属性数组
-  price?: number // 商品价格
-  marketPrice?: number // 市场价
-  costPrice?: number // 成本价
+  price?: number | string // 商品价格
+  marketPrice?: number | string // 市场价
+  costPrice?: number | string // 成本价
   barCode?: string // 商品条码
   picUrl?: string // 图片地址
   stock?: number // 库存
   weight?: number // 商品重量，单位：kg 千克
   volume?: number // 商品体积，单位：m^3 平米
-  subCommissionFirstPrice?: number // 一级分销的佣金
-  subCommissionSecondPrice?: number // 二级分销的佣金
+  subCommissionFirstPrice?: number | string // 一级分销的佣金
+  subCommissionSecondPrice?: number | string // 二级分销的佣金
   salesCount?: number // 商品销量
 }
 
diff --git a/src/api/mall/trade/order/index.ts b/src/api/mall/trade/order/index.ts
index e99b1338..9413b73c 100644
--- a/src/api/mall/trade/order/index.ts
+++ b/src/api/mall/trade/order/index.ts
@@ -102,20 +102,20 @@ export interface DeliveryVO {
 
 // 订单发货
 export const delivery = async (data: DeliveryVO) => {
-  return await request.post({ url: `/trade/order/delivery`, data })
+  return await request.put({ url: `/trade/order/delivery`, data })
 }
 
 // 订单备注
-export const remark = async (data) => {
-  return await request.post({ url: `/trade/order/remark`, data })
+export const updateRemark = async (data: any) => {
+  return await request.put({ url: `/trade/order/update-remark`, data })
 }
 
 // 订单调价
-export const adjustPrice = async (data) => {
-  return await request.post({ url: `/trade/order/adjust-price`, data })
+export const updatePrice = async (data: any) => {
+  return await request.put({ url: `/trade/order/update-price`, data })
 }
 
 // 修改订单地址
-export const adjustAddress = async (data) => {
-  return await request.post({ url: `/trade/order/adjust-address`, data })
+export const updateAddress = async (data: any) => {
+  return await request.put({ url: `/trade/order/update-address`, data })
 }
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 2d8e2b44..6f31a882 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -347,7 +347,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     ]
   },
   {
-    path: '/property', // TODO @puhui999：这里的 path 有问题，应该是 /product/property
+    path: '/product/property',
     component: Layout,
     name: 'Property',
     meta: {
@@ -421,7 +421,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     children: [
       {
         path: 'detail/:orderId(\\d+)',
-        component: () => import('@/views/mall/trade/order/components/OrderDetailForm.vue'),
+        component: () => import('@/views/mall/trade/order/detail/index.vue'),
         name: 'TradeOrderDetailForm',
         meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' }
       }
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 9ec2e994..04d29c96 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -131,7 +131,7 @@ export enum DICT_TYPE {
   BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
 
   // ========== PAY 模块 ==========
-  PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
+  PAY_CHANNEL_CODE = 'pay_channel_code_type', // 支付渠道编码类型
   PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
   PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
   PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
@@ -156,7 +156,7 @@ export enum DICT_TYPE {
   TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
   TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
   TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
-  TRADE_DELIVERY_TYPE = 'trade_delivery_type', // 配送方式
+  TRADE_DELIVERY_TYPE = 'delivery_type', // 配送方式
 
   // ========== MALL - 营销模块 ==========
   PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3d596a36..c73b8d2f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -174,7 +174,6 @@ export const copyValueToTarget = (target, source) => {
   Object.assign(target, newObj)
 }
 
-// TODO @puhui999：返回要带上 .00 哈.例如说 1.00
 /**
  * 将一个整数转换为分数保留两位小数
  * @param num
@@ -185,6 +184,31 @@ export const formatToFraction = (num: number | string | undefined): number => {
   return parseFloat((parsedNumber / 100).toFixed(2))
 }
 
+/**
+ * 将一个数转换为 1.00 这样
+ * 数据呈现的时候使用
+ *
+ * @param num 整数
+ */
+export const floatToFixed2 = (num: number | string | undefined): string => {
+  let str = '0.00'
+  if (typeof num === 'undefined') {
+    return str
+  }
+  const f = formatToFraction(num)
+  const decimalPart = f.toString().split('.')[1]
+  const len = decimalPart ? decimalPart.length : 0
+  switch (len) {
+    case 0:
+      str = f.toString() + '.00'
+      break
+    case 1:
+      str = f.toString() + '0'
+      break
+  }
+  return str
+}
+
 /**
  * 将一个分数转换为整数
  * @param num
diff --git a/src/views/mall/product/property/index.vue b/src/views/mall/product/property/index.vue
index dc79450b..042bc980 100644
--- a/src/views/mall/product/property/index.vue
+++ b/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 })
 }
 
 /** 初始化 **/
diff --git a/src/views/mall/product/spu/addForm.vue b/src/views/mall/product/spu/addForm.vue
index b577ece9..b1c50929 100644
--- a/src/views/mall/product/spu/addForm.vue
+++ b/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'
 
 defineOptions({ name: 'ProductSpuForm' })
 
@@ -107,12 +107,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 {
@@ -132,19 +140,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相关价格元转分
@@ -156,7 +164,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)
     })
diff --git a/src/views/mall/product/spu/components/index.ts b/src/views/mall/product/spu/components/index.ts
index 1160dbd1..405dfde5 100644
--- a/src/views/mall/product/spu/components/index.ts
+++ b/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
diff --git a/src/views/mall/product/spu/index.vue b/src/views/mall/product/spu/index.vue
index 75bd02e0..9ea06cd5 100644
--- a/src/views/mall/product/spu/index.vue
+++ b/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) {
diff --git a/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue b/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
index c4950f6e..486b71dd 100644
--- a/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
+++ b/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
@@ -193,16 +193,4 @@ const resetForm = async () => {
   await nextTick()
   formRef.value.getElFormRef().resetFields()
 }
-// TODO @puhui999：下面的 css 名字，是不是可以改下；demo-table-expand
 </script>
-<style lang="scss" scoped>
-.demo-table-expand {
-  padding-left: 42px;
-
-  :deep(.el-form-item__label) {
-    width: 82px;
-    font-weight: bold;
-    color: #99a9bf;
-  }
-}
-</style>
diff --git a/src/views/mall/trade/order/components/DeliveryOrderForm.vue b/src/views/mall/trade/order/components/OrderDeliveryForm.vue
similarity index 77%
rename from src/views/mall/trade/order/components/DeliveryOrderForm.vue
rename to src/views/mall/trade/order/components/OrderDeliveryForm.vue
index b061341f..14f9411d 100644
--- a/src/views/mall/trade/order/components/DeliveryOrderForm.vue
+++ b/src/views/mall/trade/order/components/OrderDeliveryForm.vue
@@ -2,12 +2,12 @@
   <Dialog v-model="dialogVisible" title="订单发货" width="25%">
     <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
       <el-form-item label="发货方式">
-        <el-radio-group v-model="radio">
-          <el-radio border label="1">快递物流</el-radio>
-          <el-radio border label="2">无需发货</el-radio>
+        <el-radio-group v-model="expressType">
+          <el-radio border label="express">快递物流</el-radio>
+          <el-radio border label="none">无需发货</el-radio>
         </el-radio-group>
       </el-form-item>
-      <template v-if="radio === '1'">
+      <template v-if="expressType === 'express'">
         <el-form-item label="物流公司">
           <el-select v-model="formData.logisticsId" placeholder="请选择" style="width: 100%">
             <el-option
@@ -32,16 +32,16 @@
 <script lang="ts" setup>
 import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
 import * as TradeOrderApi from '@/api/mall/trade/order'
+import { copyValueToTarget } from '@/utils'
 
-// TODO @puhui999：是不是名字叫 OrderDeliveryForm 保持统一
-defineOptions({ name: 'DeliveryOrderForm' })
+defineOptions({ name: 'OrderDeliveryForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const radio = ref('1') // TODO @puhui999：尽量不用 radio 这种命名，无业务含义。这里的话，可以考虑用 expressType，如果值是 express，则是快递；none 则是无；未来做同城配送，就比较容易拓展啦；
+const expressType = ref('express') // 如果值是 express，则是快递；none 则是无；未来做同城配送；
 const formData = ref<TradeOrderApi.DeliveryVO>({
   id: 0, // 订单编号
   logisticsId: null, // 物流公司编号
@@ -49,12 +49,14 @@ const formData = ref<TradeOrderApi.DeliveryVO>({
 })
 const formRef = ref() // 表单 Ref
 
-// TODO @puhui999：每次点击发货的时候，是不是可以把之前的信息带过来哈。
 /** 打开弹窗 */
-const open = async (orderId: number) => {
+const open = async (row: TradeOrderApi.OrderVO) => {
   resetForm()
   // 设置数据
-  formData.value.id = orderId
+  copyValueToTarget(formData.value, row)
+  if (row.logisticsId === null || row.logisticsId === 0) {
+    expressType.value = 'none'
+  }
   dialogVisible.value = true
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -66,7 +68,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = unref(formData)
-    if (radio.value === '2') {
+    if (expressType.value === 'none') {
       // 无需发货的情况
       data.logisticsId = 0
       data.logisticsNo = ''
diff --git a/src/views/mall/trade/order/components/OrderAdjustAddressForm.vue b/src/views/mall/trade/order/components/OrderUpdateAddressForm.vue
similarity index 67%
rename from src/views/mall/trade/order/components/OrderAdjustAddressForm.vue
rename to src/views/mall/trade/order/components/OrderUpdateAddressForm.vue
index 9e014bb0..0ec6c631 100644
--- a/src/views/mall/trade/order/components/OrderAdjustAddressForm.vue
+++ b/src/views/mall/trade/order/components/OrderUpdateAddressForm.vue
@@ -1,18 +1,27 @@
 <template>
   <Dialog v-model="dialogVisible" title="修改订单收货地址" width="35%">
     <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="120px">
-      <el-form-item label="收件人名称">
-        <el-input v-model="formData.receiverName" />
+      <el-form-item label="收件人">
+        <el-input v-model="formData.receiverName" placeholder="请输入收件人名称" />
       </el-form-item>
-      <el-form-item label="收件人手机">
-        <el-input v-model="formData.receiverMobile" />
+      <el-form-item label="手机号">
+        <el-input v-model="formData.receiverMobile" placeholder="请输入收件人手机号" />
       </el-form-item>
-      <!-- TODO @puhui999：应该是个地区下拉框，可以看下 UserForm 所在地 -->
-      <el-form-item label="收件人地区编号">
-        <el-input v-model="formData.receiverAreaId" />
+      <el-form-item label="所在地">
+        <el-tree-select
+          v-model="formData.receiverAreaId"
+          :data="areaList"
+          :props="defaultProps"
+          :render-after-expand="true"
+        />
       </el-form-item>
-      <el-form-item label="收件人详细地址">
-        <el-input v-model="formData.receiverDetailAddress" />
+      <el-form-item label="详细地址">
+        <el-input
+          v-model="formData.receiverDetailAddress"
+          :rows="3"
+          placeholder="请输入收件人详细地址"
+          type="textarea"
+        />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -23,10 +32,11 @@
 </template>
 <script lang="ts" setup>
 import * as TradeOrderApi from '@/api/mall/trade/order'
+import { getAreaTree } from '@/api/system/area'
 import { copyValueToTarget } from '@/utils'
+import { defaultProps } from '@/utils/tree'
 
-// TODO @puhui999：OrderAdjustAddressForm 改成 OrderUpdateAddressForm 更新哈，保持统一；
-defineOptions({ name: 'OrderAdjustAddressForm' })
+defineOptions({ name: 'OrderUpdateAddressForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -40,6 +50,7 @@ const formData = ref({
   receiverAreaId: null, //收件人地区编号
   receiverDetailAddress: '' //收件人详细地址
 })
+const areaList = ref([]) // 地区列表
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
@@ -58,7 +69,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = unref(formData)
-    await TradeOrderApi.adjustAddress(data)
+    await TradeOrderApi.updateAddress(data)
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
     // 发送操作成功的事件
@@ -79,4 +90,9 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+onMounted(async () => {
+  // 获得地区列表
+  areaList.value = await getAreaTree()
+})
 </script>
diff --git a/src/views/mall/trade/order/components/OrderAdjustPriceForm.vue b/src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
similarity index 93%
rename from src/views/mall/trade/order/components/OrderAdjustPriceForm.vue
rename to src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
index ba7ac084..9b476e15 100644
--- a/src/views/mall/trade/order/components/OrderAdjustPriceForm.vue
+++ b/src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
@@ -23,8 +23,7 @@ import * as TradeOrderApi from '@/api/mall/trade/order'
 import { convertToInteger, formatToFraction } from '@/utils'
 import { cloneDeep } from 'lodash-es'
 
-// TODO @puhui999：OrderAdjustPriceForm 改成 OrderUpdatePriceForm 更新哈，保持统一；
-defineOptions({ name: 'OrderAdjustPriceForm' })
+defineOptions({ name: 'OrderUpdatePriceForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -53,6 +52,7 @@ const open = async (row: TradeOrderApi.OrderVO) => {
   // 设置数据
   formData.value.adjustPrice = formatToFraction(row.adjustPrice)
   formData.value.payPrice = formatToFraction(row.payPrice) + '元'
+  formData.value.newPayPrice = formData.value.payPrice
   dialogVisible.value = true
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -67,7 +67,7 @@ const submitForm = async () => {
     data.adjustPrice = convertToInteger(data.adjustPrice)
     delete data.payPrice
     delete data.newPayPrice
-    await TradeOrderApi.adjustPrice(data)
+    await TradeOrderApi.updatePrice(data)
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
     // 发送操作成功的事件
diff --git a/src/views/mall/trade/order/components/OrderRemarksForm.vue b/src/views/mall/trade/order/components/OrderUpdateRemarkForm.vue
similarity index 84%
rename from src/views/mall/trade/order/components/OrderRemarksForm.vue
rename to src/views/mall/trade/order/components/OrderUpdateRemarkForm.vue
index e596e5c8..cbb7dbe9 100644
--- a/src/views/mall/trade/order/components/OrderRemarksForm.vue
+++ b/src/views/mall/trade/order/components/OrderUpdateRemarkForm.vue
@@ -1,8 +1,13 @@
 <template>
-  <Dialog v-model="dialogVisible" title="商家备注" width="25%">
+  <Dialog v-model="dialogVisible" title="商家备注" width="45%">
     <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
       <el-form-item label="备注">
-        <el-input v-model="formData.remark" />
+        <el-input
+          v-model="formData.remark"
+          :rows="3"
+          placeholder="请输入订单备注"
+          type="textarea"
+        />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -14,8 +19,7 @@
 <script lang="ts" setup>
 import * as TradeOrderApi from '@/api/mall/trade/order'
 
-// TODO @puhui999：OrderRemarksForm 改成 OrderUpdateRemarkForm 更新哈，保持统一；
-defineOptions({ name: 'OrderRemarksForm' })
+defineOptions({ name: 'OrderUpdateRemarkForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -46,7 +50,7 @@ const submitForm = async () => {
   try {
     const data = unref(formData)
     console.log(data)
-    await TradeOrderApi.remark(data)
+    await TradeOrderApi.updateRemark(data)
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
     // 发送操作成功的事件
diff --git a/src/views/mall/trade/order/components/OrderDetailForm.vue b/src/views/mall/trade/order/detail/index.vue
similarity index 79%
rename from src/views/mall/trade/order/components/OrderDetailForm.vue
rename to src/views/mall/trade/order/detail/index.vue
index 27aee395..e8681b7a 100644
--- a/src/views/mall/trade/order/components/OrderDetailForm.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -41,10 +41,10 @@
         <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="orderInfo.status" />
       </el-descriptions-item>
       <el-descriptions-item label-class-name="no-colon">
-        <el-button type="primary" @click="openForm('adjustPrice')">调整价格</el-button>
+        <el-button type="primary" @click="openForm('updatePrice')">调整价格</el-button>
         <el-button type="primary" @click="openForm('remark')">备注</el-button>
         <el-button type="primary" @click="openForm('delivery')">发货</el-button>
-        <el-button type="primary" @click="openForm('adjustAddress')">修改地址</el-button>
+        <el-button type="primary" @click="openForm('updateAddress')">修改地址</el-button>
       </el-descriptions-item>
       <el-descriptions-item>
         <template #label><span style="color: red">提醒: </span></template>
@@ -68,12 +68,12 @@
                   </el-tag>
                 </template>
               </el-table-column>
-              <el-table-column label="商品原价(元)" prop="price" width="150">
-                <template #default="{ row }">{{ formatToFraction(row.price) }}</template>
+              <el-table-column label="商品原价" prop="price" width="150">
+                <template #default="{ row }">{{ floatToFixed2(row.price) }}元</template>
               </el-table-column>
               <el-table-column label="数量" prop="count" width="100" />
-              <el-table-column label="合计(元)" prop="payPrice" width="150">
-                <template #default="{ row }">{{ formatToFraction(row.payPrice) }}</template>
+              <el-table-column label="合计" prop="payPrice" width="150">
+                <template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
               </el-table-column>
               <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
                 <template #default="{ row }">
@@ -91,32 +91,32 @@
     </el-descriptions>
     <el-descriptions :column="6">
       <el-descriptions-item label="商品总额: ">
-        {{ formatToFraction(orderInfo.totalPrice) }}元
+        {{ floatToFixed2(orderInfo.totalPrice) }}元
       </el-descriptions-item>
       <el-descriptions-item label="运费金额: ">
-        {{ formatToFraction(orderInfo.deliveryPrice) }}元
+        {{ floatToFixed2(orderInfo.deliveryPrice) }}元
       </el-descriptions-item>
       <el-descriptions-item label="订单调价: ">
-        {{ formatToFraction(orderInfo.adjustPrice) }}元
+        {{ floatToFixed2(orderInfo.updatePrice) }}元
       </el-descriptions-item>
 
       <el-descriptions-item>
         <template #label><span style="color: red">商品优惠: </span></template>
-        {{ formatToFraction(orderInfo.couponPrice) }}元
+        {{ floatToFixed2(orderInfo.couponPrice) }}元
       </el-descriptions-item>
       <el-descriptions-item>
         <template #label><span style="color: red">订单优惠: </span></template>
-        {{ formatToFraction(orderInfo.discountPrice) }}元
+        {{ floatToFixed2(orderInfo.discountPrice) }}元
       </el-descriptions-item>
       <el-descriptions-item>
         <template #label><span style="color: red">积分抵扣: </span></template>
-        {{ formatToFraction(orderInfo.pointPrice) }}元
+        {{ floatToFixed2(orderInfo.pointPrice) }}元
       </el-descriptions-item>
 
       <el-descriptions-item v-for="item in 5" :key="item" label-class-name="no-colon" />
       <!-- 占位 -->
       <el-descriptions-item label="应付金额: ">
-        {{ formatToFraction(orderInfo.payPrice) }}元
+        {{ floatToFixed2(orderInfo.payPrice) }}元
       </el-descriptions-item>
     </el-descriptions>
 
@@ -199,69 +199,25 @@
   </ContentWrap>
 
   <!-- 各种操作的弹窗 -->
-  <DeliveryOrderForm ref="deliveryFormRef" @success="getDetail" />
-  <OrderRemarksForm ref="remarksFormRef" @success="getDetail" />
-  <OrderAdjustAddressForm ref="adjustAddressFormRef" @success="getDetail" />
-  <OrderAdjustPriceForm ref="adjustPriceFormRef" @success="getDetail" />
+  <OrderDeliveryForm ref="deliveryFormRef" @success="getDetail" />
+  <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getDetail" />
+  <OrderUpdateAddressForm ref="updateAddressFormRef" @success="getDetail" />
+  <OrderUpdatePriceForm ref="updatePriceFormRef" @success="getDetail" />
 </template>
 <script lang="ts" setup>
 import * as TradeOrderApi from '@/api/mall/trade/order'
-import { formatToFraction } from '@/utils'
+import { floatToFixed2 } from '@/utils'
 import { DICT_TYPE } from '@/utils/dict'
-import OrderRemarksForm from '@/views/mall/trade/order/components/OrderRemarksForm.vue'
-import DeliveryOrderForm from '@/views/mall/trade/order/components/DeliveryOrderForm.vue'
-import OrderAdjustAddressForm from '@/views/mall/trade/order/components/OrderAdjustAddressForm.vue'
-import OrderAdjustPriceForm from '@/views/mall/trade/order/components/OrderAdjustPriceForm.vue'
+import OrderUpdateRemarkForm from '@/views/mall/trade/order/components/OrderUpdateRemarkForm.vue'
+import OrderDeliveryForm from '@/views/mall/trade/order/components/OrderDeliveryForm.vue'
+import OrderUpdateAddressForm from '@/views/mall/trade/order/components/OrderUpdateAddressForm.vue'
+import OrderUpdatePriceForm from '@/views/mall/trade/order/components/OrderUpdatePriceForm.vue'
 
-// TODO @puhui999：TradeOrderDetailForm 可以挪到 order/detail/index.vue 中，它是一个 vue 界面哈。
 defineOptions({ name: 'TradeOrderDetailForm' })
 
 const message = useMessage() // 消息弹窗
 const { params } = useRoute() // 查询参数
-// TODO @puhui999：orderInfo 应该不用把属性弄出来也；
-const orderInfo = ref<TradeOrderApi.OrderVO>({
-  no: '',
-  createTime: null,
-  type: null,
-  terminal: null,
-  userId: null,
-  userIp: '',
-  userRemark: '',
-  status: null,
-  productCount: null,
-  finishTime: null,
-  cancelTime: null,
-  cancelType: null,
-  remark: '',
-  payOrderId: null,
-  payed: false,
-  payTime: null,
-  payChannelCode: '',
-  originalPrice: null,
-  orderPrice: null,
-  discountPrice: null,
-  deliveryPrice: null,
-  adjustPrice: null,
-  payPrice: null,
-  deliveryTemplateId: null,
-  logisticsId: null,
-  logisticsNo: '',
-  deliveryStatus: null,
-  deliveryTime: null,
-  receiveTime: null,
-  receiverName: '',
-  receiverMobile: '',
-  receiverAreaId: null,
-  receiverPostCode: null,
-  receiverDetailAddress: '',
-  afterSaleStatus: null,
-  refundPrice: null,
-  couponPrice: null,
-  pointPrice: null,
-  receiverAreaName: '',
-  items: [],
-  user: {}
-})
+const orderInfo = ref<TradeOrderApi.OrderVO>({})
 
 // TODO @puhui999：这个改成直接读属性，不用按照这种写法；
 const detailGroups = ref([
@@ -330,22 +286,22 @@ const detailInfo = ref({
 })
 
 const deliveryFormRef = ref() // 发货表单 Ref
-const remarksFormRef = ref() // 订单备注表单 Ref
-const adjustAddressFormRef = ref() // 收货地址表单 Ref
-const adjustPriceFormRef = ref() // 订单调价表单 Ref
+const updateRemarkForm = ref() // 订单备注表单 Ref
+const updateAddressFormRef = ref() // 收货地址表单 Ref
+const updatePriceFormRef = ref() // 订单调价表单 Ref
 const openForm = (type: string) => {
   switch (type) {
     case 'remark':
-      remarksFormRef.value?.open(orderInfo.value)
+      updateRemarkForm.value?.open(orderInfo.value)
       break
     case 'delivery':
-      deliveryFormRef.value?.open(orderInfo.value.id)
+      deliveryFormRef.value?.open(orderInfo.value)
       break
-    case 'adjustAddress':
-      adjustAddressFormRef.value?.open(orderInfo.value)
+    case 'updateAddress':
+      updateAddressFormRef.value?.open(orderInfo.value)
       break
-    case 'adjustPrice':
-      adjustPriceFormRef.value?.open(orderInfo.value)
+    case 'updatePrice':
+      updatePriceFormRef.value?.open(orderInfo.value)
       break
   }
 }
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index fe56a3ba..a1909ab8 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -100,7 +100,7 @@
           placeholder="请输入"
         >
           <template #prepend>
-            <el-select v-model="queryType.k" clearable placeholder="全部" class="!w-110px">
+            <el-select v-model="queryType.k" class="!w-110px" clearable placeholder="全部">
               <el-option
                 v-for="dict in searchList"
                 :key="dict.value"
@@ -164,11 +164,11 @@
             <el-table-column label="商品原价*数量" prop="price" width="150">
               <template #default="{ row }">
                 <!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
-                {{ formatToFraction(row.price) }} 元 * {{ row.count }}
+                {{ floatToFixed2(row.price) }} 元 * {{ row.count }}
               </template>
             </el-table-column>
             <el-table-column label="合计" prop="payPrice" width="150">
-              <template #default="{ row }">{{ formatToFraction(row.payPrice) }}元</template>
+              <template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
             </el-table-column>
             <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
               <template #default="{ row }">
@@ -181,7 +181,7 @@
             <el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
               <template #default>
                 <!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
-                {{ formatToFraction(scope.row.payPrice) + '元' }}
+                {{ floatToFixed2(scope.row.payPrice) + '元' }}
               </template>
             </el-table-column>
             <el-table-column label="买家/收货人" min-width="160">
@@ -307,22 +307,19 @@
   </ContentWrap>
 
   <!-- 各种操作的弹窗 -->
-  <DeliveryOrderForm ref="deliveryOrderFormRef" @success="getList" />
-  <OrderRemarksForm ref="orderRemarksFormRef" @success="getList" />
+  <OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
+  <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
 </template>
 
 <script lang="ts" name="Order" setup>
 import type { FormInstance, TableColumnCtx } from 'element-plus'
-import DeliveryOrderForm from './components/DeliveryOrderForm.vue'
-import OrderRemarksForm from './components/OrderRemarksForm.vue'
+import OrderDeliveryForm from './components/OrderDeliveryForm.vue'
+import OrderUpdateRemarkForm from './components/OrderUpdateRemarkForm.vue'
 import { dateFormatter } from '@/utils/formatTime'
 import * as TradeOrderApi from '@/api/mall/trade/order'
-// @puhui999：通过 TradeOrderApi 去引用对应的 VO 就可以啦
-import { OrderItemRespVO, OrderVO } from '@/api/mall/trade/order'
-// @puhui999：使用 XXXApi 哈
-import { getListAllSimple } from '@/api/mall/trade/delivery/pickUpStore'
-import { DICT_TYPE, getStrDictOptions, getIntDictOptions } from '@/utils/dict'
-import { formatToFraction } from '@/utils'
+import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { floatToFixed2 } from '@/utils'
 import { createImageViewer } from '@/components/ImageViewer'
 import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
 
@@ -330,7 +327,7 @@ const { currentRoute, push } = useRouter() // 路由跳转
 
 const loading = ref(true) // 列表的加载中
 const total = ref(2) // 列表的总页数
-const list = ref<OrderVO[]>([]) // 列表的数据
+const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
 const queryFormRef = ref<FormInstance>() // 搜索的表单
 // 表单搜索
 const queryParams = reactive({
@@ -368,11 +365,12 @@ const searchList = ref([
 ])
 
 interface SpanMethodProps {
-  row: OrderItemRespVO
-  column: TableColumnCtx<OrderItemRespVO>
+  row: TradeOrderApi.OrderItemRespVO
+  column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
   rowIndex: number
   columnIndex: number
 }
+
 const spanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
   const colIndex = [4, 5, 6, 7]
   // 处理列
@@ -384,6 +382,7 @@ const spanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
         colspan: 0
       }
     }
+    // TODO puhui：合并的行数需要动态计算
     return {
       rowspan: 2,
       colspan: 1
@@ -422,27 +421,26 @@ const imagePreview = (imgUrl: string) => {
   })
 }
 
-/** 查看商品详情 */
+/** 查看订单详情 */
 const openForm = (id: number) => {
-  // TODO @puhui999：这里最好用 name 来跳转，因为 url 可能会改
-  push('/trade/order/detail/' + id)
+  push({ name: 'TradeOrderDetailForm', params: { orderId: id } })
 }
 
 /** 操作分发 */
-const deliveryOrderFormRef = ref()
-const orderRemarksFormRef = ref()
-const handleCommand = (command: string, row: OrderVO) => {
+const deliveryFormRef = ref()
+const updateRemarkForm = ref()
+const handleCommand = (command: string, row: TradeOrderApi.OrderVO) => {
   switch (command) {
-    case 'orderRemarks': // TODO @puhui999：orderRemarks 是不是改成 remark 会好点，保持统一
-      orderRemarksFormRef.value?.open(row)
+    case 'remark':
+      updateRemarkForm.value?.open(row)
       break
     case 'delivery':
-      deliveryOrderFormRef.value?.open(row.id)
+      deliveryFormRef.value?.open(row)
       break
   }
 }
 
-// 监听路由变化更新列表，解决商品保存后，列表不刷新的问题。
+// 监听路由变化更新列表，解决订单保存/更新后，列表不刷新的问题。
 watch(
   () => currentRoute.value,
   () => {
@@ -455,7 +453,7 @@ const deliveryExpressList = ref([]) // 物流公司
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  pickUpStoreList.value = await getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>

From 58502b12410844a054b638f39149f211c5d88e49 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 24 Aug 2023 14:34:35 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=EF=BC=9A=E4=BC=98=E5=8C=96=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../order/components/OrderUpdatePriceForm.vue |  12 +-
 src/views/mall/trade/order/detail/index.vue   |   4 +-
 src/views/mall/trade/order/index.vue          | 156 ++++++++++--------
 3 files changed, 92 insertions(+), 80 deletions(-)

diff --git a/src/views/mall/trade/order/components/OrderUpdatePriceForm.vue b/src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
index 9b476e15..cad0f9ae 100644
--- a/src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
+++ b/src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
@@ -20,7 +20,7 @@
 </template>
 <script lang="ts" setup>
 import * as TradeOrderApi from '@/api/mall/trade/order'
-import { convertToInteger, formatToFraction } from '@/utils'
+import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
 import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'OrderUpdatePriceForm' })
@@ -39,7 +39,9 @@ const formData = ref({
 watch(
   () => formData.value.adjustPrice,
   (data: number) => {
-    formData.value.newPayPrice = formData.value.payPrice.replace('元', '') * 1 + data + '元'
+    const num = formData.value.payPrice!.replace('元', '')
+    // @ts-ignore
+    formData.value.newPayPrice = (num * 1 + data).toFixed(2) + '元'
   }
 )
 
@@ -48,10 +50,10 @@ const formRef = ref() // 表单 Ref
 /** 打开弹窗 */
 const open = async (row: TradeOrderApi.OrderVO) => {
   resetForm()
-  formData.value.id = row.id
+  formData.value.id = row.id!
   // 设置数据
-  formData.value.adjustPrice = formatToFraction(row.adjustPrice)
-  formData.value.payPrice = formatToFraction(row.payPrice) + '元'
+  formData.value.adjustPrice = formatToFraction(row.adjustPrice!)
+  formData.value.payPrice = floatToFixed2(row.payPrice!) + '元'
   formData.value.newPayPrice = formData.value.payPrice
   dialogVisible.value = true
 }
diff --git a/src/views/mall/trade/order/detail/index.vue b/src/views/mall/trade/order/detail/index.vue
index e8681b7a..f43bccd2 100644
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -219,7 +219,7 @@ const message = useMessage() // 消息弹窗
 const { params } = useRoute() // 查询参数
 const orderInfo = ref<TradeOrderApi.OrderVO>({})
 
-// TODO @puhui999：这个改成直接读属性，不用按照这种写法；
+// TODO @puhui999：这个改成直接读属性，不用按照这种写法；后续再改
 const detailGroups = ref([
   {
     title: '物流信息',
@@ -238,7 +238,7 @@ const detailGroups = ref([
   }
 ])
 
-// TODO @puhui999：从后台读数据哈。
+// TODO @puhui999：从后台读数据哈。后续再改
 const detailInfo = ref({
   // 物流信息
   expressInfo: {
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index a1909ab8..cf6fc584 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -90,7 +90,7 @@
           />
         </el-select>
       </el-form-item>
-      <!-- TODO 考虑是否移除或重构；这个还是需要的哈-->
+      <!-- TODO 聚合搜索等售后结束后实现-->
       <el-form-item label="聚合搜索">
         <el-input
           v-show="true"
@@ -132,17 +132,53 @@
   3、然后点击展开和收拢订单项，可以不做哈。
    -->
   <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :show-overflow-tooltip="true"
-      :stripe="true"
-      default-expand-all
-    >
-      <el-table-column fixed="left" type="expand">
+    <el-table v-loading="loading" :data="list">
+      <el-table-column class-name="order-table-col">
+        <template #header>
+          <div class="flex items-center" style="width: 100%">
+            <div class="ml-100px mr-200px">商品信息</div>
+            <div class="mr-60px">单价(元)/数量</div>
+            <div class="mr-60px">售后状态</div>
+            <div class="mr-60px">实付金额(元)</div>
+            <div class="mr-60px">买家/收货人</div>
+            <div class="mr-60px">配送方式</div>
+            <div class="mr-60px">订单状态</div>
+            <div class="mr-60px">操作</div>
+          </div>
+        </template>
         <template #default="scope">
-          <el-table :data="scope.row.items" :span-method="spanMethod" border style="width: 100%">
-            <el-table-column label="商品信息" min-width="300" prop="spuName">
+          <el-table
+            :data="scope.row.items"
+            :header-cell-style="headerStyle"
+            :span-method="spanMethod"
+            border
+            style="width: 100%"
+          >
+            <el-table-column min-width="300" prop="spuName">
+              <template #header>
+                <div
+                  class="flex items-center"
+                  style="height: 35px; background-color: #f7f7f7; width: 100%"
+                >
+                  <span class="mr-20px">订单号：{{ scope.row.no }} </span>
+                  <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
+                  <span>订单来源：</span>
+                  <dict-tag
+                    :type="DICT_TYPE.TERMINAL"
+                    :value="scope.row.terminal"
+                    class="mr-20px"
+                  />
+                  <span>支付方式：</span>
+                  <dict-tag
+                    :type="DICT_TYPE.PAY_CHANNEL_CODE"
+                    :value="scope.row.payChannelCode"
+                    class="mr-20px"
+                  />
+                  <span class="mr-20px">支付时间：{{ formatDate(scope.row.payTime) }}</span>
+                  <span>订单类型：</span>
+                  <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
+                </div>
+              </template>
               <template #default="{ row }">
                 <div class="flex items-center">
                   <el-image
@@ -163,13 +199,9 @@
             </el-table-column>
             <el-table-column label="商品原价*数量" prop="price" width="150">
               <template #default="{ row }">
-                <!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
-                {{ floatToFixed2(row.price) }} 元 * {{ row.count }}
+                {{ floatToFixed2(row.price) }} 元 / {{ row.count }}
               </template>
             </el-table-column>
-            <el-table-column label="合计" prop="payPrice" width="150">
-              <template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
-            </el-table-column>
             <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
               <template #default="{ row }">
                 <dict-tag
@@ -180,7 +212,6 @@
             </el-table-column>
             <el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
               <template #default>
-                <!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
                 {{ floatToFixed2(scope.row.payPrice) + '元' }}
               </template>
             </el-table-column>
@@ -233,8 +264,11 @@
                     </el-button>
                     <template #dropdown>
                       <el-dropdown-menu>
-                        <!-- TODO puhui999：可以判断下状态 + 物流类型，展示【发货】按钮 -->
-                        <el-dropdown-item command="delivery">
+                        <!--判断下 物流类型 + 状态，快递 + 待发货时展示【发货】按钮 -->
+                        <el-dropdown-item
+                          v-if="scope.row.deliveryType === 1 && scope.row.status === 10"
+                          command="delivery"
+                        >
                           <Icon icon="ep:takeaway-box" />
                           发货
                         </el-dropdown-item>
@@ -251,51 +285,6 @@
           </el-table>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="订单号" min-width="110" prop="no" />
-      <el-table-column align="center" label="订单类型" min-width="100">
-        <template #default="{ row }">
-          <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="row.type" />
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="订单来源" min-width="145">
-        <template #default="{ row }">
-          <dict-tag v-if="row.terminal" :type="DICT_TYPE.TERMINAL" :value="row.terminal" />
-          <span v-else>{{ row.terminal }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :formatter="dateFormatter"
-        align="center"
-        label="支付时间"
-        min-width="180"
-        prop="payTime"
-      />
-      <el-table-column align="center" label="支付类型" min-width="120" prop="payChannelCode">
-        <template #default="{ row }">
-          <dict-tag
-            v-if="row.payChannelCode"
-            :type="DICT_TYPE.PAY_CHANNEL_CODE"
-            :value="row.payChannelCode"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="订单状态" min-width="100" prop="status">
-        <template #default="{ row }">
-          <dict-tag
-            v-if="row.status !== ''"
-            :type="DICT_TYPE.TRADE_ORDER_STATUS"
-            :value="row.status"
-          />
-          <span v-else>{{ row.status }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :formatter="dateFormatter"
-        align="center"
-        label="创建时间"
-        min-width="180"
-        prop="createTime"
-      />
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -315,10 +304,10 @@
 import type { FormInstance, TableColumnCtx } from 'element-plus'
 import OrderDeliveryForm from './components/OrderDeliveryForm.vue'
 import OrderUpdateRemarkForm from './components/OrderUpdateRemarkForm.vue'
-import { dateFormatter } from '@/utils/formatTime'
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
 import { floatToFixed2 } from '@/utils'
 import { createImageViewer } from '@/components/ImageViewer'
 import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
@@ -364,6 +353,19 @@ const searchList = ref([
   { value: 'userMobile', label: '用户电话' }
 ])
 
+const headerStyle = ({ row, columnIndex }: any) => {
+  // 表头第一行第一列占 8
+  if (columnIndex === 0) {
+    row[columnIndex].colSpan = 8
+  } else {
+    // 其余的不要
+    row[columnIndex].colSpan = 0
+    return {
+      display: 'none'
+    }
+  }
+}
+
 interface SpanMethodProps {
   row: TradeOrderApi.OrderItemRespVO
   column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
@@ -371,20 +373,23 @@ interface SpanMethodProps {
   columnIndex: number
 }
 
-const spanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
-  const colIndex = [4, 5, 6, 7]
-  // 处理列
+const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps) => {
+  const len = list.value.find(
+    (order) => order.items?.findIndex((item) => item.id === row.id) !== -1
+  )?.items?.length
+  // 要合并的列，从零开始
+  const colIndex = [3, 4, 5, 6]
   if (colIndex.includes(columnIndex)) {
-    // 处理被合并的行
+    // 除了第一行其余的不要
     if (rowIndex !== 0) {
       return {
         rowspan: 0,
         colspan: 0
       }
     }
-    // TODO puhui：合并的行数需要动态计算
+    // 动态合并行
     return {
-      rowspan: 2,
+      rowspan: len,
       colspan: 1
     }
   }
@@ -403,9 +408,9 @@ const getList = async () => {
 }
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
+const handleQuery = async () => {
   queryParams.pageNo = 1
-  getList()
+  await getList()
 }
 
 /** 重置按钮操作 */
@@ -457,3 +462,8 @@ onMounted(async () => {
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
+<style lang="scss" scoped>
+:deep(.order-table-col > .cell) {
+  padding: 0px;
+}
+</style>

From 814b4631c944a4657128210378bda40294628b3f Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Fri, 25 Aug 2023 21:02:48 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E5=95=86=E5=93=81=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E5=90=8E=E5=8F=B0=E5=95=86=E5=93=81=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/comment.ts               |  49 +++
 .../mall/product/comment/CommentForm.vue      | 198 ++++++++++++
 .../comment/components/SkuTableSelect.vue     |  94 ++++++
 .../comment/components/SpuTableSelect.vue     | 167 ++++++++++
 src/views/mall/product/comment/index.vue      | 297 ++++++++++++++++++
 5 files changed, 805 insertions(+)
 create mode 100644 src/api/mall/product/comment.ts
 create mode 100644 src/views/mall/product/comment/CommentForm.vue
 create mode 100644 src/views/mall/product/comment/components/SkuTableSelect.vue
 create mode 100644 src/views/mall/product/comment/components/SpuTableSelect.vue
 create mode 100644 src/views/mall/product/comment/index.vue

diff --git a/src/api/mall/product/comment.ts b/src/api/mall/product/comment.ts
new file mode 100644
index 00000000..defdbb93
--- /dev/null
+++ b/src/api/mall/product/comment.ts
@@ -0,0 +1,49 @@
+import request from '@/config/axios'
+
+export interface CommentVO {
+  id: number
+  userId: number
+  userNickname: string
+  userAvatar: string
+  anonymous: boolean
+  orderId: number
+  orderItemId: number
+  spuId: number
+  spuName: string
+  skuId: number
+  visible: boolean
+  scores: number
+  descriptionScores: number
+  benefitScores: number
+  content: string
+  picUrls: string
+  replyStatus: boolean
+  replyUserId: number
+  replyContent: string
+  replyTime: Date
+}
+
+// 查询商品评论列表
+export const getCommentPage = async (params) => {
+  return await request.get({ url: `/product/comment/page`, params })
+}
+
+// 查询商品评论详情
+export const getComment = async (id: number) => {
+  return await request.get({ url: `/product/comment/get?id=` + id })
+}
+
+// 添加自评
+export const createComment = async (data: CommentVO) => {
+  return await request.post({ url: `/product/comment/create`, data })
+}
+
+// 显示 / 隐藏评论
+export const updateCommentVisible = async (data: any) => {
+  return await request.put({ url: `/product/comment/update-visible`, data })
+}
+
+// 商家回复
+export const replyComment = async (data: any) => {
+  return await request.put({ url: `/product/comment/reply`, data })
+}
diff --git a/src/views/mall/product/comment/CommentForm.vue b/src/views/mall/product/comment/CommentForm.vue
new file mode 100644
index 00000000..85458c3d
--- /dev/null
+++ b/src/views/mall/product/comment/CommentForm.vue
@@ -0,0 +1,198 @@
+<template>
+  <Dialog title="添加虚拟评论" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="商品" prop="spuId">
+        <div @click="handleSelectSpu" class="w-60px h-60px">
+          <div v-if="spuData && spuData.picUrl">
+            <el-image :src="spuData.picUrl" />
+          </div>
+          <div v-else class="select-box">
+            <Icon icon="ep:plus" />
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="商品规格" prop="skuId" v-if="formData.spuId">
+        <div @click="handleSelectSku" class="w-60px h-60px">
+          <div v-if="skuData && skuData.picUrl">
+            <el-image :src="skuData.picUrl" />
+          </div>
+          <div v-else class="select-box">
+            <Icon icon="ep:plus" />
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="用户头像" prop="userAvatar">
+        <UploadImg v-model="formData.userAvatar" height="60px" width="60px" />
+      </el-form-item>
+      <el-form-item label="用户名称" prop="userNickname">
+        <el-input v-model="formData.userNickname" placeholder="请输入用户名称" />
+      </el-form-item>
+      <el-form-item label="评论内容" prop="content">
+        <el-input type="textarea" v-model="formData.content" />
+      </el-form-item>
+      <el-form-item label="评分星级" prop="scores">
+        <el-rate v-model="formData.scores" />
+      </el-form-item>
+      <el-form-item label="描述星级" prop="descriptionScores">
+        <el-rate v-model="formData.descriptionScores" />
+      </el-form-item>
+      <el-form-item label="服务星级" prop="benefitScores">
+        <el-rate v-model="formData.benefitScores" />
+      </el-form-item>
+      <el-form-item label="评论图片" prop="picUrls">
+        <UploadImgs v-model="formData.picUrls" :limit="9" height="60px" width="60px" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+  <SpuTableSelect ref="spuTableSelectRef" @change="handleSpuChange" />
+  <SkuTableSelect ref="skuTableSelectRef" @change="handleSkuChange" :spu-id="spuData.id" />
+</template>
+<script setup lang="ts">
+import * as CommentApi from '@/api/mall/product/comment'
+import SpuTableSelect from '@/views/mall/product/comment/components/SpuTableSelect.vue'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import SkuTableSelect from '@/views/mall/product/comment/components/SkuTableSelect.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  userId: undefined,
+  userNickname: undefined,
+  userAvatar: undefined,
+  spuId: undefined,
+  spuName: undefined,
+  skuId: undefined,
+  scores: 5,
+  descriptionScores: 5,
+  benefitScores: 5,
+  content: undefined,
+  picUrls: []
+})
+const formRules = reactive({
+  spuId: [{ required: true, message: '商品不能为空', trigger: 'blur' }],
+  skuId: [{ required: true, message: '规格不能为空', trigger: 'blur' }],
+  userAvatar: [{ required: true, message: '用户头像不能为空', trigger: 'blur' }],
+  userNickname: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
+  content: [{ required: true, message: '评论内容不能为空', trigger: 'blur' }],
+  scores: [{ required: true, message: '评分星级不能为空', trigger: 'blur' }],
+  descriptionScores: [{ required: true, message: '描述星级不能为空', trigger: 'blur' }],
+  benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const spuData = ref<ProductSpuApi.Spu>({})
+const skuData = ref({
+  id: -1,
+  name: '',
+  picUrl: ''
+})
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await CommentApi.getComment(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    //处理评论图片
+    const picUrls = formData.value.picUrls.map((item) => {
+      return item?.url ? item.url : item
+    })
+    const data = { ...formData.value, picUrls }
+    if (formType.value === 'create') {
+      await CommentApi.createComment(data)
+      message.success(t('common.createSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    userId: undefined,
+    userNickname: undefined,
+    userAvatar: undefined,
+    spuId: undefined,
+    skuId: undefined,
+    scores: 5,
+    descriptionScores: 5,
+    benefitScores: 5,
+    content: undefined,
+    picUrls: []
+  }
+  formRef.value?.resetFields()
+}
+
+/** SPU 表格选择 */
+const spuTableSelectRef = ref()
+const handleSelectSpu = () => {
+  spuTableSelectRef.value.open()
+}
+const handleSpuChange = (spu: ProductSpuApi.Spu) => {
+  spuData.value = spu
+  formData.value.spuId = spu.id
+}
+
+/** SKU 表格选择 */
+const skuTableSelectRef = ref()
+const handleSelectSku = () => {
+  skuTableSelectRef.value.open()
+}
+const handleSkuChange = (sku: ProductSpuApi.Sku) => {
+  skuData.value = sku
+  formData.value.skuId = sku.id
+}
+</script>
+<style>
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/mall/product/comment/components/SkuTableSelect.vue b/src/views/mall/product/comment/components/SkuTableSelect.vue
new file mode 100644
index 00000000..8bbc50cf
--- /dev/null
+++ b/src/views/mall/product/comment/components/SkuTableSelect.vue
@@ -0,0 +1,94 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择规格" width="700">
+    <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+      <el-table-column label="#" width="55">
+        <template #default="{ row }">
+          <el-radio :label="row.id" v-model="selectedSkuId" @change="handleSelected(row)"
+            >&nbsp;
+          </el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column label="图片" min-width="80">
+        <template #default="{ row }">
+          <el-image
+            :src="row.picUrl"
+            class="w-30px h-30px"
+            :preview-src-list="[row.picUrl]"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="规格" align="center" min-width="80">
+        <template #default="{ row }">
+          {{ row.properties?.map((p) => p.valueName)?.join(' ') }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="销售价(元)" min-width="80">
+        <template #default="{ row }">
+          {{ row.price }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ElTable } from 'element-plus'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'SkuTableSelect' })
+
+const props = defineProps({
+  spuId: propTypes.number.def(null)
+})
+
+const message = useMessage() // 消息弹窗
+const list = ref<any[]>([]) // 列表的数据
+const loading = ref(false) // 列表的加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+
+const selectedSkuId = ref() // 选中的商品 spuId
+
+/** 选中时触发 */
+const handleSelected = (row: ProductSpuApi.Sku) => {
+  emits('change', row)
+  // 关闭弹窗
+  dialogVisible.value = false
+  selectedSkuId.value = undefined
+}
+
+// 确认选择时的触发事件
+const emits = defineEmits<{
+  (e: 'change', spu: ProductSpuApi.Sku): void
+}>()
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getSpuDetail = async () => {
+  loading.value = true
+  try {
+    const spu = await ProductSpuApi.getSpu(props.spuId)
+    list.value = spu.skus
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {})
+watch(
+  () => props.spuId,
+  () => {
+    if (!props.spuId) {
+      return
+    }
+    getSpuDetail()
+  }
+)
+</script>
diff --git a/src/views/mall/product/comment/components/SpuTableSelect.vue b/src/views/mall/product/comment/components/SpuTableSelect.vue
new file mode 100644
index 00000000..f8560aa3
--- /dev/null
+++ b/src/views/mall/product/comment/components/SpuTableSelect.vue
@@ -0,0 +1,167 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择商品" width="70%">
+    <el-row :gutter="20" class="mb-10px">
+      <el-col :span="6">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入商品名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-col>
+      <el-col :span="6">
+        <el-tree-select
+          v-model="queryParams.categoryId"
+          :data="categoryTreeList"
+          :props="defaultProps"
+          check-strictly
+          class="w-1/1"
+          node-key="id"
+          placeholder="请选择商品分类"
+        />
+      </el-col>
+      <el-col :span="6">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-col>
+      <el-col :span="6">
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-table ref="spuListRef" v-loading="loading" :data="list" show-overflow-tooltip>
+      <el-table-column label="#" width="55">
+        <template #default="{ row }">
+          <el-radio :label="row.id" v-model="selectedSpuId" @change="handleSelected(row)"
+            >&nbsp;</el-radio
+          >
+        </template>
+      </el-table-column>
+      <el-table-column key="id" align="center" label="商品编号" prop="id" min-width="60" />
+      <el-table-column label="商品图" min-width="80">
+        <template #default="{ row }">
+          <el-image
+            :src="row.picUrl"
+            class="w-30px h-30px"
+            :preview-src-list="[row.picUrl]"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" min-width="200" prop="name" />
+      <el-table-column label="商品分类" min-width="100" prop="categoryId">
+        <template #default="{ row }">
+          <span>{{ categoryList.find((c) => c.id === row.categoryId)?.name }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ElTable } from 'element-plus'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+import * as ProductCategoryApi from '@/api/mall/product/category'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+
+defineOptions({ name: 'SpuTableSelect' })
+
+const message = useMessage() // 消息弹窗
+const total = ref(0) // 列表的总页数
+const list = ref<any[]>([]) // 列表的数据
+const loading = ref(false) // 列表的加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  tabType: 0, // 默认获取上架的商品
+  name: '',
+  categoryId: null,
+  createTime: []
+}) // 查询参数
+const spuListRef = ref<InstanceType<typeof ElTable>>()
+
+const selectedSpuId = ref() // 选中的商品 spuId
+
+/** 选中时触发 */
+const handleSelected = (row: ProductSpuApi.Spu) => {
+  emits('change', row)
+  // 关闭弹窗
+  dialogVisible.value = false
+  selectedSpuId.value = undefined
+}
+
+// 确认选择时的触发事件
+const emits = defineEmits<{
+  (e: 'change', spu: ProductSpuApi.Spu): void
+}>()
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductSpuApi.getSpuPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    tabType: 0, // 默认获取上架的商品
+    name: '',
+    categoryId: null,
+    createTime: []
+  }
+  getList()
+}
+
+const categoryList = ref() // 分类列表
+const categoryTreeList = ref() // 分类树
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 获得分类树
+  categoryList.value = await ProductCategoryApi.getCategoryList({})
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId')
+})
+</script>
diff --git a/src/views/mall/product/comment/index.vue b/src/views/mall/product/comment/index.vue
new file mode 100644
index 00000000..ecb519c9
--- /dev/null
+++ b/src/views/mall/product/comment/index.vue
@@ -0,0 +1,297 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="回复状态" prop="replyStatus">
+        <el-select v-model="queryParams.replyStatus">
+          <el-option label="已回复" :value="true" />
+          <el-option label="未回复" :value="false" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品名称" prop="spuName">
+        <el-input v-model="queryParams.spuName" placeholder="请输入商品名称" />
+      </el-form-item>
+      <el-form-item label="用户名称" prop="userNickname">
+        <el-input v-model="queryParams.userNickname" placeholder="请输入用户名称" />
+      </el-form-item>
+      <el-form-item label="订单编号" prop="orderId">
+        <el-input v-model="queryParams.orderId" placeholder="请输入订单编号" />
+      </el-form-item>
+      <el-form-item label="评论时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" />
+          重置
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['product:comment:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" />
+          添加虚拟评论
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false">
+      <el-table-column label="评论编号" align="center" prop="id" min-width="60" />
+      <el-table-column label="用户名称" align="center" prop="userNickname" width="80" />
+      <el-table-column label="商品信息" align="center" min-width="210">
+        <template #default="scope">
+          <div class="flex row items-center gap-x-4px">
+            <el-image
+              v-if="scope.row.skuPicUrl"
+              :src="scope.row.skuPicUrl"
+              :preview-src-list="[scope.row.skuPicUrl]"
+              class="w-30px h-30px shrink-0"
+              preview-teleported
+            />
+            <div>{{ scope.row.spuName }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="评分星级" align="center" prop="scores" width="80" />
+      <el-table-column label="描述星级" align="center" prop="descriptionScores" width="80" />
+      <el-table-column label="服务星级" align="center" prop="benefitScores" width="80" />
+      <el-table-column label="评论内容" align="center" prop="content" min-width="80">
+        <template #default="scope">
+          <p>{{ scope.row.content }}</p>
+          <div class="flex justify-center gap-x-4px">
+            <el-image
+              v-for="(picUrl, index) in scope.row.picUrls"
+              :key="index"
+              :src="picUrl"
+              :preview-src-list="scope.row.picUrls"
+              :initial-index="index"
+              class="w-30px h-30px"
+              preview-teleported
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="回复内容"
+        align="center"
+        prop="replyContent"
+        min-width="100"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="评论时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="170"
+      />
+      <el-table-column label="状态" align="center" width="65px">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.visible"
+            :active-value="true"
+            :inactive-value="false"
+            v-hasPermi="['product:comment:update']"
+            @change="handleVisibleChange(scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" min-width="60px" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="handleReply(scope.row.id)"
+            v-hasPermi="['product:comment:update']"
+          >
+            回复
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CommentForm ref="formRef" @success="getList" />
+
+  <Dialog title="回复" v-model="replyDialog.visible">
+    <el-form
+      ref="replyFormRef"
+      :model="replyDialog.formData"
+      :rules="replyDialog.formRules"
+      label-width="100px"
+      v-loading="replyDialog.loading"
+    >
+      <el-form-item label="回复内容" prop="replyContent">
+        <el-input type="textarea" v-model="replyDialog.formData.replyContent" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitReplyForm" type="primary" :disabled="replyDialog.loading"
+        >确 定
+      </el-button>
+      <el-button @click="replyDialog.visible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as CommentApi from '@/api/mall/product/comment'
+import CommentForm from './CommentForm.vue'
+import { ElInput } from 'element-plus'
+
+defineOptions({ name: 'ProductComment' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: null,
+  userNickname: null,
+  userAvatar: null,
+  anonymous: null,
+  orderId: null,
+  orderItemId: null,
+  spuId: null,
+  spuName: null,
+  skuId: null,
+  visible: null,
+  scores: null,
+  descriptionScores: null,
+  benefitScores: null,
+  content: null,
+  picUrls: null,
+  replyStatus: null,
+  replyUserId: null,
+  replyContent: null,
+  replyTime: [],
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CommentApi.getCommentPage(queryParams)
+    // visible 如果为 null，会导致刷新的时候触发e-switch的change事件
+    data.list.forEach((item) => {
+      if (!item.visible) {
+        item.visible = false
+      }
+    })
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 回复 **/
+const replyFormRef = ref()
+const replyDialog = reactive({
+  visible: false,
+  loading: false,
+  formData: {
+    id: -1,
+    replyContent: ''
+  },
+  formRules: {
+    replyContent: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }]
+  }
+})
+const handleReply = (id: number) => {
+  replyDialog.formData.id = id
+  replyDialog.formData.replyContent = ''
+  replyDialog.visible = true
+}
+const submitReplyForm = async () => {
+  const valid = await replyFormRef?.value?.validate()
+  if (!valid) return
+
+  replyDialog.loading = true
+  try {
+    await CommentApi.replyComment(replyDialog.formData)
+    message.success(t('common.createSuccess'))
+
+    replyDialog.visible = false
+    await getList()
+  } finally {
+    replyDialog.loading = false
+  }
+}
+
+/** 显示/隐藏 **/
+const handleVisibleChange = async (row: CommentApi.CommentVO) => {
+  if (loading.value) {
+    return
+  }
+  let changedValue = row.visible
+  try {
+    await message.confirm(changedValue ? '是否显示评论？' : '是否隐藏评论？')
+    await CommentApi.updateCommentVisible({ id: row.id, visible: changedValue })
+    await getList()
+  } catch {
+    row.visible = !changedValue
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

From 84c5eb9942f7823980096aca80e556c4696e853c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 26 Aug 2023 11:19:29 +0800
Subject: [PATCH 4/5] =?UTF-8?q?code=20review=EF=BC=9A=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/product/comment/CommentForm.vue               | 1 +
 src/views/mall/product/comment/components/SkuTableSelect.vue | 1 +
 src/views/mall/product/comment/components/SpuTableSelect.vue | 1 +
 src/views/mall/product/comment/index.vue                     | 4 +++-
 src/views/mall/product/spu/addForm.vue                       | 2 ++
 5 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/mall/product/comment/CommentForm.vue b/src/views/mall/product/comment/CommentForm.vue
index 85458c3d..f4180f45 100644
--- a/src/views/mall/product/comment/CommentForm.vue
+++ b/src/views/mall/product/comment/CommentForm.vue
@@ -36,6 +36,7 @@
       <el-form-item label="评论内容" prop="content">
         <el-input type="textarea" v-model="formData.content" />
       </el-form-item>
+      <!-- TODO @疯狂：formData.scores 是通过后端计算的哈，不要前端传递 -->
       <el-form-item label="评分星级" prop="scores">
         <el-rate v-model="formData.scores" />
       </el-form-item>
diff --git a/src/views/mall/product/comment/components/SkuTableSelect.vue b/src/views/mall/product/comment/components/SkuTableSelect.vue
index 8bbc50cf..f72870e4 100644
--- a/src/views/mall/product/comment/components/SkuTableSelect.vue
+++ b/src/views/mall/product/comment/components/SkuTableSelect.vue
@@ -37,6 +37,7 @@ import { ElTable } from 'element-plus'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import { propTypes } from '@/utils/propTypes'
 
+// TODO @疯狂：是不是挪到 spu 的 components 下哈
 defineOptions({ name: 'SkuTableSelect' })
 
 const props = defineProps({
diff --git a/src/views/mall/product/comment/components/SpuTableSelect.vue b/src/views/mall/product/comment/components/SpuTableSelect.vue
index f8560aa3..2a62a2fa 100644
--- a/src/views/mall/product/comment/components/SpuTableSelect.vue
+++ b/src/views/mall/product/comment/components/SpuTableSelect.vue
@@ -86,6 +86,7 @@ import { defaultProps, handleTree } from '@/utils/tree'
 import * as ProductCategoryApi from '@/api/mall/product/category'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 
+// TODO @疯狂：是不是挪到 spu 的 components 下哈
 defineOptions({ name: 'SpuTableSelect' })
 
 const message = useMessage() // 消息弹窗
diff --git a/src/views/mall/product/comment/index.vue b/src/views/mall/product/comment/index.vue
index ecb519c9..7647aff1 100644
--- a/src/views/mall/product/comment/index.vue
+++ b/src/views/mall/product/comment/index.vue
@@ -60,6 +60,7 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false">
       <el-table-column label="评论编号" align="center" prop="id" min-width="60" />
+      <!-- TODO @疯狂：后端貌似没读取？ -->
       <el-table-column label="用户名称" align="center" prop="userNickname" width="80" />
       <el-table-column label="商品信息" align="center" min-width="210">
         <template #default="scope">
@@ -210,7 +211,7 @@ const getList = async () => {
   loading.value = true
   try {
     const data = await CommentApi.getCommentPage(queryParams)
-    // visible 如果为 null，会导致刷新的时候触发e-switch的change事件
+    // visible 如果为 null，会导致刷新的时候触发 e-switch 的 change 事件
     data.list.forEach((item) => {
       if (!item.visible) {
         item.visible = false
@@ -241,6 +242,7 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+// TODO @疯狂：要不回复，也搞一个组件出去？
 /** 回复 **/
 const replyFormRef = ref()
 const replyDialog = reactive({
diff --git a/src/views/mall/product/spu/addForm.vue b/src/views/mall/product/spu/addForm.vue
index b577ece9..a536ba35 100644
--- a/src/views/mall/product/spu/addForm.vue
+++ b/src/views/mall/product/spu/addForm.vue
@@ -44,6 +44,8 @@ import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import { convertToInteger, formatToFraction } from '@/utils'
 
+// TODO @芋艿：后续稍微调整下；
+
 defineOptions({ name: 'ProductSpuForm' })
 
 const { t } = useI18n() // 国际化

From b8ca5800c6adb7225857b7b8756484d04f5ca8eb Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 26 Aug 2023 11:41:43 +0800
Subject: [PATCH 5/5] =?UTF-8?q?code=20review=EF=BC=9A=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts               | 29 ++++++++----------
 src/utils/dict.ts                             |  2 +-
 .../order/components/OrderDeliveryForm.vue    |  1 +
 src/views/mall/trade/order/index.vue          | 30 +++++++++++--------
 4 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index e691d9cf..87ffd1e5 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -346,22 +346,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
       }
     ]
   },
-  {
-    path: '/product/property',
-    component: Layout,
-    name: 'Property',
-    meta: {
-      hidden: true
-    },
-    children: [
-      {
-        path: 'value/:propertyId(\\d+)',
-        component: () => import('@/views/mall/product/property/value/index.vue'),
-        name: 'ProductPropertyValue',
-        meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
-      }
-    ]
-  },
   {
     path: '/product',
     component: Layout,
@@ -408,6 +392,19 @@ const remainingRouter: AppRouteRecordRaw[] = [
           title: '商品详情',
           activeMenu: '/product/product-spu'
         }
+      },
+      {
+        path: 'property/value/:propertyId(\\d+)',
+        component: () => import('@/views/mall/product/property/value/index.vue'),
+        name: 'ProductPropertyValue',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:view',
+          title: '商品属性值',
+          activeMenu: '/product/property'
+        }
       }
     ]
   },
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 04d29c96..6b163628 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -156,7 +156,7 @@ export enum DICT_TYPE {
   TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
   TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
   TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
-  TRADE_DELIVERY_TYPE = 'delivery_type', // 配送方式
+  TRADE_DELIVERY_TYPE = 'trade_delivery_type', // 配送方式
 
   // ========== MALL - 营销模块 ==========
   PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
diff --git a/src/views/mall/trade/order/components/OrderDeliveryForm.vue b/src/views/mall/trade/order/components/OrderDeliveryForm.vue
index 14f9411d..6d4a07c4 100644
--- a/src/views/mall/trade/order/components/OrderDeliveryForm.vue
+++ b/src/views/mall/trade/order/components/OrderDeliveryForm.vue
@@ -34,6 +34,7 @@ import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import { copyValueToTarget } from '@/utils'
 
+// TODO @puhui999：要不 Form 保持和别的模块一样，和 index.vue 放在一个目录下，不作为 components；components 更多要支持给多个模块使用哈。
 defineOptions({ name: 'OrderDeliveryForm' })
 
 const { t } = useI18n() // 国际化
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index cf6fc584..89200465 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -64,6 +64,9 @@
           />
         </el-select>
       </el-form-item>
+      <!-- TODO @puhui999：要不加个 deliveryType 筛选；配送方式；然后如果选了快递，就有【快递公司】筛选；如果选了自提，就有【自提门店】；然后把他们这 3 个，坐在一个 el-form-item 里；
+        目的是；有的时候，会筛选门店，然后做核销；这个时候，就需要筛选自提门店；
+       -->
       <el-form-item label="快递公司" prop="type">
         <el-select v-model="queryParams.logisticsId" class="!w-280px" clearable placeholder="全部">
           <el-option
@@ -125,16 +128,11 @@
   </ContentWrap>
 
   <!-- 列表 -->
-  <!-- TODO @puhui999：列表有可能尽量对齐 https://gitee.com/niushop_team/niushop_b2c_v5_stand/raw/master/image/back_end5.png 哇，主要感觉视觉上有点无法分辨一个订单项，是和哪个订单关联。
-
-  1、订单号、订单类型、订单来源、支付时间那一行，直接做到订单项的数据中
-  2、商品信息、商品原价那一行，应该是在最顶上一行，不用每个订单项都写一条
-  3、然后点击展开和收拢订单项，可以不做哈。
-   -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column class-name="order-table-col">
         <template #header>
+          <!-- TODO @phui999：小屏幕下，会有偏移，后续看看 -->
           <div class="flex items-center" style="width: 100%">
             <div class="ml-100px mr-200px">商品信息</div>
             <div class="mr-60px">单价(元)/数量</div>
@@ -170,11 +168,15 @@
                   />
                   <span>支付方式：</span>
                   <dict-tag
+                    v-if="scope.row.payChannelCode"
                     :type="DICT_TYPE.PAY_CHANNEL_CODE"
                     :value="scope.row.payChannelCode"
                     class="mr-20px"
                   />
-                  <span class="mr-20px">支付时间：{{ formatDate(scope.row.payTime) }}</span>
+                  <v-else class="mr-20px" v-else>未支付</v-else>
+                  <span class="mr-20px" v-if="scope.row.payTime">
+                    支付时间：{{ formatDate(scope.row.payTime) }}
+                  </span>
                   <span>订单类型：</span>
                   <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
                 </div>
@@ -249,6 +251,11 @@
                 <dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
               </template>
             </el-table-column>
+            <el-table-column align="center" label="订单状态" width="120">
+              <template #default>
+                <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
+              </template>
+            </el-table-column>
             <el-table-column align="center" fixed="right" label="操作" width="160">
               <template #default>
                 <!-- TODO 权限后续补齐 -->
@@ -264,7 +271,7 @@
                     </el-button>
                     <template #dropdown>
                       <el-dropdown-menu>
-                        <!--判断下 物流类型 + 状态，快递 + 待发货时展示【发货】按钮 -->
+                        <!-- 如果是【快递】，并且【未发货】，则展示【发货】按钮 -->
                         <el-dropdown-item
                           v-if="scope.row.deliveryType === 1 && scope.row.status === 10"
                           command="delivery"
@@ -272,9 +279,8 @@
                           <Icon icon="ep:takeaway-box" />
                           发货
                         </el-dropdown-item>
-                        <el-dropdown-item command="orderRemarks">
-                          <Icon icon="ep:chat-line-square" />
-                          订单备注
+                        <el-dropdown-item command="remark">
+                          <Icon icon="ep:chat-line-square" /> 备注
                         </el-dropdown-item>
                       </el-dropdown-menu>
                     </template>
@@ -464,6 +470,6 @@ onMounted(async () => {
 </script>
 <style lang="scss" scoped>
 :deep(.order-table-col > .cell) {
-  padding: 0px;
+  padding: 0;
 }
 </style>