root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code review：订单列表、订单详情

Browse Source 
(cherry picked from commit cfbc2ed74c)
This commit is contained in:
YunaiV 2023-08-23 00:43:40 +08:00 committed by shizhong
parent 6556feed21
commit 46ab58ddf0
11 changed files with 140 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/utils/dict.ts
View File

@ -90,6 +90,7 @@ export enum DICT_TYPE {
USER_TYPE = 'user_type',
COMMON_STATUS = 'common_status',
SYSTEM_TENANT_PACKAGE_ID = 'system_tenant_package_id',
TERMINAL = 'terminal', // 终端
// ========== SYSTEM 模块 ==========
SYSTEM_USER_SEX = 'system_user_sex',
@ -131,7 +132,7 @@ export enum DICT_TYPE {
BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
// ========== PAY 模块 ==========
PAY_CHANNEL_CODE_TYPE = 'pay_channel_code_type', // 支付渠道编码类型
PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
@ -156,7 +157,7 @@ export enum DICT_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', // 终端
TRADE_DELIVERY_TYPE = 'trade_delivery_type', // 配送方式
// ========== MALL - 营销模块 ==========
PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
@ -165,8 +166,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', // 营销的条件类型枚举
// ========== MALL - 物流模块 ==========
DELIVERY_TYPE = 'delivery_type' // 配送方式
PROMOTION_CONDITION_TYPE = 'promotion_condition_type' // 营销的条件类型枚举
}

5
src/views/mall/trade/order/components/DeliveryOrderForm.vue
View File

@ -33,6 +33,7 @@
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
import * as TradeOrderApi from '@/api/mall/trade/order'
// TODO @puhui999：是不是名字叫 OrderDeliveryForm 保持统一
defineOptions({ name: 'DeliveryOrderForm' })
const { t } = useI18n() // 国际化
@ -40,7 +41,7 @@ const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const radio = ref('1')
const radio = ref('1') // TODO @puhui999：尽量不用 radio 这种命名，无业务含义。这里的话，可以考虑用 expressType，如果值是 express，则是快递；none 则是无；未来做同城配送，就比较容易拓展啦；
const formData = ref<TradeOrderApi.DeliveryVO>({
id: 0, // 订单编号
logisticsId: null, // 物流公司编号
@ -48,6 +49,7 @@ const formData = ref<TradeOrderApi.DeliveryVO>({
})
const formRef = ref() // 表单 Ref
// TODO @puhui999：每次点击发货的时候，是不是可以把之前的信息带过来哈。
/** 打开弹窗 */
const open = async (orderId: number) => {
resetForm()
@ -65,6 +67,7 @@ const submitForm = async () => {
try {
const data = unref(formData)
if (radio.value === '2') {
// 无需发货的情况
data.logisticsId = 0
data.logisticsNo = ''
}

2
src/views/mall/trade/order/components/OrderAdjustAddressForm.vue
View File

@ -7,6 +7,7 @@
<el-form-item label="收件人手机">
<el-input v-model="formData.receiverMobile" />
</el-form-item>
<!-- TODO @puhui999：应该是个地区下拉框，可以看下 UserForm 所在地 -->
<el-form-item label="收件人地区编号">
<el-input v-model="formData.receiverAreaId" />
</el-form-item>
@ -24,6 +25,7 @@
import * as TradeOrderApi from '@/api/mall/trade/order'
import { copyValueToTarget } from '@/utils'
// TODO @puhui999：OrderAdjustAddressForm 改成 OrderUpdateAddressForm 更新哈，保持统一；
defineOptions({ name: 'OrderAdjustAddressForm' })
const { t } = useI18n() // 国际化

1
src/views/mall/trade/order/components/OrderAdjustPriceForm.vue
View File

@ -23,6 +23,7 @@ import * as TradeOrderApi from '@/api/mall/trade/order'
import { convertToInteger, formatToFraction } from '@/utils'
import { cloneDeep } from 'lodash-es'
// TODO @puhui999：OrderAdjustPriceForm 改成 OrderUpdatePriceForm 更新哈，保持统一；
defineOptions({ name: 'OrderAdjustPriceForm' })
const { t } = useI18n() // 国际化

22
src/views/mall/trade/order/components/OrderDetailForm.vue
View File

@ -4,7 +4,7 @@
<el-descriptions title="订单信息">
<el-descriptions-item label="订单号: ">{{ orderInfo.no }}</el-descriptions-item>
<el-descriptions-item label="配送方式: ">
<dict-tag :type="DICT_TYPE.DELIVERY_TYPE" :value="orderInfo.deliveryType" />
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="orderInfo.deliveryType" />
</el-descriptions-item>
<!-- TODO 营销活动待实现 -->
<el-descriptions-item label="营销活动: ">秒杀活动</el-descriptions-item>
@ -20,7 +20,7 @@
<el-descriptions-item label="商家备注: ">{{ orderInfo.remark }}</el-descriptions-item>
<el-descriptions-item label="支付单号: ">{{ orderInfo.payOrderId }}</el-descriptions-item>
<el-descriptions-item label="付款方式: ">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE_TYPE" :value="orderInfo.payChannelCode" />
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="orderInfo.payChannelCode" />
</el-descriptions-item>
<!-- <el-descriptions-item label="买家: ">{{ orderInfo.user.nickname }}</el-descriptions-item> -->
<!-- TODO 芋艿：待实现：跳转会员 -->
@ -41,14 +41,10 @@
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="orderInfo.status" />
</el-descriptions-item>
<el-descriptions-item label-class-name="no-colon">
<el-button size="small" type="primary" @click="openForm('adjustPrice')">调整价格</el-button>
<el-button size="small" type="primary" @click="openForm('remark')">备注</el-button>
<el-button size="small" type="primary" @click="openForm('delivery')">发货</el-button>
<el-button size="small" type="primary" @click="openForm('adjustAddress')">
修改地址
</el-button>
<!-- TODO 后台商家也需要收货功能吗？ -->
<el-button size="small" type="primary">确认收货</el-button>
<el-button type="primary" @click="openForm('adjustPrice')">调整价格</el-button>
<el-button type="primary" @click="openForm('remark')">备注</el-button>
<el-button type="primary" @click="openForm('delivery')">发货</el-button>
<el-button type="primary" @click="openForm('adjustAddress')">修改地址</el-button>
</el-descriptions-item>
<el-descriptions-item>
<template #label><span style="color: red">提醒: </span></template>
@ -201,6 +197,8 @@
</el-descriptions>
</div>
</ContentWrap>
<!-- 各种操作的弹窗 -->
<DeliveryOrderForm ref="deliveryFormRef" @success="getDetail" />
<OrderRemarksForm ref="remarksFormRef" @success="getDetail" />
<OrderAdjustAddressForm ref="adjustAddressFormRef" @success="getDetail" />
@ -215,10 +213,12 @@ import DeliveryOrderForm from '@/views/mall/trade/order/components/DeliveryOrder
import OrderAdjustAddressForm from '@/views/mall/trade/order/components/OrderAdjustAddressForm.vue'
import OrderAdjustPriceForm from '@/views/mall/trade/order/components/OrderAdjustPriceForm.vue'
// TODO @puhui999：TradeOrderDetailForm 可以挪到 order/detail/index.vue 中，它是一个 vue 界面哈。
defineOptions({ name: 'TradeOrderDetailForm' })
const message = useMessage() // 消息弹窗
const { params } = useRoute() // 查询参数
// TODO @puhui999：orderInfo 应该不用把属性弄出来也；
const orderInfo = ref<TradeOrderApi.OrderVO>({
no: '',
createTime: null,
@ -263,6 +263,7 @@ const orderInfo = ref<TradeOrderApi.OrderVO>({
user: {}
})
// TODO @puhui999：这个改成直接读属性，不用按照这种写法；
const detailGroups = ref([
{
title: '物流信息',
@ -281,6 +282,7 @@ const detailGroups = ref([
}
])
// TODO @puhui999：从后台读数据哈。
const detailInfo = ref({
// 物流信息
expressInfo: {

1
src/views/mall/trade/order/components/OrderRemarksForm.vue
View File

@ -14,6 +14,7 @@
<script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order'
// TODO @puhui999：OrderRemarksForm 改成 OrderUpdateRemarkForm 更新哈，保持统一；
defineOptions({ name: 'OrderRemarksForm' })
const { t } = useI18n() // 国际化

149
src/views/mall/trade/order/index.vue
View File

@ -11,8 +11,8 @@
<el-form-item label="订单状态" prop="status">
<el-select v-model="queryParams.status" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)"
:key="dict.value as string"
v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
@ -26,8 +26,8 @@
placeholder="全部"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
:key="dict.value as string"
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
@ -47,8 +47,8 @@
<el-form-item label="订单来源" prop="terminal">
<el-select v-model="queryParams.terminal" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.TERMINAL)"
:key="dict.value as string"
v-for="dict in getIntDictOptions(DICT_TYPE.TERMINAL)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
@ -57,8 +57,8 @@
<el-form-item label="订单类型" prop="type">
<el-select v-model="queryParams.type" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.TRADE_ORDER_TYPE)"
:key="dict.value as string"
v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_ORDER_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
@ -68,7 +68,7 @@
<el-select v-model="queryParams.logisticsId" class="!w-280px" clearable placeholder="全部">
<el-option
v-for="item in deliveryExpressList"
:key="item.id as string"
:key="item.id"
:label="item.name"
:value="item.id"
/>
@ -84,13 +84,13 @@
>
<el-option
v-for="item in pickUpStoreList"
:key="item.id as string"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- TODO 考虑是否移除或重构-->
<!-- TODO 考虑是否移除或重构；这个还是需要的哈-->
<el-form-item label="聚合搜索">
<el-input
v-show="true"
@ -100,7 +100,7 @@
placeholder="请输入"
>
<template #prepend>
<el-select v-model="queryType.k" clearable placeholder="全部" style="width: 110px">
<el-select v-model="queryType.k" clearable placeholder="全部" class="!w-110px">
<el-option
v-for="dict in searchList"
:key="dict.value"
@ -125,6 +125,12 @@
</ContentWrap>
<!-- 列表 -->
<!-- TODO @puhui999：列表有可能尽量对齐 https://gitee.com/niushop_team/niushop_b2c_v5_stand/raw/master/image/back_end5.png 哇，主要感觉视觉上有点无法分辨一个订单项，是和哪个订单关联。
1、订单号、订单类型、订单来源、支付时间那一行，直接做到订单项的数据中
2、商品信息、商品原价那一行，应该是在最顶上一行，不用每个订单项都写一条
3、然后点击展开和收拢订单项，可以不做哈。
-->
<ContentWrap>
<el-table
v-loading="loading"
@ -157,6 +163,7 @@
</el-table-column>
<el-table-column label="商品原价*数量" prop="price" width="150">
<template #default="{ row }">
<!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
{{ formatToFraction(row.price) }} 元 * {{ row.count }}
</template>
</el-table-column>
@ -173,6 +180,7 @@
</el-table-column>
<el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
<template #default>
<!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
{{ formatToFraction(scope.row.payPrice) + '元' }}
</template>
</el-table-column>
@ -207,7 +215,7 @@
</el-table-column>
<el-table-column align="center" label="配送方式" width="120">
<template #default>
<dict-tag :type="DICT_TYPE.DELIVERY_TYPE" :value="scope.row.deliveryType" />
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="160">
@ -225,6 +233,7 @@
</el-button>
<template #dropdown>
<el-dropdown-menu>
<!-- TODO puhui999：可以判断下状态 + 物流类型，展示【发货】按钮 -->
<el-dropdown-item command="delivery">
<Icon icon="ep:takeaway-box" />
发货
@ -265,7 +274,7 @@
<template #default="{ row }">
<dict-tag
v-if="row.payChannelCode"
:type="DICT_TYPE.PAY_CHANNEL_CODE_TYPE"
:type="DICT_TYPE.PAY_CHANNEL_CODE"
:value="row.payChannelCode"
/>
</template>
@ -296,6 +305,8 @@
@pagination="getList"
/>
</ContentWrap>
<!-- 各种操作的弹窗 -->
<DeliveryOrderForm ref="deliveryOrderFormRef" @success="getList" />
<OrderRemarksForm ref="orderRemarksFormRef" @success="getList" />
</template>
@ -306,9 +317,11 @@ import DeliveryOrderForm from './components/DeliveryOrderForm.vue'
import OrderRemarksForm from './components/OrderRemarksForm.vue'
import { dateFormatter } from '@/utils/formatTime'
import * as TradeOrderApi from '@/api/mall/trade/order'
// @puhui999：通过 TradeOrderApi 去引用对应的 VO 就可以啦
import { OrderItemRespVO, OrderVO } from '@/api/mall/trade/order'
// @puhui999：使用 XXXApi 哈
import { getListAllSimple } from '@/api/mall/trade/delivery/pickUpStore'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { DICT_TYPE, getStrDictOptions, getIntDictOptions } from '@/utils/dict'
import { formatToFraction } from '@/utils'
import { createImageViewer } from '@/components/ImageViewer'
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
@ -318,53 +331,6 @@ const { currentRoute, push } = useRouter() // 路由跳转
const loading = ref(true) // 列表的加载中
const total = ref(2) // 列表的总页数
const list = ref<OrderVO[]>([]) // 列表的数据
const deliveryOrderFormRef = ref()
const orderRemarksFormRef = ref()
const openForm = (id: number) => {
push('/trade/order/detail/' + id)
}
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
createImageViewer({
urlList: [imgUrl]
})
}
interface SpanMethodProps {
row: OrderItemRespVO
column: TableColumnCtx<OrderItemRespVO>
rowIndex: number
columnIndex: number
}
const spanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
const colIndex = [4, 5, 6, 7]
// 处理列
if (colIndex.includes(columnIndex)) {
// 处理被合并的行
if (rowIndex !== 0) {
return {
rowspan: 0,
colspan: 0
}
}
return {
rowspan: 2,
colspan: 1
}
}
}
/** 操作分发 */
const handleCommand = (command: string, row: OrderVO) => {
switch (command) {
case 'orderRemarks':
orderRemarksFormRef.value?.open(row)
break
case 'delivery':
deliveryOrderFormRef.value?.open(row.id)
break
}
}
const queryFormRef = ref<FormInstance>() // 搜索的表单
// 表单搜索
const queryParams = reactive({
@ -387,11 +353,12 @@ const queryParams = reactive({
logisticsId: null,
all: ''
})
const queryType = reactive({ k: '', v: '' }) // 订单搜索类型kv
/*
/**
* 订单聚合搜索
* 商品名称 商品件数 全部 需要后端支持TODO
* 商品名称、商品件数、全部
*
* 需要后端支持 TODO
*/
const searchList = ref([
{ value: 'no', label: '订单号' },
@ -399,6 +366,31 @@ const searchList = ref([
{ value: 'userNickname', label: '用户昵称' },
{ value: 'userMobile', label: '用户电话' }
])
interface SpanMethodProps {
row: OrderItemRespVO
column: TableColumnCtx<OrderItemRespVO>
rowIndex: number
columnIndex: number
}
const spanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
const colIndex = [4, 5, 6, 7]
// 处理列
if (colIndex.includes(columnIndex)) {
// 处理被合并的行
if (rowIndex !== 0) {
return {
rowspan: 0,
colspan: 0
}
}
return {
rowspan: 2,
colspan: 1
}
}
}
/** 查询列表 */
const getList = async () => {
loading.value = true
@ -423,6 +415,33 @@ const resetQuery = () => {
handleQuery()
}
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
createImageViewer({
urlList: [imgUrl]
})
}
/** 查看商品详情 */
const openForm = (id: number) => {
// TODO @puhui999：这里最好用 name 来跳转，因为 url 可能会改
push('/trade/order/detail/' + id)
}
/** 操作分发 */
const deliveryOrderFormRef = ref()
const orderRemarksFormRef = ref()
const handleCommand = (command: string, row: OrderVO) => {
switch (command) {
case 'orderRemarks': // TODO @puhui999：orderRemarks 是不是改成 remark 会好点，保持统一
orderRemarksFormRef.value?.open(row)
break
case 'delivery':
deliveryOrderFormRef.value?.open(row.id)
break
}
}
// 监听路由变化更新列表，解决商品保存后，列表不刷新的问题。
watch(
() => currentRoute.value,

26
src/views/member/user/UserForm.vue
View File

@ -60,6 +60,22 @@
<el-form-item label="用户标签" prop="tagIds">
<MemberTagSelect v-model="formData.tagIds" show-add />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="用户等级" prop="levelId">
<MemberLevelSelect v-model="formData.levelId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="修改原因"
prop="levelReason"
v-if="formData.levelId !== originLevelId"
>
<el-input type="text" v-model="formData.levelReason" placeholder="请输入修改原因" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="用户分组" prop="groupId">
<MemberGroupSelect v-model="formData.groupId" />
</el-form-item>
@ -79,6 +95,7 @@ import * as UserApi from '@/api/member/user'
import * as AreaApi from '@/api/system/area'
import { defaultProps } from '@/utils/tree'
import MemberTagSelect from '@/views/member/tag/components/MemberTagSelect.vue'
import MemberLevelSelect from '@/views/member/level/components/MemberLevelSelect.vue'
import MemberGroupSelect from '@/views/member/group/components/MemberGroupSelect.vue'
const { t } = useI18n() // 国际化
@ -101,14 +118,18 @@ const formData = ref({
birthday: undefined,
mark: undefined,
tagIds: [],
levelId: undefined,
levelReason: undefined,
groupId: undefined
})
const formRules = reactive({
mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
levelReason: [{ required: true, message: '修改原因不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const areaList = ref([]) // 地区列表
const originLevelId = ref() // 修改前的会员等级
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
@ -121,6 +142,7 @@ const open = async (type: string, id?: number) => {
formLoading.value = true
try {
formData.value = await UserApi.getUser(id)
originLevelId.value = formData.value.levelId
} finally {
formLoading.value = false
}
@ -172,6 +194,8 @@ const resetForm = () => {
birthday: undefined,
mark: undefined,
tagIds: [],
levelId: undefined,
levelReason: undefined,
groupId: undefined
}
formRef.value?.resetFields()

2
src/views/pay/order/index.vue
View File

@ -29,7 +29,7 @@
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"