Skip to content

phsl / admin

Go to a project
Commit e3f250ff by YunaiV
Options

code review：订单列表

parent 867c47de
Showing with 91 additions and 90 deletions
src/api/mall/trade/order/index.ts
import request from '@/config/axios'
// 获得交易订单分页
// TODO @xiaobai：改成 getOrderPage
export const getOrderList = (params: PageParam) => {
return request.get({ url: '/trade/order/page', params })
}
......
src/api/mall/trade/order/type/orderType.ts
// TODO @xiaobai：这个放到 order/index.ts 里哈
// TODO @xiaobai：注释放到变量后面，这样简洁一点
// TODO @xiaobai：这个改成 TradeOrderRespVO
export interface TradeOrderPageItemRespVO {
// 订单编号
id: number
......@@ -85,6 +88,7 @@ export interface TradeOrderPageItemRespVO {
items: TradeOrderItemBaseVO[]
}
// TODO @xiaobai：这个改成 TradeOrderItemRespVO
/**
* 交易订单项 Base VO，提供给添加、修改、详细的子 VO 使用
* 如果子 VO 存在差异的字段，请不要添加到这里，影响 Swagger 文档生成
......
src/utils/dict.ts
......@@ -156,6 +156,13 @@ export enum DICT_TYPE {
// ========== MALL - 交易模块 ==========
EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
TRADE_AFTER_SALE_STATUS = 'trade_after_sale_status', // 售后 - 状态
TRADE_AFTER_SALE_WAY = 'trade_after_sale_way', // 售后 - 方式
TRADE_AFTER_SALE_TYPE = 'trade_after_sale_type', // 售后 - 类型
TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
TERMINAL = 'terminal', // 终端
// ========== MALL - 营销模块 ==========
PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
......@@ -164,16 +171,5 @@ export enum DICT_TYPE {
PROMOTION_COUPON_STATUS = 'promotion_coupon_status', // 优惠劵的状态
PROMOTION_COUPON_TAKE_TYPE = 'promotion_coupon_take_type', // 优惠劵的领取方式
PROMOTION_ACTIVITY_STATUS = 'promotion_activity_status', // 优惠活动的状态
PROMOTION_CONDITION_TYPE = 'promotion_condition_type', // 营销的条件类型枚举
//===add by 20230530====
// ========== MALL - ORDER 模块 ==========
TRADE_AFTER_SALE_STATUS = 'trade_after_sale_status', // 售后 - 状态
TRADE_AFTER_SALE_WAY = 'trade_after_sale_way', // 售后 - 方式
TRADE_AFTER_SALE_TYPE = 'trade_after_sale_type', // 售后 - 类型
TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
TERMINAL = 'terminal'
PROMOTION_CONDITION_TYPE = 'promotion_condition_type' // 营销的条件类型枚举
}
src/views/mall/trade/order/index.vue
......@@ -64,9 +64,8 @@
/>
</el-select>
</el-form-item>
<el-form-item label="订单搜索" prop="searchValue">
<!-- 双item绑定2个变量用于reset时没法重置 -->
<!-- 双 item 绑定 2 个变量用于 reset 时没法重置 -->
<el-form-item class="!w-280px" prop="searchType">
<el-input
class="!w-280px"
......@@ -101,7 +100,7 @@
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<!-- v-hasPermi="['trade:order:export']"
<!-- v-hasPermi="['trade:order:export']" TODO 待开发
需要将选中的数据存入orderSelect.multipleSelection中
需要考虑全选时数据如何处理-->
<el-button type="success" plain @click="handleExport" :loading="exportLoading">
......@@ -110,9 +109,9 @@
</el-form-item>
</el-form>
</ContentWrap>
<!-- 表格 -->
<!-- 列表 -->
<ContentWrap>
<!-- 表单 -->
<el-table v-loading="loading" :data="list">
<el-table-column type="expand" fixed="left">
<template #default="scope">
......@@ -136,7 +135,6 @@
<template #header>
<el-dropdown icon="eq:search" @command="handleDropType">
<el-button link type="primary">全选({{ orderSelect.checkTotal }}) </el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="1">当前页</el-dropdown-item>
......@@ -162,7 +160,6 @@
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="订单来源" align="center" min-width="100">
<template #default="scope">
<dict-tag
......@@ -173,8 +170,8 @@
<span v-else>{{ scope.terminal }}</span>
</template>
</el-table-column>
<el-table-column label="用户信息(id)" align="center" min-width="100">
<el-table-column label="用户信息" align="center" min-width="100">
<!-- TODO xiaobai：展示昵称，跳转到用户详情 -->
<template #default="scope">
<el-button link type="primary" @click="goUserDetail(scope.row)">{{
scope.row.userId
......@@ -207,6 +204,7 @@
<div v-for="item in scope.row.items" :key="item">
<div>
<p>{{ item.spuName }}</p>
<!-- TODO @xiaobai：不用 parseFloat 操作，直接 / 100.0 -->
<p>{{
'￥ ' + parseFloat(item.payPrice / 100).toFixed(2) + '元 x ' + item.count
}}</p>
......@@ -215,7 +213,6 @@
</el-popover>
</template>
</el-table-column>
<el-table-column label="实际支付(元)" align="center" prop="payPrice" min-width="100">
<template #default="scope">
{{ '￥ ' + parseFloat(scope.row.payPrice / 100).toFixed(2) }}
......@@ -228,6 +225,7 @@
prop="payTime"
min-width="180"
/>
<!-- TODO @xiaobai：增加一个 createTime 时间的展示 -->
<el-table-column label="支付类型" align="center" min-width="100" prop="payChannelCode">
<template #default="scope">
<dict-tag
......@@ -239,8 +237,9 @@
</el-table-column>
<el-table-column label="订单状态" align="center" prop="status" min-width="100">
<template #default="scope">
<!-- TODO @xiaobai：不用做判断，直接 dict-tag 渲染就好列 -->
<dict-tag
v-if="scope.row.status == ''"
v-if="scope.row.status === ''"
:type="DICT_TYPE.TRADE_ORDER_STATUS"
:value="scope.row.status"
/>
......@@ -249,17 +248,16 @@
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" min-width="150">
<template #default="scope">
<el-button v-if="scope.row.status == '0'" link type="primary" @click="sendXX(scope.row)"
>待支付</el-button
>
<el-button v-if="scope.row.status == '10'" link type="primary" @click="sendXX(scope.row)"
>发货</el-button
>
<el-button v-if="scope.row.status === 0" link type="primary" @click="sendXX(scope.row)">
待支付
</el-button>
<el-button v-if="scope.row.status === 10" link type="primary" @click="sendXX(scope.row)">
发货
</el-button>
<el-button link type="primary" @click="showOrderDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
......@@ -279,7 +277,8 @@ 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'
const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由
interface CurrentType {
checkTotal: number //选中的数量
currentType: string //页面选中类型, 0-noPage无选中页面 1-currentPage 当前页面 2-allPage所有页面
......@@ -295,24 +294,17 @@ const orderSelect: CurrentType = reactive({
pageNoList: []
})
const message = useMessage()
const { push } = useRouter()
const loading = ref(false) // 列表的加载中
const total = ref(0) // 总记录数
const list = ref<any>([]) // 表数据
const queryFormRef = ref() //表单搜索
const queryParams = ref({
pageNo: 1, //首页
pageSize: 10, //页面大小
tabIndex: 0 //详情页面数据
pageNo: 1, // 首页
pageSize: 10, // 页面大小
tabIndex: 0 // 详情页面数据
})
const loading = ref(false)
const exportLoading = ref(false)
// 总记录数
const total = ref(0)
//表数据
const list = ref<any>([])
//订单搜索
const exportLoading = ref(false) // 导出按钮的加载中
// 订单搜索
const searchList = ref([
{
value: 'orderNo',
......@@ -323,19 +315,19 @@ const searchList = ref([
label: '用户UID'
},
{
value: 'userName',
value: 'userName', // TODO @xiaobai：userNickname
label: '用户姓名'
},
{
value: 'userTel',
value: 'userTel', // TODO @xiaobai：userMobile 改成
label: '用户电话'
},
{
value: 'itemName',
value: 'itemName', // TODO @xiaobai：不用筛选
label: '商品名称'
},
{
value: 'itemCount',
value: 'itemCount', // TODO @xiaobai：件数不用筛选好列
label: '商品件数'
}
])
......@@ -344,6 +336,7 @@ const imgViewVisible = ref(false) // 商品图预览
const imageViewerList = ref<string[]>([]) // 商品图预览列表
// TODO @xiaobai：要不全选逻辑先不做？
/**当前页 所有页 暂不考虑数据本地化 会导致选中当前页 从后台重新拉取数据时出现数据不一致*/
const handleDropType = (command: string) => {
orderSelect.currentType = command
......@@ -408,24 +401,33 @@ const handcheckclick = (row: any) => {
orderSelect.checkTotal = orderSelect.checkTotal + 1
}
}
/**
* 导出数据
*/
const handleExport = async () => {
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
//TODO导出的数据是后台导出还是从前端中获取数据(全选时数据怎么打印?)
download.excel(orderSelect.multipleSelection as any, '订单信息.xls') //
} catch {
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 {
exportLoading.value = false
loading.value = false
}
//TODO
exportLoading.value = false
}
/** 搜索按钮操作 */
......@@ -436,6 +438,7 @@ const handleQuery = () => {
orderSelect.multipleSelection = []
orderSelect.pageNoList = []
orderSelect.selectAll = false
// queryParams.pageNo = 1 TODO @xiaobai：缺了个
getList()
}
......@@ -453,54 +456,51 @@ const resetQuery = () => {
handleQuery()
}
const getList = async () => {
loading.value = true
/**
* 导出数据
*/
const handleExport = async () => {
try {
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 //暂定为未选中状态, 实际情况需要考虑已选中状态,后期优化
}
}
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
//TODO导出的数据是后台导出还是从前端中获取数据(全选时数据怎么打印?)
download.excel(orderSelect.multipleSelection as any, '订单信息.xls') //
} catch {
} finally {
loading.value = false
exportLoading.value = false
}
//TODO
exportLoading.value = false
}
/**
* 跳转订单详情
*/
const showOrderDetail = (row: any) => {
console.log('TODO Order Detail: ' + row.id)
push({ name: 'TradeOrderDetail', query: { id: row.id } })
push({
name: 'TradeOrderDetail',
query: {
id: row.id
}
})
}
/**
* 跳转用户详情
* 跳转用户详情 TODO
*/
const goUserDetail = (row: any) => {
console.log('TODO User Detail: ' + row.userId)
}
/**
* 发货
* 发货 TODO
*/
const sendXX = (row: any) => {
console.log('TODO Send XX: ' + row.no)
}
// TOPDO @xiaobai：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/image-viewer.html 使用这个组件哈
/**
* 商品图预览
* @param imgUrl
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment