语言切换入口

2020-05-13 16:07:18 +08:00 · 2020-05-13 16:07:18 +08:00 · 3bb0c0eb1a
parent 05a2cf846e
commit 3bb0c0eb1a
8 changed files with 270 additions and 138 deletions
--- a/backend/src/main/java/io/metersphere/controller/UserController.java
+++ b/backend/src/main/java/io/metersphere/controller/UserController.java
@ -125,10 +125,9 @@ public class UserController {

    @PostMapping("/update/current")
    public UserDTO updateCurrentUser(@RequestBody User user) {
-        UserDTO userDTO = userService.getUserDTO(user.getId());
-        BeanUtils.copyProperties(user, userDTO);
-        SessionUtils.putUser(SessionUser.fromUser(userDTO));
        userService.updateUser(user);
+        UserDTO userDTO = userService.getUserDTO(user.getId());
+        SessionUtils.putUser(SessionUser.fromUser(userDTO));
        return SessionUtils.getUser();
    }

--- a/frontend/src/business/App.vue
+++ b/frontend/src/business/App.vue
@ -7,7 +7,15 @@
        <ms-top-menus/>
      </el-col>

-      <el-col :span="12">
+      <el-col :span="8">
+        <ms-header-org-ws/>
+      </el-col>
+
+      <el-col :span="2">
+        <ms-language-switch/>
+      </el-col>
+
+      <el-col :span="2">
        <ms-user/>
      </el-col>
    </el-row>
@ -20,6 +28,8 @@
  import MsTopMenus from "./components/common/head/HeaderTopMenus";
  import MsView from "./components/common/router/View";
  import MsUser from "./components/common/head/HeaderUser";
+  import MsHeaderOrgWs from "./components/common/head/HeaderOrgWs";
+  import MsLanguageSwitch from "./components/common/head/LanguageSwitch";

  export default {
    name: 'app',
@ -40,7 +50,7 @@
        window.location.href = "/login"
      });
    },
-    components: {MsUser, MsView, MsTopMenus},
+    components: {MsLanguageSwitch, MsUser, MsView, MsTopMenus, MsHeaderOrgWs},
    methods: {}
  }
 </script>
--- a/frontend/src/business/components/common/head/HeaderOrgWs.vue
+++ b/frontend/src/business/components/common/head/HeaderOrgWs.vue
@ -0,0 +1,132 @@
+<template>
+  <el-menu :unique-opened="true" mode="horizontal" router
+           class="header-user-menu align-right"
+           background-color="#2c2a48"
+           text-color="#fff">
+    <el-submenu index="1" popper-class="submenu"
+                v-permission="['org_admin', 'test_manager', 'test_user', 'test_viewer']">
+      <template v-slot:title>【{{$t('commons.organization')}}】{{currentOrganizationName}}</template>
+      <label v-for="(item,index) in organizationList" :key="index">
+        <el-menu-item @click="changeOrg(item)">{{item.name}}
+          <i class="el-icon-check"
+             v-if="item.id === currentUserInfo.lastOrganizationId"></i>
+        </el-menu-item>
+      </label>
+    </el-submenu>
+    <el-submenu index="2" popper-class="submenu" v-permission="['test_manager', 'test_user', 'test_viewer']">
+      <template v-slot:title>【{{$t('commons.workspace')}}】{{currentWorkspaceName}}</template>
+      <label v-for="(item,index) in workspaceList" :key="index">
+        <el-menu-item @click="changeWs(item)">
+          {{item.name}}
+          <i class="el-icon-check" v-if="item.id === currentUserInfo.lastWorkspaceId"></i>
+        </el-menu-item>
+      </label>
+    </el-submenu>
+  </el-menu>
+</template>
+
+<script>
+  import {
+    ROLE_ORG_ADMIN,
+    ROLE_TEST_MANAGER,
+    ROLE_TEST_USER,
+    ROLE_TEST_VIEWER,
+    WORKSPACE_ID
+  } from '../../../../common/js/constants';
+  import {getCurrentUser, hasRoles, saveLocalStorage} from "../../../../common/js/utils";
+
+  export default {
+    name: "MsHeaderOrgWs",
+    created() {
+      this.initMenuData();
+      this.getCurrentUserInfo();
+    },
+    data() {
+      return {
+        organizationList: [
+          {name: this.$t('organization.none')},
+        ],
+        workspaceList: [
+          {name: this.$t('workspace.none')},
+        ],
+        currentUserInfo: {},
+        currentUserId: getCurrentUser().id,
+        workspaceIds: [],
+        currentOrganizationName: this.$t('organization.select'),
+        currentWorkspaceName: this.$t('workspace.select')
+      }
+    },
+    computed: {
+      currentUser: () => {
+        return getCurrentUser();
+      }
+    },
+    methods: {
+      initMenuData() {
+        if (hasRoles(ROLE_ORG_ADMIN, ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
+          this.$get("/organization/list/userorg/" + this.currentUserId, response => {
+            let data = response.data;
+            this.organizationList = data;
+            let org = data.filter(r => r.id === this.currentUser.lastOrganizationId);
+            if (org.length > 0) {
+              this.currentOrganizationName = org[0].name;
+            }
+          });
+        }
+        if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
+          if (!this.currentUser.lastOrganizationId) {
+            return false;
+          }
+          this.$get("/workspace/list/orgworkspace/", response => {
+            let data = response.data;
+            if (data.length === 0) {
+              this.workspaceList = [{name: this.$t('workspace.none')}]
+            } else {
+              this.workspaceList = data;
+              let workspace = data.filter(r => r.id === this.currentUser.lastWorkspaceId);
+              if (workspace.length > 0) {
+                this.currentWorkspaceName = workspace[0].name;
+                localStorage.setItem(WORKSPACE_ID, workspace[0].id);
+              }
+            }
+          })
+        }
+      },
+      getCurrentUserInfo() {
+        this.$get("/user/info/" + this.currentUserId, response => {
+          this.currentUserInfo = response.data;
+        })
+      },
+      changeOrg(data) {
+        let orgId = data.id;
+        if (!orgId) {
+          return false;
+        }
+        this.$post("/user/switch/source/org/" + orgId, {}, response => {
+          saveLocalStorage(response);
+          this.$router.push('/');
+          window.location.reload();
+        });
+      },
+      changeWs(data) {
+        let workspaceId = data.id;
+        if (!workspaceId) {
+          return false;
+        }
+        this.$post("/user/switch/source/ws/" + workspaceId, {}, response => {
+          saveLocalStorage(response);
+          localStorage.setItem("workspace_id", workspaceId);
+          this.$router.push('/');
+          window.location.reload();
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .el-icon-check {
+    color: #44b349;
+    margin-left: 10px;
+  }
+</style>
--- a/frontend/src/business/components/common/head/HeaderUser.vue
+++ b/frontend/src/business/components/common/head/HeaderUser.vue
@ -1,79 +1,23 @@
 <template>
-  <el-row type="flex" justify="end">
-    <el-col :span="20">
-      <el-menu :unique-opened="true" mode="horizontal" router
-               class="header-user-menu align-right"
-               background-color="#2c2a48"
-               text-color="#fff">
-        <el-submenu index="1" popper-class="submenu"
-                    v-permission="['org_admin', 'test_manager', 'test_user', 'test_viewer']">
-          <template v-slot:title>【{{$t('commons.organization')}}】{{currentOrganizationName}}</template>
-          <label v-for="(item,index) in organizationList" :key="index">
-            <el-menu-item @click="changeOrg(item)">{{item.name}}
-              <i class="el-icon-check"
-                 v-if="item.id === currentUserInfo.lastOrganizationId"></i>
-            </el-menu-item>
-          </label>
-        </el-submenu>
-        <el-submenu index="2" popper-class="submenu" v-permission="['test_manager', 'test_user', 'test_viewer']">
-          <template v-slot:title>【{{$t('commons.workspace')}}】{{currentWorkspaceName}}</template>
-          <label v-for="(item,index) in workspaceList" :key="index">
-            <el-menu-item @click="changeWs(item)">
-              {{item.name}}
-              <i class="el-icon-check" v-if="item.id === currentUserInfo.lastWorkspaceId"></i>
-            </el-menu-item>
-          </label>
-        </el-submenu>
-      </el-menu>
-    </el-col>
-    <el-col :span="4">
-      <el-dropdown size="medium" @command="handleCommand" class="align-right">
-        <span class="dropdown-link">
-            {{currentUser.name}}<i class="el-icon-caret-bottom el-icon--right"/>
-        </span>
-        <template v-slot:dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item command="personal">{{$t('commons.personal_information')}}</el-dropdown-item>
-            <el-dropdown-item command="logout">{{$t('commons.exit_system')}}</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </el-col>
-  </el-row>
+  <el-dropdown size="medium" @command="handleCommand" class="align-right">
+    <span class="dropdown-link">
+        {{currentUser.name}}<i class="el-icon-caret-bottom el-icon--right"/>
+    </span>
+    <template v-slot:dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item command="personal">{{$t('commons.personal_information')}}</el-dropdown-item>
+        <el-dropdown-item command="logout">{{$t('commons.exit_system')}}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
 </template>

 <script>
-  import {
-    ROLE_ORG_ADMIN,
-    ROLE_TEST_MANAGER,
-    ROLE_TEST_USER,
-    ROLE_TEST_VIEWER,
-    TokenKey,
-    WORKSPACE_ID
-  } from '../../../../common/js/constants';
-  import {getCurrentUser, hasRoles, saveLocalStorage} from "../../../../common/js/utils";
+  import {TokenKey} from '../../../../common/js/constants';
+  import {getCurrentUser} from "../../../../common/js/utils";

  export default {
    name: "MsUser",
-    created() {
-      this.initMenuData();
-      this.getCurrentUserInfo();
-    },
-    data() {
-      return {
-        organizationList: [
-          {name: this.$t('organization.none')},
-        ],
-        workspaceList: [
-          {name: this.$t('workspace.none')},
-        ],
-        currentUserInfo: {},
-        currentUserId: getCurrentUser().id,
-        workspaceIds: [],
-        currentOrganizationName: this.$t('organization.select'),
-        currentWorkspaceName: this.$t('workspace.select')
-      }
-    },
    computed: {
      currentUser: () => {
        return getCurrentUser();
@ -95,64 +39,6 @@
          default:
            break;
        }
-      },
-      initMenuData() {
-        if (hasRoles(ROLE_ORG_ADMIN, ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
-          this.$get("/organization/list/userorg/" + this.currentUserId, response => {
-            let data = response.data;
-            this.organizationList = data;
-            let org = data.filter(r => r.id === this.currentUser.lastOrganizationId);
-            if (org.length > 0) {
-              this.currentOrganizationName = org[0].name;
-            }
-          });
-        }
-        if (hasRoles(ROLE_TEST_VIEWER, ROLE_TEST_USER, ROLE_TEST_MANAGER)) {
-          if (!this.currentUser.lastOrganizationId) {
-            return false;
-          }
-          this.$get("/workspace/list/orgworkspace/", response => {
-            let data = response.data;
-            if (data.length === 0) {
-              this.workspaceList = [{name: this.$t('workspace.none')}]
-            } else {
-              this.workspaceList = data;
-              let workspace = data.filter(r => r.id === this.currentUser.lastWorkspaceId);
-              if (workspace.length > 0) {
-                this.currentWorkspaceName = workspace[0].name;
-                localStorage.setItem(WORKSPACE_ID, workspace[0].id);
-              }
-            }
-          })
-        }
-      },
-      getCurrentUserInfo() {
-        this.$get("/user/info/" + this.currentUserId, response => {
-          this.currentUserInfo = response.data;
-        })
-      },
-      changeOrg(data) {
-        let orgId = data.id;
-        if (!orgId) {
-          return false;
-        }
-        this.$post("/user/switch/source/org/" + orgId, {}, response => {
-          saveLocalStorage(response);
-          this.$router.push('/');
-          window.location.reload();
-        });
-      },
-      changeWs(data) {
-        let workspaceId = data.id;
-        if (!workspaceId) {
-          return false;
-        }
-        this.$post("/user/switch/source/ws/" + workspaceId, {}, response => {
-          saveLocalStorage(response);
-          localStorage.setItem("workspace_id", workspaceId);
-          this.$router.push('/');
-          window.location.reload();
-        })
      }
    }
  }
@ -166,11 +52,6 @@
    line-height: 40px;
  }

-  .el-icon-check {
-    color: #44b349;
-    margin-left: 10px;
-  }
-
  .align-right {
    float: right;
  }
--- a/frontend/src/business/components/common/head/LanguageSwitch.vue
+++ b/frontend/src/business/components/common/head/LanguageSwitch.vue
@ -0,0 +1,97 @@
+<template>
+  <el-menu :unique-opened="true" class="header-user-menu align-right"
+           mode="horizontal"
+           background-color="#2c2a48"
+           text-color="#fff"
+           active-text-color="#fff"
+  >
+    <el-submenu index="1">
+      <template slot="title">
+        <font-awesome-icon class="icon global" :icon="['fas', 'globe']"/>
+        <span>{{language}}</span>
+      </template>
+      <el-menu-item @click="changeLanguage('zh_CN')">
+        简体中文<i class="el-icon-check" v-if="currentUserInfo.language==='zh_CN' || !currentUserInfo.language"/>
+      </el-menu-item>
+      <el-menu-item @click="changeLanguage('zh_TW')">
+        繁體中文<i class="el-icon-check" v-if="currentUserInfo.language==='zh_TW'"/>
+      </el-menu-item>
+      <el-menu-item @click="changeLanguage('en_US')">
+        English<i class="el-icon-check" v-if="currentUserInfo.language==='en_US'"/>
+      </el-menu-item>
+    </el-submenu>
+  </el-menu>
+</template>
+
+<script>
+  import {TokenKey, ZH_CN, ZH_TW, EN_US} from '../../../../common/js/constants';
+  import {getCurrentUser} from "../../../../common/js/utils";
+
+  export default {
+    name: "MsLanguageSwitch",
+    data() {
+      return {
+        currentUserInfo: {},
+        language: ''
+      };
+    },
+    created() {
+      let lang = this.currentUser().language;
+      this.currentUserInfo = this.currentUser();
+      if (!lang) {
+        lang = 'zh_CN';
+      }
+      this.$setLang(lang);
+      switch (lang) {
+        case ZH_CN:
+          this.language = '简体中文';
+          break;
+        case ZH_TW:
+          this.language = '繁體中文';
+          break;
+        case EN_US:
+          this.language = 'English';
+          break;
+        default:
+          this.language = '简体中文';
+          break;
+      }
+    },
+    methods: {
+      currentUser: () => {
+        return getCurrentUser();
+      },
+      changeLanguage(language) {
+        let user = {
+          id: this.currentUser().id,
+          language: language
+        };
+        this.result = this.$post("/user/update/current", user, response => {
+          this.$success(this.$t('commons.modify_success'));
+          localStorage.setItem(TokenKey, JSON.stringify(response.data));
+          window.location.reload();
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+  .el-icon-check {
+    color: #44b349;
+    margin-left: 10px;
+  }
+
+  .align-right {
+    float: right;
+  }
+
+  .icon {
+    width: 24px;
+  }
+
+  .global {
+    color: #fff;
+  }
+</style>
--- a/frontend/src/common/css/menu-header.css
+++ b/frontend/src/common/css/menu-header.css
@ -32,3 +32,7 @@
 .header-top-menus.el-menu--horizontal > li.is-active {
  background: #595591 !important;
 }
+
+.el-menu.el-menu--horizontal {
+   border-bottom: none;
+ }
--- a/frontend/src/common/js/constants.js
+++ b/frontend/src/common/js/constants.js
@ -13,3 +13,7 @@ export const REFRESH_SESSION_USER_URL = 'user/refresh';
 export const WORKSPACE = 'workspace';
 export const ORGANIZATION = 'organization';
 export const DEFAULT = 'default';
+
+export const ZH_CN = 'zh_CN';
+export const ZH_TW = 'zh_TW';
+export const EN_US = 'en_US';
--- a/frontend/src/login/Login.vue
+++ b/frontend/src/login/Login.vue
@ -104,8 +104,13 @@
      submit(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
-            this.$post("signin", this.form, (response) => {
+            this.$post("signin", this.form, response => {
              saveLocalStorage(response);
+              let language = response.data.language;
+              if (!language) {
+                language = 'zh_CN';
+              }
+              this.$setLang(language);
              window.location.href = "/"
            });
          } else {