国际化扩展使用

说明

i18n基础上扩展了国际化的使用,可结合系统设置中多平台语言功能,动态配置切换语言,不在受限于单一的本地配置

注意事项

• 动态配置的语言一般是和页面对应, 所以页面上也需要把 ThPageLangMixin.js 挂载到组件mixin中,且当前页需要在data中定义pageLangKeys属性,值为多语言平台中模板代码的值
• 请不要使用el. sys. 开头,el为element-ui组件插件, sys为系统预设

$lang(key: string, params: object, defaultText: string) 参数

• 第1个参数为key,多层时通过点获取, 例: $lang('sys.navbar.workbench')
• 第2个参数为动态模板变量对应的值,可以把动态模板中配置的{?}替换为params值. 例: $lang('sys.navbar.workbench', {name: '王五', age: '18''}) ; sys.navbar.workbench假设配置为 '{name}今年{age}了',那显示文字为 王五今年18了
• 第3个参数为模版变量未匹配到对应params中值时,将会使用defaultText当做默认值,如不填则为空字符串

示例 (示例中使用的key需要本地或动态配置已存在)

<template>
  <div class="p20">
    <th-filter>
      <template #left>
        <el-button type="primary" @click="onClickBtn('add')">{{ $lang('sys.common.add') }}</el-button>
      </template>

      <template #right>
        <el-input v-model="queryParam.promptKey" :placeholder="$lang('promptKey.common.param1')" maxlength="100" @keyup.enter.native="loadData(1)" />
        <el-input v-model="queryParam.promptCode" :placeholder="$lang('promptKey.common.param2')" maxlength="100" @keyup.enter.native="loadData(1)" />
        <el-input v-model="queryParam.description" :placeholder="$lang('promptKey.common.param3')" maxlength="120" @keyup.enter.native="loadData(1)" />
        <el-button class="ml10" type="primary" @click="searchQuery()">{{ $lang('sys.common.search') }}</el-button>
        <el-button @click="searchReset()">{{ $lang('sys.common.reset') }}</el-button>
      </template>
    </th-filter>

    <el-table
        v-loading="listLoading"
        :data="dataSource"
        border
        fit
        highlight-current-row
        header-row-class-name="base-table-header"
    >
      <el-table-column prop="promptKey" :label="$lang('promptKey.common.param4')" min-width="200" show-overflow-tooltip />
      <el-table-column prop="promptCode" :label="$lang('promptKey.common.param5')" min-width="300" show-overflow-tooltip />
      <el-table-column prop="description" :label="$lang('promptKey.common.param6')" min-width="300" show-overflow-tooltip />
      <el-table-column prop="origin" :label="$lang('promptKey.common.param7')" width="200" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.enableCustom === 1 ? 'success' : ''">{{ row.origin }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="c" width="200" align="center">
        <template slot-scope="{row}">
          <el-button type="text" @click="onClickBtn('edit', row)">{{ $lang('sys.common.edit') }}</el-button>
          <el-button type="text" @click="onClickBtn('del', row)">{{ $lang('sys.common.del') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <th-pagination :total="ipagination.total" :current.sync="ipagination.current" :page-size.sync="ipagination.pageSize" @pagination="loadData" />
  </div>
</template>

<script>
import { thListMixin } from '@/mixins/ThListMixin'
import { thPageLangMixin } from '@/mixins/ThPageLangMixin'

export default {
  name: 'PlatformMultilingual',
  mixins: [thListMixin, thPageLangMixin],
  data() {
    return {
      pageLangKeys: 'sysParamsPlatform',
      url: {
        list: '/authen/sys/langue/page',
        del: '/authen/sys/langue/del'
      }
    }
  },
  methods: {
    onClickBtn (type, row) {
      switch (type) {
        case 'add':
        case 'edit':
          this.$refs.refEdit.show(type, row)
          break

        case 'del':
          this.delFn(row.promptId)
          break
      }
    },
    delFn (promptId) {
      //  this.$lang('sys.common.del.msg', {prefix: '再次'})
      //  '{prefix}提醒您,确定删除吗?'     {prefix: '再次'}
      //  '再次提醒您,确定删除吗?'          {prefix: '再次'}
      this.$api.confirm(this.$lang('sys.common.del.msg', {prefix: '再次'})).then(() => {
        return this.$http.post(this.url.del, { promptId })
      }).then((res) => {
        this.$api.toast(res.msg)
        this.loadData()
      })
    }
  }
}
</script>