|
|
@@ -1,5 +1,9 @@ |
|
|
|
<template> |
|
|
|
<div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }"> |
|
|
|
<div |
|
|
|
class="searchBarBox" |
|
|
|
ref="searchBarRef" |
|
|
|
:style="{ paddingRight: isFold ? '55px' : '0px' }" |
|
|
|
> |
|
|
|
<el-form |
|
|
|
:inline="true" |
|
|
|
ref="searchBarForm" |
|
|
@@ -33,12 +37,12 @@ |
|
|
|
:multiple-limit="item.multipleLimit ? item.multipleLimit : 0" |
|
|
|
:clearable="item.clearable === false ? false : true" |
|
|
|
:style="item.width ? 'width:' + item.width + 'px' : 'width:200px'" |
|
|
|
:placeholder="item.placeholder ? item.placeholder :item.label" |
|
|
|
:placeholder="item.placeholder ? item.placeholder : item.label" |
|
|
|
@change=" |
|
|
|
item.onchange |
|
|
|
? $emit('select-changed', { |
|
|
|
param: item.param, |
|
|
|
value: formInline[item.param] |
|
|
|
value: formInline[item.param], |
|
|
|
}) |
|
|
|
: null |
|
|
|
" |
|
|
@@ -65,7 +69,17 @@ |
|
|
|
:placeholder="item.placeholder" |
|
|
|
:picker-options="item.pickerOptions ? item.pickerOptions : null" |
|
|
|
:clearable="item.clearable === false ? false : true" |
|
|
|
:style="item.width ? 'width:' + item.width + 'px' : (item.dateType === 'datetimerange' ? 'width:350px' : (item.dateType === 'daterange' ? 'width:252px' : (item.dateType === 'datetime' ? 'width:200px' : 'width:148px')))" |
|
|
|
:style=" |
|
|
|
item.width |
|
|
|
? 'width:' + item.width + 'px' |
|
|
|
: item.dateType === 'datetimerange' |
|
|
|
? 'width:350px' |
|
|
|
: item.dateType === 'daterange' |
|
|
|
? 'width:252px' |
|
|
|
: item.dateType === 'datetime' |
|
|
|
? 'width:200px' |
|
|
|
: 'width:148px' |
|
|
|
" |
|
|
|
/> |
|
|
|
<el-autocomplete |
|
|
|
v-if="item.type === 'autocomplete'" |
|
|
@@ -92,7 +106,7 @@ |
|
|
|
item.onChange |
|
|
|
? $emit('cascader-change', { |
|
|
|
param: item.param, |
|
|
|
value: formInline[item.param] |
|
|
|
value: formInline[item.param], |
|
|
|
}) |
|
|
|
: null |
|
|
|
" |
|
|
@@ -114,81 +128,77 @@ |
|
|
|
<slot></slot> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<span v-if="isFold" class="foldClass" @click='switchMode'> |
|
|
|
{{ isExpand ? '收起' : '展开' }} |
|
|
|
<i class="iconfont" :class="isExpand ? 'icon-upward' : 'icon-downward'"></i> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: 'SearchBar', |
|
|
|
name: "SearchBar", |
|
|
|
props: { |
|
|
|
formConfigs: { |
|
|
|
type: Array, |
|
|
|
default: () => { |
|
|
|
return [] |
|
|
|
} |
|
|
|
return []; |
|
|
|
}, |
|
|
|
}, |
|
|
|
removeBlue: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
isFold: {// 多行模式(默认否) |
|
|
|
isFold: { |
|
|
|
// 多行模式(默认否) |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
} |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
const formInline = {} |
|
|
|
const formConfig = this.formConfigs |
|
|
|
let hasExtraOptions = false |
|
|
|
const formInline = {}; |
|
|
|
const formConfig = this.formConfigs; |
|
|
|
let hasExtraOptions = false; |
|
|
|
for (const obj of formConfig) { |
|
|
|
if (obj.type !== 'button') { |
|
|
|
if (obj.type !== "button") { |
|
|
|
if (obj.defaultSelect === false || obj.defaultSelect === 0) { |
|
|
|
formInline[obj.param] = obj.defaultSelect |
|
|
|
formInline[obj.param] = obj.defaultSelect; |
|
|
|
} else { |
|
|
|
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项 |
|
|
|
formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项 |
|
|
|
} |
|
|
|
} |
|
|
|
if (obj.extraOptions) { |
|
|
|
hasExtraOptions = true |
|
|
|
hasExtraOptions = true; |
|
|
|
} |
|
|
|
} |
|
|
|
return { |
|
|
|
formInline, |
|
|
|
formConfig, |
|
|
|
hasExtraOptions, |
|
|
|
isExpand: false // 是否展开(默认否) |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
formConfig: { |
|
|
|
handler() { |
|
|
|
for (const obj of this.formConfig) { |
|
|
|
if (obj.defaultSelect) { |
|
|
|
this.formInline[obj.param] = obj.defaultSelect |
|
|
|
this.formInline[obj.param] = obj.defaultSelect; |
|
|
|
} else if (obj.defaultSelect === null) { |
|
|
|
// 需要手动从外部清除选项缓存的情况,确保在外部配置项中可直接设置null |
|
|
|
this.formInline[obj.param] = '' |
|
|
|
this.formInline[obj.param] = ""; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
deep: true, |
|
|
|
immediate: true |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
formInline: { |
|
|
|
handler: function () { |
|
|
|
this.$forceUpdate() |
|
|
|
this.$forceUpdate(); |
|
|
|
}, |
|
|
|
deep: true, |
|
|
|
immediate: true |
|
|
|
} |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.init() |
|
|
|
}) |
|
|
|
this.init(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
init() { |
|
|
@@ -200,61 +210,52 @@ export default { |
|
|
|
this.$watch( |
|
|
|
`formInline.${obj.param}`, |
|
|
|
function (newVal) { |
|
|
|
let deleteCount = 0 |
|
|
|
let deleteCount = 0; |
|
|
|
if (obj.index + 1 < this.formConfig.length) { |
|
|
|
// 如果obj不是最后一个配置 |
|
|
|
const nextConfig = this.formConfig[obj.index + 1] |
|
|
|
const nextConfig = this.formConfig[obj.index + 1]; |
|
|
|
if (nextConfig.parent && nextConfig.parent === obj.param) |
|
|
|
deleteCount = 1 |
|
|
|
deleteCount = 1; |
|
|
|
} |
|
|
|
const currentConfig = Object.assign( |
|
|
|
{}, |
|
|
|
obj.extraOptions[newVal] |
|
|
|
) |
|
|
|
); |
|
|
|
this.formConfig.splice( |
|
|
|
obj.index + 1, |
|
|
|
deleteCount, |
|
|
|
currentConfig |
|
|
|
) |
|
|
|
); |
|
|
|
// 修改 formInline |
|
|
|
this.$set(this.formInline, currentConfig.param, '') |
|
|
|
this.$set(this.formInline, currentConfig.param, ""); |
|
|
|
}, |
|
|
|
{ immediate: true } |
|
|
|
) |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
headBtnClick(btnName) { |
|
|
|
this.formInline.btnName = btnName |
|
|
|
this.$emit('headBtnClick', this.formInline) |
|
|
|
this.formInline.btnName = btnName; |
|
|
|
this.$emit("headBtnClick", this.formInline); |
|
|
|
}, |
|
|
|
resetForm() { |
|
|
|
this.$refs.searchBarForm.resetFields() |
|
|
|
const formInline = {} |
|
|
|
const formConfig = this.formConfigs |
|
|
|
this.$refs.searchBarForm.resetFields(); |
|
|
|
const formInline = {}; |
|
|
|
const formConfig = this.formConfigs; |
|
|
|
for (const obj of formConfig) { |
|
|
|
if (obj.type !== 'button') { |
|
|
|
if (obj.type !== "button") { |
|
|
|
if (obj.defaultSelect === false || obj.defaultSelect === 0) { |
|
|
|
formInline[obj.param] = obj.defaultSelect |
|
|
|
formInline[obj.param] = obj.defaultSelect; |
|
|
|
} else { |
|
|
|
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项 |
|
|
|
formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
this.formInline = formInline |
|
|
|
this.formInline = formInline; |
|
|
|
}, |
|
|
|
switchMode() {// 展开和收起切换 |
|
|
|
this.isExpand = !this.isExpand |
|
|
|
const element = this.$refs.searchBarRef |
|
|
|
if (this.isExpand) { |
|
|
|
element.classList.remove('divHeight') |
|
|
|
} else { |
|
|
|
element.classList.add('divHeight') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style> |
|
|
|
.searchBarBox { |
|
|
@@ -267,16 +268,12 @@ export default { |
|
|
|
display: block; |
|
|
|
clear: both; |
|
|
|
} |
|
|
|
.divHeight { |
|
|
|
height: 45px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.searchBar .blue-block { |
|
|
|
display: inline-block; |
|
|
|
float: left; |
|
|
|
width: 4px; |
|
|
|
height: 16px; |
|
|
|
background-color: #0B58FF; |
|
|
|
background-color: #0b58ff; |
|
|
|
border-radius: 1px; |
|
|
|
margin-right: 8px; |
|
|
|
margin-top: 12px; |
|
|
@@ -286,32 +283,21 @@ export default { |
|
|
|
} |
|
|
|
.searchBar .el-date-editor .el-range__icon { |
|
|
|
font-size: 16px; |
|
|
|
color:#0B58FF; |
|
|
|
color: #0b58ff; |
|
|
|
} |
|
|
|
.searchBar .el-input__prefix .el-icon-date { |
|
|
|
font-size: 16px; |
|
|
|
color:#0B58FF; |
|
|
|
color: #0b58ff; |
|
|
|
} |
|
|
|
.searchBar .el-input__prefix .el-icon-time { |
|
|
|
font-size: 16px; |
|
|
|
color:#0B58FF; |
|
|
|
color: #0b58ff; |
|
|
|
} |
|
|
|
.searchBar .separateStyle { |
|
|
|
display: inline-block; |
|
|
|
width: 1px; |
|
|
|
height: 24px; |
|
|
|
background: #E8E8E8; |
|
|
|
background: #e8e8e8; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
.searchBarBox .foldClass { |
|
|
|
position: absolute; |
|
|
|
top: 14px; |
|
|
|
right: 0; |
|
|
|
cursor: pointer; |
|
|
|
font-size: 12px; |
|
|
|
color:#0B58FF; |
|
|
|
} |
|
|
|
.searchBarBox .foldClass .iconfont { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
</style> |