commit
d09366b9bd
@ -36,10 +36,6 @@
|
||||
<el-form-item label="评论内容" prop="content">
|
||||
<el-input type="textarea" v-model="formData.content" />
|
||||
</el-form-item>
|
||||
<!-- TODO @疯狂:formData.scores 是通过后端计算的哈,不要前端传递 -->
|
||||
<el-form-item label="评分星级" prop="scores">
|
||||
<el-rate v-model="formData.scores" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述星级" prop="descriptionScores">
|
||||
<el-rate v-model="formData.descriptionScores" />
|
||||
</el-form-item>
|
||||
@ -60,9 +56,9 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as CommentApi from '@/api/mall/product/comment'
|
||||
import SpuTableSelect from '@/views/mall/product/comment/components/SpuTableSelect.vue'
|
||||
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import SkuTableSelect from '@/views/mall/product/comment/components/SkuTableSelect.vue'
|
||||
import SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
@ -79,7 +75,6 @@ const formData = ref({
|
||||
spuId: undefined,
|
||||
spuName: undefined,
|
||||
skuId: undefined,
|
||||
scores: 5,
|
||||
descriptionScores: 5,
|
||||
benefitScores: 5,
|
||||
content: undefined,
|
||||
@ -91,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' }]
|
||||
})
|
||||
@ -157,7 +151,6 @@ const resetForm = () => {
|
||||
userAvatar: undefined,
|
||||
spuId: undefined,
|
||||
skuId: undefined,
|
||||
scores: 5,
|
||||
descriptionScores: 5,
|
||||
benefitScores: 5,
|
||||
content: undefined,
|
||||
|
77
src/views/mall/product/comment/ReplyForm.vue
Normal file
77
src/views/mall/product/comment/ReplyForm.vue
Normal file
@ -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>
|
@ -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)
|
||||
}
|
||||
|
||||
/** 显示/隐藏 **/
|
||||
|
@ -37,7 +37,6 @@ import { ElTable } from 'element-plus'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
// TODO @疯狂:是不是挪到 spu 的 components 下哈
|
||||
defineOptions({ name: 'SkuTableSelect' })
|
||||
|
||||
const props = defineProps({
|
@ -86,7 +86,6 @@ import { defaultProps, handleTree } from '@/utils/tree'
|
||||
import * as ProductCategoryApi from '@/api/mall/product/category'
|
||||
import * as ProductSpuApi from '@/api/mall/product/spu'
|
||||
|
||||
// TODO @疯狂:是不是挪到 spu 的 components 下哈
|
||||
defineOptions({ name: 'SpuTableSelect' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
Loading…
Reference in New Issue
Block a user