|  |  |  | 
|---|
|  |  |  | <div class="doumee-filter"> | 
|---|
|  |  |  | <el-form inline label-suffix=":" @submit.native.prevent> | 
|---|
|  |  |  | <template v-for="(item, index) in queryFormConfig.formItems"> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'input' && (showZk || index < listLength)" :key="item.filed" | 
|---|
|  |  |  | :label="item.label"> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'input' && (showZk || index < listLength)" :key="item.filed"> | 
|---|
|  |  |  | <el-input v-model="searchForm[item.filed]" | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label" class="w200" | 
|---|
|  |  |  | @change="changeForm(item.filed)" @keyup.enter.native="handlekeyup(item.keyup || false)" /> | 
|---|
|  |  |  | :placeholder="item.label" class="w200" @change="changeForm(item.filed)" | 
|---|
|  |  |  | @keyup.enter.native="handlekeyup(item.keyup || false)" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'moneySelect' && (showZk || index < listLength)" :key="item.label" | 
|---|
|  |  |  | :label="item.label"> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'moneySelect' && (showZk || index < listLength)" :key="item.label"> | 
|---|
|  |  |  | <el-input v-model="searchForm[item.filedStrt]" | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | :placeholder="item.start" style="width: 150px" /> | 
|---|
|  |  |  | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | :placeholder="item.end" style="width: 150px" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'select' && (showZk || index < listLength)" :key="item.filed" | 
|---|
|  |  |  | :label="item.label"> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'select' && (showZk || index < listLength)" :key="item.filed"> | 
|---|
|  |  |  | <el-select v-model="searchForm[item.filed]" :filterable="item.filterable || true" | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label" class="w200" | 
|---|
|  |  |  | @change="changeForm(item.filed)"> | 
|---|
|  |  |  | :placeholder="item.label" class="w200" @change="changeForm(item.filed)"> | 
|---|
|  |  |  | <el-option v-for="opt, i in item.options" :key="i" :value="item.valueCode ? opt[item.valueCode] : opt.value" | 
|---|
|  |  |  | :label="item.labelCode ? opt[item.labelCode] : opt.label" /> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'date' && (showZk || index < listLength)" :key="item.filed" | 
|---|
|  |  |  | :label="item.label || '日期'"> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'date' && (showZk || index < listLength)" :key="item.filed"> | 
|---|
|  |  |  | <el-date-picker v-model="searchForm[item.filed]" type="date" value-format="yyyy-MM-dd" class="w200" | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | :placeholder="item.placeholder || '请选择日期'" :picker-options="item.pickerOptions || {}" | 
|---|
|  |  |  | @change="changeForm(item.filed)" /> | 
|---|
|  |  |  | :placeholder="item.label" :picker-options="item.pickerOptions || {}" @change="changeForm(item.filed)" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'daterange' && (showZk || index < listLength)" :key="item.filed" | 
|---|
|  |  |  | :label="item.label || ''"> | 
|---|
|  |  |  | <el-form-item :label="item.label ? item.label : '起止时间'" | 
|---|
|  |  |  | v-if="item.type === 'datetime' && (showZk || index < listLength)" :key="item.filed1"> | 
|---|
|  |  |  | <el-date-picker v-model="searchForm[item.filed1]" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" | 
|---|
|  |  |  | class="w200" | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | placeholder="开始时间" @change="changeForm(item.filed)" /> | 
|---|
|  |  |  | <el-date-picker v-model="searchForm[item.filed2]" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" | 
|---|
|  |  |  | class="w200" | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | placeholder="结束时间" @change="changeForm(item.filed)" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'daterange' && (showZk || index < listLength)" :key="item.filed"> | 
|---|
|  |  |  | <el-date-picker v-model="searchForm[item.filed]" value-format="yyyy-MM-dd" type="daterange" | 
|---|
|  |  |  | range-separator="至" | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | :start-placeholder="item.start || ''" :end-placeholder="item.end || ''" | 
|---|
|  |  |  | :picker-options="item.pickerOptions || {}" class="w400" @change="changeForm(item.filed)" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'timePicker' && (showZk || index < listLength)" :key="item.filed" | 
|---|
|  |  |  | :label="item.label || '选择时间'"> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'timePicker' && (showZk || index < listLength)" :key="item.filed"> | 
|---|
|  |  |  | <el-time-picker v-model="searchForm[item.filed]" is-range range-separator="至" format="HH:mm" | 
|---|
|  |  |  | value-format="HH:mm" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" class="w400" | 
|---|
|  |  |  | @change="changeForm(item.filed)" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'datetimerange' && (showZk || index < listLength)" :key="item.filed" | 
|---|
|  |  |  | :label="item.label || '选择日期'"> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'datetimerange' && (showZk || index < listLength)" :key="item.filed"> | 
|---|
|  |  |  | <el-date-picker v-model="searchForm[item.filed]" format="yyyy-MM-dd HH:mm:ss" | 
|---|
|  |  |  | value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" | 
|---|
|  |  |  | :default-time="['00:00:00', '23:59:59']" | 
|---|
|  |  |  | value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']" | 
|---|
|  |  |  | :picker-options="item.pickerOptions || pickerOptions" range-separator="至" | 
|---|
|  |  |  | :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true" | 
|---|
|  |  |  | :start-placeholder="item.start || '开始时间'" :end-placeholder="item.end || '结束时间'" class="w400" | 
|---|
|  |  |  | @change="changeForm(item.filed)" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item v-if="item.type === 'slot' && (showZk || index < listLength)" :key="item.filed" | 
|---|
|  |  |  | :label="item.label"> | 
|---|
|  |  |  | <el-form-item :label="item.label ? item.label : ''" | 
|---|
|  |  |  | v-if="item.type === 'slot' && (showZk || index < listLength)" :key="item.filed"> | 
|---|
|  |  |  | <slot :name="item.filed" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | default: () => { } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | showZk: false, | 
|---|
|  |  |  | pickerOptions: { | 
|---|
|  |  |  | shortcuts: [{ | 
|---|
|  |  |  | text: '近7天', | 
|---|
|  |  |  | onClick (picker) { | 
|---|
|  |  |  | onClick(picker) { | 
|---|
|  |  |  | const end = new Date() | 
|---|
|  |  |  | const start = new Date() | 
|---|
|  |  |  | start.setTime(end.getTime() - 3600 * 1000 * 24 * 6) | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | text: '近30天', | 
|---|
|  |  |  | onClick (picker) { | 
|---|
|  |  |  | onClick(picker) { | 
|---|
|  |  |  | const end = new Date() | 
|---|
|  |  |  | const start = new Date() | 
|---|
|  |  |  | start.setTime(end.getTime() - 3600 * 1000 * 24 * 29) | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | text: '近60天', | 
|---|
|  |  |  | onClick (picker) { | 
|---|
|  |  |  | onClick(picker) { | 
|---|
|  |  |  | const end = new Date() | 
|---|
|  |  |  | const start = new Date() | 
|---|
|  |  |  | start.setTime(end.getTime() - 3600 * 1000 * 24 * 59) | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | text: '近90天', | 
|---|
|  |  |  | onClick (picker) { | 
|---|
|  |  |  | onClick(picker) { | 
|---|
|  |  |  | const end = new Date() | 
|---|
|  |  |  | const start = new Date() | 
|---|
|  |  |  | start.setTime(end.getTime() - 3600 * 1000 * 24 * 89) | 
|---|
|  |  |  | picker.$emit('pick', [start, end]) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }], | 
|---|
|  |  |  | disabledDate (time) { | 
|---|
|  |  |  | disabledDate(time) { | 
|---|
|  |  |  | var curDate = new Date(new Date().toLocaleDateString()).getTime() | 
|---|
|  |  |  | var preDate = new Date(curDate + 24 * 60 * 60 * 1000 - 1) | 
|---|
|  |  |  | return time.getTime() > preDate | 
|---|
|  |  |  | 
|---|
|  |  |  | emits: ['input', 'handleQuery', 'clear'], | 
|---|
|  |  |  | computed: { | 
|---|
|  |  |  | searchForm: { | 
|---|
|  |  |  | get () { | 
|---|
|  |  |  | get() { | 
|---|
|  |  |  | return this.value | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | set (value) { | 
|---|
|  |  |  | set(value) { | 
|---|
|  |  |  | this.$emit('input', value) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | handleQuery () { | 
|---|
|  |  |  | handleQuery() { | 
|---|
|  |  |  | this.$emit('handleQuery') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handlekeyup (pd) { | 
|---|
|  |  |  | handlekeyup(pd) { | 
|---|
|  |  |  | if (pd) { | 
|---|
|  |  |  | this.$emit('handleQuery') | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | changeForm (filed) { | 
|---|
|  |  |  | changeForm(filed) { | 
|---|
|  |  |  | this.$emit('changeForm', filed) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | zkBtn () { | 
|---|
|  |  |  | zkBtn() { | 
|---|
|  |  |  | this.showZk = !this.showZk | 
|---|
|  |  |  | this.$emit('zkBtn', this.zk) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | clear () { | 
|---|
|  |  |  | clear() { | 
|---|
|  |  |  | this.$emit('clear') | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|