订单列表：优化订单列表页面结构

58502b12 · puhui999 · 7db6c121 · 58502b12 · 58502b12 · 58502b12
Commit 58502b12 authored Aug 24, 2023 by puhui999
Show whitespace changes
Inline Side-by-side

Showing with 91 additions and 79 deletions

src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
+7 -5

src/views/mall/trade/order/detail/index.vue
+2 -2

src/views/mall/trade/order/index.vue
+82 -72

No files found.
--- 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.adjustPrice = formatToFraction(row.adjustPrice!)
-  formData.value.payPrice = formatToFraction(row.payPrice) + '元'
+  formData.value.payPrice = floatToFixed2(row.payPrice!) + '元'
  formData.value.newPayPrice = formData.value.payPrice
  dialogVisible.value = true
 }

--- 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: {

--- 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">
+      <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
-      v-loading="loading"
+            :data="scope.row.items"
-      :data="list"
+            :header-cell-style="headerStyle"
-      :show-overflow-tooltip="true"
+            :span-method="spanMethod"
-      :stripe="true"
+            border
-      default-expand-all
+            style="width: 100%"
          >
-      <el-table-column fixed="left" type="expand">
+            <el-table-column min-width="300" prop="spuName">
-        <template #default="scope">
+              <template #header>
-          <el-table :data="scope.row.items" :span-method="spanMethod" border style="width: 100%">
+                <div
-            <el-table-column label="商品信息" min-width="300" prop="spuName">
+                  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 spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps) => {
-  const colIndex = [4, 5, 6, 7]
+  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>