JeecgBoot ant-design-vue 国际化(菜单以及数据库业务实现)

参考:https://blog.csdn.net/qq727013465/article/details/117264460

当前版本: jeecgboot 2.4.6  

需求: 中文 繁体中文 英文

切换语言:

修改 components/setting/SettingDrawer.vue

<!-- 增加下拉选择框 -->
        <a-list-item>
          <a-list-item-meta>
            <div slot="title">语言设置</div>
          </a-list-item-meta>
          <a-select size="small" style="width: 80px;" :defaultValue="$t('langValue')" @change="handleLanguageChange">
            <a-select-option value="zh-CN">中文</a-select-option>
            <a-select-option value="zh-TW">繁体中文</a-select-option>
            <a-select-option value="en-US">English</a-select-option>
          </a-select>
        </a-list-item>



//script  中的  methods 里增加 handleLanguageChange 切换语言的事件
      handleLanguageChange(lang){
        //this.$i18n.locale = lang; //改变当前语言  动态无感 切换，，但是有部分内容 不生效，估计我
        this.$ls.set("language", lang);//将lang 语言存在localStorage里，
        //本来想做成，页面不刷新语言自动切换，但是效果不理想，有的内容切换不成功，于是就 做刷新页面操作，这里只缓存语言
        window.location.reload()
      }

组件国际化:

参考LocaleProvider 国际化

修改 App.vue 文件

  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import enUS from 'ant-design-vue/lib/locale-provider/en_US'
  import enquireScreen from '@/utils/device'

  export default {
    data () {
      return {
        locale: zhCN,
      }
    },
    created () {
      let that = this
      enquireScreen(deviceType => {
        // tablet
        if (deviceType === 0) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        // mobile
        else if (deviceType === 1) {
          that.$store.commit('TOGGLE_DEVICE', 'mobile')
          that.$store.dispatch('setSidebar', false)
        }
        else {
          that.$store.commit('TOGGLE_DEVICE', 'desktop')
          that.$store.dispatch('setSidebar', true)
        }

      })

      //获取本地缓存中的语言配置，并切换
      let language = this.$ls.get("language");
      if( language == 'zh-CN'){
        this.locale =  zhCN
      } else if(language == 'en-US'){
        this.locale = enUS
      }
    }
  }

页面文案国际化

(1) 安装 vue-i18n：

npm install vue-i18n

(2) 在 src/components/lang/ 中创建语言js， en-US.js 、 zh-CN.js 和zh-TW.js

// en-US.js
export default {
  langValue: 'en-US',
  lang: 'English',
  age:'age',
  sex:'sex',
  welcome:'welcome',
  sexText:{
    typeDict:{
      '1': 'female',
      '2': 'male',
      'null':''
    }
  },
}

// zh-CN.js
export default {
  langValue: 'zh-CN',
  lang: '中文',
  age:'年龄',
  sex:'性别',
  welcome:'欢迎您',
  sexText:{
    typeDict:{
      '1': '女',
      '2': '男',
      'null':''
    }
  },
}

// zh-CN.js
export default {
  langValue: 'zh-TW',
  lang: '繁体中文',
  age:'年龄',
  sex:'性别',
  welcome:'欢迎您',
  sexText:{
    typeDict:{
      '1': '女',
      '2': '男',
      'null':''
    }
  }
}

(3) 在main.js实例化组件

//i18n设置
import VueI18n from 'vue-i18n'
import enLocale from '@/components/lang/en-US'
import zhLocale from '@/components/lang/zh-CN'
import twLocale from '@/components/lang/zh-TW'
Vue.use(VueI18n)


// 注册i18n实例并引入语言文件，文件格式等下解析

const messages = {
  'en-US': {
    ...enLocale,
  },
  'zh-CN': {
    ...zhLocale,
  },
  'zh-TW': {
    ...twLocale,
  }
}

const i18n = new VueI18n({
  locale: Vue.ls.get("language", "zh-CN"),
  messages
})

SSO.init(() => {
  main()
})
function main() {
  new Vue({
    router,
    store,
    i18n, //此处添加
    mounted () {
      store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
    },
    render: h => h(App)
  }).$mount('#app')
}

在组件中这样使用

<template>
    <div>
        {{ $t('lang') }} 
    </div>
</template>

如果想传参，例如zh-CN.js中这样配置：

welcome: "你好，{name}"

页面组件中这样使用：

<template>
    <div>
        {{ $tc('welcome', {'name':'jeecg' }) }} 
    </div>
</template>

页面输出 ： 你好，jeecg

常用方法：

$t(path, locale, option) // text 文本替换，locale可单独设置语言，option可传参数替换模板
$tc(path, choice, locale, option) // text+choice 比$t多一个choice，可以选择模板内容（模板内容间用 | 分隔，如 香蕉|苹果|梨，最多只能使用三个选项，下标从0开始，当选项为2个时下标从1开始~~）
$te(path) // text+exist 判断当前语言包中path是否存在
$d(number|Date, path, locale) // date 时间格式化
$n(number, path, locale) // number  数字格式化（货币等）

// 更多细节参考官方文档：https://kazupon.github.io/vue-i18n/api/#vue-injected-methods

如果某些js中含有字符需要切换语言（包括rules），需要写在computed中。

computed: {
    rules1 () {
      return {
        username: [
          {required: true, message: this.$t('username.required'), trigger: 'blur'}
        ]
      }
    }
  }

菜单以及数据库业务

创建数据字段翻译表sys_translate,可以扩展语种

src\store\modules\user.js 获取用户信息时获的翻译配置并缓存

Vue.ls.set(UI_CACHE_TRANSLATE_DATA, response.result.sysTranslateItems, 7 * 24 * 60 * 60 * 1000)

 api/api.js 添加公共方法读取多语言结果

//从缓存中获取多语言配置
/*
  tableName: 关联表名
  id: 关联ID
  language: 语种
  defaultValue: 未配置时返回默认值
 */
function getTranslateItemsFromCache(tableName,id,language,defaultValue) {
  let translateItems = Vue.ls.get(UI_CACHE_TRANSLATE_DATA);
  let res = defaultValue;

  //翻译
  translateItems.some(function(item){
    if(item.relateTable == tableName && item.relateId == id){
      if( language == 'zh-CN'){
        res = item.chinese;
      } else if(language == 'en-US'){
        res = item.english;
      } else if(language == 'zh-TW'){
        res = item.taiwan;
      }
      return true;
    }
  });
  return res;
}

菜单切换语言

 //获取缓存语种
 let language = Vue.ls.get("language");
 menuData.forEach((item, index) => {
              let temp = getTranslateItemsFromCache('sys_permission',item["id"],language,'')
              if(temp!=''){
                item["meta"].title = temp;
              }
              if (item["children"]) {
                let hasChildrenMenu = item["children"].filter((i) => {
                  let temp1 = getTranslateItemsFromCache('sys_permission',i["id"],language,'')
                  if(temp1!='') {
                    i["meta"].title = temp1;
                  }
                  return !i.hidden || i.hidden == false
                })
                if (hasChildrenMenu == null || hasChildrenMenu.length == 0) {
                  item["hidden"] = true
                }
              }
            })

效果

 翻译表维护界面

 核心代码

 @Override
    public List<Map<String, String>>  queryAllList(SysTranslateVO sysTranslateVo) {
        if(sysTranslateVo.getRelateTable()!=null&&!sysTranslateVo.getRelateTable().equals("")){
            String cloumnName = "";
            if(sysTranslateVo.getRelateTable().equals("testad")){
                cloumnName = "text";
            }else if(sysTranslateVo.getRelateTable().equals("sys_permission")){
                cloumnName = "name";
            } else if(sysTranslateVo.getRelateTable().equals("sys_role")) {
                cloumnName = "role_name";
            }
            if(!StringUtils.isEmpty(sysTranslateVo.getKeyword())){
                return sysTranslateMapper.queryAllListByKeyword(sysTranslateVo.getRelateTable(),cloumnName,sysTranslateVo.getKeyword());
            }
            return sysTranslateMapper.queryAllList(sysTranslateVo.getRelateTable(),cloumnName);
        }
        return null;
    }



//通过表名+字段名查询多语言配置
    @Deprecated
    @Select("select t.id as \"relateId\",\"${table}\" as \"relateTable\",t.${key} as \"text\",s.id,s.chinese,s.taiwan,s.english " +
            " from ${table}  t left join sys_translate s on s.relate_id =t.id and s.relate_table = \"${table}\"")
    public List<Map<String, String>> queryAllList(@Param("table") String table, @Param("key") String key);

    //通过表名+字段名+关键字查询多语言配置
    @Deprecated
    @Select("select t.id as \"relateId\",\"${table}\" as \"relateTable\",t.${key} as \"text\",s.id,s.chinese,s.taiwan,s.english " +
            " from ${table}  t left join sys_translate s on s.relate_id =t.id and s.relate_table = \"${table}\" where t.${key} like \"%${keyword}%\"")
    public List<Map<String, String>> queryAllListByKeyword(@Param("table") String table, @Param("key") String key,@Param("keyword") String keyword);