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 7db6c121bb)
This commit is contained in:
puhui999 2023-08-23 15:04:46 +08:00 committed by shizhong
parent 295d04e1f3
commit 9d9ccaa1b8
16 changed files with 184 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/mall/product/spu.ts
View File

@ -9,18 +9,19 @@ export interface Property {
export interface Sku {
id?: number // 商品 SKU 编号
name?: string // 商品 SKU 名称
spuId?: number // SPU 编号
properties?: Property[] // 属性数组
price?: number // 商品价格
marketPrice?: number // 市场价
costPrice?: number // 成本价
price?: number | string // 商品价格
marketPrice?: number | string // 市场价
costPrice?: number | string // 成本价
barCode?: string // 商品条码
picUrl?: string // 图片地址
stock?: number // 库存
weight?: number // 商品重量，单位：kg 千克
volume?: number // 商品体积，单位：m^3 平米
subCommissionFirstPrice?: number // 一级分销的佣金
subCommissionSecondPrice?: number // 二级分销的佣金
subCommissionFirstPrice?: number | string // 一级分销的佣金
subCommissionSecondPrice?: number | string // 二级分销的佣金
salesCount?: number // 商品销量
}

14
src/api/mall/trade/order/index.ts
View File

@ -102,20 +102,20 @@ export interface DeliveryVO {
// 订单发货
export const delivery = async (data: DeliveryVO) => {
return await request.post({ url: `/trade/order/delivery`, data })
return await request.put({ url: `/trade/order/delivery`, data })
}
// 订单备注
export const remark = async (data) => {
return await request.post({ url: `/trade/order/remark`, data })
export const updateRemark = async (data: any) => {
return await request.put({ url: `/trade/order/update-remark`, data })
}
// 订单调价
export const adjustPrice = async (data) => {
return await request.post({ url: `/trade/order/adjust-price`, data })
export const updatePrice = async (data: any) => {
return await request.put({ url: `/trade/order/update-price`, data })
}
// 修改订单地址
export const adjustAddress = async (data) => {
return await request.post({ url: `/trade/order/adjust-address`, data })
export const updateAddress = async (data: any) => {
return await request.put({ url: `/trade/order/update-address`, data })
}

4
src/router/modules/remaining.ts
View File

@ -347,7 +347,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
]
},
{
path: '/property', // TODO @puhui999：这里的 path 有问题，应该是 /product/property
path: '/product/property',
component: Layout,
name: 'Property',
meta: {
@ -421,7 +421,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
children: [
{
path: 'detail/:orderId(\\d+)',
component: () => import('@/views/mall/trade/order/components/OrderDetailForm.vue'),
component: () => import('@/views/mall/trade/order/detail/index.vue'),
name: 'TradeOrderDetailForm',
meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' }
}

4
src/utils/dict.ts
View File

@ -132,7 +132,7 @@ export enum DICT_TYPE {
BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
// ========== PAY 模块 ==========
PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
PAY_CHANNEL_CODE = 'pay_channel_code_type', // 支付渠道编码类型
PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
@ -157,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', // 订单项 - 售后状态
TRADE_DELIVERY_TYPE = 'trade_delivery_type', // 配送方式
TRADE_DELIVERY_TYPE = 'delivery_type', // 配送方式
// ========== MALL - 营销模块 ==========
PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型

26
src/utils/index.ts
View File

@ -174,7 +174,6 @@ export const copyValueToTarget = (target, source) => {
Object.assign(target, newObj)
}
// TODO @puhui999：返回要带上 .00 哈.例如说 1.00
/**
* 将一个整数转换为分数保留两位小数
* @param num
@ -185,6 +184,31 @@ export const formatToFraction = (num: number | string | undefined): number => {
return parseFloat((parsedNumber / 100).toFixed(2))
}
/**
* 将一个数转换为 1.00 这样
* 数据呈现的时候使用
*
* @param num 整数
*/
export const floatToFixed2 = (num: number | string | undefined): string => {
let str = '0.00'
if (typeof num === 'undefined') {
return str
}
const f = formatToFraction(num)
const decimalPart = f.toString().split('.')[1]
const len = decimalPart ? decimalPart.length : 0
switch (len) {
case 0:
str = f.toString() + '.00'
break
case 1:
str = f.toString() + '0'
break
}
return str
}
/**
* 将一个分数转换为整数
* @param num

3
src/views/mall/product/property/index.vue
View File

@ -101,6 +101,7 @@
import { dateFormatter } from '@/utils/formatTime'
import * as PropertyApi from '@/api/mall/product/property'
import PropertyForm from './PropertyForm.vue'
const { push } = useRouter()
const message = useMessage() // 消息弹窗
@ -162,7 +163,7 @@ const handleDelete = async (id: number) => {
/** 跳转商品属性列表 */
const goValueList = (id: number) => {
push({ path: '/property/value/' + id })
push({ path: '/product/property/value/' + id })
}
/** 初始化 **/

32
src/views/mall/product/spu/addForm.vue
View File

@ -42,7 +42,7 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
// 业务api
import * as ProductSpuApi from '@/api/mall/product/spu'
import { convertToInteger, formatToFraction } from '@/utils'
import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
defineOptions({ name: 'ProductSpuForm' })
@ -107,12 +107,20 @@ const getDetail = async () => {
try {
const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
res.skus?.forEach((item) => {
// 回显价格分转元
item.price = formatToFraction(item.price)
item.marketPrice = formatToFraction(item.marketPrice)
item.costPrice = formatToFraction(item.costPrice)
item.subCommissionFirstPrice = formatToFraction(item.subCommissionFirstPrice)
item.subCommissionSecondPrice = formatToFraction(item.subCommissionSecondPrice)
if (isDetail.value === true) {
item.price = floatToFixed2(item.price)
item.marketPrice = floatToFixed2(item.marketPrice)
item.costPrice = floatToFixed2(item.costPrice)
item.subCommissionFirstPrice = floatToFixed2(item.subCommissionFirstPrice)
item.subCommissionSecondPrice = floatToFixed2(item.subCommissionSecondPrice)
} else {
// 回显价格分转元
item.price = formatToFraction(item.price)
item.marketPrice = formatToFraction(item.marketPrice)
item.costPrice = formatToFraction(item.costPrice)
item.subCommissionFirstPrice = formatToFraction(item.subCommissionFirstPrice)
item.subCommissionSecondPrice = formatToFraction(item.subCommissionSecondPrice)
}
})
formData.value = res
} finally {
@ -132,19 +140,19 @@ const submitForm = async () => {
await unref(descriptionRef)?.validate()
await unref(otherSettingsRef)?.validate()
// 深拷贝一份, 这样最终 server 端不满足，不需要恢复，
const deepCopyFormData = cloneDeep(unref(formData.value))
const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
// 兜底处理 sku 空数据
formData.value.skus!.forEach((sku) => {
// 因为是空数据这里判断一下商品条码是否为空就行
if (sku.barCode === '') {
const index = deepCopyFormData.skus.findIndex(
const index = deepCopyFormData.skus!.findIndex(
(item) => JSON.stringify(item.properties) === JSON.stringify(sku.properties)
)
// 删除这条 sku
deepCopyFormData.skus.splice(index, 1)
deepCopyFormData.skus!.splice(index, 1)
}
})
deepCopyFormData.skus.forEach((item) => {
deepCopyFormData.skus!.forEach((item) => {
// 给sku name赋值
item.name = deepCopyFormData.name
// sku相关价格元转分
@ -156,7 +164,7 @@ const submitForm = async () => {
})
// 处理轮播图列表
const newSliderPicUrls: any[] = []
deepCopyFormData.sliderPicUrls.forEach((item: any) => {
deepCopyFormData.sliderPicUrls!.forEach((item: any) => {
// 如果是前端选的图
typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
})

1
src/views/mall/product/spu/components/index.ts
View File

@ -7,7 +7,6 @@ import SkuList from './SkuList.vue'
import { Spu } from '@/api/mall/product/spu'
// TODO @puhui999：Properties 改成 Property 更合适？Property 在 Spu 中已存在避免冲突 PropertyAndValues
interface PropertyAndValues {
id: number
name: string

20
src/views/mall/product/spu/index.vue
View File

@ -80,7 +80,7 @@
<el-table v-loading="loading" :data="list">
<el-table-column type="expand" width="30">
<template #default="{ row }">
<el-form class="demo-table-expand" label-position="left">
<el-form class="spu-table-expand" label-position="left">
<el-row>
<el-col :span="24">
<el-row>
@ -91,12 +91,12 @@
</el-col>
<el-col :span="8">
<el-form-item label="市场价:">
<span>{{ formatToFraction(row.marketPrice) }}</span>
<span>{{ floatToFixed2(row.marketPrice) }}元</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="成本价:">
<span>{{ formatToFraction(row.costPrice) }}</span>
<span>{{ floatToFixed2(row.costPrice) }}元</span>
</el-form-item>
</el-col>
</el-row>
@ -130,9 +130,7 @@
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
<el-table-column align="center" label="商品售价" min-width="90" prop="price">
<template #default="{ row }">
{{ formatToFraction(row.price) }}
</template>
<template #default="{ row }"> {{ floatToFixed2(row.price) }}元</template>
</el-table-column>
<el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
<el-table-column align="center" label="库存" min-width="90" prop="stock" />
@ -229,7 +227,7 @@ import { createImageViewer } from '@/components/ImageViewer'
import { dateFormatter } from '@/utils/formatTime'
import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/utils/tree'
import { ProductSpuStatusEnum } from '@/utils/constants'
import { formatToFraction } from '@/utils'
import { floatToFixed2 } from '@/utils'
import download from '@/utils/download'
import * as ProductSpuApi from '@/api/mall/product/spu'
import * as ProductCategoryApi from '@/api/mall/product/category'
@ -392,7 +390,7 @@ const resetQuery = () => {
const openForm = (id?: number) => {
// 修改
if (typeof id === 'number') {
push('/product/spu/edit/' + id)
push({ name: 'ProductSpuEdit', params: { spuId: id } })
return
}
// 新增
@ -402,8 +400,8 @@ const openForm = (id?: number) => {
/**
* 查看商品详情
*/
const openDetail = (id?: number) => {
push('/product/spu/detail/' + id)
const openDetail = (id: number) => {
push({ name: 'ProductSpuDetail', params: { spuId: id } })
}
/** 导出按钮操作 */
@ -458,7 +456,7 @@ onMounted(async () => {
})
</script>
<style lang="scss" scoped>
.demo-table-expand {
.spu-table-expand {
padding-left: 42px;
:deep(.el-form-item__label) {

12
src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
View File

@ -193,16 +193,4 @@ const resetForm = async () => {
await nextTick()
formRef.value.getElFormRef().resetFields()
}
// TODO @puhui999：下面的 css 名字，是不是可以改下；demo-table-expand
</script>
<style lang="scss" scoped>
.demo-table-expand {
padding-left: 42px;
:deep(.el-form-item__label) {
width: 82px;
font-weight: bold;
color: #99a9bf;
}
}
</style>

24
src/views/mall/trade/order/components/DeliveryOrderForm.vue → src/views/mall/trade/order/components/OrderDeliveryForm.vue
View File

@ -2,12 +2,12 @@
<Dialog v-model="dialogVisible" title="订单发货" width="25%">
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
<el-form-item label="发货方式">
<el-radio-group v-model="radio">
<el-radio border label="1">快递物流</el-radio>
<el-radio border label="2">无需发货</el-radio>
<el-radio-group v-model="expressType">
<el-radio border label="express">快递物流</el-radio>
<el-radio border label="none">无需发货</el-radio>
</el-radio-group>
</el-form-item>
<template v-if="radio === '1'">
<template v-if="expressType === 'express'">
<el-form-item label="物流公司">
<el-select v-model="formData.logisticsId" placeholder="请选择" style="width: 100%">
<el-option
@ -32,16 +32,16 @@
<script lang="ts" setup>
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { copyValueToTarget } from '@/utils'
// TODO @puhui999：是不是名字叫 OrderDeliveryForm 保持统一
defineOptions({ name: 'DeliveryOrderForm' })
defineOptions({ name: 'OrderDeliveryForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const radio = ref('1') // TODO @puhui999：尽量不用 radio 这种命名，无业务含义。这里的话，可以考虑用 expressType，如果值是 express，则是快递；none 则是无；未来做同城配送，就比较容易拓展啦；
const expressType = ref('express') // 如果值是 express，则是快递；none 则是无；未来做同城配送；
const formData = ref<TradeOrderApi.DeliveryVO>({
id: 0, // 订单编号
logisticsId: null, // 物流公司编号
@ -49,12 +49,14 @@ const formData = ref<TradeOrderApi.DeliveryVO>({
})
const formRef = ref() // 表单 Ref
// TODO @puhui999：每次点击发货的时候，是不是可以把之前的信息带过来哈。
/** 打开弹窗 */
const open = async (orderId: number) => {
const open = async (row: TradeOrderApi.OrderVO) => {
resetForm()
// 设置数据
formData.value.id = orderId
copyValueToTarget(formData.value, row)
if (row.logisticsId === null || row.logisticsId === 0) {
expressType.value = 'none'
}
dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@ -66,7 +68,7 @@ const submitForm = async () => {
formLoading.value = true
try {
const data = unref(formData)
if (radio.value === '2') {
if (expressType.value === 'none') {
// 无需发货的情况
data.logisticsId = 0
data.logisticsNo = ''

40
src/views/mall/trade/order/components/OrderAdjustAddressForm.vue → src/views/mall/trade/order/components/OrderUpdateAddressForm.vue
View File

@ -1,18 +1,27 @@
<template>
<Dialog v-model="dialogVisible" title="修改订单收货地址" width="35%">
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="120px">
<el-form-item label="收件人名称">
<el-input v-model="formData.receiverName" />
<el-form-item label="收件人">
<el-input v-model="formData.receiverName" placeholder="请输入收件人名称" />
</el-form-item>
<el-form-item label="收件人手机">
<el-input v-model="formData.receiverMobile" />
<el-form-item label="手机号">
<el-input v-model="formData.receiverMobile" placeholder="请输入收件人手机号" />
</el-form-item>
<!-- TODO @puhui999：应该是个地区下拉框，可以看下 UserForm 所在地 -->
<el-form-item label="收件人地区编号">
<el-input v-model="formData.receiverAreaId" />
<el-form-item label="所在地">
<el-tree-select
v-model="formData.receiverAreaId"
:data="areaList"
:props="defaultProps"
:render-after-expand="true"
/>
</el-form-item>
<el-form-item label="收件人详细地址">
<el-input v-model="formData.receiverDetailAddress" />
<el-form-item label="详细地址">
<el-input
v-model="formData.receiverDetailAddress"
:rows="3"
placeholder="请输入收件人详细地址"
type="textarea"
/>
</el-form-item>
</el-form>
<template #footer>
@ -23,10 +32,11 @@
</template>
<script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order'
import { getAreaTree } from '@/api/system/area'
import { copyValueToTarget } from '@/utils'
import { defaultProps } from '@/utils/tree'
// TODO @puhui999：OrderAdjustAddressForm 改成 OrderUpdateAddressForm 更新哈，保持统一；
defineOptions({ name: 'OrderAdjustAddressForm' })
defineOptions({ name: 'OrderUpdateAddressForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -40,6 +50,7 @@ const formData = ref({
receiverAreaId: null, //收件人地区编号
receiverDetailAddress: '' //收件人详细地址
})
const areaList = ref([]) // 地区列表
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
@ -58,7 +69,7 @@ const submitForm = async () => {
formLoading.value = true
try {
const data = unref(formData)
await TradeOrderApi.adjustAddress(data)
await TradeOrderApi.updateAddress(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
@ -79,4 +90,9 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
onMounted(async () => {
// 获得地区列表
areaList.value = await getAreaTree()
})
</script>

6
src/views/mall/trade/order/components/OrderAdjustPriceForm.vue → src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
View File

@ -23,8 +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' })
defineOptions({ name: 'OrderUpdatePriceForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -53,6 +52,7 @@ const open = async (row: TradeOrderApi.OrderVO) => {
// 设置数据
formData.value.adjustPrice = formatToFraction(row.adjustPrice)
formData.value.payPrice = formatToFraction(row.payPrice) + '元'
formData.value.newPayPrice = formData.value.payPrice
dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@ -67,7 +67,7 @@ const submitForm = async () => {
data.adjustPrice = convertToInteger(data.adjustPrice)
delete data.payPrice
delete data.newPayPrice
await TradeOrderApi.adjustPrice(data)
await TradeOrderApi.updatePrice(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件

14
src/views/mall/trade/order/components/OrderRemarksForm.vue → src/views/mall/trade/order/components/OrderUpdateRemarkForm.vue
View File

@ -1,8 +1,13 @@
<template>
<Dialog v-model="dialogVisible" title="商家备注" width="25%">
<Dialog v-model="dialogVisible" title="商家备注" width="45%">
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
<el-form-item label="备注">
<el-input v-model="formData.remark" />
<el-input
v-model="formData.remark"
:rows="3"
placeholder="请输入订单备注"
type="textarea"
/>
</el-form-item>
</el-form>
<template #footer>
@ -14,8 +19,7 @@
<script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order'
// TODO @puhui999：OrderRemarksForm 改成 OrderUpdateRemarkForm 更新哈，保持统一；
defineOptions({ name: 'OrderRemarksForm' })
defineOptions({ name: 'OrderUpdateRemarkForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -46,7 +50,7 @@ const submitForm = async () => {
try {
const data = unref(formData)
console.log(data)
await TradeOrderApi.remark(data)
await TradeOrderApi.updateRemark(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件

108
src/views/mall/trade/order/components/OrderDetailForm.vue → src/views/mall/trade/order/detail/index.vue
View File

@ -41,10 +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 type="primary" @click="openForm('adjustPrice')">调整价格</el-button>
<el-button type="primary" @click="openForm('updatePrice')">调整价格</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-button type="primary" @click="openForm('updateAddress')">修改地址</el-button>
</el-descriptions-item>
<el-descriptions-item>
<template #label><span style="color: red">提醒: </span></template>
@ -68,12 +68,12 @@
</el-tag>
</template>
</el-table-column>
<el-table-column label="商品原价(元)" prop="price" width="150">
<template #default="{ row }">{{ formatToFraction(row.price) }}</template>
<el-table-column label="商品原价" prop="price" width="150">
<template #default="{ row }">{{ floatToFixed2(row.price) }}元</template>
</el-table-column>
<el-table-column label="数量" prop="count" width="100" />
<el-table-column label="合计(元)" prop="payPrice" width="150">
<template #default="{ row }">{{ formatToFraction(row.payPrice) }}</template>
<el-table-column label="合计" prop="payPrice" width="150">
<template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
</el-table-column>
<el-table-column label="售后状态" prop="afterSaleStatus" width="120">
<template #default="{ row }">
@ -91,32 +91,32 @@
</el-descriptions>
<el-descriptions :column="6">
<el-descriptions-item label="商品总额: ">
{{ formatToFraction(orderInfo.totalPrice) }}元
{{ floatToFixed2(orderInfo.totalPrice) }}元
</el-descriptions-item>
<el-descriptions-item label="运费金额: ">
{{ formatToFraction(orderInfo.deliveryPrice) }}元
{{ floatToFixed2(orderInfo.deliveryPrice) }}元
</el-descriptions-item>
<el-descriptions-item label="订单调价: ">
{{ formatToFraction(orderInfo.adjustPrice) }}元
{{ floatToFixed2(orderInfo.updatePrice) }}元
</el-descriptions-item>
<el-descriptions-item>
<template #label><span style="color: red">商品优惠: </span></template>
{{ formatToFraction(orderInfo.couponPrice) }}元
{{ floatToFixed2(orderInfo.couponPrice) }}元
</el-descriptions-item>
<el-descriptions-item>
<template #label><span style="color: red">订单优惠: </span></template>
{{ formatToFraction(orderInfo.discountPrice) }}元
{{ floatToFixed2(orderInfo.discountPrice) }}元
</el-descriptions-item>
<el-descriptions-item>
<template #label><span style="color: red">积分抵扣: </span></template>
{{ formatToFraction(orderInfo.pointPrice) }}元
{{ floatToFixed2(orderInfo.pointPrice) }}元
</el-descriptions-item>
<el-descriptions-item v-for="item in 5" :key="item" label-class-name="no-colon" />
<!-- 占位 -->
<el-descriptions-item label="应付金额: ">
{{ formatToFraction(orderInfo.payPrice) }}元
{{ floatToFixed2(orderInfo.payPrice) }}元
</el-descriptions-item>
</el-descriptions>
@ -199,69 +199,25 @@
</ContentWrap>
<!-- 各种操作的弹窗 -->
<DeliveryOrderForm ref="deliveryFormRef" @success="getDetail" />
<OrderRemarksForm ref="remarksFormRef" @success="getDetail" />
<OrderAdjustAddressForm ref="adjustAddressFormRef" @success="getDetail" />
<OrderAdjustPriceForm ref="adjustPriceFormRef" @success="getDetail" />
<OrderDeliveryForm ref="deliveryFormRef" @success="getDetail" />
<OrderUpdateRemarkForm ref="updateRemarkForm" @success="getDetail" />
<OrderUpdateAddressForm ref="updateAddressFormRef" @success="getDetail" />
<OrderUpdatePriceForm ref="updatePriceFormRef" @success="getDetail" />
</template>
<script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order'
import { formatToFraction } from '@/utils'
import { floatToFixed2 } from '@/utils'
import { DICT_TYPE } from '@/utils/dict'
import OrderRemarksForm from '@/views/mall/trade/order/components/OrderRemarksForm.vue'
import DeliveryOrderForm from '@/views/mall/trade/order/components/DeliveryOrderForm.vue'
import OrderAdjustAddressForm from '@/views/mall/trade/order/components/OrderAdjustAddressForm.vue'
import OrderAdjustPriceForm from '@/views/mall/trade/order/components/OrderAdjustPriceForm.vue'
import OrderUpdateRemarkForm from '@/views/mall/trade/order/components/OrderUpdateRemarkForm.vue'
import OrderDeliveryForm from '@/views/mall/trade/order/components/OrderDeliveryForm.vue'
import OrderUpdateAddressForm from '@/views/mall/trade/order/components/OrderUpdateAddressForm.vue'
import OrderUpdatePriceForm from '@/views/mall/trade/order/components/OrderUpdatePriceForm.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,
type: null,
terminal: null,
userId: null,
userIp: '',
userRemark: '',
status: null,
productCount: null,
finishTime: null,
cancelTime: null,
cancelType: null,
remark: '',
payOrderId: null,
payed: false,
payTime: null,
payChannelCode: '',
originalPrice: null,
orderPrice: null,
discountPrice: null,
deliveryPrice: null,
adjustPrice: null,
payPrice: null,
deliveryTemplateId: null,
logisticsId: null,
logisticsNo: '',
deliveryStatus: null,
deliveryTime: null,
receiveTime: null,
receiverName: '',
receiverMobile: '',
receiverAreaId: null,
receiverPostCode: null,
receiverDetailAddress: '',
afterSaleStatus: null,
refundPrice: null,
couponPrice: null,
pointPrice: null,
receiverAreaName: '',
items: [],
user: {}
})
const orderInfo = ref<TradeOrderApi.OrderVO>({})
// TODO @puhui999：这个改成直接读属性，不用按照这种写法；
const detailGroups = ref([
@ -330,22 +286,22 @@ const detailInfo = ref({
})
const deliveryFormRef = ref() // 发货表单 Ref
const remarksFormRef = ref() // 订单备注表单 Ref
const adjustAddressFormRef = ref() // 收货地址表单 Ref
const adjustPriceFormRef = ref() // 订单调价表单 Ref
const updateRemarkForm = ref() // 订单备注表单 Ref
const updateAddressFormRef = ref() // 收货地址表单 Ref
const updatePriceFormRef = ref() // 订单调价表单 Ref
const openForm = (type: string) => {
switch (type) {
case 'remark':
remarksFormRef.value?.open(orderInfo.value)
updateRemarkForm.value?.open(orderInfo.value)
break
case 'delivery':
deliveryFormRef.value?.open(orderInfo.value.id)
deliveryFormRef.value?.open(orderInfo.value)
break
case 'adjustAddress':
adjustAddressFormRef.value?.open(orderInfo.value)
case 'updateAddress':
updateAddressFormRef.value?.open(orderInfo.value)
break
case 'adjustPrice':
adjustPriceFormRef.value?.open(orderInfo.value)
case 'updatePrice':
updatePriceFormRef.value?.open(orderInfo.value)
break
}
}

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

@ -100,7 +100,7 @@
placeholder="请输入"
>
<template #prepend>
<el-select v-model="queryType.k" clearable placeholder="全部" class="!w-110px">
<el-select v-model="queryType.k" class="!w-110px" clearable placeholder="全部">
<el-option
v-for="dict in searchList"
:key="dict.value"
@ -164,11 +164,11 @@
<el-table-column label="商品原价*数量" prop="price" width="150">
<template #default="{ row }">
<!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
{{ formatToFraction(row.price) }} 元 * {{ row.count }}
{{ floatToFixed2(row.price) }} 元 * {{ row.count }}
</template>
</el-table-column>
<el-table-column label="合计" prop="payPrice" width="150">
<template #default="{ row }">{{ formatToFraction(row.payPrice) }}元</template>
<template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
</el-table-column>
<el-table-column label="售后状态" prop="afterSaleStatus" width="120">
<template #default="{ row }">
@ -181,7 +181,7 @@
<el-table-column align="center" label="实际支付" min-width="120" prop="payPrice">
<template #default>
<!-- TODO @puhui999：价格，要有 xxx.00 这种格式 -->
{{ formatToFraction(scope.row.payPrice) + '元' }}
{{ floatToFixed2(scope.row.payPrice) + '元' }}
</template>
</el-table-column>
<el-table-column label="买家/收货人" min-width="160">
@ -307,22 +307,19 @@
</ContentWrap>
<!-- 各种操作的弹窗 -->
<DeliveryOrderForm ref="deliveryOrderFormRef" @success="getList" />
<OrderRemarksForm ref="orderRemarksFormRef" @success="getList" />
<OrderDeliveryForm ref="deliveryFormRef" @success="getList" />
<OrderUpdateRemarkForm ref="updateRemarkForm" @success="getList" />
</template>
<script lang="ts" name="Order" setup>
import type { FormInstance, TableColumnCtx } from 'element-plus'
import DeliveryOrderForm from './components/DeliveryOrderForm.vue'
import OrderRemarksForm from './components/OrderRemarksForm.vue'
import OrderDeliveryForm from './components/OrderDeliveryForm.vue'
import OrderUpdateRemarkForm from './components/OrderUpdateRemarkForm.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, getIntDictOptions } from '@/utils/dict'
import { formatToFraction } from '@/utils'
import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { floatToFixed2 } from '@/utils'
import { createImageViewer } from '@/components/ImageViewer'
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
@ -330,7 +327,7 @@ const { currentRoute, push } = useRouter() // 路由跳转
const loading = ref(true) // 列表的加载中
const total = ref(2) // 列表的总页数
const list = ref<OrderVO[]>([]) // 列表的数据
const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
const queryFormRef = ref<FormInstance>() // 搜索的表单
// 表单搜索
const queryParams = reactive({
@ -368,11 +365,12 @@ const searchList = ref([
])
interface SpanMethodProps {
row: OrderItemRespVO
column: TableColumnCtx<OrderItemRespVO>
row: TradeOrderApi.OrderItemRespVO
column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
rowIndex: number
columnIndex: number
}
const spanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
const colIndex = [4, 5, 6, 7]
// 处理列
@ -384,6 +382,7 @@ const spanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
colspan: 0
}
}
// TODO puhui：合并的行数需要动态计算
return {
rowspan: 2,
colspan: 1
@ -422,27 +421,26 @@ const imagePreview = (imgUrl: string) => {
})
}
/** 查看商品详情 */
/** 查看订单详情 */
const openForm = (id: number) => {
// TODO @puhui999：这里最好用 name 来跳转，因为 url 可能会改
push('/trade/order/detail/' + id)
push({ name: 'TradeOrderDetailForm', params: { orderId: id } })
}
/** 操作分发 */
const deliveryOrderFormRef = ref()
const orderRemarksFormRef = ref()
const handleCommand = (command: string, row: OrderVO) => {
const deliveryFormRef = ref()
const updateRemarkForm = ref()
const handleCommand = (command: string, row: TradeOrderApi.OrderVO) => {
switch (command) {
case 'orderRemarks': // TODO @puhui999：orderRemarks 是不是改成 remark 会好点，保持统一
orderRemarksFormRef.value?.open(row)
case 'remark':
updateRemarkForm.value?.open(row)
break
case 'delivery':
deliveryOrderFormRef.value?.open(row.id)
deliveryFormRef.value?.open(row)
break
}
}
// 监听路由变化更新列表，解决商品保存后，列表不刷新的问题。
// 监听路由变化更新列表，解决订单保存/更新后，列表不刷新的问题。
watch(
() => currentRoute.value,
() => {
@ -455,7 +453,7 @@ const deliveryExpressList = ref([]) // 物流公司
/** 初始化 **/
onMounted(async () => {
await getList()
pickUpStoreList.value = await getListAllSimple()
pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
})
</script>