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

2
src/api/mall/promotion/bargain/bargainActivity.ts
View File

@ -20,7 +20,7 @@ export interface BargainActivityVO {
successCount?: number // 砍价成功数量
}
// 砍价活动所需属性。 选择的商品和属性的时候使用方便使用活动的通用封装
// 砍价活动所需属性。选择的商品和属性的时候使用方便使用活动的通用封装
export interface BargainProductVO {
spuId: number
skuId: number

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' // 营销的条件类型枚举
}

6
src/views/mall/promotion/bargain/activity/BargainActivityForm.vue
View File

@ -83,17 +83,17 @@ const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.bargainFirstPrice',
rule: (arg) => arg > 0,
message: '商品砍价起始价格不能小于0 ！！！'
message: '商品砍价起始价格不能小于 0 ！！！'
},
{
name: 'productConfig.bargainPrice',
rule: (arg) => arg >= 0,
message: '商品砍价底价不能小于0 ！！！'
message: '商品砍价底价不能小于 0 ！！！'
},
{
name: 'productConfig.stock',
rule: (arg) => arg >= 1,
message: '商品活动库存不能小于1 ！！！'
message: '商品活动库存不能小于 1 ！！！'
}
]
const selectSpu = (spuId: number, skuIds: number[]) => {

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() // 国际化

153
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,7 +163,8 @@
</el-table-column>
<el-table-column label="商品原价*数量" prop="price" width="150">
<template #default="{ row }">
{{ formatToFraction(row.price) }}元 * {{ row.count }}
<!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
{{ formatToFraction(row.price) }} 元 * {{ row.count }}
</template>
</el-table-column>
<el-table-column label="合计" prop="payPrice" width="150">
@ -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,55 +331,8 @@ 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({
pageNo: 1, //首页
pageSize: 10, //页面大小
@ -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"