feat: form pro 更改为useForm

src/components/FormPro/index.vue

@@ -1,41 +1,101 @@
 <template>
   <a-form
-    :model="formState"
-    name="basic"
     :label-col="{ span: 8 }"
     :wrapper-col="{ span: 16 }"
     autocomplete="off"
     @finish="onFinish"
-    @finishFailed="onFinishFailed"
   >
-    <a-form-item>
+    <a-form-item
+      v-for="item in modelRef"
+      :key="item.id"
+    >
 
     </a-form-item>
   </a-form>
 </template>
 
 <script lang='ts' setup >
-import { reactive } from 'vue'
+import { reactive, toRaw } from 'vue'
+import { Form } from 'ant-design-vue'
+import { useId } from '@/hooks'
 
-export interface FormProProps {
-  rules: {required: boolean, message: string} | boolean,
+/**
+ * 将submit的提交抛出去
+ */
+
+export interface FormItemProps {
+  rules?: {required: boolean, message: string} | boolean,
   type: COMMON.COMPONENTS.ComType,
-  request: () => {
+  key: string,
+  value?: any
+  request?: () => {
     id?: string,
     name?: string,
     value: any,
     key: any
   }
- [key: string]: any
 }
 
-const props = defineProps<FormProProps>()
+export interface FormProProps {
+  reset: boolean // 是否开启一键reset表单
+  dire: 'h' | 'v', // 布局方式 默认横向布局
+  formProps: FormItemProps[] // 表单props
+  [key: string]: any
+}
+
+const useForm = Form.useForm
+
+// const props = defineProps<FormProProps>()
+const props: FormProProps = {
+  dire: 'h',
+  reset: true,
+  formProps: [{
+    rules: {
+      required: true,
+      message: '此项为必填项'
+    },
+    type: 'input',
+    key: 'modelLabel'
+  }]
+}
+
+const modelRef = reactive<Record<string, any>[]>([
+  {
+    name: '',
+    region: undefined,
+    type: []
+  }
+])
+
+const rulesRef = reactive<Record<string, any>>({})
 
-const formState = reactive(props)
+props.formProps.forEach(item => {
+  rulesRef[item.key] = item.rules
+  modelRef.push({ [item.key]: item.value, id: useId })
+})
 
 const emit = defineEmits(['onFinish'])
 
 const onFinish = () => emit('onFinish')
+
+const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
+  onValidate: (...args) => console.log(...args)
+})
+
+const onSubmit = () => {
+  validate()
+    .then(() => {
+      console.log(toRaw(modelRef))
+    })
+    .catch(err => {
+      console.log('error', err)
+    })
+}
+
+const reset = () => {
+  // resetFields
+}
+
 </script>
 
 <style lang="less" scope >

src/components/TablePro/index.vue

@@ -64,7 +64,7 @@
       :visible="state.modelVisible"
       @cancel="closeModel"
     >
-
+      <form-pro />
     </modal-pro>
 </template>
 

src/hooks/index.ts

@@ -1 +1,3 @@
 export { useEmitter } from './effect'
+
+export { useId } from './state'

src/hooks/state.ts

@@ -0,0 +1,5 @@
+
+/**
+ * useId 函数生成一个随机字符串，用作 ID。
+ */
+export const useId = () => Math.random().toString(16).slice(2)

src/pages/Iot/model/index.vue

@@ -1,5 +1,4 @@
 <template>
-
   <a-card>
     <table-pro
       modalTitle="模型"
@@ -32,7 +31,8 @@ const columns = [
       request: async () => {
         return await CommonController.getTransport()
       },
-      type: ''
+      type: '',
+      key: ''
     }
   },
   {

vue.config.js

@@ -1,11 +1,7 @@
-const fs = require('fs')
-
-const path = require('path')
 
 const { defineConfig } = require('@vue/cli-service')
 const proxy = require('./config/proxy.ts')
 
-console.log(proxy.dev)
 module.exports = defineConfig({
   transpileDependencies: true,
   // css: {
@@ -18,25 +14,4 @@ module.exports = defineConfig({
   devServer: {
     proxy: proxy.dev
   }
-  // pluginOptions: {
-  //   module: {
-  //     rules: [
-  //       {
-  //         test: /\.less$/i,
-  //         use: [
-  //           'style-loader',
-  //           'css-loader',
-  //           {
-  //             loader: 'less-loader',
-  //             options: {
-  //               javascriptEnabled: true
-  //             }
-  //           }
-  //         ]
-  //       }
-  //     ]
-  //   }
-
-  // }
-
 })