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.
397 lines
13 KiB
397 lines
13 KiB
4 years ago
|
<template>
|
||
|
|
<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'>
|
||
|
|
<template v-if='sorting'>
|
||
|
|
<el-button class='action-btn' type='primary' size='small' round @click='cancelSort'>取消</el-button>
|
||
|
|
<el-button class='action-btn' type='primary' size='small' round @click='sortSubmit'>保存</el-button>
|
||
|
|
</template>
|
||
|
|
<template v-if='!sorting'>
|
||
|
|
<el-button class='action-btn' type='primary' size='small' round @click='openSort' v-auth>更改排序
|
||
|
|
</el-button>
|
||
|
|
<el-button class='action-btn' type='primary' size='small' round @click='addColumn' v-auth>添加栏目
|
||
|
|
</el-button>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class='page-content' style='padding-top: 24px; margin-top: 24px'>
|
||
|
|
<div class='el-table'>
|
||
|
|
<div class='list'>
|
||
|
|
<div class='thead'>
|
||
|
|
<span>栏目名称</span>
|
||
|
|
<span><em :class='{hide: sorting}' style='font-style: normal'>操作</em></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-tree :data='listData' node-key='id' default-expand-all @node-drop='handleDrop'
|
||
|
|
:draggable='sorting' :allow-drop='allowDrop' :allow-drag='allowDrag'>
|
||
|
|
<span class='custom-tree-node' slot-scope='{ node, data }'>
|
||
|
|
<span class='name'>{{ node.label }}</span>
|
||
|
|
<span class='action' v-show='!sorting'>
|
||
|
|
<el-button type='text' @click.stop='editType(data)' v-auth>编辑</el-button>
|
||
|
|
<el-divider direction='vertical' v-auth="'information:编辑'"></el-divider>
|
||
|
|
<template v-if='node.level == 1' v-auth="'information:新增'">
|
||
|
|
<el-button type='text' @click.stop='addType(data)'>新增</el-button>
|
||
|
|
<el-divider direction='vertical'></el-divider>
|
||
|
|
</template>
|
||
|
|
<el-button type='text' @click.stop='delData(data)' v-auth>删除</el-button>
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</el-tree>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-dialog :title="isAddColumn ? '添加栏目' : '编辑栏目'" :visible.sync='columnVisible' width='400px'
|
||
|
|
:close-on-click-modal='false' @close='closeColumn'>
|
||
|
|
<el-form>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input placeholder='栏目名称' v-model='columnName'></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<span slot='footer' class='dialog-footer'>
|
||
|
|
<el-button size='small' @click='columnVisible = false'>取 消</el-button>
|
||
|
|
<el-button size='small' type='primary' @click='columnSubmit'>确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
<el-dialog :title="isAddType ? '添加分类' : '编辑分类'" :visible.sync='typeVisible' width='400px'
|
||
|
|
:close-on-click-modal='false' @close='closeType'>
|
||
|
|
<el-form>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input placeholder='分类名称' v-model='typeName'></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<span slot='footer' class='dialog-footer'>
|
||
|
|
<el-button size='small' @click='typeVisible = false'>取 消</el-button>
|
||
|
|
<el-button size='small' type='primary' @click='typeSubmit'>确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import util from '@/libs/util'
|
||
|
|
export default {
|
||
|
|
name: 'columnManage',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeName: 'first',
|
||
|
|
tabs: {
|
||
|
|
first: '栏目管理'
|
||
|
|
},
|
||
|
|
name: this.$store.state.name,
|
||
|
|
originalList: [],
|
||
|
|
listData: [],
|
||
|
|
multipleSelection: [],
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
totals: 0,
|
||
|
|
columnVisible: false,
|
||
|
|
columnName: '',
|
||
|
|
typeVisible: false,
|
||
|
|
typeName: '',
|
||
|
|
curRow: {},
|
||
|
|
sortObj: null,
|
||
|
|
sorting: false,
|
||
|
|
curParentId: '',
|
||
|
|
isAddColumn: false,
|
||
|
|
isAddType: false,
|
||
|
|
defaultProps: {
|
||
|
|
children: 'children',
|
||
|
|
label: 'label'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getData();
|
||
|
|
},
|
||
|
|
beforeRouteLeave(to, from, next) {
|
||
|
|
if (JSON.stringify(this.originalList) !== JSON.stringify(this.listData)) {
|
||
|
|
this.$confirm('确定返回？排序尚未保存。', '提示', {
|
||
|
|
type: 'warning'
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
next();
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
next();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getData() {
|
||
|
|
let data = {
|
||
|
|
page: this.pageNo,
|
||
|
|
size: this.pageSize
|
||
|
|
};
|
||
|
|
this.$get(this.api.queryAllColumns, data).then(res => {
|
||
|
|
let columnTree = res.columnTree;
|
||
|
|
let total = columnTree.length;
|
||
|
|
let list = [];
|
||
|
|
columnTree.forEach((n, k) => {
|
||
|
|
list.push({
|
||
|
|
id: n.id,
|
||
|
|
label: n.name,
|
||
|
|
level: n.level,
|
||
|
|
parentId: n.parentId,
|
||
|
|
sort: n.sort,
|
||
|
|
children: []
|
||
|
|
});
|
||
|
|
n.secondColumn.forEach((j, i) => {
|
||
|
|
list[k].children.push({
|
||
|
|
id: j.id,
|
||
|
|
label: j.name,
|
||
|
|
level: j.level,
|
||
|
|
parentId: j.parentId,
|
||
|
|
sort: j.sort
|
||
|
|
});
|
||
|
|
});
|
||
|
|
total += n.secondColumn.length;
|
||
|
|
});
|
||
|
|
this.listData = list;
|
||
|
|
this.originalList = JSON.parse(JSON.stringify(this.listData));
|
||
|
|
this.totals = total;
|
||
|
|
if (!this.listData.length && this.totals) {
|
||
|
|
this.pageNo--;
|
||
|
|
this.getData();
|
||
|
|
}
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
},
|
||
|
|
delData(row) {
|
||
|
|
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', {
|
||
|
|
type: 'warning'
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
this.$del(`${this.api.deleteColumn}/${row.id}`).then(res => {
|
||
|
|
util.successMsg('删除成功');
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
});
|
||
|
|
},
|
||
|
|
addColumn() {
|
||
|
|
this.isAddColumn = true;
|
||
|
|
this.columnVisible = true;
|
||
|
|
},
|
||
|
|
sortSubmit() {
|
||
|
|
let list = JSON.parse(JSON.stringify(this.listData));
|
||
|
|
list.forEach((n, k) => {
|
||
|
|
n.name = n.label;
|
||
|
|
n.parentId = 1;
|
||
|
|
n.level = 1;
|
||
|
|
n.sort = k + 1;
|
||
|
|
n.children && n.children.forEach((j, i) => {
|
||
|
|
j.name = j.label;
|
||
|
|
j.parentId = n.id;
|
||
|
|
j.level = 2;
|
||
|
|
j.sort = i + 1;
|
||
|
|
delete j.label;
|
||
|
|
j.secondColumn = [];
|
||
|
|
});
|
||
|
|
delete n.label;
|
||
|
|
n.secondColumn = n.children;
|
||
|
|
n.children = null;
|
||
|
|
});
|
||
|
|
let data = { columnTree: list };
|
||
|
|
this.$post(this.api.columnReorder, data).then(res => {
|
||
|
|
util.successMsg('保存成功');
|
||
|
|
this.sorting = false;
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
},
|
||
|
|
columnSubmit() {
|
||
|
|
if (!this.columnName) return util.warningMsg('请填写栏目名称');
|
||
|
|
let data = {
|
||
|
|
level: 1,
|
||
|
|
parentId: 1,
|
||
|
|
name: this.columnName
|
||
|
|
};
|
||
|
|
if (this.curRow.id) {
|
||
|
|
data.id = this.curRow.id;
|
||
|
|
this.$put(this.api.editColumn, data).then(res => {
|
||
|
|
util.warningMsg('修改成功');
|
||
|
|
this.columnVisible = false;
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$post(this.api.addColumn, data).then(res => {
|
||
|
|
util.successMsg('添加成功');
|
||
|
|
this.columnVisible = false;
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
addType(row) {
|
||
|
|
this.isAddType = true;
|
||
|
|
this.curRow = row;
|
||
|
|
this.typeVisible = true;
|
||
|
|
},
|
||
|
|
editType(row) {
|
||
|
|
this.curRow = row;
|
||
|
|
if (row.level == 1) {
|
||
|
|
this.isAddColumn = false;
|
||
|
|
this.columnVisible = true;
|
||
|
|
this.columnName = row.label;
|
||
|
|
} else {
|
||
|
|
this.isAddType = false;
|
||
|
|
this.typeVisible = true;
|
||
|
|
this.typeName = row.label;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
typeSubmit(row) {
|
||
|
|
if (!this.typeName) return util.warningMsg('请填写分类名称');
|
||
|
|
let data = {
|
||
|
|
level: 2,
|
||
|
|
name: this.typeName
|
||
|
|
};
|
||
|
|
if (this.curRow.level == 2) {
|
||
|
|
data.id = this.curRow.id;
|
||
|
|
data.parentId = this.curRow.parentId;
|
||
|
|
this.$put(this.api.editColumn, data).then(res => {
|
||
|
|
util.successMsg('修改成功');
|
||
|
|
this.typeVisible = false;
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
data.parentId = this.curRow.id;
|
||
|
|
this.$post(this.api.addColumn, data).then(res => {
|
||
|
|
util.successMsg('新增成功');
|
||
|
|
this.typeVisible = false;
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
cancelSort() {
|
||
|
|
this.sorting = false;
|
||
|
|
this.listData = JSON.parse(JSON.stringify(this.originalList));
|
||
|
|
this.sortObj.destroy();
|
||
|
|
},
|
||
|
|
openSort() {
|
||
|
|
this.sorting = true;
|
||
|
|
},
|
||
|
|
handleSelectionChange(val) {
|
||
|
|
this.multipleSelection = val;
|
||
|
|
},
|
||
|
|
onSearch() {
|
||
|
|
this.pageNo = 1;
|
||
|
|
this.getData();
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
this.pageNo = val;
|
||
|
|
this.getData();
|
||
|
|
},
|
||
|
|
closeColumn() {
|
||
|
|
this.columnName = '';
|
||
|
|
this.curRow = {};
|
||
|
|
},
|
||
|
|
closeType() {
|
||
|
|
this.typeName = '';
|
||
|
|
this.curRow = {};
|
||
|
|
},
|
||
|
|
handleDrop(draggingNode, dropNode, dropType, ev) {
|
||
|
|
// console.log('tree drop: ', dropNode, dropType);
|
||
|
|
},
|
||
|
|
allowDrop(draggingNode, dropNode, type) {
|
||
|
|
if (dropNode.level == 2 && draggingNode.childNodes.length == 0) {
|
||
|
|
return type !== 'inner';
|
||
|
|
} else if ((draggingNode.childNodes.length > 0 && dropNode.level == 2) || (draggingNode.childNodes.length > 0 && type == 'inner')) {
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
allowDrag(draggingNode) {
|
||
|
|
return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.btn-wrap {
|
||
|
|
position: absolute;
|
||
|
|
top: 15px;
|
||
|
|
right: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list {
|
||
|
|
.thead {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: rgba(0, 0, 0, 0.04) !important;
|
||
|
|
|
||
|
|
span {
|
||
|
|
padding: 0.75rem 0.625rem;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 14px;
|
||
|
|
color: rgba(0, 0, 0, 0.85);
|
||
|
|
font-weight: normal;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
padding-left: 23.5vw;
|
||
|
|
@media(max-width: 1270px) {
|
||
|
|
padding-left: 25.5%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
width: 16%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/ .el-tree {
|
||
|
|
.el-tree-node__expand-icon {
|
||
|
|
margin-left: 22.5vw;
|
||
|
|
@media(max-width: 1270px) {
|
||
|
|
margin-left: 23.5%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-tree-node__content {
|
||
|
|
padding: 20px;
|
||
|
|
border-bottom: 0.0625rem solid #EBEEF5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-tree-node {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 14px;
|
||
|
|
padding-right: 8px;
|
||
|
|
|
||
|
|
.name {
|
||
|
|
line-height: 44px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action {
|
||
|
|
width: 8.5vw;
|
||
|
|
text-align: left;
|
||
|
|
@media(max-width: 1270px) {
|
||
|
|
width: 16%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.hide {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
</style>
|