directSearch.vue

<template>
  <el-form
    ref="form"
    inline
    :model="form"
    :label-position="labelPosition"
    :label-width="labelWidth"
    :size="size"
    class="el-form-self"
    :style="formStyle"
    @submit.native.prevent
  >
    <template v-for="(item, index) in formData">
      <el-form-item
        v-if="!item.hidden"
        :key="index"
        :label="`${item.label}：`"
        :prop="item.prop"
        :rules="item.rules"
        :label-width="item.labelWidth"
        :style="item.style"
      >
        <!-- <span slot="label" style="color:red;" v-if="item.labelSpecial&&!item.color">
                    {{item.labelSpecial}}
                    <span style="color:#606266;">{{item.label}}</span>
                </span>

                <span slot="label" v-if="item.labelSpecial&&item.color">{{item.labelSpecial}}</span> -->
        <span slot="label" v-if="!item.label"></span>
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="form[item.prop]"
          :disabled="item.disabled"
          :clearable="true"
          :maxlength="item.maxlength"
          :placeholder="item.placeholder || '请输入'"
          :style="itemStyle || item.style"
          @clear="handleSearch"
          @keyup.enter.native="handleSearch"
        >
          <template v-if="item.slot" :slot="item.slot.slot">
            <el-button
              v-if="item.slot.type === 'button'"
              :icon="item.slot.icon"
              @click="handleSearch"
            ></el-button>
          </template>
        </el-input>

        <!-- 模糊查询输入 -->
        <el-autocomplete
          :popper-class="item.popperClass"
          :trigger-on-focus="false"
          v-else-if="item.type === 'autocomplete'"
          v-model="form[item.prop]"
          :fetch-suggestions="item.func"
          :placeholder="item.placeholder"
          @select="handleSearch"
          clearable
        >
          <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
            <span class="description">{{ item.description }}</span>
          </template>
        </el-autocomplete>

        <!-- 模糊查询选择 -->
        <!-- <el-select v-else-if="item.type === 'remote'" v-model="form[item.prop]" filterable remote reserve-keyword :placeholder="item.placeholder" :remote-method="handleSearch">
                    <el-option v-for="(opt,optIndex) in item.opts" :key="optIndex" :label="opt.label" :value="item.isSelect?opt.selectValue:opt.value"></el-option>
                </el-select> -->

        <!-- 日期区间 -->
        <el-date-picker
          v-else-if="item.type === 'daterange'"
          v-model="form[item.prop]"
          :type="item.dateType || 'daterange'"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="item.options || rangeOptions"
          :format="item.format"
          :value-format="item.valueFormat"
          @change="handleSearch"
        ></el-date-picker>

        <!-- 日期 -->
        <el-date-picker
          v-else-if="item.type === 'date'"
          v-model="form[item.prop]"
          :type="item.dateType ? item.dateType : 'date'"
          :placeholder="item.placeholder"
          :picker-options="item.options"
          :format="item.format"
          :value-format="item.valueFormat"
          @change="handleSearch"
          :style="itemStyle || item.style"
        ></el-date-picker>

        <!-- 下拉框 -->
        <el-select
          v-else-if="item.type === 'select' && !item.isHidden"
          v-model="form[item.prop]"
          :placeholder="item.placeholder ? item.placeholder : '请选择'"
          :clearable="item.clearable === false ? item.clearable : true"
          @change="item.func ? item.func($event) : handleSearch()"
          filterable
          default-first-option
          :style="itemStyle || item.style"
          :multiple="item.multiple"
        >
          <el-option
            v-for="(opt, optIndex) in item.opts"
            :key="optIndex"
            :label="opt.label"
            :value="item.isSelect ? opt.selectValue : opt.value"
          ></el-option>
        </el-select>

        <!-- 单选按钮 -->
        <el-radio-group
          v-else-if="item.type === 'radioList'"
          v-model="form[item.prop]"
          :placeholder="item.placeholder ? item.placeholder : '请选择'"
          @change="handleSearch"
          :style="itemStyle"
        >
          <el-radio
            v-for="(opt, optIndex) in item.opts"
            :key="optIndex"
            :label="opt.label"
            :value="opt.value"
            >{{ opt.value }}</el-radio
          >
        </el-radio-group>

        <!-- 多选框 -->
        <el-checkbox-group
          v-else-if="item.type === 'checkbox'"
          v-model="form[item.prop]"
        >
          <el-checkbox
            v-for="(opt, optIndex) in item.opts"
            :key="optIndex"
            :label="opt.value"
            @change="item.func ? item.func($event, opt.value) : handleSearch()"
          >
            {{ opt.label }}
          </el-checkbox>
        </el-checkbox-group>

        <!-- 级联 -->
        <el-cascader
          v-else-if="item.type === 'cascader'"
          v-model="form[item.prop]"
          :style="'width:' + item.width"
          :props="item.props || {}"
          :options="item.options"
          @change="handleSearch"
          :change-on-select="item.changeSelect"
          :show-all-levels="item.showLevel"
          :clearable="true"
        ></el-cascader>

        <!-- 多选框 -->
        <el-checkbox-group
          v-else-if="item.type === 'checkboxList'"
          v-model="form[item.prop]"
        >
          <el-checkbox
            v-for="(opt, optIndex) in item.opts"
            :key="optIndex"
            :label="opt.value"
            @change="item.func ? item.func(form, opt.value) : {}"
            >{{ opt.label }}</el-checkbox
          >
        </el-checkbox-group>

        <span
          v-else-if="item.type === 'text' && item.value"
          @click="item.func ? item.func(item.value) : {}"
          >{{ item.value }}</span
        >

        <!-- 按钮 -->
        <template v-else-if="item.type === 'button'">
          <!-- 普通按钮 -->
          <el-button
            :type="item.color"
            :style="item.style || {}"
            :icon="item.icon"
            :plain="item.plain"
            :loading="item.loading"
            @click="
              item.func
                ? item.func(item.hasForm ? form : {}, item)
                : handleSearch()
            "
          >
            {{ item.value }}
          </el-button>
        </template>
        <!-- <el-button v-else-if="item.type === 'button'" :icon="item.icon" style="float:right;" :type="item.color" @click.native="item.func?item.func(form):{}">{{item.value}}</el-button> -->
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
import { rangeOptions } from "@/data/dateOption.js"
export default {
  props: {
    size: { type: String, default: "small" },
    labelPosition: { type: String, default: "right" },
    labelWidth: { type: String },
    formStyle: { type: Object },
    forms: { type: Array }, // 表单组
    formDefaults: { type: Object },
    itemStyle: { type: Object },
  },
  data() {
    return {
      rangeOptions,
      form: {},
    }
  },
  methods: {
    // 表单赋值
    initforms() {
      // this.$nextTick(() => {
      const form = {}
      this.forms.forEach((item) => {
        if (!item.prop || item.hidden) return false
        if (
          item.type === "checkbox" ||
          item.type === "checkboxList" ||
          item.type === "cascader" ||
          (item.type === "select" && item.multiple)
        ) {
          form[item.prop] = []
        } else {
          form[item.prop] = ""
        }
      })
      if (this.formDefaults) {
        this.form = Object.assign(form, this.formDefaults)
      } else {
        this.form = Object.assign({}, form)
      }
      this.loading = false
      if (this.$refs.form && this.$refs.form.clearValidate) {
        this.$refs.form.clearValidate()
      }
      // })
    },

    // 查询
    handleSearch() {
      this.$emit("handleSearch", this.form)
    },

    // 给字段赋值
    initFields(obj) {
      for (const key in obj) {
        this.form[key] = obj[key]
      }
      this.$nextTick(() => {
        if (this.$refs.form && this.$refs.form.clearValidate) {
          this.$refs.form.clearValidate()
        }
      })
    },
  },
  computed: {
    formData() {
      return this.forms.map((item) => {
        if (
          item.optsFormatter &&
          Object.prototype.toString.call(item.optsFormatter) ===
            "[object Function]"
        ) {
          try {
            item.opts = item.optsFormatter()
          } catch (error) {}
        }
        return item
      })
    },
  },
  created() {
    this.initforms()
  },
  // mounted() {
  //     this.initforms()
  // }
}
</script>

<style lang="scss" scoped>
.el-form-self {
  .el-form-item {
    margin-bottom: 10px !important;
  }
}
</style>
<style>
.el-form-self .el-collapse-item__header {
  height: 0;
  line-height: 0;
}

.el-form-self .el-collapse {
  border: 0 !important;
}
.el-form-self .el-collapse-item__header {
  border: 0 !important;
}
.el-form-self .el-collapse-item__arrow {
  display: none;
}
</style>