feature(配置管理): 机构管理-配置部门绑定角色功能

src/pages/config/pages/mechanismManage/components/SetRoleForDepartment.vue

@@ -0,0 +1,164 @@
+<template>
+  <el-drawer
+    title="绑定角色"
+    :visible.sync="visible"
+    :wrapperClosable="false"
+    size="800px"
+  >
+    <div class="drawer-content" style="padding-top: 20px">
+      <el-form
+        ref="form"
+        :model="form"
+        label-width="120px"
+        label-position="left"
+      >
+        <el-form-item label="部门名称">
+          {{ form.institutionName }}
+        </el-form-item>
+        <el-divider style="margin: 0" />
+        <el-form-item label="绑定角色" class="search-item">
+          <el-select
+            :value="getRoleIds"
+            placeholder="请选择"
+            multiple
+            collapse-tags
+            size="medium"
+            @change="roleIdsChange"
+          >
+            <el-option
+              v-for="item in allRoleOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="drawer-footer">
+      <el-button
+        class="common-button-default"
+        icon="el-icon-close"
+        size="mini"
+        :loading="btnLoading"
+        @click="onCancel"
+      >
+        取消
+      </el-button>
+      <el-button
+        class="common-button-primary"
+        icon="el-icon-check"
+        type="primary"
+        size="mini"
+        :loading="btnLoading"
+        @click="onSubmit"
+      >
+        确定
+      </el-button>
+    </div>
+    <loading :loading="loading">加载中...</loading>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: 'SetRoleForDepartment',
+  data () {
+    return {
+      visible: false,
+      allRoleOptions: [],
+      form: {
+        institutionId: '', // 部门id
+        institutionName: '',
+        roleIds: '', // 角色id
+      },
+      loading: false,
+      btnLoading: false,
+    }
+  },
+  computed: {
+    getRoleIds () {
+      if (!this.form.roleIds || this.form.roleIds === '') {
+        return []
+      } else {
+        return this.form.roleIds.split(',')
+      }
+    }
+  },
+  created () {
+    this.getAllRole()
+  },
+  methods: {
+    open (id) {
+      this.form.institutionId = id
+      this.form.roleIds = ''
+      this.form.institutionName = ''
+      const config = {
+        _this: this,
+        loading: 'loading'
+      }
+      const query = { institutionId: this.form.institutionId }
+      this.$http._getData('SarInstitution/institution/findInstitutionTree', query, config).then(res => {
+        if (res.ok && res.data) {
+          this.form.institutionName = res.data.institutionName
+          this.form.roleIds = res.data.selectedRoleIds.join(',') || ''
+        }
+      })
+      this.visible = true
+    },
+    getAllRole () {
+      this.$http._getData('sarRole/role/getAllRole').then(res => {
+        if (res.ok && res.data) {
+          this.allRoleOptions = res.data
+        }
+      })
+    },
+    roleIdsChange (val) {
+      this.form.roleIds = val.join(',')
+    },
+    onSubmit () {
+      const config = {
+        _this: this,
+        loading: 'btnLoading'
+      }
+      this.$http._getData('/SarInstitution/institution/setRoleToInstitutionAndUser', this.form, config).then(res => {
+        if (res.ok) {
+          this.$emit('success')
+          this.onCancel()
+        }
+      })
+      console.log(this.form)
+    },
+    onCancel () {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.drawer-content {
+  padding: 0 19px;
+  overflow-y: auto;
+  flex: auto;
+  /deep/.el-form-item{
+    margin: 0 !important;
+  }
+  /deep/.el-divider{
+    margin: 0 !important;
+  }
+  /deep/ .el-select .el-tag {
+    max-width: 110px !important;
+  }
+}
+.drawer-footer {
+  width: 100%;
+  padding: 0 20px;
+  height: 70px;
+  line-height: 69px;
+  border-top: 1px solid #e8e8e8;
+  text-align: right;
+  background: #fff;
+  z-index: 999;
+}
+</style>

src/pages/config/pages/mechanismManage/pages/mechanism.vue

@@ -62,6 +62,9 @@
               <el-button v-btn-permission="'786a941b255a4fe4d13b7e67f100a4e5'" size="mini" type="primary" @click="selectEditOfOrg">
                 根据部门批量配置角色
               </el-button>
+              <el-button v-btn-permission="'335a0e7929ac7e11887bec0d7efd0fef'" size="mini" type="primary" @click="setRoleForDepartment">
+                配置部门绑定角色
+              </el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -283,12 +286,17 @@
       </div>
     </el-drawer>
     <loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
+    <SetRoleForDepartment ref="SetRoleForDepartmentRef" @success="getDatas('1')" />
   </div>
 </template>
 
 <script>
+import SetRoleForDepartment from '../components/SetRoleForDepartment'
 export default {
   name: 'Mechanism',
+  components: {
+    SetRoleForDepartment
+  },
   data () {
     return {
       formLoading: true,
@@ -345,6 +353,10 @@ export default {
     this.getTree2()
   },
   methods: {
+    // 给部门所有人员配置角色·
+    setRoleForDepartment () {
+      this.$refs.SetRoleForDepartmentRef.open(this.id)
+    },
     getRoleName (roles) {
       const names = roles.map(item => {
         return item.name