目录代码整合
This commit is contained in:
aixianling
278
packages/publicity/AppPressCenter/components/newsList.vue
Normal file
278
packages/publicity/AppPressCenter/components/newsList.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user