|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
<script type="text/jsx"> |
|
|
|
|
import {deepClone} from "@/util" |
|
|
|
|
import {isEmpty, deepClone} from "@/util" |
|
|
|
|
import {getElementInnerWidth} from '@/util/browser' |
|
|
|
|
import {clearableComponentTag, clearFormItem} from "@/util/element-ui/elForm" |
|
|
|
|
import {findComponentByTag} from "@/util/vue" |
|
|
|
|
@ -13,8 +13,18 @@ export default { |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
props: { |
|
|
|
|
// 搜索表单变量对象 |
|
|
|
|
model: Object, |
|
|
|
|
labelWidth: {type: String, default: '120px'}, |
|
|
|
|
// 是否默认展开全部 |
|
|
|
|
defaultExpand: { type: Boolean, default: true }, |
|
|
|
|
|
|
|
|
|
// el-form原始属性 |
|
|
|
|
labelWidth: String, |
|
|
|
|
labelPosition: { type: String, default: 'right' }, |
|
|
|
|
labelSuffix: { type: String, default: '：' }, |
|
|
|
|
|
|
|
|
|
// 每个搜索项之间的间隔，等同于el-row的gutter |
|
|
|
|
gutter: { type: Number, default: 20 }, |
|
|
|
|
|
|
|
|
|
/*每个宽度下，一行能有多少个控件，需要是24的因数*/ |
|
|
|
|
xs: {type: Number, default: 1}, // <768px |
|
|
|
|
@ -23,12 +33,32 @@ export default { |
|
|
|
|
lg: {type: Number, default: 4} // >=1200px |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
data() { |
|
|
|
|
data(vm) { |
|
|
|
|
return { |
|
|
|
|
showCollapse: false, //是否需要折叠控制 |
|
|
|
|
collapse: true, //是否处于折叠状态，默认折叠 |
|
|
|
|
num: 0, //从第几个控件开始需要隐藏 |
|
|
|
|
span: 8 //24等分下，每个栅格的宽度 |
|
|
|
|
maxLabelLength: 0, // 子级el-form-item中最长的label长度，中文占1，英文占0.5 |
|
|
|
|
showCollapse: false, // 是否需要折叠控制 |
|
|
|
|
collapse: !vm.defaultExpand, // 是否处于折叠状态 |
|
|
|
|
num: 0, // 从第几个控件开始需要隐藏 |
|
|
|
|
span: 8 // 24等分下，每个栅格的宽度，这里是默认值 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
computed: { |
|
|
|
|
innerLabelWith() { |
|
|
|
|
// 优先使用传入的props.labelWidth |
|
|
|
|
if (!isEmpty(this.labelWidth)) return this.labelWidth |
|
|
|
|
// 否则使用子级最长的label长度 + 固定后缀长度（固定为1）+ 1 |
|
|
|
|
const fixedLength = isEmpty(this.labelSuffix) ? 0 : 1 |
|
|
|
|
return `${this.maxLabelLength + fixedLength + 1}em` |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
watch: { |
|
|
|
|
defaultExpand: { |
|
|
|
|
immediate: true, |
|
|
|
|
handler(v) { |
|
|
|
|
v && (this.collapse = false) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
@ -52,6 +82,9 @@ export default { |
|
|
|
|
//因为表单可能存在无清空功能的组件，所以传递一次初始值 |
|
|
|
|
this.$emit('reset', deepClone(this.initialModel)) |
|
|
|
|
}, |
|
|
|
|
handleSubmit() { |
|
|
|
|
this.handleSearch() |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
getElementNumInRow() { |
|
|
|
|
const vw = getElementInnerWidth(this.$el.parentNode) |
|
|
|
|
@ -86,19 +119,21 @@ export default { |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div class="search-form-action"> |
|
|
|
|
<el-button type="primary" size="small" on-click={this.handleSearch}>查 询</el-button> |
|
|
|
|
<el-button type="dashed" size="small" plain on-click={this.handleReset}>重 置</el-button> |
|
|
|
|
{this.showCollapse && ( |
|
|
|
|
<el-button |
|
|
|
|
type="text" |
|
|
|
|
size="small" |
|
|
|
|
style="padding-left: 0" |
|
|
|
|
on-click={this.handleCollapse} |
|
|
|
|
> |
|
|
|
|
{ctrl.t} |
|
|
|
|
<v-icon icon={ctrl.i} style="margin-left: 0.5em"/> |
|
|
|
|
</el-button> |
|
|
|
|
)} |
|
|
|
|
<el-form-item label-width="0"> |
|
|
|
|
<el-button type="primary" size="small" on-click={this.handleSearch}>查 询</el-button> |
|
|
|
|
<el-button type="dashed" size="small" plain on-click={this.handleReset}>重 置</el-button> |
|
|
|
|
{this.showCollapse && ( |
|
|
|
|
<el-button |
|
|
|
|
class="search-form-action-button" |
|
|
|
|
type="text" |
|
|
|
|
size="small" |
|
|
|
|
on-click={this.handleCollapse} |
|
|
|
|
> |
|
|
|
|
{ctrl.t} |
|
|
|
|
<v-icon icon={ctrl.i}/> |
|
|
|
|
</el-button> |
|
|
|
|
)} |
|
|
|
|
</el-form-item> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
@ -121,7 +156,20 @@ export default { |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
const slots = this.$slots.default, collapse = this.showCollapse && this.collapse |
|
|
|
|
const slots = this.$slots.default.filter(i => i.tag) |
|
|
|
|
const collapse = this.showCollapse && this.collapse |
|
|
|
|
|
|
|
|
|
this.maxLabelLength = Math.max(...slots.map(vnode => { |
|
|
|
|
const label = vnode.componentOptions?.propsData?.label |
|
|
|
|
if (isEmpty(label)) return 0 |
|
|
|
|
|
|
|
|
|
// 计算label对应多少em，中文为1em，英文为0.5em |
|
|
|
|
let num = 0 |
|
|
|
|
for (let i = 0; i < label.length; i++) { |
|
|
|
|
num += label.charCodeAt(i) > 127 ? 1 : 0.5 |
|
|
|
|
} |
|
|
|
|
return num |
|
|
|
|
})) |
|
|
|
|
|
|
|
|
|
const display = collapse ? slots.slice(0, this.num) : slots |
|
|
|
|
const hidden = collapse ? slots.slice(this.num) : [] |
|
|
|
|
@ -129,12 +177,13 @@ export default { |
|
|
|
|
return ( |
|
|
|
|
<el-form |
|
|
|
|
class="search-form" |
|
|
|
|
label-position="right" |
|
|
|
|
label-width={this.labelWidth} |
|
|
|
|
label-suffix=":" |
|
|
|
|
label-position={this.labelPosition} |
|
|
|
|
label-width={this.innerLabelWith} |
|
|
|
|
label-suffix={this.labelSuffix} |
|
|
|
|
size="small" |
|
|
|
|
{...{ nativeOn: { submit: this.handleSubmit } }} |
|
|
|
|
> |
|
|
|
|
<el-row gutter={20}> |
|
|
|
|
<el-row gutter={this.gutter}> |
|
|
|
|
{this.renderChildren(display)} |
|
|
|
|
{this.renderChildren(hidden, true)} |
|
|
|
|
{this.renderAction()} |
|
|
|
|
@ -149,6 +198,15 @@ export default { |
|
|
|
|
.search-form { |
|
|
|
|
&-action { |
|
|
|
|
margin-left: auto; |
|
|
|
|
text-align: right; |
|
|
|
|
|
|
|
|
|
&-button { |
|
|
|
|
padding-left: 0; |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
margin-left: 0.5em; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
> .el-row { |
|
|
|
|
|
toesbieya
5 years ago