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

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

@@ -15,10 +15,7 @@
     >
       <ARow justify="center">
         <ACol :span="12">
-          <AFormItem v-bind="validateInfos.name"
+          <AFormItem label="参数名称" name="name">
-                     label="参数名称"
-                     name="name"
-          >
             <a-input v-model:value="state.modelRef.name"
                      placeholder="请输入参数名称"
                      allowClear
@@ -26,10 +23,7 @@
           </AFormItem>
         </ACol>
         <ACol :span="12">
-          <AFormItem v-bind="validateInfos.key"
+          <AFormItem label="参数键名" name="key">
-                     name="key"
-                     label="参数键名"
-          >
             <a-input v-model:value="state.modelRef.key"
                      placeholder="请输入参数键名"
                      allowClear
@@ -37,10 +31,7 @@
           </AFormItem>
         </ACol>
         <ACol :span="12">
-          <AFormItem v-bind="validateInfos.value"
+          <AFormItem label="参数键值" name="value">
-                     name="value"
-                     label="参数键值"
-          >
             <a-input v-model:value="state.modelRef.value"
                      placeholder="请输入参数键值"
                      allowClear
@@ -48,10 +39,7 @@
           </AFormItem>
         </ACol>
         <ACol :span="12">
-          <AFormItem v-bind="validateInfos.isSys"
+          <AFormItem label="系统内置" name="isSys">
-                     name="isSys"
-                     label="系统内置"
-          >
             <ARadioGroup v-model:value="state.modelRef.isSys">
               <ARadio value="0">是</ARadio>
               <ARadio value="1">否</ARadio>
@@ -59,10 +47,7 @@
           </AFormItem>
         </ACol>
         <ACol>
-          <AFormItem v-bind="validateInfos.remarks"
+          <AFormItem label="备注" name="remarks">
-                     name="remarks"
-                     label="备注"
-          >
             <ATextarea v-model:value="state.modelRef.remarks"
                        placeholder="请输入备注"
                        :rows="6"
@@ -85,7 +70,7 @@
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
-  import { reactive } from 'vue';
+  import { reactive, ref } from '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';
@@ -113,7 +98,7 @@
   const ARow = Row;
   const ACol = Col;
 
-  const useForm = AForm.useForm;
+  const formElRef = ref();
   const state = reactive<WindowState>({
     tag: '',
     modelRef: {
@@ -138,11 +123,10 @@
   });
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
-  const { resetFields, clearValidate, validate, validateInfos } = useForm(state.modelRef, state.rulesRef);
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' })=> {
     // 处理清除脏数据
-    resetFields();
+    formElRef.value.resetFields();
-    clearValidate();
+    formElRef.value.clearValidate();
     // 处理设置数据
     state.tag = data._tag;
     const configId = data.record?.id;
@@ -166,7 +150,7 @@
   async function handleSubmit() {
     try {
       // 提取验证数据
-      const formData = await validate();
+      const formData = await formElRef.value.validate();
       // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
       // 采用tag标签区分操作