feat: form pro modelRef数据结构改动

src/components/FormPro/index.vue

@@ -1,15 +1,20 @@
 <template>
   <a-form
-    :label-col="{ span: 8 }"
-    :wrapper-col="{ span: 16 }"
+
     autocomplete="off"
-    @finish="onFinish"
   >
-    <a-form-item
+    <!-- <a-form-item
       v-for="item in modelRef"
       :key="item.id"
+      :label="item.label"
+      name="7788"
+      v-bind="validateInfos[item.key]"
     >
+      <a-input v-model:value="item[item.key]"  />
+    </a-form-item> -->
 
+    <a-form-item label="测试title" v-bind="validateInfos.modelLabel">
+      <a-input v-model:value="modelRef.modelLabel"  />
     </a-form-item>
   </a-form>
 </template>
@@ -27,7 +32,8 @@ export interface FormItemProps {
   rules?: {required: boolean, message: string} | boolean,
   type: COMMON.COMPONENTS.ComType,
   key: string,
-  value?: any
+  value?: any,
+  label: string,
   request?: () => {
     id?: string,
     name?: string,
@@ -55,34 +61,32 @@ const props: FormProProps = {
       message: '此项为必填项'
     },
     type: 'input',
-    key: 'modelLabel'
+    key: 'modelLabel',
+    label: '测试title'
   }]
 }
 
-const modelRef = reactive<Record<string, any>[]>([
-  {
-    name: '',
-    region: undefined,
-    type: []
-  }
-])
+const modelRef = reactive<Record<string, any>>({
+  modelLabel: ''
+})
 
 const rulesRef = reactive<Record<string, any>>({})
 
 props.formProps.forEach(item => {
-  rulesRef[item.key] = item.rules
-  modelRef.push({ [item.key]: item.value, id: useId })
-})
-
-const emit = defineEmits(['onFinish'])
+  rulesRef[item.key] = [item.rules]
 
-const onFinish = () => emit('onFinish')
+  // modelRef.push({ ...item, [item.key]: item.value, id: useId, key: item.key })
+})
 
 const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
   onValidate: (...args) => console.log(...args)
 })
+console.log(rulesRef)
+console.log('validateInfos:', validateInfos)
 
 const onSubmit = () => {
+  console.log('onSubmit')
+
   validate()
     .then(() => {
       console.log(toRaw(modelRef))
@@ -92,6 +96,10 @@ const onSubmit = () => {
     })
 }
 
+defineExpose({
+  onSubmit
+})
+
 const reset = () => {
   // resetFields
 }

src/components/ModalPro/index.vue

@@ -20,6 +20,7 @@
         <component :is="originVNode" />
       </div>
     </template>
+    <slot></slot>
   </a-modal>
 </template>
 

src/components/TablePro/index.vue

@@ -27,7 +27,7 @@
             </a-col>
         </a-row>
       </a-col>
-      <a-col span="24">
+      <a-col span="24" style="overflow: hidden;overflow-x: scroll;">
         <a-table
           style="width: 100%;margin-top: 10px;"
           v-bind="{...props}"
@@ -63,8 +63,9 @@
       :label="props.modalTitle"
       :visible="state.modelVisible"
       @cancel="closeModel"
+      @ok="ok"
     >
-      <form-pro />
+      <form-pro ref="formProRef" />
     </modal-pro>
 </template>
 
@@ -72,7 +73,7 @@
 import { useCopy } from '@/hooks/dom'
 import { ColumnsType } from 'ant-design-vue/lib/vc-table/interface'
 import { TableProps } from 'ant-design-vue/lib/vc-table/Table'
-import { reactive, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { PlusOutlined, DownloadOutlined, ReloadOutlined, LoadingOutlined } from '@ant-design/icons-vue'
 /**
  * formItemProps
@@ -103,6 +104,8 @@ export interface TablePropPorps extends TableProps {
 
 const props = defineProps<TablePropPorps>()
 
+const formProRef = ref()
+
 const state = reactive({
   loading: false,
   data: [],
@@ -115,6 +118,10 @@ const state = reactive({
   opraState: 'add'
 })
 
+const ok = () => {
+  formProRef.value.onSubmit()
+}
+
 const handleTableChange = (pag: { pageSize: number; current: number }) => {
   state.pagination = {
     ...state.pagination,

src/components/index.tsx

@@ -1 +1,3 @@
 export const AppTsx = () => <a-button type="primary" >vue3.0</a-button>
+
+// export const

src/pages/Iot/model/index.vue

@@ -13,7 +13,6 @@
       :pro-able="['add']"
     />
   </a-card>
-  <AppTsx />
 </template>
 
 <script lang="ts" setup >