<template>
|
<div class='page_status'>
|
<v-header title="社区动态" :bar="bar" search @on-search="onSearch"></v-header>
|
<div class="add">
|
<el-button type="primary" size="small" @click="$router.push({path:'/act_status_add',query:{id:1}})">新增</el-button>
|
<el-button type="primary" plain size="small" @click="$router.push({path:'/classification_Settings',query:{id:1}})">社区动态分类设置</el-button>
|
</div>
|
<div class="tab">
|
<v-tool-table :trs="trs" :tds="tds">
|
<template v-slot:btn="item">
|
<div class="table_flex">
|
<!-- {{item.scope.id}} -->
|
<span class="col_primary" v-if="+item.scope.isTopping" @click="onSaveTop(0,item.scope)">取消置顶</span>
|
<span class="col_primary" v-else @click="onSaveTop(1,item.scope)">设为置顶</span>
|
<span class="col_primary" @click="onEdit(item.scope.id)">编辑</span>
|
<span class="col_primary" @click="onDel(item.scope.id)">删除</span>
|
</div>
|
</template>
|
<template v-slot:zd="item">
|
<b>{{['否','是'][+item.scope.isTopping] || '否'}}</b>
|
</template>
|
<template v-slot:status="item">
|
<b>{{['待发布','已发布'][+item.scope.status] || '待发布'}}</b>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page :item="paged" @on-page="onPage"></v-tool-page>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
props: {},
|
components: {},
|
data () {
|
return {
|
bar: [
|
{ title: "标题", name: "title" },
|
{
|
title: "状态",
|
name: "status",
|
type: "select",
|
list: [
|
{ label: "待发布", value: "0" },
|
{ value: "1", label: "已发布" },
|
],
|
},
|
{
|
title: "置顶",
|
name: "isTopping",
|
type: "select",
|
list: [
|
{ label: "否", value: "0" },
|
{ value: "1", label: "是" },
|
],
|
},
|
{ title: "发布时间", name: "time", type: "times" },
|
{
|
title: "动态分类",
|
name: "type",
|
type: "select",
|
list: [
|
// { label: "", value: "" },
|
|
],
|
}
|
],
|
trs: [
|
{ text: "序号", val: "index", width: "50px" },
|
{ text: "标题", val: "title" },
|
{ text: "阅览量", val: "readNum" },
|
{ text: "动态分类", val: "typeName" },
|
{ text: "状态", val: "btn", slot: "status" },
|
{ text: "置顶", val: "btn", slot: "zd" },
|
{ text: "发布时间", val: "publishAt" },
|
{ text: "创建时间", val: "createAt" },
|
{ text: "操作", val: "btn" },
|
],
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
os: {},
|
search: {},
|
};
|
},
|
computed: {
|
...mapState({ vuex_page: "pageReset" }),
|
},
|
watch: {
|
vuex_page: {
|
handler (n) {
|
if (n.page === this.$route.path) {
|
this.paged.page = 1;
|
this.init();
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
// 置顶
|
onSaveTop (isTopping, v) {
|
if (!v.status) {
|
demo.toast("该动态还未发布");
|
return 0;
|
}
|
this.$api.put(
|
"communityactivity/dynamic",
|
{ id: v.id, isTopping, cover:v.cover},
|
() => {
|
demo.toast("操作成功");
|
this.init();
|
}
|
);
|
},
|
onSearch (v) {
|
if (v.time && v.time.length && v.time[1]) {
|
v.publishAtBegin = v.time[0];
|
v.publishAtEnd = v.time[1];
|
} else {
|
v.publishAtBegin = "";
|
v.publishAtEnd = "";
|
}
|
this.search = demo.copy(v);
|
delete this.search.time;
|
this.paged.page = 1;
|
this.init();
|
},
|
// 分页点击
|
onPage (v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
// 获取数据
|
init () {
|
let v = demo.copy(
|
Object.assign(this.os, this.search, {
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
category:"1" ,// 1.社区动态 3.基务公开
|
})
|
);
|
this.$api.post("communityactivity/pagedynamic", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = e.records || [];
|
e.records.map((item,index) => {
|
item.index = (this.paged.page-1) * this.paged.limit + index + 1
|
})
|
});
|
},
|
onEdit (id) {
|
this.$router.push({path:'/act_status_edit',query:{id:"1",type:id}});
|
},
|
onDel (id) {
|
this.$js.model("", "是否删除动态", (res) => {
|
if (res) {
|
this.$api.del("communityactivity/dynamic", { id }, () => {
|
demo.toast("删除成功");
|
this.init();
|
});
|
}
|
});
|
},
|
//分类动态列表
|
queryDynamic() {
|
this.$api.post("dyn/type/list", { category:"1" }, (data) => {
|
data.map(d=> {
|
d.label = d.name;
|
d.value = d.id;
|
})
|
this.bar[4].list = data;
|
});
|
}
|
},
|
mounted () {
|
//查询动态分类列表
|
this.queryDynamic()
|
},
|
};
|
</script>
|
|
<style lang='less' scoped>
|
.page_status {
|
overflow-y: auto;
|
.add,
|
.tab {
|
margin-bottom: 10px;
|
}
|
}
|
</style>
|
