| | |
| | | <!-- header 页面标题提示 --> |
| | | <header> |
| | | <div class="header-title">系统设置 >> 门户管理 > 自定义菜单设置</div> |
| | | <div class="header-add"> |
| | | <el-button type="primary" @click="handleAdd">新增菜单</el-button> |
| | | </div> |
| | | </header> |
| | | <main> |
| | | <div class="main-content"> |
| | | <!-- 数据展示 --> |
| | | <!-- <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"> |
| | | <template slot-scope="scope"> |
| | | <el-tree :data="scope.row.menuVoArrayList" node-key="id" :default-expanded-keys="[0]" |
| | | :default-checked-keys="[0]" :props="defaultProps"> |
| | | </el-tree> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" min-width="20"> |
| | | <template slot-scope="scope"> |
| | | <div class="operation"> |
| | | <span @click="handleAdd(scope.row)">新增</span> |
| | | <span class="line">|</span> |
| | | <span @click="handleEdit(scope.row)">编辑</span> |
| | | <span class="line">|</span> |
| | | <span @click="handleDelete(scope.row)">删除</span> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> --> |
| | | <el-row class="my-container"> |
| | | <el-col :span="6" class="my-aside"> |
| | | <el-tree :data="menuList" @node-click="handleNodeClick" :props="defaultProps" accordion |
| | | node-key="id"> |
| | | <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-button type="text" size="mini" @click="handleEdit(data)"> |
| | | 编辑 |
| | | </el-button> |
| | | <el-button type="text" size="mini" @click="handleDelete(data)"> |
| | | 删除 |
| | | </el-button> |
| | | </span> |
| | | </span> |
| | | </el-tree> |
| | | </el-col> |
| | |
| | | <div class="my-show"> |
| | | <div class="my-show__left">是否显示菜单:</div> |
| | | <div class="my-show__right"> |
| | | <el-switch class="switchStyle" v-model="article.hidden" active-text="开" |
| | | inactive-text="关" active-color="#3fef9a" inactive-color="#000212" |
| | | @change="handleChangeStatus(article)"> |
| | | <el-switch class="switchStyle" v-model="article.isStart" active-color="#3fef9a" |
| | | inactive-color="#000212" @change="handleChangeStatus(article)"> |
| | | </el-switch> |
| | | </div> |
| | | </div> |
| | |
| | | // 点击节点 |
| | | handleNodeClick(data) { |
| | | this.article = { ...data }; |
| | | this.article.hidden === 0 ? this.article.hidden = false : this.article.hidden = true |
| | | this.article.isStart === 0 ? this.article.isStart = false : this.article.isStart = true |
| | | }, |
| | | // 修改状态 |
| | | handleChangeStatus(data) { |
| | | console.log(data); |
| | | data.hidden ? data.hidden = 1 : data.hidden = 0; |
| | | let { isStart, relationId } = data; |
| | | isStart ? isStart = 1 : isStart = 0; |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: `sccg/menu/updateHidden/${data.id}` + '?hidden=' + data.hidden |
| | | method: 'put', |
| | | url: `sccg/system/portal/menu/modification_myself?relationId=${relationId}&status=${isStart}` |
| | | }) |
| | | .then(res => { |
| | | this.$message({ |
| | |
| | | this.article = {}; |
| | | }) |
| | | }, |
| | | // 新增 |
| | | handleAdd() { |
| | | this.dialogAdd = true; |
| | | }, |
| | | // 编辑 |
| | | handleEdit(data) { |
| | | console.log(data); |
| | | }, |
| | | //删除 |
| | | handleDelete(data) { |
| | | console.log(data); |
| | | this.$confirm('您确认要删除订单吗?') |
| | | .then(_ => { |
| | | this.$axios({ |
| | |
| | | }) |
| | | }) |
| | | .catch(err => { |
| | | console.log(err); |
| | | }) |
| | | }, |
| | | // 获取菜单列表 |
| | | getMenuList() { |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/system/portal/menu/search', |
| | | url: 'sccg/system/portal/menu/search_myself', |
| | | }).then(res => { |
| | | this.menuList = res.data.records; |
| | | console.log(this.menuList); |
| | | this.menuList = res.data.menu; |
| | | }) |
| | | }, |
| | | // 关闭弹窗 |
| | | handleClose(done) { |
| | | this.$confirm('确认关闭?') |
| | | .then(_ => { |
| | | this.dialogAdd = false |
| | | done(); |
| | | }) |
| | | .catch(_ => {}); |
| | | } |
| | | // 拖拽 |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .header-add{ |
| | | .el-button{ |
| | | |
| | | .header-add { |
| | | .el-button { |
| | | background-color: #eb5d01; |
| | | border: none; |
| | | } |
| | |
| | | background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | border: 1pox solid #fff; |
| | | |
| | | .main-content { |
| | | .my-container { |