style: 优化 GiForm 表单使用代码

Author: Charles7c

src/components/GiForm/src/GiForm.vue

@@ -143,6 +143,7 @@ const getComponentBindProps = (item: ColumnItem) => {
   // 组件默认配置映射表
   const ConfigMap = new Map<ColumnItem['type'], Partial<ColumnItem['props'] & { placeholder: string }>>([
     ['input', { allowClear: true, placeholder: `请输入${item.label}`, maxLength: 255, showWordLimit: true }],
+    ['input-password', { placeholder: `请输入${item.label}` }],
     ['input-number', { placeholder: `请输入${item.label}` }],
     ['textarea', { allowClear: false, placeholder: `请输入${item.label}`, maxLength: 200, showWordLimit: true, autoSize: { minRows: 3, maxRows: 5 } }],
     ['input-tag', { allowClear: true, placeholder: `请输入${item.label}` }],

src/components/GiForm/src/type.ts

@@ -3,6 +3,7 @@ import type { VNode } from 'vue'
 
 export type ColumnItemType =
   | 'input'
+  | 'input-password'
   | 'input-number'
   | 'input-tag'
   | 'textarea'
@@ -29,6 +30,7 @@ export type ColumnItemType =
 
 export type ComponentProps =
   & A.InputInstance['$props']
+  & A.InputPasswordInstance['$props']
   & A.InputNumberInstance['$props']
   & A.InputTagInstance['$props']
   & A.TextareaInstance['$props']

src/views/code/generator/GenConfigDrawer.vue

@@ -149,11 +149,10 @@ const formColumns: ColumnItem[] = reactive([
     label: '作者名称',
     field: 'author',
     type: 'input',
+    required: true,
     props: {
       maxLength: 100,
-      showWordLimit: true,
     },
-    rules: [{ required: true, message: '请输入作者名称' }],
   },
   {
     label: '业务名称',
@@ -162,7 +161,6 @@ const formColumns: ColumnItem[] = reactive([
     props: {
       placeholder: '自定义业务名称，例如：用户',
       maxLength: 50,
-      showWordLimit: true,
     },
     rules: [{ required: true, message: '请输入业务名称' }],
   },
@@ -184,7 +182,6 @@ const formColumns: ColumnItem[] = reactive([
     props: {
       placeholder: '项目模块包名，例如：top.continew.admin.system',
       maxLength: 60,
-      showWordLimit: true,
     },
     rules: [{ required: true, message: '请输入模块包名' }],
   },
@@ -195,7 +192,6 @@ const formColumns: ColumnItem[] = reactive([
     props: {
       placeholder: '数据库表前缀，例如：sys_',
       maxLength: 20,
-      showWordLimit: true,
     },
   },
   {

src/views/open/app/AppAddModal.vue

@@ -42,7 +42,10 @@ const columns: ColumnItem[] = reactive([
     field: 'name',
     type: 'input',
     span: 24,
-    rules: [{ required: true, message: '请输入名称' }],
+    required: true,
+    props: {
+      maxLength: 100,
+    },
   },
   {
     label: '失效时间',
@@ -59,10 +62,6 @@ const columns: ColumnItem[] = reactive([
     field: 'description',
     type: 'textarea',
     span: 24,
-    props: {
-      maxLength: 200,
-      autoSize: { minRows: 3, maxRows: 5 },
-    },
   },
   {
     label: '状态',

src/views/setting/components/VerifyModel.vue

@@ -59,6 +59,9 @@ const columns: ColumnItem[] = reactive([
     field: 'phone',
     type: 'input',
     span: 24,
+    props: {
+      showWordLimit: false,
+    },
     rules: [
       { required: true, message: '请输入手机号' },
       { match: Regexp.Phone, message: '请输入正确的手机号' },

src/views/system/client/ClientAddModal.vue

@@ -53,21 +53,20 @@ const columns: ColumnItem[] = reactive([
     label: '终端 Key',
     field: 'clientKey',
     type: 'input',
-    rules: [{ required: true, message: '请输入终端 Key' }],
     span: 24,
-    disabled: () => {
-      return isUpdate.value
+    required: true,
+    props: {
+      maxLength: 32,
     },
+    disabled: () => isUpdate.value,
   },
   {
     label: '终端秘钥',
     field: 'clientSecret',
     type: 'input',
-    rules: [{ required: true, message: '请输入终端秘钥' }],
     span: 24,
-    disabled: () => {
-      return isUpdate.value
-    },
+    required: true,
+    disabled: () => isUpdate.value,
     slots: {
       append: () => (
         <a-button onClick={handleGenerate}>
@@ -83,12 +82,12 @@ const columns: ColumnItem[] = reactive([
     label: '认证类型',
     field: 'authType',
     type: 'select',
+    required: true,
     props: {
       options: auth_type_enum,
       multiple: true,
       maxTagCount: 2,
     },
-    rules: [{ required: true, message: '请选择认证类型' }],
   },
   {
     label: '终端类型',
@@ -97,7 +96,6 @@ const columns: ColumnItem[] = reactive([
     props: {
       options: client_type,
     },
-    rules: [{ required: true, message: '请选择终端类型' }],
   },
   {
     label: () => (
@@ -141,11 +139,11 @@ const columns: ColumnItem[] = reactive([
     label: '状态',
     field: 'status',
     type: 'radio-group',
+    required: true,
     props: {
       type: 'button',
       options: DisEnableStatusList,
     },
-    rules: [{ required: true, message: '请选择状态' }],
   },
 ])
 

src/views/system/dept/DeptAddModal.vue

@@ -103,10 +103,6 @@ const columns: ColumnItem[] = reactive([
     field: 'description',
     type: 'textarea',
     span: 24,
-    props: {
-      maxLength: 200,
-      autoSize: { minRows: 3, maxRows: 5 },
-    },
   },
   {
     label: '状态',

src/views/system/dict/DictItemAddModal.vue

@@ -53,14 +53,20 @@ const columns: ColumnItem[] = reactive([
     field: 'label',
     type: 'input',
     span: 24,
-    rules: [{ required: true, message: '请输入标签' }],
+    required: true,
+    props: {
+      maxLength: 30,
+    },
   },
   {
     label: '值',
     field: 'value',
     type: 'input',
     span: 24,
-    rules: [{ required: true, message: '请输入值' }],
+    required: true,
+    props: {
+      maxLength: 30,
+    },
   },
   {
     label: '标签颜色',
@@ -83,10 +89,6 @@ const columns: ColumnItem[] = reactive([
     field: 'description',
     type: 'textarea',
     span: 24,
-    props: {
-      maxLength: 200,
-      autoSize: { minRows: 3, maxRows: 5 },
-    },
   },
   {
     label: '状态',

src/views/system/dict/tree/DictAddModal.vue

@@ -40,26 +40,27 @@ const columns: ColumnItem[] = reactive([
     field: 'name',
     type: 'input',
     span: 24,
-    rules: [{ required: true, message: '请输入名称',
-    }],
+    required: true,
+    props: {
+      maxLength: 30,
+    },
   },
   {
     label: '编码',
     field: 'code',
     type: 'input',
     span: 24,
-    rules: [{ required: true, message: '请输入编码' }],
+    required: true,
+    props: {
+      maxLength: 30,
+    },
     disabled: () => isUpdate.value,
   },
   {
     label: '描述',
     field: 'description',
     type: 'textarea',
     span: 24,
-    props: {
-      maxLength: 200,
-      autoSize: { minRows: 3, maxRows: 5 },
-    },
   },
 ])
 

src/views/system/role/RoleAddDrawer.vue

@@ -12,10 +12,10 @@
       <fieldset>
         <legend>基础信息</legend>
         <a-form-item label="名称" field="name">
-          <a-input v-model.trim="form.name" placeholder="请输入名称" />
+          <a-input v-model.trim="form.name" placeholder="请输入名称" max-length="30" show-word-limit />
         </a-form-item>
         <a-form-item label="编码" field="code">
-          <a-input v-model.trim="form.code" placeholder="请输入编码" :disabled="isUpdate" />
+          <a-input v-model.trim="form.code" placeholder="请输入编码" max-length="30" show-word-limit :disabled="isUpdate" />
         </a-form-item>
         <a-form-item label="排序" field="sort">
           <a-input-number v-model="form.sort" placeholder="请输入排序" :min="1" mode="button" />