refactor 'views-result' from hardcoded to locale support

src/locales/lang/en-US.js

@@ -4,6 +4,7 @@ import menu from './en-US/menu'
 import setting from './en-US/setting'
 import dashboard from './en-US/dashboard'
 import form from './en-US/form'
+import result from './en-US/result'
 
 const components = {
   antLocale: antdEnUS,
@@ -21,5 +22,6 @@ export default {
   ...menu,
   ...setting,
   ...dashboard,
-  ...form
+  ...form,
+  ...result
 }

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

@@ -0,0 +1,7 @@
+import success from './result/success'
+import fail from './result/fail'
+
+export default {
+    ...success,
+    ...fail
+  }

src/locales/lang/en-US/result/fail.js

@@ -0,0 +1,11 @@
+export default {
+  'result.fail.error.title': 'Submission Failed',
+  'result.fail.error.description':
+    'Please check and modify the following information before resubmitting.',
+  'result.fail.error.hint-title': 'The content you submitted has the following error:',
+  'result.fail.error.hint-text1': 'Your account has been frozen',
+  'result.fail.error.hint-btn1': 'Thaw immediately',
+  'result.fail.error.hint-text2': 'Your account is not yet eligible to apply',
+  'result.fail.error.hint-btn2': 'Upgrade immediately',
+  'result.fail.error.btn-text': 'Return to modify'
+}

src/locales/lang/en-US/result/success.js

@@ -0,0 +1,19 @@
+export default {
+  'result.success.title': 'Submission Success',
+  'result.success.description':
+    'The submission results page is used to feed back the results of a series of operational tasks. If it is a simple operation, use the Message global prompt feedback. This text area can show a simple supplementary explanation. If there is a similar requirement for displaying “documents”, the following gray area can present more complicated content.',
+  'result.success.operate-title': 'Project Name',
+  'result.success.operate-id': 'Project ID',
+  'result.success.principal': 'Principal',
+  'result.success.operate-time': 'Effective time',
+  'result.success.step1-title': 'Create project',
+  'result.success.step1-operator': 'Qu Lili',
+  'result.success.step2-title': 'Departmental preliminary review',
+  'result.success.step2-operator': 'Zhou Maomao',
+  'result.success.step2-extra': 'Urge',
+  'result.success.step3-title': 'Financial review',
+  'result.success.step4-title': 'Finish',
+  'result.success.btn-return': 'Back List',
+  'result.success.btn-project': 'View Project',
+  'result.success.btn-print': 'Print'
+}

src/locales/lang/zh-CN.js

@@ -3,6 +3,7 @@ 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'
+import result from './zh-CN/result'
 
 const components = {
   antLocale: antd,
@@ -19,5 +20,6 @@ export default {
   ...components,
   ...menu,
   ...dashboard,
-  ...form
+  ...form,
+  ...result
 }

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

@@ -0,0 +1,7 @@
+import success from './result/success'
+import fail from './result/fail'
+
+export default {
+    ...success,
+    ...fail
+  }

src/locales/lang/zh-CN/result/fail.js

@@ -0,0 +1,10 @@
+export default {
+  'result.fail.error.title': '提交失败',
+  'result.fail.error.description': '请核对并修改以下信息后，再重新提交。',
+  'result.fail.error.hint-title': '您提交的内容有如下错误：',
+  'result.fail.error.hint-text1': '您的账户已被冻结',
+  'result.fail.error.hint-btn1': '立即解冻',
+  'result.fail.error.hint-text2': '您的账户还不具备申请资格',
+  'result.fail.error.hint-btn2': '立即升级',
+  'result.fail.error.btn-text': '返回修改'
+}

src/locales/lang/zh-CN/result/success.js

@@ -0,0 +1,19 @@
+export default {
+  'result.success.title': '提交成功',
+  'result.success.description':
+    '提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
+  'result.success.operate-title': '项目名称',
+  'result.success.operate-id': '项目 ID',
+  'result.success.principal': '负责人',
+  'result.success.operate-time': '生效时间',
+  'result.success.step1-title': '创建项目',
+  'result.success.step1-operator': '曲丽丽',
+  'result.success.step2-title': '部门初审',
+  'result.success.step2-operator': '周毛毛',
+  'result.success.step2-extra': '催一下',
+  'result.success.step3-title': '财务复核',
+  'result.success.step4-title': '完成',
+  'result.success.btn-return': '返回列表',
+  'result.success.btn-project': '查看项目',
+  'result.success.btn-print': '打印'
+}

src/views/result/Error.vue

@@ -1,22 +1,22 @@
 <template>
   <a-card :bordered="false">
-    <a-result status="error" :title="title" :sub-title="description">
+    <a-result status="error" :title="result.title" :sub-title="result.description">
       <template #extra>
-        <a-button type="primary" >返回修改</a-button>
+        <a-button type="primary" >{{ $t('result.fail.error.btn-text') }}</a-button>
       </template>
       <div class="desc">
         <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 16px">
-          您提交的内容有如下错误：
+          {{ $t('result.fail.error.hint-title') }}
         </div>
         <div style="margin-bottom: 16px">
           <a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
-          您的账户已被冻结
-          <a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
+          {{ $t('result.fail.error.hint-text1') }}
+          <a style="margin-left: 16px">{{ $t('result.fail.error.hint-btn1') }} <a-icon type="right" /></a>
         </div>
         <div>
           <a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
-          您的账户还不具备申请资格
-          <a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
+          {{ $t('result.fail.error.hint-text2') }}
+          <a style="margin-left: 16px">{{ $t('result.fail.error.hint-btn2') }} <a-icon type="right" /></a>
         </div>
       </div>
     </a-result>
@@ -27,10 +27,12 @@
 
 export default {
   name: 'Error',
-  data () {
-    return {
-      title: '提交失败',
-      description: '请核对并修改以下信息后，再重新提交。'
+  computed: {
+    result () {
+      return {
+      title: this.$t('result.fail.error.title'),
+      description: this.$t('result.fail.error.description')
+      }
     }
   }
 }

src/views/result/Success.vue

@@ -1,30 +1,30 @@
 <template>
   <a-card :bordered="false">
-    <a-result status="success" :sub-title="description" :title="title">
+    <a-result status="success" :title="result.title" :sub-title="result.description">
       <template #extra>
-        <a-button type="primary">返回列表</a-button>
-        <a-button style="margin-left: 8px">查看项目</a-button>
-        <a-button style="margin-left: 8px">打印</a-button>
+        <a-button type="primary">{{ $t('result.success.btn-return') }}</a-button>
+        <a-button style="margin-left: 8px">{{ $t('result.success.btn-project') }}</a-button>
+        <a-button style="margin-left: 8px">{{ $t('result.success.btn-print') }}</a-button>
       </template>
       <div class="content">
-        <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
+        <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">{{ $t('result.success.operate-title') }}</div>
         <a-row style="margin-bottom: 16px">
           <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
-            <span style="color: rgba(0, 0, 0, 0.85)">项目 ID：</span>
+            <span style="color: rgba(0, 0, 0, 0.85)">{{ $t('result.success.operate-id') }}：</span>
             20180724089
           </a-col>
           <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
-            <span style="color: rgba(0, 0, 0, 0.85)">负责人：</span>
+            <span style="color: rgba(0, 0, 0, 0.85)">{{ $t('result.success.principal') }}：</span>
             曲丽丽是谁？
           </a-col>
           <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
-            <span style="color: rgba(0, 0, 0, 0.85)">生效时间：</span>
+            <span style="color: rgba(0, 0, 0, 0.85)">{{ $t('result.success.operate-time') }}：</span>
             2016-12-12 ~ 2017-12-12
           </a-col>
         </a-row>
         <a-steps :current="1" :direction="isMobile && directionType.vertical || directionType.horizontal" progressDot>
-          <a-step >
-            <span style="font-size: 14px" slot="title">创建项目</span>
+          <a-step :title="$t('result.success.step1-title')">
+            <span style="font-size: 14px" slot="title">{{ $t('result.success.step1-title') }}</span>
             <template slot="description">
               <div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;text-align: left;" slot="description" >
                 <div style="margin: 8px 0 4px">
@@ -35,8 +35,8 @@
               </div>
             </template>
           </a-step>
-          <a-step title="部门初审">
-            <span style="font-size: 14px" slot="title">部门初审</span>
+          <a-step :title="$t('result.success.step2-title')">
+            <span style="font-size: 14px" slot="title">{{ $t('result.success.step2-title') }}</span>
             <template slot="description">
               <div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;text-align: left;" slot="description" >
                 <div style="margin: 8px 0 4px">
@@ -47,11 +47,11 @@
               </div>
             </template>
           </a-step>
-          <a-step title="财务复核">
-            <span style="font-size: 14px" slot="title">财务复核</span>
+          <a-step :title="$t('result.success.step3-title')">
+            <span style="font-size: 14px" slot="title">{{ $t('result.success.step3-title') }}</span>
           </a-step>
-          <a-step title="完成" >
-            <span style="font-size: 14px" slot="title">完成</span>
+          <a-step :title="$t('result.success.step4-title')" >
+            <span style="font-size: 14px" slot="title">{{ $t('result.success.step4-title') }}</span>
           </a-step>
         </a-steps>
       </div>
@@ -73,11 +73,16 @@ export default {
   data () {
     this.directionType = directionType
     return {
-      title: '提交成功',
-      description: '提交结果页用于反馈一系列操作任务的处理结果，\n' +
-          ' 如果仅是简单操作，使用 Message 全局提示反馈即可。\n' +
-          ' 本文字区域可以展示简单的补充说明，如果有类似展示\n' +
-          ' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。'
+      // title: this.$t('result.success.title'),
+      // description: this.$t('result.success.description')
+    }
+  },
+  computed: {
+    result () {
+      return {
+      title: this.$t('result.success.title'),
+      description: this.$t('result.success.description')
+      }
     }
   }
 }