<template>
|
<div class="mySetting">
|
<!-- header 页面标题提示 -->
|
<header>
|
<div class="headerTitle">系统设置 >> 门户管理 > 自定义菜单设置</div>
|
</header>
|
<main>
|
<div class="mainContent">
|
<!-- 数据展示 -->
|
<el-table ref="multipleTable"
|
:header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
|
:data="menuList" style="width: 100%" row-key="id" :row-class-name="tableRowClassName">
|
<el-table-column type="selection" min-width="5">
|
</el-table-column>
|
<el-table-column prop="title" label="菜单栏" min-width="75">
|
<el-tree :data="menuList" node-key="id" :default-expanded-keys="[0]"
|
:default-checked-keys="[0]" :props="defaultProps">
|
</el-tree>
|
</el-table-column>
|
<el-table-column label="操作" min-width="20">
|
<template slot-scope="scope">
|
<div class="operation">
|
<!-- <span @click="handleChangeRole(scope.row)">修改角色</span> -->
|
<span @click="handleFind(scope.row)">查看</span>
|
<span class="line">|</span>
|
<!-- <span>修改密码</span> -->
|
<!-- <span>删除</span> -->
|
<span @click="handleUpdate(scope.row)">修改角色</span>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- 查看修改页面 -->
|
<el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '修改角色信息' :'查看角色信息'"
|
v-if="dialogUpdate">
|
|
</el-dialog>
|
</div>
|
</main>
|
</div>
|
</template>
|
<script>
|
import helper from "@/utils/mydate.js"
|
export default {
|
data() {
|
return {
|
menuList: [],
|
article: [],
|
defaultProps: {
|
children: 'menuVoArrayList',
|
label: 'title'
|
},
|
count: 1,
|
menuList: [],
|
context: "",
|
dialogCreate: false,
|
dialogUpdate: false,
|
updateFlag: false,
|
userInfo: '',
|
}
|
},
|
created() {
|
this.getMenuList();
|
},
|
methods: {
|
// 获取菜单列表
|
getMenuList() {
|
this.$axios({
|
method: 'get',
|
url: 'sccg/system/portal/menu/search',
|
}).then(res => {
|
this.menuList = res.data.records;
|
this.getContent(0);
|
})
|
},
|
// 切换菜单内容展示
|
getContent(index, sonIndex = null) {
|
if (sonIndex === null) {
|
this.article = this.menuList[index];
|
|
return;
|
}
|
this.article = this.menuList[index].menuVoArrayList[sonIndex];
|
},
|
// 设置表格斑马纹
|
tableRowClassName({ row, rowIndex }) {
|
if ((rowIndex + 1) % 2 == 0) {
|
return 'warning-row';
|
} else {
|
return 'success-row';
|
}
|
return '';
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
console.log(data, checked, indeterminate);
|
},
|
handleNodeClick(data) {
|
console.log(data);
|
},
|
loadNode(node, resolve) {
|
if (node.level === 0) {
|
return resolve([{ name: 'region1' }, { name: 'region2' }]);
|
}
|
if (node.level > 3) return resolve([]);
|
|
var hasChild;
|
if (node.data.name === 'region1') {
|
hasChild = true;
|
} else if (node.data.name === 'region2') {
|
hasChild = false;
|
} else {
|
hasChild = Math.random() > 0.5;
|
}
|
|
setTimeout(() => {
|
var data;
|
if (hasChild) {
|
data = [{
|
name: 'zone' + this.count++
|
}, {
|
name: 'zone' + this.count++
|
}];
|
} else {
|
data = [];
|
}
|
|
resolve(data);
|
}, 500);
|
}
|
}
|
|
}
|
</script>
|
<style lang="scss" scoped>
|
.mySetting {
|
margin: 10px 20px;
|
text-align: left;
|
color: #4b9bb7;
|
|
header {
|
line-height: 60px;
|
padding: 0 20px;
|
}
|
|
main {
|
background-color: #09152f;
|
margin-top: 20px;
|
padding-bottom: 50px;
|
border: 1pox solid #fff;
|
|
.mainTitle {
|
line-height: 60px;
|
}
|
|
.el-table {
|
color: #4b9bb7;
|
font-size: 10px;
|
|
&::v-deep .el-table__cell {
|
text-align: center;
|
}
|
|
&::v-deep .el-table__empty-block {
|
background-color: #09152f;
|
color: #4b9bb7;
|
}
|
&::v-deep .el-table__row:hover{
|
background-color: #4b9bb7;
|
}
|
.el-tree {
|
background-color: #071f39;
|
}
|
|
.operation {
|
display: flex;
|
justify-content: center;
|
|
.line {
|
padding: 0 5px;
|
}
|
|
span:hover {
|
cursor: pointer;
|
}
|
}
|
}
|
|
.el-table::v-deep .warning-row {
|
background: #06122c;
|
}
|
|
.el-table::v-deep .success-row {
|
background: #071f39;
|
}
|
|
&::v-deep .switchStyle .el-switch__label {
|
position: absolute;
|
display: none;
|
color: #fff;
|
}
|
|
&::v-deep .el-switch__core {
|
background-color: rgba(166, 166, 166, 1);
|
}
|
|
&::v-deep .switchStyle .el-switch__label--left {
|
z-index: 9;
|
left: 20px;
|
}
|
|
&::v-deep .switchStyle .el-switch__label--right {
|
z-index: 9;
|
left: 4px;
|
}
|
|
&::v-deep .switchStyle .el-switch__label.is-active {
|
display: block;
|
}
|
|
&::v-deep .switchStyle.el-switch .el-switch__core,
|
&::v-deep .el-switch .el-switch__label {
|
width: 50px !important;
|
}
|
}
|
|
&::v-deep .el-dialog__header,
|
&::v-deep .el-dialog__body {
|
background-color: #06122c;
|
}
|
|
&::v-deep .el-dialog__header {
|
display: flex;
|
align-items: center;
|
background-color: #fff;
|
padding: 20px;
|
line-height: 60px;
|
}
|
|
&::v-deep .el-dialog__title {
|
color: #4b9bb7;
|
}
|
|
&::v-deep .el-dialog__close {
|
width: 20px;
|
height: 20px;
|
// color: #fff;
|
}
|
|
&::v-deep .el-dialog__body {
|
padding: 0;
|
}
|
}
|
</style>
|
