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.
471 lines
16 KiB
471 lines
16 KiB
<template> |
|
<div class="page"> |
|
<div class="tool"> |
|
<div class="search-wrap"> |
|
<el-input placeholder="请输入栏目名称" 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> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:更改排序'" class="lg" @click="sort">更改排序</el-button> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:导航样式设置'" class="lg" @click="styleSet">导航样式设置</el-button> |
|
</div> |
|
</div> |
|
|
|
<el-table v-loading="listLoading" ref="table" :data="list" default-expand-all class="table" header-align="center" @selection-change="handleSelectionChange" @select-all="selectAll" row-key="id"> |
|
<el-table-column v-if="settings[0].show" type="selection" width="50" align="center" :reserve-selection="true"></el-table-column> |
|
<el-table-column prop="columnName" show-overflow-tooltip label="名称" min-width="140"></el-table-column> |
|
<el-table-column v-if="settings[1].show" prop="typeId" label="栏目类型" min-width="100"> |
|
<template slot-scope="scope"> |
|
{{ types.find(e => e.id == scope.row.typeId) && types.find(e => e.id == scope.row.typeId).name }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="settings[2].show" prop="templateName" label="栏目模板" min-width="100"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.typeId === 2 ? '--' : scope.row.templateName }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="settings[3].show" prop="listStyle" label="列表/长页样式" min-width="100"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.typeId === 2 ? '--' : scope.row.listStyle }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="settings[4].show" prop="detailStyle" label="详情样式" min-width="100"> |
|
<template slot-scope="scope"> |
|
{{ (scope.row.typeId === 1 || scope.row.typeId === 4) ? scope.row.detailStyle : '--' }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="settings[5].show" prop="menuVisible" label="导航菜单" min-width="100"> |
|
<template slot-scope="scope"> |
|
<el-switch |
|
v-model="scope.row.menuVisible" |
|
:active-value="0" |
|
:inactive-value="1" |
|
@change="switchOff($event, scope.row, scope.$index)"> |
|
</el-switch> |
|
</template> |
|
</el-table-column> |
|
<el-table-column v-if="settings[6].show" prop="id" label="ID" min-width="80"></el-table-column> |
|
<el-table-column v-if="settings[7].show" label="操作" width="270"> |
|
<template slot-scope="scope"> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'" type="text" @click="edit(scope.row, 'add')">新增下级</el-button> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text" @click="edit(scope.row, 'edit')">编辑</el-button> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" type="text" @click="del(scope.row)">删除</el-button> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:预览'" v-if="scope.row.typeId != 2" type="text" @click="preview(scope.row)">预览</el-button> |
|
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:页面管理'" v-if="scope.row.typeId == 3" class="page-set" type="primary" size="mini" @click="page(scope.row)">页面设置</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
|
|
<el-dialog title="编辑栏目排序" :visible.sync="sortVisible" width="750px" :close-on-click-modal="false"> |
|
<div class="sort-wrap"> |
|
<ul class="thead"> |
|
<li style="width: 395px;padding-left: 30px">栏目</li> |
|
<li style="width: 205px">栏目类型</li> |
|
<li>前台可见</li> |
|
</ul> |
|
<el-tree |
|
class="sort" |
|
:data="sortColumns" |
|
node-key="id" |
|
default-expand-all |
|
draggable> |
|
<ul class="sort-line" slot-scope="{ node, data }"> |
|
<li>{{ data.columnName }}</li> |
|
<li>{{ types.find(e => e.id == data.typeId) && types.find(e => e.id == data.typeId).name }}</li> |
|
<li> |
|
<el-switch |
|
v-model="data.menuVisible" |
|
:active-value="0" |
|
:inactive-value="1" |
|
@change="switchOff($event, data)"> |
|
</el-switch> |
|
</li> |
|
</ul> |
|
</el-tree> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="sortVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="sortSubmit">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<el-dialog title="导航样式设置" :visible.sync="styleVisible" width="850px" :close-on-click-modal="false"> |
|
<el-form class="input-form" label-width="100px"> |
|
<el-form-item label="导航样式"> |
|
<el-select v-model="form.navigationStyle"> |
|
<el-option |
|
v-for="item in styleTypes" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id"> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="样式选择"> |
|
<ul class="styles"> |
|
<li> |
|
<div class="review"> |
|
<img src="@/assets/images/style1.png" alt=""> |
|
</div> |
|
<el-radio v-model="form.styleTemplate" :label="1">竖行导航</el-radio> |
|
</li> |
|
<!-- <li> |
|
<div class="review"> |
|
<img src="@/assets/images/style2.png" alt=""> |
|
</div> |
|
<el-radio v-model="form.styleTemplate" :label="2">横向导航</el-radio> |
|
</li> --> |
|
</ul> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="styleVisible = false">取 消</el-button> |
|
<el-button type="primary" @click="styleSubmit">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Setting from '@/setting' |
|
import ColumnConst from '@/const/column' |
|
import util from '@/libs/util' |
|
export default { |
|
data() { |
|
return { |
|
siteId: this.$store.state.content.site.id, |
|
siteName: this.$store.state.content.site.siteName, |
|
types: ColumnConst.types, |
|
templates: [], |
|
listStyle: [], |
|
pageStyle: [], |
|
detailStyle: [], |
|
keyword: '', |
|
searchTimer: null, |
|
list: [], |
|
multipleSelection: [], |
|
listLoading: false, |
|
styleVisible: false, |
|
styleTypes: [ |
|
{ |
|
id: 1, |
|
name: '目录树结构' |
|
} |
|
], |
|
form: { |
|
id: '', |
|
navigationStyle: 1, |
|
styleTemplate: 1, |
|
siteId: this.$store.state.content.site.id |
|
}, |
|
originSettings: [], |
|
settings: [ |
|
{ |
|
name: '选择框', |
|
show: true |
|
}, |
|
{ |
|
name: '栏目类型', |
|
show: true |
|
}, |
|
{ |
|
name: '栏目模板', |
|
show: true |
|
}, |
|
{ |
|
name: '列表/长页样式', |
|
show: true |
|
}, |
|
{ |
|
name: '详情样式', |
|
show: true |
|
}, |
|
{ |
|
name: '导航菜单', |
|
show: true |
|
}, |
|
{ |
|
name: 'ID', |
|
show: true |
|
}, |
|
{ |
|
name: '操作', |
|
show: true |
|
} |
|
], |
|
sortVisible: false, |
|
sortColumns: [], |
|
sortLevel: 1, |
|
}; |
|
}, |
|
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.getData() |
|
}, |
|
methods: { |
|
getData() { |
|
this.$post(this.api.listWithTree, { |
|
role: 1, |
|
isadmin: false, |
|
siteId: this.siteId, |
|
columnName: this.keyword, |
|
templateId: '', |
|
typeId : '', |
|
isSort: 1 |
|
}).then(({ data }) => { |
|
this.list = data |
|
this.listLoading = false |
|
}).catch(err => { |
|
this.listLoading = false |
|
}) |
|
}, |
|
// 根据模板id获取样式 |
|
getStyle() { |
|
this.$post(`${this.api.theTemplateIdGetsTheStyle}?templateId=${this.form.templateId}`).then(({ data }) => { |
|
this.listStyle = data.listingTemplateTypes |
|
this.detailStyle = data.detailsTypeOfTheTemplate |
|
}).catch(err => {}) |
|
}, |
|
// 重置列表 |
|
initData() { |
|
this.$refs.table.clearSelection() |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
// 重置栏位筛选 |
|
resetColumns() { |
|
this.settings = JSON.parse(JSON.stringify(this.originSettings)) |
|
}, |
|
add() { |
|
this.$router.push('add') |
|
}, |
|
edit(row, type) { |
|
this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`) |
|
}, |
|
del(row) { |
|
this.$confirm("删除栏目将会同时把栏目下的文章一并删除，是否确认删除栏目？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$post(`${this.api.deleteColumn}?ids=${row.id}`).then(res => { |
|
util.successMsg("删除成功") |
|
this.getData() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}, |
|
// 禁用启用 |
|
switchOff(val, row) { |
|
this.$post(this.api.updateColumn, row).then(res => {}).catch((res) => {}) |
|
}, |
|
// 预览 |
|
preview(row) { |
|
// 常规/子级优先栏目，则跳转到column；长页则跳转到对应的长页模板 |
|
window.open((Setting.isDev ? `http://${location.hostname}:8095` : this.$store.state.content.site.domainName) + `#/${row.typeId === 3 ? row.path : 'column'}?id=${row.id}&siteId=${row.siteId}`) |
|
}, |
|
// 页面管理 |
|
page(row) { |
|
this.$router.push(`${row.path}?id=${row.id}&path=${row.path}&siteId=${row.siteId}`) |
|
}, |
|
// 批量删除 |
|
batchDel() { |
|
const list = this.multipleSelection |
|
if (list.length) { |
|
this.$confirm('删除栏目将会同时把栏目下的文章一并删除，是否确认删除栏目？', '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
const data = [] |
|
list.map(e => { |
|
data.push('ids=' + e.id) |
|
}) |
|
this.$post(`${this.api.deleteColumn}?${data.join('&')}`).then(res => { |
|
this.$refs.table.clearSelection() |
|
util.successMsg("删除成功") |
|
this.getData() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
} else { |
|
util.errorMsg('请先选择数据 ！') |
|
} |
|
}, |
|
handleSelectionChange(val) { |
|
this.multipleSelection = val |
|
}, |
|
// 全选回调 |
|
selectAll() { |
|
this.checkedKeys = !this.checkedKeys |
|
this.select(this.list, this.checkedKeys) |
|
}, |
|
select(data, flag) { |
|
data.map(row => { |
|
this.$refs.table.toggleRowSelection(row, flag) |
|
if (row.children != undefined) this.select(row.children, this.checkedKeys) |
|
}) |
|
}, |
|
handleCurrentChange(val) { |
|
this.page = val |
|
this.$router.push(`list?page=${val}`) |
|
this.getData() |
|
}, |
|
// 更改排序 |
|
sort() { |
|
this.$post(this.api.listWithTree, { |
|
role: 1, |
|
isadmin: false, |
|
siteId: this.siteId, |
|
columnName: '', |
|
templateId: '', |
|
typeId : '', |
|
isSort: 1 |
|
}).then(({ data }) => { |
|
this.sortColumns = data |
|
}).catch(err => {}) |
|
this.sortVisible = true |
|
}, |
|
// 递归处理排序参数 |
|
sortList(list, result, parent = {}) { |
|
list.map((e, i) => { |
|
if (!parent.id) this.sortLevel = 1 |
|
result.push({ |
|
id: e.id, |
|
fatherId: parent.id || 0, |
|
level: this.sortLevel, |
|
sort: i + 1, |
|
}) |
|
if (e.children.length) { |
|
++this.sortLevel |
|
this.sortList(e.children, result, e) |
|
} |
|
}) |
|
}, |
|
// 排序提交 |
|
sortSubmit() { |
|
const result = [] |
|
this.sortList(this.sortColumns, result) |
|
this.$post(this.api.sortByColumn, result).then(({ data }) => { |
|
util.successMsg('修改成功') |
|
this.sortVisible = false |
|
this.getData() |
|
}).catch(err => {}) |
|
}, |
|
// 导航样式设置 |
|
styleSet() { |
|
this.styleVisible = true |
|
this.$post(`${this.api.searchAllBySite}?siteId=${this.siteId}`).then(({ data }) => { |
|
// 如果添加了该站点的导航设置，则直接赋值，否则调新增接口去添加一条该站点的配置，再调列表接口获取id |
|
if (data.length) { |
|
this.form = data[0] |
|
} else { |
|
this.$post(this.api.saveStyle, this.form).then(res => { |
|
this.$post(`${this.api.searchAllBySite}?siteId=${this.siteId}`).then(({ data }) => { |
|
this.form = data[0] |
|
}).catch(res => {}) |
|
}).catch(res => {}) |
|
} |
|
}).catch(res => {}) |
|
}, |
|
// 导航样式提交 |
|
styleSubmit() { |
|
this.$post(this.api.updateStyle, this.form).then(res => { |
|
util.successMsg('修改成功') |
|
this.styleVisible = false |
|
}).catch(res => {}) |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.sort-wrap { |
|
max-height: 400px; |
|
overflow: auto; |
|
} |
|
.thead { |
|
display: flex; |
|
line-height: 44px; |
|
background-color: #F7F7F7; |
|
li { |
|
padding: 0 10px; |
|
font-size: 12px; |
|
font-weight: 500; |
|
font-family: PingFangSC-Medium, PingFang SC; |
|
color: #323232; |
|
} |
|
} |
|
/deep/.sort { |
|
.el-tree-node__content { |
|
height: auto; |
|
border-bottom: 1px solid #EBEDF0; |
|
} |
|
// .el-tree-node__expand-icon { |
|
// display: none; |
|
// } |
|
} |
|
.sort-line { |
|
display: flex; |
|
width: 100%; |
|
li { |
|
padding: 12px 0; |
|
&:first-child { |
|
width: 230px; |
|
} |
|
&:nth-child(2) { |
|
position: absolute; |
|
left: 400px; |
|
} |
|
&:last-child { |
|
position: absolute; |
|
right: 50px; |
|
} |
|
} |
|
} |
|
.styles { |
|
display: inline-flex; |
|
li { |
|
margin-right: 20px; |
|
text-align: center; |
|
&:hover .review { |
|
border-color: #2962FF; |
|
} |
|
} |
|
.review { |
|
padding: 18px; |
|
margin-bottom: 10px; |
|
border: 1px solid #DCDEE0; |
|
border-radius: 2px; |
|
} |
|
} |
|
.page-set { |
|
padding: 6px; |
|
} |
|
</style> |