|
@@ -0,0 +1,181 @@
|
|
|
+<template>
|
|
|
+ <v-card style="width:100%; min-height: 80px;" elevation="5">
|
|
|
+ <v-form v-model="valid" ref="form" @submit.prevent="search">
|
|
|
+ <div class="flex-horizon d-flex pa-2 flex-wrap">
|
|
|
+ <div v-for="(val, index) in items" :key="`filter_${val.label}_${index}`" class="pa-3" v-show="!val.hidden">
|
|
|
+ <v-text-field
|
|
|
+ v-if="val.type === 'text'"
|
|
|
+ v-model="query[val.key]"
|
|
|
+ :placeholder="val.placeholder || `请输入${val.label}`"
|
|
|
+ :style="`width: ${val.width || 250}px`"
|
|
|
+ v-bind="val"
|
|
|
+ outlined dense clearable hide-details @keyup.enter.native="search"
|
|
|
+ ></v-text-field>
|
|
|
+ <v-autocomplete
|
|
|
+ v-if="val.type === 'autocomplete'"
|
|
|
+ v-model="query[val.key]"
|
|
|
+ :placeholder="val.placeholder || `请选择${val.label}`"
|
|
|
+ :item-text="val.itemText || 'label'"
|
|
|
+ :item-value="val.itemValue || 'value'"
|
|
|
+ :style="`width: ${val.width || 250}px`"
|
|
|
+ :search-input.sync="val.searchInput"
|
|
|
+ outlined
|
|
|
+ dense
|
|
|
+ attach
|
|
|
+ hide-details
|
|
|
+ v-bind="val"
|
|
|
+ @change="$event => val.change && val.change($event)"
|
|
|
+ ></v-autocomplete>
|
|
|
+ <v-select
|
|
|
+ v-if="val.type === 'select'"
|
|
|
+ v-model="query[val.key]"
|
|
|
+ :placeholder="val.placeholder || `请选择${val.label}`"
|
|
|
+ :item-text="val.itemText || 'label'"
|
|
|
+ :item-value="val.itemValue || 'value'"
|
|
|
+ :style="`width: ${val.width || 250}px`"
|
|
|
+ v-bind="val"
|
|
|
+ hide-details outlined dense attach
|
|
|
+ @change="$event => val.change && val.change($event)"
|
|
|
+ ></v-select>
|
|
|
+ <date-picker
|
|
|
+ v-if="val.type === 'datePicker'"
|
|
|
+ v-model="val.value"
|
|
|
+ ref="picker"
|
|
|
+ :option="{
|
|
|
+ max: val.max,
|
|
|
+ min: val.min,
|
|
|
+ range: val.range,
|
|
|
+ placeholder: val.placeholder || val.label,
|
|
|
+ type: val.dateType || 'date',
|
|
|
+ clearable: val.clearable || false
|
|
|
+ }"
|
|
|
+ @change="val.change && val.change($event), val.value = $event"
|
|
|
+ />
|
|
|
+ <m-data-picker
|
|
|
+ v-if="val.type === 'dataPicker'"
|
|
|
+ v-model="val.value"
|
|
|
+ :style="`width: ${val.width || 250}px`"
|
|
|
+ :label="val.label"
|
|
|
+ :placeholder="val.placeholder || val.label"
|
|
|
+ :item-children="val.itemChildren ?? 'children'"
|
|
|
+ :item-label="val.itemLabel ?? 'label'"
|
|
|
+ :item-value="val.itemValue ?? 'value'"
|
|
|
+ :items="val.items"
|
|
|
+ @change="$event => val.change && val.change($event)"
|
|
|
+ ></m-data-picker>
|
|
|
+ <template v-if="val.type === 'checkbox'">
|
|
|
+ <div class="d-flex">
|
|
|
+ <v-checkbox
|
|
|
+ v-model="val.value"
|
|
|
+ v-for="k in val.items"
|
|
|
+ :key="k.key"
|
|
|
+ :label="k.label"
|
|
|
+ :color="val.color"
|
|
|
+ :value="k.value"
|
|
|
+ hide-details
|
|
|
+ :multiple="true"
|
|
|
+ class="mr-3"
|
|
|
+ style="margin-top: 0;padding-top: 6px;"
|
|
|
+ ></v-checkbox>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <template>
|
|
|
+ <div class="pt-3 mr-3">
|
|
|
+ <v-btn color="primary" class="elevation-5 half-button" rounded @click="search">查 询</v-btn>
|
|
|
+ </div>
|
|
|
+ <div class="pt-3">
|
|
|
+ <v-btn color="#5cbbf6" rounded class="white--text elevation-5 half-button" @click="reset">重 置</v-btn>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <slot name="btn"></slot>
|
|
|
+ </div>
|
|
|
+ <slot></slot>
|
|
|
+ </v-form>
|
|
|
+ <slot name="footer"></slot>
|
|
|
+ </v-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import DatePicker from '@/components/Form/datePicker.vue'
|
|
|
+import MDataPicker from '@/components/MDataPicker'
|
|
|
+export default {
|
|
|
+ name: 'MSearch',
|
|
|
+ components: { DatePicker, MDataPicker },
|
|
|
+ props: {
|
|
|
+ value: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ },
|
|
|
+ items: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ ...this.value
|
|
|
+ },
|
|
|
+ inputUpdateValue: '',
|
|
|
+ valid: false
|
|
|
+ // filter: {},
|
|
|
+ // resetData: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ value: {
|
|
|
+ handler (val) {
|
|
|
+ this.query = val
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ query: {
|
|
|
+ handler (val) {
|
|
|
+ this.$emit('input', val)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ // this.option?.list.forEach(item => {
|
|
|
+ // this.filter[item.key] = item.value
|
|
|
+ // this.resetData[item.key] = item.value
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search () {
|
|
|
+ const obj = this.option?.list.reduce((res, item) => {
|
|
|
+ res[item.key] = item.value
|
|
|
+ return res
|
|
|
+ }, {})
|
|
|
+ this.$emit('search', obj)
|
|
|
+ },
|
|
|
+ reset () {
|
|
|
+ if (this.$listeners.resetNoParams) {
|
|
|
+ this.$emit('resetNoParams')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs.form.reset()
|
|
|
+ if (this.$refs?.picker && this.$refs.picker.length) {
|
|
|
+ this.$refs.picker.forEach(e => {
|
|
|
+ e.reset()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const obj = this.option?.list.reduce((res, item) => {
|
|
|
+ res[item.key] = null
|
|
|
+ return res
|
|
|
+ }, {})
|
|
|
+ if (this.$listeners.customReset) {
|
|
|
+ this.$emit('customReset')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$emit('search', obj, true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+</style>
|