|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <TableLayout class="menu-layout" :permissions="['system:menu:query']"> | 
|---|
|  |  |  | <el-form ref="searchForm" slot="search-form"   label-width="100px" inline> | 
|---|
|  |  |  | <div class="platgroup_tabs"> | 
|---|
|  |  |  | <div class="tab" :class="{ active: activeGroup === item.id }" @click="groupClick(item)" | 
|---|
|  |  |  | v-for="(item, i) in groupList" :key="i"> | 
|---|
|  |  |  | {{ item.name }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | <!-- 表格和分页 --> | 
|---|
|  |  |  | <template v-slot:table-wrap> | 
|---|
|  |  |  | <ul class="toolbar" v-permissions="['system:menu:create', 'system:menu:delete', 'system:menu:sort']"> | 
|---|
|  |  |  | <li><el-button type="primary" @click="$refs.operaMenuWindow.open('新建一级菜单')" icon="el-icon-plus" v-permissions="['system:menu:create']">新建</el-button></li> | 
|---|
|  |  |  | <li><el-button type="primary" @click="$refs.operaMenuWindow.open(activeType==0?'新建一级菜单':'新建顶部导航菜单',null,null,activeType)" icon="el-icon-plus" v-permissions="['system:menu:create']">新建</el-button></li> | 
|---|
|  |  |  | <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['system:menu:delete']">删除</el-button></li> | 
|---|
|  |  |  | <li><el-button @click="sort('top')" :loading="isWorking.sort" icon="el-icon-sort-up" v-permissions="['system:menu:sort']">上移</el-button></li> | 
|---|
|  |  |  | <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" | 
|---|
|  |  |  | 
|---|
|  |  |  | @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="icon" label="图标" min-width="80px" class-name="table-column-icon"> | 
|---|
|  |  |  | <el-table-column prop="name" label="菜单名称"  fixed="left" min-width="160px" show-tooltip-when-overflow></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="icon" v-if="activeGroup !== 1" 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 v-else>未设置</template> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="path" label="访问路径" min-width="140px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="remark" label="备注" min-width="120px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="path" label="访问路径" show-tooltip-when-overflow min-width="200px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="params" label="参数" min-width="120px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="linkType" label="菜单类型" min-width="80px"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | {{row.linkType == 1 ? '外部系统' : '内部系统'}} | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="remark" label="备注" min-width="150px" show-tooltip-when-overflow></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="createUser" label="创建人" min-width="100px"> | 
|---|
|  |  |  | <template slot-scope="{row}">{{row.createUserInfo == null ? '' : row.createUserInfo.username}}</template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | 
|---|
|  |  |  | <template slot-scope="{row}">{{row.updateUserInfo == null ? '' : row.updateUserInfo.username}}</template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column prop="updateTime" label="更新时间" min-width="140px"></el-table-column> | 
|---|
|  |  |  | <el-table-column prop="disabled" label="是否启用" min-width="80px"> | 
|---|
|  |  |  | <el-table-column prop="disabled" label="是否启用" min-width="80px" fixed="right"> | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | <el-switch v-model="row.disabled" :active-value="false" :inactive-value="true" @change="switchDisabled(row)"/> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | fixed="right" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template slot-scope="{row}"> | 
|---|
|  |  |  | <el-button type="text" icon="el-icon-edit" @click="$refs.operaMenuWindow.open('编辑菜单', row)" v-permissions="['system:menu:update']">编辑</el-button> | 
|---|
|  |  |  | <el-button type="text" icon="el-icon-plus" @click="$refs.operaMenuWindow.open('新建子菜单', null, row)" v-permissions="['system:menu:create']">新建子菜单</el-button> | 
|---|
|  |  |  | <el-button type="text" icon="el-icon-edit" @click="$refs.operaMenuWindow.open('编辑菜单', row,null,activeType)" v-permissions="['system:menu:update']">编辑</el-button> | 
|---|
|  |  |  | <el-button v-if="activeGroup !== 1" type="text" icon="el-icon-plus" @click="$refs.operaMenuWindow.open('新建子菜单', null, row,activeType)" v-permissions="['system:menu:create']">新建子菜单</el-button> | 
|---|
|  |  |  | <el-button v-if="!row.fixed" type="text" icon="el-icon-delete" @click="deleteById(row)" v-permissions="['system:menu:delete']">删除</el-button> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | // 是否正在处理中 | 
|---|
|  |  |  | activeGroup: -1, | 
|---|
|  |  |  | activeType: 1, | 
|---|
|  |  |  | topMenuId:null, | 
|---|
|  |  |  | groupList:[{id:-1,name: "顶部导航配置",type:1},{id:-2,name: "系统左侧菜单",type:0}], | 
|---|
|  |  |  | isWorking: { | 
|---|
|  |  |  | sort: false | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | groupClick(item){ | 
|---|
|  |  |  | this.activeGroup = item.id | 
|---|
|  |  |  | this.activeType = item.type | 
|---|
|  |  |  | this.handlePageChange(); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 查询数据 | 
|---|
|  |  |  | handlePageChange () { | 
|---|
|  |  |  | this.isWorking.search = true | 
|---|
|  |  |  | fetchTree() | 
|---|
|  |  |  | fetchTree({type: this.activeType == 1?this.activeType:null}) | 
|---|
|  |  |  | .then(records => { | 
|---|
|  |  |  | this.tableData.list = records | 
|---|
|  |  |  | if(this.activeType === 1){ | 
|---|
|  |  |  | this.tableData.list = records | 
|---|
|  |  |  | this.groupList = [{id:-1,name: "顶部导航配置",type:1}] | 
|---|
|  |  |  | var tops = [] | 
|---|
|  |  |  | this.tableData.list.forEach(item=>{ | 
|---|
|  |  |  | if(item.linkType !== 1){ | 
|---|
|  |  |  | tops.push({id:item.id,name: item.name,type:0}) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | if(tops.length){ | 
|---|
|  |  |  | this.groupList.push(...tops) | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | this.groupList.push({id:0,name: "系统左侧菜单",type:0}) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }else{ | 
|---|
|  |  |  | //如果是内部菜单 | 
|---|
|  |  |  | records.forEach(item =>{ | 
|---|
|  |  |  | if(item.id === this.activeGroup){ | 
|---|
|  |  |  | this.tableData.list =item.children | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|
|  |  |  | @import "@/assets/style/variables.scss"; | 
|---|
|  |  |  | .platgroup_tabs { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | border-bottom: 1px solid #dfe2e8; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tab { | 
|---|
|  |  |  | color: #666666; | 
|---|
|  |  |  | margin-right: 40px; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | padding-bottom: 18px; | 
|---|
|  |  |  | border-bottom: 2px solid #fff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .active { | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | font-size: 15px; | 
|---|
|  |  |  | color: #222222; | 
|---|
|  |  |  | border-bottom: 2px solid $primary-color; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .menu-layout { | 
|---|
|  |  |  | /deep/ .table-content { | 
|---|
|  |  |  | margin-top: 0; | 
|---|
|  |  |  | margin-top: 0px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 图标列 | 
|---|