1

lzhe

2024-04-06 379c989eb261a84e7474c1f4817624532cb03fc7

1

 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>

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

@@ -8,12 +8,12 @@
-->
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
            <el-form-item label="角色名称" prop="label">
                <el-input v-model="form.label" clearable></el-input>
        <el-form :model="addRoleForm" :rules="addRoleRules" :disabled="mode=='show'" ref="addRoleForm" label-width="100px" label-position="left">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="addRoleForm.roleName" clearable></el-input>
            </el-form-item>
            <el-form-item label="角色排序" prop="sort">
                <el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
                <el-input-number v-model="addRoleForm.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
            </el-form-item>
        </el-form>
        <template #footer>
@@ -37,25 +37,16 @@
                visible: false,
                isSaveing: false,
                //表单数据
                form: {
                addRoleForm: {
                    id:"",
                    label: "",
                    alias: "",
                    sort: 1,
                    status: 1,
                    remark: ""
                    roleName: "",
                    roleAlias: "",
                    sort: null
                },
                //验证规则
                rules: {
                    sort: [
                        {required: true, message: '请输入排序', trigger: 'change'}
                    ],
                    label: [
                        {required: true, message: '请输入角色名称'}
                    ],
                    alias: [
                        {required: true, message: '请输入角色别名'}
                    ]
                addRoleRules: {
                    roleName: [{required: true, message: '请输入角色名称'}],
                    sort: [{required: true, message: '请输入角色排序'}]
                }
            }
        },
@@ -71,32 +62,29 @@
            },
            //表单提交方法
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
                var obj = Object.assign({},this.addRoleForm);
                this.$refs.addRoleForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = await this.$API.demo.post.post(this.form);
                        this.isSaveing = false;
                        if(res.code == 200){
                            this.$emit('success', this.form, this.mode)
                            this.visible = false;
                            this.$message.success("操作成功")
                        }else{
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                        this.$HTTP.post("/api/blade-system/role/submit",obj).then(res=> {
                            this.isSaveing = false;
                            if(res.code == 200) {
                                this.$emit('success', this.addRoleForm, this.mode);
                                this.visible = false;
                                this.$message.success("操作成功");
                            }else {
                                this.$alert(res.message, "提示", {type: 'error'});
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
            //表单注入数据
            setData(data){
                this.form.id = data.id
                this.form.label = data.label
                this.form.alias = data.alias
                this.form.sort = data.sort
                this.form.status = data.status
                this.form.remark = data.remark

                //可以和上面一样单个注入，也可以像下面一样直接合并进去
                //Object.assign(this.form, data)
                Object.assign(this.addRoleForm, data)
            }
        }
    }