👣 提供ant原生表格组件模板基本完成

kicc-ui/src/views/system/config/ConfigModal.vue

@@ -1,47 +1,72 @@
 <template>
   <BasicModal v-bind="$attrs"
               :width="720"
+              :height="500"
               @register="registerModal"
               @ok="handleSubmit"
   >
     <AForm ref="formElRef"
-           :labelCol="{ span: 4 }"
+           :labelCol="{ style: { width: '120px' } }"
+           :wrapperCol="{ style: { width: '100%' } }"
            :model="state.modelRef"
            :rules="state.rulesRef"
+           :scrollToFirstError="true"
     >
-      <AFormItem v-bind="validateInfos.name"
-                 label="参数名称"
-                 name="name"
-      >
-        <a-input v-model:value="state.modelRef.name"/>
-      </AFormItem>
-      <AFormItem v-bind="validateInfos.key"
-                 name="key"
-                 label="参数键名"
-      >
-        <Input v-model:value="state.modelRef.key"/>
-      </AFormItem>
-      <AFormItem v-bind="validateInfos.value"
-                 name="value"
-                 label="参数键值"
-      >
-        <Input v-model:value="state.modelRef.value"/>
-      </AFormItem>
-      <AFormItem v-bind="validateInfos.isSys"
-                 name="isSys"
-                 label="系统内置"
-      >
-        <ARadioGroup v-model:value="state.modelRef.isSys">
-          <ARadio value="0">是</ARadio>
-          <ARadio value="1">否</ARadio>
-        </ARadioGroup>
-      </AFormItem>
-      <AFormItem v-bind="validateInfos.remarks"
-                 name="remarks"
-                 label="备注"
-      >
-        <ATextarea v-model:value="state.modelRef.remarks"/>
-      </AFormItem>
+      <ARow justify="center">
+        <ACol :span="12">
+          <AFormItem v-bind="validateInfos.name"
+                     label="参数名称"
+                     name="name"
+          >
+            <a-input v-model:value="state.modelRef.name"
+                     placeholder="请输入参数名称"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="12">
+          <AFormItem v-bind="validateInfos.key"
+                     name="key"
+                     label="参数键名"
+          >
+            <a-input v-model:value="state.modelRef.key"
+                     placeholder="请输入参数名称"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="12">
+          <AFormItem v-bind="validateInfos.value"
+                     name="value"
+                     label="参数键值"
+          >
+            <a-input v-model:value="state.modelRef.value"
+                     placeholder="请输入参数名称"
+            />
+          </AFormItem>
+        </ACol>
+        <ACol :span="12">
+          <AFormItem v-bind="validateInfos.isSys"
+                     name="isSys"
+                     label="系统内置"
+          >
+            <ARadioGroup v-model:value="state.modelRef.isSys">
+              <ARadio value="0">是</ARadio>
+              <ARadio value="1">否</ARadio>
+            </ARadioGroup>
+          </AFormItem>
+        </ACol>
+        <ACol>
+          <AFormItem v-bind="validateInfos.remarks"
+                     name="remarks"
+                     label="备注"
+          >
+            <ATextarea v-model:value="state.modelRef.remarks"
+                       placeholder="请输入参数备注"
+                       :rows="6"
+                       allowClear
+            />
+          </AFormItem>
+        </ACol>
+      </ARow>
     </AForm>
   </BasicModal>
 </template>
@@ -57,7 +82,7 @@
    * author entfrm开发团队-王翔
    */
   import { reactive } from 'vue';
-  import { Form, Input, Radio } from 'ant-design-vue';
+  import { Form, Input, Radio, Row, Col } from 'ant-design-vue';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
   import { getConfig, addConfig, editConfig } from '/@/api/platform/system/controller/config';
 
@@ -81,6 +106,8 @@
   const ATextarea = Input.TextArea;
   const ARadio = Radio;
   const ARadioGroup = Radio.Group;
+  const ARow = Row;
+  const ACol = Col;
 
   const useForm = AForm.useForm;
   const state = reactive<WindowState>({