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

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

@@ -1,32 +1,49 @@
 <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"
     >
+      <ARow justify="center">
+        <ACol :span="12">
           <AFormItem v-bind="validateInfos.name"
                      label="参数名称"
                      name="name"
           >
-        <a-input v-model:value="state.modelRef.name"/>
+            <a-input v-model:value="state.modelRef.name"
+                     placeholder="请输入参数名称"
+            />
           </AFormItem>
+        </ACol>
+        <ACol :span="12">
           <AFormItem v-bind="validateInfos.key"
                      name="key"
                      label="参数键名"
           >
-        <Input v-model:value="state.modelRef.key"/>
+            <a-input v-model:value="state.modelRef.key"
+                     placeholder="请输入参数名称"
+            />
           </AFormItem>
+        </ACol>
+        <ACol :span="12">
           <AFormItem v-bind="validateInfos.value"
                      name="value"
                      label="参数键值"
           >
-        <Input v-model:value="state.modelRef.value"/>
+            <a-input v-model:value="state.modelRef.value"
+                     placeholder="请输入参数名称"
+            />
           </AFormItem>
+        </ACol>
+        <ACol :span="12">
           <AFormItem v-bind="validateInfos.isSys"
                      name="isSys"
                      label="系统内置"
@@ -36,12 +53,20 @@
               <ARadio value="1">否</ARadio>
             </ARadioGroup>
           </AFormItem>
+        </ACol>
+        <ACol>
           <AFormItem v-bind="validateInfos.remarks"
                      name="remarks"
                      label="备注"
           >
-        <ATextarea v-model:value="state.modelRef.remarks"/>
+            <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>({