diff --git a/frontend/src/views/User/components/AddUser.vue b/frontend/src/views/User/components/AddUser.vue
index 72b0f9e0124beaee50c1e874f2443efdc2932a36..b2f2eb3f079d476d8970739b83f1a9c393cde0b9 100644
--- a/frontend/src/views/User/components/AddUser.vue
+++ b/frontend/src/views/User/components/AddUser.vue
@@ -15,7 +15,7 @@
             </el-form-item>
             <el-form-item label="用户角色:" prop="role">
                 <el-select v-model="form.role" multiple placeholder="请选择">
-                    <el-option v-for="item in roles" key="item.ID" label="item.role" value="item.ID">
+                    <el-option v-for="item in roles" :key="item.id" :label="item.description" :value="item.id">
                     </el-option>
                 </el-select>
             </el-form-item>
@@ -28,7 +28,6 @@
         </el-form>
 
         <div class="dialog-footer">
-            <el-button>取 消</el-button>
             <el-button type="primary">确 定</el-button>
         </div>
     </div>
@@ -36,10 +35,13 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
+import { ElMessage } from 'element-plus';
 
 import PGTree from "@/components/PGTree.vue";
 
 import { checkEmail, checkPhone } from "./logic";
+import { RespCodeOK } from "@/request/request";
+import { getRoles } from '@/request/role';
 
 const rules = {
     username: [
@@ -83,18 +85,24 @@ const rules = {
         }],
 }
 
-const roles = ref([
-    {
-        value: '1',
-        label: '超级管理员',
-    }, {
-        value: '2',
-        label: '部门管理员',
-    }, {
-        value: '3',
-        label: '普通用户',
-    }
-]);
+const roles = ref<any[]>();
+
+function updateRoles() {
+    getRoles().then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            roles.value = resp.data
+        } else {
+            ElMessage.error("failed to get roles info: " + resp.msg)
+        }
+    }).catch((err) => {
+        ElMessage.error("failed to get roles info: " + err.msg)
+    })
+}
+
+onMounted(() => {
+    updateRoles()
+})
+
 const form = ref<any>({});
 
 </script>