114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
<template>
|
||
<Form ref="searchForm" :model="model" :label-width="labelWidth" :size="size" :inline="true" >
|
||
<div :id="formId">
|
||
<slot></slot>
|
||
<FormItem>
|
||
<Button type="primary" icon="el-icon-search" @click="handleQuery">查询</Button>
|
||
<Button icon="el-icon-refresh" @click="handleReset">重置</Button>
|
||
<Button v-show="collapsiable" type="text" @click="shiftCollapsiable">
|
||
<span>
|
||
{{ fold ? '收起' : '展开' }}
|
||
<i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
|
||
</span>
|
||
</Button>
|
||
</FormItem>
|
||
</div>
|
||
</Form>
|
||
</template>
|
||
<script>
|
||
import { Form, FormItem, Button } from 'element-ui'
|
||
export default {
|
||
name: 'SearchForm',
|
||
components: { Form, FormItem, Button },
|
||
props: {
|
||
that: { type: Object, default: this },
|
||
// 最大展示数，默认3个，超过则隐藏，为0时不限制
|
||
maxShow: {
|
||
type: Number,
|
||
default: 3,
|
||
},
|
||
labelWidth: {
|
||
type: String,
|
||
default: '100px',
|
||
},
|
||
size: {
|
||
type: String,
|
||
default: 'small',
|
||
},
|
||
model: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
collapsiable: false,
|
||
fold: false,
|
||
formId:"",
|
||
}
|
||
},
|
||
created() {
|
||
this.formId="searchForm"+this.getUUID();
|
||
},
|
||
mounted() {
|
||
// 通过最大显示个数控制展开/折叠
|
||
if (this.maxShow > 0) {
|
||
this.minShowCtrol()
|
||
}
|
||
},
|
||
methods: {
|
||
getUUID() {
|
||
return Math.random().toString(36).substring(3,10);
|
||
},
|
||
shiftCollapsiable() {
|
||
this.fold = !this.fold
|
||
this.minShowCtrol()
|
||
},
|
||
// 通过maxShow控制元素显示/折叠
|
||
minShowCtrol() {
|
||
let id=`#${this.formId} .el-form-item.el-form-item--${this.size}`;
|
||
const group = window.document.querySelectorAll(id)
|
||
const len = group?.length ? group?.length - 1 : 0
|
||
if (this.maxShow < len) {
|
||
group.forEach((item, index) => {
|
||
if (index > this.maxShow - 1 && index < len) {
|
||
if(!this.fold){
|
||
item.style.display = 'none';
|
||
}else{
|
||
item.style.display = '';
|
||
}
|
||
// item.hidden = !this.fold
|
||
}
|
||
})
|
||
this.collapsiable = true
|
||
} else {
|
||
this.collapsiable = false
|
||
}
|
||
},
|
||
handleQuery() {
|
||
this.$emit('search')
|
||
},
|
||
handleReset() {
|
||
// this.resetForm();
|
||
this.$emit('reset')
|
||
},
|
||
resetForm() {
|
||
console.log("hhhhhh1==>resetForm11");
|
||
if (this.$refs["searchForm"]) {
|
||
this.$refs["searchForm"].resetFields();
|
||
}
|
||
},
|
||
resetFields(){
|
||
console.log("hhhhhh1==>resetFields111");
|
||
if (this.$refs["searchForm"]) {
|
||
console.log("hhhhhh1==>resetFields222");
|
||
this.$refs["searchForm"].resetFields();
|
||
}
|
||
}
|
||
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped></style>
|
||
|