cxyy-admin/src/components/custom/custom-search-bar.vue

<template>
  <div id="custom-search-bar">
    <el-form ref="formRef" :model="form" :label-width="labelWidth" class="form" @submit.prevent :inline="true">
      <el-form-item v-for="item in fields" :key="`form-field-${item.model}`" :label="getField('label', item)" :prop="item.model" :required="item.required">
        <template v-if="item.custom">
          <slot :name="item.model" v-bind="{ item }"></slot>
        </template>
        <template v-else>
          <template v-if="item.type === 'numbers'">
            <el-input-number v-model="form[item.model]" :placeholder="getField('placeholder', item)" @change="dataChange(item.model)" style="width: 100%" />
          </template>
          <template v-else-if="item.type === 'radio'">
            <el-radio-group v-model="form[item.model]" :type="item.type" v-bind="item.options" @change="dataChange(item.model)">
              <slot :name="item.model" v-bind="{ item }"></slot>
            </el-radio-group>
          </template>
          <template v-else-if="item.type === 'checkbox'">
            <el-checkbox-group v-model="form[item.model]" :type="item.type" v-bind="item.options">
              <slot :name="item.model" v-bind="{ item }"></slot>
            </el-checkbox-group>
          </template>
          <template v-else-if="item.type === 'select'">
            <el-select
              clearable
              filterable
              allow-create
              default-first-option
              v-model="form[item.model]"
              :type="item.type"
              :placeholder="getField('selectplaceholder', item)"
              v-bind="item.options"
              @change="dataChange(item.model)"
              style="width: 100%; min-width: 200px"
            >
              <slot :name="item.model" v-bind="{ item }"></slot>
            </el-select>
          </template>
          <template v-else-if="item.type === 'selectMany'">
            <el-select
              filterable
              clearable
              multiple
              collapse-tags
              v-model="form[item.model]"
              :type="item.type"
              :placeholder="getField('selectplaceholder', item)"
              v-bind="item.options"
              @change="dataChange(item.model)"
              style="width: 100%; min-width: 200px"
            >
              <slot :name="item.model" v-bind="{ item }"></slot>
            </el-select>
          </template>
          <template v-else-if="item.type === `year` || item.type == 'month' || item.type == 'date' || item.type == 'daterange' || item.type == 'datetime' || item.type == 'datetimerange'">
            <el-date-picker
              v-model="form[item.model]"
              :type="item.type"
              :placeholder="getField('selectplaceholder', item)"
              :format="getDateFormat(item.type)"
              :value-format="getDateFormat(item.type)"
              v-bind="item.options"
              @change="dataChange(item.model)"
              range-separator="至"
              style="width: 100%"
            >
            </el-date-picker>
          </template>
          <template v-else-if="item.type === `time`">
            <el-time-picker
              v-model="form[item.model]"
              :placeholder="getField('selectplaceholder', item)"
              :format="getDateFormat(item.type)"
              :value-format="getDateFormat(item.type)"
              v-bind="item.options"
              @change="dataChange(item.model)"
              style="width: 100%"
            >
            </el-time-picker>
          </template>
          <template v-else-if="item.type === `inputnumber`">
            <el-input-number v-model="form[item.model]" :placeholder="getField('placeholder', item)" v-bind="item.options" @change="dataChange(item.model)" style="width: 100%"></el-input-number>
          </template>
          <template v-else>
            <el-input
              clearable
              v-model="form[item.model]"
              :type="getField('type', item)"
              :placeholder="getField('placeholder', item)"
              :show-password="getField('type', item) === 'password'"
              v-bind="item.options"
              @change="dataChange(item.model)"
            ></el-input>
          </template>
        </template>
      </el-form-item>
      <el-form-item v-if="fields.length > 0">
        <el-button type="primary" @click="toClick">{{ $t('common.search') }}</el-button>
        <el-button type="default" @click="toReset">{{ $t('common.reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { get } from 'lodash-es'
const props = defineProps({
  modelValue: { type: Object },
  fields: { type: Array, default: () => [] }
})
const emits = defineEmits(['update:modelValue', 'dataChange', 'search'])
const formRef = ref()
const form = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    console.log(value)
    emits('update:modelValue', value)
  }
})
const toClick = () => {
  emits('search')
}
const toReset = () => {
  emits('reset')
}
const getField = (item, data) => {
  let res = get(data, item, null)
  if (item === 'type') res = res === null ? `text` : res
  if (item === 'placeholder') res = res === null ? `请输入${data.label}` : res
  if (item === `selectplaceholder`) res = res === null ? `请选择${data.label}` : res
  if (item === 'required') res = res === null ? false : res
  if (item === `error`) res = res === null ? `${data.label}错误` : res
  return res
}
const dataChange = (model) => {
  const value = form.value[model]
  emits('dataChange', { model, value })
}
const getDateFormat = (e) => {
  if (e === 'year') return 'YYYY'
  if (e === 'month') return 'MM'
  if (e === 'date') return 'YYYY-MM-DD'
  if (e === 'daterange') return 'YYYY-MM-DD'
  if (e === 'datetime') return 'YYYY-MM-DD HH:mm:ss'
  if (e === 'datetimerange') return 'YYYY-MM-DD HH:mm:ss'
  if (e === 'time') return 'HH:mm:ss'
}
</script>
<style scoped></style>