Skip to content

Commit f02c3db

Browse files
msgill2017sendya
authored andcommitted
refactor 'views-result' from hardcoded to locale support
1 parent c5cde73 commit f02c3db

File tree

10 files changed

+118
-34
lines changed

10 files changed

+118
-34
lines changed

src/locales/lang/en-US.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import menu from './en-US/menu'
44
import setting from './en-US/setting'
55
import dashboard from './en-US/dashboard'
66
import form from './en-US/form'
7+
import result from './en-US/result'
78

89
const components = {
910
antLocale: antdEnUS,
@@ -21,5 +22,6 @@ export default {
2122
...menu,
2223
...setting,
2324
...dashboard,
24-
...form
25+
...form,
26+
...result
2527
}

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

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

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default {
2+
'result.fail.error.title': 'Submission Failed',
3+
'result.fail.error.description':
4+
'Please check and modify the following information before resubmitting.',
5+
'result.fail.error.hint-title': 'The content you submitted has the following error:',
6+
'result.fail.error.hint-text1': 'Your account has been frozen',
7+
'result.fail.error.hint-btn1': 'Thaw immediately',
8+
'result.fail.error.hint-text2': 'Your account is not yet eligible to apply',
9+
'result.fail.error.hint-btn2': 'Upgrade immediately',
10+
'result.fail.error.btn-text': 'Return to modify'
11+
}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default {
2+
'result.success.title': 'Submission Success',
3+
'result.success.description':
4+
'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.',
5+
'result.success.operate-title': 'Project Name',
6+
'result.success.operate-id': 'Project ID',
7+
'result.success.principal': 'Principal',
8+
'result.success.operate-time': 'Effective time',
9+
'result.success.step1-title': 'Create project',
10+
'result.success.step1-operator': 'Qu Lili',
11+
'result.success.step2-title': 'Departmental preliminary review',
12+
'result.success.step2-operator': 'Zhou Maomao',
13+
'result.success.step2-extra': 'Urge',
14+
'result.success.step3-title': 'Financial review',
15+
'result.success.step4-title': 'Finish',
16+
'result.success.btn-return': 'Back List',
17+
'result.success.btn-project': 'View Project',
18+
'result.success.btn-print': 'Print'
19+
}

src/locales/lang/zh-CN.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import momentCN from 'moment/locale/zh-cn'
33
import menu from './zh-CN/menu'
44
import dashboard from './zh-CN/dashboard'
55
import form from './zh-CN/form'
6+
import result from './zh-CN/result'
67

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

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

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

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
'result.fail.error.title': '提交失败',
3+
'result.fail.error.description': '请核对并修改以下信息后,再重新提交。',
4+
'result.fail.error.hint-title': '您提交的内容有如下错误:',
5+
'result.fail.error.hint-text1': '您的账户已被冻结',
6+
'result.fail.error.hint-btn1': '立即解冻',
7+
'result.fail.error.hint-text2': '您的账户还不具备申请资格',
8+
'result.fail.error.hint-btn2': '立即升级',
9+
'result.fail.error.btn-text': '返回修改'
10+
}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export default {
2+
'result.success.title': '提交成功',
3+
'result.success.description':
4+
'提交结果页用于反馈一系列操作任务的处理结果, 如果仅是简单操作,使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明,如果有类似展示 “单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。',
5+
'result.success.operate-title': '项目名称',
6+
'result.success.operate-id': '项目 ID',
7+
'result.success.principal': '负责人',
8+
'result.success.operate-time': '生效时间',
9+
'result.success.step1-title': '创建项目',
10+
'result.success.step1-operator': '曲丽丽',
11+
'result.success.step2-title': '部门初审',
12+
'result.success.step2-operator': '周毛毛',
13+
'result.success.step2-extra': '催一下',
14+
'result.success.step3-title': '财务复核',
15+
'result.success.step4-title': '完成',
16+
'result.success.btn-return': '返回列表',
17+
'result.success.btn-project': '查看项目',
18+
'result.success.btn-print': '打印'
19+
}

src/views/result/Error.vue

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<template>
22
<a-card :bordered="false">
3-
<a-result status="error" :title="title" :sub-title="description">
3+
<a-result status="error" :title="result.title" :sub-title="result.description">
44
<template #extra>
5-
<a-button type="primary" >返回修改</a-button>
5+
<a-button type="primary" >{{ $t('result.fail.error.btn-text') }}</a-button>
66
</template>
77
<div class="desc">
88
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 16px">
9-
您提交的内容有如下错误:
9+
{{ $t('result.fail.error.hint-title') }}
1010
</div>
1111
<div style="margin-bottom: 16px">
1212
<a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
13-
您的账户已被冻结
14-
<a style="margin-left: 16px">立即解冻 <a-icon type="right" /></a>
13+
{{ $t('result.fail.error.hint-text1') }}
14+
<a style="margin-left: 16px">{{ $t('result.fail.error.hint-btn1') }} <a-icon type="right" /></a>
1515
</div>
1616
<div>
1717
<a-icon type="close-circle-o" style="color: #f5222d; margin-right: 8px"/>
18-
您的账户还不具备申请资格
19-
<a style="margin-left: 16px">立即升级 <a-icon type="right" /></a>
18+
{{ $t('result.fail.error.hint-text2') }}
19+
<a style="margin-left: 16px">{{ $t('result.fail.error.hint-btn2') }} <a-icon type="right" /></a>
2020
</div>
2121
</div>
2222
</a-result>
@@ -27,10 +27,12 @@
2727
2828
export default {
2929
name: 'Error',
30-
data () {
31-
return {
32-
title: '提交失败',
33-
description: '请核对并修改以下信息后,再重新提交。'
30+
computed: {
31+
result () {
32+
return {
33+
title: this.$t('result.fail.error.title'),
34+
description: this.$t('result.fail.error.description')
35+
}
3436
}
3537
}
3638
}

src/views/result/Success.vue

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
<template>
22
<a-card :bordered="false">
3-
<a-result status="success" :sub-title="description" :title="title">
3+
<a-result status="success" :title="result.title" :sub-title="result.description">
44
<template #extra>
5-
<a-button type="primary">返回列表</a-button>
6-
<a-button style="margin-left: 8px">查看项目</a-button>
7-
<a-button style="margin-left: 8px">打印</a-button>
5+
<a-button type="primary">{{ $t('result.success.btn-return') }}</a-button>
6+
<a-button style="margin-left: 8px">{{ $t('result.success.btn-project') }}</a-button>
7+
<a-button style="margin-left: 8px">{{ $t('result.success.btn-print') }}</a-button>
88
</template>
99
<div class="content">
10-
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
10+
<div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">{{ $t('result.success.operate-title') }}</div>
1111
<a-row style="margin-bottom: 16px">
1212
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
13-
<span style="color: rgba(0, 0, 0, 0.85)">项目 ID:</span>
13+
<span style="color: rgba(0, 0, 0, 0.85)">{{ $t('result.success.operate-id') }}:</span>
1414
20180724089
1515
</a-col>
1616
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
17-
<span style="color: rgba(0, 0, 0, 0.85)">负责人:</span>
17+
<span style="color: rgba(0, 0, 0, 0.85)">{{ $t('result.success.principal') }}:</span>
1818
曲丽丽是谁?
1919
</a-col>
2020
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
21-
<span style="color: rgba(0, 0, 0, 0.85)">生效时间:</span>
21+
<span style="color: rgba(0, 0, 0, 0.85)">{{ $t('result.success.operate-time') }}:</span>
2222
2016-12-12 ~ 2017-12-12
2323
</a-col>
2424
</a-row>
2525
<a-steps :current="1" :direction="isMobile && directionType.vertical || directionType.horizontal" progressDot>
26-
<a-step >
27-
<span style="font-size: 14px" slot="title">创建项目</span>
26+
<a-step :title="$t('result.success.step1-title')">
27+
<span style="font-size: 14px" slot="title">{{ $t('result.success.step1-title') }}</span>
2828
<template slot="description">
2929
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;text-align: left;" slot="description" >
3030
<div style="margin: 8px 0 4px">
@@ -35,8 +35,8 @@
3535
</div>
3636
</template>
3737
</a-step>
38-
<a-step title="部门初审">
39-
<span style="font-size: 14px" slot="title">部门初审</span>
38+
<a-step :title="$t('result.success.step2-title')">
39+
<span style="font-size: 14px" slot="title">{{ $t('result.success.step2-title') }}</span>
4040
<template slot="description">
4141
<div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;text-align: left;" slot="description" >
4242
<div style="margin: 8px 0 4px">
@@ -47,11 +47,11 @@
4747
</div>
4848
</template>
4949
</a-step>
50-
<a-step title="财务复核">
51-
<span style="font-size: 14px" slot="title">财务复核</span>
50+
<a-step :title="$t('result.success.step3-title')">
51+
<span style="font-size: 14px" slot="title">{{ $t('result.success.step3-title') }}</span>
5252
</a-step>
53-
<a-step title="完成" >
54-
<span style="font-size: 14px" slot="title">完成</span>
53+
<a-step :title="$t('result.success.step4-title')" >
54+
<span style="font-size: 14px" slot="title">{{ $t('result.success.step4-title') }}</span>
5555
</a-step>
5656
</a-steps>
5757
</div>
@@ -73,11 +73,16 @@ export default {
7373
data () {
7474
this.directionType = directionType
7575
return {
76-
title: '提交成功',
77-
description: '提交结果页用于反馈一系列操作任务的处理结果,\n' +
78-
' 如果仅是简单操作,使用 Message 全局提示反馈即可。\n' +
79-
' 本文字区域可以展示简单的补充说明,如果有类似展示\n' +
80-
' “单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。'
76+
// title: this.$t('result.success.title'),
77+
// description: this.$t('result.success.description')
78+
}
79+
},
80+
computed: {
81+
result () {
82+
return {
83+
title: this.$t('result.success.title'),
84+
description: this.$t('result.success.description')
85+
}
8186
}
8287
}
8388
}

0 commit comments

Comments
 (0)