feat 代码优化

src/views/management/order/order.vue

@@ -11,8 +11,64 @@ let time = reactive({
 })
 let shopList = reactive({ arr: [{ id: 0, name: '' }] })
 let deliveryList = reactive({ arr: [{ id: 0, name: '' }] })
+let statusList = reactive({
+  arr: [
+    {
+      status: 0,
+      name: '新订单'
+    },
+    {
+      status: 10,
+      name: '预约单'
+    },
+    {
+      status: 1,
+      name: '待接单'
+    },
+    {
+      status: 2,
+      name: '取货中'
+    },
+    {
+      status: 3,
+      name: '配送中'
+    },
+    {
+      status: -1,
+      name: '已取消'
+    },
+    {
+      status: -2,
+      name: '异常单'
+    },
+    {
+      status: 97,
+      name: '本平台完成'
+    },
+    {
+      status: 98,
+      name: '其他平台完成'
+    },
+  ]
+})
+let searchKeyType = reactive({
+  arr: [
+    {
+      type: 1,
+      name: '订单号'
+    },
+    {
+      type: 2,
+      name: '三方订单号'
+    },
+    {
+      type: 3,
+      name: '收货人手机号'
+    },
+  ]
+})
 interface FormState {
-  city: string;
+  city?: string;
   shopId?: number;
   deliveryId?: number;
   status?: number;
@@ -21,18 +77,19 @@ interface FormState {
   searchKey: string;
   pageNum: number;
   pageSize: number;
-
+  type: Number
 }
 const formState = reactive<FormState>({
   city: '',
   searchKey: '',
   pageNum: 1,
   pageSize: 10,
+  type: 1
 });
 const columns = reactive([
   {
     title: '三方订单号',
-    dataIndex: 'outOrderId',
+    dataIndex: 'outOrderSn',
     align: 'center',
   },
   {
@@ -57,7 +114,7 @@ const columns = reactive([
   },
   {
     title: '订单状态',
-    dataIndex: 'buttonStatus',
+    dataIndex: 'status',
     align: 'center',
   },
   {
@@ -69,14 +126,7 @@ const columns = reactive([
     title: '优巨订单号',
     dataIndex: 'orderSn',
     align: 'center',
-  },
-  // {
-  //   title: '操作',
-  //   dataIndex: 'operation',
-  //   fixed: 'right',
-  //   width: '10%',
-  //   align: 'center',
-  // }
+  }
 ])
 const pagination = reactive({
   total: 0,
@@ -132,6 +182,12 @@ const handleTableChange = (e: any) => {
   formState.pageSize = e.pageSize
   getOrderList()
 }
+const showOrderStatus = (status: Number) => {
+  let statusObj: any = statusList.arr.find((v: any) => {
+    return v.status === status
+  })
+  return statusObj.name
+}
 onMounted(() => {
 
 })
@@ -140,7 +196,7 @@ onMounted(() => {
   <div class="text-20px text-[#222222] font-bold mb-30px">订单管理</div>
   <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off" class="mb-20px">
     <a-form-item label="城市" name="city">
-      <a-input v-model:value="formState.city" placeholder="请输入要查询的城市">
+      <a-input v-model:value="formState.city" placeholder="请输入要查询的城市" allowClear>
       </a-input>
     </a-form-item>
     <a-form-item label="店铺" name="shopId">
@@ -154,24 +210,38 @@ onMounted(() => {
       </a-select>
     </a-form-item>
     <a-form-item label="订单状态" name="status">
-      <a-input v-model:value="formState.status" placeholder="请选择要查询的订单状态">
-      </a-input>
+      <a-select v-model:value="formState.status" style="width: 200px" placeholder="请选择要查询的订单状态" allowClear>
+        <a-select-option v-for="(v, i) in statusList.arr" :key="i" :value="v.status">{{ v.name }}</a-select-option>
+      </a-select>
     </a-form-item>
-    <a-form-item label="订单号" name="searchKey">
-      <a-input v-model:value="formState.searchKey" placeholder="请输入要查询的订单号">
-      </a-input>
+    <a-form-item label="" name="searchKey">
+      <a-input-group compact>
+        <a-select v-model:value="formState.type" style="width: 130px">
+          <a-select-option v-for="(v, i) in searchKeyType.arr" :key="i" :value="v.type">{{ v.name }}</a-select-option>
+        </a-select>
+        <a-input style="width: 200px" v-model:value="formState.searchKey" placeholder="请输入要查询的数据" allowClear />
+      </a-input-group>
     </a-form-item>
     <a-form-item label="日期" name="time">
       <a-range-picker v-model:value="time.arr" valueFormat="YYYY/MM/DD" />
     </a-form-item>
     <a-form-item>
       <a-button class="ml-20px" type="primary" @click="search">查 询</a-button>
-      <a-button class="ml-20px" type="primary" ghost html-type="submit">导 出</a-button>
+      <!-- <a-button class="ml-20px" type="primary" ghost html-type="submit">导 出</a-button> -->
     </a-form-item>
   </a-form>
   <a-table :columns="columns" rowKey="id" :data-source="data.arr" :pagination="pagination" bordered :scroll="true"
     @change="handleTableChange">
     <template #bodyCell="{ column, text, record }">
+      <template v-if="column.dataIndex === 'outOrderSn'">
+        <div>{{ record.outOrderSn || '- -' }}</div>
+      </template>
+      <template v-if="column.dataIndex === 'deliveryName'">
+        <div>{{ record.deliveryName || '- -' }}</div>
+      </template>
+      <template v-if="column.dataIndex === 'status'">
+        <div>{{ showOrderStatus(record.status) }}</div>
+      </template>
       <template v-if="column.dataIndex === 'deliveries'">
         <div class="flex justify-center">
           <img :src="v.logo" alt="" v-for="(v, i) in text" :key="i" class="w-20px h-20px mr-10px">
@@ -183,10 +253,23 @@ onMounted(() => {
     </template>
     <template #expandedRowRender="{ record }">
       <div>
+        <div class="flex items-center modal">
+          <div class="modal-title">订单状态：</div>
+          <div class="ml-10px mr-5px text-16px text-[#05BC51]">{{ showOrderStatus(record.status) }}</div>
+          <a-popover placement="right">
+            <template #content>
+              <p class="py-5px" v-if="record.finishTime">完成时间：{{ record.finishTime }}</p>
+              <p class="py-5px" v-if="record.shipperTakeTime">骑手取件时间：{{ record.shipperTakeTime }}</p>
+              <p class="py-5px" v-if="record.shipperReceiveTime">骑手接单时间：{{ record.shipperReceiveTime }}</p>
+              <p class="py-5px" v-if="record.cancelTime">取消时间：{{ record.cancelTime }}</p>
+              <p class="py-5px" v-if="record.sendTime">发单时间：{{ record.sendTime }}</p>
+              <p class="py-5px" v-if="record.payTime">支付时间：{{ record.payTime }}</p>
+            </template>
+            <img class="cursor-pointer w-14px h-14px" src="@/assets/images/21.png" alt="">
+          </a-popover>
+        </div>
         <div class="modal">
-          <div class="modal-title">
-            收发信息
-          </div>
+          <div class="modal-title">收发信息</div>
           <div class="cell-list">
             <div class="cell">
               <div class="title">发件门店：</div>
@@ -216,9 +299,7 @@ onMounted(() => {
           </div>
         </div>
         <div class="modal">
-          <div class="modal-title">
-            配送信息
-          </div>
+          <div class="modal-title">配送信息</div>
           <div class="cell-list">
             <div class="cell">
               <div class="title">骑手姓名：</div>
@@ -230,7 +311,7 @@ onMounted(() => {
             </div>
             <div class="cell">
               <div class="title">骑手电话：</div>
-              <div>{{ record.sendPhone }}</div>
+              <div>{{ record.shipperPhone }}</div>
             </div>
             <div class="cell">
               <div class="title">配送距离：</div>
@@ -238,14 +319,12 @@ onMounted(() => {
             </div>
             <div class="cell">
               <div class="title">{{ record.deliveryName }}客服：</div>
-              <div>{{ record.receiptContactName }}</div>
+              <div>{{ record.customerPhone }}</div>
             </div>
           </div>
         </div>
-        <div class="modal">
-          <div class="modal-title">
-            支付信息
-          </div>
+        <!-- <div class="modal">
+          <div class="modal-title">支付信息</div>
           <div class="cell-list">
             <div class="cell">
               <div class="title">应付费用：</div>
@@ -254,13 +333,12 @@ onMounted(() => {
             <div class="cell">
               <div class="title">实际支付：</div>
               <div>{{ record.payAmount }} 元</div>
+              <img class="w-14px h-14px ml-5px" src="@/assets/images/22.png" alt="">
             </div>
           </div>
-        </div>
+        </div> -->
         <div class="modal">
-          <div class="modal-title">
-            物品信息
-          </div>
+          <div class="modal-title">物品信息</div>
           <div class="cell-list">
             <div class="cell">
               <div class="title">物品类型：</div>

src/views/management/shop/shop.vue

@@ -5,13 +5,11 @@ import { message } from 'ant-design-vue';
 let shopListSearch = reactive({ arr: [{ id: 0, name: '' }] })
 interface FormState {
   cityName: string;
-  name: string;
   shopId?: Number;
   mobile?: number;
 }
 const formState = reactive<FormState>({
   cityName: '',
-  name: '',
 });
 const columns = reactive([
   {
@@ -113,7 +111,7 @@ onMounted(() => {
     </a-form-item>
     <a-form-item>
       <a-button class="ml-20px" type="primary" @click="handleShopList">查 询</a-button>
-      <a-button class="ml-20px" type="primary" ghost html-type="submit">导 出</a-button>
+      <!-- <a-button class="ml-20px" type="primary" ghost html-type="submit">导 出</a-button> -->
       <a-button class="ml-20px" type="primary" ghost html-type="submit">+新建门店</a-button>
     </a-form-item>
   </a-form>