sasp-admin 0.2.57

package/src/views/role/roleSynchroRemind.vue

@@ -0,0 +1,399 @@
+<template>
+    <el-container style="width: 600px;height: 500px;" v-loading="loading" element-loading-text="加载中">
+        <el-main style="height: 100%;width: 100%;padding: 0 10px 0 10px;" class="role-remind-main">
+            <el-card class="role-remind-card" v-if="isShow" style="height: calc(100% - 10px);width: 100%;">
+                <el-table :data="dataArr" ref="remindTableRef" style="width: 100%;" border height="calc(100% - 10px)">
+                    <el-table-column label="新增权限" show-overflow-tooltip>
+                        <template slot-scope="scope">
+                            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">菜单：{{scope.row.menuName}}</div>
+                            <el-select v-if="scope.row.bindSourceType != 'cview' && scope.row.optDataArr"
+                                       v-model="synOptObj[scope.row.menuId]" size="small" multiple>
+                                <el-option v-for="(item,optIndex) in scope.row.optDataArr" :key="optIndex"
+                                           :label="item.powerName" :value="item.id"></el-option>
+                            </el-select>
+                            <tree-select v-if="scope.row.bindSourceType == 'cview' && scope.row.optDataArr" value-consists-of="ALL" append-to-body
+                                         v-model="synOptObj[scope.row.menuId]" multiple :disable-branch-nodes="true" :show-count="true"
+                                         :options="scope.row.optDataArr" placeholder="请选择" style="width: 100%;"/>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="是否同步/需同步权限的角色" width="220" class-name="switch-column">
+                        <template slot-scope="scope">
+                            <el-switch v-model="synchroObj[scope.row.menuId]"
+                                       @change="switchChange(scope.row)" style="transform: rotate(90deg);"></el-switch>
+                            <el-select v-if="synchroObj[scope.row.menuId]" v-model="synRoleObj[scope.row.menuId]" size="small" style="width:165px;"
+                                       multiple>
+                                <el-option-group v-for="group in roleArr" :key="group.label" :label="group.label">
+                                    <el-option
+                                            v-for="item in group.options"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value">
+                                    </el-option>
+                                </el-option-group>
+                            </el-select>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center" width="120">
+                        <template slot-scope="scope">
+                            <el-button size="small" :type="synchroObj[scope.row.menuId]?'primary':'info'"
+                                       :disabled="synchroObj[scope.row.menuId]?false:true" @click="execute(scope.row)">
+                                执行
+                            </el-button>
+                            <el-button type="text" @click="ignore(scope.row)">忽略</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+
+                <el-row style="height: 40px;margin-top: 5px;">
+                    <el-button class="all-do-button" size="small" :type="isSyn?'primary' : 'info'"
+                               :disabled="isSyn?false:true" @click="executeAll()">全部执行</el-button>
+                </el-row>
+
+            </el-card>
+        </el-main>
+    </el-container>
+</template>
+
+<script>
+    export default {
+        name: "role-synchro-remind",
+        data(){
+          return {
+              crud: new this.CrudUtil({
+                  vue: this,
+                  entityName: "roleRemind",
+                  url: this.api.roleRemind.url,
+                  searchUrl:this.api.roleRemind.findByUserId,
+                  searchForm: {userId:this.userId},
+                  noClearSearchColumns: ["userId"],
+                  initNoSearch: true
+              }),
+
+              dataArr:[],
+              dataObj:{},
+
+              isShow:false,
+              userId:"",
+              roleArr:[],
+
+              synOptObj:{},//要同步的操作权限
+              synchroObj:{},//是否同步集合
+              synRoleObj:{},//需同步的权限集合
+              needSynMenuObj:{},//需同步的菜单数据
+              isSyn:false,
+              loading:false,
+              showOptArr:[],
+              loginUser:{},
+              defaultProps:{children: 'children', label: 'label',id:'id'},
+          }
+        },
+        created(){
+            this.getUserId();
+        },
+        methods:{
+            getUserId(){
+                this.loginUser = this.USER_GLOBAL.getLoginUser();
+                this.userId = this.loginUser.id;
+                this.getRoleArr();
+                this.getData();
+            },
+
+           async getData(){
+               this.isShow = false;
+               let res = await this.axios.post(this.api.roleRemind.findByUserId,{userId:this.userId});
+               if(res && res.data){
+                   this.dataArr = res.data || [];
+                   this.dataArr.forEach(item => {
+                       //绑定资源类型
+                       if(item.bindSource){
+                           item.bindSourceType = JSON.parse(item.bindSource)[0];
+                       }
+                       if(item.allPower && item.allPower.length > 0){
+                           let paramSetting = {id:"id",pId:"parentId",children:"children"};
+                           (item.allPower || []).forEach(power => {
+                               power.label = power.powerName;
+                           });
+                           item.optDataArr = this.COMMON_FUNC.buildElTree(item.allPower,paramSetting);
+                       }
+                   });
+                   this.isShow = true;
+               }
+            },
+
+
+            getRoleArr(){
+                let vm = this;
+                vm.axios.post(vm.api.role.find,{created:vm.userId}).then(res => {
+                    let roleArr = [];
+                    let empowerRoleOpArr = [];
+                    let normalRoleOpArr = [];
+                    res.data.forEach(item => {
+                        let obj = {};
+                        if(item.roleType == "empower"){
+                            obj.value = item.id + ":empower";
+                            obj.label = item.roleName;
+                            empowerRoleOpArr.push(obj);
+                        }else{
+                            obj.value = item.id + ":normal";
+                            obj.label = item.roleName;
+                            normalRoleOpArr.push(obj);
+                        }
+                    });
+                    let empowerRoleObj = {label:"授权角色",options:empowerRoleOpArr};
+                    let normalRoleObj = {label:"普通角色",options:normalRoleOpArr};
+                    roleArr.push(empowerRoleObj);
+                    roleArr.push(normalRoleObj);
+                    vm.roleArr = roleArr;
+                });
+            },
+
+            dealData(dataArr){
+                (dataArr || []).forEach(item => {
+                    if(item.childrens && item.childrens.length > 0){
+                        this.dealData(item)
+                    }else{
+                        this.showOptArr.push(item);
+                    }
+                });
+            },
+
+            /**
+             * 记录需同步的菜单数据
+             */
+            switchChange(data){
+                let vm = this;
+                if (vm.synchroObj[data.menuId]){
+                    vm.needSynMenuObj[data.menuId] = data;
+                } else{
+                    vm.needSynMenuObj[data.menuId] && delete vm.needSynMenuObj[data.menuId];
+                }
+                if(Object.keys(vm.needSynMenuObj).length > 0){
+                    vm.isSyn = true;
+                }else{
+                    vm.isSyn = false;
+                }
+            },
+
+            /**
+             * 忽略
+             */
+            ignore(data){
+                let vm = this;
+                vm.$confirm("忽略后该菜单已有的操作权限无法再同步，确认忽略吗？", '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(function () {
+                    vm.axios.post(vm.api.roleRemind.update,{id:data.id,status:0}).then(res => {
+                        vm.$message({
+                            type: "success",
+                            message: "忽略成功！"
+                        });
+                        vm.getData();
+                    });
+                });
+            },
+
+            /**
+             * 刷新数据
+             */
+            searchTip(){
+                let vm = this;
+                vm.loading = true;
+                vm.getData();
+                vm.synOptObj = {};
+                vm.synchroObj = {};
+                vm.synRoleObj = {};
+                vm.needSynMenuObj = {};
+                vm.loading = false;
+            },
+
+            /**
+             * 执行
+             */
+            execute(data){
+                let vm = this;
+                vm.$confirm("确定执行吗？", '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(function () {
+                    let dataObj = vm.arrangeData(data.menuId);
+                    if(!dataObj.normalRoleIds && !dataObj.empowerRoleIds){
+                        vm.$message({
+                            duration: 3000,
+                            type: "warning",
+                            message: "请选择需同步权限的角色！"
+                        });
+                        return;
+                    }
+                    dataObj.menuPath = data.menuPath;
+                    dataObj.menuName = data.menuName;
+                    let dataArr = [];
+                    dataArr.push(dataObj);
+                    vm.axios.post(vm.api.roleRemind.executeRemind,
+                        {data:JSON.stringify(dataArr),userId:vm.loginUser.id}).then(res => {
+                        vm.synOptObj[data.menuId] = null;
+                        vm.synchroObj[data.menuId] = false;
+                        vm.synRoleObj[data.menuId] = [];
+                        vm.switchChange(data);
+                        vm.$message({
+                            duration: 1000,
+                            type: "success",
+                            message: "同步成功！"
+                        });
+                        vm.getData();
+                    });
+                });
+            },
+
+            /**
+             * 全部执行
+             */
+            executeAll(){
+                let vm = this;
+                vm.$confirm("若未选择需同步权限的角色则不同步，确定执行吗？", '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(function () {
+                    let dataArr = [];
+                    for(let [key,data] of Object.entries(vm.needSynMenuObj)){
+                        let dataObj = vm.arrangeData(key);
+                        dataObj.menuPath = data.menuPath;
+                        dataObj.menuName = data.menuName;
+                        dataArr.push(dataObj);
+                    }
+                    vm.axios.post(vm.api.roleRemind.executeRemind,
+                        {data:JSON.stringify(dataArr),userId:vm.loginUser.id}).then(res => {
+                        vm.synOptObj = {};
+                        vm.synchroObj = {};
+                        vm.synRoleObj = {};
+                        vm.needSynMenuObj = {};
+                        vm.isSyn = false;
+                        vm.$message({
+                            duration: 1000,
+                            type: "success",
+                            message: "同步成功！"
+                        });
+                        vm.getData();
+                    });
+                });
+            },
+
+            /**
+             * 整理数据格式
+             * @param menuId
+             */
+            arrangeData(menuId){
+                let vm = this;
+                let dataObj = {};
+
+                //操作权限
+                let opts = "";
+                if(vm.synOptObj[menuId]){
+                    opts = vm.synOptObj[menuId].join(",");
+                }
+                //角色权限
+                let empowerRoleIds = "";
+                let normalRoleIds = "";
+                let roleIdArr = vm.synRoleObj[menuId] || [];
+                roleIdArr.forEach(item => {
+                    if(item.split(":")[1] == "empower"){
+                        empowerRoleIds += "," + item.split(":")[0];
+                    }else{
+                        normalRoleIds += "," + item.split(":")[0];
+                    }
+                });
+                if(empowerRoleIds){
+                    empowerRoleIds = empowerRoleIds.substring(1);
+                }
+                if(normalRoleIds){
+                    normalRoleIds = normalRoleIds.substring(1);
+                }
+
+                dataObj.opts = opts;
+                dataObj.menuId = menuId;
+                dataObj.normalRoleIds = normalRoleIds;
+                dataObj.empowerRoleIds = empowerRoleIds;
+
+                return dataObj;
+            }
+
+
+        }
+    }
+</script>
+
+
+<style scoped rel="stylesheet/scss" lang="scss">
+    .role-remind-main{
+
+        /* 滚动条宽度 */
+        /deep/ ::-webkit-scrollbar {
+            width: 2px;
+        }
+
+        /* 滚动槽 */
+       /deep/ ::-webkit-scrollbar-track {
+            background: none;
+        }
+
+        /* 滚动条滑块 */
+       /deep/ ::-webkit-scrollbar-thumb {
+            background: #a9a9a9;
+            border-radius: 10px;
+        }
+
+        .clearfix{
+            padding-left: 10px;
+            box-sizing: border-box;
+        }
+        .role-remind-card /deep/ .el-card__header {
+            height: 40px;
+            line-height: 40px;
+        }
+        .role-remind-card /deep/ .el-card__body {
+            height: calc(100% - 40px);
+            padding: 0px;
+        }
+
+        .all-do-button{
+            float: right;
+            margin-right: 5px;
+            margin-top:3px;
+            box-sizing: border-box;
+        }
+
+        /deep/ .el-select__tags {
+            height: 30px;
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+
+        /deep/ .cell{
+            overflow: visible;
+        }
+
+        .switch-column{
+            padding-left: 0;
+        }
+
+        /deep/ .el-table__row .switch-column .cell{
+            padding: 0;
+        }
+
+        .vue-treeselect /deep/ .vue-treeselect__multi-value {
+            overflow-x: auto;
+        }
+
+        // 滚动条的宽度
+        /deep/ .vue-treeselect__multi-value::-webkit-scrollbar {
+            width: 6px;
+            height: 2px;
+        }
+
+        /deep/ .vue-treeselect__multi-value-item-container {
+            padding-bottom: 5px;
+            box-sizing: border-box;
+        }
+    }
+
+</style>