1

lzhe

2024-04-03 73236ec895d503f3507a56152c1a1ba50e588c7f

 src/views/console/authority/role/index.vue

@@ -1,73 +1,95 @@
<template>
   <el-container>
      <el-header>
   <div class="rolePage">
      <div class="roleContainer">
         <div class="roleContainer-title">角色</div>
         <ul>
            <li v-for="(item,index) in tableData" @click="changeLi(index)">
               <span :class="{active: item.active}">{{item.roleName}}</span>
               <div class="scopeBtn">
                  <span style="margin-right: 12px;cursor: pointer;">重命名</span>
                  <span>删除</span>
               </div>
            </li>
         </ul>
         <div class="left-panel">
            <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
            <el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="add">添加角色</el-button>
         </div>
         <div class="right-panel">
            <div class="right-panel-search">
               <el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
               <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
      </div>
      <el-tabs tab-position="top" class="roleTabs">
         <el-tab-pane label="菜单">
            <div class="treeMain">
               <el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
            </div>
         </div>
      </el-header>
      <el-main class="nopadding">
         <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="#" type="index" width="50"></el-table-column>
            <el-table-column label="角色名称" prop="label" width="150"></el-table-column>
            <el-table-column label="排序" prop="sort" width="80"></el-table-column>
            <el-table-column label="操作" fixed="right" align="right" width="170">
               <template #default="scope">
                  <el-button-group>
                     <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                     <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                     <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                        <template #reference>
                           <el-button text type="primary" size="small">删除</el-button>
                        </template>
                     </el-popconfirm>
                  </el-button-group>
               </template>
            </el-table-column>
         </el-tab-pane>
         <el-tab-pane label="卡片">
            <div class="treeMain">
               <el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
            </div>
         </el-tab-pane>
      </el-tabs>

         </scTable>
      </el-main>
   </el-container>

   <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>

   <permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>

      <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
   </div>
</template>

<script>
   import saveDialog from './save'
   import permissionDialog from './permission'

   export default {
      name: 'role',
      components: {
         saveDialog,
         permissionDialog
         saveDialog
      },
      data() {
         return {
            menu: {
               list: [],
               checked: [],
               props: {
                  label: (data)=>{
                     return data.meta.title
                  }
               }
            },
            grid: {
               list: [],
               checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
               props: {
                  label: (data)=>{
                     return data.title
                  },
                  disabled: (data)=>{
                     return data.isFixed
                  }
               }
            },
            dialog: {
               save: false,
               permission: false
            },
            //apiObj: this.$API.system.role.list,
            apiObj: "",
            selection: [],
            search: {
               keyword: null
            }
            tableData: "",
            selection: []
         }
      },
      mounted(){
         this.getRoleList();  //角色列表
      },
      methods: {
         changeLi(index) {
            this.tableData.forEach(item=> {
               item.active = false;
            })
            this.tableData[index].active = true;
         },
         getRoleList() {
            this.$HTTP.get("/api/blade-system/role/list?current=1&size=1000").then(res=> {
               if(res.code == 200) {
                  res.data[0].active = true;
                  this.tableData = res.data;
               }
            })
         },
         //添加
         add(){
            this.dialog.save = true
@@ -89,13 +111,6 @@
               this.$refs.saveDialog.open('show').setData(row)
            })
         },
         //权限设置
         permission(){
            this.dialog.permission = true
            this.$nextTick(() => {
               this.$refs.permissionDialog.open()
            })
         },
         //删除
         async table_del(row){
            var reqData = {id: row.id}
@@ -106,19 +121,6 @@
            }else{
               this.$alert(res.message, "提示", {type: 'error'})
            }
         },
         //批量删除
         async batch_del(){
            this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
               type: 'warning'
            }).then(() => {
               const loading = this.$loading();
               this.$refs.table.refresh()
               loading.close();
               this.$message.success("操作成功")
            }).catch(() => {

            })
         },
         //表格选择后回调事件
         selectionChange(selection){
@@ -133,10 +135,6 @@
               row.status = val;
               this.$message.success("操作成功")
            }, 500)
         },
         //搜索
         upsearch(){

         },
         //根据ID获取树结构
         filterTree(id){
@@ -166,5 +164,62 @@
   }
</script>

<style>
<style scoped>
.rolePage {
   display: flex;
}
.rolePage .roleContainer {
   max-width:300px;
   width:300px;
   margin-right: 8px;
   height: 100%;
   margin-top:8px;
   margin-left:8px;
   background-color: #fff;
   padding-bottom:8px;
}
.roleContainer-title {
   height: 41px;
   line-height: 41px;
   font-size: 14px;
   text-align: center;
   background-color: #3b8e8e;
   color: #fff;
}
.rolePage .roleContainer ul {
	
}
.rolePage .roleContainer ul li{
   height:42px;
   line-height: 42px;
   list-style-type: none;
   color: #606266;
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #ebeef5;
   padding-left: 8px;
   padding-right: 8px;
   cursor: pointer;
}
.rolePage .roleContainer ul li .active {
   font-weight: bold;
   color: #3b8e8e;
}
.rolePage .roleContainer ul li:hover {
   background-color: #f5f7fa;
}
.rolePage .roleContainer ul li .scopeBtn {
   color: #409eff;
}
.rolePage .roleContainer .left-panel {
   text-align: center;
   margin-top:8px;
}
.rolePage .roleTabs {
   flex: 1;
   background-color: #fff;
   padding: 8px;
   margin-top:8px;
   margin-right:8px;
}
</style>