先来张效果图
第一步:引入写好的组件
<options-search :formObj="formObj" @data="getData"></options-search>
第二步:自己设置下传入的表单,其中selfDefine可以设置默认值,filterInfo是表单数组,field是数据库对应的字段名称,type是表单类型(input文本搜索框,time时间范围,radio单选框,checkbox复选框,change数值范围)
formObj格式如下:
formObj: {
selfDefine: true,
filterInfo: [
{
field: 'companyName',
type: 'input',
name: '企业名称',
value: ''
},
{
field: 'time',
type: 'time',
name: '时间范围',
value: {
startDate: '',
endDate: ''
}
},
{
field: 'companyType',
type: 'radio',
name: '单位类型',
value: [{
label: '生产',
value: '生产'
}, {
label: '批发',
value: '批发'
}, {
label: '燃放',
value: '燃放'
}, {
label: '出口',
value: '出口'
}, {
label: '长期零售',
value: '长期零售'
}, {
label: '临时零售',
value: '临时零售'
}]
},
{
field: 'companyStatus',
type: 'checkbox',
name: '单位状态',
value: [{
label: '有效',
value: '有效'
}, {
label: '无效',
value: '无效'
}, {
label: '注销',
value: '注销'
}, {
label: '过期',
value: '过期'
}]
},
{
field: 'province',
type: 'radio',
name: '省内外',
value: [{
label: '省内',
value: '省内'
}, {
label: '省外',
value: '省外'
}]
},
{
field: 'loginMoney',
type: 'range',
name: '注册资金(万元)',
value: {
min: '',
max: ''
}
},
{
field: 'productCount',
type: 'range',
name: '产量(件)',
value: {
min: '',
max: ''
}
}
]
},
OptionsSeach.vue组件
<template>
<div class="show-more-box">
<div class="show-more" @click="clickMore()">+</div>
<div class="show-more-child">
<div class="more-header">
<span class="more-title">智能筛选</span>
<span class="close" @click="closeMore()"></span>
</div>
<div class="more-body">
<el-col :span="24">
<el-form label-width="120px" ref="form" :model="form" class="search-form">
<div v-for="(item,index) in formObj.filterInfo" :key="index">
<el-form-item :label="item.name" v-if="item.type==='input'" :prop="item.field">
<el-autocomplete
size="mini"
v-model="form[item.field]"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="handleSelect"
></el-autocomplete>
</el-form-item>
<el-form-item :label="item.name" v-else-if="item.type === 'time'" :prop="item.field">
<div class="block">
<el-date-picker
v-model="form[item.field].startDate"
type="date"
size="mini"
style="width:140px;"
:editable=false
placeholder="选择开始日期">
</el-date-picker>
<el-date-picker
v-model="form[item.field].endDate"
type="date"
size="mini"
style="width:140px;"
:editable=false
placeholder="选择结束日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item :label="item.name" v-else-if="item.type === 'range'" :prop="item.field">
<el-input style="width:120px;" size="mini" type="number" v-model="form[item.field].min"></el-input>
~
<el-input style="width:120px;" size="mini" type="number" v-model="form[item.field].max"></el-input>
</el-form-item>
<el-form-item :label="item.name" v-else-if="item.type === 'select'" :prop="item.field">
<el-select v-model="form[item.field]" clearable placeholder="请选择" size="mini">
<el-option
v-for="k in item.value"
:key="k.value"
:label="k.label"
:value="k.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="item.name" v-else-if="item.type==='radio'" :prop="item.field">
<el-radio-group v-model="form[item.field]" size="mini">
<el-radio-button v-for="k in item.value" :label="k.value" :key="k.value">{{k.label}}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="item.name" v-else-if="item.type === 'checkbox'" :prop="item.field">
<el-checkbox-group v-model="form[item.field]" size="mini">
<el-checkbox-button v-for="k in item.value" :label="k.value" :key="k.value">{{k.label}}
</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
</div>
<div class="m-b-15">
<el-form-item>
<el-button type="primary" size="mini" @click="onSubmitForm">搜索</el-button>
<el-button type="warning" size="mini" @click="onResetForm('form')">重置</el-button>
</el-form-item>
</div>
</el-form>
</el-col>
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
props: ['formObj'],
data() {
return {
form: {}, // 搜索参数的表单
companySuggest: [] // 煤矿名称提示框
}
},
created() {
let self = this
if (self.formObj.selfDefine === false) { // 判断是否为自定义表单
self.formObj.filterInfo = [
{
field: 'mineCompany',
type: 'input',
name: '煤矿企业',
value: ''
},
{
field: 'size',
type: 'range',
name: '产能区间(万吨)',
value: {
min: '',
max: ''
}
},
// {
// field: 'timechange',
// type: 'time',
// name: '时间范围',
// value: {
// startDate: '',
// endDate: ''
// }
// },
{
field: 'economy',
type: 'radio',
name: '显示关闭矿井',
value: [{
label: '是',
value: '是'
}, {
label: '否',
value: '否'
}]
}, {
field: 'mineClassify',
type: 'radio',
name: '瓦斯等级',
value: [{
label: '低瓦斯矿井',
value: '低瓦斯矿井'
}, {
label: '高瓦斯矿井',
value: '高瓦斯矿井'
}, {
label: '突出矿井',
value: '突出矿井'
}, {
label: '待定',
value: '待定'
}]
}, {
field: 'mineStatus',
type: 'radio',
name: '许可证状态',
value: [{
label: '未办证',
value: '未办证'
}, {
label: '持证(正常)',
value: '持证(正常)'
}, {
label: '持证(暂扣)',
value: '持证(暂扣)'
}, {
label: '正常注销',
value: '正常注销'
}, {
label: '吊销',
value: '吊销'
}]
}, {
field: 'standarLevel',
type: 'radio',
name: '标准化等级',
value: [{
label: '一级',
value: '一级'
}, {
label: '二级',
value: '二级'
}, {
label: '三级',
value: '三级'
}, {
label: '未达标',
value: '未达标'
}, {
label: '未评定',
value: '未评定'
}]
}, {
field: 'mineType',
type: 'radio',
name: '煤矿类型',
value: [{
label: '国有重点',
value: '国有重点'
}, {
label: '地方国有',
value: '地方国有'
}, {
label: '乡镇煤矿',
value: '乡镇煤矿'
}]
}, {
field: 'economicsType',
type: 'select',
name: '经济类型',
value: [{
label: '公有经济',
value: '公有经济'
}, {
label: '国有经济',
value: '国有经济'
}, {
label: '集体经济',
value: '集体经济'
}, {
label: '非公有经济',
value: '非公有经济'
}, {
label: '私有经济',
value: '私有经济'
}, {
label: '港澳台经济',
value: '港澳台经济'
}, {
label: '外商经济',
value: '外商经济'
}]
}, {
field: 'mineState',
type: 'select',
name: '矿井状况',
value: [{
label: '拟建矿井',
value: '拟建矿井'
}, {
label: '新建矿井',
value: '新建矿井'
}, {
label: '生产矿井',
value: '生产矿井'
}, {
label: '改扩建矿井',
value: '改扩建矿井'
}, {
label: '改建矿井',
value: '改建矿井'
}, {
label: '扩建矿井',
value: '扩建矿井'
}, {
label: '长期停产矿井',
value: '长期停产矿井'
}, {
label: '停工矿井',
value: '停工矿井'
}, {
label: '已关闭矿井',
value: '已关闭矿井'
}, {
label: '正在实施关闭矿井',
value: '正在实施关闭矿井'
}, {
label: '停建矿井',
value: '停建矿井'
}, {
label: '长期停产矿井(长期无法联系)',
value: '长期停产矿井(长期无法联系)'
}]
}, {
field: 'mineLevel',
type: 'radio',
name: '矿井井型',
value: [{
label: '特大型煤矿',
value: '特大型煤矿'
}, {
label: '大型矿井',
value: '大型矿井'
}, {
label: '中型矿井',
value: '中型矿井'
}, {
label: '小型矿井',
value: '小型矿井'
}]
}, {
field: 'methodType',
type: 'radio',
name: '开采类型',
value: [{
label: '露天',
value: '露天'
}, {
label: '井工',
value: '井工'
}]
}, {
field: 'productMethods',
type: 'select',
name: '开拓方式',
value: [{
label: '立井',
value: '立井'
}, {
label: '斜井',
value: '斜井'
}, {
label: '平硐',
value: '平硐'
}, {
label: '立井斜井混合',
value: '立井斜井混合'
}, {
label: '平硐斜井混合',
value: '平硐斜井混合'
}, {
label: '片盘斜井混合',
value: '片盘斜井混合'
}, {
label: '其他',
value: '其他'
}, {
label: '公路运输',
value: '公路运输'
}, {
label: '固定坑线',
value: '固定坑线'
}]
}, {
field: 'transportMethod',
type: 'radio',
name: '运输方式',
value: [{
label: '皮带运输',
value: '皮带运输'
}, {
label: '电机车牵引',
value: '电机车牵引'
}, {
label: '调度绞车',
value: '调度绞车'
}, {
label: '人力绞车',
value: '人力绞车'
}, {
label: '人力手推矿车',
value: '人力手推矿车'
}, {
label: '其他',
value: '其他'
}]
}, {
field: 'windMethod',
type: 'select',
name: '通风方式',
value: [{
label: '中央并列压入',
value: '中央并列压入'
}, {
label: '中央分列压入',
value: '中央分列压入'
}, {
label: '对角压入',
value: '对角压入'
}, {
label: '中央并列推出',
value: '中央并列推出'
}, {
label: '中央分列抽出',
value: '中央分列抽出'
}, {
label: '对角抽出',
value: '对角抽出'
}, {
label: '其他',
value: '其他'
}]
}, {
field: 'electricMethod',
type: 'radio',
name: '供电方式',
value: [{
label: '双回路',
value: '双回路'
}, {
label: '双电源',
value: '双电源'
}, {
label: '单回路',
value: '单回路'
}]
}, {
field: 'mineFire',
type: 'radio',
name: '煤层自燃倾向性',
value: [{
label: '不易自燃',
value: '不易自燃'
}, {
label: '容易自燃',
value: '容易自燃'
}, {
label: '自燃',
value: '自燃'
}, {
label: '未检测',
value: '未检测'
}]
}
]
}
let newForm = {}
self.formObj.filterInfo.forEach(item => {
if (item.type === 'range') {
newForm[item.field] = {min: '', max: ''}
} else if (item.type === 'time') {
newForm[item.field] = {startDate: '', endDate: ''}
} else if (item.type === 'checkbox') {
newForm[item.field] = []
} else {
newForm[item.field] = ''
}
})
// 获取搜索参数表单
self.form = newForm
},
mounted() {
},
components: {},
methods: {
/**
* 点击+,显示更多筛选
* */
clickMore() {
$('.show-more-child').toggleClass('slow-show')
},
/**
* 关闭更多筛选
* */
closeMore() {
$('.show-more-child').toggleClass('slow-show')
},
/**
* 点击智能搜索
* */
onSubmitForm() {
let self = this
let data = {}
data.action = 'optionsSearch'
data.data = self.form
self.$emit('data', data)
},
/**
* 重置搜索
* */
onResetForm(formName) {
let self = this
self.$refs[formName].resetFields()
self.formObj.filterInfo.forEach(item => {
if (item.type === 'range') {
self.form[item.field] = {min: '', max: ''}
} else if (item.type === 'time') {
self.form[item.field] = {startDate: '', endDate: ''}
}
})
},
/**
* 输入内容开始匹配,显示提示框
* */
querySearch(queryString, cb) {
// 这里设置智能提示内容数组
let restaurants = [
{value: '北京联华矿业有限公司'}
]
let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
// 调用 callback 返回建议列表的数据
cb(results)
},
/**
* 检索搜索内容的匹配,只匹配开头===0或是含有!==-1
* */
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
}
},
handleSelect(item) {
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.show-more-box {
display: inline-block;
width: 40px;
margin-left: 30px;
margin-top: 15px;
height: 40px;
position: relative;
color: #fff;
.show-more {
display: inline-block;
width: 40px;
height: 40px;
color: #fff;
font-size: 2em;
text-align: center;
line-height: 35px;
border-radius: 15px;
background: rgba(51, 69, 255, 0.8);
cursor: pointer;
}
.show-more-child {
width: 600px;
background: radial-gradient(ellipse at center, #4266C1 0%, #0A339A 47%, rgba(21, 42, 95, 1) 100%);
/*background: rgba(21, 42, 95, 1);*/
transform: scale(0);
transform-origin: top left;
transition: all 0.5s;
position: absolute;
top: 0;
left: 0px;
z-index: 9;
border-radius: 15px;
}
.more-header {
background: #20a0ff;
height: 50px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.more-title {
line-height: 50px;
margin-left: 20px;
color: #fff;
font-size: 1em;
}
.more-body {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 1px solid #20a0ff;
}
.search-form {
margin-top: 15px;
.el-form-item {
margin-bottom: 0px;
}
label {
color: #fff;
}
input {
background: transparent;
border: 1px solid #20a0ff;
color: #fff;
}
.el-radio-button__inner {
background: transparent;
border: 1px solid #20a0ff;
color: #fff;
}
.el-checkbox-button__inner {
background: transparent;
border: 1px solid #20a0ff;
color: #fff;
}
.is-active {
.el-radio-button__inner {
background: #20a0ff;
border: 1px solid #20a0ff;
color: #fff;
}
span {
border: none;
}
}
.is-checked {
.el-checkbox-button__inner {
background: #20a0ff;
border: 1px solid #20a0ff;
color: #fff;
}
span {
border: none;
}
}
.date-picker {
width: 94%;
margin: 0;
.el-form-item {
margin-bottom: 0;
}
}
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
.close {
color: #fff;
border-radius: 12px;
line-height: 20px;
text-align: center;
height: 20px;
width: 20px;
font-size: 22px;
padding: 5px;
top: 10px;
right: 10px;
position: absolute;
transition: all 0.5s;
}
.close::before {
content: "\2716";
}
.close:hover {
/*background: rgba(51, 69, 255, 0.8);*/
background: #ED1C24;
}
.slow-show {
transform: scale(1);
}
.m-b-15 {
margin-bottom: 15px;
}
}
</style>