Skip to content

Commit c5cde73

Browse files
msgill2017sendya
msgill2017
authored and
sendya
committed
refactor 'views-form-basicform' from hardcoded to locale support
1 parent b954312 commit c5cde73

File tree

7 files changed

+163
-30
lines changed

7 files changed

+163
-30
lines changed

‎src/locales/lang/en-US.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import momentEU from 'moment/locale/eu'
33
import menu from './en-US/menu'
44
import setting from './en-US/setting'
55
import dashboard from './en-US/dashboard'
6+
import form from './en-US/form'
67

78
const components = {
89
antLocale: antdEnUS,
@@ -19,5 +20,6 @@ export default {
1920
...components,
2021
...menu,
2122
...setting,
22-
...dashboard
23+
...dashboard,
24+
...form
2325
}

‎src/locales/lang/en-US/form.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import basicForm from './form/basicForm'
2+
3+
export default {
4+
...basicForm
5+
}

‎src/locales/lang/en-US/form/basicForm.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
export default {
2+
'form.basic-form.basic.title': 'Basic form',
3+
'form.basic-form.basic.description':
4+
'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
5+
'form.basic-form.title.label': 'Title',
6+
'form.basic-form.title.placeholder': 'Give the target a name',
7+
'form.basic-form.title.required': 'Please enter a title',
8+
'form.basic-form.date.label': 'Start and end date',
9+
'form.basic-form.placeholder.start': 'Start date',
10+
'form.basic-form.placeholder.end': 'End date',
11+
'form.basic-form.date.required': 'Please select the start and end date',
12+
'form.basic-form.goal.label': 'Goal description',
13+
'form.basic-form.goal.placeholder': 'Please enter your work goals',
14+
'form.basic-form.goal.required': 'Please enter a description of the goal',
15+
'form.basic-form.standard.label': 'Metrics',
16+
'form.basic-form.standard.placeholder': 'Please enter a metric',
17+
'form.basic-form.standard.required': 'Please enter a metric',
18+
'form.basic-form.client.label': 'Client',
19+
'form.basic-form.label.tooltip': 'Target service object',
20+
'form.basic-form.client.placeholder':
21+
'Please describe your customer service, internal customers directly @ Name / job number',
22+
'form.basic-form.client.required': 'Please describe the customers you serve',
23+
'form.basic-form.invites.label': 'Inviting critics',
24+
'form.basic-form.invites.placeholder':
25+
'Please direct @ Name / job number, you can invite up to 5 people',
26+
'form.basic-form.weight.label': 'Weight',
27+
'form.basic-form.weight.placeholder': 'Please enter weight',
28+
'form.basic-form.public.label': 'Target disclosure',
29+
'form.basic-form.label.help': 'Customers and invitees are shared by default',
30+
'form.basic-form.radio.public': 'Public',
31+
'form.basic-form.radio.partially-public': 'Partially public',
32+
'form.basic-form.radio.private': 'Private',
33+
'form.basic-form.publicUsers.placeholder': 'Open to',
34+
'form.basic-form.option.A': 'Colleague A',
35+
'form.basic-form.option.B': 'Colleague B',
36+
'form.basic-form.option.C': 'Colleague C',
37+
'form.basic-form.email.required': 'Please enter your email!',
38+
'form.basic-form.email.wrong-format': 'The email address is in the wrong format!',
39+
'form.basic-form.userName.required': 'Please enter your userName!',
40+
'form.basic-form.password.required': 'Please enter your password!',
41+
'form.basic-form.password.twice': 'The passwords entered twice do not match!',
42+
'form.basic-form.strength.msg':
43+
"Please enter at least 6 characters and don't use passwords that are easy to guess.",
44+
'form.basic-form.strength.strong': 'Strength: strong',
45+
'form.basic-form.strength.medium': 'Strength: medium',
46+
'form.basic-form.strength.short': 'Strength: too short',
47+
'form.basic-form.confirm-password.required': 'Please confirm your password!',
48+
'form.basic-form.phone-number.required': 'Please enter your phone number!',
49+
'form.basic-form.phone-number.wrong-format': 'Malformed phone number!',
50+
'form.basic-form.verification-code.required': 'Please enter the verification code!',
51+
'form.basic-form.form.get-captcha': 'Get Captcha',
52+
'form.basic-form.captcha.second': 'sec',
53+
'form.basic-form.form.optional': ' (optional) ',
54+
'form.basic-form.form.submit': 'Submit',
55+
'form.basic-form.form.save': 'Save',
56+
'form.basic-form.email.placeholder': 'Email',
57+
'form.basic-form.password.placeholder': 'Password',
58+
'form.basic-form.confirm-password.placeholder': 'Confirm password',
59+
'form.basic-form.phone-number.placeholder': 'Phone number',
60+
'form.basic-form.verification-code.placeholder': 'Verification code'
61+
}

‎src/locales/lang/zh-CN.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import antd from 'ant-design-vue/es/locale-provider/zh_CN'
22
import momentCN from 'moment/locale/zh-cn'
33
import menu from './zh-CN/menu'
44
import dashboard from './zh-CN/dashboard'
5+
import form from './zh-CN/form'
56

67
const components = {
78
antLocale: antd,
@@ -17,5 +18,6 @@ export default {
1718

1819
...components,
1920
...menu,
20-
...dashboard
21+
...dashboard,
22+
...form
2123
}

‎src/locales/lang/zh-CN/form.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import basicForm from './form/basicForm'
2+
3+
export default {
4+
...basicForm
5+
}

‎src/locales/lang/zh-CN/form/basicForm.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
export default {
2+
'form.basic-form.basic.title': '基础表单',
3+
'form.basic-form.basic.description':
4+
'表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
5+
'form.basic-form.title.label': '标题',
6+
'form.basic-form.title.placeholder': '给目标起个名字',
7+
'form.basic-form.title.required': '请输入标题',
8+
'form.basic-form.date.label': '起止日期',
9+
'form.basic-form.placeholder.start': '开始日期',
10+
'form.basic-form.placeholder.end': '结束日期',
11+
'form.basic-form.date.required': '请选择起止日期',
12+
'form.basic-form.goal.label': '目标描述',
13+
'form.basic-form.goal.placeholder': '请输入你的阶段性工作目标',
14+
'form.basic-form.goal.required': '请输入目标描述',
15+
'form.basic-form.standard.label': '衡量标准',
16+
'form.basic-form.standard.placeholder': '请输入衡量标准',
17+
'form.basic-form.standard.required': '请输入衡量标准',
18+
'form.basic-form.client.label': '客户',
19+
'form.basic-form.client.required': '请描述你服务的客户',
20+
'form.basic-form.label.tooltip': '目标的服务对象',
21+
'form.basic-form.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
22+
'form.basic-form.invites.label': '邀评人',
23+
'form.basic-form.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
24+
'form.basic-form.weight.label': '权重',
25+
'form.basic-form.weight.placeholder': '请输入',
26+
'form.basic-form.public.label': '目标公开',
27+
'form.basic-form.label.help': '客户、邀评人默认被分享',
28+
'form.basic-form.radio.public': '公开',
29+
'form.basic-form.radio.partially-public': '部分公开',
30+
'form.basic-form.radio.private': '不公开',
31+
'form.basic-form.publicUsers.placeholder': '公开给',
32+
'form.basic-form.option.A': '同事一',
33+
'form.basic-form.option.B': '同事二',
34+
'form.basic-form.option.C': '同事三',
35+
'form.basic-form.email.required': '请输入邮箱地址！',
36+
'form.basic-form.email.wrong-format': '邮箱地址格式错误！',
37+
'form.basic-form.userName.required': '请输入用户名!',
38+
'form.basic-form.password.required': '请输入密码！',
39+
'form.basic-form.password.twice': '两次输入的密码不匹配!',
40+
'form.basic-form.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
41+
'form.basic-form.strength.strong': '强度：强',
42+
'form.basic-form.strength.medium': '强度：中',
43+
'form.basic-form.strength.short': '强度：太短',
44+
'form.basic-form.confirm-password.required': '请确认密码！',
45+
'form.basic-form.phone-number.required': '请输入手机号！',
46+
'form.basic-form.phone-number.wrong-format': '手机号格式错误！',
47+
'form.basic-form.verification-code.required': '请输入验证码！',
48+
'form.basic-form.form.get-captcha': '获取验证码',
49+
'form.basic-form.captcha.second': '秒',
50+
'form.basic-form.form.optional': '（选填）',
51+
'form.basic-form.form.submit': '提交',
52+
'form.basic-form.form.save': '保存',
53+
'form.basic-form.email.placeholder': '邮箱',
54+
'form.basic-form.password.placeholder': '至少6位密码，区分大小写',
55+
'form.basic-form.confirm-password.placeholder': '确认密码',
56+
'form.basic-form.phone-number.placeholder': '手机号',
57+
'form.basic-form.verification-code.placeholder': '验证码'
58+
}

‎src/views/form/basicForm/index.vue

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,77 @@
11
<template>
22
<!-- hidden PageHeaderWrapper title demo -->
3-
<page-header-wrapper :title="false" content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。">
3+
<page-header-wrapper :title="false" :content="$t('form.basic-form.basic.description')">
44
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
55
<a-form @submit="handleSubmit" :form="form">
66
<a-form-item
7-
label="标题"
7+
:label="$t('form.basic-form.title.label')"
88
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
99
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
1010
<a-input
1111
v-decorator="[
1212
'name',
13-
{rules: [{ required: true, message: '请输入标题' }]}
13+
{rules: [{ required: true, message: $t('form.basic-form.title.required') }]}
1414
]"
1515
name="name"
16-
placeholder="给目标起个名字" />
16+
:placeholder="$t('form.basic-form.title.placeholder')" />
1717
</a-form-item>
1818
<a-form-item
19-
label="起止日期"
19+
:label="$t('form.basic-form.date.label')"
2020
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
2121
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
2222
<a-range-picker
2323
name="buildTime"
2424
style="width: 100%"
2525
v-decorator="[
2626
'buildTime',
27-
{rules: [{ required: true, message: '请选择起止日期' }]}
27+
{rules: [{ required: true, message: $t('form.basic-form.date.required') }]}
2828
]" />
2929
</a-form-item>
3030
<a-form-item
31-
label="目标描述"
31+
:label="$t('form.basic-form.goal.label')"
3232
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
3333
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
3434
<a-textarea
3535
rows="4"
36-
placeholder="请输入你阶段性工作目标"
36+
:placeholder="$t('form.basic-form.goal.placeholder')"
3737
v-decorator="[
3838
'description',
39-
{rules: [{ required: true, message: '请输入目标描述' }]}
39+
{rules: [{ required: true, message: $t('form.basic-form.goal.required') }]}
4040
]" />
4141
</a-form-item>
4242
<a-form-item
43-
label="衡量标准"
43+
:label="$t('form.basic-form.standard.label')"
4444
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
4545
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
4646
<a-textarea
4747
rows="4"
48-
placeholder="请输入衡量标准"
48+
:placeholder="$t('form.basic-form.standard.placeholder')"
4949
v-decorator="[
5050
'type',
51-
{rules: [{ required: true, message: '请输入衡量标准' }]}
51+
{rules: [{ required: true, message: $t('form.basic-form.standard.required') }]}
5252
]" />
5353
</a-form-item>
5454
<a-form-item
55-
label="客户"
55+
:label="$t('form.basic-form.client.label')"
5656
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
5757
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
5858
<a-input
59-
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
59+
:placeholder="$t('form.basic-form.client.placeholder')"
6060
v-decorator="[
6161
'customer',
62-
{rules: [{ required: true, message: '请描述你服务的客户' }]}
62+
{rules: [{ required: true, message: $t('form.basic-form.client.required') }]}
6363
]" />
6464
</a-form-item>
6565
<a-form-item
66-
label="邀评人"
66+
:label="$t('form.basic-form.invites.label')"
6767
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
6868
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
6969
:required="false"
7070
>
71-
<a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
71+
<a-input :placeholder="$t('form.basic-form.invites.placeholder')" />
7272
</a-form-item>
7373
<a-form-item
74-
label="权重"
74+
:label="$t('form.basic-form.weight.label')"
7575
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
7676
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
7777
:required="false"
@@ -80,31 +80,31 @@
8080
<span> %</span>
8181
</a-form-item>
8282
<a-form-item
83-
label="目标公开"
83+
:label="$t('form.basic-form.public.label')"
8484
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
8585
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
8686
:required="false"
87-
help="客户、邀评人默认被分享"
87+
:help="$t('form.basic-form.label.help')"
8888
>
8989
<a-radio-group v-decorator="['target', { initialValue: 1 }]">
90-
<a-radio :value="1">公开</a-radio>
91-
<a-radio :value="2">部分公开</a-radio>
92-
<a-radio :value="3">不公开</a-radio>
90+
<a-radio :value="1">{{ $t('form.basic-form.radio.public') }}</a-radio>
91+
<a-radio :value="2">{{ $t('form.basic-form.radio.partially-public') }}</a-radio>
92+
<a-radio :value="3">{{ $t('form.basic-form.radio.private') }}</a-radio>
9393
</a-radio-group>
9494
<a-form-item v-show="form.getFieldValue('target') === 2">
9595
<a-select mode="multiple">
96-
<a-select-option value="4">同事一</a-select-option>
97-
<a-select-option value="5">同事二</a-select-option>
98-
<a-select-option value="6">同事三</a-select-option>
96+
<a-select-option value="4">{{ $t('form.basic-form.option.A') }}</a-select-option>
97+
<a-select-option value="5">{{ $t('form.basic-form.option.B') }}</a-select-option>
98+
<a-select-option value="6">{{ $t('form.basic-form.option.C') }}</a-select-option>
9999
</a-select>
100100
</a-form-item>
101101
</a-form-item>
102102
<a-form-item
103103
:wrapperCol="{ span: 24 }"
104104
style="text-align: center"
105105
>
106-
<a-button htmlType="submit" type="primary">提交</a-button>
107-
<a-button style="margin-left: 8px">保存</a-button>
106+
<a-button htmlType="submit" type="primary">{{ $t('form.basic-form.form.submit') }}</a-button>
107+
<a-button style="margin-left: 8px">{{ $t('form.basic-form.form.save') }}</a-button>
108108
</a-form-item>
109109
</a-form>
110110
</a-card>

0 commit comments

Comments
 (0)