mt-fe-group/cnbmai-ui
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

去除展开收起功能，搜索框显示不下自动换行

Browse Source
This commit is contained in:
朱菊兰 2024-04-10 14:38:56 +08:00
parent 6aec5fc4b5
commit 870aaa5f80
2 changed files with 67 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "code-brick-zj", "name": "code-brick-zj",
"version": "1.0.5", "version": "1.1.0",
"private": false, "private": false,
"description": "组件封装", "description": "组件封装",
"main": "index.js" "main": "index.js"

146
src/components/SearchBar/SearchBar.vue
View File

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