|
|
|
|
@ -1,212 +1,262 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="page"> |
|
|
|
|
<!-- <div class="tabs">--> |
|
|
|
|
<!-- <a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == activeName}" @click="tabChange(index)">{{item}}</a>--> |
|
|
|
|
<!-- </div>--> |
|
|
|
|
<div class="btn-wrap"> |
|
|
|
|
<el-button v-auth="'内容管理:保存排序'" class="action-btn" type="primary" @click="sortSubmit">保存排序</el-button> |
|
|
|
|
<el-button v-auth="'内容管理:批量删除'" class="action-btn" type="primary" @click="delAllData">批量删除</el-button> |
|
|
|
|
<el-button v-auth="'内容管理:新增文章'" class="action-btn" type="info" @click="addArticle">新增文章</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div class="page-content" style="padding-top: 24px"> |
|
|
|
|
<el-table ref="table" :data="list" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
|
|
|
|
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column> |
|
|
|
|
<el-table-column type="index" width="60" label="序号" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{ scope.$index + (pageNo - 1) * pageSize + 1 }} |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="title" label="标题" show-overflow-tooltip align="center"> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="title" label="栏目" show-overflow-tooltip align="center"> |
|
|
|
|
{{ columnName }} |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="name" label="排序值" width="80" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-input class="sort-input" width="120" min="1" v-model.number="scope.row.sort" type="number"></el-input> |
|
|
|
|
<span>{{ scope.row.sort }}</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="date" label="添加日期" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{ transferDate(scope.row.date) }} |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" align="center" width="170"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button v-auth="'内容管理:编辑'" type="text" @click="editArticle(scope)">编辑</el-button> |
|
|
|
|
<el-divider v-auth="'内容管理:编辑'" direction="vertical"></el-divider> |
|
|
|
|
<el-button v-auth="'内容管理:删除'" type="text" @click="delData(scope.row)">删除</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="name" label="文章发布状态" width="120" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-switch |
|
|
|
|
v-auth="'内容管理:禁用'" |
|
|
|
|
class="off" |
|
|
|
|
v-model="scope.row.status" |
|
|
|
|
:active-value="0" |
|
|
|
|
:inactive-value="1" |
|
|
|
|
style="margin: 0 5px" |
|
|
|
|
:active-text="scope.row.status ? '关' : '开'" |
|
|
|
|
@change="switchOff($event,scope.row,scope.$index)" |
|
|
|
|
></el-switch> |
|
|
|
|
<span>{{ scope.row.status ? "禁用" : "启用" }}</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
|
|
|
|
</el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="page"> |
|
|
|
|
<!-- <div class="tabs">--> |
|
|
|
|
<!-- <a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == activeName}" @click="tabChange(index)">{{item}}</a>--> |
|
|
|
|
<!-- </div>--> |
|
|
|
|
<div class="btn-wrap"> |
|
|
|
|
<el-button v-auth="'内容管理:保存排序'" |
|
|
|
|
class="action-btn" |
|
|
|
|
type="primary" |
|
|
|
|
@click="sortSubmit">保存排序</el-button> |
|
|
|
|
<el-button v-auth="'内容管理:批量删除'" |
|
|
|
|
class="action-btn" |
|
|
|
|
type="primary" |
|
|
|
|
@click="delAllData">批量删除</el-button> |
|
|
|
|
<el-button v-auth="'内容管理:新增文章'" |
|
|
|
|
class="action-btn" |
|
|
|
|
type="info" |
|
|
|
|
@click="addArticle">新增文章</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div class="page-content" |
|
|
|
|
style="padding-top: 24px"> |
|
|
|
|
<el-table ref="table" |
|
|
|
|
:data="list" |
|
|
|
|
class="table" |
|
|
|
|
stripe |
|
|
|
|
header-align="center" |
|
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
|
row-key="id"> |
|
|
|
|
<el-table-column type="selection" |
|
|
|
|
width="80" |
|
|
|
|
align="center" |
|
|
|
|
:reserve-selection="true"></el-table-column> |
|
|
|
|
<el-table-column type="index" |
|
|
|
|
width="60" |
|
|
|
|
label="序号" |
|
|
|
|
align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{ scope.$index + (pageNo - 1) * pageSize + 1 }} |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="title" |
|
|
|
|
label="标题" |
|
|
|
|
show-overflow-tooltip |
|
|
|
|
align="center"> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="title" |
|
|
|
|
label="栏目" |
|
|
|
|
show-overflow-tooltip |
|
|
|
|
align="center"> |
|
|
|
|
{{ columnName }} |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="name" |
|
|
|
|
label="排序值" |
|
|
|
|
width="80" |
|
|
|
|
align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-input class="sort-input" |
|
|
|
|
width="120" |
|
|
|
|
min="1" |
|
|
|
|
v-model.number="scope.row.sort" |
|
|
|
|
type="number"></el-input> |
|
|
|
|
<span>{{ scope.row.sort }}</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="date" |
|
|
|
|
label="添加日期" |
|
|
|
|
align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
{{ transferDate(scope.row.date) }} |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column label="操作" |
|
|
|
|
align="center" |
|
|
|
|
width="170"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button v-auth="'内容管理:编辑'" |
|
|
|
|
type="text" |
|
|
|
|
@click="editArticle(scope)">编辑</el-button> |
|
|
|
|
<el-divider v-auth="'内容管理:编辑'" |
|
|
|
|
direction="vertical"></el-divider> |
|
|
|
|
<el-button v-auth="'内容管理:删除'" |
|
|
|
|
type="text" |
|
|
|
|
@click="delData(scope.row)">删除</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="name" |
|
|
|
|
label="文章发布状态" |
|
|
|
|
width="120" |
|
|
|
|
align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-switch v-auth="'内容管理:禁用'" |
|
|
|
|
class="off" |
|
|
|
|
v-model="scope.row.status" |
|
|
|
|
:active-value="0" |
|
|
|
|
:inactive-value="1" |
|
|
|
|
style="margin: 0 5px" |
|
|
|
|
:active-text="scope.row.status ? '关' : '开'" |
|
|
|
|
@change="switchOff($event,scope.row,scope.$index)"></el-switch> |
|
|
|
|
<span>{{ scope.row.status ? "禁用" : "启用" }}</span> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background |
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
:total="totals" |
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
:current-page="pageNo" |
|
|
|
|
:page-size="pageSize"> |
|
|
|
|
</el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import util from "@/libs/util"; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
activeName: "first", |
|
|
|
|
tabs: { |
|
|
|
|
first: "栏目内容管理" |
|
|
|
|
}, |
|
|
|
|
columns: this.$parent.menuList, |
|
|
|
|
columnName: '', |
|
|
|
|
list: [], |
|
|
|
|
multipleSelection: [], |
|
|
|
|
pageNo: +this.$route.query.page || 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
totals: 0, |
|
|
|
|
originList: [] |
|
|
|
|
}; |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
activeName: "first", |
|
|
|
|
tabs: { |
|
|
|
|
first: "栏目内容管理" |
|
|
|
|
}, |
|
|
|
|
columns: this.$parent.menuList, |
|
|
|
|
columnName: '', |
|
|
|
|
list: [], |
|
|
|
|
multipleSelection: [], |
|
|
|
|
pageNo: +this.$route.query.page || 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
totals: 0, |
|
|
|
|
originList: [] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
props: { |
|
|
|
|
columnId: "" |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
columnId () { |
|
|
|
|
this.getColumnName(this.$parent.menuList) |
|
|
|
|
this.getData(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
this.getColumnName(this.$parent.menuList) |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData (id) { |
|
|
|
|
let data = { |
|
|
|
|
columnId: this.columnId |
|
|
|
|
}; |
|
|
|
|
this.$get(`${this.api.queryArticleByCondition}/${this.pageNo}/${this.pageSize}`, data).then(({ articleList, total }) => { |
|
|
|
|
this.list = articleList; |
|
|
|
|
this.totals = total; |
|
|
|
|
this.originList = JSON.parse(JSON.stringify(articleList)) |
|
|
|
|
if (!this.list.length && this.totals) { |
|
|
|
|
this.pageNo--; |
|
|
|
|
this.getData(); |
|
|
|
|
} |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
props: { |
|
|
|
|
columnId: "" |
|
|
|
|
handleSelectionChange (val) { |
|
|
|
|
this.multipleSelection = val; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
columnId() { |
|
|
|
|
this.getColumnName(this.$parent.menuList) |
|
|
|
|
this.getData(); |
|
|
|
|
handleCurrentChange (val) { |
|
|
|
|
this.pageNo = val; |
|
|
|
|
this.$router.push(`list?page=${val}`) |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
// 获取栏目名称 |
|
|
|
|
getColumnName (data) { |
|
|
|
|
data.map(e => { |
|
|
|
|
if (e.id == this.columnId) { |
|
|
|
|
this.columnName = e.name |
|
|
|
|
} else { |
|
|
|
|
this.getColumnName(e.children) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getColumnName(this.$parent.menuList) |
|
|
|
|
this.getData(); |
|
|
|
|
addArticle () { |
|
|
|
|
this.$router.push(`/information/addarticle?columnId=${this.columnId}&sort=${this.list.length + 1}`); |
|
|
|
|
}, |
|
|
|
|
editArticle (scope) { |
|
|
|
|
this.$router.push(`/information/addarticle?columnId=${this.columnId}&id=${scope.row.id}&sort=${scope.$index + 1}`); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData(id) { |
|
|
|
|
let data = { |
|
|
|
|
columnId: this.columnId |
|
|
|
|
}; |
|
|
|
|
this.$get(`${this.api.queryArticleByCondition}/${this.pageNo}/${this.pageSize}`, data).then(({ articleList, total }) => { |
|
|
|
|
this.list = articleList; |
|
|
|
|
this.totals = total; |
|
|
|
|
this.originList = JSON.parse(JSON.stringify(articleList)) |
|
|
|
|
if (!this.list.length && this.totals) { |
|
|
|
|
this.pageNo--; |
|
|
|
|
this.getData(); |
|
|
|
|
} |
|
|
|
|
delData (row) { |
|
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
this.$del(`${this.api.deleteArticles}?articleIds=${row.id}`).then(res => { |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
transferDate (date) { |
|
|
|
|
return date.replace(" 00:00:00", ""); |
|
|
|
|
}, |
|
|
|
|
delAllData () { |
|
|
|
|
if (this.multipleSelection.length != "") { |
|
|
|
|
let newArr = this.multipleSelection; |
|
|
|
|
let delList = newArr.map(item => { |
|
|
|
|
return item.id; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
let title = newArr[0].title; |
|
|
|
|
if (title.length > 14) { |
|
|
|
|
title = title.substr(0, 14) + "……"; |
|
|
|
|
} |
|
|
|
|
this.$confirm(`此批量删除操作不可逆，是否确认删除${title}等${newArr.length}个选中项？`, "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
this.$del(`${this.api.deleteArticles}?articleIds=${delList.join(",")}`).then(res => { |
|
|
|
|
this.$refs.table.clearSelection(); |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
handleSelectionChange(val) { |
|
|
|
|
this.multipleSelection = val; |
|
|
|
|
}, |
|
|
|
|
handleCurrentChange(val) { |
|
|
|
|
this.pageNo = val; |
|
|
|
|
this.$router.push(`list?page=${val}`) |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
// 获取栏目名称 |
|
|
|
|
getColumnName(data) { |
|
|
|
|
data.map(e => { |
|
|
|
|
if (e.id == this.columnId) { |
|
|
|
|
this.columnName = e.name |
|
|
|
|
} else { |
|
|
|
|
this.getColumnName(e.children) |
|
|
|
|
if (this.multipleSelection.length === this.list.length && this.pageNo > 1) { |
|
|
|
|
this.handleCurrentChange(this.pageNo - 1) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
addArticle() { |
|
|
|
|
this.$router.push(`/information/addarticle?columnId=${this.columnId}&sort=${this.list.length + 1}`); |
|
|
|
|
}, |
|
|
|
|
editArticle(scope) { |
|
|
|
|
this.$router.push(`/information/addarticle?columnId=${this.columnId}&id=${scope.row.id}&sort=${scope.$index + 1}`); |
|
|
|
|
}, |
|
|
|
|
delData(row) { |
|
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
this.$del(`${this.api.deleteArticles}?articleIds=${row.id}`).then(res => { |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
transferDate(date) { |
|
|
|
|
return date.replace(" 00:00:00", ""); |
|
|
|
|
}, |
|
|
|
|
delAllData() { |
|
|
|
|
if (this.multipleSelection.length != "") { |
|
|
|
|
let newArr = this.multipleSelection; |
|
|
|
|
let delList = newArr.map(item => { |
|
|
|
|
return item.id; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
let title = newArr[0].title; |
|
|
|
|
if (title.length > 14) { |
|
|
|
|
title = title.substr(0, 14) + "……"; |
|
|
|
|
} |
|
|
|
|
this.$confirm(`此批量删除操作不可逆，是否确认删除${title}等${newArr.length}个选中项？`, "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
this.$del(`${this.api.deleteArticles}?articleIds=${delList.join(",")}`).then(res => { |
|
|
|
|
this.$refs.table.clearSelection(); |
|
|
|
|
util.successMsg("删除成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}).catch(res => { |
|
|
|
|
}); |
|
|
|
|
if(this.multipleSelection.length === this.list.length && this.pageNo>1) { |
|
|
|
|
this.handleCurrentChange(this.pageNo - 1) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
util.errorMsg("请先选择数据 ！"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
switchOff(val, row, index) { |
|
|
|
|
this.$put(`${this.api.enableArticle}/${row.id}/${val}`) |
|
|
|
|
.then(res => { |
|
|
|
|
val == 1 ? util.errorMsg("该文章已隐藏，对学生端用户不可见") : util.successMsg("该文章已发布，对学生端用户可见"); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
sortSubmit() { |
|
|
|
|
if (this.list.length) { |
|
|
|
|
if (this.list.find(n => n.sort < 1)) return util.errorMsg("排序值最小为1"); |
|
|
|
|
let data = { articleList: this.list }; |
|
|
|
|
this.$post(this.api.articleSort, data).then(res => { |
|
|
|
|
util.successMsg("保存成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
util.errorMsg("数据为空"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.catch(() => { |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
util.errorMsg("请先选择数据 ！"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
switchOff (val, row, index) { |
|
|
|
|
this.$put(`${this.api.enableArticle}/${row.id}/${val}`) |
|
|
|
|
.then(res => { |
|
|
|
|
val == 1 ? util.errorMsg("该文章已隐藏，对学生端用户不可见") : util.successMsg("该文章已发布，对学生端用户可见"); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
sortSubmit () { |
|
|
|
|
if (this.list.length) { |
|
|
|
|
if (this.list.find(n => n.sort < 1)) return util.errorMsg("排序值最小为1"); |
|
|
|
|
let data = { articleList: this.list }; |
|
|
|
|
this.$post(this.api.articleSort, data).then(res => { |
|
|
|
|
util.successMsg("保存成功"); |
|
|
|
|
this.getData(); |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
util.errorMsg("数据为空"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
