vue2 element-ui 封装表单搜索

1、搜索组建

<template>
    <div class="records-search-wrapper">
        <el-form
            ref="searchform"
            :inline="true"
            :model="searchFormData"
            @submit.native.prevent>
            <el-form-item
                v-for="item in searchOptions"
                :key="item.prop"
                :label="item.label"
                :prop="item.prop">
                <template v-if="item.type === 'input'">
                    <el-input
                        :style="{width: item.width || '100%'}"
                        v-model="searchFormData[item.prop]"
                        :placeholder="item.placeholder || '请输入'"
                        ></el-input>
                </template>
                <template v-if="item.type === 'select'">
                    <el-select
                        :style="{width: item.width || '100%'}"
                        v-model="searchFormData[item.prop]"
                        :placeholder="item.placeholder || '请选择'">
                        <el-option
                            v-for="option in item.data"
                            :key="option.value"
                            :label="option.label"
                            :value="option.value"></el-option>
                    </el-select>
                </template>
                <template v-if="item.type === 'autocomplete'">
                    <el-autocomplete
                        :style="{ width: item.width || '100%' }"
                        clearable
                        v-model="searchFormData[item.prop]"
                        :fetch-suggestions="item.querySearchAsync"
                        :placeholder="item.placeholder || '请输入'">
                    </el-autocomplete>
                </template>
            </el-form-item>
            <el-form-item>
                <el-button
                    class="btn1"
                    type="primary"
                    @click="onSearch">查询</el-button>
                <el-button
                    class="btn2" @click="clearAll">清空</el-button>
                <el-button
                    v-if="isExport"
                    :disabled="isExportShow"
                    class="btn2"
                    @click="onExport">导出</el-button>
            </el-form-item>
            <slot></slot>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'DirectRecordSearch',
    props: {
        // 搜索数据
        searchData: {
            type: Object,
            default: () => {}
        },
        // 搜索配置项
        searchOptions: {
            type: Array,
            default: () => []
        },
        // 其他配置项
        options: {
            type: Object,
            default: () => {}
        },
        // 是否显示导出按钮
        isExport: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        isExportShow() {
            let b = true
            if (this.searchFormData.bankNo || this.searchFormData.bankName || this.searchFormData.acceptBankLevelType) {
                b = false
            }
            return b
        }
    },
    data() {
        return {
            searchFormData: this.searchData || {}
        }
    },
    methods: {
        onSearch() {
            this.$emit('onSearch', this.searchFormData)
        },
        clearAll() {
            this.searchFormData = {}
            this.$emit('onSearch', this.searchFormData)
        },
        onExport() {
            this.$emit('onExport', this.searchFormData)
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '../css/newDirectVariable.scss';
    /deep/input::-webkit-input-placeholder { /* WebKit browsers */
        font-size: 14px;
        font-weight: 400;
        color: $greyColor;
    }

    /deep/input::-moz-placeholder { /* Mozilla Firefox 19+ */
        font-size: 14px;
        font-weight: 400;
        color: $greyColor;
    }

    /deep/input:-ms-input-placeholder { /* Internet Explorer 10+ */
       font-size: 14px;
       font-weight: 400;
       color: $greyColor;
    }
    .records-search-wrapper {
        margin-bottom: 8px;
        /deep/.el-form-item {
            margin: 0 8px 0 0;
            .el-form-item__label, .el-form-item__content {
                line-height: 30px;
            }
            .el-select .el-input .el-select__caret {
                line-height: 30px;
                color: $greyColor;
            }
            .el-form-item__label {
                font-size: 14px;
                color: $mainTextColor;
                font-weight: 400;
                padding-right: 0;
            }
            .el-input__inner {
                height: 30px;
                border-color: $inputNormal;
                border-radius: 2px;
                &:hover, &:focus {
                   border-color: $mainColor;
                }
            }
        }
        .el-button + .el-button {
            margin-left: 8px;
        }
        .btn1, .btn2 {
            padding: 0 16px;
            line-height: 30px;
            border-radius: 2px;
            font-size: 14px;
            font-weight: 500;
        }
        .btn1 {
            background: $mainColor;
            border: none;
            &:hover {
                background: $btnHover;
            }
            &:active {
                background: $btnClick;
            }
        }
        .btn2 {
            border-color: $mainColor;
            color: $mainColor;
            line-height: 28px;
            background: #fff;
            &:hover {
                border-color: $btnHover;
                color: $btnHover;
                background: #fff;
            }
            &:active {
                border-color: $btnClick;
                color: $btnClick;
            }
        }
    }
</style>

2、使用

<template>
    <div>
        <section class="direct-content-wrapper">
                <!-- 搜索区 -->
                <DirectRecordSearch
                    :searchOptions="searchOptions"
                    :searchData="searchParams"
                    @onSearch="onSearch"
                    @clearAll="onSearch" />
        </section>
        <!-- 底部导航 -->
        <Footer/>
    </div>
</template>

<script>
import DirectRecordSearch from './components/directRecordSearch'
export default {
    name: 'NewDirectRecord',
    data() {
        return {
            // 搜索表单配置项
            searchOptions: [
			        {
			            type: 'select',
			            label: '等级：',
			            prop: 'acceptBankLevelType',
			            width: '230px',
			            placeholder: '请选择等级',
			            data: getAcceptBankLevelType()
			        },
			        {
			            type: 'autocomplete',
			            label: '行名：',
			            prop: 'bankName',
			            width: '230px',
			            placeholder: '请输入行名',
			            querySearchAsync: querySearchAsync
			        },
			        {
			            type: 'input',
			            label: '行号：',
			            prop: 'bankNo',
			            width: '230px',
			            placeholder: '请输入行号'
			        }
			    ]，
			    searchParams: {
	                acceptBankLevelType: null,
	                bankName: null,
	                bankNo: null,
	            }
        }
    },
    methods: {
        // 获取银行列表
        getDefaultBankList() {
            API.defaultBankList().then(res => {
                if (res && res.code === 0) {
                    const data = res.data
                    /*creditStatus正常情况不会返回null,防止后台返回null,做下兼容
                    当是京东：creditStatus === null就是未申请 10
                    当是ADDS：creditStatus === null就是未签约 5*/
                    data.forEach(item => {
                        if (item.directType === 2 && item.creditStatus === null) {
                            item.creditStatus = 5
                        } else if (item.directType === 0 && item.creditStatus === null) {
                            item.creditStatus = 10
                        }
                        item.label = item.bankName
                        item.value = item.bankCode
                    })
                    this.bankList = data
                } else {
                    this.$message({message: res.msg, type: 'error', customClass: 'errorClass'})
                }
            })
        },
        // 获取列表
        getList (url) {
            const params = {
                corpId: this.$store.state.corpId,
                current: this.current,
                size: this.size,
                ...this.searchParams
            }
            API[url](params).then(res => {
                if (res && res.code === 0) {
                    this.tablsList = res.page.list
                    this.total = res.page.totalCount
                } else {
                    this.$message({message: res.msg, type: 'error', customClass: 'errorClass'})
                }
            })
        },
        // 询价记录/贴现记录tab切换
        reacordTabChange (val, current) {
            this.recordType = Number(val)
            this.current = Number(current)
            this.tablsList = []
            if (this.recordType === 0) {
                this.searchOptions = getInquirySearchOptions()
                this.columns = getInquiryColumnsOptions()
                this.searchParams.draftNo = null
                this.getList('inquiryRecord')
            } else {
                this.searchOptions = getDiscountSearchOptions(this.bankList)
                this.columns = getDiscountColumnsOptions()
                this.searchParams.draftNo = null
                this.getList('discountRecord')
            }
        },
        // 查询
        onSearch(data) {
            console.log(data)
        },
    },
    components: {
        DirectRecordSearch,
    },
    mounted() {
    },
}
</script>

<style lang="scss" scoped>
    @import './css/newDirectVariable.scss';
    @import './css/newDirectMixin.scss';
    .operator-text {
        color: $mainColor;
        cursor: pointer;
        font-size: 14px;
        font-weight: 400;
        // margin-right: 16px;
    }
    .mr-16 {
        margin-right: 16px;
    }
    .acceptance {
        @include no-wrap
    }
</style>