From a16968d6e5aac83b23b4faed3ed6a7b18213cf29 Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Tue, 18 Feb 2025 11:54:02 +0800
Subject: [PATCH] feat: Supports user input field type password
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--story=1017895 --user=刘瑞斌 【用户输入】- 组件类型为文本框类型的支持密文显示#2134 https://www.tapd.cn/57709429/s/1655257
---
 .../constructor/items/TextInputConstructor.vue | 18 +++++++++++++++---
 ui/src/locales/lang/en-US/dynamics-form.ts     |  3 ++-
 ui/src/locales/lang/zh-CN/dynamics-form.ts     |  3 ++-
 ui/src/locales/lang/zh-Hant/dynamics-form.ts   |  3 ++-
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue b/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
index fd6f253db..ccac26de6 100644
--- a/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
@@ -1,4 +1,11 @@
 <template>
+  <el-form-item
+    class="defaultValueItem"
+    prop="show_password"
+    :label="$t('dynamicsForm.TextInput.showPassword')"
+  >
+    <el-switch v-model="formValue.show_password" />
+  </el-form-item>
   <el-form-item :label="$t('dynamicsForm.TextInput.length.label')" required>
     <el-row class="w-full">
       <el-col :span="11">
@@ -70,7 +77,8 @@
       :minlength="formValue.minlength"
       :placeholder="$t('dynamicsForm.default.placeholder')"
       show-word-limit
-      type="text"
+      :type="formValue.show_password ? 'password' : 'text'"
+      :show-password="formValue.show_password"
     />
   </el-form-item>
 </template>
@@ -103,7 +111,9 @@ const getData = () => {
     attrs: {
       maxlength: formValue.value.maxlength,
       minlength: formValue.value.minlength,
-      'show-word-limit': true
+      'show-word-limit': true,
+      type: formValue.value.show_password ? 'password' : 'text',
+      'show-password': formValue.value.show_password
     },
     default_value: formValue.value.default_value,
     show_default_value: formValue.value.show_default_value,
@@ -135,6 +145,7 @@ const rander = (form_data: any) => {
   formValue.value.maxlength = attrs.maxlength
   formValue.value.default_value = form_data.default_value
   formValue.value.show_default_value = form_data.show_default_value
+  formValue.value.show_password = attrs['show-password']
 }
 const rangeRules = [
   {
@@ -165,7 +176,8 @@ onMounted(() => {
   formValue.value.minlength = 0
   formValue.value.maxlength = 20
   formValue.value.default_value = ''
-  console.log(formValue.value.show_default_value)
+  formValue.value.show_password = false
+
   if (formValue.value.show_default_value === undefined) {
     formValue.value.show_default_value = true
   }
diff --git a/ui/src/locales/lang/en-US/dynamics-form.ts b/ui/src/locales/lang/en-US/dynamics-form.ts
index d6b1f7d06..9e1c4c24d 100644
--- a/ui/src/locales/lang/en-US/dynamics-form.ts
+++ b/ui/src/locales/lang/en-US/dynamics-form.ts
@@ -96,6 +96,7 @@ export default {
       requiredMessage2: 'and',
       requiredMessage3: 'characters',
       requiredMessage4: 'Text length is a required parameter'
-    }
+    },
+    showPassword: 'Show Password'
   }
 }
diff --git a/ui/src/locales/lang/zh-CN/dynamics-form.ts b/ui/src/locales/lang/zh-CN/dynamics-form.ts
index 112114c22..31b0180df 100644
--- a/ui/src/locales/lang/zh-CN/dynamics-form.ts
+++ b/ui/src/locales/lang/zh-CN/dynamics-form.ts
@@ -96,6 +96,7 @@ export default {
       requiredMessage2: '到',
       requiredMessage3: '个字符',
       requiredMessage4: '文本长度为必填参数'
-    }
+    },
+    showPassword: '密文显示'
   }
 }
diff --git a/ui/src/locales/lang/zh-Hant/dynamics-form.ts b/ui/src/locales/lang/zh-Hant/dynamics-form.ts
index 3ce716352..750cd4296 100644
--- a/ui/src/locales/lang/zh-Hant/dynamics-form.ts
+++ b/ui/src/locales/lang/zh-Hant/dynamics-form.ts
@@ -96,6 +96,7 @@ export default {
       requiredMessage2: '到',
       requiredMessage3: '個字元',
       requiredMessage4: '文字長度為必填參數'
-    }
+    },
+    showPassword: '密文顯示'
   }
 }