feat: InputTsx 与 SelectTsx 组件

src/components/FormPro/components/indext.tsx

@@ -1,8 +1,46 @@
 
-export const InputTsx = () => {
-  return <a-input></a-input>
-}
+import { defineComponent, PropType } from 'vue'
 
-export const SelectTsx = () => {
+export const InputTsx = defineComponent({
+  name: 'input-tsx',
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, context) {
+    const onInput = (value: string) => context.emit('update:modelValue', value)
 
-}
+    return () => <a-input value={props.modelValue} onChange={(e: any) => onInput(e.target.value)}/>
+  }
+})
+
+export const SelectTsx = defineComponent({
+  name: 'select-tsx',
+  props: {
+    modelValue: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    list: {
+      type: Array as PropType<{name: string, key: string, value: any}[]>,
+      required: true,
+      default: () => []
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, context) {
+    const onInput = (value: string) => context.emit('update:modelValue', value)
+    return () => (
+      <a-select value={props.modelValue} onChange={(e: any) => onInput(e.target.value)}>
+       {
+        props.list.map(item => <a-select-option key={item.key} value={item.value}>{item.name}</a-select-option>)
+       }
+      </a-select>
+    )
+  }
+})

src/components/FormPro/index.vue

@@ -1,27 +1,33 @@
 <template>
   <a-form
-    autocomplete="off"
+    :labelCol="{span: 4}"
+    :wrapperCol="{span: 14}"
+    :layout="props.layout"
+    autocomp
+    lete="off"
   >
     <a-form-item
-      v-for="item in modelRef"
-      :key="item.id"
+      v-for="item in formProps"
+      :key="item.key"
       :label="item.label"
-      name="7788"
       v-bind="validateInfos[item.key]"
     >
-      <a-input v-model:value="item[item.key]"  />
+      <input-tsx v-if="item.type === 'input'"  v-model="modelRef[item.key]" />
+      <select-tsx  v-else-if="item.type === 'select'"  :list="item.request!()" :value="modelRef[item.key]" :on-change="(e) => onChange(e, item.key)"  />
+    </a-form-item>
+    <a-form-item>
+      <slot name="reset" > <a-button @click="resetForm">重置</a-button></slot>
+    </a-form-item>
+    <a-form-item>
+      <slot name="search" > <a-button type="primary">搜索</a-button></slot>
     </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>
 
 <script lang='ts' setup >
-import { onMounted, reactive, toRaw, computed } from 'vue'
+import { onMounted, reactive, toRaw, computed, ref } from 'vue'
 import { Form } from 'ant-design-vue'
-import { useId } from '@/hooks'
+import { InputTsx } from './components/indext'
 
 /**
  * 将submit的提交抛出去
@@ -33,25 +39,36 @@ export interface FormItemProps {
   value?: any,
   label: string,
   request?: () => {
-    id?: string,
-    name?: string,
+    name: string,
     value: any,
-    key: any
-  }
+    key: string
+  }[]
 }
 
 export interface FormProProps {
   reset: boolean // 是否开启一键reset表单
-  dire: 'h' | 'v', // 布局方式 默认横向布局
+  search: boolean // 是否开启搜索功能
+  validate: boolean // 是否开启验证功能
+  layout: 'horizontal' | 'vertical' | 'inline', // 布局方式 默认横向布局
   formProps: FormItemProps[] // 表单props
   [key: string]: any
 }
 
+enum ComponentTypeEnum {
+  'input' = 'input',
+  'select' = 'select'
+}
+
 const useForm = Form.useForm
 
+const emit = defineEmits(['submit', 'reset', 'search'])
+
+const a = ref('')
+
 // const props = defineProps<FormProProps>()
 const props: FormProProps = {
-  dire: 'h',
+  layout: 'horizontal',
+  search: true,
   reset: true,
   formProps: [{
     rules: {
@@ -68,24 +85,33 @@ const modelRef = reactive<Record<string, any>>({})
 
 const rulesRef = reactive<Record<string, any>>({})
 
+const formProps = reactive<FormItemProps[]>(props.formProps)
+
+const resetForm = () => {
+  resetFields([])
+}
+
+const onChange = (record: any, key: string) => {
+  console.log('form pro item change:', record)
+  modelRef[key] = record
+}
+
 props.formProps.forEach(item => {
   rulesRef[item.key] = [item.rules]
-  modelRef[item.key] = item.value
+  modelRef[item.key] = item.value || ''
+
+  console.log(modelRef)
 })
 
 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))
+      emit('submit', modelRef)
     })
     .catch(err => {
       console.log('error', err)

src/pages/Iot/device/index.vue

@@ -17,6 +17,9 @@
     </a-row>
   </a-card>
 
+  <a-card title="测试form" >
+    <form-pro></form-pro>
+  </a-card>
   <a-card style="margin-top: 20px;">
     <a-row justify="space-between" >
       <a-col :span="20"  >