138 lines
3.0 KiB
Vue
138 lines
3.0 KiB
Vue
<template>
|
|
<div class="morescreen">
|
|
<el-popover
|
|
popper-class="machinebox"
|
|
placement="bottom"
|
|
width="450"
|
|
trigger="manual"
|
|
ref="popover"
|
|
v-model="visible"
|
|
>
|
|
<!-- 下拉项不需要合并的 -->
|
|
<el-form label-position="top" label-width="90px" :inline="true">
|
|
<el-row :gutter="10">
|
|
<el-col :span="12" v-for="(item, index) in screenList" :key="index">
|
|
<el-form-item
|
|
:label="item.label"
|
|
:prop="item.prop"
|
|
v-show="item.show"
|
|
>
|
|
<div
|
|
:is="item.type"
|
|
v-model="formLabelAlign[item.enName]"
|
|
:placeholder="item.placeholder"
|
|
:clearable="item.clearable"
|
|
:filterable="item.filterable"
|
|
:size="item.size"
|
|
:multiple="item.multiple"
|
|
collapse-tags
|
|
>
|
|
<el-option
|
|
v-for="item in item.options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div class="morebtnbox">
|
|
<el-button size="mini" plain @click="cancel">取消</el-button>
|
|
<el-button size="mini" type="primary" plain @click="search"
|
|
>查询</el-button
|
|
>
|
|
</div>
|
|
<el-button
|
|
slot="reference"
|
|
size="small"
|
|
@click="morescreen"
|
|
class="morescreen"
|
|
>更多筛选</el-button
|
|
>
|
|
</el-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:'MoreScreen',
|
|
props: {
|
|
data: {
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
formLabelAlign: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
},
|
|
components: {},
|
|
data() {
|
|
return {
|
|
visible: false, //更多筛选
|
|
};
|
|
},
|
|
computed: {
|
|
screenList() {
|
|
if (!this.data) return;
|
|
return this.data.filter((item) => item.MoreScreen);
|
|
},
|
|
},
|
|
methods: {
|
|
//更多筛选
|
|
morescreen() {
|
|
this.visible = !this.visible;
|
|
},
|
|
//更多筛选-取消
|
|
cancel() {
|
|
this.visible = false;
|
|
},
|
|
//更多筛选-查询
|
|
search() {
|
|
this.visible = false;
|
|
this.$emit("search");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang='scss'>
|
|
.morescreen{
|
|
display: inline-block;
|
|
}
|
|
.machinebox {
|
|
.el-form-item {
|
|
width: 100%;
|
|
margin: 0px;
|
|
}
|
|
|
|
.el-input {
|
|
margin: 0px !important;
|
|
}
|
|
.el-select {
|
|
width: 100%;
|
|
margin: 0px !important;
|
|
}
|
|
}
|
|
::v-deep .el-form-item__label {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
padding: 0 !important;
|
|
}
|
|
.morebtnbox {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 10px;
|
|
}
|
|
.el-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style> |