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

新增：高级表单页增加国际化语言支持；

src/pages/form/advancedForm/AdvancedForm.vue

@@ -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">
+    <a-card :title="$t('user')" :bordered="false">
-      <table-form />
+      <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) => {

src/pages/form/advancedForm/RepositoryForm.vue

@@ -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()

src/pages/form/advancedForm/TaskForm.vue

@@ -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()

src/pages/form/advancedForm/UserForm.vue

@@ -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-popconfirm :title="$t('deleteConfirm')" @confirm="remove(record.key)">
-              <a>删除</a>
+              <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-popconfirm :title="$t('deleteConfirm')" @confirm="remove(record.key)">
-            <a>删除</a>
+            <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',
+    dataIndex: 'number',
-    key: 'workId',
+    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

src/pages/form/advancedForm/i18n-repository.js

@@ -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',
+    }
+  }
+}

src/pages/form/advancedForm/i18n-task.js

@@ -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',
+    }
+  }
+}

src/pages/form/advancedForm/i18n-user.js

@@ -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',
+      }
+    }
+  }
+}

src/pages/form/advancedForm/i18n.js

@@ -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'
+    }
+  }
+}