diff --git a/apps/web-ele/src/views/mall/product/comment/data.ts b/apps/web-ele/src/views/mall/product/comment/data.ts index 51b4a3543..c7f366568 100644 --- a/apps/web-ele/src/views/mall/product/comment/data.ts +++ b/apps/web-ele/src/views/mall/product/comment/data.ts @@ -1,7 +1,9 @@ +import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; + import type { VbenFormSchema } from '#/adapter/form'; -import type { VxeGridPropTypes } from '#/adapter/vxe-table'; import type { MallCommentApi } from '#/api/mall/product/comment'; +import { z } from '#/adapter/form'; import { getSpuSimpleList } from '#/api/mall/product/spu'; import { getRangePickerDefaultProps } from '#/utils'; @@ -16,6 +18,7 @@ export function useFormSchema(): VbenFormSchema[] { show: () => false, }, }, + // TODO @puhui999:商品的选择 { fieldName: 'spuId', label: '商品', @@ -24,48 +27,63 @@ export function useFormSchema(): VbenFormSchema[] { api: getSpuSimpleList, labelField: 'name', valueField: 'id', + placeholder: '请选择商品', }, rules: 'required', }, - // TODO @霖:用户头像,有点丑,多了一层 { fieldName: 'userAvatar', label: '用户头像', component: 'ImageUpload', + componentProps: { + placeholder: '请上传用户头像', + }, rules: 'required', }, { fieldName: 'userNickname', label: '用户名称', component: 'Input', + componentProps: { + placeholder: '请输入用户名称', + }, rules: 'required', }, { fieldName: 'content', label: '评论内容', component: 'Textarea', + componentProps: { + placeholder: '请输入评论内容', + }, rules: 'required', }, - // TODO @霖:星级缺了; + // TODO @xingyu:无法使用 Rate 组件,会报 TypeError: Cannot read properties of undefined (reading 'prefixCls') { fieldName: 'descriptionScores', label: '描述星级', - component: 'Rate', - rules: 'required', + component: 'InputNumber', + componentProps: { + placeholder: '请选择描述星级', + }, + rules: z.number().min(1).max(5).default(5), }, { fieldName: 'benefitScores', label: '服务星级', - component: 'Rate', - rules: 'required', + component: 'InputNumber', + componentProps: { + placeholder: '请选择服务星级', + }, + rules: z.number().min(1).max(5).default(5), }, - // TODO @霖:评价图片,有点丑,多了一层 { fieldName: 'picUrls', label: '评论图片', component: 'ImageUpload', componentProps: { maxNumber: 9, + placeholder: '请上传评论图片', }, rules: 'required', }, @@ -84,22 +102,36 @@ export function useGridFormSchema(): VbenFormSchema[] { { label: '已回复', value: true }, { label: '未回复', value: false }, ], + placeholder: '请选择回复状态', + clearable: true, }, }, { fieldName: 'spuName', label: '商品名称', component: 'Input', + componentProps: { + placeholder: '请输入商品名称', + clearable: true, + }, }, { fieldName: 'userNickname', label: '用户名称', component: 'Input', + componentProps: { + placeholder: '请输入用户名称', + clearable: true, + }, }, { fieldName: 'orderId', label: '订单编号', component: 'Input', + componentProps: { + placeholder: '请输入订单编号', + clearable: true, + }, }, { fieldName: 'createTime', @@ -113,23 +145,24 @@ export function useGridFormSchema(): VbenFormSchema[] { ]; } -/** 表格列配置 */ -// TODO @霖:列表的宽度需要优化下,样式~ +/** 列表的字段 */ export function useGridColumns( onStatusChange?: ( newStatus: boolean, row: T, ) => PromiseLike, -): VxeGridPropTypes.Columns { +): VxeTableGridOptions['columns'] { return [ { field: 'id', title: '评论编号', fixed: 'left', + minWidth: 80, }, { field: 'skuPicUrl', title: '商品图片', + minWidth: 100, cellRender: { name: 'CellImage', }, @@ -137,7 +170,7 @@ export function useGridColumns( { field: 'spuName', title: '商品名称', - minWidth: 200, + minWidth: 250, }, { field: 'skuProperties', @@ -154,22 +187,27 @@ export function useGridColumns( { field: 'userNickname', title: '用户名称', + minWidth: 100, }, { field: 'descriptionScores', title: '商品评分', + minWidth: 90, }, { field: 'benefitScores', title: '服务评分', + minWidth: 90, }, { field: 'content', title: '评论内容', + minWidth: 210, }, { field: 'picUrls', title: '评论图片', + minWidth: 120, cellRender: { name: 'CellImages', }, @@ -177,15 +215,18 @@ export function useGridColumns( { field: 'replyContent', title: '回复内容', + minWidth: 250, }, { field: 'createTime', title: '评论时间', + minWidth: 180, formatter: 'formatDateTime', }, { field: 'visible', title: '是否展示', + minWidth: 110, align: 'center', cellRender: { attrs: { beforeChange: onStatusChange }, diff --git a/apps/web-ele/src/views/mall/product/comment/index.vue b/apps/web-ele/src/views/mall/product/comment/index.vue index d93a4bf6b..1a043a772 100644 --- a/apps/web-ele/src/views/mall/product/comment/index.vue +++ b/apps/web-ele/src/views/mall/product/comment/index.vue @@ -25,7 +25,7 @@ const [FormModal, formModalApi] = useVbenModal({ }); /** 刷新表格 */ -function onRefresh() { +function handleRefresh() { gridApi.query(); } @@ -40,6 +40,7 @@ function handleReply(row: MallCommentApi.Comment) { component: () => { return h(ElInput, { type: 'textarea', + placeholder: '请输入回复内容', }); }, content: row.content @@ -50,16 +51,15 @@ function handleReply(row: MallCommentApi.Comment) { }).then(async (val) => { if (val) { await replyComment({ - id: row.id as number, + id: row.id!, replyContent: val, }); - onRefresh(); + handleRefresh(); } }); } /** 更新状态 */ -// TODO @霖:貌似刷新后,就会触发 async function handleStatusChange( newStatus: boolean, row: MallCommentApi.Comment, @@ -67,12 +67,12 @@ async function handleStatusChange( return new Promise((resolve, reject) => { const text = newStatus ? '展示' : '隐藏'; confirm({ - content: `确认要${text + row.id}评论吗?`, + content: `确认要${text}该评论吗?`, }) .then(async () => { // 更新状态 const res = await updateCommentVisible({ - id: row.id as number, + id: row.id!, visible: newStatus, }); if (res) { @@ -110,6 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, rowConfig: { keyField: 'id', + isHover: true, }, toolbarConfig: { refresh: true, @@ -127,7 +128,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ url="https://doc.iocoder.cn/mall/product-comment/" /> - +