|
@@ -0,0 +1,203 @@
|
|
|
|
+<script setup lang='ts'>
|
|
|
|
+import { onMounted, reactive, ref } from 'vue'
|
|
|
|
+import { orderList } from '@/api'
|
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
|
+import dayjs, { Dayjs } from 'dayjs';
|
|
|
|
+let time = ref<[Dayjs, Dayjs]>([
|
|
|
|
+ dayjs().subtract(7, 'day'),
|
|
|
|
+ dayjs(),
|
|
|
|
+])
|
|
|
|
+interface FormState {
|
|
|
|
+ searchType: number;
|
|
|
|
+ cityName: string;
|
|
|
|
+ shopId?: number;
|
|
|
|
+ deliveryId?: number;
|
|
|
|
+ status: number;
|
|
|
|
+ startDate?: string;
|
|
|
|
+ endDate?: string;
|
|
|
|
+ searchKey: string;
|
|
|
|
+ searchKeyType: number;
|
|
|
|
+ pageNum: number;
|
|
|
|
+ pageSize: number;
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+const formState = reactive<FormState>({
|
|
|
|
+ searchType: 1,
|
|
|
|
+ cityName: '',
|
|
|
|
+ status: 99,
|
|
|
|
+ searchKey: '',
|
|
|
|
+ searchKeyType: 5,
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+});
|
|
|
|
+const columns = reactive([
|
|
|
|
+ {
|
|
|
|
+ title: '三方订单号',
|
|
|
|
+ dataIndex: 'outOrderId',
|
|
|
|
+ align: 'center',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '城市',
|
|
|
|
+ dataIndex: 'receiptCityName',
|
|
|
|
+ align: 'center',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '发件门店',
|
|
|
|
+ dataIndex: 'shopName',
|
|
|
|
+ align: 'center',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '收件地址',
|
|
|
|
+ dataIndex: 'receiptAddress',
|
|
|
|
+ align: 'center',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '配送平台',
|
|
|
|
+ dataIndex: 'deliveryName',
|
|
|
|
+ align: 'center',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '订单状态',
|
|
|
|
+ dataIndex: 'buttonStatus',
|
|
|
|
+ align: 'center',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '配送费',
|
|
|
|
+ dataIndex: 'payAmount',
|
|
|
|
+ align: 'center',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '优巨订单号',
|
|
|
|
+ dataIndex: 'orderSn',
|
|
|
|
+ align: 'center',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ dataIndex: 'operation',
|
|
|
|
+ fixed: 'right',
|
|
|
|
+ width: '10%',
|
|
|
|
+ align: 'center',
|
|
|
|
+ }
|
|
|
|
+])
|
|
|
|
+const pagination = reactive({
|
|
|
|
+ total: 0,
|
|
|
|
+ current: formState.pageNum,
|
|
|
|
+ pageSize: formState.pageSize,
|
|
|
|
+})
|
|
|
|
+let data = reactive({
|
|
|
|
+ arr: []
|
|
|
|
+})
|
|
|
|
+const getOrderList = () => {
|
|
|
|
+ orderList(formState).then((res: any) => {
|
|
|
|
+ console.log('res', res);
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ data.arr = res.data.data
|
|
|
|
+ pagination.total = res.data.totalNums
|
|
|
|
+ } else {
|
|
|
|
+ message.error(res.msg)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+getOrderList()
|
|
|
|
+const handleTableChange = (e: any) => {
|
|
|
|
+ console.log('改变参数:', e);
|
|
|
|
+ pagination.current = e.current
|
|
|
|
+ pagination.pageSize = e.pageSize
|
|
|
|
+ formState.pageNum = e.current
|
|
|
|
+ formState.pageSize = e.pageSize
|
|
|
|
+ getOrderList()
|
|
|
|
+}
|
|
|
|
+onMounted(() => {
|
|
|
|
+
|
|
|
|
+})
|
|
|
|
+</script>
|
|
|
|
+<template>
|
|
|
|
+ <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="cityName">
|
|
|
|
+ <a-input v-model:value="formState.cityName">
|
|
|
|
+ </a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="店铺" name="name">
|
|
|
|
+ <a-input v-model:value="formState.shopId">
|
|
|
|
+ </a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="配送平台" name="mobile">
|
|
|
|
+ <a-input v-model:value="formState.deliveryId">
|
|
|
|
+ </a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="订单状态" name="name">
|
|
|
|
+ <a-input v-model:value="formState.status">
|
|
|
|
+ </a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="订单号" name="mobile">
|
|
|
|
+ <a-input v-model:value="formState.searchKey">
|
|
|
|
+ </a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="日期" name="mobile">
|
|
|
|
+ <a-range-picker v-model:value="time" format="YYYY/MM/DD" />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item>
|
|
|
|
+ <a-button class="ml-20px" type="primary" @click="getOrderList">查 询</a-button>
|
|
|
|
+ <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">
|
|
|
|
+ <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'">
|
|
|
|
+ <a class="text-blue-500">详情</a>
|
|
|
|
+ </template>
|
|
|
|
+ </template>
|
|
|
|
+ <template #expandedRowRender="{ record }">
|
|
|
|
+ <div>
|
|
|
|
+ <div>
|
|
|
|
+ <div class="text-16px text-[#333333] leading-19px">
|
|
|
|
+ 收发信息
|
|
|
|
+ </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>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </a-table>
|
|
|
|
+
|
|
|
|
+</template>
|
|
|
|
+<style lang='scss' scoped>
|
|
|
|
+.ant-form-inline :deep(.ant-form-item) {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+}
|
|
|
|
+</style>
|