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>
|