增加配送订单列表页面
This commit is contained in:
aaron
parent
e8935cc064
commit
78a3ab870d
@ -43,6 +43,16 @@
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
|
||||
<a-sub-menu key="order">
|
||||
<template #icon>
|
||||
<shopping-outlined />
|
||||
</template>
|
||||
<template #title>订单管理</template>
|
||||
<a-menu-item key="order-delivery">
|
||||
<router-link to="/order/delivery">配送订单</router-link>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
|
||||
<a-sub-menu key="merchant">
|
||||
<template #icon>
|
||||
<shop-outlined />
|
||||
@ -120,6 +130,7 @@ import {
|
||||
DashboardOutlined,
|
||||
ShopOutlined,
|
||||
SettingOutlined,
|
||||
ShoppingOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
@ -135,6 +146,7 @@ export default defineComponent({
|
||||
DashboardOutlined,
|
||||
ShopOutlined,
|
||||
SettingOutlined,
|
||||
ShoppingOutlined,
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
@ -156,12 +168,102 @@ export default defineComponent({
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
const menuItems = ref([
|
||||
{
|
||||
key: 'dashboard',
|
||||
icon: () => h(DashboardOutlined),
|
||||
title: '工作台',
|
||||
path: '/dashboard'
|
||||
},
|
||||
{
|
||||
key: 'user',
|
||||
icon: () => h(UserOutlined),
|
||||
title: '用户管理',
|
||||
children: [
|
||||
{
|
||||
key: 'user-list',
|
||||
title: '用户列表',
|
||||
path: '/user/list'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'community',
|
||||
icon: () => h(HomeOutlined),
|
||||
title: '小区管理',
|
||||
children: [
|
||||
{
|
||||
key: 'community-list',
|
||||
title: '小区列表',
|
||||
path: '/community/list'
|
||||
},
|
||||
{
|
||||
key: 'building-list',
|
||||
title: '楼栋列表',
|
||||
path: '/community/building'
|
||||
},
|
||||
{
|
||||
key: 'station-list',
|
||||
title: '驿站列表',
|
||||
path: '/community/station'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'order',
|
||||
icon: () => h(ShoppingOutlined),
|
||||
title: '订单管理',
|
||||
children: [
|
||||
{
|
||||
key: 'order-delivery',
|
||||
title: '配送订单',
|
||||
path: '/order/delivery'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'merchant',
|
||||
icon: () => h(ShopOutlined),
|
||||
title: '商家管理',
|
||||
children: [
|
||||
{
|
||||
key: 'merchant-list',
|
||||
title: '商家列表',
|
||||
path: '/merchant/list'
|
||||
},
|
||||
{
|
||||
key: 'merchant-categories',
|
||||
title: '商家分类',
|
||||
path: '/merchant/categories'
|
||||
},
|
||||
{
|
||||
key: 'merchant-products',
|
||||
title: '商品列表',
|
||||
path: '/merchant/products'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'system',
|
||||
icon: () => h(SettingOutlined),
|
||||
title: '系统管理',
|
||||
children: [
|
||||
{
|
||||
key: 'system-logs',
|
||||
title: '日志查询',
|
||||
path: '/system/logs'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
return {
|
||||
collapsed,
|
||||
selectedKeys,
|
||||
openKeys,
|
||||
userInfo,
|
||||
handleLogout
|
||||
handleLogout,
|
||||
menuItems
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -78,6 +78,17 @@ const routes = [
|
||||
meta: { title: '日志查询' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/order',
|
||||
component: BasicLayout,
|
||||
children: [
|
||||
{
|
||||
path: 'delivery',
|
||||
component: () => import('@/views/order/DeliveryList.vue'),
|
||||
meta: { title: '配送订单' }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
325
src/views/order/DeliveryList.vue
Normal file
325
src/views/order/DeliveryList.vue
Normal file
@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<page-container>
|
||||
<div class="delivery-list">
|
||||
<div class="table-header">
|
||||
<h1>配送订单列表</h1>
|
||||
</div>
|
||||
|
||||
<!-- 过滤区域 -->
|
||||
<div class="table-filter">
|
||||
<a-form layout="inline">
|
||||
<a-form-item label="订单号">
|
||||
<a-input
|
||||
v-model:value="filterForm.orderid"
|
||||
placeholder="请输入订单号"
|
||||
style="width: 200px"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="用户ID">
|
||||
<a-input
|
||||
v-model:value="filterForm.user_id"
|
||||
placeholder="请输入用户ID"
|
||||
style="width: 200px"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="订单状态">
|
||||
<a-select
|
||||
v-model:value="filterForm.status"
|
||||
style="width: 200px"
|
||||
placeholder="请选择状态"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<a-select-option value="CREATED">已创建</a-select-option>
|
||||
<a-select-option value="UNPAID">未支付</a-select-option>
|
||||
<a-select-option value="RECEIVED">已接单</a-select-option>
|
||||
<a-select-option value="DELIVERING">配送中</a-select-option>
|
||||
<a-select-option value="COMPLETED">已完成</a-select-option>
|
||||
<a-select-option value="CANCELLED">已取消</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 订单状态列 -->
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="getStatusColor(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<!-- 金额列 -->
|
||||
<template v-if="['original_amount', 'coupon_discount_amount', 'point_discount_amount', 'final_amount'].includes(column.key)">
|
||||
¥{{ record[column.dataIndex] }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PageContainer
|
||||
},
|
||||
setup() {
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
|
||||
const filterForm = ref({
|
||||
orderid: '',
|
||||
user_id: '',
|
||||
status: undefined
|
||||
})
|
||||
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`
|
||||
})
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '订单号',
|
||||
dataIndex: 'orderid',
|
||||
key: 'orderid',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '包裹数量',
|
||||
dataIndex: 'package_count',
|
||||
key: 'package_count',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
dataIndex: 'original_amount',
|
||||
key: 'original_amount',
|
||||
width: 120,
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '服务券抵扣',
|
||||
dataIndex: 'coupon_discount_amount',
|
||||
key: 'coupon_discount_amount',
|
||||
width: 120,
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '积分抵扣',
|
||||
dataIndex: 'point_discount_amount',
|
||||
key: 'point_discount_amount',
|
||||
width: 120,
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '最终金额',
|
||||
dataIndex: 'final_amount',
|
||||
key: 'final_amount',
|
||||
width: 120,
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '配送地址',
|
||||
key: 'address',
|
||||
width: 300,
|
||||
ellipsis: true,
|
||||
customRender: ({ record }) => {
|
||||
const { address } = record
|
||||
return `${address.name} ${address.community_name} ${address.address_detail}`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '下单时间',
|
||||
dataIndex: 'create_time',
|
||||
key: 'create_time',
|
||||
width: 180
|
||||
}
|
||||
]
|
||||
|
||||
// 获取订单列表
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
// 构建基础参数
|
||||
const params = {
|
||||
skip: (pagination.value.current - 1) * pagination.value.pageSize,
|
||||
limit: pagination.value.pageSize
|
||||
}
|
||||
|
||||
// 只在有值时添加筛选参数
|
||||
if (filterForm.value.orderid?.trim()) {
|
||||
params.orderid = filterForm.value.orderid.trim()
|
||||
}
|
||||
|
||||
if (filterForm.value.user_id?.trim()) {
|
||||
params.user_id = filterForm.value.user_id.trim()
|
||||
}
|
||||
|
||||
if (filterForm.value.status) {
|
||||
params.status = filterForm.value.status
|
||||
}
|
||||
|
||||
const res = await request.get('/api/order/admin/list', { params })
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.items
|
||||
pagination.value.total = res.data.total
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单列表失败:', error)
|
||||
message.error('获取订单列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'CREATED': '已创建',
|
||||
'UNPAID': '未支付',
|
||||
'RECEIVED': '已接单',
|
||||
'DELIVERING': '配送中',
|
||||
'COMPLETED': '已完成',
|
||||
'CANCELLED': '已取消'
|
||||
}
|
||||
return statusMap[status] || status
|
||||
}
|
||||
|
||||
// 获取状态标签颜色
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
'CREATED': 'blue',
|
||||
'UNPAID': 'orange',
|
||||
'RECEIVED': '#2db7f5',
|
||||
'DELIVERING': 'green',
|
||||
'COMPLETED': '#87d068',
|
||||
'CANCELLED': 'red'
|
||||
}
|
||||
return colorMap[status] || 'default'
|
||||
}
|
||||
|
||||
// 表格变化处理
|
||||
const handleTableChange = (pag) => {
|
||||
pagination.value.current = pag.current
|
||||
pagination.value.pageSize = pag.pageSize
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 过滤条件变化
|
||||
const handleFilterChange = () => {
|
||||
pagination.value.current = 1
|
||||
}
|
||||
|
||||
// 搜索按钮点击
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 重置按钮点击
|
||||
const handleReset = () => {
|
||||
filterForm.value = {
|
||||
orderid: '',
|
||||
user_id: '',
|
||||
status: undefined
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
|
||||
return {
|
||||
loading,
|
||||
columns,
|
||||
tableData,
|
||||
pagination,
|
||||
filterForm,
|
||||
handleTableChange,
|
||||
handleFilterChange,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
getStatusText,
|
||||
getStatusColor
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-filter {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-tag) {
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user