From 8dbd5429f045547bd40746dddf9236093d87c32c Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Wed, 5 Jul 2023 11:11:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E8=90=A5=E5=90=8E=E5=8F=B0-=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E5=88=97=E8=A1=A8=EF=BC=8C=E8=AE=A2=E5=8D=95=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manager/src/views/order/order/orderList.vue | 78 ++++++++++++++++-----
 1 file changed, 61 insertions(+), 17 deletions(-)

diff --git a/manager/src/views/order/order/orderList.vue b/manager/src/views/order/order/orderList.vue
index a2b75fce..701c801a 100644
--- a/manager/src/views/order/order/orderList.vue
+++ b/manager/src/views/order/order/orderList.vue
@@ -53,23 +53,23 @@
             style="width: 160px"
           ></DatePicker>
         </Form-item>
-        <Form-item label="订单状态" prop="orderStatus">
-          <Select
-            v-model="searchForm.orderStatus"
-            placeholder="请选择"
-            clearable
-            style="width: 160px"
-          >
-            <Option value="UNPAID">未付款</Option>
-            <Option value="PAID">已付款</Option>
-            <Option value="UNDELIVERED">待发货</Option>
-            <Option value="DELIVERED">已发货</Option>
-            <Option value="COMPLETED">已完成</Option>
-            <Option value="TAKE">待核验</Option>
-            <Option value="CANCELLED">已取消</Option>
-            <Option value="STAY_PICKED_UP">待自提</Option>
-          </Select>
-        </Form-item>
+<!--        <Form-item label="订单状态" prop="orderStatus">-->
+<!--          <Select-->
+<!--            v-model="searchForm.orderStatus"-->
+<!--            placeholder="请选择"-->
+<!--            clearable-->
+<!--            style="width: 160px"-->
+<!--          >-->
+<!--            <Option value="UNPAID">未付款</Option>-->
+<!--            <Option value="PAID">已付款</Option>-->
+<!--            <Option value="UNDELIVERED">待发货</Option>-->
+<!--            <Option value="DELIVERED">已发货</Option>-->
+<!--            <Option value="COMPLETED">已完成</Option>-->
+<!--            <Option value="TAKE">待核验</Option>-->
+<!--            <Option value="CANCELLED">已取消</Option>-->
+<!--            <Option value="STAY_PICKED_UP">待自提</Option>-->
+<!--          </Select>-->
+<!--        </Form-item>-->
         <Button
           @click="handleSearch"
           type="primary"
@@ -90,6 +90,12 @@
         </download-excel>
       </div>
 
+      <div class="order-tab">
+        <div v-for="(item,index) in order_status" :key="index" :class="{'current': current_status === item.value}" @click="orderStatusClick(item)">
+          {{item.title}}
+        </div>
+      </div>
+
       <Table
         :loading="loading"
         border
@@ -317,6 +323,19 @@ export default {
       ],
       data: [], // 表单数据
       total: 0, // 表单数据总数
+      order_status: [
+        {title: '全部', value: ''},
+        {title: '未付款', value: 'UNPAID'},
+        {title: '已付款', value: 'PAID'},
+        {title: '待发货', value: 'UNDELIVERED'},
+        {title: '已发货', value: 'DELIVERED'},
+        {title: '待核验', value: 'TAKE'},
+        {title: '待自提', value: 'STAY_PICKED_UP'},
+        {title: '已完成', value: 'COMPLETED'},
+        {title: '已取消', value: 'CANCELLED'},
+
+      ],
+      current_status: ''
     };
   },
   methods: {
@@ -386,6 +405,12 @@ export default {
         this.$Message.warning("导出订单失败，请重试");
       }
     },
+    // 订单筛选
+    orderStatusClick(item) {
+      this.current_status = item.value;
+      this.searchForm.orderStatus = item.value;
+      this.getDataList();
+    },
   },
   mounted() {
     this.init();
@@ -399,4 +424,23 @@ export default {
 .export-excel-wrapper {
   display: inline;
 }
+.order-tab {
+  width: 950px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #f0f0f0;
+  padding: 0 10px;
+  margin-bottom: 10px;
+  div {
+    text-align: center;
+    padding: 4px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .current {
+    background-color: #ffffff;
+  }
+}
 </style>