fix:数据权限优化及新增角色数据权限配置

src/http/moudules/sys.js

@@ -445,3 +445,57 @@ export const getDataPermissionsItem = (id) => {
     })
 }
 
+
+//获取角色关联菜单列表
+export const getInsRoleMenuPermissions = (data) => {
+    return axios({
+        url:`/insRolePermissions/getInsRoleMenuPermissions`,
+        method: 'post',
+        data
+      
+    })
+}
+//设置角色关联菜单
+export const saveAndUpdateRuleMenu = (data) => {
+    return axios({
+        url:`/insRolePermissions/saveAndUpdateRuleMenu`,
+        method: 'post',
+        data
+      
+    })
+}
+
+//获取菜单关联数据-无分页
+export const getMenuRelaPerqueryList = (data) => {
+    return axios({
+        url:`/dataPermissions/queryList`,
+        method: 'post',
+        data
+      
+    })
+}
+//获取角色关联菜单 关联的规则数据
+export const getInsRolePermissionsDtoList = (data) => {
+    return axios({
+        url:`/insRolePermissions/getInsRolePermissionsDtoList`,
+        method: 'post',
+        data
+      
+    })
+}
+//保存角色关联菜单 关联的规则数据
+export const roleMenuPerSaveAndUpdate = (data) => {
+    return axios({
+        url:`/insRolePermissions/saveAndUpdate`,
+        method: 'post',
+        data
+      
+    })
+}
+
+
+
+
+
+
+

src/views/Sys/DataPermissions.vue

@@ -59,12 +59,14 @@
         fixed="right" header-align="center" align="center" width="185" :label="$t('action.operation')">
         <template slot-scope="scope">
           <kt-button 
+          v-if="scope.row.type === 1"
             label="数据权限" 
             sperms="sys:dataPermissions:save" 
             @click="handPermissions(scope.row)"
             type="primary"
           />
           <kt-button 
+          v-if="scope.row.type === 1"
             label="详情" 
             sperms="sys:dataPermissions:view" 
             @click="watchPermissions(scope.row)"
@@ -120,9 +122,21 @@
       <el-table :data="messageList">
         <el-table-column property="ruleName" label="规则名称" ></el-table-column>
         <el-table-column property="ruleField" label="规则字段" ></el-table-column>
-        <el-table-column property="ruleCondition" label="条件规则"></el-table-column>
+        <el-table-column property="ruleCondition" label="条件规则">
+          <template slot-scope="scope">
+              {{conditionalRule.find((v,i)=>{
+               
+                return v.value==scope.row.ruleCondition 
+                 
+              }).label }}
+          </template>
+        </el-table-column>
         <el-table-column property="ruleValue" label="规则值"></el-table-column>
-        <el-table-column property="status" label="状态"></el-table-column>
+        <el-table-column property="status" label="状态">
+          <template slot-scope="scope">
+              {{ scope.row.status=='1' ? '有效':'无效' }}
+          </template>
+        </el-table-column>
         <el-table-column property="createTime" label="创建日期"></el-table-column>
         <el-table-column property="operation" label="操作">
           <template slot-scope="scope">

src/views/Sys/RulePermissions.vue

@@ -23,59 +23,91 @@
       </div>
       <div class="conent-box" >
         <!--表格内容栏-->
-        <kt-table
-          :height="500"
-          permsEdit="sys:role:edit"
-          permsDelete="sys:role:delete"
-          :highlightCurrentRow="true"
-          :stripe="false"
-          :data="pageResult"
-          :columns="columns"
-          :showBatchDelete="false"
-          @handleCurrentChange="handleRoleSelectChange"
-          @findPage="findPage"
-          @handleEdit="handleEdit"
-          @handleDelete="handleDelete"
+        <el-table
+            :data="pageResult.content"
+            border
+            style="width: 100%; "
+            height="600"
         >
-        </kt-table>
+            <el-table-column
+                v-for="column in columns"
+                header-align="center"
+                align="center"
+                :prop="column.prop"
+                :label="column.label"
+                :width="column.width"
+                :min-width="column.minWidth"
+                :fixed="column.fixed"
+                :key="column.prop"
+                :type="column.type"
+                :formatter="column.formatter"
+                :sortable="column.sortable == null ? true : column.sortable"
+            >
+            </el-table-column>
+            <el-table-column
+                :label="$t('action.operation')"
+                width="185"
+                fixed="right"
+                
+                header-align="center"
+                align="center"
+            >
+                <template slot-scope="scope">
+                <kt-button
+                    
+                    label="菜单配置"
+                    :perms="''"
+                    :size="size"
+                    @click="handleEdit( scope.row)"
+                />
+                <!-- <kt-button
+                    icon="fa fa-trash"
+                    :label="$t('action.delete')"
+                    :perms="permsDelete"
+                    :size="size"
+                    type="danger"
+                    @click="handleDelete(scope.$index, scope.row)"
+                /> -->
+                </template>
+            </el-table-column>
+        </el-table>
+       
        
-      
       </div>
+      <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="pageRequest.pageNum"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="pageRequest.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="pageRequest.total">
+        </el-pagination>
      
       <!-- </el-col> -->
       <!--新增编辑界面-->
       <el-dialog
         v-dialogDrag
-        :title="operation ? '新增' : '编辑'"
+        :title="'菜单配置'"
         width="40%"
         :visible.sync="dialogVisible"
         :close-on-click-modal="false"
       >
-        <el-form
-          :model="dataForm"
-          label-width="80px"
-          :rules="dataFormRules"
-          ref="dataForm"
-          :size="size"
+        <el-tree
+          :data="menuData"
+          size="mini"
+          show-checkbox
+          node-key="id"
+          :props="defaultProps"
+          ref="menuTree"
+          :default-checked-keys="checkedKeys"
+        
+          v-loading="menuLoading"
+          element-loading-text="拼命加载中"
+          @check="handleMenuCheckChange"
+          @node-click="treeClick"
         >
-          <el-form-item label="ID" prop="id" v-if="false">
-            <el-input
-              v-model="dataForm.id"
-              :disabled="true"
-              auto-complete="off"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="角色名" prop="name">
-            <el-input v-model="dataForm.name" auto-complete="off"></el-input>
-          </el-form-item>
-          <el-form-item label="备注 " prop="remark">
-            <el-input
-              v-model="dataForm.remark"
-              auto-complete="off"
-              type="textarea"
-            ></el-input>
-          </el-form-item>
-        </el-form>
+        </el-tree>
         <div slot="footer" class="dialog-footer">
           <el-button :size="size" @click.native="dialogVisible = false">{{
             $t("action.cancel")
@@ -89,6 +121,28 @@
           >
         </div>
       </el-dialog>
+      <el-drawer
+        title="数据规则/按钮权限配置"
+        :visible.sync="drawer"
+        :direction="'rtl'"
+        :before-close="handleClose">
+        <el-tree
+            :data="messageList"
+            size="mini"
+            show-checkbox
+            node-key="id"
+            :props="ruleProps"
+            ref="perMisseionTree"
+            :default-checked-keys="perCheckedKeys"
+            
+            
+            element-loading-text="拼命加载中"
+            @check="handlePerCheckChange"
+            >
+            </el-tree>
+            <el-button style="margin-left: 20px;" type="primary" @click="submitPer">保存</el-button>
+            <!-- v-loading="menuLoading" -->
+        </el-drawer>
     </div>
   </template>
   
@@ -97,6 +151,8 @@
   import KtButton from "@/views/Core/KtButton";
   import TableTreeColumn from "@/views/Core/TableTreeColumn";
   import { format } from "@/utils/datetime";
+
+
   export default {
     components: {
       KtTable,
@@ -105,6 +161,8 @@
     },
     data() {
       return {
+        messageList:[],
+        drawer:false,
         size: "small",
         filters: {
           name: "",
@@ -123,7 +181,7 @@
           // {prop:"lastUpdateBy", label:"更新人", minWidth:100},
           // {prop:"lastUpdateTime", label:"更新时间", minWidth:120, formatter:this.dateFormat}
         ],
-        pageRequest: { pageNum: 1, pageSize: 10 },
+        pageRequest: { pageNum: 1, pageSize: 10,total:0 },
         pageResult: {},
   
         operation: false, // true:新增, false:编辑
@@ -149,75 +207,121 @@
           children: "children",
           label: "name",
         },
+        ruleProps:{
+            children: "children",
+            label: "ruleName",
+        },
         leveData: [],
+        checkedKeys:[],
+        roleId:"",
+        clickMenuId:"",
+        perCheckedKeys:[]
       };
     },
     created() {
-      this.getLeveData();
+      this.findPage({});
     },
     methods: {
+        handleSizeChange(val) {
+            // console.log(`每页 ${val} 条`);
+            this.pageRequest.pageSize=val
+            this.findPage({});
+        },
+        handleCurrentChange(val) {
+            // console.log(`当前页: ${val}`);
+            this.pageRequest.pageNum=val
+            this.findPage({});
+
+        },
       getLeveData() {},
       // 获取分页数据
       findPage: function (data) {
-        if (data !== null) {
-          this.pageRequest = data.pageRequest;
-        }
+        // if (data !== null) {
+        //   this.pageRequest = data.pageRequest;
+        // }
         this.pageRequest.columnFilters = {
           name: { name: "name", value: this.filters.name },
         };
         this.$api.role
           .findPage(this.pageRequest)
-          .then((res) => {
+          .then((res) => { 
             this.pageResult = res.data;
+            this.pageRequest.total=res.data.totalSize
             this.findTreeData();
           })
           .then(data != null ? data.callback : "");
       },
-      // 批量删除
-      handleDelete: function (data) {
-        this.$api.role.batchDelete(data.params).then(data.callback);
-      },
-      // 显示新增界面
-      handleAdd: function () {
-        this.dialogVisible = true;
-        this.operation = true;
-        this.dataForm = {
-          id: 0,
-          name: "",
-          remark: "",
-        };
-      },
+     
+    
       // 显示编辑界面
       handleEdit: function (params) {
+        this.checkedKeys=[]
         this.dialogVisible = true;
         this.operation = false;
-        this.dataForm = Object.assign({}, params.row);
+        // console.log(params)
+        this.roleId=params.id
+        // this.dataForm = Object.assign({}, params.row);
+        this.$api.sys.getInsRoleMenuPermissions({
+            roleId:params.id
+        }).then(res=>{
+            // console.log(res)
+            if(res.code===200){
+             
+                if(res.data.length>0){
+                    this.checkedKeys=res.data.map((v)=>{
+                        return v.menuId
+                    })
+                }else{
+                    this.$refs.menuTree.setCheckedKeys([],false);
+                }
+            }
+        })
       },
-      // 编辑
+      // 保存角色关联菜单
       submitForm: function () {
-        this.$refs.dataForm.validate((valid) => {
-          if (valid) {
-            this.$confirm("确认提交吗？", "提示", {}).then(() => {
-              this.editLoading = true;
-              // let params = Object.assign({}, this.dataForm);
-              this.$api.role.save(this.dataForm).then((res) => {
-                this.editLoading = false;
-                if (res.code == 200) {
-                  this.$message({ message: "操作成功", type: "success" });
-                  this.dialogVisible = false;
-                  this.$refs["dataForm"].resetFields();
-                } else {
-                  this.$message({
+        
+        this.$api.sys.saveAndUpdateRuleMenu({
+            menuIdList:this.checkedKeys,
+            roleId:this.roleId
+        }).then((res) => {
+            this.editLoading = false;
+            if (res.code == 200) {
+                this.$message({ message: "操作成功", type: "success" });
+                this.dialogVisible = false;
+                this.checkedKeys=[]
+            } else {
+                this.$message({
                     message: "操作失败, " + res.msg,
                     type: "error",
-                  });
-                }
-                this.findPage(null);
-              });
-            });
-          }
+                });
+            }
+            // this.findPage(null);
         });
+          
+          
       },
+    // 保存角色-菜单-关联权限规则
+    submitPer(){
+        this.$api.sys.roleMenuPerSaveAndUpdate({
+            permissionsIdList:this.perCheckedKeys,
+            roleId:this.roleId,
+            menuId:this.clickMenuId
+        }).then((res) => {
+            this.editLoading = false;
+            if (res.code == 200) {
+                this.$message({ message: "操作成功", type: "success" });
+                this.drawer = false;
+                this.perCheckedKeys=[]
+            } else {
+                this.$message({
+                    message: "操作失败, " + res.msg,
+                    type: "error",
+                });
+            }
+            // this.findPage(null);
+        });
+        
+    },
       // 获取数据
       findTreeData: function () {
         this.menuLoading = true;
@@ -254,29 +358,60 @@
           });
         }
       },
-      // 树节点选择监听
+      //树节点选择监听
       handleMenuCheckChange(data, check, subCheck) {
-        let checkNode = this.$refs.menuTree.getCheckedKeys();
-        console.log(checkNode.length);
-        let checked = checkNode.length;
-        if (checked !== 188) {
-          this.checkAll = false;
-        } else {
-          this.checkAll = true;
-        }
-        // this.$api.menu.findMenuTree().then((res) => {
-        //   let array = res.data;
-        //   function treeForeach(array, fun) {
-        //     array.forEach((data) => {
-        //       fun(data);
-        //       data.children && treeForeach(data.children, fun); // 遍历子树
-        //     });
-        //   }
-        //   treeForeach(array, (node) => {
-        //     console.log(node);
-        //   });
-        // });
+       this.checkedKeys=[...check.checkedKeys]
       },
+      //规则树几点选中
+      handlePerCheckChange(data, check, subCheck) {
+       this.perCheckedKeys=[...check.checkedKeys]
+      },
+      //树节点点击
+     async treeClick(node){
+        // console.log(node)
+        this.clickMenuId=node.id
+        this.drawer=true
+        await this.getMessageList()
+        await this.getInsRolePermissionsDtoList()
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      //获取菜单下的规则列表
+        async getMessageList(){
+            this.$api.sys.getMenuRelaPerqueryList({
+                menuId:this.clickMenuId,
+            }).then(res=>{
+                if(res.code===200){
+                    
+                    this.messageList=[...res.data]
+                }
+            })
+        },
+        //获取角色关联菜单 关联的规则数据
+        async getInsRolePermissionsDtoList(){
+            this.$api.sys.getInsRolePermissionsDtoList({
+                menuId:this.clickMenuId,
+                roleId:this.roleId
+            }).then(res=>{
+                if(res.code===200){
+                   
+                   console.log(res.data)
+                    if(res.data.length>0){
+                        this.perCheckedKeys=res.data.map((v)=>{
+                            return v.permissionsId
+                        })
+                    }else{
+                        this.$refs.perMisseionTree.setCheckedKeys([],false);
+                    }
+                    // this.messageList=[...res.data]
+                }
+            })
+        },
       // 重置选择
       resetSelection() {
         this.checkAll = false;
@@ -327,31 +462,15 @@
           this.authLoading = false;
         });
       },
-      renderContent(h, { node, data, store }) {
-        return (
-          <div class="column-container">
-            <span style="text-algin:center;margin-right:80px;">{data.name}</span>
-            <span style="text-algin:center;margin-right:80px;">
-              <el-tag
-                type={data.type === 0 ? "" : data.type === 1 ? "success" : "info"}
-                size="small"
-              >
-                {data.type === 0 ? "目录" : data.type === 1 ? "菜单" : "按钮"}
-              </el-tag>
-            </span>
-            <span style="text-algin:center;margin-right:80px;">
-              {" "}
-              <i class={data.icon}></i>
-            </span>
-            <span style="text-algin:center;margin-right:80px;">
-              {data.parentName ? data.parentName : "顶级菜单"}
-            </span>
-            <span style="text-algin:center;margin-right:80px;">
-              {data.url ? data.url : "\t"}
-            </span>
-          </div>
-        );
-      },
+    //   renderContent(h, { node, data, store }) {
+    //     return (
+    //       <div class="column-container">
+    //         <div style="text-algin:center;margin-right:80px;">{data.name}</div>
+            
+           
+    //       </div>
+    //     );
+    //   },
       // 时间格式化
       dateFormat: function (row, column, cellValue, index) {
         return format(row[column.property]);
@@ -383,12 +502,12 @@
     max-height: 500px !important;
   }
   .el-tree {
-    width: 800px;
+   // width: 800px;
     height: 500px;
     overflow-x: auto;
   }
   /deep/ .el-tree > .el-tree-node {
-    display: inline-block !important;
+   // display: inline-block !important;
   }
   .btn-box {
     padding-right: 100px;