管理端用户修改角色

src/api/admin.js

@@ -325,3 +325,12 @@ export function useUserIDGetDoctorID(data) {
     data
   })
 }
+
+// 管理端修改用户角色
+export function updateUserRoleInfo(data) {
+  return request({
+    url: `/User/updateUserRoleInfo`,
+    method: 'put',
+    data
+  })
+}

src/views/system/user/components/UserInfo.vue

@@ -85,11 +85,32 @@
             style="width: 100%"
             :disabled="user.CanEditUserType === false || type === 1"
             @change="handleChange"
+            v-if="type === 0"
           >
-            <template v-for="(userType, key) of userTypeOptions">
+            <template v-for="userType of userTypeOptions">
               <el-option
                 v-if="userType.UserTypeEnum !== 20"
-                :key="key"
+                :key="userType.Id"
+                :label="userType.UserType"
+                :value="userType.Id"
+              />
+            </template>
+          </el-select>
+          <el-select
+            ref="userType"
+            v-model="Roles"
+            size="small"
+            placeholder="Please select"
+            multiple
+            style="width: 100%"
+            :disabled="user.CanEditUserType === false || type === 1"
+            @change="handleChange"
+            v-else
+          >
+            <template v-for="userType of userTypeOptions">
+              <el-option
+                v-if="userType.UserTypeEnum !== 20"
+                :key="userType.Id"
                 :label="userType.UserType"
                 :value="userType.Id"
               />
@@ -162,9 +183,10 @@
     <roleList
       v-if="visible"
       :visible.sync="visible"
-      :list="user.UserRoleList"
+      :userId="userId"
-      :roles.sync="user.Roles"
+      :list="userRoleList"
       :userTypeOptions="userTypeOptions"
+      @getRoleList="getRoleList"
     />
   </el-form>
 </template>
@@ -193,6 +215,10 @@ export default {
   },
   methods: {
     openRoleList() {
+      this.userRoleList = []
+      this.user.UserRoleList.forEach((item) => {
+        this.userRoleList.push(Object.assign({}, item))
+      })
       this.visible = true
     },
     handleChange(val) {
@@ -274,10 +300,33 @@ export default {
         IdentityUserId: this.userId,
       }).then((res) => {
         this.user = res.Result
+        this.Roles = []
         this.user.Roles = []
         this.user.UserRoleList = []
         res.Result.AccountList.forEach((item) => {
           if (!item.IsUserRoleDisabled) {
+            this.Roles.push(item.UserTypeId)
+            this.user.Roles.push(item.UserTypeId)
+          }
+          this.user.UserRoleList.push({
+            UserTypeEnum: item.UserTypeEnum,
+            UserTypeId: item.UserTypeId,
+            IsUserRoleDisabled: item.IsUserRoleDisabled,
+            UserTypeShortName: item.UserTypeShortName,
+          })
+        })
+      })
+    },
+    getRoleList() {
+      getUser({
+        IdentityUserId: this.userId,
+      }).then((res) => {
+        this.Roles = []
+        this.user.Roles = []
+        this.user.UserRoleList = []
+        res.Result.AccountList.forEach((item) => {
+          if (!item.IsUserRoleDisabled) {
+            this.Roles.push(item.UserTypeId)
             this.user.Roles.push(item.UserTypeId)
           }
           this.user.UserRoleList.push({
@@ -315,6 +364,8 @@ export default {
       }
     }
     return {
+      userRoleList: [],
+      Roles: [],
       user: {
         Roles: [],
         UserRoleList: [],

src/views/system/user/components/roleList.vue

@@ -7,7 +7,6 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     append-to-body
-    :show-close="false"
     :title="$t('system:userlist:roleList:title')"
     :before-close="cancel"
   >
@@ -19,7 +18,12 @@
     >
       {{ $t('common:button:new') }}
     </el-button>
-    <el-table :data="list" style="width: 100%" max-height="300px">
+    <el-table
+      :data="list"
+      style="width: 100%"
+      max-height="300px"
+      v-loading="loading"
+    >
       <el-table-column type="index" width="40" />
       <el-table-column
         prop="UserTypeShortName"
@@ -56,9 +60,13 @@
     </el-table>
     <div slot="footer">
       <!-- 保存 -->
-      <el-button type="primary" size="small" @click="save">
+      <el-button type="primary" :loading="loading" size="small" @click="save">
         {{ $t('common:button:confirm') }}
       </el-button>
+      <!-- 取消 -->
+      <el-button size="small" @click="cancel">
+        {{ $t('common:button:cancel') }}
+      </el-button>
     </div>
     <el-dialog
       v-if="addVisible"
@@ -103,9 +111,11 @@
   </el-dialog>
 </template>
 <script>
+import { updateUserRoleInfo } from '@/api/admin.js'
 export default {
   name: 'roleList',
   props: {
+    userId: { type: String, default: '' },
     visible: {
       type: Boolean,
       default: false,
@@ -116,12 +126,6 @@ export default {
         return []
       },
     },
-    roles: {
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
     userTypeOptions: {
       type: Array,
       default: () => {
@@ -132,6 +136,7 @@ export default {
   data() {
     return {
       addVisible: false,
+      loading: false,
       form: {
         roles: [],
       },
@@ -161,15 +166,24 @@ export default {
     openAdd() {
       this.addVisible = true
     },
-    save() {
+    async save() {
-      let roles = []
+      try {
-      this.list.forEach((item) => {
+        let data = {
-        if (!item.IsUserRoleDisabled) {
+          Id: this.userId,
-          roles.push(item.UserTypeId)
+          UserRoleList: this.list,
         }
-      })
+        this.loading = true
-      this.$emit('update:roles', roles)
+        let res = await updateUserRoleInfo(data)
+        this.loading = false
+        if (res.IsSuccess) {
+          this.$message.success(this.$t('common:message:updatedSuccessfully'))
           this.$emit('update:visible', false)
+          this.$emit('getRoleList')
+        }
+      } catch (err) {
+        this.loading = false
+        console.log(err)
+      }
     },
     async saveAdd() {
       try {