1

lzhe

2024-04-06 379c989eb261a84e7474c1f4817624532cb03fc7

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

@@ -3,31 +3,58 @@
      <div class="roleContainer">
         <div class="roleContainer-title">角色</div>
         <ul>
            <li v-for="(item,index) in tableData" @click="changeLi(index)">
            <li v-for="(item,index) in tableData" @click="changeTabaleLi(item,index)">
               <span :class="{active: item.active}">{{item.roleName}}</span>
               <div class="scopeBtn">
                  <span style="margin-right: 12px;cursor: pointer;">重命名</span>
                  <span>删除</span>
                  <span style="margin-right: 12px;cursor: pointer;" @click.stop="table_edit(item, index)">重命名</span>
                  <span @click="table_del(item, index)">删除</span>
               </div>
            </li>
         </ul>
         <div class="left-panel">
            <el-button type="primary" icon="el-icon-plus" @click="add">添加角色</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>
         </div>
      </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>
         </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>
      <div class="role-main-tabs">
         <div class="role-main-header">
            <div class="role-main-title">账号</div>
            <ul>
               <li v-for="(item,index) in roleHeaderList" @click="changeHeaderLi(item,index)" :class="{titleActive: item.active}">{{item.realName}}</li>
               <li class="role-header-add" @click="addUser">+ 添加账号</li>
            </ul>
            <div class="role-main-title">权限管理</div>
         </div>
         <el-tabs tab-position="top">
            <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>
            </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>
      </div>

      <el-dialog title="人员选择" v-model="userVisible" :width="500" destroy-on-close>
         <div>
            <el-table ref="userVisibleRef" :data="userVisibleData" style="width: 100%" @selection-change="userVisibleChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="姓名" prop="realName" />
            <el-table-column label="当前角色" prop="roleName" />
            <el-table-column label="手机号" prop="phone" />
            <el-table-column label="邮箱" prop="email" />
         </el-table>
         <el-pagination @current-change="handleCurrentChange" style="margin-top: 12px;" layout="total, prev, pager, next" :total="total" />
         </div>
			
         <template #footer>
            <el-button @click="userVisible=false" >取 消</el-button>
            <el-button type="primary" :loading="isSaveing" @click="userSubmit()">确 定</el-button>
         </template>
      </el-dialog>
      <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
   </div>
</template>
@@ -42,6 +69,16 @@
      },
      data() {
         return {
            total: 0,
            searchData: {
               current: 1,
               size: 10
            },
            tableLiId: "", //当前角色id
            isSaveing: false,
            userVisibleData: [],
            userVisible: false,
            roleHeaderList: [],
            menu: {
               list: [],
               checked: [],
@@ -69,29 +106,75 @@
            },
            //apiObj: this.$API.system.role.list,
            tableData: "",
            selection: []
            userSelection: []
         }
      },
      mounted(){
         this.getRoleList();  //角色列表
         this.getUser();  //获取全部账号
      },
      methods: {
         changeLi(index) {
         userSubmit() {
            var ids = [];
            this.userSelection.forEach(item=> {
               ids.push(item.id);
            })
            this.$HTTP.post(`/api/blade-user/${this.tableLiId}/save`,{ids}).then(res=> {
               if(res.code == 200) {
                  this.userVisible = false;
                  this.$message.success("操作成功");
                  this.getBladeList(this.tableLiId);  //获取人员列表
               }
            })
         },
         userVisibleChange(selection) {
            console.log(selection);
            this.userSelection = selection;
         },
         addUser() {  //添加账号
            this.userVisible = true;
         },
         getUser() {  //获取全部账号
            this.$HTTP.get(`/api/blade-user/page?current=${this.searchData.current}&size=10&deptId=`).then(res=> {
               if(res.code == 200) {
                  this.userVisibleData = res.data.records;
                  this.total = res.data.total;
               }
            })
         },
         getBladeList(id) {  //人员列表
            this.$HTTP.get(`/api/blade-user/${this.tableLiId}/list`).then(res=> {
               if(res.code == 200) {
                  this.roleHeaderList = res.data;
               }
            })
         },
         changeHeaderLi(row,index) {
            this.roleHeaderList.forEach(item=> {
               item.active = false;
            })
            this.roleHeaderList[index].active = true;
         },
         changeTabaleLi(row,index) {
            this.tableData.forEach(item=> {
               item.active = false;
            })
            this.tableData[index].active = true;
            this.tableLiId = row.id;
            this.getBladeList(row.id);  //获取人员列表
         },
         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;
                  this.tableLiId = this.tableData[0].id;
                  this.getBladeList(this.tableData[0].id);  //获取人员列表
               }
            })
         },
         //添加
         add(){
         addRole(){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open()
@@ -101,7 +184,7 @@
         table_edit(row){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open('edit').setData(row)
               this.$refs.saveDialog.open('edit').setData(row);
            })
         },
         //查看
@@ -112,15 +195,20 @@
            })
         },
         //删除
         async table_del(row){
            var reqData = {id: row.id}
            var res = await this.$API.demo.post.post(reqData);
            if(res.code == 200){
               this.$refs.table.refresh()
               this.$message.success("删除成功")
            }else{
               this.$alert(res.message, "提示", {type: 'error'})
            }
         table_del(row) {
            var that = this;
            this.$confirm(`是否删除角色-${row.roleName}?`, '', {
               type: 'warning'
            }).then(() => {
               this.$HTTP.post("/api/blade-system/role/remove?ids="+row.id).then(res=> {
                  if(res.code == 200) {
                     that.$message.success("操作成功");
                     that.getRoleList();  //角色列表
                  }
               })
            }).catch(() => {

            })
         },
         //表格选择后回调事件
         selectionChange(selection){
@@ -154,11 +242,12 @@
         },
         //本地更新数据
         handleSaveSuccess(data, mode){
            if(mode=='add'){
               this.$refs.table.refresh()
            }else if(mode=='edit'){
               this.$refs.table.refresh()
            }
            this.getRoleList();  //角色列表
         },
         handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.searchData.current = val;
            this.getUser();
         }
      }
   }
@@ -215,11 +304,40 @@
   text-align: center;
   margin-top:8px;
}
.rolePage .roleTabs {
.rolePage .role-main-tabs {
   flex: 1;
   background-color: #fff;
   padding: 8px;
   margin-top:8px;
   margin-right:8px;
}
.role-main-title {
   padding: 6px 10px;
    font-size: 14px;
    background-color: #d8e8d8;
    margin-bottom: 8px;
    border-radius: 2px;
}
.role-main-header ul {
   padding: 20px 20px 10px;
}
.role-main-header ul li {
   list-style-type: none;
   display: inline-block;
   width: 200px;
    padding: 8px 20px;
    margin: 0 10px 10px 0;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.role-main-header ul li.titleActive {
   border: 1px solid #3b8e8e;
}
.role-main-header ul li.role-header-add {
   display: inline-block;
   border: 1px dashed #e5e5e5;
}
</style>