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

apps/web-antd/src/views/mall/product/comment/data.ts

@@ -1,7 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } 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 +17,7 @@ export function useFormSchema(): VbenFormSchema[] {
         show: () => false,
       },
     },
+    // TODO @puhui999：商品的选择
     {
       fieldName: 'spuId',
       label: '商品',
@@ -24,6 +26,20 @@ export function useFormSchema(): VbenFormSchema[] {
         api: getSpuSimpleList,
         labelField: 'name',
         valueField: 'id',
+        placeholder: '请选择商品',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'skuId',
+      label: '商品规格',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请选择商品规格',
+      },
+      dependencies: {
+        triggerFields: ['spuId'],
+        show: (values) => !!values.spuId,
       },
       rules: 'required',
     },
@@ -31,31 +47,47 @@ export function useFormSchema(): VbenFormSchema[] {
       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 @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),
     },
     {
       fieldName: 'picUrls',
@@ -63,6 +95,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'ImageUpload',
       componentProps: {
         maxNumber: 9,
+        placeholder: '请上传评论图片',
       },
       rules: 'required',
     },
@@ -81,22 +114,36 @@ export function useGridFormSchema(): VbenFormSchema[] {
           { label: '已回复', value: true },
           { label: '未回复', value: false },
         ],
+        placeholder: '请选择回复状态',
+        allowClear: true,
       },
     },
     {
       fieldName: 'spuName',
       label: '商品名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'userNickname',
       label: '用户名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'orderId',
       label: '订单编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入订单编号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'createTime',
@@ -110,23 +157,24 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 表格列配置 */
-// TODO @xingyu：列表的宽度需要优化下，样式~
+/** 列表的字段 */
 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',
       },
@@ -134,7 +182,7 @@ export function useGridColumns<T = MallCommentApi.Comment>(
     {
       field: 'spuName',
       title: '商品名称',
-      minWidth: 200,
+      minWidth: 250,
     },
     {
       field: 'skuProperties',
@@ -151,22 +199,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',
       },
@@ -174,15 +227,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-antd/src/views/mall/product/comment/index.vue

@@ -25,7 +25,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
@@ -38,7 +38,9 @@ function handleCreate() {
 function handleReply(row: MallCommentApi.Comment) {
   prompt({
     component: () => {
-      return h(Textarea, {});
+      return h(Textarea, {
+        placeholder: '请输入回复内容',
+      });
     },
     content: row.content
       ? `用户评论：${row.content}\n请输入回复内容：`
@@ -48,10 +50,10 @@ function handleReply(row: MallCommentApi.Comment) {
   }).then(async (val) => {
     if (val) {
       await replyComment({
-        id: row.id as number,
+        id: row.id!,
         replyContent: val,
       });
-      onRefresh();
+      handleRefresh();
     }
   });
 }
@@ -64,12 +66,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) {
@@ -107,6 +109,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -124,7 +127,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-antd/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({