数据权限

src/styles/index.scss

@@ -5,50 +5,50 @@ $max-classes: 10;
 // 生成 padding-left (pl) 类  
 @for $i from 0 through $max-classes {  
   .pl-#{$i} {  
-    padding-left: $base-unit * $i;  
+    padding-left: $base-unit * $i !important;  
   }
   .ml-#{$i} {  
-    margin-left: $base-unit * $i;  
+    margin-left: $base-unit * $i !important;  
   }  
   .pr-#{$i} {  
-    padding-right: $base-unit * $i;  
+    padding-right: $base-unit * $i !important;  
   }  
   .mr-#{$i} {  
-    margin-right: $base-unit * $i;  
+    margin-right: $base-unit * $i !important;  
   }  
   .pt-#{$i} {  
-    padding-top: $base-unit * $i;  
+    padding-top: $base-unit * $i !important;  
   }  
   .mt-#{$i} {  
-    margin-top: $base-unit * $i;  
+    margin-top: $base-unit * $i !important;  
   }  
   .pb-#{$i} {  
-    padding-bottom: $base-unit * $i;  
+    padding-bottom: $base-unit * $i !important;  
   }  
   .mb-#{$i} {  
-    margin-bottom: $base-unit * $i;  
+    margin-bottom: $base-unit * $i !important;  
   }  
   .pa-#{$i} {  
-    padding: $base-unit * $i;  
+    padding: $base-unit * $i !important;  
   }
   .ma-#{$i} {  
-    margin: $base-unit * $i;  
+    margin: $base-unit * $i !important;  
   }
   .px-#{$i} {
-    padding-left: $base-unit * $i;
-    padding-right: $base-unit * $i;
+    padding-left: $base-unit * $i !important;
+    padding-right: $base-unit * $i !important;
   }
   .mx-#{$i} {
-    margin-left: $base-unit * $i;
-    margin-right: $base-unit * $i;
+    margin-left: $base-unit * $i !important;
+    margin-right: $base-unit * $i !important;
   }
   .py-#{$i} {
-    padding-top: $base-unit * $i;
-    padding-bottom: $base-unit * $i;
+    padding-top: $base-unit * $i !important;
+    padding-bottom: $base-unit * $i !important;
   }
   .my-#{$i} {
-    margin-top: $base-unit * $i;
-    margin-bottom: $base-unit * $i;
+    margin-top: $base-unit * $i !important;
+    margin-bottom: $base-unit * $i !important;
   }
 }  
 

src/views/system/role/roleData.vue

@@ -1,8 +1,8 @@
 <template>
   <MDialog ref="menuDialog" title="数据权限编辑" @sure="handleSave">
-    <MForm ref="menuForm">
+    <MForm ref="menuForm" v-loading="loading">
       <el-form-item label="角色名称">
-        <el-tag>{{ item.roleName }}</el-tag>
+        <el-tag>{{ itemData.roleName }}</el-tag>
       </el-form-item>
       <el-form-item label="数据权限" required>
         <m-card shadow="never">
@@ -10,18 +10,41 @@
             <el-col :span="8">功能名称</el-col>
             权限选择
           </el-row>
-          <el-row v-for="(data, index) in dataItems" :key="index">
+          <el-row v-for="(data, index) in dataItems" :key="index" class="mb-3">
             <el-col :span="8">{{ data.funName || '名称获取异常' }}</el-col>
-            <el-radio-group v-model="data.value" size="small">
-              <el-radio
-                v-for="(value, i) in data.values"
-                :key="value.label + i"
-                :label="value.value"
-                :disabled="value.disable"
+            <el-col :span="16">
+              <el-select
+                v-model="data.value"
+                placeholder="请选择数据权限"
+                @change="onChange(data)"
               >
-                {{ value.label }}
-              </el-radio>
-            </el-radio-group>
+                <el-option
+                  v-for="(value, i) in data.values"
+                  :key="value.label + i"
+                  :label="value.label"
+                  :value="value.value"
+                  :disabled="value.disable"
+                ></el-option>
+              </el-select>
+              <m-card
+                v-if="data.value === 3"
+                shadow="never"
+                class="mt-3"
+                :body-style="{
+                  'max-height': '200px',
+                  'overflow-y': 'auto'
+                }">
+                <el-tree
+                  :data="treeItems"
+                  show-checkbox
+                  node-key="organizationNo"
+                  :default-expanded-keys="expandRowKeys"
+                  :default-checked-keys="data.items"
+                  :props="{ label: 'organizationName', children: 'child'}"
+                  @check="(_, treeObj) => onCheck(data, treeObj)"
+                ></el-tree>
+              </m-card>
+            </el-col>
           </el-row>
         </m-card>
       </el-form-item>
@@ -32,19 +55,34 @@
 <script>
 import { saveDataPermission, getDataPermission } from '@/api/menu'
 import { getRoleDataPermissionList } from '@/api/user'
+
+import {
+  getOrganizationTree
+} from '@/api/system'
 export default {
   name: 'role-data',
   data () {
     return {
-      item: {},
-      dataItems: []
+      loading: false,
+      itemData: {},
+      dataItems: [],
+      treeItems: [],
+      expandRowKeys: []
     }
   },
+  created () {
+    this.getOrganization()
+  },
   methods: {
     async open (item) {
-      this.item = item
-      this.getList(item.id)
+      this.loading = true
+      this.dataItems = []
       this.$refs.menuDialog.open()
+      this.itemData = item
+      await this.getList(item.id)
+      this.$nextTick(() => {
+        this.loading = false
+      })
     },
     async getList (roleId) {
       try {
@@ -52,14 +90,17 @@ export default {
 
         const { data } = await getRoleDataPermissionList()
         this.dataItems = data.map(e => {
+          const item = _data.records.find(_e => _e.funCode === e.funCode)
           return {
             funCode: e.funCode,
             funName: e.funName,
-            value: _data.records.find(_e => _e.funCode === e.funCode)?.roleType ?? 2,
+            value: item?.roleType ?? 2,
+            items: item?.roleValue?.split(',') ?? [],
             values: [
-              { label: '不限', span: 4, value: 2 },
-              { label: '本部门权限', span: 6, value: 0, disable: !e.organization },
-              { label: '仅本人权限', span: 6, value: 1, disable: !e.employee }
+              { label: '不限', value: 2 },
+              { label: '本部门权限', value: 0, disable: !e.organization },
+              { label: '仅本人权限', value: 1, disable: !e.employee },
+              { label: '指定机构权限', value: 3 }
             ]
           }
         })
@@ -68,14 +109,19 @@ export default {
       }
     },
     async handleSave () {
+      if (!this.dataItems.every(e => e.value !== 3 || e.items.length > 0)) {
+        this.$message.error('请选择指定机构权限')
+        return
+      }
       try {
         await saveDataPermission({
-          roleId: this.item.id,
+          roleId: this.itemData.id,
           items: this.dataItems.map(e => {
             return {
               funCode: e.funCode,
               roleType: e.value,
-              wrType: 2
+              wrType: 2,
+              roleValue: e.value === 3 ? e.items.join(',') : undefined
             }
           })
         })
@@ -85,6 +131,23 @@ export default {
       } catch (error) {
         this.$message.error(error)
       }
+    },
+    onCheck (data, treeObj) {
+      data.items = treeObj.checkedKeys
+    },
+    onChange (data) {
+      data.items = []
+    },
+    async getOrganization () {
+      try {
+        const { data } = await getOrganizationTree()
+        this.expandRowKeys = [data.organizationNo]
+        this.treeItems = [
+          data
+        ]
+      } catch (error) {
+        this.$message.error(error)
+      }
     }
   }
 }