feat：【mall 商城】商品评论的迁移（ele）

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<T = MallCommentApi.Comment>(
   onStatusChange?: (
     newStatus: boolean,
     row: T,
   ) => PromiseLike<boolean | undefined>,
-): 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<T = MallCommentApi.Comment>(
     {
       field: 'spuName',
       title: '商品名称',
-      minWidth: 200,
+      minWidth: 250,
     },
     {
       field: 'skuProperties',
@@ -154,22 +187,27 @@ export function useGridColumns<T = MallCommentApi.Comment>(
     {
       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<T = MallCommentApi.Comment>(
     {
       field: 'replyContent',
       title: '回复内容',
+      minWidth: 250,
     },
     {
       field: 'createTime',
       title: '评论时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       field: 'visible',
       title: '是否展示',
+      minWidth: 110,
       align: 'center',
       cellRender: {
         attrs: { beforeChange: onStatusChange },

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/"
       />
     </template>
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid table-title="评论列表">
       <template #toolbar-tools>
         <TableAction

apps/web-ele/src/views/mall/product/comment/modules/form.vue

@@ -18,8 +18,8 @@ const emit = defineEmits(['success']);
 const formData = ref<MallCommentApi.Comment>();
 const getTitle = computed(() => {
   return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['品牌'])
-    : $t('ui.actionTitle.create', ['品牌']);
+    ? $t('ui.actionTitle.edit', ['虚拟评论'])
+    : $t('ui.actionTitle.create', ['虚拟评论']);
 });
 
 const [Form, formApi] = useVbenForm({