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

<template>
  <m-card :shadow="shadow">
    <el-form
      :inline="true"
      :model="query"
      ref="form"
      label-width="80px"
      size="small"
      :show-message="false"
      inline-message
      @submit.native.prevent
    >

    <template v-for="(item, index) in items">
        <el-form-item
          v-if="!item.hidden"
          :key="index"
          v-bind="item"
        >
          <!-- 输入框 -->
          <el-input
            v-if="item.type === 'input'"
            v-model="query[item.prop]"
            @keydown.enter.native="onSubmit"
            :clearable="item.option?.clearable ?? true"
            v-bind="item.option"
            v-on="item.handles"
          ></el-input>

          <!-- 下拉框 -->
          <el-select
            v-if="item.type === 'select'"
            v-model="query[item.prop]"
            :clearable="item.option?.clearable ?? true"
            v-bind="item.option"
            v-on="item.handles"
          >
            <el-option
              v-for="option in item.option.items"
              :key="option.value"
              :label="option[item.option.labelText ?? option.label]"
              :value="option[item.option.labelValue ?? option.value]"
            ></el-option>
          </el-select>

          <el-autocomplete
            v-if="item.type === 'autocomplete'"
            v-model="query[item.prop]"
            v-bind="item.option"
            v-on="item.handles"
          >
            <template v-for="slot in item.slots" :slot="scope">
              <slot :name="`${item.prop}.${slot}`" :scope="scope"></slot>
            </template>
          </el-autocomplete>

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

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

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

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