parent
12fe818f6f
commit
553e108b46
@ -0,0 +1,10 @@
|
|||||||
|
import httpService from "@/request"
|
||||||
|
|
||||||
|
// 话题列表
|
||||||
|
export function topicList(params) {
|
||||||
|
return httpService({
|
||||||
|
url: `/user/topic/list`,
|
||||||
|
method: 'get',
|
||||||
|
params: params,
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,313 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="cardTitle">动态信息</div>
|
||||||
|
<div class="content">
|
||||||
|
<span class="title">动态内容</span>
|
||||||
|
<a-row>
|
||||||
|
<a-col class="text-content">{{ detailData.content }}</a-col>
|
||||||
|
<a-col class="img-box">
|
||||||
|
<!-- <img
|
||||||
|
:src="$ImgUrl(img.url)"
|
||||||
|
class="contentImg"
|
||||||
|
v-for="(img, index) in detailData.imgList"
|
||||||
|
:key="index"
|
||||||
|
/> -->
|
||||||
|
<img src="https://img0.baidu.com/it/u=2560936835,1792581374&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=403" class="contentImg" alt="">
|
||||||
|
<img src="https://img0.baidu.com/it/u=2560936835,1792581374&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=403" class="contentImg" alt="">
|
||||||
|
<img src="https://img0.baidu.com/it/u=2560936835,1792581374&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=403" class="contentImg" alt="">
|
||||||
|
<img src="https://img0.baidu.com/it/u=2560936835,1792581374&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=403" class="contentImg" alt="">
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="4">
|
||||||
|
<span class="title">发布者</span>
|
||||||
|
<a-card style="width: 60%;margin:10px;border-radius:4px;height:190px;text-align:center">
|
||||||
|
<div><a-avatar :size="64" icon="user" /></div>
|
||||||
|
<div class="text-content" style="margin-top:20px">{{detailData.createName}}</div>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="20">
|
||||||
|
<span class="title">其他信息</span>
|
||||||
|
<a-card style="width: 60%;margin:10px;border-radius:4px;height:190px">
|
||||||
|
<a-descriptions layout="vertical">
|
||||||
|
<a-descriptions-item label="浏览数量">
|
||||||
|
{{detailData.views}}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="点赞数量">
|
||||||
|
{{detailData.likes}}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="发布时间">
|
||||||
|
{{detailData.createDate}}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="是否公开">
|
||||||
|
{{detailData.isPublic===1?'是':'否'}}
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="是否可评论">
|
||||||
|
{{detailData.isComment===1?'是':'否'}}
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
<a-col>
|
||||||
|
<div class="title">关联话题</div>
|
||||||
|
<div class='topic-box'>
|
||||||
|
<a-button class='topic'>#{{detailData.content}}</a-button>
|
||||||
|
<a-button class='topic'>#{{detailData.content}}</a-button>
|
||||||
|
<a-button class='topic'>#{{detailData.content}}</a-button>
|
||||||
|
<a-button class='topic'>#{{detailData.content}}</a-button>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="cardTitle">评论列表</div>
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
:pagination="pagination"
|
||||||
|
:scroll="{ x: 1200 }"
|
||||||
|
@change="handleTableChange"
|
||||||
|
:row-selection="{
|
||||||
|
selectedRowKeys: selectedRowKeys,
|
||||||
|
onChange: selectionChoosed,
|
||||||
|
}"
|
||||||
|
:row-key="
|
||||||
|
(record, index) => {
|
||||||
|
return record.id;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span slot="action" slot-scope="text, row">
|
||||||
|
<a-space>
|
||||||
|
<a
|
||||||
|
class="ant-dropdown-link"
|
||||||
|
v-if="row.isDelete === 1"
|
||||||
|
@click="del([row.id])"
|
||||||
|
>删除</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="ant-dropdown-link"
|
||||||
|
v-if="row.isDelete === 0"
|
||||||
|
@click="recover([row.id])"
|
||||||
|
>恢复</a
|
||||||
|
>
|
||||||
|
</a-space>
|
||||||
|
</span>
|
||||||
|
</a-table>
|
||||||
|
<div style="margin-bottom: 16px" class="action">
|
||||||
|
<!-- 批量操作 -->
|
||||||
|
<a-select
|
||||||
|
type="primary"
|
||||||
|
v-model="activeAction"
|
||||||
|
:disabled="!hasSelected"
|
||||||
|
:loading="loading"
|
||||||
|
style="width: 120px"
|
||||||
|
@change="Actions"
|
||||||
|
placeholder="请选择操作"
|
||||||
|
>
|
||||||
|
批量
|
||||||
|
<a-select-option v-for="item in ActionsList" :key="item.value">
|
||||||
|
{{ item.label }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<span style="margin-left: 8px">
|
||||||
|
<template v-if="hasSelected">
|
||||||
|
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
commentList,
|
||||||
|
commentRecover,
|
||||||
|
commentDel,
|
||||||
|
} from "@/api/operation/dynamic";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
detailData: {},
|
||||||
|
tableData: [],
|
||||||
|
selectedRowKeys: [],
|
||||||
|
activeAction: undefined,
|
||||||
|
loading: false,
|
||||||
|
ActionsList: [
|
||||||
|
{
|
||||||
|
value: 1,
|
||||||
|
label: "批量删除",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 2,
|
||||||
|
label: "批量恢复",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "评论内容",
|
||||||
|
width: "20%",
|
||||||
|
dataIndex: "content",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "评论人名称",
|
||||||
|
width: "15%",
|
||||||
|
dataIndex: "createName",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "评论人时间",
|
||||||
|
width: "15%",
|
||||||
|
dataIndex: "createDate",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "点赞数",
|
||||||
|
width: "12%",
|
||||||
|
dataIndex: "likes",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "是否删除",
|
||||||
|
width: "15%",
|
||||||
|
dataIndex: "isDelete",
|
||||||
|
customRender: function (isDelete) {
|
||||||
|
switch (isDelete) {
|
||||||
|
case 1:
|
||||||
|
return "否";
|
||||||
|
case 0:
|
||||||
|
return "是";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "action",
|
||||||
|
key: "action",
|
||||||
|
width: "150",
|
||||||
|
fixed: "right",
|
||||||
|
scopedSlots: { customRender: "action" },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.detailData = this.$route.params.data;
|
||||||
|
console.log(this.detailData);
|
||||||
|
this.getComment();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getComment() {
|
||||||
|
let res = await commentList({
|
||||||
|
pageNum: this.pagination.current,
|
||||||
|
size: this.pagination.pageSize,
|
||||||
|
});
|
||||||
|
this.tableData = res.data.rows;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
},
|
||||||
|
del(ids) {
|
||||||
|
console.log(ids);
|
||||||
|
this.$confirm({
|
||||||
|
title: "是否删除",
|
||||||
|
// okText:'删除',
|
||||||
|
// cancelText:'取消',
|
||||||
|
icon: "delete",
|
||||||
|
onOk: async () => {
|
||||||
|
let res = await commentDel({ commentIds: ids });
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$message.success(res.msg);
|
||||||
|
this.getComment();
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
recover(ids) {
|
||||||
|
this.$confirm({
|
||||||
|
title: "是否恢复",
|
||||||
|
// okText:'删除',
|
||||||
|
// cancelText:'取消',
|
||||||
|
icon: "undo",
|
||||||
|
onOk: async () => {
|
||||||
|
let res = await commentRecover({ commentIds: ids });
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$message.success(res.msg);
|
||||||
|
this.getComment();
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.msg);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
selectionChoosed(data) {
|
||||||
|
console.log(data);
|
||||||
|
this.selectedRowKeys = data;
|
||||||
|
},
|
||||||
|
handleTableChange(pagination) {
|
||||||
|
console.log(pagination);
|
||||||
|
const pager = { ...this.pagination };
|
||||||
|
pager.current = pagination.current;
|
||||||
|
pager.pageSize = pagination.pageSize;
|
||||||
|
this.pagination = pager;
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
Actions(data) {
|
||||||
|
console.log(data);
|
||||||
|
console.log(this.selectedRowKeys);
|
||||||
|
this.activeAction = undefined;
|
||||||
|
if (data === 1) {
|
||||||
|
this.del(this.selectedRowKeys);
|
||||||
|
} else {
|
||||||
|
this.recover(this.selectedRowKeys);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasSelected() {
|
||||||
|
return this.selectedRowKeys.length > 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.action {
|
||||||
|
margin-top: -50px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
color: #000000a6;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
.text-content {
|
||||||
|
color: #000000d9;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.contentImg {
|
||||||
|
width: 168px;
|
||||||
|
height: 92px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin:10px;
|
||||||
|
}
|
||||||
|
.img-box{
|
||||||
|
display: flex;
|
||||||
|
justify-content:flex-start;
|
||||||
|
}
|
||||||
|
.topic-box{
|
||||||
|
display: flex;
|
||||||
|
justify-content:flex-start;
|
||||||
|
}
|
||||||
|
.topic{
|
||||||
|
margin:5px;
|
||||||
|
border-radius:44px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
export const formItem = [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
label:'话题标题',
|
||||||
|
prop:'title',
|
||||||
|
placeholder:'请输入标题'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label:'状态',
|
||||||
|
prop:'status',
|
||||||
|
option:[{ id:1,name:'启用中'},{ id:2,name:'禁用中'}],
|
||||||
|
placeholder:'请选择状态'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label:'是否公开',
|
||||||
|
prop:'isPublic',
|
||||||
|
placeholder:'请选择',
|
||||||
|
option:[{ id:1,name:'是'},{ id:0,name:'否'}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'select',
|
||||||
|
label:'是否评论',
|
||||||
|
prop:'isRating',
|
||||||
|
placeholder:'请选择',
|
||||||
|
option:[{ id:1,name:'是'},{ id:0,name:'否'}]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: "话题标题",
|
||||||
|
dataIndex: "title",
|
||||||
|
width: "12%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "内容",
|
||||||
|
dataIndex: "content",
|
||||||
|
width: "16%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "状态",
|
||||||
|
dataIndex: "status",
|
||||||
|
width: "10%",
|
||||||
|
customRender: function (status) {
|
||||||
|
switch (status) {
|
||||||
|
case 1:
|
||||||
|
return '启用中'
|
||||||
|
case 2:
|
||||||
|
return '禁用中'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "是否公开",
|
||||||
|
dataIndex: "isPublic",
|
||||||
|
width: "9%",
|
||||||
|
customRender: function (isPublic) {
|
||||||
|
switch (isPublic) {
|
||||||
|
case 1:
|
||||||
|
return '是'
|
||||||
|
case 0:
|
||||||
|
return '否'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "是否可以评论",
|
||||||
|
dataIndex: "isRating",
|
||||||
|
width: "10%",
|
||||||
|
customRender: function (isRating) {
|
||||||
|
switch (isRating) {
|
||||||
|
case 1:
|
||||||
|
return '是'
|
||||||
|
case 0:
|
||||||
|
return '否'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "用户类型",
|
||||||
|
dataIndex: "userType",
|
||||||
|
width: "10%",
|
||||||
|
customRender: function (userType) {
|
||||||
|
switch (userType) {
|
||||||
|
case 1:
|
||||||
|
return '住户'
|
||||||
|
case 2:
|
||||||
|
return '物业'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "发布人",
|
||||||
|
dataIndex: "createName",
|
||||||
|
width: "8%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "发布时间",
|
||||||
|
dataIndex: "createDate",
|
||||||
|
width: "12%",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "是否开启租赁",
|
||||||
|
dataIndex: "isEnableLease",
|
||||||
|
scopedSlots: { customRender: "switch" },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "action",
|
||||||
|
key: "action",
|
||||||
|
width: "180",
|
||||||
|
fixed: "right",
|
||||||
|
scopedSlots: { customRender: "action" },
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export const pagination = {
|
||||||
|
current: 1,
|
||||||
|
total: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
}
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="cardTitle">社区话题</div>
|
||||||
|
<searchForm :formItem="formItem" @getSearch="getData"></searchForm>
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
:pagination="pagination"
|
||||||
|
:scroll="{ x: 1400 }"
|
||||||
|
@change="handleTableChange"
|
||||||
|
:row-selection="{
|
||||||
|
selectedRowKeys: selectedRowKeys,
|
||||||
|
onChange: selectionChoosed,
|
||||||
|
}"
|
||||||
|
:row-key="
|
||||||
|
(record, index) => {
|
||||||
|
return record.id;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<span slot="action" slot-scope="text, row">
|
||||||
|
<a-space>
|
||||||
|
<a class="ant-dropdown-link" @click="del([row.id])">删除</a>
|
||||||
|
</a-space>
|
||||||
|
</span>
|
||||||
|
<span slot="switch" slot-scope="switchV, row">
|
||||||
|
<a-switch
|
||||||
|
:checked="switchV === 1"
|
||||||
|
@change="handleEnable(row)"
|
||||||
|
></a-switch>
|
||||||
|
</span>
|
||||||
|
</a-table>
|
||||||
|
<div class="action">
|
||||||
|
<a-dropdown :disabled='!hasSelected'>
|
||||||
|
<a-menu slot="overlay" @click="handleMenuClick">
|
||||||
|
<a-menu-item key="1"> 批量删除 </a-menu-item>
|
||||||
|
<a-menu-item key="2"> 2nd item </a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
<a-button> 批量操作 <a-icon type="down" /> </a-button>
|
||||||
|
</a-dropdown>
|
||||||
|
<span style="margin-left: 8px">
|
||||||
|
<template v-if="hasSelected">
|
||||||
|
{{ `已选择 ${selectedRowKeys.length} 条` }}
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { topicList } from "@/api/operation/dynamic/topic.js";
|
||||||
|
import { formItem, columns, pagination } from "./depend/config";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableData: [],
|
||||||
|
searchForm: {},
|
||||||
|
formItem,
|
||||||
|
columns,
|
||||||
|
pagination,
|
||||||
|
// 选择的index
|
||||||
|
selectedRowKeys: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getData(data) {
|
||||||
|
this.searchForm = data;
|
||||||
|
let res = await topicList({
|
||||||
|
pageNum: this.pagination.current,
|
||||||
|
size: this.pagination.pageSize,
|
||||||
|
});
|
||||||
|
this.tableData = res.data.rows;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
},
|
||||||
|
selectionChoosed(data) {
|
||||||
|
console.log(data);
|
||||||
|
this.selectedRowKeys = data;
|
||||||
|
},
|
||||||
|
handleMenuClick(data) {
|
||||||
|
console.log(data);
|
||||||
|
},
|
||||||
|
handleTableChange(pagination) {
|
||||||
|
console.log(pagination);
|
||||||
|
const pager = { ...this.pagination };
|
||||||
|
pager.current = pagination.current;
|
||||||
|
pager.pageSize = pagination.pageSize;
|
||||||
|
this.pagination = pager;
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
hasSelected() {
|
||||||
|
return this.selectedRowKeys.length > 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue