add 订单管理

src/views/management/order/order.vue

@@ -2,7 +2,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import { orderList } from '@/api'
 import { message } from 'ant-design-vue';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs'; 
 let time = ref<[Dayjs, Dayjs]>([
   dayjs().subtract(7, 'day'),
   dayjs(),
@@ -71,13 +71,13 @@ const columns = reactive([
     dataIndex: 'orderSn',
     align: 'center',
   },
-  {
-    title: '操作',
-    dataIndex: 'operation',
-    fixed: 'right',
-    width: '10%',
-    align: 'center',
-  }
+  // {
+  //   title: '操作',
+  //   dataIndex: 'operation',
+  //   fixed: 'right',
+  //   width: '10%',
+  //   align: 'center',
+  // }
 ])
 const pagination = reactive({
   total: 0,
@@ -142,52 +142,110 @@ onMounted(() => {
       <a-button class="ml-20px" type="primary" ghost html-type="submit">导 出</a-button>
     </a-form-item>
   </a-form>
-  <a-table :columns="columns" :data-source="data.arr" :pagination="pagination" bordered :scroll="true"
-    @change="handleTableChange">
+  <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 === '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">
         </div>
       </template>
-      <template v-if="column.dataIndex === 'operation'">
+      <!-- <template v-if="column.dataIndex === 'operation'">
         <a class="text-blue-500">详情</a>
-      </template>
+      </template> -->
     </template>
     <template #expandedRowRender="{ record }">
       <div>
-        <div>
-          <div class="text-16px text-[#333333] leading-19px">
+        <div class="modal">
+          <div class="modal-title">
             收发信息
           </div>
-          <div class="flex ml-124px mt-10px">
-            <div>
-              <div class="flex items-center">
-                <div>发件门店：</div>
-                <div>{{ record.shopName }}</div>
-              </div>
-              <div class="flex items-center">
-                <div>发件人：</div>
-                <div>{{ record.sendContactName }}</div>
-              </div>
-              <div class="flex items-center">
-                <div>发件人电话：</div>
-                <div>{{ record.sendPhone }}</div>
-              </div>
-            </div>
-            <div>
-              <div class="flex items-center">
-                <div>收件地址：</div>
-                <div>{{ record.receiptAddress }}</div>
-              </div>
-              <div class="flex items-center">
-                <div>收件人：</div>
-                <div>{{ record.receiptContactName }}</div>
-              </div>
-              <div class="flex items-center">
-                <div>收件人电话：</div>
-                <div>{{ record.receiptPhone }}</div>
-              </div>
+          <div class="cell-list">
+            <div class="cell">
+              <div class="title">发件门店：</div>
+              <div>{{ record.shopName }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">发件人：</div>
+              <div>{{ record.sendContactName }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">发件人电话：</div>
+              <div>{{ record.sendPhone }}</div>
+            </div>
+
+            <div class="cell">
+              <div class="title">收件地址：</div>
+              <div>{{ record.receiptAddress }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">收件人：</div>
+              <div>{{ record.receiptContactName }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">收件人电话：</div>
+              <div>{{ record.receiptPhone }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal">
+          <div class="modal-title">
+            配送信息
+          </div>
+          <div class="cell-list">
+            <div class="cell">
+              <div class="title">骑手姓名：</div>
+              <div>{{ record.shipperName || '--' }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">配送平台：</div>
+              <div>{{ record.deliveryName || '--' }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">骑手电话：</div>
+              <div>{{ record.sendPhone }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">配送距离：</div>
+              <div>{{ record.orderDistance || '--' }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">{{ record.deliveryName }}客服：</div>
+              <div>{{ record.receiptContactName }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal">
+          <div class="modal-title">
+            支付信息
+          </div>
+          <div class="cell-list">
+            <div class="cell">
+              <div class="title">应付费用：</div>
+              <div>{{ record.shopName }} 元</div>
+            </div>
+            <div class="cell">
+              <div class="title">实际支付：</div>
+              <div>{{ record.payAmount }} 元</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal">
+          <div class="modal-title">
+            物品信息
+          </div>
+          <div class="cell-list">
+            <div class="cell">
+              <div class="title">物品类型：</div>
+              <div>{{ record.productName }}</div>
+            </div>
+            <div class="cell">
+              <div class="title">物品重量：</div>
+              <div>{{ record.weight }} kg</div>
+            </div>
+            <div class="cell">
+              <div class="title">物品价值：</div>
+              <div>{{ record.productAmount }} 元</div>
             </div>
           </div>
         </div>
@@ -200,4 +258,24 @@ onMounted(() => {
 .ant-form-inline :deep(.ant-form-item) {
   margin-bottom: 10px;
 }
+
+.modal {
+  @apply mt-20px;
+
+  .modal-title {
+    @apply text-16px text-[#333333] leading-19px font-500 ml-20px;
+  }
+
+  .cell-list {
+    @apply flex ml-124px mt-10px flex-wrap;
+
+    .cell {
+      @apply flex items-center w-1/2 leading-30px text-[#666666] text-14px;
+
+      .title {
+        @apply w-100px text-right;
+      }
+    }
+  }
+}
 </style>

tsconfig.json

@@ -12,11 +12,18 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
     "skipLibCheck": true,
+    "allowJs": true,
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/util/iconFun.ts"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }