OA国际化开发配置指导

AgileBPM OA前端是基于Iview-pro 开发的，有两个版本，普通版本与国际化版本，国际化版本对所有内容做了国际化（除了前端用户输入的部分除外）

国际化开发与场景

通用国际化标签

在前端任意位置均可以直接使用该国际化标签 $t('') 来转义
如：js中 this.$t('page.common.search') ，html中 ｛{ $t('page.common.search') }｝

可以参考用户管理页 userList.vue,这里列出一部分

   <Button icon="md-add" type="primary" :to="{ name:'userManager_edit', params:{$add:true}｝" >&#123;{$t('page.common.add')}｝</Button>
   <ab-action-btn icon="md-trash" v-show="selectedData.length" :data="selectedData" 
   				url="/org/user/remove" postKey="id" :confimMsg="$t('page.org.confimDelUser')" :afterFn="searchAndClearSelected">｛{$t('page.common.batchDel')}｝</ab-action-btn>
   <ab-grid url="/org/user/listJson" ref="abGrid" v-model="selectedData" :searchParam="searchParam">
     <column type="selection" width="60" align="center"></column>
     <column :title="$t('page.org.name')" key="fullname" sort="fullname_" minWidth="100"></column>
     <column :title="$t('page.org.account')"  key="account" minWidth="100"></column>
     <column :title="$t('page.org.email')" key="email" minWidth="160"></column>
     <column :title="$t('page.org.mobile')" key="mobile" minWidth="120"></column>
     <column :title="$t('page.org.sex')" key="sex" width="80"></column>
     <column :title="$t('page.common.status')" key="status" width="100" 
     		val-text="{'0':'$t:page.common.disable','1':'$t:page.common.enable'}" 
     		val-style="{'0':'error','1':'success'}"></column>
     <column :title="$t('page.common.createTime')" key="createTime" date-format="yyyy-MM-dd HH:mm" width="150"></column>
     <column :title="$t('page.common.operate')" temp="action" fixed="right" width="120"></column>
     <template slot="action" scope="{row,index}">
     	<a :send-action="$t('page.common.del')" url="/org/user/remove?id={row.id}">｛{$t('page.common.del')}｝</a>
            <Divider type="vertical" />
        <router-link :to="{ name:'userManager_edit', params:row}">｛{$t('page.common.edit')}｝</router-link>
     </template>
</ab-grid>

国际化内容配置

菜单【内容管理】-【国际化】-【翻译管理】

在翻译管理中可以定义各个语言的国际化翻译
配置自定义对话框

别名: 生成国际化配置的JSON路径，不允许重复，前端配置该路径去做翻译，如：$t('page.common.startDate') 取值开始日期的各国语言
批量保存：点击批量保存会保存当前页所有的配置。
获取JS：可以在控制台下查看生成的完整国际化配置JSON

AgileBPM 国际化约定

AgileBPM 因为部分内容需要兼容后端设计平台（设计平台不支持国际化），所以部分模块有特殊约定处理

通用约定

翻译的别名默认为三级

前端页面规则为 page.业务.key
如：page.agency.status 为流程代理管理页，编辑页 “状态”字段的翻译
所有页面可共用的字段规则为：page.common.key
如：开始时间：page.common.startDate，搜索按钮page.common.search，操作、详情、返回、保存等可共用字段
后端枚举、状态等key转换规则为 模块.功能.KEY
如：flow.btn.agree 为流程模块按钮的翻译，也是流程状态的翻译

其他特殊翻译约定

资源菜单
菜单以menu.key为规则，key为菜单的资源别名，新加一个菜单需要在翻译管理中新增一条翻译记录。
系统树分类
系统树以sysTree.typeKey.key 为约定规则。如流程分类的办公类别：sysTree.flow.bg ，“flow”为该分类的key，“bg” 为具体分类项的key
数据字典
数据字典以 sysDic.dicKey.key 为约定规则。 “dicKey” 为字典的key，“key”为字典项的key
自定义对话框
自定义对话框规则为：dialog.dialogKey.字段名。 “dialogKey”为对话框别名，“字段名” 为对话框配置中“显示字段-字段名”的KEY值
自定义表单国际化
自定义表单是以组件形式混入到上层组件中的，所以可以像开发页面一样处理自定义表单。
但是我们建议自定义表单可以处理下表单模板，字段label直接生成国际化标签
如：字段Comment改为｛{$t('custForm.表单Key.字段Key')}｝。生成约定表单代码后，维护下对应翻译即可。

部分业务录入数据国际化？

如果某些特殊业务内容需要国际化，比如短讯公告，我们建议使用 $abT('$t:sys.公告.key') 去特殊处理。
$abT('') 是兼容式的翻译，如果内容以$t: 开头则进行翻译，如果不以此开头则返回原文。

新增一种语言

AgileBPM 的国际化支持前端引入国际化语言，也支持后端配置。但是后端的优先级会更高。
即：假如前端引入的国际化 JSON路径（page.common.xx）与后端配置的国际化（page.common）冲突，那么会以后端的为主。

新增语言步骤：

1. 在菜单【内容管理】-【国际化】-【语言管理】中新增语言，请务必注意语言别名

2. 引入Iview 本身国际化配置

文件路径 /agilebpm-oa-ui-gjh/src/i18n/locale.js

以繁体为例

首先引入 iView 语言包 import zhTWView from 'view-design/dist/locale/zh-TW';
然后合并语言包

export default {
    'zh-CN': Object.assign(zhCN, zhCNiView, layoutLocale['zh-CN']),
    'en-US': Object.assign(enUS, enUSiView, layoutLocale['en-US']),
    'ja-JP': Object.assign(jaJP, jaJPiView, layoutLocale['ja-JP']),
    'zh-TW': Object.assign(zhTWView) //繁体
};

代码： 'zh-TW': Object.assign(zhTWView)，就完成了语言的导入。
这里无需引入iview-admin相关的的语言包，因为这部分我们全部在后端配置了。所以会直接使用后端配置的语言包。

iview本身支持以下语言
简体中文（zh-CN），繁体中文（zh-TW），维吾尔语（zh-UG），英文（en-US），土耳其语（tr-TR），西班牙语（es-ES），日语（ja-JP），俄语（ru-RU），法语（fr-FR），，德语（de-DE），巴西葡萄牙语（pt-BR），葡萄牙语（pt-PT），韩语（ko-KR），越南语（vi-VN），瑞典语（sv-SE）等等。。。