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

Compare commits

base: mt-fe-group:b67fabcc1047173b1f951127bad2e531596d268a
Branches Tags
mt-fe-group:develop
mt-fe-group:zjl
mt-fe-group:zhp
mt-fe-group:gtz
..
compare: mt-fe-group:c0184c4078726b73c59b529bf64889dd187fe5d6
Branches Tags
mt-fe-group:zjl
mt-fe-group:develop
mt-fe-group:zhp
mt-fe-group:gtz

No commits in common. "b67fabcc1047173b1f951127bad2e531596d268a" and "c0184c4078726b73c59b529bf64889dd187fe5d6" have entirely different histories.
b67fabcc10 ... c0184c4078

2 changed files with 81 additions and 67 deletions
Show Stats 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.1.0", "version": "1.0.5",
"private": false, "private": false,
"description": "组件封装", "description": "组件封装",
"main": "index.js" "main": "index.js"

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

@ -1,9 +1,5 @@
<template> <template>
<div <div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
class="searchBarBox"
ref="searchBarRef"
:style="{ paddingRight: isFold ? '55px' : '0px' }"
>
<el-form <el-form
:inline="true" :inline="true"
ref="searchBarForm" ref="searchBarForm"
@ -42,7 +38,7 @@
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
" "
@ -69,17 +65,7 @@
: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=" :style="item.width ? 'width:' + item.width + 'px' : (item.dateType === 'datetimerange' ? 'width:350px' : (item.dateType === 'daterange' ? 'width:252px' : (item.dateType === 'datetime' ? 'width:200px' : 'width:148px')))"
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'"
@ -106,7 +92,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
" "
@ -128,77 +114,81 @@
<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() {
@ -210,52 +200,61 @@ 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 {
@ -268,12 +267,16 @@ 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;
@ -283,21 +286,32 @@ 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>