2022-08-19 数据权限框架设计

src/views/dataPermission/index.vue

@@ -35,7 +35,7 @@
        <div class="pagination">
       <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
     </div>
-    <el-dialog :title="title" :visible.sync="visible" width="100%" :before-close="close">
+    <el-dialog :title="title" :visible.sync="visible" width="700px" :before-close="close">
       <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
            <!-- <el-form-item label="所属租户" prop="tenant">
               <el-tooltip
@@ -60,12 +60,18 @@
         </el-form-item>
         <el-form-item label="数据权限">
              <template>
-                  <div style="border:1px solid #C0C0C0;border-radius:4px;overflow:auto">
-                    <div class="tree">
-                        <div class="tree-content" @mousedown.stop="move">
-                        <tree-item :tree-data="treeData" :tree-first="true" />
-                        </div>
-                    </div>
+                  <div style="border:1px solid #C0C0C0;border-radius:4px;overflow:auto;height:700px;padding:20px">
+                   <el-row :gutter="24" v-for="(item,i) in data" :key="i">
+                    <el-col :span="3"><span><el-input  v-model="item.logicOpr"></el-input></span></el-col>
+                    <el-col :span="6"><el-input v-model="item.field"></el-input></el-col>
+                    <el-col :span="3"><el-input v-model="item.opr"></el-input></el-col>
+                    <el-col :span="6"><el-input v-model="item.value"></el-input></el-col>
+                    <el-col :span="6">
+                      <el-button circle icon="el-icon-plus" @click="addList()"></el-button>
+                      <el-button circle icon="el-icon-minus" @click="subList(i)" v-if="i>0"></el-button>
+                    </el-col>
+                    <!-- <el-col :span="2"><div style="border-radius:50%"><i class="el-icon-delete"></i></div></el-col> -->
+                  </el-row>
                   </div>
                 </template>
         </el-form-item>
@@ -92,17 +98,7 @@ export default {
   },
   data() {
     return {
-          treeData: [{
-        name: '1',
-        child: [
-          { name: '2',
-            child: [{ name: '1' }, { name: '2' }]
-          },
-          { name: '1',
-            child: [{ name: '1' }, { name: '2' }]
-          }
-        ]
-      }],
+         
       visible: false,
       loading: false,
       btnLoading: false,
@@ -118,14 +114,98 @@ export default {
         current: 1,
         name: ''
       },
+      data:[],
       ruleForm: {},
       roleList:[],
       rules: {
         name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
         parentId: [{ required: true, message: '请选择所属部门', trigger: 'change' },],
       },
+      dataList:
+        {
+          "nodeType": "logic",
+          "logicOpr": "or",
+          "left":{
+              "nodeType": "logic",
+              "logicOpr": "and",
+              "left": {
+              "nodeType": "exp",
+                "field": "POSITION_DESCRIPTION",
+                "opr": "=",
+                "value": "'总经理1'"
+              },
+              "right": {
+                "nodeType": "exp",
+                "field": "POSITION_DESCRIPTION",
+                "opr": "=",
+                "value": "'总经理2'"
+              }
+            },
+          "right": {
+            "nodeType": "exp",
+            "field": "POSITION_DESCRIPTION",
+            "opr": "=",
+            "value": "'总经理3'"
+          }
+
+      }
     }
   },
+  created(){
+    var root = this.dataList
+    var a=[]
+     const result = [];
+    function l(root){
+      const stack = [];
+      let last = null; // 标记上一个访问的节点
+      let current = root;
+      while (current || stack.length > 0) {
+        while (current) {
+          stack.push(current);
+          current = current.left;
+        }
+        current = stack[stack.length - 1];
+        if (!current.right || current.right == last) {
+          current = stack.pop();
+          result.push(current);
+          last = current;
+          current = null; // 继续弹栈
+        } else {
+          current = current.right;
+        }
+      }
+      console.log(result)
+      return result;
+
+    }
+    l(root)
+          console.log(result)
+          var i=0
+          var c=0
+          function s(i){
+          if(i<result.length){
+            
+            if(i==0){
+              a.push(result[i])
+              i+=1
+              c+=1
+            }
+            if(i%2==1){
+              a.push(result[i])
+              console.log(a[c])
+              a[c]['logicOpr'] = result[i+1].logicOpr
+              i+=2
+               c+=1
+            }
+            
+            s(i)
+          }
+          }
+          s(i)
+        
+    console.log(a)
+    this.data=a
+  },
   mounted() {
     this.getList()
     this.getFunctionList()
@@ -136,31 +216,7 @@ export default {
     }
   },
   methods: {
-     move(e) {
-      const odiv = e.currentTarget // 获取元素
-      console.log(odiv)
-
-      // 算出鼠标相对元素的位置
-      const disX = e.clientX - odiv.offsetLeft
-      const disY = e.clientY - odiv.offsetTop
-      document.onmousemove = (e) => { // 鼠标按下并移动的事件
-        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-        const left = e.clientX - disX
-        const top = e.clientY - disY
-
-        // 绑定元素位置到positionX和positionY上面
-        this.positionX = top
-        this.positionY = left
-
-        // 移动当前元素
-        odiv.style.left = left + 'px'
-        odiv.style.top = top + 'px'
-      }
-      document.onmouseup = () => {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    },
+   
     getNode(node){
       console.log(node)
 
@@ -172,7 +228,7 @@ export default {
       }
     },
     handleAdd(updepartmentId,row) {
-      console.log(row)
+      // console.log(row)
       this.title = '新增数据权限'
       this.visible = true
       
@@ -259,15 +315,5 @@ export default {
 .admin-department {
 
 }
-.tree{
-    background: #fff;
-    min-height: calc(100vh - 110px);
-    position: relative;
-    &-content{
-      background: #fff;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-}
+
 </style>

src/views/department/index.vue

@@ -182,7 +182,18 @@ export default {
     handleEdit(row) {
       this.title = '编辑部门'
       this.visible = true
-      this.ruleForm = { ...row }
+       this.ruleForm = { ...row }
+      if(row.path==0){
+        this.show=false
+      }else{
+        this.show=true
+        if(row.hasOwnProperty('last')){
+          this.lastName=row.last
+        }else{
+          this.lastName=row.name
+        }
+      }
+     
     },
     close() {
       this.visible = false

src/views/function/index.vue

@@ -45,7 +45,7 @@
       <el-form v-if="visible" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="left">
       
         <el-form-item label="所属功能" prop="function" v-if="show==true">
-          <el-input v-model="functionName" placeholder="请输入功能名称" :disabled="true"></el-input>
+          <el-input v-model="ruleForm.last" placeholder="请输入功能名称" :disabled="true"></el-input>
         </el-form-item>
         <el-form-item label="所属应用" prop="apply">
           <el-select v-model="ruleForm.apply" 
@@ -184,19 +184,30 @@ export default {
       }else{
         this.show=true
         this.disabled=true
-        this.functionName=name
+        // this.functionName=name
          this.ruleForm = {
            sign:row.sign,
         function: id,
         apply:applyid,
         path:row.path
       }
+      if(row.path==0){
+        this.ruleForm.last=name
+      }else{
+        this.ruleForm.last=row.last+'/'+name
+      }
       }
      
     },
     handleEdit(row) {
       this.title = '编辑功能'
       this.visible = true
+      // console.log(row)
+      if(row.path==0){
+        this.show=false
+      }else{
+        this.show=true
+      }
       this.ruleForm = { ...row }
     },
     close() {
@@ -208,6 +219,24 @@ export default {
       this.$api.getFunctionList(this.queryParams).then(response => {
         console.log(response)
         this.tableData = response.data
+       var a = response.data.children
+      for(var j = 0;j<a.length;j++){
+        function l(data){
+         if(data.hasOwnProperty('children')){
+        for(var i = 0;i<data.children.length;i++){
+         
+          if(data.hasOwnProperty('last')){
+            data.children[i].last=data.last+'/'+data.name
+          }else{
+            data.children[i].last=data.name
+          }
+          l(data.children[i])
+        }
+      }
+      }
+      // a[j].last=""
+     l(a[j])
+      }
         this.total=response.pageColumn.total
         this.loading = false
       }).catch(error => {

src/views/layout/index.vue

@@ -137,8 +137,8 @@ export default {
   getPermissionList(){
    this.$api.getPermissionList().then(response=>{
         // localStorage.permission =JSON.stringify(JSON.parse(response.data).data) 
-        this.$store.commit('SET_ADMIN_PERMISSION', JSON.stringify(JSON.parse(response.data).data))
-      console.log(JSON.stringify(JSON.parse(response.data).data))
+        this.$store.commit('SET_ADMIN_PERMISSION', response.data)
+      console.log(response.data)
       })
     },
     getSelect() {

src/views/position/index.vue

@@ -148,6 +148,7 @@ export default {
       return this.$store.state.admin.userinfo
     }
   },
+ 
 
   methods: {
     normalizer(node) {

src/views/role/index.vue

@@ -165,6 +165,7 @@ export default {
       //   functions:this.ruleForm.function 
       // }
       if(val==false){
+  
         this.$api.getDataList({functionList:this.ruleForm.function}).then(response => {
         this.dataList = response.data
       })
@@ -189,6 +190,11 @@ export default {
     submit() {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
+             this.ruleForm.functions=[]
+        for(var i =0;i<this.ruleForm.function.length;i++){
+          var a =this.ruleForm.function[i].join(',')
+          this.ruleForm.functions.push(a)
+        }
           this.btnLoading = true
           if (this.ruleForm.id) {
             this.$api.editRole(this.ruleForm).then(response => {
@@ -201,6 +207,7 @@ export default {
             })
           } else {
             console.log(this.ruleForm)
+
             this.$api.addRole(this.ruleForm).then(response => {
               this.$message.success('新增成功')
               this.btnLoading = false