ch
2 years ago
commit
2a2203eed9
@ -0,0 +1,36 @@
|
|||||||
|
/*
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-15 17:55:43
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-24 09:44:44
|
||||||
|
* @Description: file content
|
||||||
|
*/
|
||||||
|
import request from '@/utils/request.js';
|
||||||
|
//获取评论列表
|
||||||
|
export const commentList = (params) =>
|
||||||
|
request({
|
||||||
|
url: '/mall/comment/admin/comment',
|
||||||
|
method: 'get',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
// 获取评价详情
|
||||||
|
export const commentDetail = ({ id }) =>
|
||||||
|
request({
|
||||||
|
url: `/mall/comment/admin/comment/getCommentDetail/${id}`,
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
|
||||||
|
//评论
|
||||||
|
export const commentAdd = (data) =>
|
||||||
|
request({
|
||||||
|
url: '/mall/comment/admin/merchantComment',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
// 更新评价显示状态
|
||||||
|
export const updateCommentShow = (data) =>
|
||||||
|
request({
|
||||||
|
url: '/mall/comment/admin/comment',
|
||||||
|
method: 'put',
|
||||||
|
data,
|
||||||
|
});
|
||||||
@ -0,0 +1,206 @@
|
|||||||
|
import * as api from '@/api/goods/comment.js';
|
||||||
|
import { ElMessage } from 'element-plus/es';
|
||||||
|
const state = {
|
||||||
|
list: [],
|
||||||
|
detail: {
|
||||||
|
id: 18,
|
||||||
|
originId: 0,
|
||||||
|
parentId: 0,
|
||||||
|
userId: 97,
|
||||||
|
userName: 'ocean',
|
||||||
|
commentContent: '用户超时未做出评价，系统默认好评',
|
||||||
|
isShow: false,
|
||||||
|
createTime: '2022-06-17 15:27:09',
|
||||||
|
commentType: 1,
|
||||||
|
userAvatar: 'https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/default-headimg.png',
|
||||||
|
skuName: '测试SKU',
|
||||||
|
productName: '测试虚拟111',
|
||||||
|
phone: '151****5744',
|
||||||
|
pictureUrl: 'https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/120x120.png',
|
||||||
|
commentScore: 5,
|
||||||
|
followComment: {
|
||||||
|
id: 19,
|
||||||
|
originId: 18,
|
||||||
|
parentId: 18,
|
||||||
|
userId: 97,
|
||||||
|
userName: 'ocean',
|
||||||
|
commentContent: '新增一条追评',
|
||||||
|
isShow: true,
|
||||||
|
createTime: '2022-06-17 17:13:32',
|
||||||
|
commentType: 2,
|
||||||
|
},
|
||||||
|
answerCommentList: [
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
originId: 18,
|
||||||
|
parentId: 18,
|
||||||
|
userId: 8,
|
||||||
|
userName: '随机昵称',
|
||||||
|
commentContent: '新增一条回复',
|
||||||
|
isShow: true,
|
||||||
|
createTime: '2022-06-17 17:14:02',
|
||||||
|
commentType: 3,
|
||||||
|
parentUserName: 'ocean',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 21,
|
||||||
|
originId: 18,
|
||||||
|
parentId: 18,
|
||||||
|
userId: 8,
|
||||||
|
userName: '随机昵称',
|
||||||
|
commentContent: '1232321',
|
||||||
|
isShow: true,
|
||||||
|
createTime: '2022-06-17 18:31:48',
|
||||||
|
commentType: 3,
|
||||||
|
parentUserName: 'ocean',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 22,
|
||||||
|
originId: 18,
|
||||||
|
parentId: 18,
|
||||||
|
userId: 8,
|
||||||
|
userName: '随机昵称',
|
||||||
|
commentContent: '我回复我回复我回复我回复我回复',
|
||||||
|
isShow: true,
|
||||||
|
createTime: '2022-06-17 18:32:39',
|
||||||
|
commentType: 3,
|
||||||
|
parentUserName: 'ocean',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 23,
|
||||||
|
originId: 18,
|
||||||
|
parentId: 22,
|
||||||
|
userId: 8,
|
||||||
|
userName: '随机昵称',
|
||||||
|
commentContent: '222222222222',
|
||||||
|
isShow: true,
|
||||||
|
createTime: '2022-06-17 18:34:30',
|
||||||
|
commentType: 3,
|
||||||
|
parentUserName: '随机昵称',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 24,
|
||||||
|
originId: 18,
|
||||||
|
parentId: 18,
|
||||||
|
userId: 8,
|
||||||
|
userName: '随机昵称',
|
||||||
|
commentContent: '直接评论直接评论',
|
||||||
|
isShow: true,
|
||||||
|
createTime: '2022-06-17 18:36:03',
|
||||||
|
commentType: 3,
|
||||||
|
parentUserName: 'ocean',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
total: 0,
|
||||||
|
opts: {
|
||||||
|
isShow: [
|
||||||
|
{
|
||||||
|
value: true,
|
||||||
|
label: '显示',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: false,
|
||||||
|
label: '隐藏',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
score: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: '1星',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: '2星',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: '3星',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 4,
|
||||||
|
label: '4星',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 5,
|
||||||
|
label: '5星',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
commentType: {
|
||||||
|
// 评论
|
||||||
|
comment: 1,
|
||||||
|
// 追评
|
||||||
|
addComment: 2,
|
||||||
|
// 回复
|
||||||
|
reply: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const getters = {};
|
||||||
|
const mutations = {
|
||||||
|
setList: (state, data) => (state.list = data),
|
||||||
|
setTotal: (state, data) => (state.total = data),
|
||||||
|
setDetail: (state, data) => (state.detail = data),
|
||||||
|
};
|
||||||
|
const actions = {
|
||||||
|
async search({ state, commit, rootGetters }, params) {
|
||||||
|
let data = { ...params };
|
||||||
|
let pagingCode = params.pagingCode;
|
||||||
|
if (data.dateRange?.length) {
|
||||||
|
data.commentTimeBegin = data.dateRange[0];
|
||||||
|
data.commentTimeEnd = data.dateRange[1];
|
||||||
|
}
|
||||||
|
if (data.scoreList) {
|
||||||
|
data.commentScoreList = data.scoreList.join(',');
|
||||||
|
delete data.scoreList;
|
||||||
|
}
|
||||||
|
delete data.dateRange;
|
||||||
|
delete data.pagingCode;
|
||||||
|
const res = await api.commentList({
|
||||||
|
...rootGetters['local/page'](pagingCode),
|
||||||
|
...data,
|
||||||
|
});
|
||||||
|
if (res) {
|
||||||
|
commit(
|
||||||
|
'setList',
|
||||||
|
res?.records.map((i) => ({
|
||||||
|
...i,
|
||||||
|
scoreName: state.opts.score.find((item) => item.value === i.commentScore)?.label,
|
||||||
|
})) || []
|
||||||
|
);
|
||||||
|
commit('setTotal', res?.total || 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async updateShow({}, params) {
|
||||||
|
const res = await api.updateCommentShow(params);
|
||||||
|
if (!res) {
|
||||||
|
ElMessage.error('状态更新失败！');
|
||||||
|
return Promise.reject('状态更新失败！');
|
||||||
|
}
|
||||||
|
return Promise.resolve(res);
|
||||||
|
},
|
||||||
|
async getDetail({ commit }, id) {
|
||||||
|
const res = await api.commentDetail({ id });
|
||||||
|
if (!res) {
|
||||||
|
ElMessage.error('获取详情失败');
|
||||||
|
return Promise.reject('获取详情失败');
|
||||||
|
}
|
||||||
|
commit('setDetail', res);
|
||||||
|
return Promise.resolve(res);
|
||||||
|
},
|
||||||
|
async add({}, data) {
|
||||||
|
const res = await api.commentAdd(data);
|
||||||
|
if (!res) {
|
||||||
|
ElMessage.error('回复失败');
|
||||||
|
return Promise.reject(false);
|
||||||
|
}
|
||||||
|
return Promise.resolve(res);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
state,
|
||||||
|
getters,
|
||||||
|
mutations,
|
||||||
|
actions,
|
||||||
|
};
|
||||||
@ -0,0 +1,260 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-15 17:29:32
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-30 16:14:29
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<table-list
|
||||||
|
v-loading="loading"
|
||||||
|
:operation="['search']"
|
||||||
|
:code="_pagingCode"
|
||||||
|
:config="config"
|
||||||
|
:data="list"
|
||||||
|
:total="total"
|
||||||
|
@search="handleSearch"
|
||||||
|
:reset="handleReset"
|
||||||
|
>
|
||||||
|
<template #search>
|
||||||
|
<el-form inline>
|
||||||
|
<el-form-item label="商品名称" prop="productName">
|
||||||
|
<el-input v-model="state.condition.productName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户昵称">
|
||||||
|
<el-input v-model="state.condition.userName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="手机号" prop="phone">
|
||||||
|
<el-input v-model="state.condition.phone" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="评分" prop="name">
|
||||||
|
<el-select v-model="state.condition.scoreList" multiple collapse-tags collapse-tags-tooltip>
|
||||||
|
<el-option
|
||||||
|
v-for="(item, idx) in opts.score"
|
||||||
|
:key="idx"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否显示" prop="name">
|
||||||
|
<el-select v-model="state.condition.isShow">
|
||||||
|
<el-option
|
||||||
|
v-for="(item, idx) in opts.isShow"
|
||||||
|
:key="idx"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="评价时间" prop="dateRange">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="state.condition.dateRange"
|
||||||
|
:default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
|
||||||
|
type="datetimerange"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #operation="{ selection }">
|
||||||
|
<div class="batch-show-hide" v-if="selection.length">
|
||||||
|
<el-select v-model="allShowHideVal">
|
||||||
|
<el-option
|
||||||
|
v-for="(item, idx) in opts.isShow"
|
||||||
|
:key="idx"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" @click="handleAllShowHide(selection)">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</table-list>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import ElButton from '@/components/extra/ElButton.vue';
|
||||||
|
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
||||||
|
const router = useRouter();
|
||||||
|
const store = useStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
// 页面字典表数据
|
||||||
|
const opts = computed(() => store.state.comment.opts);
|
||||||
|
// 表格数据
|
||||||
|
const list = computed(() => _.cloneDeep(store.state.comment.list));
|
||||||
|
const total = computed(() => store.state.comment.total);
|
||||||
|
// 分页code需要使用此code到全局sotre取分页参数
|
||||||
|
const _pagingCode = 'CommentManagement';
|
||||||
|
// 表格查询参数
|
||||||
|
const _condition = {
|
||||||
|
productName: '',
|
||||||
|
userName: '',
|
||||||
|
phone: '',
|
||||||
|
scoreList: [],
|
||||||
|
isShow: '',
|
||||||
|
dateRange: '',
|
||||||
|
};
|
||||||
|
const state = reactive({
|
||||||
|
condition: { ..._condition },
|
||||||
|
});
|
||||||
|
// 批量操作的值
|
||||||
|
const allShowHideVal = ref(true);
|
||||||
|
|
||||||
|
// store.dispatch('comment/search', { pagingCode: _pagingCode });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索
|
||||||
|
*/
|
||||||
|
const handleSearch = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('comment/search', { ...state.condition, pagingCode: _pagingCode });
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
onActivated(handleSearch);
|
||||||
|
/**
|
||||||
|
* 重置
|
||||||
|
*/
|
||||||
|
const handleReset = () => {
|
||||||
|
state.condition = { ..._condition };
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 单行操作显示隐藏
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
const handleShowHide = async (row) => {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
await store.dispatch('comment/updateShow', {
|
||||||
|
idList: [row.id],
|
||||||
|
isShow: row.isShow,
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
row.isShow = !row.isShow;
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 批量操作显示隐藏
|
||||||
|
*/
|
||||||
|
const handleAllShowHide = async (selection) => {
|
||||||
|
loading.value = true;
|
||||||
|
let val = allShowHideVal.value;
|
||||||
|
try {
|
||||||
|
await store.dispatch('comment/updateShow', {
|
||||||
|
idList: selection.map((i) => i.id),
|
||||||
|
isShow: val,
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
val = !val;
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
selection.forEach((item) => {
|
||||||
|
item.isShow = val;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const handleDetail = (id) => {
|
||||||
|
router.push({
|
||||||
|
name: 'CommentDetail',
|
||||||
|
params: {
|
||||||
|
id: id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = reactive({
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
type: 'selection',
|
||||||
|
fixed: 'left',
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品名称',
|
||||||
|
width: 180,
|
||||||
|
align: 'left',
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => <div class="row-ellipsis">{row.productName}</div>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '评价内容',
|
||||||
|
align: 'left',
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<div class="row-ellipsis ctx-link" onClick={() => handleDetail(row.id)}>
|
||||||
|
{row.commentContent}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '评分',
|
||||||
|
prop: 'scoreName',
|
||||||
|
width: 70,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '用户',
|
||||||
|
width: 120,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<div>
|
||||||
|
<p class="row-ellipsis">{row.userName}</p>
|
||||||
|
<p>{row.phone}</p>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '评价时间',
|
||||||
|
prop: 'time',
|
||||||
|
width: 120,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<div>
|
||||||
|
<p>{row.createTime.split(' ')[0]}</p>
|
||||||
|
<p>{row.createTime.split(' ')[1]}</p>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '显示',
|
||||||
|
width: 80,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => <ElSwitch v-model={row.isShow} onChange={() => handleShowHide(row)} />,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '操作',
|
||||||
|
width: 70,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<ElButton type="text" onClick={() => handleDetail(row.id)}>
|
||||||
|
查看
|
||||||
|
</ElButton>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.batch-show-hide {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
:deep(.row-ellipsis) {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
:deep(.ctx-link) {
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue