完善

src/components/SearchComponent/Search.vue

@@ -0,0 +1,77 @@
+<template>
+  <a-card>
+    <a-form
+      :model="searchInfo"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      layout="inline"
+    >
+      <div v-for="(item, index) in searchData" :key="index">
+        <a-form-item v-if="item.type == 'input'" :label="item.label">
+          <a-input v-model="searchInfo[item.value]" />
+        </a-form-item>
+        <a-form-item v-if="item.type == 'select'" :label="item.label">
+          <a-select
+            v-model="searchInfo[item.value]"
+            :placeholder="item.placeholder"
+            :options="item.menu"
+            style="width: 120px"
+          >
+          </a-select>
+        </a-form-item>
+        <a-form-item v-if="item.type === 'picker'" :label="item.label">
+          <a-date-picker
+            v-model:value="searchInfo[item.value]"
+            show-time
+            type="date"
+            :placeholder="item.placeholder"
+            style="width: 100%"
+          />
+        </a-form-item>
+      </div>
+      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="onSubmit">搜索</a-button>
+      </a-form-item>
+      <a-form-item>
+        <a-button style="margin-left: 10px">重置</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'Search',
+  props: {
+    searchInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    searchData: {
+      type: Array,
+      default: () => ({})
+    }
+  },
+  setup (props: any, ctx) {
+    const searchInfo: any = reactive(props.searchInfo)
+    const searchData = reactive(props.searchData)
+    const onSubmit = () => {
+      console.log('submit!', toRaw(searchInfo))
+      ctx.emit('submit-data', toRaw(searchInfo))
+    }
+    console.log(searchInfo)
+    console.log(searchData)
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      searchInfo,
+      onSubmit,
+      searchData
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>