You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
11 KiB
310 lines
11 KiB
<template> |
|
<div class="flex page"> |
|
<div style="width: 218px;border-right: 1px solid #EBEDF0"> |
|
<p class="page-name mb">全部栏目</p> |
|
<div style="height: 504px;overflow: auto"> |
|
<el-tree ref="column" :data="columns" highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id" @node-click="getData"></el-tree> |
|
</div> |
|
</div> |
|
<div class="p-l-20" style="width: calc(100% - 219px);"> |
|
<div class="tool"> |
|
<div class="search-wrap"> |
|
<el-select v-model="field" @change="initData"> |
|
<el-option |
|
v-for="(item, i) in keywords" |
|
:key="i" |
|
:label="item.name" |
|
:value="item.id"> |
|
</el-option> |
|
</el-select> |
|
<el-input class="keyword" :placeholder="'请输入' + keywords.find(e => e.id === field).name" v-model.trim="keyword" clearable></el-input> |
|
</div> |
|
<div class="actions"> |
|
<el-dropdown class="setting" trigger="click" :hide-on-click="false"> |
|
<img class="icon" src="@/assets/images/setting.png" alt=""> |
|
<el-dropdown-menu> |
|
<el-dropdown-item> |
|
<el-button @click="resetColumns" type="text">列重置</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0"> |
|
<el-checkbox v-model="column.show">{{ column.name }}</el-checkbox> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:新增'" type="primary" @click="add" >新增</el-button> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:删除'" @click="batchDel">删除</el-button> |
|
</div> |
|
</div> |
|
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
|
<el-table-column v-if="settings[0].show" type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
<el-table-column v-if="settings[1].show" prop="title" label="标题" align="center" min-width="150"></el-table-column> |
|
<el-table-column v-if="settings[2].show" prop="columnName" label="栏目" align="center" min-width="120"></el-table-column> |
|
<el-table-column v-if="settings[3].show" prop="typeId" label="栏目类型" align="center" min-width="100"> |
|
<template slot-scope="scope"> |
|
{{ types.find(e => e.id === scope.row.typeId).name }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="settings[4].show" prop="founderName" label="录入人" align="center" min-width="80"></el-table-column> |
|
<el-table-column v-if="settings[5].show" prop="editorName" label="修改人" align="center" min-width="80"></el-table-column> |
|
<el-table-column v-if="settings[6].show" prop="updateTime" label="修改日期" align="center" min-width="130"></el-table-column> |
|
<el-table-column v-if="settings[7].show" prop="releaseTime" label="发布日期" align="center" min-width="130"></el-table-column> |
|
<el-table-column v-if="settings[8].show" prop="totalBrowsing" label="总浏览" align="center" min-width="80"></el-table-column> |
|
<el-table-column v-if="settings[9].show" prop="workNumber" label="状态" align="center" min-width="80"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="settings[10].show" label="操作" align="center" width="140"> |
|
<template slot-scope="scope"> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:预览'" type="text" @click="preview(scope.row)">预览</el-button> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:文章管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Setting from '@/setting' |
|
import util from '@/libs/util' |
|
import { mapMutations } from 'vuex' |
|
import ColumnConst from '@/const/column' |
|
export default { |
|
data() { |
|
return { |
|
types: ColumnConst.types, |
|
siteName: this.$store.state.content.site.siteName, |
|
columns: [], |
|
defaultProps: { |
|
value: 'id', |
|
label: 'columnName' |
|
}, |
|
field: 'title', |
|
keywords: [ |
|
{ |
|
id: 'title', |
|
name: '标题' |
|
}, |
|
{ |
|
id: 'founder', |
|
name: '录入人' |
|
}, |
|
{ |
|
id: 'column', |
|
name: '栏目' |
|
}, |
|
{ |
|
id: 'editor', |
|
name: '修改人' |
|
} |
|
], |
|
keyword: '', |
|
list: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
multipleSelection: [], |
|
originSettings: [], |
|
settings: [ |
|
{ |
|
name: '选择框', |
|
show: true |
|
}, |
|
{ |
|
name: '标题', |
|
show: true |
|
}, |
|
{ |
|
name: '栏目', |
|
show: true |
|
}, |
|
{ |
|
name: '栏目类型', |
|
show: true |
|
}, |
|
{ |
|
name: '录入人', |
|
show: true |
|
}, |
|
{ |
|
name: '修改人', |
|
show: true |
|
}, |
|
{ |
|
name: '修改日期', |
|
show: true |
|
}, |
|
{ |
|
name: '发布日期', |
|
show: true |
|
}, |
|
{ |
|
name: '总浏览', |
|
show: true |
|
}, |
|
{ |
|
name: '状态', |
|
show: true |
|
}, |
|
{ |
|
name: '操作', |
|
show: true |
|
} |
|
] |
|
}; |
|
}, |
|
watch: { |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.initData() |
|
}, 500) |
|
} |
|
}, |
|
mounted() { |
|
this.$store.commit('user/setCrumbs', [ |
|
{ |
|
name: '站点管理', |
|
route: '/site' |
|
}, |
|
{ |
|
name: '内容管理' |
|
}, |
|
{ |
|
name: '文章管理' |
|
} |
|
]) |
|
this.originSettings = JSON.parse(JSON.stringify(this.settings)) |
|
this.getColumn() |
|
}, |
|
methods: { |
|
...mapMutations('content', [ |
|
'setColumn' |
|
]), |
|
// 栏目树形 |
|
getColumn() { |
|
this.$post(this.api.listWithTree, { |
|
siteId: this.$store.state.content.site.id, |
|
columnName: '', |
|
templateId: '', |
|
typeId : '', |
|
isSort: 0 |
|
}).then(({ data }) => { |
|
this.columns = data |
|
this.$nextTick(() => { |
|
this.$refs.column.setCurrentKey(this.$route.query.columnId || data[0].id) |
|
this.getData() |
|
}) |
|
}).catch(e => {}) |
|
}, |
|
// 文章列表 |
|
getData() { |
|
const id = this.$refs.column.getCurrentKey() |
|
this.$router.push(`/article?columnId=${id}`).catch(e => {}) |
|
const { keyword } = this |
|
this.$post(this.api.queryArticle, { |
|
siteId: this.$store.state.content.site.id, |
|
columnIds: [id], |
|
pageNum: this.page, |
|
pageSize: this.pageSize, |
|
title: this.field === 'title' ? keyword : '', |
|
founder: this.field === 'founder' ? keyword : '', |
|
column: this.field === 'column' ? keyword : '', |
|
editor: this.field === 'editor' ? keyword : '' |
|
}).then(({ data }) => { |
|
this.list = data.records |
|
this.total = +data.total |
|
}).catch(err => {}) |
|
}, |
|
// 重置栏位筛选 |
|
resetColumns() { |
|
this.settings = JSON.parse(JSON.stringify(this.originSettings)) |
|
}, |
|
currentChange(val) { |
|
this.page = val |
|
this.getData() |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val |
|
}, |
|
initData() { |
|
this.$refs.table.clearSelection() |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
batchDel() { // 批量删除 |
|
if (this.multipleSelection.length) { |
|
this.$confirm("确定要删除选中用户吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
let ids = this.multipleSelection.map(item => { |
|
return item.accountId; |
|
}); |
|
this.$post(`${this.api.delStudent}?accountIds=${ids.toString()}`).then(res => { |
|
this.multipleSelection = []; |
|
this.$refs.table.clearSelection(); |
|
util.successMsg("删除成功"); |
|
if (this.studentType) { |
|
this.getData(); |
|
} else { |
|
this.getOrgStudentData(); |
|
} |
|
}).catch(res => { |
|
}); |
|
if(this.multipleSelection.length === this.list.length && this.page>1) { |
|
this.handleCurrentChange(this.page - 1) |
|
} |
|
}).catch(() => { |
|
}); |
|
} else { |
|
util.errorMsg("请先选择数据 ！"); |
|
} |
|
}, |
|
// 删除 |
|
handleDelete(row) { |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$post(`${this.api.deleteArticle}?id=${row.id}`).then(res => { |
|
util.successMsg("删除成功") |
|
this.getData() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}, |
|
// 新增 |
|
add() { |
|
if (!this.columns.length) return util.errorMsg('请添加栏目') |
|
this.setColumn(this.$refs.column.getCurrentNode()) |
|
this.$router.push(`add?columnId=${this.$refs.column.getCurrentKey()}`) |
|
}, |
|
// 预览 |
|
preview(row) { |
|
window.open(`http://192.168.31.${Setting.isDev ? 126 : 136}:8095/#/article?id=` + row.id) |
|
}, |
|
// 编辑 |
|
edit(row) { |
|
this.$router.push(`add?id=${row.id}`) |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.custom-tree-node { |
|
display: inline-flex; |
|
align-items: center; |
|
} |
|
.name { |
|
display: inline-block; |
|
max-width: 160px; |
|
margin-right: 20px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
</style> |