remuneration/src/components/AutoComponents/MSearch/index.vue

<template>
  <m-card>
    <el-form :inline="true" :model="form" ref="form" label-width="80px" size="small" :show-message="false" inline-message>
      <el-form-item
        v-for="(item, index) in items"
        :key="index"
        v-bind="item"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="form[item.prop]"
          v-bind="item.option"
        ></el-input>

        <!-- 下拉框 -->
        <el-select
          v-if="item.type === 'select'"
          v-model="form[item.prop]"
          v-bind="item.option"
        >
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>

        <!-- 时间选择器 -->
        <el-date-picker
          v-if="item.type === 'date'"
          v-model="form[item.prop]"
          v-bind="item.option"
        ></el-date-picker>

        <!-- 其他类型可以根据需要扩展 -->
      </el-form-item>
      <el-form-item>
        <el-button class="ml-3" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button class="ml-3" icon="el-icon-refresh" @click="onReset">重置</el-button>
        <slot name="button"></slot>
      </el-form-item>
    </el-form>
  </m-card>
</template>

<script>
export default {
  name: 'm-search',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      form: { ...this.value }
    }
  },
  watch: {
    value: {
      handler (newVal) {
        this.form = newVal
      },
      deep: true
    },
    form: {
      handler (newVal) {
        this.$emit('input', newVal)
      },
      deep: true
    }
  },
  methods: {
    onSubmit () {
      this.$emit('search', this.form)
    },
    onReset () {
      this.$refs.form.resetFields()
      this.$emit('reset', this.form)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin: 0 !important;
}
</style>