<template>
|
<div class="page-search">
|
<el-form :id="defaultStyle ? '' : 'searchForm'" :model="form" size="mini" ref="form"
|
:rules="formRules" class="commonForm" :style="{padding:defaultPadding}"
|
v-if="(form && JSON.stringify(form) != '{}') || isExistBtn">
|
<el-row :gutter="20">
|
<slot name="topForm" :data="form"></slot>
|
<template v-for="item in formLabel">
|
<el-col v-show='!item.isHide&&(showFormItem||(!showFormItem&&item.showItem!==false))'
|
:xs='item.sx||12' :sm='item.sm||12' :md='item.sm||12' :lg='item.sm||6' :offset="0"
|
:key="item.model">
|
<el-form-item :label="item.label+(item.label !== '-' ? ':' : '')" :prop="item.model"
|
:label-width="item.labelWidth||labelWidth" :class="[item.timeClass]">
|
<el-input v-model.trim="form[item.model]" :placeholder="'请输入' + item.label"
|
:type="item.flag" :autosize="{ minRows: 1, maxRows: 4}"
|
v-if="item.type === 'input'" clearable style="width:100%;"
|
@input="getInputVal(item)"></el-input>
|
<el-select :popper-append-to-body="false" style="width:100%"
|
v-model="form[item.model]" :placeholder="'请选择' + item.label"
|
v-if="item.type === 'select'" :multiple="item.multiple"
|
:clearable="item.clearable === undefined" filterable
|
@change="changeSelect">
|
<el-option v-for="item in item.opts" :key="item.id" :disabled="item.disabled"
|
:value="item.id" :label="item.name">
|
</el-option>
|
</el-select>
|
<el-cascader v-model="form[item.model]" :placeholder="'请选择' + item.label"
|
style="width:100%" :options="item.opts" v-if="item.type === 'cascader'"
|
:props="{ multiple: item.multiple ? true : false }"
|
:clearable="item.clearable === undefined"
|
:show-all-levels="item.showAllLevels" :collapse-tags="item.collapseTags"
|
:filterable="item.filterable ? true : false">
|
</el-cascader>
|
<el-checkbox-group v-model="form[item.model]" v-if="item.type === 'checkbox'"
|
style="width:100%;">
|
<el-checkbox v-for="item in item.opts" :key="item.id" :label="item.id">{{item.name}}
|
</el-checkbox>
|
</el-checkbox-group>
|
<el-radio-group v-model="form[item.model]" v-if="item.type === 'radio'"
|
style="width:100%;">
|
<el-radio v-for="item in item.opts" :key="item.id" :label="item.id">{{item.name}}
|
</el-radio>
|
</el-radio-group>
|
<el-switch v-model="form[item.model]" v-if="item.type === 'switch'"
|
style="width:100%;"></el-switch>
|
<el-date-picker v-model="form[item.model]" style="width:100%" :type="item.flag"
|
start-placeholder="开始日期" end-placeholder="结束日期"
|
:placeholder="'请选择' + (item.customLabel||item.label)"
|
v-if="item.type === 'date'"
|
:value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
|
@change="changeDate(form[item.model])"
|
:clearable="item.clearable === undefined"
|
:picker-options="item.pickerOptions">
|
</el-date-picker>
|
<el-input-number :controls-position="item.controlPos" :min="item.min"
|
v-model="form[item.model]" v-if="item.type === 'number'"
|
:disabled="item.disabled"></el-input-number>
|
<el-col v-if="item.type === 'numberRange'">
|
<el-input-number :controls-position="item.controlPos" :min="item.min || 1"
|
:max="form[item.customValue[1]]-1 || Infinity"
|
v-model="form[item.customValue[0]]" style="width:48%"
|
@change="changeNumRange(0, item)" :disabled="item.disabled">
|
</el-input-number>
|
-
|
<el-input-number :controls-position="item.controlPos"
|
v-model="form[item.customValue[1]]" style="width:48%"
|
@change="changeNumRange(1, item)"
|
:min="form[item.customValue[0]]+1"
|
:disabled="!form[item.customValue[0]]"></el-input-number>
|
</el-col>
|
<!-- 自定义label -->
|
<template slot="label" v-if="item.labelType">
|
<el-select v-model="item.model" v-if="item.labelType === 'select'"
|
@change="labelValChange($event,item)">
|
<el-option v-for="childItem in item.data" :key="childItem.model"
|
:label="childItem.label+(childItem.label !== '-' ? ':' : '')"
|
:value="childItem.model">
|
</el-option>
|
</el-select>
|
</template>
|
</el-form-item>
|
</el-col>
|
</template>
|
<slot name="otherElement" :data="form"></slot>
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
}
|
},
|
props: {
|
/**
|
* 是否行内表单
|
*/
|
inline: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* label宽度
|
*/
|
labelWidth: {
|
type: String,
|
default: '80px'
|
},
|
/**
|
*表单数据
|
*/
|
form: {
|
type: Object,
|
default: function() {
|
return {}
|
}
|
},
|
/**
|
* 标签数据
|
*/
|
formLabel: {
|
type: Array,
|
default: function() {
|
return []
|
}
|
},
|
/**
|
* 表单验证
|
*/
|
formRules: {
|
type: Object,
|
default: function() {
|
return {}
|
}
|
},
|
/**
|
* 无表单查询条件的情况下---是否存在按钮插槽
|
*/
|
isExistBtn: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
* 是否采用默认样式
|
*/
|
defaultStyle: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
* 默认padding值
|
*/
|
defaultPadding: {
|
type: String,
|
default: '40px 20px 12px'
|
},
|
// 展开/收起控制
|
showFormItem: {
|
type: Boolean,
|
default: false
|
}
|
},
|
methods: {
|
// 当表单label下拉选择值改变
|
labelValChange(e, obj) {
|
this.$emit('handle-Label-Value', { e, curItem: obj })
|
},
|
changeNumRange(index, item) {
|
if (!this.form[item.customValue[index]]) {
|
if (index === 0) {
|
this.form[item.customValue[1]] = undefined
|
}
|
return;
|
}
|
this.form[item.customValue[index]] = Number(this.form[item.customValue[index]].toString().replace(/\D/g, ''));
|
},
|
/**
|
* input值正则匹配
|
*/
|
getInputVal(data) {
|
this.form[data.model] = data.rule ? this.form[data.model].replace(data.rule, '') : this.form[data.model]
|
},
|
/**
|
* 当时间改变时
|
*/
|
changeDate(data) {
|
this.$emit('handle-Value', data)
|
},
|
/**
|
* 重置表单
|
*/
|
resetForm() {
|
this.$refs.form.resetFields()
|
},
|
/**
|
* 自动更新
|
*/
|
changeSelect() {
|
this.$forceUpdate()
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
#searchForm.commonForm.el-form {
|
.start-time-style,
|
.end-time-style {
|
.el-picker-panel {
|
.el-input {
|
width: auto !important;
|
}
|
}
|
}
|
.end-time-style .el-form-item__label {
|
width: 20px !important;
|
}
|
}
|
.commonForm {
|
background-color: #fff;
|
border-radius: 6px;
|
margin-bottom: 20px;
|
.el-row {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
}
|
.el-form-item__content {
|
.el-range-editor--mini.el-input__inner {
|
max-width: 100% !important;
|
}
|
.el-select__tags {
|
max-height: 50px;
|
overflow-y: auto;
|
}
|
}
|
}
|
.pageStyle {
|
text-align: right !important;
|
margin-top: 30px;
|
}
|
</style>
|
