<template>
|
<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">
|
<el-input v-model="searchForm[item.filed]"
|
:clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
|
: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">
|
<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" />
|
<div class="date-division-line" style="margin-left: 10px;margin-bottom: 0;">~</div>
|
<el-input v-model="searchForm[item.filedEnd]"
|
: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">
|
<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.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">
|
<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.label" :picker-options="item.pickerOptions || {}" @change="changeForm(item.filed)" />
|
</el-form-item>
|
<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">
|
<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">
|
<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']"
|
: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 :label="item.label ? item.label : ''"
|
v-if="item.type === 'slot' && (showZk || index < listLength)" :key="item.filed">
|
<slot :name="item.filed" />
|
</el-form-item>
|
</template>
|
<!-- 操作 -->
|
<el-form-item>
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
<el-button v-if="showQk" @click="clear">重置</el-button>
|
<slot name="btns" />
|
<template v-if="queryFormConfig.formItems.length > listLength">
|
<el-button v-if="!showZk" type="text" @click="zkBtn">展开<i
|
class="el-icon-caret-bottom primaryColor" /></el-button>
|
<el-button v-if="showZk" type="text" @click="zkBtn">收起<i class="el-icon-caret-top primaryColor" /></el-button>
|
</template>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
value: {
|
type: Object,
|
default: () => { }
|
},
|
showQk: {
|
type: Boolean,
|
default: true
|
},
|
listLength: {
|
type: Number,
|
default: 6
|
},
|
queryFormConfig: {
|
type: Object,
|
default: () => { }
|
}
|
},
|
data() {
|
return {
|
showZk: false,
|
pickerOptions: {
|
shortcuts: [{
|
text: '近7天',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '近30天',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '近60天',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(end.getTime() - 3600 * 1000 * 24 * 59)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '近90天',
|
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) {
|
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() {
|
return this.value
|
},
|
set(value) {
|
this.$emit('input', value)
|
}
|
}
|
},
|
methods: {
|
handleQuery() {
|
this.$emit('handleQuery')
|
},
|
handlekeyup(pd) {
|
if (pd) {
|
this.$emit('handleQuery')
|
}
|
},
|
changeForm(filed) {
|
this.$emit('changeForm', filed)
|
},
|
zkBtn() {
|
this.showZk = !this.showZk
|
this.$emit('zkBtn', this.zk)
|
},
|
clear() {
|
this.$emit('clear')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.doumee-filter {
|
display: flex;
|
align-items: center;
|
position: relative;
|
flex-wrap: wrap;
|
align-items: center;
|
background-color: #fff;
|
border-bottom: 10px solid #f7f8f9;
|
margin: 0 -20px;
|
padding: 0 0 0 20px;
|
|
.el-input,
|
.el-select {
|
width: 200px;
|
margin-right: 20px;
|
margin-bottom: 20px;
|
height: 36px;
|
|
.el-input__inner {
|
/* color: $textColor; */
|
padding: 0 16px;
|
}
|
}
|
|
.el-date-editor {
|
width: 200px;
|
margin-right: 20px;
|
margin-bottom: 20px;
|
|
.el-input__inner {
|
padding-left: 30px;
|
}
|
}
|
|
.el-button {
|
margin-bottom: 20px;
|
}
|
|
.el-form-item {
|
margin-bottom: 20px;
|
margin-right: 20px;
|
|
.el-input,
|
.el-select,
|
.el-date-editor {
|
margin-right: 0;
|
}
|
|
.el-input,
|
.el-select,
|
.el-date-editor,
|
.el-button {
|
margin-bottom: 0;
|
}
|
}
|
}
|
</style>
|
