添加CustomSearchForm 组件

index.js

@@ -1,6 +1,7 @@
import CustomTable from './src/components/TablePage'
import CustomForm from './src/components/Form'
import CustomDialog from './src/components/Dialog'
import CustomSearchForm from './src/components/SearchForm'
import Tools from './src/utils/tool'
import _Vue from 'vue'
@@ -8,7 +9,8 @@ import _Vue from 'vue'
const components = [
    CustomTable,
    CustomForm,
    CustomDialog
    CustomDialog,
    CustomSearchForm
]
const install = function(Vue){

src/components/SearchForm/example/list1.vue

@@ -0,0 +1,39 @@
<template>
    <div class="nucleic-test-list">
        <SearchForm 
            :configs="configs"
            @onSearch="onSearch">
        </SearchForm>
    </div>
</template>
<script>
import SearchForm from '../index'
import {config} from './listConfig'
export default {
    name:"nucleicTestList",
    data() {
        return {
            configs: config
        }
    },
    components:{
        SearchForm
    },
    watch: {
        
    },
    mounted() {
        
    },
    methods: {
        onSearch(data){
            console.log("onSearch", data)
        }
    }
}
</script>
<style scoped lang="scss">
.nucleic-test-list{
    height: calc(100vh);
}
</style>

src/components/SearchForm/example/listConfig.js

@@ -0,0 +1,42 @@
var config = {
    showAddButton: true,
    columns: [
        {
            label: "姓名",
            id: "name",
            isSearch: true,
            isHide: false,
            type: 'text',
            width: 100,
            align: 'center'
        },
        {
            label: "申请时间",
            id: "createTime",
            isSearch: true,
            isHide: false,
            type: 'daterange',
            width: 100,
            align: 'center'
        },
        {
            label: "预约时间",
            id: "appointmentTime",
            isSearch: true,
            isHide: false,
            type: 'date',
            align: 'center'
        },
        {
            label: "状态",
            id: "payStatus",
            isSearch: true,
            isHide: false,
            type: 'select',
            align: 'center',
            optionList: []
        }
    ]
}
export {config}

src/components/SearchForm/index.vue

@@ -0,0 +1,209 @@
<template>
	<div class="search-form-com">
		<el-form :inline="true">
			<template v-for="(item, i) in configs.columns">
				<el-form-item :label="item.label" :key="i" v-if="item.isSearch" :class="{'radioGroup-item':item.type=='radioGroup'}">
					<el-input v-if="item.type=='text'" v-model="searchForm[item.id]" :placeholder="item.placeholder||item.label" clearable/>
					<el-date-picker
						:key="i"
						v-else-if="item.type=='daterange'"
						v-model="searchForm[item.id]"
						:start-placeholder="item.label+ '起'"
						:end-placeholder="item.label+ '至'"
						type="daterange"
						align="right"
						unlink-panels
						value-format="yyyy-MM-dd"
						range-separator="至"
						:picker-options="pickerOptions">
					</el-date-picker>
					<el-date-picker
						clearable
						:key="i"
						v-else-if="item.type=='date'"
						v-model="searchForm[item.id]"
						value-format="yyyy-MM-dd"
						type="date"
						:placeholder="item.label">
					</el-date-picker>
					<el-date-picker
						:key="i"
						v-else-if="item.type=='datetimerange'"
						v-model="searchForm[item.id]"
						:start-placeholder="'开始时间'"
						:end-placeholder="'结束时间'"
						type="datetimerange"
						align="right"
						unlink-panels
						value-format="yyyy-MM-dd hh:mm"
						range-separator="至"
						:picker-options="pickerOptions">
					</el-date-picker>
					<el-select 
						v-else-if="item.type=='select'"
						:key="i"
						:placeholder="item.label"
						v-model="searchForm[item.id]"
						:clearable="item.clearable===false? false : true"  >
						<el-option
							v-for="item in item.optionList"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
					<el-radio-group v-else-if="item.type=='radioGroup'" v-model="searchForm[item.id]">
						<el-radio-button v-for="item in item.optionList" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
					</el-radio-group>
					<el-cascader
						v-else-if="item.type=='cascader'"
						clearable
						:props="item.cascaderProps || cascaderProps"
						v-model="searchForm[item.id]"
						:options="item.optionList">
					</el-cascader>	
				</el-form-item>
			</template>
			<el-form-item class="mb22">
				<el-button v-if="showSearchButton" type="primary" icon="el-icon-search" @click="page=1;emitLoad()">查询</el-button>
				<el-button @click="$emit('onAdd')" v-if="configs.showAddButton" type="success" icon="el-icon-circle-plus-outline">新增</el-button>
				<slot name="topBanner" :data="searchForm"></slot>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import Tools from '../../utils/tool'
import _ from 'lodash'
export default {
	name: 'CustomSearchForm',
	props: ['configs'],
	data(){
		return {
			pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
			searchForm: "",
			cascaderProps: {
                children: 'childList',
                value: "id",
				label: "name",
				checkStrictly: true
            },
		}
	},
	computed:{
		showSearchButton(){
			var res = _.filter(this.configs.columns, (item)=>{
				return item.isSearch
			})
			return res.length>0
		}
	},
	watch: {
		searchForm: {
			handler(n){
				this.$emit('getSearchForm', n)
			},
			deep: true
		},
	},
	created(){
		var searchForm = {}
		this.configs.columns.forEach(v => {
			if(v.isSearch){
				searchForm[v.id] = v.value || ""
				this.loadDict(v)
			}
		});
		this.searchForm = searchForm
	},
	mounted() {
		if(this.configs.immediate !== false){
			this.emitLoad()
		}
	},
	methods: {
		loadDict(item){
			if(!item.optionListLoadConfig){
				return
			}
			if(!Tools.dictLoad){
				return
			}
			Tools.dictLoad(item.optionListLoadConfig).then(res=>{
				item.optionList = res
				if(item.autocomplete && item.optionList && item.optionList.length){
					this.searchForm[item.id] = item.optionList[0].value
				}
				this.$emit('dictLoaded', item)
			})
		},
		emitLoad(){
			this.$emit('onSearch', this.searchForm)
		},
		refresh(){
			this.emitLoad()
		},
		setSearchValue(key, value){
			this.searchForm[key] = value
		},
		setOptions(configs, key, options){
			configs.columns.forEach(v=>{
				if(v.id == key){
					v.optionList = options
				}
			})
		},
		resetBind(item){
			var tmp = _.assign({}, item)
			delete tmp['type']
			return tmp
		}
	}
}
</script>
<style scoped lang="scss">
.search-form-com{
	.el-form-item{
		width: auto;
		margin-right: 40px;
	}
	.mb22{
		margin-bottom: 22px;
	}
}
</style>
<style lang="scss">
.search-form-com{
	.radioGroup-item{
		display: block;
	}
}
</style>