214 lines
8.4 KiB
Vue
214 lines
8.4 KiB
Vue
<template>
|
|
<div class="divBox">
|
|
<el-card class="box-card">
|
|
<div class="clearfix" slot="header">
|
|
<el-form :inline="true" :model="queryParams" size="small">
|
|
<el-form-item label="许愿树">
|
|
<el-select v-model="queryParams.tree_id" placeholder="请选择许愿树" clearable @change="handleTreeChange">
|
|
<el-option v-for="item in treeList" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="节点">
|
|
<el-select v-model="queryParams.node_id" placeholder="请选择节点" clearable>
|
|
<el-option v-for="item in nodeList" :key="item.id" :label="item.title" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="用户昵称">
|
|
<el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="queryParams.status" placeholder="请选择" clearable>
|
|
<el-option label="显示" :value="1" />
|
|
<el-option label="隐藏" :value="0" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
<el-button @click="handleReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<el-table v-loading="loading" :data="tableData" border style="width: 100%">
|
|
<el-table-column prop="id" label="ID" width="80" align="center" />
|
|
<el-table-column prop="node_title" label="所属节点" width="120" />
|
|
<el-table-column label="头像" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<el-avatar :src="scope.row.user_avatar" :size="40" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="user_nickname" label="昵称" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.is_anonymous === 1 ? '匿名用户' : scope.row.user_nickname }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="content" label="留言内容" min-width="250" show-overflow-tooltip />
|
|
<el-table-column label="图片" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button v-if="scope.row.images && scope.row.images.length" type="text" @click="handleViewImages(scope.row)">查看({{ scope.row.images.length }})</el-button>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="匿名" width="80" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="scope.row.is_anonymous === 1" type="warning" size="small">是</el-tag>
|
|
<el-tag v-else type="info" size="small">否</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.row)" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="create_time" label="留言时间" width="160" align="center" />
|
|
<el-table-column label="操作" width="120" align="center" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small" @click="handleView(scope.row)">详情</el-button>
|
|
<el-button type="text" size="small" style="color: #f56c6c" @click="handleDelete(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination style="margin-top: 20px; text-align: right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" />
|
|
</el-card>
|
|
|
|
<el-dialog title="留言详情" :visible.sync="detailVisible" width="600px">
|
|
<el-descriptions :column="2" border>
|
|
<el-descriptions-item label="用户昵称">{{ detailData.is_anonymous === 1 ? '匿名用户' : detailData.user_nickname }}</el-descriptions-item>
|
|
<el-descriptions-item label="是否匿名">{{ detailData.is_anonymous === 1 ? '是' : '否' }}</el-descriptions-item>
|
|
<el-descriptions-item label="所属节点">{{ detailData.node_title }}</el-descriptions-item>
|
|
<el-descriptions-item label="留言时间">{{ detailData.create_time }}</el-descriptions-item>
|
|
<el-descriptions-item label="留言内容" :span="2">{{ detailData.content }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<div v-if="detailData.images && detailData.images.length" style="margin-top: 20px">
|
|
<div style="margin-bottom: 10px; font-weight: bold">图片：</div>
|
|
<el-image v-for="(img, index) in detailData.images" :key="index" :src="img" :preview-src-list="detailData.images" style="width: 100px; height: 100px; margin-right: 10px" fit="cover" />
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="图片预览" :visible.sync="imageVisible" width="800px">
|
|
<div style="text-align: center">
|
|
<el-image v-for="(img, index) in previewImages" :key="index" :src="img" :preview-src-list="previewImages" style="width: 150px; height: 150px; margin: 10px" fit="cover" />
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { wishTreeListApi, wishTreeInfoApi, wishTreeMessageListApi, wishTreeMessageDeleteApi, wishTreeMessageStatusApi } from '@/api/wishTree';
|
|
|
|
export default {
|
|
name: 'WishTreeMessage',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
treeList: [],
|
|
nodeList: [],
|
|
tableData: [],
|
|
total: 0,
|
|
queryParams: { page: 1, limit: 10, tree_id: '', node_id: '', nickname: '', status: '' },
|
|
detailVisible: false,
|
|
detailData: {},
|
|
imageVisible: false,
|
|
previewImages: [],
|
|
};
|
|
},
|
|
created() {
|
|
this.getTreeList();
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
async getTreeList() {
|
|
try {
|
|
const res = await wishTreeListApi({ page: 1, limit: 1000 });
|
|
this.treeList = res.list || [];
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
},
|
|
async getNodeList(treeId) {
|
|
try {
|
|
const res = await wishTreeInfoApi(treeId);
|
|
this.nodeList = res.nodes || [];
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
},
|
|
async getList() {
|
|
this.loading = true;
|
|
try {
|
|
const res = await wishTreeMessageListApi(this.queryParams);
|
|
this.tableData = (res.list || []).map(item => ({
|
|
...item,
|
|
images: item.images ? (typeof item.images === 'string' ? JSON.parse(item.images) : item.images) : [],
|
|
}));
|
|
this.total = res.total || 0;
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
this.loading = false;
|
|
},
|
|
handleTreeChange(val) {
|
|
this.queryParams.node_id = '';
|
|
this.nodeList = [];
|
|
if (val) {
|
|
this.getNodeList(val);
|
|
}
|
|
},
|
|
handleSearch() {
|
|
this.queryParams.page = 1;
|
|
this.getList();
|
|
},
|
|
handleReset() {
|
|
this.queryParams = { page: 1, limit: 10, tree_id: '', node_id: '', nickname: '', status: '' };
|
|
this.nodeList = [];
|
|
this.getList();
|
|
},
|
|
handleView(row) {
|
|
this.detailData = row;
|
|
this.detailVisible = true;
|
|
},
|
|
handleViewImages(row) {
|
|
this.previewImages = row.images;
|
|
this.imageVisible = true;
|
|
},
|
|
handleDelete(row) {
|
|
this.$confirm('确定要删除该留言吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}).then(async () => {
|
|
try {
|
|
await wishTreeMessageDeleteApi(row.id);
|
|
this.$message.success('删除成功');
|
|
this.getList();
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
});
|
|
},
|
|
async handleStatusChange(row) {
|
|
try {
|
|
await wishTreeMessageStatusApi(row.id);
|
|
this.$message.success('状态修改成功');
|
|
} catch (error) {
|
|
row.status = row.status === 1 ? 0 : 1;
|
|
console.error(error);
|
|
}
|
|
},
|
|
handleSizeChange(val) {
|
|
this.queryParams.limit = val;
|
|
this.getList();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.queryParams.page = val;
|
|
this.getList();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.divBox { padding: 20px; }
|
|
</style>
|