【添加】角色批量配置功能

jero-web/src/views/system/UserList.vue

@@ -86,6 +86,7 @@
         <a-button type="primary" icon="import">导入</a-button>
       </a-upload>
       <a-button type="primary" icon="hdd" @click="recycleBinVisible=true">回收站</a-button>
+      <a-button type="primary" icon="hdd" @click="roleAssignment">角色配置</a-button>
       <a-dropdown v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay" @click="handleMenuClick">
           <a-menu-item key="1">
@@ -184,11 +185,16 @@
 
     <!-- 用户回收站 -->
     <user-recycle-bin-modal :visible.sync="recycleBinVisible" @ok="modalFormOk"/>
+    <!-- 角色配置 -->
+<!--    <a-modal title="角色配置" :width='650'>-->
+    <role-assignment ref="roleAssignmentModal" :selectedRowKeysArray='selectedRowKeys' @rolevisible='rolevisibleMethods'></role-assignment>
+<!--    </a-modal>-->
 
   </a-card>
 </template>
 
 <script>
+  import RoleAssignment from './modules/RoleAssignment'
   import UserModal from './modules/UserModal'
   import PasswordModal from './modules/PasswordModal'
   import {getAction,getFileAccessHttpUrl} from '@/api/manage';
@@ -202,6 +208,7 @@
     name: "UserList",
     mixins: [JeroListMixin],
     components: {
+      RoleAssignment,
       UserModal,
       PasswordModal,
       JInput,
@@ -213,6 +220,7 @@
         description: '这是用户管理页面',
         queryParam: {},
         recycleBinVisible: false,
+        selectedRowKeys: [],
         categoryTreeList:[], // 组织机构查询的组织机构树数据
         columns: [
           {
@@ -367,7 +375,6 @@
       },
       handleFrozen: function (id, status, username) {
         let that = this;
-        //TODO 后台校验管理员角色
         if ('admin' == username) {
           that.$message.warning('管理员账号不允许此操作！');
           return;
@@ -396,6 +403,17 @@
           }
         })
       },
+      // 角色配置
+      roleAssignment() {
+        if(this.selectedRowKeys.length  == 0) {
+          this.$message.warning("请选择至少一条数据")
+        } else {
+          this.$refs.roleAssignmentModal.show();
+        }
+      },
+      rolevisibleMethods(val) {
+        this.selectedRowKeys = []
+      },
     }
 
   }

jero-web/src/views/system/modules/RoleAssignment.vue

@@ -0,0 +1,164 @@
+<!--用户管理-角色配置弹框-->
+<template>
+  <a-modal
+    :title="title"
+    :width="650"
+    :closable="true"
+    :visible="visible"
+    :footer='null'
+  >
+    <div class='diolag-area'>
+      <a-spin :spinning='spinLoading'>
+        <a-form-model
+          class='tag-module'
+          ref='ruleForm'
+          :model='form'
+          :rules='rules'
+          :label-col='labelCol'
+          :wrapper-col='wrapperCol'
+        >
+          <a-row :gutter='24'>
+            <a-col :span='24'>
+              <a-form-item label="角色配置" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select mode="multiple" placeholder="请选择角色" v-model:value="selectedRole">
+                  <a-select-option v-for="(role,roleindex) in roleList" :key="role.id" :value="role.id">
+                      <span style="display: inline-block;width: 100%">
+                        {{ role.roleName }}
+                      </span>
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </a-spin>
+      <div class='drawer-bootom-button'>
+        <a-button style='margin-right: .8rem' @click='handleCancel'>取消</a-button>
+        <a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>提交</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { postAction, getAction, } from '@/api/manage'
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+
+export default {
+  name: 'RoleAssignment',
+  components: {},
+  data() {
+    return {
+      token:Vue.ls.get(ACCESS_TOKEN),
+      title: "角色配置",
+      total: 0,
+      selectedRowKeysDate: {},
+      loading: false,
+      editId: '',
+      visible: false,
+      selectedRole: undefined,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 }
+      },
+      form: {},
+      rules: {},
+      areaTable: [],
+      flag: false,  //表单提交标识
+      spinLoading: false,
+      confirmLoading: false,
+      selectedRowKeys: [],
+      roleList: [],
+      defaultValue: undefined
+    }
+  },
+  props: {
+    selectedRowKeysArray: {
+      type: Array,
+      default: [],
+      require: true
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    loadData() {
+      this.loading = true
+      getAction(`sys/role/queryall`, {}).then(res => {
+        if (res.success) {
+          this.roleList = [...res.result]
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    show(){
+      this.visible = true;
+    },
+    handleCancel() {
+      this.visible = false;
+      this.$emit('rolevisible', false)
+    },
+    //保存
+    handleSubmit() {
+      let param = {ids: this.selectedRowKeysArray.join(','), selectedroles: `${this.selectedRole.join(',')}` }
+      postAction('/sys/user/setRole', param).then((res) => {
+        this.visible = false;
+        if (res.success) {
+          this.$emit('rolevisible', false)
+          this.$message.success(res.message)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+@import '~@assets/less/common.less';
+
+.diolag-area {
+  .table-area {
+    margin: 20px 0;
+
+    .action-edit {
+      margin-right: 10px;
+    }
+  }
+
+  .table-del {
+    color: red;
+  }
+}
+.drawer-bootom-button{
+  display: flex;
+  justify-content: center;
+}
+  ::v-deep .page{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+  }
+</style>
+<style lang='less'>
+.area-module {
+  .ant-modal-wrap {
+    .ant-modal {
+      .ant-modal-content {
+        .ant-modal-footer {
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+</style>