gxwebsoft/mp-10584
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(shop): 更新订单搜索组件和标签页配置

Browse Source 
- 移除订单类型和付款状态下拉选择框
- 添加订单状态下拉选择框并配置相关选项
- 调整搜索区域布局和样式微调
- 重新排序标签页顺序将全部标签页移至首位
- 注释掉开发环境API地址配置
This commit is contained in:
赵忠林
2026-02-09 21:44:59 +08:00
parent 2e6004e2ad
commit e2f7bfb3c7
3 changed files with 200 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -1,5 +1,5 @@
VITE_APP_NAME=后台管理(开发环境) VITE_APP_NAME=后台管理(开发环境)
VITE_API_URL=http://127.0.0.1:9200/api #VITE_API_URL=http://127.0.0.1:9200/api
#VITE_SERVER_API_URL=http://127.0.0.1:8000/api #VITE_SERVER_API_URL=http://127.0.0.1:8000/api

394
src/views/shop/shopOrder/components/search.vue
View File

@@ -21,49 +21,49 @@
@search="reload" @search="reload"
@pressEnter="reload" @pressEnter="reload"
/> />
<!-- <a-select-->
<!-- v-model:value="where.type"-->
<!-- style="width: 150px"-->
<!-- placeholder="订单类型"-->
<!-- @change="search"-->
<!-- >-->
<!-- <a-select-option value="">全部</a-select-option>-->
<!-- <a-select-option :value="1">普通订单</a-select-option>-->
<!-- <a-select-option :value="2">秒杀订单</a-select-option>-->
<!-- <a-select-option :value="3">拼团订单</a-select-option>-->
<!-- </a-select>-->
<!-- <a-select-->
<!-- v-model:value="where.payStatus"-->
<!-- style="width: 150px"-->
<!-- placeholder="付款状态"-->
<!-- @change="search"-->
<!-- >-->
<!-- <a-select-option value="">全部</a-select-option>-->
<!-- <a-select-option :value="1">已付款</a-select-option>-->
<!-- <a-select-option :value="0">未付款</a-select-option>-->
<!-- </a-select>-->
<a-select <a-select
v-model:value="where.type" v-model:value="where.orderStatus"
style="width: 150px" style="width: 150px"
placeholder="订单类型" placeholder="订单状态"
@change="search" @change="search"
> >
<a-select-option value="">全部</a-select-option> <a-select-option value="">全部</a-select-option>
<a-select-option :value="1">普通订单</a-select-option> <a-select-option :value="1">已完成</a-select-option>
<a-select-option :value="2">秒杀订单</a-select-option> <!-- <a-select-option :value="0">未完成</a-select-option>-->
<a-select-option :value="3">拼团订单</a-select-option> <!-- <a-select-option :value="2">未使用</a-select-option>-->
<a-select-option :value="3">已取消</a-select-option>
<a-select-option :value="4">退款中</a-select-option>
<a-select-option :value="5">退款被拒</a-select-option>
<a-select-option :value="6">退款成功</a-select-option>
</a-select> </a-select>
<a-select <!-- <a-select-->
v-model:value="where.payStatus" <!-- :options="getPayType()"-->
style="width: 150px" <!-- v-model:value="where.payType"-->
placeholder="付款状态" <!-- style="width: 150px"-->
@change="search" <!-- placeholder="付款方式"-->
> <!-- @change="search"-->
<a-select-option value="">全部</a-select-option> <!-- />-->
<a-select-option :value="1">已付款</a-select-option>
<a-select-option :value="0">未付款</a-select-option>
</a-select>
<!-- <a-select-->
<!-- v-model:value="where.orderStatus"-->
<!-- style="width: 150px"-->
<!-- placeholder="订单状态"-->
<!-- @change="search"-->
<!-- >-->
<!-- <a-select-option value="">全部</a-select-option>-->
<!-- <a-select-option :value="1">已完成</a-select-option>-->
<!-- <a-select-option :value="0">未完成</a-select-option>-->
<!-- <a-select-option :value="2">未使用</a-select-option>-->
<!-- <a-select-option :value="3">已取消</a-select-option>-->
<!-- <a-select-option :value="4">退款中</a-select-option>-->
<!-- <a-select-option :value="5">退款被拒</a-select-option>-->
<!-- <a-select-option :value="6">退款成功</a-select-option>-->
<!-- </a-select>-->
<a-select
:options="getPayType()"
v-model:value="where.payType"
style="width: 150px"
placeholder="付款方式"
@change="search"
/>
<a-range-picker <a-range-picker
v-model:value="dateRange" v-model:value="dateRange"
@@ -80,9 +80,9 @@
<template #addonBefore> <template #addonBefore>
<a-select v-model:value="type" style="width: 88px" @change="onType"> <a-select v-model:value="type" style="width: 88px" @change="onType">
<a-select-option value="">不限</a-select-option> <a-select-option value="">不限</a-select-option>
<a-select-option value="userId"> 用户ID </a-select-option> <a-select-option value="userId"> 用户ID</a-select-option>
<a-select-option value="phone"> 手机号 </a-select-option> <a-select-option value="phone"> 手机号</a-select-option>
<a-select-option value="nickname"> 昵称 </a-select-option> <a-select-option value="nickname"> 昵称</a-select-option>
</a-select> </a-select>
</template> </template>
</a-input-search> </a-input-search>
@@ -92,174 +92,176 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from 'vue'; import {ref, watch} from 'vue';
import { utils, writeFile } from 'xlsx'; import {utils, writeFile} from 'xlsx';
import { message } from 'ant-design-vue'; import {message} from 'ant-design-vue';
import useSearch from '@/utils/use-search'; import useSearch from '@/utils/use-search';
import { ShopOrder, ShopOrderParam } from '@/api/shop/shopOrder/model'; import {ShopOrder, ShopOrderParam} from '@/api/shop/shopOrder/model';
import { listShopOrder } from '@/api/shop/shopOrder'; import {listShopOrder} from '@/api/shop/shopOrder';
import { getPayType } from '@/utils/shop'; import {getPayType} from '@/utils/shop';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
// 选中的订单 // 选中的订单
selection?: ShopOrder[]; selection?: ShopOrder[];
}>(), }>(),
{} {}
); );
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'search', where?: ShopOrderParam): void; (e: 'search', where?: ShopOrderParam): void;
(e: 'add'): void; (e: 'add'): void;
(e: 'remove'): void; (e: 'remove'): void;
(e: 'batchMove'): void; (e: 'batchMove'): void;
}>(); }>();
// 表单数据 // 表单数据
const { where, resetFields } = useSearch<ShopOrderParam>({ const {where, resetFields} = useSearch<ShopOrderParam>({
keywords: '', keywords: '',
orderId: undefined, orderId: undefined,
orderNo: undefined, orderNo: undefined,
createTimeStart: undefined, createTimeStart: undefined,
createTimeEnd: undefined, createTimeEnd: undefined,
userId: undefined, userId: undefined,
payUserId: undefined, payUserId: undefined,
nickname: undefined, nickname: undefined,
phone: undefined, phone: undefined,
payStatus: undefined, payStatus: undefined,
orderStatus: undefined, orderStatus: undefined,
payType: undefined payType: undefined
});
const reload = () => {
emit('search', {
...where,
keywords: type.value == '' ? where.keywords : undefined
}); });
};
const reload = () => { // 批量删除
emit('search', { // const removeBatch = () => {
...where, // emit('remove');
keywords: type.value == '' ? where.keywords : undefined // };
});
};
// 批量删除 const onType = () => {
// const removeBatch = () => { resetFields();
// emit('remove'); };
// };
const onType = () => { // 获取搜索框placeholder
resetFields(); const getSearchPlaceholder = () => {
}; switch (type.value) {
case 'userId':
where.userId = Number(where.keywords);
return '请输入用户ID';
case 'phone':
where.phone = where.keywords;
return '请输入手机号';
case 'nickname':
where.nickname = where.keywords;
return '请输入用户昵称';
default:
return '请输入搜索内容';
}
};
// 获取搜索框placeholder /* 搜索 */
const getSearchPlaceholder = () => { const search = () => {
switch (type.value) { const [d1, d2] = dateRange.value ?? [];
case 'userId': xlsFileName.value = `${d1}至${d2}`;
where.userId = Number(where.keywords); where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
return '请输入用户ID'; where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
case 'phone': emit('search', {
where.phone = where.keywords; ...where
return '请输入手机号'; });
case 'nickname': };
where.nickname = where.keywords;
return '请输入用户昵称';
default:
return '请输入搜索内容';
}
};
/* 搜索 */ /* 重置 */
const search = () => { const reset = () => {
const [d1, d2] = dateRange.value ?? []; resetFields();
xlsFileName.value = `${d1}至${d2}`; search();
where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined; };
where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
emit('search', {
...where
});
};
/* 重置 */ const dateRange = ref<[string, string]>(['', '']);
const reset = () => { // 变量
resetFields(); const loading = ref(false);
search(); const orders = ref<ShopOrder[]>([]);
}; const xlsFileName = ref<string>();
const type = ref('');
const dateRange = ref<[string, string]>(['', '']); // 导出
// 变量 const handleExport = async () => {
const loading = ref(false); loading.value = true;
const orders = ref<ShopOrder[]>([]); const array: (string | number)[][] = [
const xlsFileName = ref<string>(); [
const type = ref(''); '订单编号',
'订单标题',
'买家姓名',
'手机号码',
'实付金额(元)',
'支付方式',
'付款时间',
'下单时间'
]
];
// 导出 await listShopOrder(where)
const handleExport = async () => { .then((list) => {
loading.value = true; orders.value = list;
const array: (string | number)[][] = [ list?.forEach((d: ShopOrder) => {
[ array.push([
'订单编号', `${d.orderNo}`,
'订单标题', `${d.comments}`,
'买家姓名', `${d.realName}`,
'手机号码', `${d.phone}`,
'实付金额(元)', `${d.payPrice}`,
'支付方式', `${getPayType(d.payType)}`,
'付款时间', `${d.payTime || ''}`,
'下单时间' `${d.createTime}`
] ]);
]; });
const sheetName = `订单数据`;
await listShopOrder(where) const workbook = {
.then((list) => { SheetNames: [sheetName],
orders.value = list; Sheets: {}
list?.forEach((d: ShopOrder) => { };
array.push([ const sheet = utils.aoa_to_sheet(array);
`${d.orderNo}`, workbook.Sheets[sheetName] = sheet;
`${d.comments}`, // 设置列宽
`${d.realName}`, sheet['!cols'] = [
`${d.phone}`, {wch: 10},
`${d.payPrice}`, {wch: 40},
`${getPayType(d.payType)}`, {wch: 20},
`${d.payTime || ''}`, {wch: 20},
`${d.createTime}` {wch: 60},
]); {wch: 15},
}); {wch: 10},
const sheetName = `订单数据`; {wch: 10},
const workbook = { {wch: 20},
SheetNames: [sheetName], {wch: 10},
Sheets: {} {wch: 20}
}; ];
const sheet = utils.aoa_to_sheet(array); message.loading('正在导出...');
workbook.Sheets[sheetName] = sheet; setTimeout(() => {
// 设置列宽 writeFile(
sheet['!cols'] = [ workbook,
{ wch: 10 }, `${
{ wch: 40 }, where.createTimeEnd ? xlsFileName.value + '_' : ''
{ wch: 20 }, }${sheetName}.xlsx`
{ wch: 20 }, );
{ wch: 60 },
{ wch: 15 },
{ wch: 10 },
{ wch: 10 },
{ wch: 20 },
{ wch: 10 },
{ wch: 20 }
];
message.loading('正在导出...');
setTimeout(() => {
writeFile(
workbook,
`${
where.createTimeEnd ? xlsFileName.value + '_' : ''
}${sheetName}.xlsx`
);
loading.value = false;
}, 1000);
})
.catch((msg) => {
message.error(msg);
loading.value = false; loading.value = false;
}) }, 1000);
.finally(() => {}); })
}; .catch((msg) => {
message.error(msg);
loading.value = false;
})
.finally(() => {
});
};
watch( watch(
() => props.selection, () => props.selection,
() => {} () => {
); }
);
</script> </script>

2
src/views/shop/shopOrder/index.vue
View File

@@ -11,13 +11,13 @@
</a-card> </a-card>
<a-card :bordered="false" :body-style="{ padding: '16px' }"> <a-card :bordered="false" :body-style="{ padding: '16px' }">
<a-tabs type="card" v-model:activeKey="activeKey" @change="onTabs"> <a-tabs type="card" v-model:activeKey="activeKey" @change="onTabs">
<a-tab-pane key="all" tab="全部" />
<a-tab-pane key="undelivered" tab="待发货" /> <a-tab-pane key="undelivered" tab="待发货" />
<a-tab-pane key="unreceived" tab="待收货" /> <a-tab-pane key="unreceived" tab="待收货" />
<a-tab-pane key="completed" tab="已完成" /> <a-tab-pane key="completed" tab="已完成" />
<!-- <a-tab-pane key="unpaid" tab="待付款" />--> <!-- <a-tab-pane key="unpaid" tab="待付款" />-->
<a-tab-pane key="refunded" tab="退货/售后" /> <a-tab-pane key="refunded" tab="退货/售后" />
<a-tab-pane key="cancelled" tab="已关闭" /> <a-tab-pane key="cancelled" tab="已关闭" />
<a-tab-pane key="all" tab="全部" />
</a-tabs> </a-tabs>
<ele-pro-table <ele-pro-table
ref="tableRef" ref="tableRef"