feat: add international language support for advanced forms page; 🌟

新增:高级表单页增加国际化语言支持;
master
iczer 5 years ago
parent d58dafeda9
commit 75921a02ae
  1. 21
      src/pages/form/advancedForm/AdvancedForm.vue
  2. 35
      src/pages/form/advancedForm/RepositoryForm.vue
  3. 35
      src/pages/form/advancedForm/TaskForm.vue
  4. 51
      src/pages/form/advancedForm/UserForm.vue
  5. 34
      src/pages/form/advancedForm/i18n-repository.js
  6. 34
      src/pages/form/advancedForm/i18n-task.js
  7. 49
      src/pages/form/advancedForm/i18n-user.js
  8. 25
      src/pages/form/advancedForm/i18n.js

@ -1,16 +1,16 @@
<template>
<div>
<a-card class="card" title="仓库管理" :bordered="false">
<a-card class="card" :title="$t('repository')" :bordered="false">
<repository-form ref="repository" :showSubmit="false" />
</a-card>
<a-card class="card" title="任务管理" :bordered="false">
<a-card class="card" :title="$t('task')" :bordered="false">
<task-form ref="task" :showSubmit="false" />
</a-card>
<a-card title="用户管理" :bordered="false">
<table-form />
<a-card :title="$t('user')" :bordered="false">
<user-form />
</a-card>
<footer-tool-bar>
<a-button type="primary" @click="validate" :loading="loading">提交</a-button>
<a-button type="primary" @click="validate" :loading="loading">{{$t('submit')}}</a-button>
</footer-tool-bar>
</div>
</template>
@ -18,18 +18,23 @@
<script>
import RepositoryForm from './RepositoryForm'
import TaskForm from './TaskForm'
import TableForm from './TableForm'
import UserForm from './UserForm'
import FooterToolBar from '../../../components/tool/FooterToolBar'
export default {
name: 'AdvancedForm',
components: {FooterToolBar, TableForm, TaskForm, RepositoryForm},
components: {FooterToolBar, UserForm, TaskForm, RepositoryForm},
i18n: require('./i18n'),
data () {
return {
desc: '高级表单常见于一次性输入和提交大批量数据的场景。',
loading: false
}
},
computed: {
desc() {
return this.$t('desc')
}
},
methods: {
validate () {
this.$refs.repository.form.validateFields((err, values) => {

@ -3,29 +3,29 @@
<a-row class="form-row">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="仓库名"
:label="$t('name')"
fieldDecoratorId="repository.name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}"
>
<a-input placeholder="请输入仓库名称" />
<a-input :placeholder="$ta('input|name')" />
</a-form-item>
</a-col>
<a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="仓库域名"
:label="$t('domain')"
fieldDecoratorId="repository.domain"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|domain'), whitespace: true}, {validator: validate}]}"
>
<a-input addonBefore="http://" addonAfter=".github.io" placeholder="请输入"/>
<a-input addonBefore="http://" addonAfter=".github.io" :placeholder="$ta('input|domain')"/>
</a-form-item>
</a-col>
<a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="仓库管理员"
:label="$t('manager')"
fieldDecoratorId="repository.manager"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员'}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|manager')}]}"
>
<a-select placeholder="请选择管理员">
<a-select :placeholder="$ta('select|manager')">
<a-select-option value="王同学">王同学</a-select-option>
<a-select-option value="李同学">李同学</a-select-option>
<a-select-option value="黄同学">黄同学</a-select-option>
@ -36,11 +36,11 @@
<a-row class="form-row">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="审批人"
:label="$t('approval')"
fieldDecoratorId="repository.auditor"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员'}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|approval')}]}"
>
<a-select placeholder="请选择审批员">
<a-select :placeholder="$ta('select|approval')">
<a-select-option value="王晓丽">王晓丽</a-select-option>
<a-select-option value="李军">李军</a-select-option>
</a-select>
@ -48,20 +48,20 @@
</a-col>
<a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="生效日期"
:label="$t('date')"
fieldDecoratorId="repository.effectiveDate"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|date')}]}"
>
<a-range-picker style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="仓库类型"
:label="$t('type')"
fieldDecoratorId="repository.type"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|type')}]}"
>
<a-select placeholder="请选择仓库类型">
<a-select :placeholder="$ta('select|type')">
<a-select-option value="公开">公开</a-select-option>
<a-select-option value="私密">私密</a-select-option>
</a-select>
@ -78,6 +78,7 @@
export default {
name: 'RepositoryForm',
props: ['showSubmit'],
i18n: require('./i18n-repository'),
methods: {
handleSubmit (e) {
e.preventDefault()

@ -3,29 +3,29 @@
<a-row class="form-row">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="任务名"
:label="$t('name')"
fieldDecoratorId="task.name"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|name'), whitespace: true}]}"
>
<a-input placeholder="请输入任务名称" />
<a-input :placeholder="$ta('input|name')" />
</a-form-item>
</a-col>
<a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="任务描述"
:label="$t('describe')"
fieldDecoratorId="task.description"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('input|describe'), whitespace: true}]}"
>
<a-input placeholder="请输入任务描述"/>
<a-input :placeholder="$ta('input|describe')"/>
</a-form-item>
</a-col>
<a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="执行人"
:label="$t('executor')"
fieldDecoratorId="task.executor"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|executor')}]}"
>
<a-select placeholder="请选择执行人">
<a-select :placeholder="$ta('select|executor')">
<a-select-option value="黄丽丽">黄丽丽</a-select-option>
<a-select-option value="李大刀">李大刀</a-select-option>
</a-select>
@ -35,11 +35,11 @@
<a-row class="form-row">
<a-col :lg="6" :md="12" :sm="24">
<a-form-item
label="责任人"
:label="$t('duty')"
fieldDecoratorId="task.manager"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|duty')}]}"
>
<a-select placeholder="请选择责任人">
<a-select :placeholder="$ta('select|duty')">
<a-select-option value="王伟">王伟</a-select-option>
<a-select-option value="李红军">李红军</a-select-option>
</a-select>
@ -47,20 +47,20 @@
</a-col>
<a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
<a-form-item
label="提醒时间"
:label="$t('time')"
fieldDecoratorId="task.time"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|time')}]}"
>
<a-time-picker style="width: 100%" />
</a-form-item>
</a-col>
<a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
<a-form-item
label="任务类型"
:label="$t('type')"
fieldDecoratorId="task.type"
:fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}"
:fieldDecoratorOptions="{rules: [{ required: true, message: $ta('select|type')}]}"
>
<a-select placeholder="请选择任务类型">
<a-select :placeholder="$ta('select|type')">
<a-select-option value="定时执行">定时执行</a-select-option>
<a-select-option value="周期执行">周期执行</a-select-option>
</a-select>
@ -77,6 +77,7 @@
export default {
name: 'TaskForm',
props: ['showSubmit'],
i18n: require('./i18n-task'),
methods: {
handleSubmit (e) {
e.preventDefault()

@ -1,11 +1,11 @@
<template>
<form :autoFormCreate="(form) => this.form = form">
<a-table
:columns="columns"
:columns="dataColumns"
:dataSource="dataSource"
:pagination="false"
>
<template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record">
<template v-for="(col, i) in ['name', 'number', 'department']" :slot="col" slot-scope="text, record">
<a-input
:key="col"
v-if="record.editable"
@ -19,28 +19,28 @@
<template slot="operation" slot-scope="text, record">
<template v-if="record.editable">
<span v-if="record.isNew">
<a @click="saveRow(record.key)">添加</a>
<a @click="saveRow(record.key)">{{$t('add')}}</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行?" @confirm="remove(record.key)">
<a>删除</a>
<a-popconfirm :title="$t('deleteConfirm')" @confirm="remove(record.key)">
<a>{{$t('delete')}}</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="saveRow(record.key)">保存</a>
<a @click="saveRow(record.key)">{{$t('save')}}</a>
<a-divider type="vertical" />
<a @click="cancle(record.key)">取消</a>
<a @click="cancle(record.key)">{{$t('cancel')}}</a>
</span>
</template>
<span v-else>
<a @click="toggle(record.key)">编辑</a>
<a @click="toggle(record.key)">{{$t('edit')}}</a>
<a-divider type="vertical" />
<a-popconfirm title="是否要删除此行?" @confirm="remove(record.key)">
<a>删除</a>
<a-popconfirm :title="$t('deleteConfirm')" @confirm="remove(record.key)">
<a>{{$t('delete')}}</a>
</a-popconfirm>
</span>
</template>
</a-table>
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMeber">新增成员</a-button>
<a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">{{$t('newMember')}}</a-button>
</form>
</template>
@ -55,10 +55,10 @@ const columns = [
},
{
title: '工号',
dataIndex: 'workId',
key: 'workId',
dataIndex: 'number',
key: 'number',
width: '20%',
scopedSlots: { customRender: 'workId' }
scopedSlots: { customRender: 'number' }
},
{
title: '所属部门',
@ -69,7 +69,7 @@ const columns = [
},
{
title: '操作',
key: 'action',
key: 'operation',
scopedSlots: { customRender: 'operation' }
}
]
@ -78,43 +78,52 @@ const dataSource = [
{
key: 1,
name: '小明',
workId: '001',
number: '001',
editable: false,
department: '行政部'
},
{
key: 2,
name: '李莉',
workId: '002',
number: '002',
editable: false,
department: 'IT部'
},
{
key: 3,
name: '王小帅',
workId: '003',
number: '003',
editable: false,
department: '财务部'
}
]
export default {
name: 'TableForm',
name: 'UserForm',
i18n: require('./i18n-user'),
data () {
return {
columns,
dataSource
}
},
computed: {
dataColumns() {
return this.columns.map(column => {
column.title = this.$t('table.' + column.key)
return column
})
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
},
newMeber () {
newMember () {
this.dataSource.push({
key: this.dataSource.length + 1,
name: '',
workId: '',
number: '',
department: '',
editable: true,
isNew: true

@ -0,0 +1,34 @@
module.exports = {
messages: {
CN: {
input: '请输入',
select: '请选择',
name: '仓库名',
domain: '仓库域名',
manager: '仓库管理员',
approval: '审批人员',
date: '生效日期',
type: '仓库类型'
},
HK: {
input: '請輸入',
select: '請選擇',
name: '倉庫名',
domain: '倉庫域名',
manager: '倉庫管理員',
approval: '審批人員',
date: '生效日期',
type: '倉庫類型',
},
US: {
input: 'Please enter ',
select: 'Please select ',
name: 'Repository Name',
domain: 'Repository Domain',
manager: 'Repository Manager',
approval: 'Approval Person',
date: 'Effective Date',
type: 'Repository Type',
}
}
}

@ -0,0 +1,34 @@
module.exports = {
messages: {
CN: {
input: '请输入',
select: '请选择',
name: '任务名',
describe: '任务描述',
executor: '执行人',
duty: '责任人',
time: '提醒时间',
type: '任务类型',
},
HK: {
input: '請輸入',
select: '請選擇',
name: '任務名',
describe: '任務描述',
executor: '執行人',
duty: '責任人',
time: '提醒時間',
type: '任務類型',
},
US: {
input: 'Please enter ',
select: 'Please select ',
name: 'Task Name',
describe: 'Task Describe',
executor: 'Executor',
duty: 'Duty Person',
time: 'Reminder Time',
type: 'Task Type',
}
}
}

@ -0,0 +1,49 @@
module.exports = {
messages: {
CN: {
add: '添加',
delete: '删除',
save: '保存',
cancel: '取消',
edit: '编辑',
deleteConfirm: '是否要删除此行?',
newMember: '新增成员',
table: {
name: '成员姓名',
number: '工号',
department: '所属部门',
operation: '操作',
}
},
HK: {
add: '添加',
delete: '刪除',
save: '保存',
cancel: '取消',
edit: '編輯',
deleteConfirm: '是否要刪除此行?',
newMember: '新增成員',
table: {
name: '成員姓名',
number: '工號',
department: '所屬部門',
operation: '操作',
}
},
US: {
add: 'add',
delete: 'delete',
save: 'save',
cancel: 'cancel',
edit: 'edit',
deleteConfirm: 'Confirm to delete this row?',
newMember: 'new member',
table: {
name: 'Member Name',
number: 'Job Number',
department: 'Department',
operation: 'Operation',
}
}
}
}

@ -0,0 +1,25 @@
module.exports = {
messages: {
CN: {
desc: '高级表单常见于一次性输入和提交大批量数据的场景。',
repository: '仓库管理',
task: '任务管理',
user: '用户管理',
submit: '提交'
},
HK: {
desc: '高級表單常見於一次性輸入和提交大批量數據的場景。',
repository: '倉庫管理',
task: '任務管理',
user: '用戶管理',
submit: '提交'
},
US: {
desc: 'Advanced forms are common in scenarios where large quantities of data are entered and submitted at one time.',
repository: 'Repository Manage',
task: 'Task Manage',
user: 'User Manage',
submit: 'submit'
}
}
}
Loading…
Cancel
Save