Skip to content

Commit 3aa5106

Browse files
liuruibinliuruibin
committed
refactor: Password input constractor
1 parent 51a29a9 commit 3aa5106

File tree

8 files changed

+214
-21
lines changed

8 files changed

+214
-21
lines changed

‎ui/src/components/dynamics-form/constructor/data.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ const input_type_list = [
44
label: t('dynamicsForm.input_type_list.TextInput'),
55
value: 'TextInput'
66
},
7+
{
8+
label: t('dynamicsForm.input_type_list.PasswordInput'),
9+
value: 'PasswordInput'
10+
},
711
{
812
label: t('dynamicsForm.input_type_list.Slider'),
913
value: 'Slider'

‎ui/src/components/dynamics-form/constructor/items/PasswordInputConstructor.vue‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<template>
2+
<el-form-item :label="$t('dynamicsForm.TextInput.length.label')" required>
3+
<el-row class="w-full">
4+
<el-col :span="11">
5+
<el-form-item
6+
:rules="[
7+
{
8+
required: true,
9+
message: $t('dynamicsForm.TextInput.length.minRequired'),
10+
trigger: 'change'
11+
}
12+
]"
13+
prop="minlength"
14+
>
15+
<el-input-number
16+
style="width: 100%"
17+
:min="1"
18+
:step="1"
19+
step-strictly
20+
v-model="formValue.minlength"
21+
controls-position="right"
22+
/>
23+
</el-form-item>
24+
</el-col>
25+
<el-col :span="2" class="text-center">
26+
<span>-</span>
27+
</el-col>
28+
<el-col :span="11">
29+
<el-form-item
30+
:rules="[
31+
{
32+
required: true,
33+
message: $t('dynamicsForm.TextInput.length.maxRequired'),
34+
trigger: 'change'
35+
}
36+
]"
37+
prop="maxlength"
38+
>
39+
<el-input-number
40+
style="width: 100%"
41+
:min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
42+
step-strictly
43+
:step="1"
44+
v-model="formValue.maxlength"
45+
controls-position="right"
46+
/>
47+
</el-form-item>
48+
</el-col>
49+
</el-row>
50+
</el-form-item>
51+
52+
<el-form-item
53+
class="defaultValueItem"
54+
:required="formValue.required"
55+
prop="default_value"
56+
:label="$t('dynamicsForm.default.label')"
57+
:rules="
58+
formValue.required ? [{ required: true, message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}` }, ...rules] : rules
59+
"
60+
>
61+
<div class="defaultValueCheckbox">
62+
<el-checkbox
63+
v-model="formValue.show_default_value"
64+
:label="$t('dynamicsForm.default.show')"
65+
/>
66+
</div>
67+
68+
<el-input
69+
v-model="formValue.default_value"
70+
:maxlength="formValue.maxlength"
71+
:minlength="formValue.minlength"
72+
:placeholder="$t('dynamicsForm.default.placeholder')"
73+
show-word-limit
74+
type="password"
75+
show-password
76+
/>
77+
</el-form-item>
78+
</template>
79+
<script setup lang="ts">
80+
import { computed, onMounted, watch } from 'vue'
81+
import { t } from '@/locales'
82+
83+
const props = defineProps<{
84+
modelValue: any
85+
}>()
86+
const emit = defineEmits(['update:modelValue'])
87+
const formValue = computed({
88+
set: (item) => {
89+
emit('update:modelValue', item)
90+
},
91+
get: () => {
92+
return props.modelValue
93+
}
94+
})
95+
watch(
96+
() => formValue.value.minlength,
97+
() => {
98+
if (formValue.value.minlength > formValue.value.maxlength) {
99+
formValue.value.maxlength = formValue.value.minlength
100+
}
101+
}
102+
)
103+
const getData = () => {
104+
return {
105+
input_type: 'PasswordInput',
106+
attrs: {
107+
maxlength: formValue.value.maxlength,
108+
minlength: formValue.value.minlength,
109+
'show-word-limit': true,
110+
type: 'password',
111+
'show-password': true
112+
},
113+
default_value: formValue.value.default_value,
114+
show_default_value: formValue.value.show_default_value,
115+
props_info: {
116+
rules: formValue.value.required
117+
? [
118+
{
119+
required: true,
120+
message: `${formValue.value.label} ${t('dynamicsForm.default.requiredMessage')}`
121+
},
122+
{
123+
min: formValue.value.minlength,
124+
max: formValue.value.maxlength,
125+
message: `${formValue.value.label}${t('dynamicsForm.TextInput.length.requiredMessage1')} ${formValue.value.minlength} ${t('dynamicsForm.TextInput.length.requiredMessage2')} ${formValue.value.maxlength} ${t('dynamicsForm.TextInput.length.requiredMessage3')}`,
126+
trigger: 'blur'
127+
}
128+
]
129+
: [
130+
{
131+
min: formValue.value.minlength,
132+
max: formValue.value.maxlength,
133+
message: `${formValue.value.label}${t('dynamicsForm.TextInput.length.requiredMessage1')} ${formValue.value.minlength} ${t('dynamicsForm.TextInput.length.requiredMessage2')} ${formValue.value.maxlength} ${t('dynamicsForm.TextInput.length.requiredMessage3')}`,
134+
trigger: 'blur'
135+
}
136+
]
137+
}
138+
}
139+
}
140+
const rander = (form_data: any) => {
141+
const attrs = form_data.attrs || {}
142+
formValue.value.minlength = attrs.minlength
143+
formValue.value.maxlength = attrs.maxlength
144+
formValue.value.default_value = form_data.default_value
145+
formValue.value.show_default_value = form_data.show_default_value
146+
formValue.value.show_password = attrs['show-password']
147+
}
148+
const rangeRules = [
149+
{
150+
required: true,
151+
validator: (rule: any, value: any, callback: any) => {
152+
if (!formValue.value.minlength) {
153+
callback(new Error(t('dynamicsForm.TextInput.length.requiredMessage4')))
154+
}
155+
if (!formValue.value.maxlength) {
156+
callback(new Error(t('dynamicsForm.TextInput.length.requiredMessage4')))
157+
}
158+
return true
159+
},
160+
message: `${formValue.value.label} ${t('dynamicsForm.default.requiredMessage')}`
161+
}
162+
]
163+
const rules = computed(() => [
164+
{
165+
min: formValue.value.minlength,
166+
max: formValue.value.maxlength,
167+
message: `${t('dynamicsForm.TextInput.length.requiredMessage1')} ${formValue.value.minlength} ${t('dynamicsForm.TextInput.length.requiredMessage2')} ${formValue.value.maxlength} ${t('dynamicsForm.TextInput.length.requiredMessage3')}`,
168+
trigger: 'blur'
169+
}
170+
])
171+
172+
defineExpose({ getData, rander })
173+
onMounted(() => {
174+
formValue.value.minlength = 0
175+
formValue.value.maxlength = 20
176+
formValue.value.default_value = ''
177+
formValue.value.show_password = true
178+
179+
if (formValue.value.show_default_value === undefined) {
180+
formValue.value.show_default_value = true
181+
}
182+
})
183+
</script>
184+
<style lang="scss" scoped>
185+
.defaultValueItem {
186+
position: relative;
187+
188+
.defaultValueCheckbox {
189+
position: absolute;
190+
right: 0;
191+
top: -35px;
192+
}
193+
}
194+
</style>

‎ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
11
<template>
2-
<el-form-item
3-
class="defaultValueItem"
4-
prop="show_password"
5-
:label="$t('dynamicsForm.TextInput.showPassword')"
6-
>
7-
<el-switch v-model="formValue.show_password" />
8-
</el-form-item>
92
<el-form-item :label="$t('dynamicsForm.TextInput.length.label')" required>
103
<el-row class="w-full">
114
<el-col :span="11">
@@ -77,8 +70,7 @@
7770
:minlength="formValue.minlength"
7871
:placeholder="$t('dynamicsForm.default.placeholder')"
7972
show-word-limit
80-
:type="formValue.show_password ? 'password' : 'text'"
81-
:show-password="formValue.show_password"
73+
type="text"
8274
/>
8375
</el-form-item>
8476
</template>
@@ -111,9 +103,7 @@ const getData = () => {
111103
attrs: {
112104
maxlength: formValue.value.maxlength,
113105
minlength: formValue.value.minlength,
114-
'show-word-limit': true,
115-
type: formValue.value.show_password ? 'password' : 'text',
116-
'show-password': formValue.value.show_password
106+
'show-word-limit': true
117107
},
118108
default_value: formValue.value.default_value,
119109
show_default_value: formValue.value.show_default_value,
@@ -145,7 +135,6 @@ const rander = (form_data: any) => {
145135
formValue.value.maxlength = attrs.maxlength
146136
formValue.value.default_value = form_data.default_value
147137
formValue.value.show_default_value = form_data.show_default_value
148-
formValue.value.show_password = attrs['show-password']
149138
}
150139
const rangeRules = [
151140
{
@@ -176,8 +165,7 @@ onMounted(() => {
176165
formValue.value.minlength = 0
177166
formValue.value.maxlength = 20
178167
formValue.value.default_value = ''
179-
formValue.value.show_password = false
180-
168+
// console.log(formValue.value.show_default_value)
181169
if (formValue.value.show_default_value === undefined) {
182170
formValue.value.show_default_value = true
183171
}

‎ui/src/locales/lang/en-US/dynamics-form.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export default {
22
input_type_list: {
33
TextInput: 'Input',
4+
PasswordInput: 'Password',
45
Slider: 'Slider',
56
SwitchInput: 'Switch',
67
SingleSelect: 'Single Select',
@@ -96,7 +97,6 @@ export default {
9697
requiredMessage2: 'and',
9798
requiredMessage3: 'characters',
9899
requiredMessage4: 'Text length is a required parameter'
99-
},
100-
showPassword: 'Show Password'
100+
}
101101
}
102102
}

‎ui/src/locales/lang/zh-CN/dynamics-form.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export default {
22
input_type_list: {
33
TextInput: '文本框',
4+
PasswordInput: '密码框',
45
Slider: '滑块',
56
SwitchInput: '开关',
67
SingleSelect: '单选框',
@@ -96,7 +97,6 @@ export default {
9697
requiredMessage2: '到',
9798
requiredMessage3: '个字符',
9899
requiredMessage4: '文本长度为必填参数'
99-
},
100-
showPassword: '密文显示'
100+
}
101101
}
102102
}

‎ui/src/locales/lang/zh-Hant/dynamics-form.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export default {
22
input_type_list: {
33
TextInput: '文字框',
4+
PasswordInput: '密文框',
45
Slider: '滑桿',
56
SwitchInput: '開關',
67
SingleSelect: '單選框',
@@ -96,7 +97,6 @@ export default {
9697
requiredMessage2: '到',
9798
requiredMessage3: '個字元',
9899
requiredMessage4: '文字長度為必填參數'
99-
},
100-
showPassword: '密文顯示'
100+
}
101101
}
102102
}

‎ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ const currentRow = computed(() => {
123123
const currentIndex = ref(null)
124124
const inputTypeList = ref([
125125
{ label: t('dynamicsForm.input_type_list.TextInput'), value: 'TextInputConstructor' },
126+
{ label: t('dynamicsForm.input_type_list.PasswordInput'), value: 'PasswordInputConstructor' },
126127
{ label: t('dynamicsForm.input_type_list.SingleSelect'), value: 'SingleSelectConstructor' },
127128
{ label: t('dynamicsForm.input_type_list.MultiSelect'), value: 'MultiSelectConstructor' },
128129
{ label: t('dynamicsForm.input_type_list.RadioCard'), value: 'RadioCardConstructor' },

‎ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
<el-tag type="info" class="info-tag" v-if="row.input_type === 'TextInput'">{{
5050
$t('dynamicsForm.input_type_list.TextInput')
5151
}}</el-tag>
52+
<el-tag type="info" class="info-tag" v-if="row.input_type === 'PasswordInput'">{{
53+
$t('dynamicsForm.input_type_list.PasswordInput')
54+
}}</el-tag>
5255
<el-tag type="info" class="info-tag" v-if="row.input_type === 'Slider'">{{
5356
$t('dynamicsForm.input_type_list.Slider')
5457
}}</el-tag>
@@ -169,6 +172,9 @@ function refreshFieldTitle(data: any) {
169172
}
170173
171174
const getDefaultValue = (row: any) => {
175+
if(row.input_type === 'PasswordInput') {
176+
return '******'
177+
}
172178
if (row.default_value) {
173179
const default_value = row.option_list
174180
?.filter((v: any) => row.default_value.indexOf(v.value) > -1)

0 commit comments

Comments
 (0)