sasp-admin 0.2.57

package/src/views/tenant/tenantRoleManager.vue

@@ -0,0 +1,670 @@
+<template>
+    <el-container class="form-list" style="height: 100%;">
+        <el-header style="height: auto;">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" size="small" class="demo-form-inline" onSubmit="return false;">
+                    <el-form-item label="角色名称">
+                        <el-input v-model="crud.searchForm.roleName"></el-input>
+                    </el-form-item>
+                    <el-form-item label="租户菜单">
+                        <el-input v-model="crud.searchForm.roleAuth"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search" @click="crud.doSearch()">查询</el-button>
+                        <el-button icon="el-icon-close" @click="crud.resetSearch()">清空</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-header>
+        <el-main style="padding:10px 0 0 0;height: 100%;">
+            <el-container style="height: 100%;">
+                <el-header style="height: auto;">
+                    <el-button type="primary" size="small" round icon="el-icon-circle-plus" @click="addTenantRole()">新增</el-button>
+                    <el-button type="danger" size="small" round icon="el-icon-delete" @click="removeTenantRole()">删除</el-button>
+                    <el-button type="success" size="small" round  @click="changeSelectRoleStatus('1')">启用角色</el-button>
+                    <el-button type="danger" size="small" round  @click="changeSelectRoleStatus('0')">禁用角色</el-button>
+                </el-header>
+                <el-main style="padding-top:10px;height: 100%;">
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef" stripe border height="100%"
+                              :header-cell-style="headerCellStyle"
+                              style="width: 100%;">
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+                        <el-table-column label="角色名称" prop="roleName" align="center" width="120"  show-overflow-tooltip></el-table-column>
+                        <el-table-column label="租户菜单权限" prop="menuNameStr" align="center" min-width="200" show-overflow-tooltip>
+                            <template slot-scope="scope">
+                                {{formatterMenuName(scope.row.menuNameStr)}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="绑定租户" prop="tenantName" align="center" min-width="200" show-overflow-tooltip>
+                            <template slot-scope="scope">
+                                <el-popover
+                                        placement="bottom"
+                                        width="300"
+                                        :content="scope.row.tenantName"
+                                        trigger="click">
+                                    <div slot="reference">
+                                        {{scope.row.tenantName}}
+                                    </div>
+                                </el-popover>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="角色状态" prop="roleStatus" align="center" width="100" show-overflow-tooltip>
+                            <template slot-scope="scope" >
+                                <el-tag :type="roleStatusTypeObj[scope.row.roleStatus]" @click="changeRoleStatus(scope.row)" style="cursor: pointer">
+                                    {{roleStatusTextObj[scope.row.roleStatus]}}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column label="操作" align="center" width="410">
+                            <template slot-scope="scope">
+                                <el-button size="mini" icon="el-icon-edit"
+                                           type="primary" @click="update(scope.row)" >修改</el-button>
+                                <el-popover
+                                        placement="bottom"
+                                        width="500"
+                                        v-model="scope.row.empowermentClick"
+                                        style="margin-left: 10px;margin-right: 10px"
+                                        trigger="manual">
+                                    <el-form size="small">
+                                        <el-form-item style="margin-bottom: 0"
+                                                v-if="scope.row.empowermentClick"
+                                                label="选择租户" :prop="'records.' +  scope.$index + '.tenantUserId'" label-width="110px">
+                                            <el-select v-model="scope.row.tenantUserId"  multiple filterable clearable >
+                                                <el-option v-for="tenantUser in tenantUserArr" :key="tenantUser.id"
+                                                           :label="tenantUser.tenantName"
+                                                           :value="tenantUser.id">
+                                                </el-option>
+                                            </el-select>
+                                            <el-button type="primary" style="margin-left: 10px" @click="rapidEmpowerment(scope.row,scope.row.tenantUserId,'1')">确定</el-button>
+                                        </el-form-item>
+                                    </el-form>
+                                    <el-button size="mini" icon="el-icon-view" slot="reference"
+                                               @click="clickRapidEmp(scope.row)"
+                                               type="warning" >
+                                        快速赋权
+                                    </el-button>
+                                </el-popover>
+
+                                <el-popover
+                                        placement="bottom"
+                                        width="500"
+                                        v-model="scope.row.unEmpowermentClick"
+                                        trigger="manual">
+                                    <el-form size="small">
+                                        <el-form-item label="解权租户" style="margin-bottom: 0"
+                                                      v-if="scope.row.unEmpowermentClick"
+                                                      label-width="110px" :prop="'records.' +  scope.$index + '.unTenantUserId'">
+                                            <el-select v-model="scope.row.unTenantUserId"  multiple filterable clearable>
+                                                <el-option v-for="tenantUser in tenantUnUserArr" :key="tenantUser.id"
+                                                           :label="tenantUser.tenantName"
+                                                           :value="tenantUser.id">
+                                                </el-option>
+                                            </el-select>
+                                            <el-button type="primary" style="margin-left: 10px" @click="rapidEmpowerment(scope.row,scope.row.unTenantUserId,'0')">确定</el-button>
+                                        </el-form-item>
+                                    </el-form>
+                                    <el-button size="mini" icon="el-icon-view" slot="reference"
+                                               @click="clickUnRapidEmp(scope.row)"
+                                               type="danger" >快速解权</el-button>
+                                </el-popover>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+                <el-footer style="height: 40px">
+                    <el-pagination
+                            :ref="crud.pageRef"
+                            :page-sizes="crud.pageSizes"
+                            :page-size="crud.pageSize"
+                            :current-page="crud.page"
+                            :total="crud.dataStore.total"
+                            @size-change="crud.sizeChange()"
+                            @current-change="crud.currentPage()"
+                            layout="total, sizes, prev, pager, next, jumper">
+                    </el-pagination>
+                </el-footer>
+            </el-container>
+        </el-main>
+
+        <el-dialog :close-on-click-modal=false :title="dialogTitle" top="5vh"
+                   :visible.sync="crud.dialogVisible"
+                   width="40%"
+                   height="90%"
+                   v-loading="loading"
+                   element-loading-text="请稍后..."
+                   element-loading-spinner="el-icon-loading"
+                   element-loading-background="rgba(0, 0, 0, 0.4)"
+                   append-to-body>
+            <el-form :model="crud.formData" :ref="crud.addFormRef" label-width="110px" :disabled="operate == 'view'" style="height: 100%;width: 100%;overflow-y: hidden">
+                <el-form-item label="角色名称" prop="roleName" :rules="operate!='view'? rules.roleName: null" >
+                    <el-input v-model="crud.formData.roleName" maxlength="50" show-word-limit ></el-input>
+                </el-form-item>
+                <el-form-item label="选择租户">
+                    <el-select v-model="crud.formData.roleTenantIdArr"  multiple filterable clearable style="width: 100%">
+                        <el-option v-for="tenantUser in tenantUserArr" :key="tenantUser.id"
+                                   :label="tenantUser.tenantName"
+                                   :value="tenantUser.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="菜单权限" style="height: calc(100% - 130px)" class="tree-item">
+                    <el-input v-model="filterText" size="small"
+                              prefix-icon="el-icon-search" style="margin-bottom: 10px;" placeholder="输入关键字过滤"></el-input>
+                    <div class="treeClass">
+                        <common-tree
+                                v-if="treeShow"
+                                ref="commonTreeRef"
+                                :request-url="api.menu.find"
+                                :request-param="menuInitparam"
+                                parent-id="menuChiefNum"
+                                :default-props="defaultProps"
+                                :filterText="filterText"
+                                :init-check="initCheck"
+                                :expandOnclickNode=false
+                                :initCallBack="initCallBack"
+                                :renderContentFunc="renderContent"
+                                default-expand-all
+                        >
+                        </common-tree>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button v-if="operate != 'view'" type="primary" @click="submitForm()" :disabled="loading" size="small"  icon="el-icon-success">确 定</el-button>
+                <el-button @click="crud.dialogVisible = false" size="small" :disabled="loading"  icon="el-icon-error">{{operate == 'view'? '关 闭':'取 消'}}</el-button>
+            </div>
+        </el-dialog>
+    </el-container>
+
+
+</template>
+
+<script>
+    //租户角色管理
+    import CommonTree from "../../../../sasp-base/src/components/public/plTree";
+    export default {
+        name: "tenantRoleManager",
+        components: {CommonTree},
+        data(){
+            //角色名唯一校验
+            let roleNameValidate = (rule,value,callback) => {
+                if(!value){
+                    callback();
+                }
+                this.axios.post(this.api.SysTenantRole.find,{roleName:value}).then(res =>{
+                    if((res.data ||[]).length == 0  || (this.operate == 'update' && this.oldRoleName == value)){
+                        callback();
+                    }else{
+                        return callback(new Error('该角色名已经存在！'));
+                    }
+                });
+            };
+            return{
+                crud: new this.CrudUtil({
+                    vue: this,
+                    entityName: "SysTenantRole",
+                    url: this.api.SysTenantRole.url,
+                    searchUrl:this.api.SysTenantRole.findPageParam,
+                    searchForm: {order:"UPDATE_TIME DESC,CREATE_TIME DESC"},
+                    noClearSearchColumns:["order"],
+                }),
+                tenantTypeObj:{
+                    "group":"团体",
+                    "person":"个人"
+                },
+                operate:'add', //操作类型
+
+                dialogTitle:'',
+                oldTenantAccount:'',//修改前手机号码
+                oldTenantLoginCode:'',//修改前 登录标识
+                tenantPageArr:[], //登录页
+                tenantThemeArr:[], //主题配置
+                tenantAuthArr:[], //租户权限
+                paramFieldArr:["tenantName","tenantAccount","tenantType","tenantPage","tenantTheme","tenantAuth","tenantLogincode"],
+                loading:false,//加载
+
+                treeShow:false,
+                menuInitparam:{},
+                defaultProps: {
+                    children: 'children',
+                    label: 'menuName'
+                },
+                initCheck:{initCheck:""},
+                filterText:'',//搜索菜单的参数
+                oldRoleName:'', //原角色名
+                rules:{
+                    roleName:[
+                        {required: true, message: '该输入项为必输项'},
+                        {validator:roleNameValidate,trigger:'blur'}
+                    ]
+                },
+                roleStatusTextObj:{
+                    "1":"正常",
+                    "0":"禁用",
+                    "":"正常"
+                },
+                roleStatusTypeObj:{
+                    "1":"success",
+                    "0":"danger",
+                    "":"success"
+                },
+                empowermentClick:false,
+                tenantUserArr:[], //租户
+                tenantUnUserArr:[], //快速解权用户
+
+                oldRoleTenantIdArr:[], //角色配置中租户arr
+            }
+        },
+
+        created(){
+            this.initAllTenantUser();
+        },
+        methods:{
+            /**
+             * 获取租户信息
+             */
+            initAllTenantUser(){
+                this.tenantUserArr = [];
+                this.axios.post(this.api.SysTenant.getAllTenantUser).then(res =>{
+                    if(res && res.data){
+                        this.tenantUserArr = res.data || [];
+                    }
+                });
+            },
+            /**
+             * 初始化租户相关信息
+             */
+            initMenuData(){
+                //获取系统参数 中  登录页面 和主题配置
+                this.treeShow =false;
+                this.menuInitparam={'order':'MENU_ORDER','cdss':"dev"};
+                this.$nextTick(() => {
+                    this.treeShow =true;
+                })
+            },
+
+            addTenantRole(){
+                this.operate = "add";
+                this.dialogTitle = "租户权限设置";
+
+                this.initMenuData();
+
+                //获取最新租户权限配置
+
+                this.crud.add();
+                this.$set(this.crud.formData,'tenantType','group'); //默认团体用户
+                this.$set(this.crud.formData,'tenantPage','default'); //默认登录页
+                this.$set(this.crud.formData,'tenantTheme','default'); //默认主题
+                this.$set(this.crud.formData,'roleTenantIdArr',[]);
+                this.oldRoleTenantIdArr = [];
+                //生成数据标识
+                this.$nextTick(() => {
+                    this.$refs[this.crud.addFormRef].clearValidate(); //刷新校验
+                });
+            },
+
+            /**
+             * 删除租户角色
+             */
+            removeTenantRole(){
+                let selection = this.$refs[this.crud.tableRef].selection || [];
+                if(selection.length == 0){
+                    this.$message({
+                        duration: 1500,
+                        type: 'info',
+                        message: '请至少选择一条需要删除的数据！'})
+                    return;
+                }
+                this.$confirm('是否确定删除选择的“' + selection.length + '”条数据?', '警告', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(()=> {
+                    let deleteIds = [];
+                    let tenantIds = "";
+                    selection.forEach(item =>{
+                        deleteIds.push(item.id);
+                        if(item.tenantId){
+                            tenantIds += ","+item.tenantId;
+                        }
+                    });
+                    let loading = this.$loading({
+                        target: this.$refs[this.crud.tableRef].$el,
+                        lock: true,
+                        text: '正在删除,请稍后...',
+                        spinner: 'el-icon-loading',
+                        background: 'rgba(0, 0, 0, 0.6)'
+                    });
+                    if(tenantIds){
+                        tenantIds = tenantIds.substring(1);
+                    }
+                    this.axios.post(this.api.SysTenantRole.removeTenantRole,{delteIds:deleteIds.join(","),tenantIds:tenantIds}).then(res =>{
+                        if(res && res.data){
+                            loading && loading.close();
+                            if(res.data.requestStatus == '1'){
+                                this.$message({
+                                    type: 'success',
+                                    message: res.data.message || '删除成功！'
+                                });
+                                this.crud.search();
+                            }else {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.data.message || '删除失败！'
+                                });
+                            }
+
+                        }
+                    });
+                });
+
+            },
+
+            update(row){
+                this.oldRoleName = row.roleName;
+                this.operate = "update";
+                this.dialogTitle = "租户权限设置";
+                let editObj = JSON.parse(JSON.stringify(row));
+                //根据权限
+                let roleAuth = editObj.roleAuth || '';
+                console.log("roleAuth...",roleAuth);
+                let roleChecekdArr = roleAuth.split(",") || [];
+                this.initMenuData();
+                //数据标识
+                this.crud.update(editObj);
+                this.oldRoleTenantIdArr = editObj.tenantIdArr || [];
+                this.$set(this.crud.formData,'roleTenantIdArr',editObj.tenantIdArr || []);
+                this.$set(this.initCheck,"initCheck",roleChecekdArr);
+                //获取绑定
+                this.$nextTick(() => {
+                    this.$refs[this.crud.addFormRef].clearValidate(); //刷新校验
+                });
+            },
+
+
+
+            /**
+             * 自动生成登录标识
+             */
+            getLoginCode(){
+                this.$set(this.crud.formData,'tenantLogincode',this.COMMON_FUNC.getUuidByParams(32));
+            },
+
+            /**
+             * 生成数据标识并判断是否重复
+             */
+            getDatacode(datacode){
+                return new Promise(resolve => {
+                    this.axios.post(this.api.SysTenant.find,{tenantDatacode:'TEN_'+datacode}).then(res =>{
+                        if((res.data ||[]).length == 0){
+                            resolve(datacode)
+                        }else {
+                            this.getDatacode(this.COMMON_FUNC.getUuidByParams(8).toUpperCase()); //递归判断
+                        }
+                    });
+                })
+            },
+
+            // /**
+            //  * 点击节点s事件
+            //  */
+            // nodeClick(data, node) {
+            //     let vm = this;
+            //
+            // },
+
+            /**
+             * 初始化树
+             */
+            initCallBack(nodeTree){
+                //禁用状态
+                if(this.operate == 'view'){ //查看状态
+                    this.disabelTree(nodeTree.data || []);
+                }
+            },
+            /**
+             * 禁用树
+             */
+            disabelTree(treeData){
+                treeData.forEach(item =>{
+                    this.$set(item,'disabled',true);
+                    if(item.children && item.children.length > 0){
+                       let arr = item.children;
+                       this.disabelTree(arr);
+                    }
+                });
+            },
+
+            /**
+             * 渲染树
+             */
+            renderContent(h, {node, data, store}) {
+                if (node.data.menuIsUse == "N") {
+                    return (
+                        <span class={node.level === 1 ? 'model-color' : ''}
+                    style={node.level === 1 ? 'letter-spacing:1px' : ''}>
+                <i class={data.menuIcon}></i>
+                    <span
+                    style={node.level === 2 ? 'font-weight:bold;text-decoration:line-through;font-style:italic;color:#ccc;'
+                        : "text-decoration:line-through;font-style:italic;color:#ccc;"}>{node.label}</span>
+                    </span>
+                );
+                }
+                return (
+                    <span class={node.level === 1 ? 'model-color' : ''}
+                style={node.level === 1 ? 'letter-spacing:1px' : ''}>
+            <i class={data.menuIcon}></i>
+                <span style={node.level === 2 ? 'font-weight:bold' : ""}>{node.label}</span>
+                </span>
+            );
+            },
+
+
+            /**
+             * 保存租户信息
+             */
+            submitForm(){
+                this.$refs[this.crud.addFormRef].validate(validate => {
+                    if(!validate){
+                        return;
+                    }
+                    //获取勾选的菜单
+                    let checkNodeArr = this.$refs.commonTreeRef.getTreeCheckedNodes("key");
+                    if(checkNodeArr.length == 0){
+                        this.$message("请勾选菜单");
+                        return;
+                    }
+                    this.loading = true; //防止重复点击
+                    let roleAuth = ","+checkNodeArr.join(",");
+                    let url = this.api.SysTenantRole.add; //默认添加用户
+                    let paramObj = {};
+                    if(this.operate == "update"){
+                        url = this.api.SysTenantRole.update;
+                        paramObj["id"] = this.crud.formData.id;
+                    }
+                    paramObj["roleName"] = this.crud.formData.roleName;
+                    paramObj["roleAuth"] = roleAuth;
+                    paramObj["roleStatus"] = "1"; //默认的角色状态
+                    this.axios.post(url,paramObj).then(res =>{
+                        //修改关联租户信息
+                        if(res.data && res.data.operateSuccess){
+                            //同步更新关联租户
+                            let roleObj = res.data.operateObj;
+                            this.axios.post(this.api.SysTenant.saveRoleSynChangeEmpower,{"authId":roleObj.id,"tenantUserIds":this.crud.formData.roleTenantIdArr.join(','),
+                                "oldTeantUserIds":this.oldRoleTenantIdArr.join(",")}).then(rets =>{
+                                if(rets.data && rets.data.requestStatus == '1'){
+                                    this.crud.search();
+                                    this.crud.dialogVisible = false;
+                                }
+                            })
+                        }
+                        this.loading = false;
+
+                    })
+                });
+            },
+
+            /**
+             * 格式化菜单名称
+             * @param menuName
+             * @returns {*}
+             */
+            formatterMenuName(menuName){
+                if(menuName && menuName.startsWith("、")){
+                  return menuName.substring(1);
+                }else {
+                    return menuName;
+                }
+            },
+
+
+            /**
+             * 切换角色状态
+             * @param row
+             */
+            changeRoleStatus(row){
+                let roleStatus = row.roleStatus;
+                let message = roleStatus == '1' ? '确定禁用该角色？':'确定启用该角色？';
+                let updateRoleStatus = roleStatus == '1'? '0' : '1';
+                this.$confirm(message, '警告', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(()=> {
+                    //执行更新
+                    this.axios.post(this.api.SysTenantRole.update,{id:row.id,roleStatus:updateRoleStatus}).then(res =>{
+                        if(res.data && res.data.operateSuccess){
+                            this.crud.search();
+                        }else {
+                            this.$message("修改失败！");
+                        }
+                    });
+                });
+            },
+
+            /**
+             * 角色启用与禁用
+             * @param roleStatus
+             */
+            changeSelectRoleStatus(roleStatus){
+                let selection = this.$refs[this.crud.tableRef].selection || [];
+                if(selection.length == 0){
+                    this.$message({
+                        duration: 1500,
+                        type: 'info',
+                        message: '请至少选择一条数据！'})
+                    return;
+                }
+                let message = roleStatus == '0' ? '确定禁用勾选的'+selection.length+'个角色？':'确定启用'+selection.length+'个角色？';
+                let roleIdArr = [];
+                selection.forEach(item =>{
+                    roleIdArr.push(item.id);
+                });
+                this.$confirm(message, '警告', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(()=> {
+                    this.axios.post(this.api.SysTenantRole.bantchChangeRoleStatus,{roleIds:roleIdArr.join(","),roleStatus:roleStatus}).then(res =>{
+                        if(res.data && res.data.requestStatus == '1'){
+                            this.crud.search();
+                        }else {
+                            this.$message("未知错误！");
+                        }
+                    });
+                });
+            },
+
+            /**
+             * 快速赋权和解权
+             * @param roleId 角色id
+             * @param tenantIds 租户ids
+             * @param type
+             */
+            rapidEmpowerment(row,tenantIds,type){
+                //校验
+                let roleId = row.id;
+                //执行快速赋权
+                let tenantUserIds = "";
+                if(tenantIds && tenantIds.length > 0){
+                    tenantUserIds = tenantIds.join(",");
+                }else{
+                    this.$message.warning("请选择租户！");
+                    return;
+                }
+                this.axios.post(this.api.SysTenant.fastEmpower,{authId:roleId,tenantUserIds:tenantUserIds,type}).then(res =>{
+                    if(res.data && res.data.requestStatus == '1'){
+                        this.$message({
+                            type:'success',
+                            message:res.data.message
+                        })
+                        this.crud.search();
+                    }else {
+                        this.$message({
+                            type:'error',
+                            message:'操作失败！'
+                        })
+                    }
+                })
+            },
+
+
+            /**
+             * 开始快速解权
+             */
+            clickRapidEmp(row){
+                this.$set(row,"unEmpowermentClick",false);
+                this.$set(row,"empowermentClick",!row.empowermentClick);
+                //当前行数据
+            },
+
+            /**
+             *
+             * @param row
+             */
+            clickUnRapidEmp(row){
+                this.$set(row,"unEmpowermentClick",!row.unEmpowermentClick);
+                this.$set(row,"empowermentClick",false);
+                //赋值
+                this.tenantUnUserArr = [];
+                let tenantIdArr = row.tenantIdArr || [];
+                this.tenantUserArr.forEach(item =>{
+                    if(tenantIdArr.indexOf(item.id) > -1){
+                        this.tenantUnUserArr.push(item);
+                    }
+                }) ;
+            },
+
+            headerCellStyle({row, column, rowIndex, columnIndex}){
+                if (rowIndex === 0) {
+                    return 'background-color:#F2F2F2;color:#000;font-size:15px;font-weight:600;'
+                } else {
+                    return ''
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+
+    .tree-item /deep/ .el-form-item__content{
+        height: 100%;
+    }
+
+    .treeClass {
+        overflow-y: auto;
+        width: 100% !important;
+        height: calc(100% - 40px);
+    }
+
+    .treeClass /deep/ .el-tree > .el-tree-node > .el-tree-node__content { /* 选中第一级菜单 */
+        background-color: #1A598A;
+        text-decoration: none;
+        border: 1px silver solid;
+        color: #fff;
+        text-align: center;
+        height: 35px;
+    }
+
+</style>