300 lines
8.9 KiB
Vue
300 lines
8.9 KiB
Vue
<template>
|
||
<basic-container>
|
||
<!--搜索栏-->
|
||
<el-form size="small" label-position="right" style="padding-left: 10px; padding-right: 10px" :inline="true">
|
||
<el-row :span="24">
|
||
<el-form-item label="文章名称：">
|
||
<el-input v-model="query.articleTitle"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="作者：">
|
||
<el-input v-model="query.author"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="发稿日期：">
|
||
<el-date-picker v-model="query.searchDate" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||
end-placeholder="结束日期" value-format="yyyy-MM-dd">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<div class="searchBtn">
|
||
<el-button type="primary" size="small" icon="el-icon-search" @click="searchChange">搜 索</el-button>
|
||
<el-button size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
|
||
</div>
|
||
</el-row>
|
||
</el-form>
|
||
<!--搜索栏-->
|
||
<avue-crud :option="option" :data="data" :page="page" v-model="form" @on-load="onLoad" @row-update="rowUpdate"
|
||
@row-save="rowSave" @row-del="rowDel" @current-change="currentChange" @size-change="sizeChange"
|
||
@selection-change="selectionChange" @refresh-change="refreshChange">
|
||
<template slot="headPic" slot-scope="{ row }">
|
||
<img class="img" :src="row.headPic" alt="" srcset="" />
|
||
</template>
|
||
<template slot="menu" slot-scope="{row}">
|
||
<el-button type="text" @click="editNewsInfo(row.id)" icon="el-icon-edit">修改</el-button>
|
||
<!--<el-button type="text" @click="setCover(row.id)">设置为封面</el-button>-->
|
||
<el-button type="text" v-if="row.status==0" @click="release(row.id,'release')">发布</el-button>
|
||
<el-button type="text" v-if="row.status==1" @click="release(row.id,'offShelf')">下架</el-button>
|
||
</template>
|
||
<template slot="menuLeft">
|
||
<el-button @click="addNewsInfo" icon="el-icon-plus" type="primary">添加文章</el-button>
|
||
</template>
|
||
<template slot="sort" slot-scope="{row}">
|
||
<el-button type="text" @click="orderItem(row,'ascs')">上移</el-button>
|
||
<el-button type="text" @click="orderItem(row,'desc')">下移</el-button>
|
||
</template>
|
||
<template slot="articleTitle" slot-scope="{row}">
|
||
<span class="articleTitle" @click="showNewsDetail(row.id)">{{row.articleTitle}}</span>
|
||
</template>
|
||
<template slot="articleSrcUrl" slot-scope="{row}">
|
||
<a :href="row.articleSrcUrl" style="color: #6699FF;" target="blank">{{row.articleSrcUrl}}</a>
|
||
</template>
|
||
</avue-crud>
|
||
<!-- <news-detail ref="detail"></news-detail>-->
|
||
</basic-container>
|
||
</template>
|
||
<script>
|
||
import { getList, delNews, order, release } from "@/api/manage/news";
|
||
// import newsDetail from './Dialog/newsDetail'
|
||
export default {
|
||
components:{
|
||
// newsDetail
|
||
},
|
||
name: "manage_jlhome_news",
|
||
data() {
|
||
return {
|
||
data: [],
|
||
selectionList: [],
|
||
query: {},
|
||
form: {},
|
||
drawer: false,
|
||
option: {
|
||
border: true,
|
||
index: true,
|
||
indexLabel: "序号",
|
||
labelWidth: 100,
|
||
selection: false,
|
||
align: "center",
|
||
editBtn: false,
|
||
delBtn: true,
|
||
addBtn: false,
|
||
|
||
addText: '文章信息',
|
||
column: [
|
||
{
|
||
label: "文章名称",
|
||
prop: "articleTitle",
|
||
slot:true,
|
||
},
|
||
{
|
||
label: "首页图",
|
||
prop: "headPic",
|
||
slot: true,
|
||
type: "upload",
|
||
span: 12,
|
||
showFileList: false,
|
||
listType: "picture-img",
|
||
multiple: false,
|
||
|
||
},
|
||
{
|
||
label: "发稿日期",
|
||
prop: "createTime",
|
||
type: "date",
|
||
formslot: true,
|
||
format: "yyyy-MM-dd",
|
||
editDisplay: false,
|
||
addDisplay: false,
|
||
},
|
||
{
|
||
label: "分类",
|
||
prop: "typeName",
|
||
},
|
||
{
|
||
label: "文章原地址",
|
||
prop: "articleSrcUrl",
|
||
slot:true
|
||
},
|
||
{
|
||
label: "作者",
|
||
prop: "author",
|
||
},
|
||
{
|
||
label: "上传人",
|
||
prop: "createUserName",
|
||
addDisplay: false,
|
||
editDisplay: false,
|
||
},
|
||
{
|
||
label: '状态',
|
||
prop: 'status',
|
||
addDisplay: false,
|
||
editDisplay: false,
|
||
dicData: [
|
||
{
|
||
label: '已发布',
|
||
value: '1'
|
||
}, {
|
||
label: '未发布',
|
||
value: '0'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: "排序",
|
||
prop: "sort",
|
||
addDisplay: false,
|
||
editDisplay: false,
|
||
slot: true,
|
||
},
|
||
],
|
||
group: [
|
||
{
|
||
label: "文章内容",
|
||
column: [
|
||
{
|
||
label: '文章内容',
|
||
prop: 'newsInfo',
|
||
formslot: true
|
||
|
||
}
|
||
]
|
||
},
|
||
],
|
||
},
|
||
|
||
|
||
page: {
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
},
|
||
};
|
||
},
|
||
|
||
methods: {
|
||
currentChange(current) {
|
||
this.page.currentPage = current;
|
||
this.onLoad(this.page);
|
||
},
|
||
sizeChange(size) {
|
||
this.page.pageSize = size;
|
||
this.onLoad(this.page);
|
||
},
|
||
selectionChange(select) {
|
||
this.selectionList = select;
|
||
},
|
||
searchChange() {
|
||
if (this.query.searchDate) {
|
||
this.query['beginTime'] = this.query.searchDate[0];
|
||
this.query['endTime'] = this.query.searchDate[1];
|
||
}
|
||
this.onLoad(this.page, this.query);
|
||
},
|
||
searchReset() {
|
||
this.query = {};
|
||
this.onLoad(this.page);
|
||
},
|
||
refreshChange() {
|
||
this.page.currentPage = 1;
|
||
this.onLoad(this.page)
|
||
},
|
||
onLoad(page, params = {}) {
|
||
getList(
|
||
page.currentPage,
|
||
page.pageSize,
|
||
Object.assign(this.query, params)
|
||
).then((res) => {
|
||
const data = res.data.data;
|
||
this.data = data.records;
|
||
this.data.forEach(ele => {
|
||
if (ele.articleTitle.length > 15) {
|
||
ele.articleTitle = ele.articleTitle.slice(0, 15) + '...';
|
||
}
|
||
});
|
||
this.page.total = data.total;
|
||
});
|
||
},
|
||
/**添加文章 */
|
||
addNewsInfo() {
|
||
this.$router.push({ name: '添加/修改文章article', params: { type: 'add', id: null } })
|
||
},
|
||
/*修改文章内容*/
|
||
editNewsInfo(id) {
|
||
this.$router.push({ name: '添加/修改文章article', params: { type: 'edit', id: id } })
|
||
},
|
||
/*删除文章*/
|
||
rowDel(row) {
|
||
this.$confirm('是否确认删除该文章？', {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning"
|
||
}).then(() => {
|
||
return delNews(row.id)
|
||
}).then(() => {
|
||
this.$message.success('删除成功！')
|
||
this.onLoad(this.page)
|
||
})
|
||
},
|
||
|
||
/*设置为封面*/
|
||
|
||
/*排序*/ //当order==total时，不能下移
|
||
orderItem(row, type) {
|
||
if (type == 'ascs') {
|
||
order(row.id, Number(row.sort), 1).then(() => {
|
||
this.onLoad(this.page)
|
||
})
|
||
}
|
||
else if (type == 'desc') {
|
||
order(row.id, Number(row.sort), 0).then(() => {
|
||
this.onLoad(this.page)
|
||
})
|
||
}
|
||
},
|
||
release(id, type) {
|
||
if (type == 'release') {
|
||
this.$confirm("是否确定发布此篇文章?", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning"
|
||
}).then(() => {
|
||
release(id,1).then(() => {
|
||
this.$message.success('发布成功');
|
||
this.onLoad(this.page)
|
||
})
|
||
});
|
||
}
|
||
else if(type=='offShelf'){
|
||
this.$confirm("是否确定下架此篇文章?", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning"
|
||
}).then(() => {
|
||
release(id,0).then(() => {
|
||
this.$message.success('下架成功');
|
||
this.onLoad(this.page)
|
||
})
|
||
});
|
||
}
|
||
|
||
},
|
||
showNewsDetail(id){//点击文章名称预览文章内容
|
||
this.$refs.detail.open(id)
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.img {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.searchBtn {
|
||
display: inline-block;
|
||
margin-bottom: 18px;
|
||
}
|
||
.articleTitle{
|
||
color: #6699FF;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|