Skip to content

phsl / admin

Go to a project
Commit 76e37a3e by 绮梦
Options

Merge remote-tracking branch 'origin/dev' into dev-gitee

parents 45a6b3bc b8ca5800
Showing with 991 additions and 182 deletions
src/api/mall/product/comment.ts 0 → 100644
import request from '@/config/axios'
export interface CommentVO {
id: number
userId: number
userNickname: string
userAvatar: string
anonymous: boolean
orderId: number
orderItemId: number
spuId: number
spuName: string
skuId: number
visible: boolean
scores: number
descriptionScores: number
benefitScores: number
content: string
picUrls: string
replyStatus: boolean
replyUserId: number
replyContent: string
replyTime: Date
}
// 查询商品评论列表
export const getCommentPage = async (params) => {
return await request.get({ url: `/product/comment/page`, params })
}
// 查询商品评论详情
export const getComment = async (id: number) => {
return await request.get({ url: `/product/comment/get?id=` + id })
}
// 添加自评
export const createComment = async (data: CommentVO) => {
return await request.post({ url: `/product/comment/create`, data })
}
// 显示 / 隐藏评论
export const updateCommentVisible = async (data: any) => {
return await request.put({ url: `/product/comment/update-visible`, data })
}
// 商家回复
export const replyComment = async (data: any) => {
return await request.put({ url: `/product/comment/reply`, data })
}
src/api/mall/product/spu.ts
...@@ -9,18 +9,19 @@ export interface Property { ...@@ -9,18 +9,19 @@ export interface Property {
export interface Sku { export interface Sku {
id?: number // 商品 SKU 编号 id?: number // 商品 SKU 编号
name?: string // 商品 SKU 名称
spuId?: number // SPU 编号 spuId?: number // SPU 编号
properties?: Property[] // 属性数组 properties?: Property[] // 属性数组
price?: number // 商品价格 price?: number | string // 商品价格
marketPrice?: number // 市场价 marketPrice?: number | string // 市场价
costPrice?: number // 成本价 costPrice?: number | string // 成本价
barCode?: string // 商品条码 barCode?: string // 商品条码
picUrl?: string // 图片地址 picUrl?: string // 图片地址
stock?: number // 库存 stock?: number // 库存
weight?: number // 商品重量，单位：kg 千克 weight?: number // 商品重量，单位：kg 千克
volume?: number // 商品体积，单位：m^3 平米 volume?: number // 商品体积，单位：m^3 平米
subCommissionFirstPrice?: number // 一级分销的佣金 subCommissionFirstPrice?: number | string // 一级分销的佣金
subCommissionSecondPrice?: number // 二级分销的佣金 subCommissionSecondPrice?: number | string // 二级分销的佣金
salesCount?: number // 商品销量 salesCount?: number // 商品销量
} }
......
src/api/mall/trade/order/index.ts
...@@ -102,20 +102,20 @@ export interface DeliveryVO { ...@@ -102,20 +102,20 @@ export interface DeliveryVO {
// 订单发货 // 订单发货
export const delivery = async (data: 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) => { export const updateRemark = async (data: any) => {
return await request.post({ url: `/trade/order/remark`, data }) return await request.put({ url: `/trade/order/update-remark`, data })
} }
// 订单调价 // 订单调价
export const adjustPrice = async (data) => { export const updatePrice = async (data: any) => {
return await request.post({ url: `/trade/order/adjust-price`, data }) return await request.put({ url: `/trade/order/update-price`, data })
} }
// 修改订单地址 // 修改订单地址
export const adjustAddress = async (data) => { export const updateAddress = async (data: any) => {
return await request.post({ url: `/trade/order/adjust-address`, data }) return await request.put({ url: `/trade/order/update-address`, data })
} }
src/router/modules/remaining.ts
...@@ -347,22 +347,6 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -347,22 +347,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
] ]
}, },
{ {
path: '/property', // TODO @puhui999：这里的 path 有问题，应该是 /product/property
component: Layout,
name: 'Property',
meta: {
hidden: true
},
children: [
{
path: 'value/:propertyId(\\d+)',
component: () => import('@/views/mall/product/property/value/index.vue'),
name: 'ProductPropertyValue',
meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
}
]
},
{
path: '/product', path: '/product',
component: Layout, component: Layout,
name: 'Product', name: 'Product',
...@@ -408,6 +392,19 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -408,6 +392,19 @@ const remainingRouter: AppRouteRecordRaw[] = [
title: '商品详情', title: '商品详情',
activeMenu: '/product/product-spu' activeMenu: '/product/product-spu'
} }
},
{
path: 'property/value/:propertyId(\\d+)',
component: () => import('@/views/mall/product/property/value/index.vue'),
name: 'ProductPropertyValue',
meta: {
noCache: true,
hidden: true,
canTo: true,
icon: 'ep:view',
title: '商品属性值',
activeMenu: '/product/property'
}
} }
] ]
}, },
...@@ -421,7 +418,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -421,7 +418,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
children: [ children: [
{ {
path: 'detail/:orderId(\\d+)', path: 'detail/:orderId(\\d+)',
component: () => import('@/views/mall/trade/order/components/OrderDetailForm.vue'), component: () => import('@/views/mall/trade/order/detail/index.vue'),
name: 'TradeOrderDetailForm', name: 'TradeOrderDetailForm',
meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' } meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' }
} }
......
src/utils/dict.ts
...@@ -131,7 +131,7 @@ export enum DICT_TYPE { ...@@ -131,7 +131,7 @@ export enum DICT_TYPE {
BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type', BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
// ========== PAY 模块 ========== // ========== PAY 模块 ==========
PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型 PAY_CHANNEL_CODE = 'pay_channel_code_type', // 支付渠道编码类型
PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态 PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态 PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态 PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
......
src/utils/index.ts
...@@ -174,7 +174,6 @@ export const copyValueToTarget = (target, source) => { ...@@ -174,7 +174,6 @@ export const copyValueToTarget = (target, source) => {
Object.assign(target, newObj) Object.assign(target, newObj)
} }
// TODO @puhui999：返回要带上 .00 哈.例如说 1.00
/** /**
* 将一个整数转换为分数保留两位小数 * 将一个整数转换为分数保留两位小数
* @param num * @param num
...@@ -186,6 +185,31 @@ export const formatToFraction = (num: number | string | undefined): number => { ...@@ -186,6 +185,31 @@ export const formatToFraction = (num: number | string | undefined): number => {
} }
/** /**
* 将一个数转换为 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 * @param num
*/ */
......
src/views/mall/product/comment/CommentForm.vue 0 → 100644
<template>
<Dialog title="添加虚拟评论" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="商品" prop="spuId">
<div @click="handleSelectSpu" class="w-60px h-60px">
<div v-if="spuData && spuData.picUrl">
<el-image :src="spuData.picUrl" />
</div>
<div v-else class="select-box">
<Icon icon="ep:plus" />
</div>
</div>
</el-form-item>
<el-form-item label="商品规格" prop="skuId" v-if="formData.spuId">
<div @click="handleSelectSku" class="w-60px h-60px">
<div v-if="skuData && skuData.picUrl">
<el-image :src="skuData.picUrl" />
</div>
<div v-else class="select-box">
<Icon icon="ep:plus" />
</div>
</div>
</el-form-item>
<el-form-item label="用户头像" prop="userAvatar">
<UploadImg v-model="formData.userAvatar" height="60px" width="60px" />
</el-form-item>
<el-form-item label="用户名称" prop="userNickname">
<el-input v-model="formData.userNickname" placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="评论内容" prop="content">
<el-input type="textarea" v-model="formData.content" />
</el-form-item>
<!-- TODO @疯狂：formData.scores 是通过后端计算的哈，不要前端传递 -->
<el-form-item label="评分星级" prop="scores">
<el-rate v-model="formData.scores" />
</el-form-item>
<el-form-item label="描述星级" prop="descriptionScores">
<el-rate v-model="formData.descriptionScores" />
</el-form-item>
<el-form-item label="服务星级" prop="benefitScores">
<el-rate v-model="formData.benefitScores" />
</el-form-item>
<el-form-item label="评论图片" prop="picUrls">
<UploadImgs v-model="formData.picUrls" :limit="9" height="60px" width="60px" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
<SpuTableSelect ref="spuTableSelectRef" @change="handleSpuChange" />
<SkuTableSelect ref="skuTableSelectRef" @change="handleSkuChange" :spu-id="spuData.id" />
</template>
<script setup lang="ts">
import * as CommentApi from '@/api/mall/product/comment'
import SpuTableSelect from '@/views/mall/product/comment/components/SpuTableSelect.vue'
import * as ProductSpuApi from '@/api/mall/product/spu'
import SkuTableSelect from '@/views/mall/product/comment/components/SkuTableSelect.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
userId: undefined,
userNickname: undefined,
userAvatar: undefined,
spuId: undefined,
spuName: undefined,
skuId: undefined,
scores: 5,
descriptionScores: 5,
benefitScores: 5,
content: undefined,
picUrls: []
})
const formRules = reactive({
spuId: [{ required: true, message: '商品不能为空', trigger: 'blur' }],
skuId: [{ required: true, message: '规格不能为空', trigger: 'blur' }],
userAvatar: [{ required: true, message: '用户头像不能为空', trigger: 'blur' }],
userNickname: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
content: [{ required: true, message: '评论内容不能为空', trigger: 'blur' }],
scores: [{ required: true, message: '评分星级不能为空', trigger: 'blur' }],
descriptionScores: [{ required: true, message: '描述星级不能为空', trigger: 'blur' }],
benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const spuData = ref<ProductSpuApi.Spu>({})
const skuData = ref({
id: -1,
name: '',
picUrl: ''
})
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await CommentApi.getComment(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
//处理评论图片
const picUrls = formData.value.picUrls.map((item) => {
return item?.url ? item.url : item
})
const data = { ...formData.value, picUrls }
if (formType.value === 'create') {
await CommentApi.createComment(data)
message.success(t('common.createSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
userId: undefined,
userNickname: undefined,
userAvatar: undefined,
spuId: undefined,
skuId: undefined,
scores: 5,
descriptionScores: 5,
benefitScores: 5,
content: undefined,
picUrls: []
}
formRef.value?.resetFields()
}
/** SPU 表格选择 */
const spuTableSelectRef = ref()
const handleSelectSpu = () => {
spuTableSelectRef.value.open()
}
const handleSpuChange = (spu: ProductSpuApi.Spu) => {
spuData.value = spu
formData.value.spuId = spu.id
}
/** SKU 表格选择 */
const skuTableSelectRef = ref()
const handleSelectSku = () => {
skuTableSelectRef.value.open()
}
const handleSkuChange = (sku: ProductSpuApi.Sku) => {
skuData.value = sku
formData.value.skuId = sku.id
}
</script>
<style>
.select-box {
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--el-border-color-darker);
border-radius: 8px;
width: 100%;
height: 100%;
}
</style>
src/views/mall/product/comment/components/SkuTableSelect.vue 0 → 100644
<template>
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择规格" width="700">
<el-table v-loading="loading" :data="list" show-overflow-tooltip>
<el-table-column label="#" width="55">
<template #default="{ row }">
<el-radio :label="row.id" v-model="selectedSkuId" @change="handleSelected(row)"
>&nbsp;
</el-radio>
</template>
</el-table-column>
<el-table-column label="图片" min-width="80">
<template #default="{ row }">
<el-image
:src="row.picUrl"
class="w-30px h-30px"
:preview-src-list="[row.picUrl]"
preview-teleported
/>
</template>
</el-table-column>
<el-table-column label="规格" align="center" min-width="80">
<template #default="{ row }">
{{ row.properties?.map((p) => p.valueName)?.join(' ') }}
</template>
</el-table-column>
<el-table-column align="center" label="销售价(元)" min-width="80">
<template #default="{ row }">
{{ row.price }}
</template>
</el-table-column>
</el-table>
</Dialog>
</template>
<script lang="ts" setup>
import { ElTable } from 'element-plus'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { propTypes } from '@/utils/propTypes'
// TODO @疯狂：是不是挪到 spu 的 components 下哈
defineOptions({ name: 'SkuTableSelect' })
const props = defineProps({
spuId: propTypes.number.def(null)
})
const message = useMessage() // 消息弹窗
const list = ref<any[]>([]) // 列表的数据
const loading = ref(false) // 列表的加载中
const dialogVisible = ref(false) // 弹窗的是否展示
const selectedSkuId = ref() // 选中的商品 spuId
/** 选中时触发 */
const handleSelected = (row: ProductSpuApi.Sku) => {
emits('change', row)
// 关闭弹窗
dialogVisible.value = false
selectedSkuId.value = undefined
}
// 确认选择时的触发事件
const emits = defineEmits<{
(e: 'change', spu: ProductSpuApi.Sku): void
}>()
/** 打开弹窗 */
const open = () => {
dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 查询列表 */
const getSpuDetail = async () => {
loading.value = true
try {
const spu = await ProductSpuApi.getSpu(props.spuId)
list.value = spu.skus
} finally {
loading.value = false
}
}
/** 初始化 **/
onMounted(async () => {})
watch(
() => props.spuId,
() => {
if (!props.spuId) {
return
}
getSpuDetail()
}
)
</script>
src/views/mall/product/comment/components/SpuTableSelect.vue 0 → 100644
<template>
<Dialog v-model="dialogVisible" :appendToBody="true" title="选择商品" width="70%">
<el-row :gutter="20" class="mb-10px">
<el-col :span="6">
<el-input
v-model="queryParams.name"
class="!w-240px"
clearable
placeholder="请输入商品名称"
@keyup.enter="handleQuery"
/>
</el-col>
<el-col :span="6">
<el-tree-select
v-model="queryParams.categoryId"
:data="categoryTreeList"
:props="defaultProps"
check-strictly
class="w-1/1"
node-key="id"
placeholder="请选择商品分类"
/>
</el-col>
<el-col :span="6">
<el-date-picker
v-model="queryParams.createTime"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
end-placeholder="结束日期"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-col>
<el-col :span="6">
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
</el-col>
</el-row>
<el-table ref="spuListRef" v-loading="loading" :data="list" show-overflow-tooltip>
<el-table-column label="#" width="55">
<template #default="{ row }">
<el-radio :label="row.id" v-model="selectedSpuId" @change="handleSelected(row)"
>&nbsp;</el-radio
>
</template>
</el-table-column>
<el-table-column key="id" align="center" label="商品编号" prop="id" min-width="60" />
<el-table-column label="商品图" min-width="80">
<template #default="{ row }">
<el-image
:src="row.picUrl"
class="w-30px h-30px"
:preview-src-list="[row.picUrl]"
preview-teleported
/>
</template>
</el-table-column>
<el-table-column label="商品名称" min-width="200" prop="name" />
<el-table-column label="商品分类" min-width="100" prop="categoryId">
<template #default="{ row }">
<span>{{ categoryList.find((c) => c.id === row.categoryId)?.name }}</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</Dialog>
</template>
<script lang="ts" setup>
import { ElTable } from 'element-plus'
import { defaultProps, handleTree } from '@/utils/tree'
import * as ProductCategoryApi from '@/api/mall/product/category'
import * as ProductSpuApi from '@/api/mall/product/spu'
// TODO @疯狂：是不是挪到 spu 的 components 下哈
defineOptions({ name: 'SpuTableSelect' })
const message = useMessage() // 消息弹窗
const total = ref(0) // 列表的总页数
const list = ref<any[]>([]) // 列表的数据
const loading = ref(false) // 列表的加载中
const dialogVisible = ref(false) // 弹窗的是否展示
const queryParams = ref({
pageNo: 1,
pageSize: 10,
tabType: 0, // 默认获取上架的商品
name: '',
categoryId: null,
createTime: []
}) // 查询参数
const spuListRef = ref<InstanceType<typeof ElTable>>()
const selectedSpuId = ref() // 选中的商品 spuId
/** 选中时触发 */
const handleSelected = (row: ProductSpuApi.Spu) => {
emits('change', row)
// 关闭弹窗
dialogVisible.value = false
selectedSpuId.value = undefined
}
// 确认选择时的触发事件
const emits = defineEmits<{
(e: 'change', spu: ProductSpuApi.Spu): void
}>()
/** 打开弹窗 */
const open = () => {
dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProductSpuApi.getSpuPage(queryParams.value)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.value = {
pageNo: 1,
pageSize: 10,
tabType: 0, // 默认获取上架的商品
name: '',
categoryId: null,
createTime: []
}
getList()
}
const categoryList = ref() // 分类列表
const categoryTreeList = ref() // 分类树
/** 初始化 **/
onMounted(async () => {
await getList()
// 获得分类树
categoryList.value = await ProductCategoryApi.getCategoryList({})
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId')
})
</script>
src/views/mall/product/comment/index.vue 0 → 100644
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="回复状态" prop="replyStatus">
<el-select v-model="queryParams.replyStatus">
<el-option label="已回复" :value="true" />
<el-option label="未回复" :value="false" />
</el-select>
</el-form-item>
<el-form-item label="商品名称" prop="spuName">
<el-input v-model="queryParams.spuName" placeholder="请输入商品名称" />
</el-form-item>
<el-form-item label="用户名称" prop="userNickname">
<el-input v-model="queryParams.userNickname" placeholder="请输入用户名称" />
</el-form-item>
<el-form-item label="订单编号" prop="orderId">
<el-input v-model="queryParams.orderId" placeholder="请输入订单编号" />
</el-form-item>
<el-form-item label="评论时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['product:comment:create']"
>
<Icon icon="ep:plus" class="mr-5px" />
添加虚拟评论
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false">
<el-table-column label="评论编号" align="center" prop="id" min-width="60" />
<!-- TODO @疯狂：后端貌似没读取？ -->
<el-table-column label="用户名称" align="center" prop="userNickname" width="80" />
<el-table-column label="商品信息" align="center" min-width="210">
<template #default="scope">
<div class="flex row items-center gap-x-4px">
<el-image
v-if="scope.row.skuPicUrl"
:src="scope.row.skuPicUrl"
:preview-src-list="[scope.row.skuPicUrl]"
class="w-30px h-30px shrink-0"
preview-teleported
/>
<div>{{ scope.row.spuName }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="评分星级" align="center" prop="scores" width="80" />
<el-table-column label="描述星级" align="center" prop="descriptionScores" width="80" />
<el-table-column label="服务星级" align="center" prop="benefitScores" width="80" />
<el-table-column label="评论内容" align="center" prop="content" min-width="80">
<template #default="scope">
<p>{{ scope.row.content }}</p>
<div class="flex justify-center gap-x-4px">
<el-image
v-for="(picUrl, index) in scope.row.picUrls"
:key="index"
:src="picUrl"
:preview-src-list="scope.row.picUrls"
:initial-index="index"
class="w-30px h-30px"
preview-teleported
/>
</div>
</template>
</el-table-column>
<el-table-column
label="回复内容"
align="center"
prop="replyContent"
min-width="100"
show-overflow-tooltip
/>
<el-table-column
label="评论时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="170"
/>
<el-table-column label="状态" align="center" width="65px">
<template #default="scope">
<el-switch
v-model="scope.row.visible"
:active-value="true"
:inactive-value="false"
v-hasPermi="['product:comment:update']"
@change="handleVisibleChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="60px" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
@click="handleReply(scope.row.id)"
v-hasPermi="['product:comment:update']"
>
回复
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<CommentForm ref="formRef" @success="getList" />
<Dialog title="回复" v-model="replyDialog.visible">
<el-form
ref="replyFormRef"
:model="replyDialog.formData"
:rules="replyDialog.formRules"
label-width="100px"
v-loading="replyDialog.loading"
>
<el-form-item label="回复内容" prop="replyContent">
<el-input type="textarea" v-model="replyDialog.formData.replyContent" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitReplyForm" type="primary" :disabled="replyDialog.loading"
>确 定
</el-button>
<el-button @click="replyDialog.visible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as CommentApi from '@/api/mall/product/comment'
import CommentForm from './CommentForm.vue'
import { ElInput } from 'element-plus'
defineOptions({ name: 'ProductComment' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userId: null,
userNickname: null,
userAvatar: null,
anonymous: null,
orderId: null,
orderItemId: null,
spuId: null,
spuName: null,
skuId: null,
visible: null,
scores: null,
descriptionScores: null,
benefitScores: null,
content: null,
picUrls: null,
replyStatus: null,
replyUserId: null,
replyContent: null,
replyTime: [],
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await CommentApi.getCommentPage(queryParams)
// visible 如果为 null，会导致刷新的时候触发 e-switch 的 change 事件
data.list.forEach((item) => {
if (!item.visible) {
item.visible = false
}
})
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
// TODO @疯狂：要不回复，也搞一个组件出去？
/** 回复 **/
const replyFormRef = ref()
const replyDialog = reactive({
visible: false,
loading: false,
formData: {
id: -1,
replyContent: ''
},
formRules: {
replyContent: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }]
}
})
const handleReply = (id: number) => {
replyDialog.formData.id = id
replyDialog.formData.replyContent = ''
replyDialog.visible = true
}
const submitReplyForm = async () => {
const valid = await replyFormRef?.value?.validate()
if (!valid) return
replyDialog.loading = true
try {
await CommentApi.replyComment(replyDialog.formData)
message.success(t('common.createSuccess'))
replyDialog.visible = false
await getList()
} finally {
replyDialog.loading = false
}
}
/** 显示/隐藏 **/
const handleVisibleChange = async (row: CommentApi.CommentVO) => {
if (loading.value) {
return
}
let changedValue = row.visible
try {
await message.confirm(changedValue ? '是否显示评论？' : '是否隐藏评论？')
await CommentApi.updateCommentVisible({ id: row.id, visible: changedValue })
await getList()
} catch {
row.visible = !changedValue
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/mall/product/property/index.vue
...@@ -101,6 +101,7 @@ ...@@ -101,6 +101,7 @@
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as PropertyApi from '@/api/mall/product/property' import * as PropertyApi from '@/api/mall/product/property'
import PropertyForm from './PropertyForm.vue' import PropertyForm from './PropertyForm.vue'
const { push } = useRouter() const { push } = useRouter()
defineOptions({ name: 'ProductProperty' }) defineOptions({ name: 'ProductProperty' })
...@@ -164,7 +165,7 @@ const handleDelete = async (id: number) => { ...@@ -164,7 +165,7 @@ const handleDelete = async (id: number) => {
/** 跳转商品属性列表 */ /** 跳转商品属性列表 */
const goValueList = (id: number) => { const goValueList = (id: number) => {
push({ path: '/property/value/' + id }) push({ path: '/product/property/value/' + id })
} }
/** 初始化 **/ /** 初始化 **/
......
src/views/mall/product/spu/addForm.vue
...@@ -42,7 +42,9 @@ import { useTagsViewStore } from '@/store/modules/tagsView' ...@@ -42,7 +42,9 @@ import { useTagsViewStore } from '@/store/modules/tagsView'
import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components' import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
// 业务api // 业务api
import * as ProductSpuApi from '@/api/mall/product/spu' import * as ProductSpuApi from '@/api/mall/product/spu'
import { convertToInteger, formatToFraction } from '@/utils' import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
// TODO @芋艿：后续稍微调整下；
defineOptions({ name: 'ProductSpuForm' }) defineOptions({ name: 'ProductSpuForm' })
...@@ -107,12 +109,20 @@ const getDetail = async () => { ...@@ -107,12 +109,20 @@ const getDetail = async () => {
try { try {
const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.Spu
res.skus?.forEach((item) => { res.skus?.forEach((item) => {
// 回显价格分转元 if (isDetail.value === true) {
item.price = formatToFraction(item.price) item.price = floatToFixed2(item.price)
item.marketPrice = formatToFraction(item.marketPrice) item.marketPrice = floatToFixed2(item.marketPrice)
item.costPrice = formatToFraction(item.costPrice) item.costPrice = floatToFixed2(item.costPrice)
item.subCommissionFirstPrice = formatToFraction(item.subCommissionFirstPrice) item.subCommissionFirstPrice = floatToFixed2(item.subCommissionFirstPrice)
item.subCommissionSecondPrice = formatToFraction(item.subCommissionSecondPrice) 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 formData.value = res
} finally { } finally {
...@@ -132,19 +142,19 @@ const submitForm = async () => { ...@@ -132,19 +142,19 @@ const submitForm = async () => {
await unref(descriptionRef)?.validate() await unref(descriptionRef)?.validate()
await unref(otherSettingsRef)?.validate() await unref(otherSettingsRef)?.validate()
// 深拷贝一份, 这样最终 server 端不满足，不需要恢复， // 深拷贝一份, 这样最终 server 端不满足，不需要恢复，
const deepCopyFormData = cloneDeep(unref(formData.value)) const deepCopyFormData = cloneDeep(unref(formData.value)) as ProductSpuApi.Spu
// 兜底处理 sku 空数据 // 兜底处理 sku 空数据
formData.value.skus!.forEach((sku) => { formData.value.skus!.forEach((sku) => {
// 因为是空数据这里判断一下商品条码是否为空就行 // 因为是空数据这里判断一下商品条码是否为空就行
if (sku.barCode === '') { if (sku.barCode === '') {
const index = deepCopyFormData.skus.findIndex( const index = deepCopyFormData.skus!.findIndex(
(item) => JSON.stringify(item.properties) === JSON.stringify(sku.properties) (item) => JSON.stringify(item.properties) === JSON.stringify(sku.properties)
) )
// 删除这条 sku // 删除这条 sku
deepCopyFormData.skus.splice(index, 1) deepCopyFormData.skus!.splice(index, 1)
} }
}) })
deepCopyFormData.skus.forEach((item) => { deepCopyFormData.skus!.forEach((item) => {
// 给sku name赋值 // 给sku name赋值
item.name = deepCopyFormData.name item.name = deepCopyFormData.name
// sku相关价格元转分 // sku相关价格元转分
...@@ -156,7 +166,7 @@ const submitForm = async () => { ...@@ -156,7 +166,7 @@ const submitForm = async () => {
}) })
// 处理轮播图列表 // 处理轮播图列表
const newSliderPicUrls: any[] = [] const newSliderPicUrls: any[] = []
deepCopyFormData.sliderPicUrls.forEach((item: any) => { deepCopyFormData.sliderPicUrls!.forEach((item: any) => {
// 如果是前端选的图 // 如果是前端选的图
typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item) typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
}) })
......
src/views/mall/product/spu/components/index.ts
...@@ -7,7 +7,6 @@ import SkuList from './SkuList.vue' ...@@ -7,7 +7,6 @@ import SkuList from './SkuList.vue'
import { Spu } from '@/api/mall/product/spu' import { Spu } from '@/api/mall/product/spu'
// TODO @puhui999：Properties 改成 Property 更合适？Property 在 Spu 中已存在避免冲突 PropertyAndValues
interface PropertyAndValues { interface PropertyAndValues {
id: number id: number
name: string name: string
......
src/views/mall/product/spu/index.vue
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column type="expand" width="30"> <el-table-column type="expand" width="30">
<template #default="{ row }"> <template #default="{ row }">
<el-form class="demo-table-expand" label-position="left"> <el-form class="spu-table-expand" label-position="left">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-row> <el-row>
...@@ -91,12 +91,12 @@ ...@@ -91,12 +91,12 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="市场价:"> <el-form-item label="市场价:">
<span>{{ formatToFraction(row.marketPrice) }}</span> <span>{{ floatToFixed2(row.marketPrice) }}元</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="成本价:"> <el-form-item label="成本价:">
<span>{{ formatToFraction(row.costPrice) }}</span> <span>{{ floatToFixed2(row.costPrice) }}元</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -130,9 +130,7 @@ ...@@ -130,9 +130,7 @@
</el-table-column> </el-table-column>
<el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" /> <el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
<el-table-column align="center" label="商品售价" min-width="90" prop="price"> <el-table-column align="center" label="商品售价" min-width="90" prop="price">
<template #default="{ row }"> <template #default="{ row }"> {{ floatToFixed2(row.price) }}元</template>
{{ formatToFraction(row.price) }}
</template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="销量" min-width="90" prop="salesCount" /> <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
<el-table-column align="center" label="库存" min-width="90" prop="stock" /> <el-table-column align="center" label="库存" min-width="90" prop="stock" />
...@@ -229,7 +227,7 @@ import { createImageViewer } from '@/components/ImageViewer' ...@@ -229,7 +227,7 @@ import { createImageViewer } from '@/components/ImageViewer'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/utils/tree' import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/utils/tree'
import { ProductSpuStatusEnum } from '@/utils/constants' import { ProductSpuStatusEnum } from '@/utils/constants'
import { formatToFraction } from '@/utils' import { floatToFixed2 } from '@/utils'
import download from '@/utils/download' import download from '@/utils/download'
import * as ProductSpuApi from '@/api/mall/product/spu' import * as ProductSpuApi from '@/api/mall/product/spu'
import * as ProductCategoryApi from '@/api/mall/product/category' import * as ProductCategoryApi from '@/api/mall/product/category'
...@@ -392,7 +390,7 @@ const resetQuery = () => { ...@@ -392,7 +390,7 @@ const resetQuery = () => {
const openForm = (id?: number) => { const openForm = (id?: number) => {
// 修改 // 修改
if (typeof id === 'number') { if (typeof id === 'number') {
push('/product/spu/edit/' + id) push({ name: 'ProductSpuEdit', params: { spuId: id } })
return return
} }
// 新增 // 新增
...@@ -402,8 +400,8 @@ const openForm = (id?: number) => { ...@@ -402,8 +400,8 @@ const openForm = (id?: number) => {
/** /**
* 查看商品详情 * 查看商品详情
*/ */
const openDetail = (id?: number) => { const openDetail = (id: number) => {
push('/product/spu/detail/' + id) push({ name: 'ProductSpuDetail', params: { spuId: id } })
} }
/** 导出按钮操作 */ /** 导出按钮操作 */
...@@ -458,7 +456,7 @@ onMounted(async () => { ...@@ -458,7 +456,7 @@ onMounted(async () => {
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.demo-table-expand { .spu-table-expand {
padding-left: 42px; padding-left: 42px;
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
......
src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
...@@ -193,16 +193,4 @@ const resetForm = async () => { ...@@ -193,16 +193,4 @@ const resetForm = async () => {
await nextTick() await nextTick()
formRef.value.getElFormRef().resetFields() formRef.value.getElFormRef().resetFields()
} }
// TODO @puhui999：下面的 css 名字，是不是可以改下；demo-table-expand
</script> </script>
<style lang="scss" scoped>
.demo-table-expand {
padding-left: 42px;
:deep(.el-form-item__label) {
width: 82px;
font-weight: bold;
color: #99a9bf;
}
}
</style>
src/views/mall/trade/order/components/DeliveryOrderForm.vue → src/views/mall/trade/order/components/OrderDeliveryForm.vue
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
<Dialog v-model="dialogVisible" title="订单发货" width="25%"> <Dialog v-model="dialogVisible" title="订单发货" width="25%">
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px"> <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
<el-form-item label="发货方式"> <el-form-item label="发货方式">
<el-radio-group v-model="radio"> <el-radio-group v-model="expressType">
<el-radio border label="1">快递物流</el-radio> <el-radio border label="express">快递物流</el-radio>
<el-radio border label="2">无需发货</el-radio> <el-radio border label="none">无需发货</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<template v-if="radio === '1'"> <template v-if="expressType === 'express'">
<el-form-item label="物流公司"> <el-form-item label="物流公司">
<el-select v-model="formData.logisticsId" placeholder="请选择" style="width: 100%"> <el-select v-model="formData.logisticsId" placeholder="请选择" style="width: 100%">
<el-option <el-option
...@@ -32,16 +32,17 @@ ...@@ -32,16 +32,17 @@
<script lang="ts" setup> <script lang="ts" setup>
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express' import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
import * as TradeOrderApi from '@/api/mall/trade/order' import * as TradeOrderApi from '@/api/mall/trade/order'
import { copyValueToTarget } from '@/utils'
// TODO @puhui999：是不是名字叫 OrderDeliveryForm 保持统一 // TODO @puhui999：要不 Form 保持和别的模块一样，和 index.vue 放在一个目录下，不作为 components；components 更多要支持给多个模块使用哈。
defineOptions({ name: 'DeliveryOrderForm' }) defineOptions({ name: 'OrderDeliveryForm' })
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 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>({ const formData = ref<TradeOrderApi.DeliveryVO>({
id: 0, // 订单编号 id: 0, // 订单编号
logisticsId: null, // 物流公司编号 logisticsId: null, // 物流公司编号
...@@ -49,12 +50,14 @@ const formData = ref<TradeOrderApi.DeliveryVO>({ ...@@ -49,12 +50,14 @@ const formData = ref<TradeOrderApi.DeliveryVO>({
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
// TODO @puhui999：每次点击发货的时候，是不是可以把之前的信息带过来哈。
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (orderId: number) => { const open = async (row: TradeOrderApi.OrderVO) => {
resetForm() resetForm()
// 设置数据 // 设置数据
formData.value.id = orderId copyValueToTarget(formData.value, row)
if (row.logisticsId === null || row.logisticsId === 0) {
expressType.value = 'none'
}
dialogVisible.value = true dialogVisible.value = true
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
...@@ -66,7 +69,7 @@ const submitForm = async () => { ...@@ -66,7 +69,7 @@ const submitForm = async () => {
formLoading.value = true formLoading.value = true
try { try {
const data = unref(formData) const data = unref(formData)
if (radio.value === '2') { if (expressType.value === 'none') {
// 无需发货的情况 // 无需发货的情况
data.logisticsId = 0 data.logisticsId = 0
data.logisticsNo = '' data.logisticsNo = ''
......
src/views/mall/trade/order/components/OrderAdjustAddressForm.vue → src/views/mall/trade/order/components/OrderUpdateAddressForm.vue
<template> <template>
<Dialog v-model="dialogVisible" title="修改订单收货地址" width="35%"> <Dialog v-model="dialogVisible" title="修改订单收货地址" width="35%">
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="120px"> <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="120px">
<el-form-item label="收件人名称"> <el-form-item label="收件人">
<el-input v-model="formData.receiverName" /> <el-input v-model="formData.receiverName" placeholder="请输入收件人名称" />
</el-form-item> </el-form-item>
<el-form-item label="收件人手机"> <el-form-item label="手机号">
<el-input v-model="formData.receiverMobile" /> <el-input v-model="formData.receiverMobile" placeholder="请输入收件人手机号" />
</el-form-item> </el-form-item>
<!-- TODO @puhui999：应该是个地区下拉框，可以看下 UserForm 所在地 --> <el-form-item label="所在地">
<el-form-item label="收件人地区编号"> <el-tree-select
<el-input v-model="formData.receiverAreaId" /> v-model="formData.receiverAreaId"
:data="areaList"
:props="defaultProps"
:render-after-expand="true"
/>
</el-form-item> </el-form-item>
<el-form-item label="收件人详细地址"> <el-form-item label="详细地址">
<el-input v-model="formData.receiverDetailAddress" /> <el-input
v-model="formData.receiverDetailAddress"
:rows="3"
placeholder="请输入收件人详细地址"
type="textarea"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
...@@ -23,10 +32,11 @@ ...@@ -23,10 +32,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order' import * as TradeOrderApi from '@/api/mall/trade/order'
import { getAreaTree } from '@/api/system/area'
import { copyValueToTarget } from '@/utils' import { copyValueToTarget } from '@/utils'
import { defaultProps } from '@/utils/tree'
// TODO @puhui999：OrderAdjustAddressForm 改成 OrderUpdateAddressForm 更新哈，保持统一； defineOptions({ name: 'OrderUpdateAddressForm' })
defineOptions({ name: 'OrderAdjustAddressForm' })
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
...@@ -40,6 +50,7 @@ const formData = ref({ ...@@ -40,6 +50,7 @@ const formData = ref({
receiverAreaId: null, //收件人地区编号 receiverAreaId: null, //收件人地区编号
receiverDetailAddress: '' //收件人详细地址 receiverDetailAddress: '' //收件人详细地址
}) })
const areaList = ref([]) // 地区列表
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
/** 打开弹窗 */ /** 打开弹窗 */
...@@ -58,7 +69,7 @@ const submitForm = async () => { ...@@ -58,7 +69,7 @@ const submitForm = async () => {
formLoading.value = true formLoading.value = true
try { try {
const data = unref(formData) const data = unref(formData)
await TradeOrderApi.adjustAddress(data) await TradeOrderApi.updateAddress(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
dialogVisible.value = false dialogVisible.value = false
// 发送操作成功的事件 // 发送操作成功的事件
...@@ -79,4 +90,9 @@ const resetForm = () => { ...@@ -79,4 +90,9 @@ const resetForm = () => {
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }
onMounted(async () => {
// 获得地区列表
areaList.value = await getAreaTree()
})
</script> </script>
src/views/mall/trade/order/components/OrderAdjustPriceForm.vue → src/views/mall/trade/order/components/OrderUpdatePriceForm.vue
...@@ -20,11 +20,10 @@ ...@@ -20,11 +20,10 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order' import * as TradeOrderApi from '@/api/mall/trade/order'
import { convertToInteger, formatToFraction } from '@/utils' import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
// TODO @puhui999：OrderAdjustPriceForm 改成 OrderUpdatePriceForm 更新哈，保持统一； defineOptions({ name: 'OrderUpdatePriceForm' })
defineOptions({ name: 'OrderAdjustPriceForm' })
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
...@@ -40,7 +39,9 @@ const formData = ref({ ...@@ -40,7 +39,9 @@ const formData = ref({
watch( watch(
() => formData.value.adjustPrice, () => formData.value.adjustPrice,
(data: number) => { (data: number) => {
formData.value.newPayPrice = formData.value.payPrice.replace('元', '') * 1 + data + '元' const num = formData.value.payPrice!.replace('元', '')
// @ts-ignore
formData.value.newPayPrice = (num * 1 + data).toFixed(2) + '元'
} }
) )
...@@ -49,10 +50,11 @@ const formRef = ref() // 表单 Ref ...@@ -49,10 +50,11 @@ const formRef = ref() // 表单 Ref
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (row: TradeOrderApi.OrderVO) => { const open = async (row: TradeOrderApi.OrderVO) => {
resetForm() resetForm()
formData.value.id = row.id formData.value.id = row.id!
// 设置数据 // 设置数据
formData.value.adjustPrice = formatToFraction(row.adjustPrice) formData.value.adjustPrice = formatToFraction(row.adjustPrice!)
formData.value.payPrice = formatToFraction(row.payPrice) + '元' formData.value.payPrice = floatToFixed2(row.payPrice!) + '元'
formData.value.newPayPrice = formData.value.payPrice
dialogVisible.value = true dialogVisible.value = true
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
...@@ -67,7 +69,7 @@ const submitForm = async () => { ...@@ -67,7 +69,7 @@ const submitForm = async () => {
data.adjustPrice = convertToInteger(data.adjustPrice) data.adjustPrice = convertToInteger(data.adjustPrice)
delete data.payPrice delete data.payPrice
delete data.newPayPrice delete data.newPayPrice
await TradeOrderApi.adjustPrice(data) await TradeOrderApi.updatePrice(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
dialogVisible.value = false dialogVisible.value = false
// 发送操作成功的事件 // 发送操作成功的事件
......
src/views/mall/trade/order/components/OrderRemarksForm.vue → src/views/mall/trade/order/components/OrderUpdateRemarkForm.vue
<template> <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 ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
<el-form-item label="备注"> <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-item>
</el-form> </el-form>
<template #footer> <template #footer>
...@@ -14,8 +19,7 @@ ...@@ -14,8 +19,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order' import * as TradeOrderApi from '@/api/mall/trade/order'
// TODO @puhui999：OrderRemarksForm 改成 OrderUpdateRemarkForm 更新哈，保持统一； defineOptions({ name: 'OrderUpdateRemarkForm' })
defineOptions({ name: 'OrderRemarksForm' })
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
...@@ -46,7 +50,7 @@ const submitForm = async () => { ...@@ -46,7 +50,7 @@ const submitForm = async () => {
try { try {
const data = unref(formData) const data = unref(formData)
console.log(data) console.log(data)
await TradeOrderApi.remark(data) await TradeOrderApi.updateRemark(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
dialogVisible.value = false dialogVisible.value = false
// 发送操作成功的事件 // 发送操作成功的事件
......
src/views/mall/trade/order/components/OrderDetailForm.vue → src/views/mall/trade/order/detail/index.vue
...@@ -41,10 +41,10 @@ ...@@ -41,10 +41,10 @@
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="orderInfo.status" /> <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="orderInfo.status" />
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label-class-name="no-colon"> <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('remark')">备注</el-button>
<el-button type="primary" @click="openForm('delivery')">发货</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>
<el-descriptions-item> <el-descriptions-item>
<template #label><span style="color: red">提醒: </span></template> <template #label><span style="color: red">提醒: </span></template>
...@@ -68,12 +68,12 @@ ...@@ -68,12 +68,12 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="商品原价(元)" prop="price" width="150"> <el-table-column label="商品原价" prop="price" width="150">
<template #default="{ row }">{{ formatToFraction(row.price) }}</template> <template #default="{ row }">{{ floatToFixed2(row.price) }}元</template>
</el-table-column> </el-table-column>
<el-table-column label="数量" prop="count" width="100" /> <el-table-column label="数量" prop="count" width="100" />
<el-table-column label="合计(元)" prop="payPrice" width="150"> <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>
<el-table-column label="售后状态" prop="afterSaleStatus" width="120"> <el-table-column label="售后状态" prop="afterSaleStatus" width="120">
<template #default="{ row }"> <template #default="{ row }">
...@@ -91,32 +91,32 @@ ...@@ -91,32 +91,32 @@
</el-descriptions> </el-descriptions>
<el-descriptions :column="6"> <el-descriptions :column="6">
<el-descriptions-item label="商品总额: "> <el-descriptions-item label="商品总额: ">
{{ formatToFraction(orderInfo.totalPrice) }}元 {{ floatToFixed2(orderInfo.totalPrice) }}元
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="运费金额: "> <el-descriptions-item label="运费金额: ">
{{ formatToFraction(orderInfo.deliveryPrice) }}元 {{ floatToFixed2(orderInfo.deliveryPrice) }}元
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单调价: "> <el-descriptions-item label="订单调价: ">
{{ formatToFraction(orderInfo.adjustPrice) }}元 {{ floatToFixed2(orderInfo.updatePrice) }}元
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item> <el-descriptions-item>
<template #label><span style="color: red">商品优惠: </span></template> <template #label><span style="color: red">商品优惠: </span></template>
{{ formatToFraction(orderInfo.couponPrice) }}元 {{ floatToFixed2(orderInfo.couponPrice) }}元
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item> <el-descriptions-item>
<template #label><span style="color: red">订单优惠: </span></template> <template #label><span style="color: red">订单优惠: </span></template>
{{ formatToFraction(orderInfo.discountPrice) }}元 {{ floatToFixed2(orderInfo.discountPrice) }}元
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item> <el-descriptions-item>
<template #label><span style="color: red">积分抵扣: </span></template> <template #label><span style="color: red">积分抵扣: </span></template>
{{ formatToFraction(orderInfo.pointPrice) }}元 {{ floatToFixed2(orderInfo.pointPrice) }}元
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-for="item in 5" :key="item" label-class-name="no-colon" /> <el-descriptions-item v-for="item in 5" :key="item" label-class-name="no-colon" />
<!-- 占位 --> <!-- 占位 -->
<el-descriptions-item label="应付金额: "> <el-descriptions-item label="应付金额: ">
{{ formatToFraction(orderInfo.payPrice) }}元 {{ floatToFixed2(orderInfo.payPrice) }}元
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
...@@ -199,71 +199,27 @@ ...@@ -199,71 +199,27 @@
</ContentWrap> </ContentWrap>
<!-- 各种操作的弹窗 --> <!-- 各种操作的弹窗 -->
<DeliveryOrderForm ref="deliveryFormRef" @success="getDetail" /> <OrderDeliveryForm ref="deliveryFormRef" @success="getDetail" />
<OrderRemarksForm ref="remarksFormRef" @success="getDetail" /> <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getDetail" />
<OrderAdjustAddressForm ref="adjustAddressFormRef" @success="getDetail" /> <OrderUpdateAddressForm ref="updateAddressFormRef" @success="getDetail" />
<OrderAdjustPriceForm ref="adjustPriceFormRef" @success="getDetail" /> <OrderUpdatePriceForm ref="updatePriceFormRef" @success="getDetail" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order' import * as TradeOrderApi from '@/api/mall/trade/order'
import { formatToFraction } from '@/utils' import { floatToFixed2 } from '@/utils'
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import OrderRemarksForm from '@/views/mall/trade/order/components/OrderRemarksForm.vue' import OrderUpdateRemarkForm from '@/views/mall/trade/order/components/OrderUpdateRemarkForm.vue'
import DeliveryOrderForm from '@/views/mall/trade/order/components/DeliveryOrderForm.vue' import OrderDeliveryForm from '@/views/mall/trade/order/components/OrderDeliveryForm.vue'
import OrderAdjustAddressForm from '@/views/mall/trade/order/components/OrderAdjustAddressForm.vue' import OrderUpdateAddressForm from '@/views/mall/trade/order/components/OrderUpdateAddressForm.vue'
import OrderAdjustPriceForm from '@/views/mall/trade/order/components/OrderAdjustPriceForm.vue' import OrderUpdatePriceForm from '@/views/mall/trade/order/components/OrderUpdatePriceForm.vue'
// TODO @puhui999：TradeOrderDetailForm 可以挪到 order/detail/index.vue 中，它是一个 vue 界面哈。
defineOptions({ name: 'TradeOrderDetailForm' }) defineOptions({ name: 'TradeOrderDetailForm' })
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { params } = useRoute() // 查询参数 const { params } = useRoute() // 查询参数
// TODO @puhui999：orderInfo 应该不用把属性弄出来也； const orderInfo = ref<TradeOrderApi.OrderVO>({})
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: {}
})
// TODO @puhui999：这个改成直接读属性，不用按照这种写法； // TODO @puhui999：这个改成直接读属性，不用按照这种写法；后续再改
const detailGroups = ref([ const detailGroups = ref([
{ {
title: '物流信息', title: '物流信息',
...@@ -282,7 +238,7 @@ const detailGroups = ref([ ...@@ -282,7 +238,7 @@ const detailGroups = ref([
} }
]) ])
// TODO @puhui999：从后台读数据哈。 // TODO @puhui999：从后台读数据哈。后续再改
const detailInfo = ref({ const detailInfo = ref({
// 物流信息 // 物流信息
expressInfo: { expressInfo: {
...@@ -330,22 +286,22 @@ const detailInfo = ref({ ...@@ -330,22 +286,22 @@ const detailInfo = ref({
}) })
const deliveryFormRef = ref() // 发货表单 Ref const deliveryFormRef = ref() // 发货表单 Ref
const remarksFormRef = ref() // 订单备注表单 Ref const updateRemarkForm = ref() // 订单备注表单 Ref
const adjustAddressFormRef = ref() // 收货地址表单 Ref const updateAddressFormRef = ref() // 收货地址表单 Ref
const adjustPriceFormRef = ref() // 订单调价表单 Ref const updatePriceFormRef = ref() // 订单调价表单 Ref
const openForm = (type: string) => { const openForm = (type: string) => {
switch (type) { switch (type) {
case 'remark': case 'remark':
remarksFormRef.value?.open(orderInfo.value) updateRemarkForm.value?.open(orderInfo.value)
break break
case 'delivery': case 'delivery':
deliveryFormRef.value?.open(orderInfo.value.id) deliveryFormRef.value?.open(orderInfo.value)
break break
case 'adjustAddress': case 'updateAddress':
adjustAddressFormRef.value?.open(orderInfo.value) updateAddressFormRef.value?.open(orderInfo.value)
break break
case 'adjustPrice': case 'updatePrice':
adjustPriceFormRef.value?.open(orderInfo.value) updatePriceFormRef.value?.open(orderInfo.value)
break break
} }
} }
......
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