Iview框架检索框封装

<template>
	 <div class="CAVQueryPage">
		 <Form
		 :ref="formQuery"
		 :model="formQuery[formRefName]"
		 :rules="formQueryValidate"
		 label-position="top"
		 >
			 <Row :gutter="10" v-for="(items,index) in formContentArray" :key="index">
				 <Col :span="24/items.length" v-for="item in items" :key="item.label">
					 <FormItem :class="item.formItemClass" :label="item.label" :prop="item.prop">
						 <Input
						 v-if="item.name === 'Input'"
						 v-model="formQuery[item.VModal]"
						 clearable
						 :maxlength=50
						 placeholder="请输入"
						 @on-enter="onInputEnter"
						 @on-click="onInputClick"
						 @on-change="onInputChange"
						 @on-focus="onInputFocus(formQuery[item.VModal],item.label)"
						 @on-blur="onInputBlur"
						 @on-keyup="onInputKeyup"
						 @on-keydown="onInputKeydown"
						 @on-keypress="onInputKeypress"
						 @on-search="onInputSearch"
						 ></Input>
						 
						 <Select
						 v-if="item.name === 'Select'"
						 v-model=""
						 :placeholder=""
						 :ref=""
						 :filterable=""
						 :remote=""
						 :clearable=""
						 @on-change="onSelectChange"
						 @on-clear="onSelectClear"
						 @on-open-change="onSelectOpenChange"
						 @on-query-change="onSelectQueryChange"
						 :remote-method=""
						 >
						 <Option
						 v-for="itemOption in selectOption[item.selectOptionArray]"
						 :value="itemOption.code"
						 :key="itemOption.id"
						 >{{itemOption.name}}</Option>
						 </Select>
						 
						 <DatePicker
						 v-if="item.name === 'DatePicker'"
						 class="date"
						 v-model="formQuery[item.VModal]"
						 :options="DatePickerObject[item.options]"
						 :ref="FormItemRefs[item.ref]"
						 :type="item.type"
						 :format="item.format"
						 :split-panels="item.splitPanels"
						 :editable="item.editable"
						 :placeholder="item.placeholder"
						 @on-change="onDatePickerChange"
						 @on-open-change="onDatePickerOpenChange"
						 @on-ok="onDatePickerOk"
						 @on-clear="onDatePickerClear"
						 ></DatePicker>
						 
					 </FormItem>
				 </Col>
			 </Row>
		 </Form>
	 </div>
</template>

<script>
 export default {
	 name: "CAVQueryPage",
	 props:{
		 optionsDatePickerObject:{//时间选择
			 type:Object,
			 default:{
			 	options:"options"
			 },
	 	},
		 selectOption:{//下拉框数组名称
			 type:Object,
			 default:{},
		 },
		 FormItemRefs:{//formItem下的input或者select或者DatePicker的ref名称
			 type:Object,
			 default:{
			 	exchangeTimeClear:'exchangeTimeClear'
			 },
		 },
		 formContentArray:{//form可遍历内容
			 type:Array,
			 default:[
				 [
					 {
						 name:"Input",
						 type:'',
						 label:'row-1-col-1',
						 prop:'Row1Col1',
						 formItemClass:"",
						 VModal:'receiptNumber',
						 onFocus:"queryPageOnFocus",
					 },
					 {
						 name:"Select",
						 type:'',
						 label:'row-1-col-4',
						 prop:'Row1Col4',
						 formItemClass:"",
						 options:'tradingDateLimit',
						 ref:'exchangeTimeClear',
						 format:"yyyy-MM-dd",
						 splitPanels:true,
						 editable:true,
						 placeholder:true,
						 selectOptionArray:"",
					 },
					 {
						 name:"DatePicker",
						 type:'',
						 label:'row-2-col-4',
						 prop:'Row3Col4',
						 formItemClass:"enterDate",
					 },
				 ],
			 ],
			 required:true
		 },
		 formQuery:{//form表单model
			 type:Object,
			 default:{
				 formRefName:"formQuery",
				 receiptNumber:'hahahaahah'
			 },
		 },
		 formQueryValidate:{//form表单rules
			 type:Object,
			 default:{},
		 },
	 },
	 components:{},
	 data(){
	 	return{}
	 },
	 methods:{
		 // Input
		 onInputFocus(val,label){
		 let data = {
		 val:val,
		 label:label,
		 requestType:'onInputFocus'
		 };
		 this.$emit("formItemInput",data);
		 },
		 onInputEnter(val,label){
		
		 },
		 onInputClick(val,label){
		
		 },
		 onInputChange(val,label){
		
		 },
		 onInputBlur(val,label){
		
		 },
		 onInputKeyup(val,label){
		
		 },
		 onInputKeydown(val,label){
		
		 },
		 onInputKeypress(val,label){
		
		 },
		 onInputSearch(val,label){
		
		 },
		 // Select
		 onSelectChange(){
		
		 },
		 onSelectClear(){
		
		 },
		 onSelectQueryChange(){
		
		 },
		 onSelectOpenChange(){
		
		 },
		 // DatePicker
		 onDatePickerChange(){
		
		 },
		 onDatePickerOpenChange(){
		
		 },
		 onDatePickerOk(){
		
		 },
		 onDatePickerClear(){
		
		 },
	 },
	 created(){
	 },
	 mounted(){
	 },
	 beforeDestroy(){
	 }
 }
</script>

<style lang="less">
	 /deep/ .enterDate .ivu-form-item-content {
	 	height: 32px;
	 }
	 .date {
	 	width: 100%;
	 }
</style>
```html