From 985d764f623e24402b1ba91562d2994b28d1aeec Mon Sep 17 00:00:00 2001 From: xiaobai <2511883673@qq.com> Date: Tue, 6 Jun 2023 01:08:38 +0800 Subject: [PATCH] 20230606 add trade-order and details --- src/api/mall/trade/order/index.ts | 11 +- src/router/modules/remaining.ts | 16 + src/views/mall/trade/order/index.vue | 233 ++++++++++-- .../trade/order/tradeOrderDetail-crmeb.vue | 141 +++++++ .../mall/trade/order/tradeOrderDetail.vue | 355 ++++++++++++++++++ 5 files changed, 717 insertions(+), 39 deletions(-) create mode 100644 src/views/mall/trade/order/tradeOrderDetail-crmeb.vue create mode 100644 src/views/mall/trade/order/tradeOrderDetail.vue diff --git a/src/api/mall/trade/order/index.ts b/src/api/mall/trade/order/index.ts index 22b8f205..5a401030 100644 --- a/src/api/mall/trade/order/index.ts +++ b/src/api/mall/trade/order/index.ts @@ -5,10 +5,7 @@ export const getOrderList = (params: PageParam) => { return request.get({ url: '/trade/order/page', params }) } -// // 获得交易订单详情 -// export function getOrderDetail(id) { -// return request({ -// url: '/trade/order/get-detail?id=' + id, -// method: 'get' -// }) -// } +// 获得交易订单详情 +export const getOrderDetail = (id: number) => { + return request.get({ url: '/trade/order/get-detail?id=' + id }) +} diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts index 4f5a16bd..6b7a2fd4 100644 --- a/src/router/modules/remaining.ts +++ b/src/router/modules/remaining.ts @@ -195,6 +195,22 @@ const remainingRouter: AppRouteRecordRaw[] = [ noTagsView: true } }, + { + path: '/trade/order', + component: Layout, + name: 'order', + meta: { + hidden: true + }, + children: [ + { + path: 'detail', + name: 'TradeOrderDetail', + component: () => import('@/views/mall/trade/order/tradeOrderDetail.vue'), + meta: { title: '订单详情', hidden: true } + } + ] + }, { path: '/403', component: () => import('@/views/Error/403.vue'), diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue index e5a1e28e..61b22856 100644 --- a/src/views/mall/trade/order/index.vue +++ b/src/views/mall/trade/order/index.vue @@ -45,7 +45,7 @@ /> - + - - - + + + + + + @@ -93,13 +101,19 @@ 重置 + + + 导出TODO + - + - + + + + + @@ -218,8 +249,13 @@ @@ -242,17 +278,38 @@ import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' import * as TradeOrderApi from '@/api/mall/trade/order' import { dateFormatter, formatDate } from '@/utils/formatTime' +import download from '@/utils/download' +// import TradeOrderDetail from './tradeOrderDetail.vue' +interface CurrentType { + checkTotal: number //选中的数量 + currentType: string //页面选中类型, 0-noPage无选中页面 1-currentPage 当前页面 2-allPage所有页面 + selectAll: boolean //全选标识 + multipleSelection: [] // 选中的数据 暂未记录,需考虑全选时数据应该如何处理 ,部分选中可以使用该数据,需要登记 + pageNoList: [] //当前页面选中的页号 如果再次选中当前页将取消本页面的选中数据 全选时 将所有的页面list 都放进去 再次全选时 全部清空 +} +const orderSelect: CurrentType = reactive({ + checkTotal: 0, + currentType: '0', + selectAll: false, + multipleSelection: [], + pageNoList: [] +}) +const message = useMessage() + +const { push } = useRouter() const queryFormRef = ref() //表单搜索 const queryParams = ref({ pageNo: 1, //首页 pageSize: 10, //页面大小 - searchType: '', - searchValue: '' + tabIndex: 0 //详情页面数据 }) + const loading = ref(false) +const exportLoading = ref(false) // 总记录数 const total = ref(0) + //表数据 const list = ref([]) //订单搜索 @@ -284,16 +341,115 @@ const searchList = ref([ ]) const imgViewVisible = ref(false) // 商品图预览 + const imageViewerList = ref([]) // 商品图预览列表 + +/**当前页 所有页 暂不考虑数据本地化 会导致选中当前页 从后台重新拉取数据时出现数据不一致*/ +const handleDropType = (command: string) => { + orderSelect.currentType = command + let i = 0 + if (command === '1') { + // pageNoList 当前页面选中的页号 如果再次选中当前页将取消本页面的选中数据 + //取消本页面记录 + var index = orderSelect.pageNoList.indexOf(queryParams.value.pageNo) + if (index > -1) { + for (i; i < list.value.length; i++) { + if (list.value[i]['itemSelect'] === true) { + list.value[i]['itemSelect'] = false + orderSelect.checkTotal = orderSelect.checkTotal - 1 + } + } + orderSelect.pageNoList.splice(index, 1) + } else { + for (i; i < list.value.length; i++) { + if (list.value[i]['itemSelect'] === false) { + list.value[i]['itemSelect'] = true + orderSelect.checkTotal = orderSelect.checkTotal + 1 + } + } + orderSelect.pageNoList.splice(0, 0, queryParams.value.pageNo) + } + } + if (command === '2') { + orderSelect.selectAll = !orderSelect.selectAll + //全选时 将所有的页面list 都放进去 再次全选时 全部清空 + if (orderSelect.selectAll) { + //打勾勾 + for (i; i < list.value.length; i++) { + list.value[i]['itemSelect'] = true + } + // 初始化页面数组 + const array1: [] = Array.from( + { length: total.value / queryParams.value.pageSize + 1 }, + (item, idx) => idx + 1 + ) + orderSelect.pageNoList = [] //清空原有的 + orderSelect.pageNoList = [].concat(array1) + orderSelect.checkTotal = total.value + } else { + //取消勾勾 + for (i; i < list.value.length; i++) { + list.value[i]['itemSelect'] = false + } + orderSelect.pageNoList = [] //清空 + orderSelect.checkTotal = 0 + } + } +} +/***复选框选中 */ +const handcheckclick = (row: any) => { + //选中增加1 + if (!row.itemSelect) { + // 取消 -1 + orderSelect.checkTotal = orderSelect.checkTotal - 1 + // + } else { + //选中 +1 + orderSelect.checkTotal = orderSelect.checkTotal + 1 + } +} +/** + * 导出数据 + */ + +const handleExport = async () => { + try { + // 导出的二次确认 + await message.exportConfirm() + // 发起导出 + exportLoading.value = true + //TODO导出的数据是后台导出还是从前端中获取数据(全选时数据怎么打印?) + download.excel(orderSelect.multipleSelection as any, '订单信息.xls') // + } catch { + } finally { + exportLoading.value = false + } + //TODO + exportLoading.value = false +} + /** 搜索按钮操作 */ const handleQuery = () => { + //选中状态初始化 + orderSelect.checkTotal = 0 + orderSelect.currentType = '0' + orderSelect.multipleSelection = [] + orderSelect.pageNoList = [] + orderSelect.selectAll = false + getList() } /** 重置按钮操作 */ const resetQuery = () => { + //选中状态初始化 + orderSelect.checkTotal = 0 + orderSelect.currentType = '0' + orderSelect.multipleSelection = [] + orderSelect.pageNoList = [] + orderSelect.selectAll = false + queryFormRef.value.resetFields() - console.log(queryParams) handleQuery() } @@ -303,6 +459,22 @@ const getList = async () => { const data = await TradeOrderApi.getOrderList(queryParams.value) list.value = data.list total.value = data.total + + let i = 0 + //给数组添加选中属性 itemSelect 默认为false 当前状态如果时全选 则新加载的页面都为选中状态 + if ( + orderSelect.currentType === '2' || //全选状态加载状态设置为选中 + orderSelect.pageNoList.indexOf(queryParams.value.pageNo) > -1 //已选择页面加载状态设置为默认选中，会存在选中当前页面后手动取消该页面部分数据，再重新加载该页面时设置为选中状态，但是没有增加选中的数量 + ) { + for (i; i < list.value.length; i++) { + list.value[i]['itemSelect'] = true + } + } else { + //还需要判断当前页面是否已经选中了? 而且还要出来选中的数据是否后来手动一行行取消了处理 + for (i; i < list.value.length; i++) { + list.value[i]['itemSelect'] = false //暂定为未选中状态, 实际情况需要考虑已选中状态,后期优化 + } + } } finally { loading.value = false } @@ -311,8 +483,9 @@ const getList = async () => { /** * 跳转订单详情 */ -const goOrderDetail = (row: any) => { - console.log('TODO Order Detail: ' + row.no) +const showOrderDetail = (row: any) => { + console.log('TODO Order Detail: ' + row.id) + push({ name: 'TradeOrderDetail', query: { id: row.id } }) } /** @@ -328,10 +501,6 @@ const sendXX = (row: any) => { console.log('TODO Send XX: ' + row.no) } -const handleSelectionChange = (val: list) => { - multipleSelection.value = val -} - /** * 商品图预览 * @param imgUrl diff --git a/src/views/mall/trade/order/tradeOrderDetail-crmeb.vue b/src/views/mall/trade/order/tradeOrderDetail-crmeb.vue new file mode 100644 index 00000000..ae4fe01c --- /dev/null +++ b/src/views/mall/trade/order/tradeOrderDetail-crmeb.vue @@ -0,0 +1,141 @@ + + + diff --git a/src/views/mall/trade/order/tradeOrderDetail.vue b/src/views/mall/trade/order/tradeOrderDetail.vue new file mode 100644 index 00000000..3e261550 --- /dev/null +++ b/src/views/mall/trade/order/tradeOrderDetail.vue @@ -0,0 +1,355 @@ + + +