feat(components): 新增通用表单和搜索组件

- 添加了 Forms 和 Search 组件
- Forms组件支持动态生成表单字段，包含输入框、下拉框等
- Search 组件支持动态生成搜索条件，包含输入框、下拉框、日期选择框等- 在 main.js 中全局注册了这两个组件

Signed-off-by: 1iyc <5212514+liycone@user.noreply.gitee.com>

src/components/Forms/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <el-form :model="formModel" :rules="rules" ref="formRef" label-width="120px">
+      <el-form-item
+        v-for="(field, index) in formFields"
+        :key="index"
+        :label="field.label"
+        :prop="field.prop"
+        :required="field.required"
+      >
+        <component
+          :is="getComponentType(field.type)"
+          v-bind="field"
+          v-model="formModel[field.prop]"
+          :placeholder="field.placeholder"
+        >
+          <!-- 下拉框选项 -->
+          <el-option
+            v-if="field.type === 'select'"
+            v-for="option in field.options"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          ></el-option>
+        </component>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button type="primary" @click="submitForm">提交</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    formFields: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      formModel: {},
+      rules: {}
+    };
+  },
+  created() {
+    this.initFormModel();
+    this.initRules();
+  },
+  methods: {
+    getComponentType(type) {
+      switch (type) {
+        case 'input':
+          return 'el-input';
+        case 'select':
+          return 'el-select';
+        case 'textarea':
+          return 'el-input';
+        case 'button':
+          return 'el-button';
+        default:
+          return 'el-input';
+      }
+    },
+    initFormModel() {
+      this.formModel = this.formFields.reduce((acc, field) => {
+        acc[field.prop] = '';
+        return acc;
+      }, {});
+    },
+    initRules() {
+      this.rules = this.formFields.reduce((acc, field) => {
+        if (field.rules) {
+          acc[field.prop] = field.rules;
+        }
+        return acc;
+      }, {});
+    },
+    submitForm() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$emit('submit', this.formModel);
+        } else {
+          console.log('表单验证失败!');
+          return false;
+        }
+      });
+    },
+    resetForm() {
+      this.$refs.formRef.resetFields();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.el-form {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+</style>

src/components/Search/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item
+        v-for="(field, index) in searchFields"
+        :key="index"
+        :label="field.label"
+        :prop="field.prop"
+      >
+        <component
+          :is="getComponentType(field.type)"
+          v-model="queryParams[field.prop]"
+          :placeholder="field.placeholder"
+          :clearable="field.clearable"
+          :style="field.style"
+          @keyup.enter.native="handleQuery"
+        >
+          <!-- 下拉框选项 -->
+          <el-option
+            v-if="field.type === 'select'"
+            v-for="option in field.options"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </component>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    searchFields: {
+      type: Array,
+      required: true
+    },
+    queryParams: {
+      type: Object,
+      required: true
+    },
+    showSearch: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    getComponentType(type) {
+      switch (type) {
+        case 'input':
+          return 'el-input';
+        case 'select':
+          return 'el-select';
+        case 'datePicker':
+          return 'el-date-picker';
+        default:
+          return 'el-input';
+      }
+    },
+    handleQuery() {
+      this.$refs.queryForm.validate(valid => {
+        if (valid) {
+          // 处理查询逻辑
+          console.log('查询参数:', this.queryParams);
+        } else {
+          console.log('验证失败');
+        }
+      });
+    },
+    resetQuery() {
+      this.$refs.queryForm.resetFields();
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 添加一些样式 */
+</style>

src/main.js

@@ -38,9 +38,10 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 // tab组件
-import TabComponent from '@/components/TabComponent'
-//
 import webSite from "@/config/website";
+import TabComponent from '@/components/TabComponent'
+import Forms from '@/components/Forms'
+import Search from '@/components/Search'
 
 // 全局方法挂载
 Vue.prototype.website = webSite;
@@ -63,6 +64,8 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('TabComponent', TabComponent)
+Vue.component('Forms', Forms)
+Vue.component('Search', Search)
 
 Vue.use(directive)
 Vue.use(plugins)