商品评论：回复表单提取到单独的组件中

Author: owen118z

src/views/mall/product/comment/CommentForm.vue

@@ -75,7 +75,6 @@ const formData = ref({
   spuId: undefined,
   spuName: undefined,
   skuId: undefined,
-  scores: 5,
   descriptionScores: 5,
   benefitScores: 5,
   content: undefined,
@@ -87,7 +86,6 @@ const formRules = reactive({
   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' }]
 })
@@ -153,7 +151,6 @@ const resetForm = () => {
     userAvatar: undefined,
     spuId: undefined,
     skuId: undefined,
-    scores: 5,
     descriptionScores: 5,
     benefitScores: 5,
     content: undefined,

src/views/mall/product/comment/ReplyForm.vue

@@ -0,0 +1,77 @@
+<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="replyContent">
+        <el-input type="textarea" v-model="formData.replyContent" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitReplyForm" type="primary" :disabled="formLoading">确 定 </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import * as CommentApi from '@/api/mall/product/comment'
+import { ElInput } from 'element-plus'
+
+defineOptions({ name: 'ProductComment' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  replyContent: undefined
+})
+const formRules = reactive({
+  replyContent: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (id?: number) => {
+  resetForm()
+  formData.value.id = id
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
+const submitReplyForm = async () => {
+  const valid = await formRef?.value?.validate()
+  if (!valid) return
+
+  formLoading.value = true
+  try {
+    await CommentApi.replyComment(formData.value)
+    message.success(t('common.createSuccess'))
+
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    replyContent: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/mall/product/comment/index.vue

@@ -60,7 +60,6 @@
   <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">
@@ -144,33 +143,15 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <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>
+  <!-- 回复表单弹窗 -->
+  <ReplyForm ref="replyFormRef" @success="getList" />
 </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'
+import ReplyForm from '@/views/mall/product/comment/ReplyForm.vue'
 
 defineOptions({ name: 'ProductComment' })
 
@@ -242,39 +223,10 @@ 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
-  }
+  replyFormRef.value.open(id)
 }
 
 /** 显示/隐藏 **/