用户新增编辑:获取角色列表

src/api/system/role.js

@@ -42,3 +42,11 @@ export function getRolePage(data) {
     data
   })
 }
+// 角色列表
+export function getRoleList(data) {
+  return request({
+    url: getUrl('/sysRole/list'),
+    method: 'post',
+    data
+  })
+}

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

@@ -33,9 +33,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="用户角色" prop="userRoles">
+          <el-form-item label="用户角色" prop="sysUserRoleDTOs">
-            <el-select v-model="form.userRoles" placeholder="请选择用户角色" clearable size="small" :disabled="isView">
+            <el-select v-model="selectedRoleIds" multiple placeholder="请选择用户角色" clearable size="small" :disabled="isView" @change="handleRolesChange">
-              <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
+              <el-option v-for="item in roleListData" :key="item.id" :label="item.roleName" :value="item.id" />
             </el-select>
           </el-form-item>
         </el-col>
@@ -53,6 +53,7 @@
 
 <script>
 import { addUser, updateUser } from '@/api/generatedApi/system'
+import { getRoleList } from '@/api/system/role'
 
 export default {
   name: 'UserDialog',
@@ -81,18 +82,15 @@ export default {
   data() {
     return {
       form: {
-        userRoles: '',
         userCode: '',
         userName: '',
-        status: 0,
-        dingtalkId: '',
-        password: '',
         realName: '',
-        jobNo: '',
         mobile: '',
         email: '',
         sysUserRoleDTOs: []
       },
+      roleListData: [],
+      selectedRoleIds: [], // 新增，用于绑定选中的角色ID数组
       rules: {
         userCode: [{ required: true, message: '请输入用户编码', trigger: 'blur' }],
         userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
@@ -112,7 +110,29 @@ export default {
       immediate: true
     }
   },
+  created() {
+    this.getRoleListData()
+  },
   methods: {
+    // 获取角色列表
+    getRoleListData() {
+      this.loading = true
+
+      getRoleList({})
+        .then(response => {
+          if (response.code === '0') {
+            this.roleListData = response.content.content || []
+          } else {
+            this.$message.error(response.msg || '获取角色列表失败')
+          }
+        })
+        .catch(error => {
+          this.$message.error('获取角色列表出错', error)
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
     handleClose() {
       this.$refs.form.resetFields()
       this.$emit('update:visible', false)
@@ -150,6 +170,10 @@ export default {
             })
         }
       })
+    },
+    // 处理角色选择变化
+    handleRolesChange(roleIds) {
+      this.form.sysUserRoleDTOs = roleIds.map(id => ({ roleId: id }));
     }
   }
 }