|  |  |  | 
|---|
|  |  |  | <li><el-button @click="sort('bottom')" :loading="isWorking.sort" icon="el-icon-sort-down" v-permissions="['system:menu:sort']">下移</el-button></li> | 
|---|
|  |  |  | </ul> | 
|---|
|  |  |  | <el-table | 
|---|
|  |  |  | :height="tableHeightNew" | 
|---|
|  |  |  | ref="table" | 
|---|
|  |  |  | v-loading="isWorking.search" | 
|---|
|  |  |  | :data="tableData.list" | 
|---|
|  |  |  | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" | 
|---|
|  |  |  | row-key="id" | 
|---|
|  |  |  | stripe | 
|---|
|  |  |  | default-expand-all | 
|---|
|  |  |  | @selection-change="handleSelectionChange" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-table-column type="selection" width="55" fixed="left"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="name" label="菜单名称"  fixed="left" min-width="160px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="name" label="菜单名称" fixed="left" min-width="160px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="icon" label="图标" min-width="80px" class-name="table-column-icon"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | <i v-if="row.icon != null && row.icon !== ''" :class="{[row.icon]: true}"></i> | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="path" label="访问路径" min-width="140px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="params" label="参数" min-width="120px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="remark" label="备注" min-width="120px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="createUser" label="创建人" min-width="100px"> | 
|---|
|  |  |  | <template slot-scope="{row}">{{row.createUserInfo == null ? '' : row.createUserInfo.username}}</template> | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | // 查询数据 | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 覆盖页码变更处理 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | handlePageChange () { | 
|---|
|  |  |  | this.isWorking.search = true | 
|---|
|  |  |  | fetchTree() | 
|---|
|  |  |  | 
|---|
|  |  |  | this.isWorking.search = false | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 排序 | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 排序 | 
|---|
|  |  |  | * | 
|---|
|  |  |  | * @param direction 方向,取值[top:上移, bottom:下移] | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | sort (direction) { | 
|---|
|  |  |  | if (this.isWorking.sort) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | 
|---|
|  |  |  | this.isWorking.sort = false | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 启用/禁用菜单 | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 启用/禁用 | 
|---|
|  |  |  | * | 
|---|
|  |  |  | * @param row 行对象 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | switchDisabled (row) { | 
|---|
|  |  |  | if (!row.disabled) { | 
|---|
|  |  |  | this.__updateMenuStatus(row) | 
|---|
|  |  |  | const newValue = row.disabled | 
|---|
|  |  |  | row.disabled = !row.disabled | 
|---|
|  |  |  | // 开启 | 
|---|
|  |  |  | if (!newValue) { | 
|---|
|  |  |  | this.__updateMenuStatus(row, newValue) | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 禁用 | 
|---|
|  |  |  | this.$dialog.disableConfirm(`确认禁用 ${row.name} 菜单吗?`) | 
|---|
|  |  |  | .then(() => { | 
|---|
|  |  |  | this.__updateMenuStatus(row) | 
|---|
|  |  |  | }).catch(() => { | 
|---|
|  |  |  | row.disabled = !row.disabled | 
|---|
|  |  |  | this.__updateMenuStatus(row, newValue) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(() => { | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 查询父节点 | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 查询父节点 | 
|---|
|  |  |  | * | 
|---|
|  |  |  | * @param id 节点ID | 
|---|
|  |  |  | * @param parent 在哪个父节点中进行查找 | 
|---|
|  |  |  | * @returns {null|{children}|*|*|undefined|null} | 
|---|
|  |  |  | * @private | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | __findParent (id, parent) { | 
|---|
|  |  |  | if (parent.children === 0) { | 
|---|
|  |  |  | if (parent.children == null || parent.children.length === 0) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | for (const menu of parent.children) { | 
|---|
|  |  |  | if (menu.id === id) { | 
|---|
|  |  |  | for (const row of parent.children) { | 
|---|
|  |  |  | if (row.id === id) { | 
|---|
|  |  |  | return parent | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (menu.children.length > 0) { | 
|---|
|  |  |  | const m = this.__findParent(id, menu) | 
|---|
|  |  |  | if (m != null) { | 
|---|
|  |  |  | return m | 
|---|
|  |  |  | if (row.children.length > 0) { | 
|---|
|  |  |  | const target = this.__findParent(id, row) | 
|---|
|  |  |  | if (target != null) { | 
|---|
|  |  |  | return target | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | return null | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 修改菜单状态 | 
|---|
|  |  |  | __updateMenuStatus (row) { | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 修改菜单状态 | 
|---|
|  |  |  | * | 
|---|
|  |  |  | * @param row 行对象 | 
|---|
|  |  |  | * @param newValue 新值 | 
|---|
|  |  |  | * @private | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | __updateMenuStatus (row, newValue) { | 
|---|
|  |  |  | updateStatus({ | 
|---|
|  |  |  | id: row.id, | 
|---|
|  |  |  | parentId: row.parentId, | 
|---|
|  |  |  | disabled: row.disabled | 
|---|
|  |  |  | disabled: newValue | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .then(() => { | 
|---|
|  |  |  | row.disabled = newValue | 
|---|
|  |  |  | this.$tip.apiSuccess('修改成功') | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | row.disabled = !row.disabled | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | .menu-layout { | 
|---|
|  |  |  | /deep/ .table-content { | 
|---|
|  |  |  | margin-top: 0; | 
|---|
|  |  |  | .table-wrap { | 
|---|
|  |  |  | padding-bottom: 16px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 图标列 | 
|---|