<template>
|
<div class="page-search">
|
<el-form id="searchForm" :model="form" size="mini" ref="form" :rules="formRules"
|
class="commonForm" v-if="(form && JSON.stringify(form) != '{}') || isExistBtn">
|
<el-row :gutter="20">
|
<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="form[item.model]" :placeholder="'请输入' + item.label"
|
v-if="item.type === 'input'" :autosize="{ minRows: 1, maxRows: 4}" clearable
|
style="width:100%"></el-input>
|
<el-select style="width:100%" v-model="form[item.model]"
|
:placeholder="'请选择' + item.label" v-if="item.type === 'select'"
|
:multiple="item.multiple" collapse-tags
|
:clearable="item.clearable === undefined"
|
:disabled="item.disabled ? true : false">
|
<el-option v-for="item in item.opts" :key="item.id" :value="item.id"
|
:label="item.name">
|
</el-option>
|
</el-select>
|
<el-checkbox-group style="width:100%;" v-model="form[item.model]"
|
v-if="item.type === 'checkbox'">
|
<el-checkbox v-for="item in item.opts" :key="item.id" :label="item.id">{{item.name}}
|
</el-checkbox>
|
</el-checkbox-group>
|
<el-radio-group style="width:100%;" v-model="form[item.model]"
|
v-if="item.type === 'radio'">
|
<el-radio v-for="item in item.opts" :key="item.id" :label="item.id">{{item.name}}
|
</el-radio>
|
</el-radio-group>
|
<el-switch style="width:100%;" v-model="form[item.model]"
|
v-if="item.type === 'switch'"></el-switch>
|
<el-date-picker style="width:100%;" v-model="form[item.model]" :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'">
|
</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" style="width:100%;"></el-input-number>
|
</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
|
},
|
// 展开/收起控制
|
showFormItem: {
|
type: Boolean,
|
default: false
|
},
|
},
|
methods: {
|
/**
|
* 重置表单
|
*/
|
resetForm() {
|
this.$refs.form.resetFields()
|
},
|
}
|
}
|
</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;
|
padding: 40px 20px 12px;
|
border-radius: 6px;
|
margin-bottom: 20px;
|
.el-row {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
}
|
.el-form-item {
|
width: 100%;
|
}
|
.el-form-item__content {
|
.el-range-editor--mini.el-input__inner {
|
max-width: 100% !important;
|
}
|
.el-select__tags {
|
max-height: 50px;
|
overflow-y: auto;
|
}
|
}
|
}
|
</style>
|
