style: 优化 GiForm 表单使用代码

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,15 +40,20 @@ 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,
   },
   {
@@ -56,10 +61,6 @@ const columns: ColumnItem[] = reactive([
     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" />

src/views/system/storage/StorageAddModal.vue

@@ -135,9 +135,6 @@ const columns: ColumnItem[] = reactive([
     field: 'description',
     type: 'textarea',
     span: 24,
-    props: {
-      maxLength: 200,
-    },
   },
   {
     label: '状态',

src/views/system/user/UserAddDrawer.vue

@@ -48,36 +48,32 @@ const columns: ColumnItem[] = reactive([
     field: 'username',
     type: 'input',
     span: 24,
+    required: true,
     props: {
       maxLength: 64,
-      showWordLimit: true,
     },
-    rules: [{ required: true, message: '请输入用户名' }],
   },
   {
     label: '昵称',
     field: 'nickname',
     type: 'input',
     span: 24,
+    required: true,
     props: {
       maxLength: 30,
-      showWordLimit: true,
     },
-    rules: [{ required: true, message: '请输入昵称' }],
   },
   {
     label: '密码',
     field: 'password',
     type: 'input-password',
     span: 24,
+    required: true,
     props: {
       maxLength: 32,
       showWordLimit: true,
     },
-    rules: [{ required: true, message: '请输入密码' }],
-    hide: () => {
-      return isUpdate.value
-    },
+    hide: () => isUpdate.value,
   },
   {
     label: '手机号码',
@@ -111,6 +107,7 @@ const columns: ColumnItem[] = reactive([
     field: 'deptId',
     type: 'tree-select',
     span: 24,
+    required: true,
     props: {
       data: deptList,
       allowClear: true,
@@ -123,31 +120,25 @@ const columns: ColumnItem[] = reactive([
         return false
       },
     },
-    rules: [{ required: true, message: '请选择所属部门' }],
   },
   {
     label: '角色',
     field: 'roleIds',
     type: 'select',
     span: 24,
+    required: true,
     props: {
       options: roleList,
       multiple: true,
       allowClear: true,
       allowSearch: true,
     },
-    rules: [{ required: true, message: '请选择角色' }],
   },
   {
     label: '描述',
     field: 'description',
     type: 'textarea',
     span: 24,
-    props: {
-      maxLength: 200,
-      showWordLimit: true,
-      autoSize: { minRows: 3, maxRows: 5 },
-    },
   },
   {
     label: '状态',

src/views/system/user/UserResetPwdModal.vue

@@ -33,7 +33,7 @@ const formRef = ref<InstanceType<typeof GiForm>>()
 const [form, resetForm] = useResetReactive({})
 
 const columns: ColumnItem[] = reactive([
-  { label: '密码', field: 'newPassword', type: 'input-password', span: 24, rules: [{ required: true, message: '请输入密码' }] },
+  { label: '密码', field: 'newPassword', type: 'input-password', span: 24, required: true },
 ])
 
 // 重置

src/views/system/user/UserUpdateRoleModal.vue

@@ -39,13 +39,13 @@ const columns: ColumnItem[] = reactive([
     field: 'roleIds',
     type: 'select',
     span: 24,
+    required: true,
     props: {
       options: roleList,
       multiple: true,
       allowClear: true,
       allowSearch: { retainInputValue: true },
     },
-    rules: [{ required: true, message: '请选择角色' }],
   },
 ])