From 3a1539009026fc71de16db0ef72f24d392479d75 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sat, 26 Aug 2023 13:34:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E8=AF=84=E8=AE=BA=EF=BC=9A?=
=?UTF-8?q?=E5=9B=9E=E5=A4=8D=E8=A1=A8=E5=8D=95=E6=8F=90=E5=8F=96=E5=88=B0?=
=?UTF-8?q?=E5=8D=95=E7=8B=AC=E7=9A=84=E7=BB=84=E4=BB=B6=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../mall/product/comment/CommentForm.vue | 3 -
src/views/mall/product/comment/ReplyForm.vue | 77 +++++++++++++++++++
src/views/mall/product/comment/index.vue | 58 ++------------
3 files changed, 82 insertions(+), 56 deletions(-)
create mode 100644 src/views/mall/product/comment/ReplyForm.vue
diff --git a/src/views/mall/product/comment/CommentForm.vue b/src/views/mall/product/comment/CommentForm.vue
index 8a60bef1..77557437 100644
--- a/src/views/mall/product/comment/CommentForm.vue
+++ b/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,
diff --git a/src/views/mall/product/comment/ReplyForm.vue b/src/views/mall/product/comment/ReplyForm.vue
new file mode 100644
index 00000000..4ce36781
--- /dev/null
+++ b/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>
diff --git a/src/views/mall/product/comment/index.vue b/src/views/mall/product/comment/index.vue
index 7647aff1..4fe65a86 100644
--- a/src/views/mall/product/comment/index.vue
+++ b/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)
}
/** 显示/隐藏 **/