feat：【ele】【mall】comment 代码对齐 antd

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

@@ -3,7 +3,6 @@ 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';
 
 /** 新增/修改的表单 */
@@ -17,19 +16,28 @@ export function useFormSchema(): VbenFormSchema[] {
         show: () => false,
       },
     },
-    // TODO @puhui999：商品的选择
     {
       fieldName: 'spuId',
       label: '商品',
-      component: 'ApiSelect',
+      component: 'Input',
       componentProps: {
-        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',
+    },
     {
       fieldName: 'userAvatar',
       label: '用户头像',
@@ -88,7 +96,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'replyStatus',
       label: '回复状态',
-      component: 'Select',
+      component: 'RadioGroup',
       componentProps: {
         options: [
           { label: '已回复', value: true },

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

@@ -2,8 +2,6 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCommentApi } from '#/api/mall/product/comment';
 
-import { h } from 'vue';
-
 import { confirm, DocAlert, Page, prompt, useVbenModal } from '@vben/common-ui';
 
 import { ElInput, ElMessage, ElRate } from 'element-plus';
@@ -37,17 +35,17 @@ function handleCreate() {
 /** 回复评价 */
 function handleReply(row: MallCommentApi.Comment) {
   prompt({
-    component: () => {
-      return h(ElInput, {
-        type: 'textarea',
-        placeholder: '请输入回复内容',
-      });
+    component: ElInput,
+    componentProps: {
+      type: 'textarea',
+      placeholder: '请输入回复内容',
+      rows: 4,
     },
     content: row.content
       ? `用户评论：${row.content}\n请输入回复内容：`
       : '请输入回复内容：',
     title: '回复评论',
-    modelPropName: 'value',
+    modelPropName: 'modelValue',
   }).then(async (val) => {
     if (val) {
       await replyComment({
@@ -127,10 +125,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <Grid table-title="评论列表">
       <template #descriptionScores="{ row }">
-        <ElRate v-model="row.descriptionScores" :disabled="true" />
+        <ElRate :model-value="row.descriptionScores" disabled />
       </template>
       <template #benefitScores="{ row }">
-        <ElRate v-model="row.benefitScores" :disabled="true" />
+        <ElRate :model-value="row.benefitScores" disabled />
       </template>
       <template #toolbar-tools>
         <TableAction
@@ -150,8 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               label: '回复',
-              type: 'primary',
-              link: true,
+              type: 'text',
               auth: ['product:comment:update'],
               onClick: handleReply.bind(null, row),
             },

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

@@ -1,22 +1,30 @@
 <script lang="ts" setup>
 import type { MallCommentApi } from '#/api/mall/product/comment';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
 import { createComment, getComment } from '#/api/mall/product/comment';
+import { getSpu } from '#/api/mall/product/spu';
 import { $t } from '#/locales';
+import {
+  SkuTableSelect,
+  SpuShowcase,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-// TODO @puhui999：这里和 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/comment/modules/form.vue 存在差异，是不是还没迁移到呀。
-const formData = ref<MallCommentApi.Comment>();
+const formData = ref<Partial<MallCommentApi.Comment>>({
+  descriptionScores: 5,
+  benefitScores: 5,
+});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['虚拟评论'])
@@ -36,6 +44,40 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+const skuTableSelectRef = ref<InstanceType<typeof SkuTableSelect>>();
+const selectedSku = ref<MallSpuApi.Sku>();
+
+/** 处理商品的选择变化 */
+async function handleSpuChange(spu?: MallSpuApi.Spu | null) {
+  // 处理商品选择：如果 spu 为 null 或 id 为 0，表示清空选择
+  const spuId = spu?.id && spu.id ? spu.id : undefined;
+  formData.value.spuId = spuId;
+  await formApi.setFieldValue('spuId', spuId);
+  // 清空已选规格
+  selectedSku.value = undefined;
+  formData.value.skuId = undefined;
+  await formApi.setFieldValue('skuId', undefined);
+}
+
+/** 打开商品规格的选择弹框 */
+async function openSkuSelect() {
+  const currentValues =
+    (await formApi.getValues()) as Partial<MallCommentApi.Comment>;
+  const currentSpuId = currentValues.spuId ?? formData.value?.spuId;
+  if (!currentSpuId) {
+    ElMessage.warning('请先选择商品');
+    return;
+  }
+  skuTableSelectRef.value?.open({ spuId: currentSpuId });
+}
+
+/** 处理商品规格的选择 */
+async function handleSkuSelected(sku: MallSpuApi.Sku) {
+  selectedSku.value = sku;
+  formData.value.skuId = sku.id;
+  await formApi.setFieldValue('skuId', sku.id);
+}
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -57,7 +99,9 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      // 关闭时重置表单状态
+      selectedSku.value = undefined;
+      await formApi.setValues({ spuId: undefined, skuId: undefined });
       return;
     }
     // 加载数据
@@ -65,11 +109,22 @@ const [Modal, modalApi] = useVbenModal({
     if (!data || !data.id) {
       return;
     }
+    // 编辑模式：加载数据
     modalApi.lock();
     try {
       formData.value = await getComment(data.id);
       // 设置到 values
       await formApi.setValues(formData.value);
+      // 回显已选的商品规格
+      if (formData.value?.spuId && formData.value?.skuId) {
+        const spu = await getSpu(formData.value.spuId);
+        const sku = spu.skus?.find((item) => item.id === formData.value!.skuId);
+        if (sku) {
+          selectedSku.value = sku;
+        }
+      } else {
+        selectedSku.value = undefined;
+      }
     } finally {
       modalApi.unlock();
     }
@@ -79,6 +134,37 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <template #spuId>
+        <SpuShowcase
+          v-model="(formData as any).spuId"
+          :limit="1"
+          @change="handleSpuChange"
+        />
+      </template>
+      <template #skuId>
+        <div class="flex items-center gap-2">
+          <ElButton
+            type="primary"
+            :disabled="!formData?.spuId"
+            @click="openSkuSelect"
+          >
+            选择规格
+          </ElButton>
+          <span
+            v-if="
+              selectedSku &&
+              selectedSku.properties &&
+              selectedSku.properties.length > 0
+            "
+          >
+            已选：
+            {{ selectedSku.properties.map((p: any) => p.valueName).join('/') }}
+          </span>
+          <span v-else-if="selectedSku">已选：{{ selectedSku.id }}</span>
+        </div>
+      </template>
+    </Form>
+    <SkuTableSelect ref="skuTableSelectRef" @change="handleSkuSelected" />
   </Modal>
 </template>