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

192
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,31 +92,31 @@
</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,
@@ -129,26 +129,26 @@
payStatus: undefined, payStatus: undefined,
orderStatus: undefined, orderStatus: undefined,
payType: undefined payType: undefined
}); });
const reload = () => { const reload = () => {
emit('search', { emit('search', {
...where, ...where,
keywords: type.value == '' ? where.keywords : undefined keywords: type.value == '' ? where.keywords : undefined
}); });
}; };
// 批量删除 // 批量删除
// const removeBatch = () => { // const removeBatch = () => {
// emit('remove'); // emit('remove');
// }; // };
const onType = () => { const onType = () => {
resetFields(); resetFields();
}; };
// 获取搜索框placeholder // 获取搜索框placeholder
const getSearchPlaceholder = () => { const getSearchPlaceholder = () => {
switch (type.value) { switch (type.value) {
case 'userId': case 'userId':
where.userId = Number(where.keywords); where.userId = Number(where.keywords);
@@ -162,10 +162,10 @@
default: default:
return '请输入搜索内容'; return '请输入搜索内容';
} }
}; };
/* 搜索 */ /* 搜索 */
const search = () => { const search = () => {
const [d1, d2] = dateRange.value ?? []; const [d1, d2] = dateRange.value ?? [];
xlsFileName.value = `${d1}至${d2}`; xlsFileName.value = `${d1}至${d2}`;
where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined; where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
@@ -173,23 +173,23 @@
emit('search', { emit('search', {
...where ...where
}); });
}; };
/* 重置 */ /* 重置 */
const reset = () => { const reset = () => {
resetFields(); resetFields();
search(); search();
}; };
const dateRange = ref<[string, string]>(['', '']); const dateRange = ref<[string, string]>(['', '']);
// 变量 // 变量
const loading = ref(false); const loading = ref(false);
const orders = ref<ShopOrder[]>([]); const orders = ref<ShopOrder[]>([]);
const xlsFileName = ref<string>(); const xlsFileName = ref<string>();
const type = ref(''); const type = ref('');
// 导出 // 导出
const handleExport = async () => { const handleExport = async () => {
loading.value = true; loading.value = true;
const array: (string | number)[][] = [ const array: (string | number)[][] = [
[ [
@@ -228,17 +228,17 @@
workbook.Sheets[sheetName] = sheet; workbook.Sheets[sheetName] = sheet;
// 设置列宽 // 设置列宽
sheet['!cols'] = [ sheet['!cols'] = [
{ wch: 10 }, {wch: 10},
{ wch: 40 }, {wch: 40},
{ wch: 20 }, {wch: 20},
{ wch: 20 }, {wch: 20},
{ wch: 60 }, {wch: 60},
{ wch: 15 }, {wch: 15},
{ wch: 10 }, {wch: 10},
{ wch: 10 }, {wch: 10},
{ wch: 20 }, {wch: 20},
{ wch: 10 }, {wch: 10},
{ wch: 20 } {wch: 20}
]; ];
message.loading('正在导出...'); message.loading('正在导出...');
setTimeout(() => { setTimeout(() => {
@@ -255,11 +255,13 @@
message.error(msg); message.error(msg);
loading.value = false; loading.value = false;
}) })
.finally(() => {}); .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"