refactor 'views-form-basicform' from hardcoded to locale support

src/locales/lang/en-US.js

@@ -3,6 +3,7 @@ import momentEU from 'moment/locale/eu'
 import menu from './en-US/menu'
 import setting from './en-US/setting'
 import dashboard from './en-US/dashboard'
+import form from './en-US/form'
 
 const components = {
   antLocale: antdEnUS,
@@ -19,5 +20,6 @@ export default {
   ...components,
   ...menu,
   ...setting,
-  ...dashboard
+  ...dashboard,
+  ...form
 }

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

@@ -0,0 +1,5 @@
+import basicForm from './form/basicForm'
+
+export default {
+    ...basicForm
+  }

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

@@ -0,0 +1,61 @@
+export default {
+  'form.basic-form.basic.title': 'Basic form',
+  'form.basic-form.basic.description':
+   'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+  'form.basic-form.title.label': 'Title',
+  'form.basic-form.title.placeholder': 'Give the target a name',
+  'form.basic-form.title.required': 'Please enter a title',
+  'form.basic-form.date.label': 'Start and end date',
+  'form.basic-form.placeholder.start': 'Start date',
+  'form.basic-form.placeholder.end': 'End date',
+  'form.basic-form.date.required': 'Please select the start and end date',
+  'form.basic-form.goal.label': 'Goal description',
+  'form.basic-form.goal.placeholder': 'Please enter your work goals',
+  'form.basic-form.goal.required': 'Please enter a description of the goal',
+  'form.basic-form.standard.label': 'Metrics',
+  'form.basic-form.standard.placeholder': 'Please enter a metric',
+  'form.basic-form.standard.required': 'Please enter a metric',
+  'form.basic-form.client.label': 'Client',
+  'form.basic-form.label.tooltip': 'Target service object',
+  'form.basic-form.client.placeholder':
+    'Please describe your customer service, internal customers directly @ Name / job number',
+  'form.basic-form.client.required': 'Please describe the customers you serve',
+  'form.basic-form.invites.label': 'Inviting critics',
+  'form.basic-form.invites.placeholder':
+    'Please direct @ Name / job number, you can invite up to 5 people',
+  'form.basic-form.weight.label': 'Weight',
+  'form.basic-form.weight.placeholder': 'Please enter weight',
+  'form.basic-form.public.label': 'Target disclosure',
+  'form.basic-form.label.help': 'Customers and invitees are shared by default',
+  'form.basic-form.radio.public': 'Public',
+  'form.basic-form.radio.partially-public': 'Partially public',
+  'form.basic-form.radio.private': 'Private',
+  'form.basic-form.publicUsers.placeholder': 'Open to',
+  'form.basic-form.option.A': 'Colleague A',
+  'form.basic-form.option.B': 'Colleague B',
+  'form.basic-form.option.C': 'Colleague C',
+  'form.basic-form.email.required': 'Please enter your email!',
+  'form.basic-form.email.wrong-format': 'The email address is in the wrong format!',
+  'form.basic-form.userName.required': 'Please enter your userName!',
+  'form.basic-form.password.required': 'Please enter your password!',
+  'form.basic-form.password.twice': 'The passwords entered twice do not match!',
+  'form.basic-form.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'form.basic-form.strength.strong': 'Strength: strong',
+  'form.basic-form.strength.medium': 'Strength: medium',
+  'form.basic-form.strength.short': 'Strength: too short',
+  'form.basic-form.confirm-password.required': 'Please confirm your password!',
+  'form.basic-form.phone-number.required': 'Please enter your phone number!',
+  'form.basic-form.phone-number.wrong-format': 'Malformed phone number!',
+  'form.basic-form.verification-code.required': 'Please enter the verification code!',
+  'form.basic-form.form.get-captcha': 'Get Captcha',
+  'form.basic-form.captcha.second': 'sec',
+  'form.basic-form.form.optional': ' (optional) ',
+  'form.basic-form.form.submit': 'Submit',
+  'form.basic-form.form.save': 'Save',
+  'form.basic-form.email.placeholder': 'Email',
+  'form.basic-form.password.placeholder': 'Password',
+  'form.basic-form.confirm-password.placeholder': 'Confirm password',
+  'form.basic-form.phone-number.placeholder': 'Phone number',
+  'form.basic-form.verification-code.placeholder': 'Verification code'
+}

src/locales/lang/zh-CN.js

@@ -2,6 +2,7 @@ import antd from 'ant-design-vue/es/locale-provider/zh_CN'
 import momentCN from 'moment/locale/zh-cn'
 import menu from './zh-CN/menu'
 import dashboard from './zh-CN/dashboard'
+import form from './zh-CN/form'
 
 const components = {
   antLocale: antd,
@@ -17,5 +18,6 @@ export default {
 
   ...components,
   ...menu,
-  ...dashboard
+  ...dashboard,
+  ...form
 }

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

@@ -0,0 +1,5 @@
+import basicForm from './form/basicForm'
+
+export default {
+    ...basicForm
+  }

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

@@ -0,0 +1,58 @@
+export default {
+  'form.basic-form.basic.title': '基础表单',
+  'form.basic-form.basic.description':
+    '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+  'form.basic-form.title.label': '标题',
+  'form.basic-form.title.placeholder': '给目标起个名字',
+  'form.basic-form.title.required': '请输入标题',
+  'form.basic-form.date.label': '起止日期',
+  'form.basic-form.placeholder.start': '开始日期',
+  'form.basic-form.placeholder.end': '结束日期',
+  'form.basic-form.date.required': '请选择起止日期',
+  'form.basic-form.goal.label': '目标描述',
+  'form.basic-form.goal.placeholder': '请输入你的阶段性工作目标',
+  'form.basic-form.goal.required': '请输入目标描述',
+  'form.basic-form.standard.label': '衡量标准',
+  'form.basic-form.standard.placeholder': '请输入衡量标准',
+  'form.basic-form.standard.required': '请输入衡量标准',
+  'form.basic-form.client.label': '客户',
+  'form.basic-form.client.required': '请描述你服务的客户',
+  'form.basic-form.label.tooltip': '目标的服务对象',
+  'form.basic-form.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+  'form.basic-form.invites.label': '邀评人',
+  'form.basic-form.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+  'form.basic-form.weight.label': '权重',
+  'form.basic-form.weight.placeholder': '请输入',
+  'form.basic-form.public.label': '目标公开',
+  'form.basic-form.label.help': '客户、邀评人默认被分享',
+  'form.basic-form.radio.public': '公开',
+  'form.basic-form.radio.partially-public': '部分公开',
+  'form.basic-form.radio.private': '不公开',
+  'form.basic-form.publicUsers.placeholder': '公开给',
+  'form.basic-form.option.A': '同事一',
+  'form.basic-form.option.B': '同事二',
+  'form.basic-form.option.C': '同事三',
+  'form.basic-form.email.required': '请输入邮箱地址！',
+  'form.basic-form.email.wrong-format': '邮箱地址格式错误！',
+  'form.basic-form.userName.required': '请输入用户名!',
+  'form.basic-form.password.required': '请输入密码！',
+  'form.basic-form.password.twice': '两次输入的密码不匹配!',
+  'form.basic-form.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'form.basic-form.strength.strong': '强度：强',
+  'form.basic-form.strength.medium': '强度：中',
+  'form.basic-form.strength.short': '强度：太短',
+  'form.basic-form.confirm-password.required': '请确认密码！',
+  'form.basic-form.phone-number.required': '请输入手机号！',
+  'form.basic-form.phone-number.wrong-format': '手机号格式错误！',
+  'form.basic-form.verification-code.required': '请输入验证码！',
+  'form.basic-form.form.get-captcha': '获取验证码',
+  'form.basic-form.captcha.second': '秒',
+  'form.basic-form.form.optional': '（选填）',
+  'form.basic-form.form.submit': '提交',
+  'form.basic-form.form.save': '保存',
+  'form.basic-form.email.placeholder': '邮箱',
+  'form.basic-form.password.placeholder': '至少6位密码，区分大小写',
+  'form.basic-form.confirm-password.placeholder': '确认密码',
+  'form.basic-form.phone-number.placeholder': '手机号',
+  'form.basic-form.verification-code.placeholder': '验证码'
+}

src/views/form/basicForm/index.vue

@@ -1,22 +1,22 @@
 <template>
   <!-- hidden PageHeaderWrapper title demo -->
-  <page-header-wrapper :title="false" content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。">
+  <page-header-wrapper :title="false" :content="$t('form.basic-form.basic.description')">
     <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
       <a-form @submit="handleSubmit" :form="form">
         <a-form-item
-          label="标题"
+          :label="$t('form.basic-form.title.label')"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
           :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
           <a-input
             v-decorator="[
               'name',
-              {rules: [{ required: true, message: '请输入标题' }]}
+              {rules: [{ required: true, message: $t('form.basic-form.title.required') }]}
             ]"
             name="name"
-            placeholder="给目标起个名字" />
+            :placeholder="$t('form.basic-form.title.placeholder')" />
         </a-form-item>
         <a-form-item
-          label="起止日期"
+          :label="$t('form.basic-form.date.label')"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
           :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
           <a-range-picker
@@ -24,54 +24,54 @@
             style="width: 100%"
             v-decorator="[
               'buildTime',
-              {rules: [{ required: true, message: '请选择起止日期' }]}
+              {rules: [{ required: true, message: $t('form.basic-form.date.required') }]}
             ]" />
         </a-form-item>
         <a-form-item
-          label="目标描述"
+          :label="$t('form.basic-form.goal.label')"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
           :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
           <a-textarea
             rows="4"
-            placeholder="请输入你阶段性工作目标"
+            :placeholder="$t('form.basic-form.goal.placeholder')"
             v-decorator="[
               'description',
-              {rules: [{ required: true, message: '请输入目标描述' }]}
+              {rules: [{ required: true, message: $t('form.basic-form.goal.required') }]}
             ]" />
         </a-form-item>
         <a-form-item
-          label="衡量标准"
+          :label="$t('form.basic-form.standard.label')"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
           :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
           <a-textarea
             rows="4"
-            placeholder="请输入衡量标准"
+            :placeholder="$t('form.basic-form.standard.placeholder')"
             v-decorator="[
               'type',
-              {rules: [{ required: true, message: '请输入衡量标准' }]}
+              {rules: [{ required: true, message: $t('form.basic-form.standard.required') }]}
             ]" />
         </a-form-item>
         <a-form-item
-          label="客户"
+          :label="$t('form.basic-form.client.label')"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
           :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
           <a-input
-            placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
+            :placeholder="$t('form.basic-form.client.placeholder')"
             v-decorator="[
               'customer',
-              {rules: [{ required: true, message: '请描述你服务的客户' }]}
+              {rules: [{ required: true, message: $t('form.basic-form.client.required') }]}
             ]" />
         </a-form-item>
         <a-form-item
-          label="邀评人"
+          :label="$t('form.basic-form.invites.label')"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
           :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
           :required="false"
         >
-          <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
+          <a-input :placeholder="$t('form.basic-form.invites.placeholder')" />
         </a-form-item>
         <a-form-item
-          label="权重"
+          :label="$t('form.basic-form.weight.label')"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
           :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
           :required="false"
@@ -80,22 +80,22 @@
           <span> %</span>
         </a-form-item>
         <a-form-item
-          label="目标公开"
+          :label="$t('form.basic-form.public.label')"
           :labelCol="{lg: {span: 7}, sm: {span: 7}}"
           :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
           :required="false"
-          help="客户、邀评人默认被分享"
+          :help="$t('form.basic-form.label.help')"
         >
           <a-radio-group v-decorator="['target', { initialValue: 1 }]">
-            <a-radio :value="1">公开</a-radio>
-            <a-radio :value="2">部分公开</a-radio>
-            <a-radio :value="3">不公开</a-radio>
+            <a-radio :value="1">{{ $t('form.basic-form.radio.public') }}</a-radio>
+            <a-radio :value="2">{{ $t('form.basic-form.radio.partially-public') }}</a-radio>
+            <a-radio :value="3">{{ $t('form.basic-form.radio.private') }}</a-radio>
           </a-radio-group>
           <a-form-item v-show="form.getFieldValue('target') === 2">
             <a-select mode="multiple">
-              <a-select-option value="4">同事一</a-select-option>
-              <a-select-option value="5">同事二</a-select-option>
-              <a-select-option value="6">同事三</a-select-option>
+              <a-select-option value="4">{{ $t('form.basic-form.option.A') }}</a-select-option>
+              <a-select-option value="5">{{ $t('form.basic-form.option.B') }}</a-select-option>
+              <a-select-option value="6">{{ $t('form.basic-form.option.C') }}</a-select-option>
             </a-select>
           </a-form-item>
         </a-form-item>
@@ -103,8 +103,8 @@
           :wrapperCol="{ span: 24 }"
           style="text-align: center"
         >
-          <a-button htmlType="submit" type="primary">提交</a-button>
-          <a-button style="margin-left: 8px">保存</a-button>
+          <a-button htmlType="submit" type="primary">{{ $t('form.basic-form.form.submit') }}</a-button>
+          <a-button style="margin-left: 8px">{{ $t('form.basic-form.form.save') }}</a-button>
         </a-form-item>
       </a-form>
     </a-card>