From 5359c4c862969e1b8700f5022e9444b23068c549 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 25 Oct 2023 11:14:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=88=97=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84=20table#header=20=E6=95=B0=E6=8D=AE=E4=B8=8D?=
 =?UTF-8?q?=E5=88=B7=E6=96=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

(cherry picked from commit ca385bc08e10bde121423aa9e422dad03ab81c14)
---
 src/views/mall/trade/order/detail/index.vue   |  16 +-
 src/views/mall/trade/order/index.vue          | 316 ++++--------------
 .../member/user/detail/UserOrderList.vue      |   3 +-
 3 files changed, 76 insertions(+), 259 deletions(-)

diff --git a/src/views/mall/trade/order/detail/index.vue b/src/views/mall/trade/order/detail/index.vue
index 38b9342e..67e54767 100644
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -16,7 +16,7 @@
       <el-descriptions-item label="付款方式: ">
         <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="formData.payChannelCode!" />
       </el-descriptions-item>
-      <el-descriptions-item label="推广用户: " v-if="formData.brokerageUser">
+      <el-descriptions-item v-if="formData.brokerageUser" label="推广用户: ">
         {{ formData.brokerageUser?.nickname }}
       </el-descriptions-item>
     </el-descriptions>
@@ -26,7 +26,7 @@
       <el-descriptions-item label="订单状态: ">
         <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.status!" />
       </el-descriptions-item>
-      <el-descriptions-item label-class-name="no-colon">
+      <el-descriptions-item v-hasPermi="['trade:order:update']" label-class-name="no-colon">
         <el-button
           v-if="formData.status! === TradeOrderStatusEnum.UNPAID.status"
           type="primary"
@@ -150,7 +150,7 @@
       <el-descriptions-item label="联系电话: ">{{ formData.receiverMobile }}</el-descriptions-item>
       <!-- 快递配送 -->
       <div v-if="formData.deliveryType === DeliveryTypeEnum.EXPRESS.type">
-        <el-descriptions-item label="收货地址: " v-if="formData.receiverDetailAddress">
+        <el-descriptions-item v-if="formData.receiverDetailAddress" label="收货地址: ">
           {{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
           <el-link
             v-clipboard:copy="formData.receiverAreaName + ' ' + formData.receiverDetailAddress"
@@ -159,17 +159,17 @@
             type="primary"
           />
         </el-descriptions-item>
-        <el-descriptions-item label="物流公司: " v-if="formData.logisticsId">
+        <el-descriptions-item v-if="formData.logisticsId" label="物流公司: ">
           {{ deliveryExpressList.find((item) => item.id === formData.logisticsId)?.name }}
         </el-descriptions-item>
-        <el-descriptions-item label="运单号: " v-if="formData.logisticsId">
+        <el-descriptions-item v-if="formData.logisticsId" label="运单号: ">
           {{ formData.logisticsNo }}
         </el-descriptions-item>
-        <el-descriptions-item label="发货时间: " v-if="formatDate.deliveryTime">
+        <el-descriptions-item v-if="formatDate.deliveryTime" label="发货时间: ">
           {{ formatDate(formData.deliveryTime) }}
         </el-descriptions-item>
         <el-descriptions-item v-for="item in 2" :key="item" label-class-name="no-colon" />
-        <el-descriptions-item label="物流详情: " v-if="expressTrackList.length > 0">
+        <el-descriptions-item v-if="expressTrackList.length > 0" label="物流详情: ">
           <el-timeline>
             <el-timeline-item
               v-for="(express, index) in expressTrackList"
@@ -183,7 +183,7 @@
       </div>
       <!-- 自提门店 -->
       <div v-if="formData.deliveryType === DeliveryTypeEnum.PICK_UP.type">
-        <el-descriptions-item label="自提门店: " v-if="formData.pickUpStoreId">
+        <el-descriptions-item v-if="formData.pickUpStoreId" label="自提门店: ">
           {{ pickUpStore?.name }}
         </el-descriptions-item>
       </div>
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index 4a85a30e..c892292a 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -125,10 +125,10 @@
         <el-input
           v-show="true"
           v-model="queryParams[queryType.queryParam]"
+          :type="queryType.queryParam === 'userId' ? 'number' : 'text'"
           class="!w-280px"
           clearable
           placeholder="请输入"
-          :type="queryType.queryParam === 'userId' ? 'number' : 'text'"
         >
           <template #prepend>
             <el-select
@@ -163,178 +163,51 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column class-name="order-table-col">
-        <template #header>
-          <!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
-          <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>
+    <!-- 添加 row-key="id" 解决列数据中的 table#header 数据不刷新的问题  -->
+    <el-table v-loading="loading" :data="list" row-key="id">
+      <OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
+        <template #default="{ row }">
+          <div class="flex items-center justify-center">
+            <el-button
+              v-hasPermi="['trade:order:query']"
+              link
+              type="primary"
+              @click="openDetail(row.id)"
+            >
+              <Icon icon="ep:notification" />
+              详情
+            </el-button>
+            <el-dropdown
+              v-hasPermi="['trade:order:update']"
+              @command="(command) => handleCommand(command, row)"
+            >
+              <el-button link type="primary">
+                <Icon icon="ep:d-arrow-right" />
+                更多
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <!-- 如果是【快递】，并且【未发货】，则展示【发货】按钮 -->
+                  <el-dropdown-item
+                    v-if="
+                      row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
+                      row.status === TradeOrderStatusEnum.UNDELIVERED.status
+                    "
+                    command="delivery"
+                  >
+                    <Icon icon="ep:takeaway-box" />
+                    发货
+                  </el-dropdown-item>
+                  <el-dropdown-item command="remark">
+                    <Icon icon="ep:chat-line-square" />
+                    备注
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </div>
         </template>
-        <template #default="scope">
-          <el-table
-            :border="true"
-            :data="scope.row.items"
-            :header-cell-style="headerStyle"
-            :span-method="spanMethod"
-            style="width: 100%"
-          >
-            <el-table-column min-width="300" prop="spuName">
-              <template #header>
-                <div
-                  class="flex items-center"
-                  style="width: 100%; height: 35px; background-color: #f7f7f7"
-                >
-                  <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
-                    v-if="scope.row.payChannelCode"
-                    :type="DICT_TYPE.PAY_CHANNEL_CODE"
-                    :value="scope.row.payChannelCode"
-                    class="mr-20px"
-                  />
-                  <v-else v-else class="mr-20px">未支付</v-else>
-                  <span v-if="scope.row.payTime" 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
-                    :src="row.picUrl"
-                    class="mr-10px h-30px w-30px"
-                    @click="imagePreview(row.picUrl)"
-                  />
-                  <span class="mr-10px">{{ row.spuName }}</span>
-                  <el-tag
-                    v-for="property in row.properties"
-                    :key="property.propertyId"
-                    class="mr-10px"
-                  >
-                    {{ property.propertyName }}: {{ property.valueName }}
-                  </el-tag>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column label="商品原价*数量" prop="price" width="150">
-              <template #default="{ row }">
-                {{ floatToFixed2(row.price) }} 元 / {{ row.count }}
-              </template>
-            </el-table-column>
-            <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
-              <template #default="{ row }">
-                <dict-tag
-                  :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
-                  :value="row.afterSaleStatus"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
-              <template #default>
-                {{ floatToFixed2(scope.row.payPrice) + '元' }}
-              </template>
-            </el-table-column>
-            <el-table-column label="买家/收货人" min-width="160">
-              <template #default>
-                <!-- 快递发货  -->
-                <div
-                  v-if="scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type"
-                  class="flex flex-col"
-                >
-                  <span>买家：{{ scope.row.user.nickname }}</span>
-                  <span>
-                    收货人：{{ scope.row.receiverName }} {{ scope.row.receiverMobile }}
-                    {{ scope.row.receiverAreaName }} {{ scope.row.receiverDetailAddress }}
-                  </span>
-                </div>
-                <!-- 自提  -->
-                <div
-                  v-if="scope.row.deliveryType === DeliveryTypeEnum.PICK_UP.type"
-                  class="flex flex-col"
-                >
-                  <span>
-                    门店名称：
-                    {{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.name }}
-                  </span>
-                  <span>
-                    门店手机：
-                    {{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.phone }}
-                  </span>
-                  <span>
-                    自提门店:
-                    {{
-                      pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.detailAddress
-                    }}
-                  </span>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="配送方式" width="120">
-              <template #default>
-                <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 权限后续补齐 -->
-                <div class="flex items-center justify-center">
-                  <el-button link type="primary" @click="openDetail(scope.row.id)">
-                    <Icon icon="ep:notification" />
-                    详情
-                  </el-button>
-                  <el-dropdown @command="(command) => handleCommand(command, scope.row)">
-                    <el-button link type="primary">
-                      <Icon icon="ep:d-arrow-right" />
-                      更多
-                    </el-button>
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <!-- 如果是【快递】，并且【未发货】，则展示【发货】按钮 -->
-                        <el-dropdown-item
-                          v-if="
-                            scope.row.deliveryType === DeliveryTypeEnum.EXPRESS.type &&
-                            scope.row.status === TradeOrderStatusEnum.UNDELIVERED.status
-                          "
-                          command="delivery"
-                        >
-                          <Icon icon="ep:takeaway-box" />
-                          发货
-                        </el-dropdown-item>
-                        <el-dropdown-item command="remark">
-                          <Icon icon="ep:chat-line-square" />
-                          备注
-                        </el-dropdown-item>
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
-        </template>
-      </el-table-column>
+      </OrderTableColumn>
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -351,22 +224,19 @@
 </template>
 
 <script lang="ts" setup>
-import type { FormInstance, TableColumnCtx } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
 import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
 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'
 import { DeliveryTypeEnum, TradeOrderStatusEnum } from '@/utils/constants'
+import { OrderTableColumn } from './components'
 
 defineOptions({ name: 'TradeOrder' })
 
 const { currentRoute, push } = useRouter() // 路由跳转
-
 const loading = ref(true) // 列表的加载中
 const total = ref(2) // 列表的总页数
 const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
@@ -375,15 +245,15 @@ const queryFormRef = ref<FormInstance>() // 搜索的表单
 const queryParams = ref({
   pageNo: 1, // 页数
   pageSize: 10, // 每页显示数量
-  status: null, // 订单状态
-  payChannelCode: null, // 支付方式
-  createTime: null, // 创建时间
-  terminal: null, // 订单来源
-  type: null, // 订单类型
-  deliveryType: null, // 配送方式
-  logisticsId: null, // 快递公司
-  pickUpStoreId: null, // 自提门店
-  pickUpVerifyCode: null // 自提核销码
+  status: undefined, // 订单状态
+  payChannelCode: undefined, // 支付方式
+  createTime: undefined, // 创建时间
+  terminal: undefined, // 订单来源
+  type: undefined, // 订单类型
+  deliveryType: undefined, // 配送方式
+  logisticsId: undefined, // 快递公司
+  pickUpStoreId: undefined, // 自提门店
+  pickUpVerifyCode: undefined // 自提核销码
 })
 const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
 
@@ -409,48 +279,6 @@ const inputChangeSelect = (val: string) => {
     })
 }
 
-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>
-  rowIndex: number
-  columnIndex: number
-}
-
-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, 7]
-  if (colIndex.includes(columnIndex)) {
-    // 除了第一行其余的不要
-    if (rowIndex !== 0) {
-      return {
-        rowspan: 0,
-        colspan: 0
-      }
-    }
-    // 动态合并行
-    return {
-      rowspan: len,
-      colspan: 1
-    }
-  }
-}
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -473,28 +301,21 @@ const handleQuery = async () => {
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   queryParams.value = {
-    pickUpVerifyCode: null, // 自提核销码
     pageNo: 1, // 页数
     pageSize: 10, // 每页显示数量
-    status: null, // 订单状态
-    payChannelCode: null, // 支付方式
-    createTime: null, // 创建时间
-    terminal: null, // 订单来源
-    type: null, // 订单类型
-    deliveryType: null, // 配送方式
-    logisticsId: null, // 快递公司
-    pickUpStoreId: null // 自提门店
+    status: undefined, // 订单状态
+    payChannelCode: undefined, // 支付方式
+    createTime: undefined, // 创建时间
+    terminal: undefined, // 订单来源
+    type: undefined, // 订单类型
+    deliveryType: undefined, // 配送方式
+    logisticsId: undefined, // 快递公司
+    pickUpStoreId: undefined, // 自提门店
+    pickUpVerifyCode: undefined // 自提核销码
   }
   handleQuery()
 }
 
-/** 商品图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    urlList: [imgUrl]
-  })
-}
-
 /** 查看订单详情 */
 const openDetail = (id: number) => {
   push({ name: 'TradeOrderDetail', params: { id } })
@@ -522,8 +343,8 @@ watch(
   }
 )
 
-const pickUpStoreList = ref([]) // 自提门店精简列表
-const deliveryExpressList = ref([]) // 物流公司
+const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
+const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
 /** 初始化 **/
 onMounted(async () => {
   await getList()
@@ -531,8 +352,3 @@ onMounted(async () => {
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
-<style lang="scss" scoped>
-:deep(.order-table-col > .cell) {
-  padding: 0;
-}
-</style>
diff --git a/src/views/member/user/detail/UserOrderList.vue b/src/views/member/user/detail/UserOrderList.vue
index 1f4359ca..b6870bc3 100644
--- a/src/views/member/user/detail/UserOrderList.vue
+++ b/src/views/member/user/detail/UserOrderList.vue
@@ -162,7 +162,8 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list">
+    <!-- 添加 row-key="id" 解决列数据中的 table#header 数据不刷新的问题  -->
+    <el-table v-loading="loading" :data="list" row-key="id">
       <OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
         <template #default="{ row }">
           <el-button link type="primary" @click="openDetail(row.id)">