Skip to content

Commit 6bc6cea

Browse files
0xJacky0xJacky
committed
enhance: added error prompt in form
1 parent f305701 commit 6bc6cea

File tree

13 files changed

+129
-74
lines changed

13 files changed

+129
-74
lines changed

‎frontend/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,5 +78,6 @@ declare module '@vue/runtime-core' {
7878
StdDataEntryComponentsStdPassword: typeof import('./src/components/StdDataEntry/components/StdPassword.vue')['default']
7979
StdDataEntryComponentsStdSelect: typeof import('./src/components/StdDataEntry/components/StdSelect.vue')['default']
8080
StdDataEntryComponentsStdSelector: typeof import('./src/components/StdDataEntry/components/StdSelector.vue')['default']
81+
StdDataEntryStdFormItem: typeof import('./src/components/StdDataEntry/StdFormItem.vue')['default']
8182
}
8283
}

‎frontend/src/components/StdDataDisplay/StdCurd.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ const props = defineProps({
4646
},
4747
beforeSave: {
4848
type: Function,
49-
default: null
49+
default: () => {
50+
}
5051
},
5152
exportCsv: {
5253
type: Boolean,
@@ -104,11 +105,11 @@ function clear_error() {
104105
105106
const ok = async () => {
106107
clear_error()
107-
await props?.beforeSave?.(data)
108+
await props?.beforeSave!?.(data)
108109
props.api!.save(data.id, data).then((r: any) => {
109110
message.success($gettext('Save Successfully'))
110111
Object.assign(data, r)
111-
const t: Table | null = table.value
112+
const t: Table = table.value!
112113
t!.get_list()
113114
114115
}).catch((e: any) => {
@@ -189,7 +190,7 @@ const selectedRowKeys = ref([])
189190
</template>
190191

191192
<style lang="less" scoped>
192-
.before-edit:last-child {
193-
margin-bottom: 10px;
193+
:deep(.before-edit:last-child) {
194+
margin-bottom: 20px;
194195
}
195196
</style>

‎frontend/src/components/StdDataEntry/StdDataEntry.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {defineComponent} from 'vue'
2-
import {Form, FormItem} from 'ant-design-vue'
2+
import {Form} from 'ant-design-vue'
3+
import StdFormItem from '@/components/StdDataEntry/StdFormItem.vue'
34
import './style.less'
45

56
export default defineComponent({
@@ -11,9 +12,9 @@ export default defineComponent({
1112
props.dataList.forEach((v: any) => {
1213
if (v.edit.type) {
1314
template.push(
14-
<FormItem label={v.title()} extra={v.extra}>
15+
<StdFormItem dataIndex={v.dataIndex} label={v.title()} extra={v.extra} error={props.error}>
1516
{v.edit.type(v.edit, props.dataSource, v.dataIndex)}
16-
</FormItem>
17+
</StdFormItem>
1718
)
1819
}
1920
})

‎frontend/src/components/StdDataEntry/StdFormItem.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script setup lang="ts">
2+
import {computed} from 'vue'
3+
import {useGettext} from 'vue3-gettext'
4+
5+
const {$gettext} = useGettext()
6+
7+
export interface Props {
8+
dataIndex?: string
9+
label?: string
10+
extra?: string
11+
error?: any
12+
}
13+
14+
const props = defineProps<Props>()
15+
16+
const tag = computed(() => {
17+
return props.error?.[props.dataIndex] ?? ''
18+
})
19+
20+
const valid_status = computed(() => {
21+
if (!!tag.value) {
22+
return 'error'
23+
} else {
24+
return 'success'
25+
}
26+
})
27+
28+
const help = computed(() => {
29+
if (tag.value.indexOf('required') > -1) {
30+
return () => $gettext('This field should not be empty')
31+
}
32+
return () => {
33+
}
34+
})
35+
</script>
36+
37+
<template>
38+
<a-form-item :label="label" :extra="extra" :validate-status="valid_status" :help="help?.()"
39+
:required="tag.indexOf('required')>-1">
40+
<slot/>
41+
</a-form-item>
42+
</template>
43+
44+
<style scoped lang="less">
45+
46+
</style>

‎frontend/src/language/en/app.po‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ msgstr ""
2323
msgid "Action"
2424
msgstr "Action"
2525

26-
#: src/components/StdDataDisplay/StdCurd.vue:146
26+
#: src/components/StdDataDisplay/StdCurd.vue:147
2727
#: src/components/StdDataDisplay/StdCurd.vue:25
2828
#: src/views/domain/ngx_conf/config_template/ConfigTemplate.vue:28
2929
#: src/views/domain/ngx_conf/NgxConfigEditor.vue:47
@@ -1112,7 +1112,7 @@ msgstr "Save error %{msg}"
11121112
msgid "Save successfully"
11131113
msgstr "Saved successfully"
11141114

1115-
#: src/components/StdDataDisplay/StdCurd.vue:109
1115+
#: src/components/StdDataDisplay/StdCurd.vue:110
11161116
#, fuzzy
11171117
msgid "Save Successfully"
11181118
msgstr "Saved successfully"
@@ -1276,6 +1276,10 @@ msgstr ""
12761276
msgid "This auto-cert item is invalid, please remove it."
12771277
msgstr ""
12781278

1279+
#: src/components/StdDataEntry/StdFormItem.vue:30
1280+
msgid "This field should not be empty"
1281+
msgstr ""
1282+
12791283
#: src/views/domain/ngx_conf/NgxConfigEditor.vue:31
12801284
msgid ""
12811285
"To make sure the certification auto-renewal can work normally, we need to "

‎frontend/src/language/messages.pot‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ msgstr ""
1919
msgid "Action"
2020
msgstr ""
2121

22-
#: src/components/StdDataDisplay/StdCurd.vue:146
22+
#: src/components/StdDataDisplay/StdCurd.vue:147
2323
#: src/components/StdDataDisplay/StdCurd.vue:25
2424
#: src/views/domain/ngx_conf/config_template/ConfigTemplate.vue:28
2525
#: src/views/domain/ngx_conf/NgxConfigEditor.vue:47
@@ -1149,7 +1149,7 @@ msgstr ""
11491149
msgid "Save successfully"
11501150
msgstr ""
11511151

1152-
#: src/components/StdDataDisplay/StdCurd.vue:109
1152+
#: src/components/StdDataDisplay/StdCurd.vue:110
11531153
msgid "Save Successfully"
11541154
msgstr ""
11551155

@@ -1305,6 +1305,10 @@ msgstr ""
13051305
msgid "This auto-cert item is invalid, please remove it."
13061306
msgstr ""
13071307

1308+
#: src/components/StdDataEntry/StdFormItem.vue:30
1309+
msgid "This field should not be empty"
1310+
msgstr ""
1311+
13081312
#: src/views/domain/ngx_conf/NgxConfigEditor.vue:31
13091313
msgid "To make sure the certification auto-renewal can work normally, we need to add a location which can proxy the request from authority to backend, and we need to save this file and reload the Nginx. Are you sure you want to continue?"
13101314
msgstr ""

‎frontend/src/language/translations.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎frontend/src/language/zh_CN/app.mo‎

69 Bytes
Binary file not shown.

‎frontend/src/language/zh_CN/app.po‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ msgstr "访问日志"
2626
msgid "Action"
2727
msgstr "操作"
2828

29-
#: src/components/StdDataDisplay/StdCurd.vue:146
29+
#: src/components/StdDataDisplay/StdCurd.vue:147
3030
#: src/components/StdDataDisplay/StdCurd.vue:25
3131
#: src/views/domain/ngx_conf/config_template/ConfigTemplate.vue:28
3232
#: src/views/domain/ngx_conf/NgxConfigEditor.vue:47
@@ -1086,7 +1086,7 @@ msgstr "保存错误 %{msg}"
10861086
msgid "Save successfully"
10871087
msgstr "保存成功"
10881088

1089-
#: src/components/StdDataDisplay/StdCurd.vue:109
1089+
#: src/components/StdDataDisplay/StdCurd.vue:110
10901090
msgid "Save Successfully"
10911091
msgstr "保存成功"
10921092

@@ -1237,6 +1237,10 @@ msgstr "主题"
12371237
msgid "This auto-cert item is invalid, please remove it."
12381238
msgstr "这个证书自动续期项目是无效的，请删除。"
12391239

1240+
#: src/components/StdDataEntry/StdFormItem.vue:30
1241+
msgid "This field should not be empty"
1242+
msgstr "该字段不能为空"
1243+
12401244
#: src/views/domain/ngx_conf/NgxConfigEditor.vue:31
12411245
msgid ""
12421246
"To make sure the certification auto-renewal can work normally, we need to "

‎frontend/src/language/zh_TW/app.po‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ msgstr "訪問日誌"
2727
msgid "Action"
2828
msgstr "操作"
2929

30-
#: src/components/StdDataDisplay/StdCurd.vue:146
30+
#: src/components/StdDataDisplay/StdCurd.vue:147
3131
#: src/components/StdDataDisplay/StdCurd.vue:25
3232
#: src/views/domain/ngx_conf/config_template/ConfigTemplate.vue:28
3333
#: src/views/domain/ngx_conf/NgxConfigEditor.vue:47
@@ -1087,7 +1087,7 @@ msgstr "儲存錯誤 %{msg}"
10871087
msgid "Save successfully"
10881088
msgstr "保存成功"
10891089

1090-
#: src/components/StdDataDisplay/StdCurd.vue:109
1090+
#: src/components/StdDataDisplay/StdCurd.vue:110
10911091
msgid "Save Successfully"
10921092
msgstr "保存成功"
10931093

@@ -1240,6 +1240,10 @@ msgstr "外觀樣式"
12401240
msgid "This auto-cert item is invalid, please remove it."
12411241
msgstr "此自動證書項無效，請將其刪除。"
12421242

1243+
#: src/components/StdDataEntry/StdFormItem.vue:30
1244+
msgid "This field should not be empty"
1245+
msgstr ""
1246+
12431247
#: src/views/domain/ngx_conf/NgxConfigEditor.vue:31
12441248
msgid ""
12451249
"To make sure the certification auto-renewal can work normally, we need to "

0 commit comments

Comments
 (0)