<template>
<div class="header">
<el-form ref="form" label-position="right" label-width="120px" class="forms">
<el-row class="el-row" type="flex">
<el-col :lg="item.lg" :md="item.md" v-for="(item,index) in gridInits" :key="index" class="el-col">
<el-form-item :label="`${item.label}:`">
<el-input v-model="param[item.prop]" v-if="item.type == 'input'" @keyup.enter.native="query" clearable></el-input>
<ElSelectDic v-model="param[item.prop]" :dict="item.dict" clearable v-if="item.type == 'elSelectDic'"></ElSelectDic>
<el-select v-model="param[item.prop]" placeholder="请选择" clearable v-if="item.type == 'select'">
<el-option v-for="(i,k) in item.getType" :key="k" :label="i.label" :value="i.value"></el-option>
</el-select>
<div class="input-number-range" v-if="item.type == 'number'">
<div class="flex">
<div class="from">
<el-input ref="input_from" v-model="param[item.prop[0]]" placeholder="最小值" clearable></el-input>
</div>
<div class="center">
<span>至</span>
</div>
<div class="to">
<el-input ref="input_to" v-model="param[item.prop[1]]" placeholder="最大值" clearable></el-input>
</div>
</div>
</div>
<el-date-picker v-if="item.type == 'dateTime'" v-model="param[item.prop]" type="date" value-format="yyyy-MM-dd"></el-date-picker>
<div style="width: 250px" v-if="item.type == 'datePicker'">
<el-date-picker v-model="param[item.prop]" type="daterange" value-format="yyyy-MM-dd" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</div>
</el-form-item>
</el-col>
<el-col :span="6" style="margin-left: auto;">
<div class="btm">
<div class="btn normal-btn" @click="reset">重 置</div>
<div class="btn primary-btn" @click="query">查 询</div>
<div v-if="isShow" @click="collapsed">
{{ open ? '展开' : '收起' }}
<i :class="open ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
</div>
</div>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import ElSelectDic from './ElSelectDic.vue'
export default {
name: '',
props: {
isOpen: {
type: Boolean,
default: () => false,
},
isShow: {
type: Boolean,
default: () => true,
},
gridList: {
type: Array,
default: () => [],
},
showNum: {
type: Number,
default: () => 3,
},
},
components: {
ElSelectDic
},
data() {
return {
param: {
page: 1,
size: 50,
projectId: +window.localStorage.getItem('auditImplementationId')
},
open: !this.isOpen,
gridInits: [],
};
},
mounted() {
console.log(this.gridList, './');
this.gridInits = this.$util.deepClone(this.gridList.slice(0, this.showNum))
},
methods: {
reset() {
this.param = {
page: 1,
size: 50,
projectId: +window.localStorage.getItem('auditImplementationId')
}
this.$emit('reset', this.param)
},
query() {
this.$emit('query', this.param)
},
collapsed() {
this.open = !this.open
this.$emit('calcTableHeight', this.open)
if (this.open) {
this.gridInits = this.$util.deepClone(this.gridList.slice(0, this.showNum))
} else {
this.gridInits = this.$util.deepClone(this.gridList)
}
}
}
}
</script>
<style lang='less' scoped>
.header {
padding: 0 10px;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(153, 153, 153, 0.2);
.forms {
/deep/.el-form-item__content,
/deep/.el-input__inner,
/deep/.el-input__suffix,
/deep/.el-icon-date,
/deep/.el-date-editor .el-range__close-icon {
height: 24px;
line-height: 24px;
}
/deep/.el-input__inner {
width: 250px;
}
/deep/.el-form-item {
margin: 5px 0;
}
/deep/.el-form-item__label {
color: #000;
}
/deep/.el-date-editor--daterange.el-input__inner {
width: auto;
}
.btm {
display: flex;
align-items: center;
justify-content: end;
margin-bottom: 2px;
> :nth-child(3) {
width: 43px;
margin-left: 4px;
color: #11469a;
i {
font-weight: bold;
}
&:hover {
color: #40a9ff;
cursor: pointer;
}
}
}
.el-row {
display: flex;
flex-wrap: wrap;
align-items: center;
.input-number-range {
position: relative;
background-color: #fff;
border: 1px solid #dcdfe6;
width: 250px;
border-radius: 2px;
line-height: 24px;
height: 24px;
/deep/ .el-input__inner {
width: 120px !important;
border: 0px;
margin: 0;
background-color: transparent;
}
.flex {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
align-items: center;
.center {
margin-top: -2px;
}
}
.is-disabled {
background-color: #eef0f6;
border-color: #e4e7ed;
color: #c0c4cc;
cursor: not-allowed;
}
/deep/.el-input__inner:focus {
box-shadow: 0 0 !important;
}
}
}
}
}
</style>
组件引用
<headGrid ref="Grid" :isOpen="false" :gridList="gridList" @query="query" @reset="reset" @calcTableHeight="calcTableHeight" />