ch
2 years ago
parent
dd1d260faf
commit
25c9818b28
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* @Author: ch
|
||||
* @Date: 2022-06-15 17:55:43
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-06-17 10:43:30
|
||||
* @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 updateCommentShow = (data) =>
|
||||
request({
|
||||
url: '/mall/comment/admin/comment',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
@ -0,0 +1,97 @@
|
||||
import * as api from '@/api/goods/comment.js';
|
||||
import { ElMessage } from 'element-plus/es';
|
||||
const state = {
|
||||
list: [],
|
||||
detail: {},
|
||||
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星',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
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];
|
||||
}
|
||||
delete data.dateRange;
|
||||
delete data.pagingCode;
|
||||
const res = await api.commentList({
|
||||
...rootGetters['local/page'](pagingCode),
|
||||
...data,
|
||||
});
|
||||
if (!res) {
|
||||
ElMessage.error('评价列表查询失败');
|
||||
}
|
||||
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({ state }, params) {
|
||||
const res = await api.updateCommentShow(params);
|
||||
if (!res) {
|
||||
ElMessage.error('状态更新失败！');
|
||||
return Promise.reject('更新失败');
|
||||
}
|
||||
return Promise.resolve(res);
|
||||
},
|
||||
async getDetail({ state, commit }, id) {
|
||||
const res = await api.commentDetail({ id });
|
||||
if (!res) {
|
||||
ElMessage.error('获取详情失败');
|
||||
}
|
||||
commit('setDetail', res);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
};
|
||||
@ -0,0 +1,258 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-06-15 17:29:32
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-06-16 21:24:49
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<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="name">
|
||||
<el-input v-model="state.condition.goodsName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称" prop="name">
|
||||
<el-input v-model="state.condition.nickName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="name">
|
||||
<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>
|
||||
</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: '',
|
||||
nickName: '',
|
||||
phone: '',
|
||||
scoreList: [],
|
||||
isShow: '',
|
||||
dateRange: '',
|
||||
};
|
||||
const state = reactive({
|
||||
condition: { ..._condition },
|
||||
});
|
||||
// 批量操作的值
|
||||
const allShowHideVal = ref(true);
|
||||
|
||||
store.dispatch('comment/search', { pagingCode: _pagingCode });
|
||||
onActivated(() => handleSearch);
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
const handleSearch = async () => {
|
||||
loading.value = true;
|
||||
await store.dispatch('comment/search', { ...state.condition, pagingCode: _pagingCode });
|
||||
loading.value = false;
|
||||
};
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
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