HOS基础开发平台

# 国际化

# 实现逻辑

国际化页面元素信息内置$lang，进入页面时会根据当前页面编码获取该路由下所有页面元素（包含按钮、标题、label等）的集合及公共元素集合。

使用时只需在国际化-页面国际化中维护所属菜单页面的元素信息，并在前端开发中直接使用$lang获取对应key的值即可

# 使用说明

以 页面国际化 vue页面为例：

<template>
  <div class="left-tree-search">
    <hos-input
        :placeholder="$lang('common.placeholder.key')"
        suffix-icon="hos-icom-find"
        v-model="filterText"
    ></hos-input>
    <hos-button-group class="hos">
      <hos-button
          @click="$refs.tree.expandAll()"
          icon="hos-icon-folder-opened"
      >{{ $lang("operation.expand") }}</hos-button
      >
      <hos-button
          @click="$refs.tree.collapseAll()"
          icon="hos-icon-folder"
      >{{ $lang("operation.collapse") }}
      </hos-button>
    </hos-button-group>
  </div>
</template>

this.$message.warning(this.$lang("common.confirm.menu"));

# 国际化组件

平台提供表格数据国际化翻译组件，可以对单行数据需要做国际化的字段翻译不同语言的值

国际化翻译组件

# 组件使用说明

<hos-button
    v-show="showI18n"
    @click="handleI18n()"
    v-has-permi="{
        key: 'i18n:language:list:internation'
    }"
>
    {{ $t("i18nManage.internation") }}
</hos-button>

// 多选框选中数据
changeSelection(selection) {
    // this.ids为主键。如果使用id作为主键。
    // this.ids = selection.map((item) => item.id)
    // 如果该模块为联合主键。则ids集合是由联合主键值用逗号,拼接而成。（前提是表格行对象必须要返回联合主键的值用以拼接）
    this.ids = selection.map((item) => item.code+","+item.orgCode)
    this.names = selection.map((item) => item.name)
},
handleI18n() {
    if (this.ids.length != 1) {
        this.$message.warning(this.$t("common.confirm.once"));
        return;
    }
    this.$store.commit("OPEN_DIALOG", {
        component: require("@base/components/i18n/index.vue").default,
        _uid: "i18nDialog",
        props: {
            id: this.ids[0],
            tbCode: "i18nLanguage",
        },
    });
}

入参为id、tbCode。其中id为表格行数据id；tbCode为国际化-表结构管理中的表编码，由后端开发配置后指定提供。

TIP

在包含微前端的项目中，修改当前语言后，当前语言会被传递至子应用。对收到的参数作何处理由子应用决定。

# 获取页面元素接口的说明

获取页面元素接口入参为页面编码：resourceCode，页面类型: pageType ，均为非必填，支持不同页面类型调用同一个接口时，均可获取到对应页面的页面元素信息。 resourceCode为空时只返回公共元素
（1）当页面类型是 pageType=resource 时，表示当前页面属于动态路由菜单。
（2）当页面类型是 pageType=inline 时，表示当前页面属于内联菜单。
（3）当页面类型是 pageType=page 时，表示当前页面属于静态路由菜单或自定义页面，为空时默认为此类型。

// 通过示例说明不同场景调用页面元素的使用方式
// 场景一：如果是动态路由菜单，代码中已做了全局的入参处理。
const pageCode = to?.meta?.pageCode
await getLangData({ resourceCode: pageCode || to.name, 
                    pageType: pageCode ? 'page' : 'resource' })
// 场景二：如果是内联菜单，需要在页面中手动调用获取页面元素的接口，并传入参数。
// resourceCode 为当前内联菜单的全局唯一编码，pageType="inline"。
// 接口调用
const { code, data } = this.$api('base.index.languageData', { resourceCode: 'testInline' ,
    pageType: "inline"})
// 接口定义
export const languageData = (params) => {
    return {
        url: '/i18n/element/get-elements',
        method: 'get',
        params: params
    }
}
// 场景三：如果是静态路由菜单或自定义页面，需要在静态路由中的meta属性中配置 pageCode（全局唯一） 的值,
// 如果没有配置pageCode，则会取其name属性的值，这一点也是在全局做了处理，
    path: 'export-column', 
    name: 'export-column',
    meta: { 
            title: i18n.t('列管理') ,
            pageCode: "export-manage"
           },
    component: () => import('@base/views/excel-manage/export-manage/export-column.vue')

← 环境变量 →