fixed 初步完善订单表格

src/views/business/OrderManage/Orders/index.vue

@@ -10,60 +10,56 @@
   <div class="app-container">
     <el-row :gutter="24">
       <!-- 搜索框 queryParams.需要搜索的字段 -->
-      <el-form :model="queryParams" label-position="left" style="margin:15px;"  inline ref="queryForm" v-show="showSearch"
+      <el-form :model="queryParams" label-position="left" style="margin:15px;" inline ref="queryForm" v-show="showSearch"
         @submit.prevent>
-      <el-form-item label="订单号" prop="orderNumber">
+        <el-form-item label="订单号" prop="orderNumber">
-        <el-input v-model="queryParams.orderNumber" placeholder="请输入订单号" clearable @keyup.enter="handleQuery"/>
+          <el-input v-model="queryParams.orderNumber" placeholder="请输入订单号" clearable @keyup.enter="handleQuery" />
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="支付方式(1微信支付 2余额支付)" prop="payType">
+        <el-form-item label="收货人姓名" prop="name">
-        <el-select v-model="queryParams.payType" placeholder="请选择支付方式(1微信支付 2余额支付)" clearable @change="handleQuery">
+          <el-input v-model="queryParams.name" placeholder="请输入收货人姓名" clearable @keyup.enter="handleQuery" />
-          <el-option v-for="item in  pay_type " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+        </el-form-item>
-        </el-select>
+        <el-form-item label="收货人手机号" prop="phone">
-      </el-form-item>
+          <el-input v-model="queryParams.phone" placeholder="请输入收货人手机号" clearable @keyup.enter="handleQuery" />
-      <el-form-item label="付款状态(1未付款 2已付款)" prop="payStatus">
+        </el-form-item>
-        <el-select v-model="queryParams.payStatus" placeholder="请选择付款状态(1未付款 2已付款)" clearable @change="handleQuery">
+        <el-form-item label="物流单号" prop="logisticsTrackingNumber">
-          <el-option v-for="item in  pay_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+          <el-input v-model="queryParams.logisticsTrackingNumber" placeholder="请输入物流单号" clearable
-        </el-select>
+            @keyup.enter="handleQuery" />
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="配送方式(1快递配送)" prop="deliveryType">
+        <el-form-item label="支付方式" prop="payType">
-        <el-select v-model="queryParams.deliveryType" placeholder="请选择配送方式(1快递配送)" clearable @change="handleQuery">
+          <el-select v-model="queryParams.payType" placeholder="请选择支付方式" clearable @change="handleQuery">
-          <el-option v-for="item in  delivery_type " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+            <el-option v-for="item in  pay_type " :key="item.dictValue" :label="item.dictLabel"
-        </el-select>
+              :value="item.dictValue"></el-option>
-      </el-form-item>
+          </el-select>
-      <el-form-item label="物流单号" prop="logisticsTrackingNumber">
+        </el-form-item>
-        <el-input v-model="queryParams.logisticsTrackingNumber" placeholder="请输入物流单号" clearable @keyup.enter="handleQuery"/>
+        <el-form-item label="配送方式" prop="deliveryType">
-      </el-form-item>
+          <el-select v-model="queryParams.deliveryType" placeholder="请选择配送方式" clearable @change="handleQuery">
-      <el-form-item label="发货状态(1未发货 2已发货)" prop="deliveryStatus">
+            <el-option v-for="item in  delivery_type " :key="item.dictValue" :label="item.dictLabel"
-        <el-select v-model="queryParams.deliveryStatus" placeholder="请选择发货状态(1未发货 2已发货)" clearable @change="handleQuery">
+              :value="item.dictValue"></el-option>
-          <el-option v-for="item in  delivery_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+          </el-select>
-        </el-select>
+        </el-form-item>
-      </el-form-item>
+        <el-form-item label="下单时间">
-      <el-form-item label="收货状态(1未收货 2已收货)" prop="receiptStatus">
+          <el-date-picker v-model="dateRange" style="width: 240px" type="daterange" range-separator="-"
-        <el-select v-model="queryParams.receiptStatus" placeholder="请选择收货状态(1未收货 2已收货)" clearable @change="handleQuery">
+            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-          <el-option v-for="item in  receipt_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+        </el-form-item>
-        </el-select>
+
-      </el-form-item>
+        <el-form-item>
-      <el-form-item label="订单状态(1进行中 2取消 3待取消 4已完成)" prop="orderStatus">
+          <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
-        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态(1进行中 2取消 3待取消 4已完成)" clearable @change="handleQuery">
+          <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
-          <el-option v-for="item in  order_status " :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+        </el-form-item>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
-        <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
-      </el-form-item>
       </el-form>
     </el-row>
 
     <!-- 工具按钮 -->
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
-        <el-button type="primary" v-hasPermi="['business:order:addOrUpdate']" plain icon="plus" @click="AddDialogVisible = true">
+        <el-button type="primary" v-hasPermi="['business:order:addOrUpdate']" plain icon="plus"
+          @click="AddDialogVisible = true">
           {{ $t('btn.add') }}
         </el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
-        <el-button type="danger" :disabled="multiple" v-hasPermi="['business:order:delete']" plain icon="delete" @click="handleDelete">
+        <el-button type="danger" :disabled="multiple" v-hasPermi="['business:order:delete']" plain icon="delete"
+          @click="handleDelete">
           {{ $t('btn.delete') }}
         </el-button>
       </el-col>
@@ -76,75 +72,91 @@
     </el-row>
 
     <!-- 表格渲染  prop="对应的字段"-->
-    <el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
-      <el-table-column type="selection" width="50" align="center" />
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="50" align="center"  />
 
-      <el-table-column prop="orderNumber" label="订单号" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="orderNumber" label="订单号"  :show-overflow-tooltip="true" width="250" />
-      <el-table-column prop="goodsTotalAmoun" label="商品总金额" align="center" />
+      <el-table-column prop="goodsInfo" label="商品信息" width="350">
-      <el-table-column prop="orderAmount" label="订单金额" align="center" />
-      <el-table-column prop="couponMoney" label="优惠券抵扣金额" align="center" />
-      <el-table-column prop="pointsMoney" label="积分抵扣金额" align="center" />
-      <el-table-column prop="pointsNum" label="积分抵扣数量" align="center" />
-      <el-table-column prop="payPrice" label="实际付款金额(包含运费)" align="center" />
-      <el-table-column prop="updatePrice" label="后台修改的订单金额（差价）" align="center" />
-      <el-table-column prop="orderRemark" label="买家留言" align="center" :show-overflow-tooltip="true" />
-      <el-table-column prop="payType" label="支付方式(1微信支付 2余额支付)" align="center">
         <template #default="scope">
-          <dict-tag :options=" pay_type " :value="scope.row.payType" />
+          <div class="goods-info-box">
+            <el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
+              :src="scope.row.goodsInfo.goodsPicture?.split(',')[0]"
+              :preview-src-list="scope.row.goodsInfo.goodsPicture?.split(',')">
+              <div><el-icon :size="15">
+                  <document />
+                </el-icon></div>
+            </el-image>
+            <div>
+              <div class="goods-info-text m2">
+                {{ scope.row.goodsInfo.goodsName }}
+              </div>
+              <div>
+                <el-tag>{{ scope.row.goodsInfo.goodsSpecName }}</el-tag>
+              </div>
+            </div>
+
+          </div>
         </template>
       </el-table-column>
-      <el-table-column prop="payStatus" label="付款状态(1未付款 2已付款)" align="center">
+      <el-table-column prop="goodsInfo" label="单价/数量" width="150">
         <template #default="scope">
-          <dict-tag :options=" pay_status " :value="scope.row.payStatus" />
+          <div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
+          <div>× {{ scope.row.goodsTotalNum }}</div>
         </template>
       </el-table-column>
-      <el-table-column prop="payTime" label="付款时间" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="payPrice" label="实付款" width="150">
-      <el-table-column prop="deliveryType" label="配送方式(1快递配送)" align="center">
         <template #default="scope">
-          <dict-tag :options=" delivery_type " :value="scope.row.deliveryType" />
+          <div>￥ {{ scope.row.goodsInfo.goodsPrice }}</div>
+          <div>(含运费：￥ {{ scope.row.expressPrice }})</div>
         </template>
       </el-table-column>
-      <el-table-column prop="expressPrice" label="运费金额" align="center" />
+      <el-table-column prop="goodsInfo" label="买家信息" width="250">
-      <el-table-column prop="logisticsCompany" label="物流公司" align="center" :show-overflow-tooltip="true" />
-      <el-table-column prop="logisticsTrackingNumber" label="物流单号" align="center" :show-overflow-tooltip="true" />
-      <el-table-column prop="deliveryStatus" label="发货状态(1未发货 2已发货)" align="center">
         <template #default="scope">
-          <dict-tag :options=" delivery_status " :value="scope.row.deliveryStatus" />
+          <div class="goods-info-box">
+            <div class="avatar">
+              <el-avatar shape="circle" :size="50" :src="scope.row.customerAvatar" />
+            </div>
+            <div>
+              <div class="goods-info-text m2">
+                {{ scope.row.customerNickName }}
+              </div>
+              <div>
+                {{ scope.row.customerMobilePhoneNumber }}
+              </div>
+            </div>
+
+          </div>
         </template>
       </el-table-column>
-      <el-table-column prop="deliveryTime" label="发货时间" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="payType" label="支付方式"  width="150">
-      <el-table-column prop="receiptStatus" label="收货状态(1未收货 2已收货)" align="center">
         <template #default="scope">
-          <dict-tag :options=" receipt_status " :value="scope.row.receiptStatus" />
+          <dict-tag :options="pay_type" :value="scope.row.payType" />
         </template>
       </el-table-column>
-      <el-table-column prop="receiptTime" label="收货时间" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="deliveryType" label="配送方式"  width="150">
-      <el-table-column prop="orderStatus" label="订单状态(1进行中 2取消 3待取消 4已完成)" align="center">
         <template #default="scope">
-          <dict-tag :options=" order_status " :value="scope.row.orderStatus" />
+          <dict-tag :options="delivery_type" :value="scope.row.deliveryType" />
         </template>
       </el-table-column>
-      <el-table-column prop="pointsBonus" label="赠送的积分数量" align="center" />
+      <el-table-column prop="deliveryStatus" label="交易状态"  width="200">
-      <el-table-column prop="isSettled" label="订单是否已结算(1未结算 2已结算)" align="center">
         <template #default="scope">
-          <dict-tag :options=" is_settled " :value="scope.row.isSettled" />
+          <div class="status-box">付款状态: &nbsp;<dict-tag :options="pay_status" :value="scope.row.payStatus" /></div>
+          <div class="status-box">发货状态: &nbsp;<dict-tag :options="delivery_status" :value="scope.row.deliveryStatus" /></div>
+          <div class="status-box">收货状态: &nbsp;<dict-tag :options="receipt_status" :value="scope.row.receiptStatus" /></div>
+          <div class="status-box">订单状态: &nbsp;<dict-tag :options="order_status" :value="scope.row.orderStatus" /></div>
         </template>
       </el-table-column>
-      <el-table-column prop="transactionId" label="微信支付交易号" align="center" :show-overflow-tooltip="true" />
+      <el-table-column prop="createTime" label="下单时间" :show-overflow-tooltip="true" />
-      <el-table-column prop="isComment" label="是否已评价(1否 2是)" align="center">
+
-        <template #default="scope">
-          <dict-tag :options=" is_comment " :value="scope.row.isComment" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="orderSource" label="订单来源(1普通订单)" align="center" />
 
       <el-table-column label="操作" width="350" fixed="right">
         <template #default="scope">
-          <el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
+          <!-- <el-button type="primary" size="small" icon="edit" @click="handleUpdate(scope.row)"
-            v-hasPermi="['business:order:addOrUpdate']">编辑</el-button>
+            v-hasPermi="['business:order:addOrUpdate']">编辑</el-button> -->
+            <el-button type="primary" size="small" icon="view" @click="handleDetail(scope.row)">详情</el-button>
           <el-button type="danger" size="small" icon="delete" @click="handleDelete(scope.row)"
             v-hasPermi="['business:order:delete']">删除</el-button>
-          <el-button size="small" icon="view" @click="handleDetail(scope.row)">查看</el-button>
         </template>
       </el-table-column>
 
@@ -163,7 +175,7 @@
 <script setup name="order">
 import { ElMessageBox } from 'element-plus'
 import modal from '@/plugins/modal.js'
-import {  exportOrder,    orderList , delOrder } from '@/api/business/OrderManage/Orders/order.js'
+import { exportOrder, orderList, delOrder } from '@/api/business/OrderManage/Orders/order.js'
 import AddDialog from "./components/AddDialog.vue";
 import EditDialog from "./components/EditDialog.vue";
 import DetailDialog from "./components/DetailDialog.vue";
@@ -190,6 +202,8 @@ const dataList = ref([])
 const total = ref(0)
 // 是否加载
 const loading = ref(true)
+// 路由
+const router = useRouter();
 
 const data = reactive({
   form: {},
@@ -201,6 +215,7 @@ const data = reactive({
 const { queryParams } = toRefs(data)
 
 // 业务参数
+const dateRange = ref([])
 
 
 // 业务方法
@@ -280,7 +295,7 @@ function getList() {
   loading.value = true
 
 
-  orderList(queryParams.value).then((res) => {
+  orderList(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
     if (res.code == 200) {
       loading.value = false;
       dataList.value = res.data.result;
@@ -299,6 +314,7 @@ function handleSelectionChange(selection) {
 
 /** 重置查询操作 */
 function resetQuery() {
+  dateRange.value = []
   proxy.resetForm('queryForm')
   handleQuery()
 }
@@ -310,11 +326,11 @@ function handleQuery() {
 function handleDelete(row) {
   const Ids = row.orderId || ids.value
 
-    ElMessageBox.confirm("是否确认删除？", "系统提示", {
+  ElMessageBox.confirm("是否确认删除？", "系统提示", {
-      confirmButtonText: '确定',
+    confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    cancelButtonText: '取消',
-      type: "warning",
+    type: "warning",
-    })
+  })
     .then(function () {
       return delOrder(Ids)
     })
@@ -362,9 +378,42 @@ function handleUpdate(row) {
 
 // 详情
 function handleDetail(row) {
-  DetailDialogVisible.value = true
+  router.push("/orders/orderDetail")
-  DetailDialogRow.value = row
+  // DetailDialogVisible.value = true
+  // DetailDialogRow.value = row
 }
 
 handleQuery()
 </script>
+
+<style>
+.goods-info-box {
+  display: flex;
+  justify-content: space-between;
+}
+
+.goods-info-text {
+  width: 250px;
+  margin-bottom: 10px;
+}
+
+.m2 {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.avatar {
+  margin-right: 15px;
+}
+
+.status-box{
+  display: flex;
+  align-items: center;
+  margin-bottom: 2px;
+}
+</style>

src/views/business/OrderManage/Orders/orderDetail.vue

@@ -0,0 +1,183 @@
+<template>
+    <!-- 订单进度步骤条 -->
+    <el-card class="box-card">
+        <div class="order-progress" :class="`progress-${progress}`">
+            <ul>
+                <li>
+                    <span>下单时间</span>
+                    <div class="tip">1</div>
+                    <!-- <div class="tip">{{ record.create_time }}</div> -->
+                </li>
+                <li>
+                    <span>付款</span>
+                    <!-- <div v-if="record.pay_status == PayStatusEnum.SUCCESS.value" class="tip">付款于 {{ record.pay_time }}</div> -->
+                </li>
+                <li>
+                    <span>发货</span>
+                    <!-- <div v-if="record.delivery_status == DeliveryStatusEnum.DELIVERED.value" class="tip">发货于 {{
+                        record.delivery_time }}</div> -->
+                </li>
+                <li>
+                    <span>收货</span>
+                    <!-- <div v-if="record.receipt_status == ReceiptStatusEnum.RECEIVED.value" class="tip">收货于 {{
+                        record.receipt_time }}</div> -->
+                </li>
+                <li>
+                    <span>完成</span>
+                    <!-- <div v-if="record.order_status == OrderStatusEnum.COMPLETED.value" class="tip">完成于 {{
+                        record.receipt_time }}</div> -->
+                </li>
+            </ul>
+        </div>
+    </el-card>
+
+
+    
+
+
+</template>
+
+<script setup>
+
+const progress = ref(2)
+
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+    margin-bottom: 50px;
+}
+
+// 分割线
+.o-divider {
+    margin-bottom: 32px;
+}
+
+// 步骤条
+.order-progress {
+    height: 26px;
+    line-height: 26px;
+    background: #f8f8f8;
+    border-radius: 13px;
+    font-size: 14px;
+    text-align: center;
+    position: relative;
+
+    li{
+        list-style: none;
+    }
+
+    &:before,
+    &:after {
+        content: '';
+        position: absolute;
+        z-index: 2;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        border-radius: 13px;
+        background: #1890ff;
+    }
+
+    &:after {
+        background: #91d5ff;
+        z-index: 1;
+    }
+
+    &.progress-1 {
+        &:before {
+            width: 0;
+        }
+
+        &:after {
+            width: 20%;
+        }
+    }
+
+    &.progress-2 {
+        &:before {
+            width: 20%;
+        }
+
+        &:after {
+            width: 40%;
+        }
+    }
+
+    &.progress-3 {
+        &:before {
+            width: 40%;
+        }
+
+        &:after {
+            width: 60%;
+        }
+    }
+
+    &.progress-4 {
+        &:before {
+            width: 60%;
+        }
+
+        &:after {
+            width: 80%;
+        }
+    }
+
+    &.progress-5 {
+        &:before {
+            width: 100%;
+        }
+
+        &:after {
+            width: 100%;
+        }
+
+        li {
+            &:nth-child(5) {
+                color: #fff;
+            }
+        }
+    }
+
+    li {
+        width: 20%;
+        float: left;
+        border-radius: 13px;
+        position: relative;
+        z-index: 3;
+    }
+
+    .tip {
+        font-size: 12px;
+        padding-top: 10px;
+        color: #8c8c8c;
+    }
+
+    &.progress-1 li:nth-child(1),
+    &.progress-2 li:nth-child(1),
+    &.progress-3 li:nth-child(1),
+    &.progress-4 li:nth-child(1),
+    &.progress-5 li:nth-child(1) {
+        color: #fff;
+    }
+
+    &.progress-2 li:nth-child(2),
+    &.progress-3 li:nth-child(2),
+    &.progress-4 li:nth-child(2),
+    &.progress-5 li:nth-child(2) {
+        color: #fff;
+    }
+
+    &.progress-3 li:nth-child(3),
+    &.progress-4 li:nth-child(3),
+    &.progress-5 li:nth-child(3) {
+        color: #fff;
+    }
+
+    &.progress-4 li:nth-child(4),
+    &.progress-5 li:nth-child(4) {
+        color: #fff;
+    }
+}
+</style>