<template>
|
<div class="mySetting">
|
<!-- header 页面标题提示 -->
|
<header>
|
<div class="header-title">系统设置 >> 门户管理 > 自定义菜单设置</div>
|
</header>
|
<main>
|
<div class="main-content">
|
<!-- 数据展示 -->
|
<el-row class="my-container">
|
<el-col :span="6" class="my-aside">
|
<el-tree draggable :data="menuList" @node-click="handleNodeClick" :props="defaultProps"
|
accordion node-key="id" @node-drop="handleDrop" :allow-drop="allowDrop">
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
<span>{{ node.label }}</span>
|
</span>
|
</el-tree>
|
</el-col>
|
<el-col :span="18" class="my-content" v-if="article.title">
|
<div class="my-header">菜单管理-{{article.title}}
|
</div>
|
<div class="my-name">
|
<div class="my-show__left">名称:</div>
|
<div class="my-show__right">{{article.title}}</div>
|
</div>
|
<div class="my-desc">
|
<div class="my-show__left">描述:</div>
|
<div class="my-show__right">{{article.title}}</div>
|
</div>
|
<div class="my-show">
|
<div class="my-show__left">是否显示菜单:</div>
|
<div class="my-show__right">
|
<el-switch class="switchStyle" v-model="article.isStart" active-color="#3fef9a"
|
inactive-color="#000212" @change="handleChangeStatus(article)">
|
</el-switch>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</main>
|
<footer>
|
<!-- 新增弹窗 -->
|
<el-dialog title="提示" :visible.sync="dialogAdd" v-if="dialogAdd" width="45%" :before-close="handleClose">
|
<MyAdd></MyAdd>
|
</el-dialog>
|
</footer>
|
</div>
|
</template>
|
<script>
|
import MyAdd from './create'
|
export default {
|
components: {
|
MyAdd
|
},
|
data() {
|
return {
|
menuList: [],
|
article: {},
|
defaultProps: {
|
children: 'menuVoArrayList',
|
label: 'title'
|
},
|
dialogAdd: false,
|
}
|
},
|
created() {
|
this.getMenuList();
|
},
|
methods: {
|
// 点击节点
|
handleNodeClick(data) {
|
this.article = { ...data };
|
this.article.isStart === 0 ? this.article.isStart = false : this.article.isStart = true
|
},
|
// 修改状态
|
handleChangeStatus(data) {
|
let { isStart, relationId } = data;
|
isStart ? isStart = 1 : isStart = 0;
|
this.$axios({
|
method: 'put',
|
url: `sccg/system/portal/menu/modification_myself?relationId=${relationId}&status=${isStart}`
|
})
|
.then(res => {
|
this.$message({
|
type: res.code === 200 ? 'success' : 'error',
|
message: res.message
|
})
|
this.getMenuList();
|
this.article = {};
|
})
|
},
|
handleDelete(data) {
|
this.$confirm('您确认要删除订单吗?')
|
.then(_ => {
|
this.$axios({
|
method: 'post',
|
url: `sccg/menu/delete/${data.id}`
|
})
|
.then(res => {
|
this.$message({
|
type: res.code === 200 ? 'success' : 'error',
|
message: res.code === 200 ? '删除菜单成功' : res.message
|
})
|
if (res.code === 200) {
|
this.getMenuList();
|
}
|
})
|
})
|
.catch(err => {
|
})
|
},
|
// 获取菜单列表
|
getMenuList() {
|
this.$axios({
|
method: 'get',
|
url: 'sccg/system/portal/menu/search_myself',
|
}).then(res => {
|
this.menuList = res.data.menu;
|
})
|
},
|
// 拖拽
|
handleDrop(before, after, inner, event) {
|
},
|
// 获取是否可以放置
|
allowDrop(before, inner, next) {
|
if (before.data.level === inner.data.level) {
|
if (before.data.parentId === inner.data.parentId) {
|
return next === "prev" || next === "next";
|
} else {
|
return false;
|
}
|
} else {
|
// 不同级进行处理
|
return false;
|
}
|
}
|
}
|
|
}
|
</script>
|
<style lang="scss" scoped>
|
.mySetting {
|
margin: 10px 20px;
|
text-align: left;
|
color: #4b9bb7;
|
|
header {
|
line-height: 60px;
|
padding: 0 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.header-add {
|
.el-button {
|
background-color: #eb5d01;
|
border: none;
|
}
|
}
|
}
|
|
main {
|
background-color: #09152f;
|
margin-top: 20px;
|
padding-bottom: 50px;
|
|
.main-content {
|
.my-container {
|
::v-deep .el-tree-node__content {
|
height: 36px;
|
}
|
|
::v-deep .el-tree-node__label {
|
line-height: 20px;
|
}
|
}
|
|
.my-header {
|
line-height: 60px;
|
display: flex;
|
justify-content: center;
|
}
|
|
.my-name,
|
.my-desc,
|
.my-show {
|
line-height: 40px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.my-show__right {
|
margin-left: 10px;
|
}
|
|
.custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
line-height: 20px;
|
padding-right: 8px;
|
}
|
}
|
|
&::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>
|
