<template>
|
<div class="search-form-content">
|
<!-- :style="{ minHeight: isShowDetail ? '115px' : '50px' }" -->
|
<el-form
|
:inline="true"
|
label-width="96px"
|
size="small"
|
ref="conform"
|
:model="forms"
|
>
|
<el-form-item
|
v-bind:class="[
|
screenWidth > 1660 ? 'con_max_width' : 'con_min_width',
|
item.label.length > 7 ? 'long_lable' : '',
|
Number.isInteger((index + 1) / (screenWidth > 1660 ? 4 : 3))
|
? ''
|
: 'form_split'
|
]"
|
v-for="(item, index) in arrayInfo"
|
:key="index"
|
:prop="item.name"
|
:label="item.label"
|
>
|
<el-input
|
v-if="item.type === 'input'"
|
v-model="forms[item.name]"
|
placeholder="请输入"
|
:style="{ minWidth: 219 }"
|
></el-input>
|
|
<div class="range-input" v-if="item.type === 'rangeInput'">
|
<div class="range-input-item">
|
<el-input
|
v-model="forms[item.startKey]"
|
placeholder="请输入"
|
></el-input>
|
</div>
|
<span class="range-separato">-</span>
|
<div class="range-input-item">
|
<el-input
|
v-model="forms[item.endKey]"
|
placeholder="请输入"
|
></el-input>
|
</div>
|
</div>
|
|
<el-select
|
v-if="item.type === 'select'"
|
v-model="forms[item.name]"
|
:filterable="item.filterable || true"
|
placeholder="请选择"
|
:style="{ minWidth: 219 }"
|
>
|
<el-option
|
v-for="(optionsItem, optionsIndex) in item.options"
|
:key="optionsIndex"
|
:label="optionsItem.label || optionsItem[item.labelKey]"
|
:value="optionsItem.value || optionsItem[item.valueKey]"
|
></el-option>
|
</el-select>
|
|
<el-select
|
v-if="item.type === 'multipleSelect'"
|
v-model="forms[item.name]"
|
placeholder="请选择"
|
:filterable="item.filterable || true"
|
multiple
|
collapse-tags
|
:style="{ minWidth: 219 }"
|
>
|
<el-option
|
v-for="(optionsItem, optionsIndex) in item.options"
|
:key="optionsIndex"
|
:label="optionsItem.label || optionsItem[item.labelKey]"
|
:value="optionsItem.value || optionsItem[item.valueKey]"
|
></el-option>
|
</el-select>
|
|
<el-date-picker
|
v-if="item.type === 'date'"
|
v-model="forms[item.name]"
|
placeholder="请选择"
|
:style="{ minWidth: 219 }"
|
type="date"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
></el-date-picker>
|
|
<el-date-picker
|
v-if="item.type === 'rangeDate'"
|
v-model="forms[item.name]"
|
@change="handleRangeDateChange(item)"
|
:style="{ minWidth: 219 }"
|
type="daterange"
|
range-separator="-"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
</el-form-item>
|
|
<el-form-item class="button-item">
|
<p>
|
<el-button
|
@click="reset(true)"
|
size="small"
|
v-if="buttonsList.includes(1)"
|
>重置</el-button
|
>
|
</p>
|
<p>
|
<el-button
|
type="primary"
|
size="small"
|
v-if="buttonsList.includes(2)"
|
@click="$emit('handleOnSeach')"
|
>搜索</el-button
|
>
|
</p>
|
<p>
|
<Fold
|
:isShowDetail="isShowDetail"
|
v-if="buttonsList.includes(3)"
|
@handleClick="$emit('handleClick')"
|
></Fold>
|
</p>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
// 表单项-目前用于搜索部分
|
import Fold from "./Fold";
|
export default {
|
data() {
|
return {
|
forms: { ...this.conForm }
|
};
|
},
|
components: {
|
Fold
|
},
|
props: {
|
conForm: {
|
type: Object,
|
default: v => {
|
return {};
|
}
|
},
|
info: {
|
type: [Object, Array],
|
default: v => {
|
return [];
|
}
|
},
|
screenWidth: {
|
type: Number,
|
default: () => {
|
return document.body.offsetWidth;
|
}
|
},
|
// 展开，收起
|
isShowDetail: {
|
type: Boolean,
|
default: false
|
},
|
|
// 输入框或select的宽度
|
inputWidth: {
|
type: String,
|
default: "200px"
|
},
|
|
// 标题
|
title: {
|
type: String,
|
default: ""
|
},
|
|
isShowButtons: {
|
type: Boolean,
|
default: true
|
},
|
|
// 是否转换数组数据为','分割字符串
|
isChangeArray: {
|
type: Boolean,
|
default: true
|
},
|
|
// 按钮列表 1是否展示重置按钮，2是否展示搜索按钮，3是否展示展开按钮
|
buttonsList: {
|
type: [Object, Array],
|
default: v => {
|
return [1, 2, 3];
|
}
|
}
|
},
|
mounted() {
|
// 初始赋值处理
|
this.reset();
|
},
|
methods: {
|
// rangeDate值改变处理v-model
|
handleRangeDateChange(item) {
|
const formValues = this.forms[item.name];
|
this.forms[item.startKey] = formValues ? formValues[0] : "";
|
this.forms[item.endKey] = formValues ? formValues[1] : "";
|
},
|
// 多选项点击checkbox时更新值
|
changeCheckbox(event, item) {
|
const { value } = item;
|
let valArr = [];
|
if (value.includes(event)) {
|
valArr = value.filter(itemValue => itemValue !== event);
|
} else {
|
valArr = [...value, event];
|
}
|
this.updateValue(valArr, item);
|
},
|
// 重置
|
reset(btnClick) {
|
this.forms = { ...this.conForm };
|
this.$refs["conform"].resetFields();
|
btnClick && this.$emit("handleOnRest");
|
},
|
// 格式化时间
|
format(str) {
|
return this.dayjs(str).format("YYYY/MM/DD");
|
}
|
},
|
computed: {
|
arrayInfo() {
|
let { info = [], isShowDetail, screenWidth = 1920 } = this;
|
info = Array.isArray(info) ? info : [info];
|
if (!isShowDetail) {
|
if (info.length == 3) {
|
return info.filter((value, index) => index < 3);
|
} else if (info.length === 4) {
|
return info.filter(
|
(value, index) => index < (screenWidth > 1659 ? 4 : 2)
|
);
|
} else {
|
return info.filter(
|
(value, index) => index < (screenWidth > 1659 ? 3 : 2)
|
);
|
}
|
}
|
return info;
|
},
|
buttonStatus() {
|
// 0 不显示按钮 1 行内显示 2 换行显示
|
const { isShowButtons, isShowDetail } = this;
|
let status = 1;
|
if (isShowButtons) {
|
if (isShowDetail) {
|
status = 2;
|
} else {
|
status = 1;
|
}
|
} else {
|
status = 0;
|
}
|
return status;
|
}
|
}
|
};
|
</script>
|
<style lang="stylus" scoped>
|
.search-form-content {
|
min-height: 54px;
|
& .el-form--inline {
|
min-width: 985px;
|
min-height: 49px;
|
&:after {
|
display: block;
|
clear: both;
|
content: '';
|
visibility:hidden;
|
height:0;
|
}
|
& .con_max_width {
|
width: calc(100% / 4 - 35px);
|
min-width: 313px;
|
& .el-form-item__content {
|
width: calc(100% - 98px);
|
& .el-input {
|
width: 100%;
|
}
|
& .el-select {
|
width: 100%;
|
}
|
}
|
}
|
& .con_min_width {
|
width: calc(100% / 3 - 30px);
|
min-width: 295.6px;
|
& .el-form-item__content {
|
width: calc(100% - 98px);
|
& .el-input {
|
width: 100%;
|
}
|
& .el-select {
|
width: 100%;
|
}
|
}
|
}
|
& .form_split {
|
margin-right: 40px;
|
}
|
& .long_lable {
|
& >>> label {
|
line-height: 16px;
|
}
|
}
|
}
|
& >>> .el-tag--info {
|
max-width: 94%;
|
overflow: hidden;
|
}
|
& >>> .el-select__tags-text {
|
display: inline-block;
|
max-width: 110px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
& .from-buttons {
|
padding-left: 120px;
|
display: flex;
|
& >>> .el-button {
|
margin-left: 30px;
|
}
|
}
|
& >>> .el-tag__close {
|
top: -5px;
|
right: -6px;
|
}
|
& >>> .el-form-item__label {
|
color: #888888;
|
}
|
& >>> .el-range-editor--small {
|
width: 100%;
|
}
|
& >>> .el-form-item__content {
|
width: calc(100% - 98px);
|
}
|
& >>> .button-item {
|
width: 219px;
|
float: right !important;
|
text-align: right;
|
margin-right: 0px;
|
& .el-form-item__content {
|
width: 100%;
|
display: inline-flex;
|
justify-content: flex-end;
|
}
|
& p {
|
display: inline-block;
|
&:first-child {
|
}
|
& .el-button--small {
|
height: 32px;
|
margin-left: 23px;
|
font-size: 14px;
|
padding: 9px 17px;
|
}
|
& .el-button--text {
|
margin-left: -3px;
|
font-size: 12px !important;
|
}
|
}
|
}
|
& .longLable >>> .el-form-item__label {
|
line-height: 1.3em;
|
padding-top: 0;
|
}
|
& .range-separato {
|
width: 10px;
|
padding: 0 5px 0 5px;
|
display: inline-block;
|
text-align: center;
|
}
|
& .range-input {
|
display: flex;
|
justify-content: space-between;
|
}
|
& .range-input-item {
|
display: inline-block;
|
}
|
}
|
</style>
|
