✨ 组织架构 treeSelect 组件抽取

Hccake · Hccake · commit 9dc3659c4e59 · 2021-09-23T19:35:54.000+08:00
diff --git a/src/views/system/organization/SysOrganizationTreeSelect.vue b/src/views/system/organization/SysOrganizationTreeSelect.vue
@@ -0,0 +1,89 @@
+<template>
+  <a-tree-select
+    :value="selectedValue"
+    :multiple="multiple"
+    :placeholder="placeholder"
+    style="width: 100%"
+    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+    :tree-data="treeData"
+    :tree-default-expand-all="treeDefaultExpandAll"
+    :allow-clear="allowClear"
+    :replace-fields="{
+      title: 'name',
+      key: 'id',
+      value: 'id'
+    }"
+    @change="handleChange"
+  />
+</template>
+
+<script>
+import { getTree } from '@/api/system/organization'
+
+export default {
+  name: 'SysOrganizationTreeSelect',
+  props: {
+    value: {
+      type: [Array, Number],
+      default: () => []
+    },
+    organizationTree: {
+      type: [Array],
+      default: () => null
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    allowClear: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    treeDefaultExpandAll: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      selectedValue: [],
+      treeData: []
+    }
+  },
+  watch: {
+    value (newVal) {
+      this.selectedValue = newVal
+    }
+  },
+  created () {
+    if (this.organizationTree) {
+      this.treeData = this.organizationTree
+    } else {
+      getTree().then(res => {
+        this.treeData = res.data
+      })
+    }
+  },
+  methods: {
+    handleChange (val) {
+      if (val && val.target) {
+        this.selectedValue = val.target.value
+      } else {
+        this.selectedValue = val
+      }
+      // v-decorator 方式的表单值联动
+      this.$emit('change', this.selectedValue)
+      // v-model 方式的表单值联动
+      this.$emit('input', this.selectedValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/role/SysRoleModalForm.vue b/src/views/system/role/SysRoleModalForm.vue
@@ -44,6 +44,31 @@
         />
       </a-form-item>
 
+      <a-form-item label="数据权限">
+        <a-select v-decorator="['scopeType', decoratorOptions.scopeType]" @change="handleScopeTypeChange">
+          <a-select-option :value="0">全部</a-select-option>
+          <a-select-option :value="1">个人</a-select-option>
+          <a-select-option :value="2">本人及子级</a-select-option>
+          <a-select-option :value="3">本级</a-select-option>
+          <a-select-option :value="4">本级及子级</a-select-option>
+          <a-select-option :value="5">自定义</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        v-if="scopeType === 5"
+        label="数据范围"
+        :validate-status="scopeResources.validateStatus"
+        :help="scopeResources.errorMsg"
+      >
+        <sys-organization-tree-select
+          v-model="scopeResources.value"
+          :organization-tree="organizationTree"
+          :multiple="true"
+          @change="validateScopeResources"
+        />
+      </a-form-item>
+
       <a-form-item label="备注">
         <a-textarea
           v-decorator="['note']"
@@ -58,10 +83,18 @@
 <script>
 import { PopUpFormMixin } from '@/mixins'
 import { addObj, putObj } from '@/api/system/role'
+import SysOrganizationTreeSelect from '@/views/system/organization/SysOrganizationTreeSelect'
 
 export default {
   name: 'RoleModalForm',
+  components: { SysOrganizationTreeSelect },
   mixins: [PopUpFormMixin],
+  props: {
+    organizationTree: {
+      type: [Array],
+      default: () => []
+    },
+  },
   data () {
     return {
       reqFunctions: {
@@ -88,17 +121,62 @@ export default {
           ]
         },
         type: {
-          initialValue: 1
+          initialValue: 1,
+          rules: [{ required: true, message: '请选择角色类型!' }]
+        },
+        scopeType: {
+          initialValue: 1,
+          rules: [{ required: true, message: '请选择数据权限!' }]
         }
+      },
+
+      scopeType: 1,
+      scopeResources: {
+        value: [],
+        validateStatus: null,
+        errorMsg: null,
       }
     }
   },
   methods: {
+    /**
+     * 钩子函数，回显数据处理
+     * 默认无操作，子组件可重写此方法，拿到回显数据，对回显数据做处理，或者从回显数据中取值
+     * @param data 回显数据
+     */
+    echoDataProcess (data) {
+      this.scopeType = data.scopeType
+      this.$nextTick(() => {
+        this.scopeResources.value = data.scopeResources ? data.scopeResources.split(','): []
+      })
+    },
+    /**
+     * 表单提交数据处理函数
+     * 子组件可复写此方法，在这里进行偷梁换柱
+     * @param data 表单待提交数据
+     * @returns {*} 真正的提交数据
+     */
+    submitDataProcess (data) {
+      data.scopeResources = this.scopeResources.value.join(',')
+      return data
+    },
     validateCode (rule, value, callback) {
       if (value && value.indexOf('ROLE_') !== 0) {
         callback('角色标识必须以ROLE_开头！')
       }
       callback()
+    },
+    handleScopeTypeChange (scopeType) {
+      this.scopeType = scopeType
+    },
+    validateScopeResources (scopeResources) {
+      if(scopeResources && scopeResources.length > 0){
+        this.scopeResources.validateStatus = "success"
+        this.scopeResources.errorMsg = null
+      }else {
+        this.scopeResources.validateStatus = "error"
+        this.scopeResources.errorMsg = "请选择权限范围！"
+      }
     }
   }
 }
diff --git a/src/views/system/role/SysRolePage.vue b/src/views/system/role/SysRolePage.vue
@@ -78,7 +78,7 @@
     </div>
 
     <!-- 表单弹窗 -->
-    <role-modal-form ref="formModal" @reload-page-table="reloadTable" />
+    <role-modal-form ref="formModal" :organization-tree="organizationTree" @reload-page-table="reloadTable" />
 
     <!-- 角色授权弹窗 -->
     <role-grant-drawer ref="roleGrantDrawer" />
@@ -94,6 +94,7 @@ import RoleModalForm from './SysRoleModalForm'
 import RoleGrantDrawer from './SysRoleGrantDrawer'
 import { TablePageMixin } from '@/mixins'
 import RoleUserModal from '@/views/system/role/SysRoleUserModal'
+import { getTree } from '@/api/system/organization'
 
 export default {
   name: 'SysRolePage',
@@ -155,9 +156,16 @@ export default {
           width: 180,
           scopedSlots: { customRender: 'action-slot' }
         }
-      ]
+      ],
+
+      organizationTree: []
     }
   },
+  created () {
+    getTree().then(res => {
+      this.organizationTree = res.data
+    })
+  },
   methods: {
     // 新建角色
     handleAdd() {
diff --git a/src/views/system/user/SysUserModalForm.vue b/src/views/system/user/SysUserModalForm.vue
@@ -34,23 +34,12 @@
           </a-form-item>
 
           <a-form-item label="组织">
-            <a-tree-select
+            <sys-organization-tree-select
               v-decorator="['organizationId']"
-              placeholder="请选择"
-              style="width: 100%"
-              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-              :tree-data="organizationTree"
-              tree-default-expand-all
-              allow-clear
-              :replace-fields="{
-                title: 'name',
-                key: 'id',
-                value: 'id'
-              }"
+              :organization-tree="organizationTree"
             />
           </a-form-item>
 
-
           <a-form-item label="状态">
             <a-radio-group v-decorator="['status', decoratorOptions.status]">
               <a-radio :value="1">开启</a-radio>
@@ -86,10 +75,11 @@ import { addObj, putObj } from '@/api/system/user'
 import { PopUpFormMixin } from '@/mixins'
 import { passEncrypt } from '@/utils/password'
 import SysRoleSelect from '@/views/system/role/SysRoleSelect'
+import SysOrganizationTreeSelect from '@/views/system/organization/SysOrganizationTreeSelect'
 
 export default {
   name: 'SysUserModalForm',
-  components: { SysRoleSelect },
+  components: { SysOrganizationTreeSelect, SysRoleSelect },
   mixins: [PopUpFormMixin],
   props: {
     organizationTree: {
