diff --git a/frontend/src/business/components/settings/system/User.vue b/frontend/src/business/components/settings/system/User.vue
index ee0aec578b..8489239a0e 100644
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@@ -50,7 +50,8 @@
     </el-card>
 
     <!--Create user-->
-    <el-dialog :close-on-click-modal="false" :title="$t('user.create')" :visible.sync="createVisible" width="35%" @closed="handleClose"
+    <el-dialog :close-on-click-modal="false" :title="$t('user.create')" :visible.sync="createVisible" width="35%"
+               @closed="handleClose"
                :destroy-on-close="true">
       <el-form :model="form" label-position="right" label-width="120px" size="small" :rules="rule" ref="createUserForm">
         <el-form-item label="ID" prop="id">
@@ -81,10 +82,11 @@
                 :label="$t('role.' + item.id)"
                 :value="item.id"
               >
-                {{$t('role.' + item.id)}}
+                {{ $t('role.' + item.id) }}
               </el-option>
             </el-select>
-            <el-button @click.prevent="removeRole(role)" style="margin-left: 20px;" v-if="form.roles.length > 1">{{$t('commons.delete')}}
+            <el-button @click.prevent="removeRole(role)" style="margin-left: 20px;" v-if="form.roles.length > 1">
+              {{ $t('commons.delete') }}
             </el-button>
           </el-form-item>
           <div v-if="role.id === 'org_admin'">
@@ -151,7 +153,9 @@
 
         <el-form-item>
           <template>
-            <el-button type="success" style="width: 100%;" @click="addRole('createUserForm')" :disabled="btnAddRole">{{$t('role.add')}}</el-button>
+            <el-button type="success" style="width: 100%;" @click="addRole('createUserForm')" :disabled="btnAddRole">
+              {{ $t('role.add') }}
+            </el-button>
           </template>
         </el-form-item>
       </el-form>
@@ -163,7 +167,8 @@
     </el-dialog>
 
     <!--Modify user information in system settings-->
-    <el-dialog :close-on-click-modal="false" :title="$t('user.modify')" :visible.sync="updateVisible" width="35%" :destroy-on-close="true"
+    <el-dialog :close-on-click-modal="false" :title="$t('user.modify')" :visible.sync="updateVisible" width="35%"
+               :destroy-on-close="true"
                @close="handleClose" v-loading="result.loading">
       <el-form :model="form" label-position="right" label-width="120px" size="small" :rules="rule" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
@@ -191,7 +196,8 @@
                 :value="item.id">
               </el-option>
             </el-select>
-            <el-button @click.prevent="removeRole(role)" style="margin-left: 20px;" v-if="form.roles.length > 1">{{$t('commons.delete')}}
+            <el-button @click.prevent="removeRole(role)" style="margin-left: 20px;" v-if="form.roles.length > 1">
+              {{ $t('commons.delete') }}
             </el-button>
           </el-form-item>
           <div v-if="role.id === 'org_admin'">
@@ -257,7 +263,9 @@
         </div>
         <el-form-item>
           <template>
-            <el-button type="success" style="width: 100%;" @click="addRole('updateUserForm')" :disabled="btnAddRole">{{$t('role.add')}}</el-button>
+            <el-button type="success" style="width: 100%;" @click="addRole('updateUserForm')" :disabled="btnAddRole">
+              {{ $t('role.add') }}
+            </el-button>
           </template>
         </el-form-item>
       </el-form>
@@ -268,7 +276,8 @@
       </template>
     </el-dialog>
     <!--Changing user password in system settings-->
-    <el-dialog :close-on-click-modal="false" :title="$t('member.edit_password')" :visible.sync="editPasswordVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.edit_password')" :visible.sync="editPasswordVisible"
+               width="30%"
                :destroy-on-close="true" @close="handleClose" left>
       <el-form :model="ruleForm" label-position="right" label-width="120px" size="small" :rules="rule"
                ref="editPasswordForm" class="demo-ruleForm">
@@ -290,297 +299,301 @@
 </template>
 
 <script>
-  import MsCreateBox from "../CreateBox";
-  import MsTablePagination from "../../common/pagination/TablePagination";
-  import MsTableHeader from "../../common/components/MsTableHeader";
-  import MsTableOperator from "../../common/components/MsTableOperator";
-  import MsDialogFooter from "../../common/components/MsDialogFooter";
-  import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
-  import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
-  import MsRolesTag from "../../common/components/MsRolesTag";
+import MsCreateBox from "../CreateBox";
+import MsTablePagination from "../../common/pagination/TablePagination";
+import MsTableHeader from "../../common/components/MsTableHeader";
+import MsTableOperator from "../../common/components/MsTableOperator";
+import MsDialogFooter from "../../common/components/MsDialogFooter";
+import MsTableOperatorButton from "../../common/components/MsTableOperatorButton";
+import {hasRole, listenGoBack, removeGoBackListener} from "@/common/js/utils";
+import MsRolesTag from "../../common/components/MsRolesTag";
+import {ROLE_ADMIN} from "@/common/js/constants";
 
-  export default {
-    name: "MsUser",
-    components: {
-      MsCreateBox,
-      MsTablePagination,
-      MsTableHeader,
-      MsTableOperator,
-      MsDialogFooter,
-      MsTableOperatorButton,
-      MsRolesTag
-    },
-    data() {
-      return {
-        queryPath: '/user/special/list',
-        deletePath: '/user/special/delete/',
-        createPath: '/user/special/add',
-        updatePath: '/user/special/update',
-        editPasswordPath: '/user/special/password',
-        result: {},
-        createVisible: false,
-        updateVisible: false,
-        editPasswordVisible: false,
-        btnAddRole: false,
-        multipleSelection: [],
-        userRole: [],
-        currentPage: 1,
-        pageSize: 5,
-        total: 0,
-        condition: {},
-        tableData: [],
-        form: {
-          roles: [{
-            id: ''
-          }]
-        },
-        checkPasswordForm: {},
-        ruleForm: {},
-        rule: {
-          id: [
-            {required: true, message: this.$t('user.input_id'), trigger: 'blur'},
-            {min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'},
-            {
-              required: true,
-              pattern: '^[^\u4e00-\u9fa5]+$',
-              message: this.$t('user.special_characters_are_not_supported'),
-              trigger: 'blur'
-            }
-          ],
-          name: [
-            {required: true, message: this.$t('user.input_name'), trigger: 'blur'},
-            {min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'},
-            {
-              required: true,
-              message: this.$t('user.special_characters_are_not_supported'),
-              trigger: 'blur'
-            }
-          ],
-          phone: [
-            {
-              required: false,
-              pattern: '^1(3|4|5|7|8)\\d{9}$',
-              message: this.$t('user.mobile_number_format_is_incorrect'),
-              trigger: 'blur'
-            }
-          ],
-          email: [
-            {required: true, message: this.$t('user.input_email'), trigger: 'blur'},
-            {
-              required: true,
-              pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-              message: this.$t('user.email_format_is_incorrect'),
-              trigger: 'blur'
-            }
-          ],
-          password: [
-            {required: true, message: this.$t('user.input_password'), trigger: 'blur'},
-            {
-              required: true,
-              pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-              message: this.$t('member.password_format_is_incorrect'),
-              trigger: 'blur'
-            }
-          ],
-          newpassword: [
-            {required: true, message: this.$t('user.input_password'), trigger: 'blur'},
-            {
-              required: true,
-              pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-              message: this.$t('member.password_format_is_incorrect'),
-              trigger: 'blur'
-            }
-          ]
-        }
-      }
-    },
-    activated() {
-      this.search();
-      this.getAllRole();
-    },
-    methods: {
-      create() {
-        this.createVisible = true;
-        this.getOrgList();
-        this.getWsList();
-        listenGoBack(this.handleClose);
+export default {
+  name: "MsUser",
+  components: {
+    MsCreateBox,
+    MsTablePagination,
+    MsTableHeader,
+    MsTableOperator,
+    MsDialogFooter,
+    MsTableOperatorButton,
+    MsRolesTag
+  },
+  data() {
+    return {
+      queryPath: '/user/special/list',
+      deletePath: '/user/special/delete/',
+      createPath: '/user/special/add',
+      updatePath: '/user/special/update',
+      editPasswordPath: '/user/special/password',
+      result: {},
+      createVisible: false,
+      updateVisible: false,
+      editPasswordVisible: false,
+      btnAddRole: false,
+      multipleSelection: [],
+      userRole: [],
+      currentPage: 1,
+      pageSize: 5,
+      total: 0,
+      condition: {},
+      tableData: [],
+      form: {
+        roles: [{
+          id: ''
+        }]
       },
-      edit(row) {
-        this.updateVisible = true;
-        this.form = Object.assign({}, row);
-        this.$get("/organization/list", response => {
-          this.$set(this.form, "orgList", response.data);
-        });
-        this.$get("/workspace/list", response => {
-          this.$set(this.form, "wsList", response.data);
-        });
-        if (row.id) {
-          this.$get('/userrole/all/' + encodeURIComponent(row.id), response => {
-            let data = response.data;
-            this.$set(this.form, "roles", data);
-          });
-        }
-        listenGoBack(this.handleClose);
-      },
-      editPassword(row) {
-        this.editPasswordVisible = true;
-        this.ruleForm = Object.assign({}, row);
-        listenGoBack(this.handleClose);
-      },
-      del(row) {
-        this.$confirm(this.$t('user.delete_confirm'), '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          cancelButtonText: this.$t('commons.cancel'),
-          type: 'warning'
-        }).then(() => {
-          this.result = this.$get(this.deletePath + encodeURIComponent(row.id), () => {
-            this.$success(this.$t('commons.delete_success'));
-            this.search();
-          });
-        }).catch(() => {
-          this.$info(this.$t('commons.delete_cancel'));
-        });
-      },
-      createUser(createUserForm) {
-        this.$refs[createUserForm].validate(valid => {
-          if (valid) {
-            this.result = this.$post(this.createPath, this.form, () => {
-              this.$success(this.$t('commons.save_success'));
-              this.search();
-              this.createVisible = false;
-            });
-          } else {
-            return false;
+      checkPasswordForm: {},
+      ruleForm: {},
+      rule: {
+        id: [
+          {required: true, message: this.$t('user.input_id'), trigger: 'blur'},
+          {min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'},
+          {
+            required: true,
+            pattern: '^[^\u4e00-\u9fa5]+$',
+            message: this.$t('user.special_characters_are_not_supported'),
+            trigger: 'blur'
           }
-        })
-      },
-      updateUser(updateUserForm) {
-        this.$refs[updateUserForm].validate(valid => {
-          if (valid) {
-            this.result = this.$post(this.updatePath, this.form, () => {
-              this.$success(this.$t('commons.modify_success'));
-              this.updateVisible = false;
-              this.search();
-            });
-          } else {
-            return false;
+        ],
+        name: [
+          {required: true, message: this.$t('user.input_name'), trigger: 'blur'},
+          {min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'},
+          {
+            required: true,
+            message: this.$t('user.special_characters_are_not_supported'),
+            trigger: 'blur'
           }
-        })
-      },
-      editUserPassword(editPasswordForm) {
-        this.$refs[editPasswordForm].validate(valid => {
-          if (valid) {
-            this.result = this.$post(this.editPasswordPath, this.ruleForm, () => {
-              this.$success(this.$t('commons.modify_success'));
-              this.editPasswordVisible = false;
-              this.search();
-              window.location.reload();
-            });
-          } else {
-            return false;
+        ],
+        phone: [
+          {
+            required: false,
+            pattern: '^1(3|4|5|7|8)\\d{9}$',
+            message: this.$t('user.mobile_number_format_is_incorrect'),
+            trigger: 'blur'
           }
-        })
-      },
-      search() {
-        this.result = this.$post(this.buildPagePath(this.queryPath), this.condition, response => {
-          let data = response.data;
-          this.total = data.itemCount;
-          this.tableData = data.listObject;
-          let url = "/user/special/user/role";
-          for (let i = 0; i < this.tableData.length; i++) {
-            if (this.tableData[i].id) {
-              this.$get(url + '/' + encodeURIComponent(this.tableData[i].id), result => {
-                let data = result.data;
-                let roles = data.roles;
-                // let userRoles = result.userRoles;
-                this.$set(this.tableData[i], "roles", roles);
-                this.$set(this.tableData[i], "isLdapUser", this.tableData[i].source === 'LDAP');
-              });
-            }
+        ],
+        email: [
+          {required: true, message: this.$t('user.input_email'), trigger: 'blur'},
+          {
+            required: true,
+            pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+            message: this.$t('user.email_format_is_incorrect'),
+            trigger: 'blur'
           }
-        })
-      },
-      handleClose() {
-        this.form = {roles: [{id: ''}]};
-        this.btnAddRole = false;
-        removeGoBackListener(this.handleClose);
-        this.editPasswordVisible =  false;
-        this.createVisible =  false;
-        this.updateVisible =  false;
-      },
-      changeSwitch(row) {
-        this.$post('/user/special/update_status', row, () => {
-          this.$success(this.$t('commons.modify_success'));
-        })
-      },
-      buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
-      },
-      handleSelectionChange(val) {
-        this.multipleSelection = val;
-      },
-      getOrgList() {
-        this.$get("/organization/list", response => {
-          this.$set(this.form, "orgList", response.data);
-        })
-      },
-      getWsList() {
-        this.$get("/workspace/list", response => {
-          this.$set(this.form, "wsList", response.data);
-        })
-      },
-      getAllRole() {
-        this.$get("/role/all", response => {
-          this.userRole = response.data;
-        })
-      },
-      addRole(validForm) {
-        this.$refs[validForm].validate(valid => {
-          if (valid) {
-            let roleInfo = {};
-            roleInfo.selects = [];
-            let ids = this.form.roles.map(r => r.id);
-            ids.forEach(id => {
-              roleInfo.selects.push(id);
-            })
-            let roles = this.form.roles;
-            roles.push(roleInfo);
-            if (this.form.roles.length > this.userRole.length - 1) {
-              this.btnAddRole = true;
-            }
-          } else {
-            return false;
+        ],
+        password: [
+          {required: true, message: this.$t('user.input_password'), trigger: 'blur'},
+          {
+            required: true,
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
+            message: this.$t('member.password_format_is_incorrect'),
+            trigger: 'blur'
           }
-        })
-      },
-      removeRole(item) {
-        let index = this.form.roles.indexOf(item);
-        if (index !== -1) {
-          this.form.roles.splice(index, 1)
-        }
-        if (this.form.roles.length < this.userRole.length) {
-          this.btnAddRole = false;
-        }
-      },
-      activeRole(roleInfo) {
-        return this.userRole.filter(function (role) {
-          let value = true;
-          if (!roleInfo.selects) {
-            return true;
+        ],
+        newpassword: [
+          {required: true, message: this.$t('user.input_password'), trigger: 'blur'},
+          {
+            required: true,
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
+            message: this.$t('member.password_format_is_incorrect'),
+            trigger: 'blur'
           }
-          if (roleInfo.selects.length === 0) {
-            value = true;
-          }
-          for (let i = 0; i < roleInfo.selects.length; i++) {
-            if (role.id === roleInfo.selects[i]) {
-              value = false;
-            }
-          }
-          return value;
-        })
+        ]
       }
     }
+  },
+  activated() {
+    this.search();
+    this.getAllRole();
+  },
+  methods: {
+    create() {
+      this.createVisible = true;
+      this.getOrgList();
+      this.getWsList();
+      listenGoBack(this.handleClose);
+    },
+    edit(row) {
+      this.updateVisible = true;
+      this.form = Object.assign({}, row);
+      this.$get("/organization/list", response => {
+        this.$set(this.form, "orgList", response.data);
+      });
+      this.$get("/workspace/list", response => {
+        this.$set(this.form, "wsList", response.data);
+      });
+      if (row.id) {
+        this.$get('/userrole/all/' + encodeURIComponent(row.id), response => {
+          let data = response.data;
+          this.$set(this.form, "roles", data);
+        });
+      }
+      listenGoBack(this.handleClose);
+    },
+    editPassword(row) {
+      this.editPasswordVisible = true;
+      this.ruleForm = Object.assign({}, row);
+      listenGoBack(this.handleClose);
+    },
+    del(row) {
+      this.$confirm(this.$t('user.delete_confirm'), '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        cancelButtonText: this.$t('commons.cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.result = this.$get(this.deletePath + encodeURIComponent(row.id), () => {
+          this.$success(this.$t('commons.delete_success'));
+          this.search();
+        });
+      }).catch(() => {
+        this.$info(this.$t('commons.delete_cancel'));
+      });
+    },
+    createUser(createUserForm) {
+      this.$refs[createUserForm].validate(valid => {
+        if (valid) {
+          this.result = this.$post(this.createPath, this.form, () => {
+            this.$success(this.$t('commons.save_success'));
+            this.search();
+            this.createVisible = false;
+          });
+        } else {
+          return false;
+        }
+      })
+    },
+    updateUser(updateUserForm) {
+      this.$refs[updateUserForm].validate(valid => {
+        if (valid) {
+          this.result = this.$post(this.updatePath, this.form, () => {
+            this.$success(this.$t('commons.modify_success'));
+            this.updateVisible = false;
+            this.search();
+          });
+        } else {
+          return false;
+        }
+      })
+    },
+    editUserPassword(editPasswordForm) {
+      this.$refs[editPasswordForm].validate(valid => {
+        if (valid) {
+          this.result = this.$post(this.editPasswordPath, this.ruleForm, () => {
+            this.$success(this.$t('commons.modify_success'));
+            this.editPasswordVisible = false;
+            this.search();
+            window.location.reload();
+          });
+        } else {
+          return false;
+        }
+      })
+    },
+    search() {
+      if (!hasRole(ROLE_ADMIN)) {
+        return;
+      }
+      this.result = this.$post(this.buildPagePath(this.queryPath), this.condition, response => {
+        let data = response.data;
+        this.total = data.itemCount;
+        this.tableData = data.listObject;
+        let url = "/user/special/user/role";
+        for (let i = 0; i < this.tableData.length; i++) {
+          if (this.tableData[i].id) {
+            this.$get(url + '/' + encodeURIComponent(this.tableData[i].id), result => {
+              let data = result.data;
+              let roles = data.roles;
+              // let userRoles = result.userRoles;
+              this.$set(this.tableData[i], "roles", roles);
+              this.$set(this.tableData[i], "isLdapUser", this.tableData[i].source === 'LDAP');
+            });
+          }
+        }
+      })
+    },
+    handleClose() {
+      this.form = {roles: [{id: ''}]};
+      this.btnAddRole = false;
+      removeGoBackListener(this.handleClose);
+      this.editPasswordVisible = false;
+      this.createVisible = false;
+      this.updateVisible = false;
+    },
+    changeSwitch(row) {
+      this.$post('/user/special/update_status', row, () => {
+        this.$success(this.$t('commons.modify_success'));
+      })
+    },
+    buildPagePath(path) {
+      return path + "/" + this.currentPage + "/" + this.pageSize;
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    getOrgList() {
+      this.$get("/organization/list", response => {
+        this.$set(this.form, "orgList", response.data);
+      })
+    },
+    getWsList() {
+      this.$get("/workspace/list", response => {
+        this.$set(this.form, "wsList", response.data);
+      })
+    },
+    getAllRole() {
+      this.$get("/role/all", response => {
+        this.userRole = response.data;
+      })
+    },
+    addRole(validForm) {
+      this.$refs[validForm].validate(valid => {
+        if (valid) {
+          let roleInfo = {};
+          roleInfo.selects = [];
+          let ids = this.form.roles.map(r => r.id);
+          ids.forEach(id => {
+            roleInfo.selects.push(id);
+          })
+          let roles = this.form.roles;
+          roles.push(roleInfo);
+          if (this.form.roles.length > this.userRole.length - 1) {
+            this.btnAddRole = true;
+          }
+        } else {
+          return false;
+        }
+      })
+    },
+    removeRole(item) {
+      let index = this.form.roles.indexOf(item);
+      if (index !== -1) {
+        this.form.roles.splice(index, 1)
+      }
+      if (this.form.roles.length < this.userRole.length) {
+        this.btnAddRole = false;
+      }
+    },
+    activeRole(roleInfo) {
+      return this.userRole.filter(function (role) {
+        let value = true;
+        if (!roleInfo.selects) {
+          return true;
+        }
+        if (roleInfo.selects.length === 0) {
+          value = true;
+        }
+        for (let i = 0; i < roleInfo.selects.length; i++) {
+          if (role.id === roleInfo.selects[i]) {
+            value = false;
+          }
+        }
+        return value;
+      })
+    }
   }
+}
 </script>
 
 <style scoped>