279 lines
8.6 KiB
Vue
279 lines
8.6 KiB
Vue
<template>
|
||
<ai-list class="news-list" isTabs>
|
||
<template slot="content">
|
||
<ai-search-bar>
|
||
<template slot="left">
|
||
<ai-select
|
||
v-model="searchObj.type"
|
||
@change="page.current = 1, getList()"
|
||
placeholder="选择新闻类别"
|
||
:selectList="$dict.getDict('newsCenterType')">
|
||
</ai-select>
|
||
</template>
|
||
<template slot="right">
|
||
<el-input
|
||
v-model="searchObj.title"
|
||
size="small"
|
||
placeholder="搜索标题/发布地区"
|
||
clearable
|
||
v-throttle="() => {page.current = 1, getList()}"
|
||
@clear="page.current = 1, searchObj.title = '', getList()"
|
||
suffix-icon="iconfont iconSearch"/>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-search-bar>
|
||
<template slot="left">
|
||
<el-dropdown @visible-change="v=>isClick=v" @command="addNews"
|
||
v-if="permissions('app_appnewscenterinfo_edit')">
|
||
<el-button type="primary" icon="iconfont iconAdd" size="small">发布新闻
|
||
<i class="el-icon--right" :class="dropIcon"></i>
|
||
</el-button>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item command="video">发布视频</el-dropdown-item>
|
||
<el-dropdown-item command="article">发布文章</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table
|
||
:tableData="tableData"
|
||
:col-configs="colConfigs"
|
||
:total="total"
|
||
stripe
|
||
:current.sync="page.current"
|
||
:size.sync="page.size"
|
||
@getList="getList">
|
||
<el-table-column slot="title" label="标题" width="280" align="left" show-overflow-tooltip>
|
||
<template slot-scope="{ row }">
|
||
<span style="color: #2266FF;margin-right:40px;" v-if="row.isTop == 1">[置顶]</span>
|
||
<span>{{ row.title }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column slot="options" label="操作" fixed="right" width="260" align="center">
|
||
<template slot-scope="{ row }">
|
||
<div class="table-options">
|
||
<el-button type="text" title="取消置顶" v-if="row.isTop==1" @click="setTop(row)">取消置顶</el-button>
|
||
<el-button type="text" title="置顶" v-else @click="setTop(row)">置顶</el-button>
|
||
<el-button type="text" title="取消发布" v-if="+row.status" @click="changeStatus(row)">取消发布</el-button>
|
||
<el-button type="text" v-else title="发布" @click="changeStatus(row)">发布</el-button>
|
||
<el-button type="text" title="查看" @click="hangeleDetail(row)"
|
||
:disabled="!permissions('app_appnewscenterinfo_detail')">查看
|
||
</el-button>
|
||
<el-button type="text" title="编辑" @click="handleEdit(row)"
|
||
:disabled="!permissions('app_appnewscenterinfo_edit')">编辑
|
||
</el-button>
|
||
<el-button type="text" title="删除" @click="handleDelete(row)"
|
||
:disabled="!permissions('app_appnewscenterinfo_del')">删除
|
||
</el-button>
|
||
<el-button type="text" title="分享" @click="handleCopyShare(row)">小程序链接</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</template>
|
||
</ai-list>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from "dayjs"
|
||
|
||
export default {
|
||
name: "newsList",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
areaId: String
|
||
},
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
total: 0,
|
||
isClick: false,
|
||
page: {
|
||
current: 1,
|
||
size: 10
|
||
},
|
||
searchObj: {
|
||
title: '',
|
||
type: ''
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
colConfigs() {
|
||
return [
|
||
{slot: 'title', label: '标题', width: 280},
|
||
{
|
||
prop: 'type', label: '类别', align: 'center',
|
||
render: (h, {row}) => {
|
||
return h('span', null, this.dict.getLabel('newsCenterType', +row.type))
|
||
}
|
||
},
|
||
{
|
||
prop: 'policyType', label: '类型', align: 'center',
|
||
render: (h, {row}) => {
|
||
return h('span', null, this.dict.getLabel('newsCenterPolicyType', +row.policyType))
|
||
}
|
||
},
|
||
{
|
||
prop: 'viewCount', label: '浏览/播放量', align: "center",
|
||
render: (h, {row}) => {
|
||
return h('span', null, row.viewCount >= 10000 ? ((row.viewCount / 10000).toFixed(2) + '万') : row.viewCount)
|
||
}
|
||
},
|
||
{prop: 'msgCount', label: '评论数', align: "center"},
|
||
{prop: 'areaName', label: '发布地区', align: 'center'},
|
||
{prop: 'createTime', label: '发布时间'},
|
||
{
|
||
prop: 'status', label: '发布状态', align: 'center',
|
||
render: (h, {row}) => {
|
||
return h('span', {
|
||
style: {
|
||
color: row.status ? this.$dict.getColor('newsCenterStatus', row.status) : 'auto'
|
||
}
|
||
}, this.$dict.getLabel('newsCenterStatus', row.status))
|
||
}
|
||
},
|
||
{slot: 'options', label: '操作'}
|
||
]
|
||
},
|
||
dropIcon() {
|
||
return this.isClick ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
|
||
},
|
||
},
|
||
methods: {
|
||
/**
|
||
* 查看详情
|
||
* */
|
||
hangeleDetail(row) {
|
||
if (+row.type) {
|
||
this.$emit("goPage", {key: "videoDetail", row});
|
||
} else {
|
||
this.$emit("goPage", {key: "newsDetail", row});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 编辑
|
||
* */
|
||
handleEdit(row) {
|
||
if (+row.type) {
|
||
this.$emit("goPage", {key: "addVideo", row});
|
||
} else {
|
||
this.$emit("goPage", {key: "addArticle", row});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 修改新闻中心状态-发布、取消发布
|
||
* */
|
||
changeStatus(row) {
|
||
const msg = +row.status ? "是否取消发布？" : "是否发布？";
|
||
this.$confirm(msg).then(() => this.changeInfo(row));
|
||
},
|
||
/**
|
||
* 置顶新闻
|
||
* */
|
||
setTop(row) {
|
||
const msg = !row.topping ? "是否要置顶？" : "是否要取消置顶？"
|
||
this.$confirm(msg).then(() => this.setTopInfo(row));
|
||
},
|
||
/**
|
||
* 删除新闻
|
||
* */
|
||
handleDelete({id}) {
|
||
this.$confirm("是否要删除？").then(() => this.deleteInfo(id));
|
||
},
|
||
resetSearch() {
|
||
this.searchObj.title = "";
|
||
this.searchObj.type = "";
|
||
this.getList();
|
||
},
|
||
/**
|
||
* 添加新闻、视频
|
||
* */
|
||
addNews(command) {
|
||
switch (command) {
|
||
case "video":
|
||
this.$emit('goPage', {key: "addVideo"});
|
||
break;
|
||
case "article":
|
||
this.$emit('goPage', {key: "addArticle"});
|
||
break;
|
||
}
|
||
},
|
||
/**
|
||
* 修改发布状态
|
||
* */
|
||
changeInfo({id, status}) {
|
||
const msg = +status ? "取消发布成功" : "发布成功";
|
||
status = +status ? 0 : 1;
|
||
this.instance.post(`/app/appnewscenterinfo/release?id=${id}&status=${status}`).then(() => {
|
||
this.$message.success(msg);
|
||
this.getList();
|
||
})
|
||
},
|
||
/**
|
||
* 置顶新闻
|
||
* */
|
||
setTopInfo(row) {
|
||
const msg = !row.topping ? "置顶成功！" : "取消置顶成功！";
|
||
this.instance.post(`/app/appnewscenterinfo/topping?id=${row.id}&areaId=${this.areaId}`).then(() => {
|
||
this.$message.success(msg);
|
||
this.getList();
|
||
})
|
||
},
|
||
/**
|
||
* 删除新闻
|
||
* @param id
|
||
*/
|
||
deleteInfo(id) {
|
||
this.instance.post(`/app/appnewscenterinfo/delete?ids=${id}`).then(() => {
|
||
this.$message.success("删除成功");
|
||
this.getList();
|
||
})
|
||
},
|
||
getList() {
|
||
this.instance.post(`/app/appnewscenterinfo/list`, null, {
|
||
params: {
|
||
...this.page,
|
||
...this.searchObj,
|
||
areaId: this.areaId
|
||
}
|
||
}).then(res => {
|
||
if (res && res.data) {
|
||
this.tableData = res.data.records.map(e => {
|
||
return {
|
||
...e,
|
||
createTime: +e.status ? moment(e.createTime).format("YYYY-MM-DD HH:mm") : ''
|
||
}
|
||
});
|
||
this.total = res.data.total;
|
||
}
|
||
})
|
||
},
|
||
handleCopyShare(row) {
|
||
navigator.clipboard.writeText(`/subPages/live/newsDetail?id=${row.id}`)
|
||
this.$message.success("小程序链接已复制!")
|
||
}
|
||
},
|
||
created() {
|
||
this.dict.load('newsCenterType', 'newsCenterStatus', 'newsCenterPolicyType').then(() => this.getList());
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.news-list {
|
||
height: 100%;
|
||
overflow: auto;
|
||
background: #f3f6f9;
|
||
|
||
::v-deep.has-gutter th:nth-child(1) div {
|
||
margin-left: 40px;
|
||
}
|
||
}
|
||
|
||
</style>
|