agilebuilder-ui 1.1.58-sit5 → 1.1.58-sit6

package/packages/super-grid/src/search-form.vue

@@ -1,845 +1,783 @@
 <template>
-	<div class="amb-agilebuilder-search-form-view">
-		<el-drawer v-if="isMobile" v-model="isShowMobileForm" :close-on-click-modal="false" :close-on-press-escape="false" direction="rtl" size="50%" @close="closeMobileSearch()">
-			<div class="search-condition-mobile">
-				<search-condition-list
-						v-if="searchConditions.length > 0"
-						ref="searchConditionList"
-						:search-conditions="searchConditions"
-						:search-type="searchType"
-						@remove-condition="removeCondition"
-						@select-condition="selectCondition"
-				/>
-			</div>
-			<search-form-mobile
-				v-if="isMobile && searchType === 'normal'"
-				ref="searchFormMobile"
-				:code="code"
-				:is-sql="isSql"
-				:load-complete-query="loadCompleteQuery"
-				:query="query"
-				:rules="rules"
-				:search-form="searchForm"
-				:searchable-columns="searchableColumns"
-				@submit-form="submitForm('searchForm')"
-				@reset-form="resetForm('searchForm')"
-				@save-condition="saveCondition()"
-			/>
-		</el-drawer>
-		<template v-else>
-			<search-condition-list
-					v-if="searchConditions.length > 0"
-					ref="searchConditionList"
-					:search-conditions="searchConditions"
-					:search-type="searchType"
-					@remove-condition="removeCondition"
-					@select-condition="selectCondition"
-			/>
-			<search-form-ordinary-search
-					v-if="searchType === 'normal'"
-					ref="searchFormOrdinarySearch"
-					:code="code"
-					:field-num="fieldNum"
-					:is-sql="isSql"
-					:label-width="labelWidth"
-					:load-complete-query="loadCompleteQuery"
-					:query="query"
-					:row-num="rowNum"
-					:rules="rules"
-					:search-form="searchForm"
-					:searchable-columns="searchableColumns"
-					:span-num="spanNum"
-					@submit-form="submitForm('searchForm')"
-					@reset-form="resetForm('searchForm')"
-					@save-condition="saveCondition()"
-					@open-fold="openFold"
-			/>
-			<search-form-advanced-query
-					v-if="searchType === 'advanced'"
-					ref="searchFormAdvancedQuery"
-					:code="code"
-					:is-sql="isSql"
-					:prop-map="propMap"
-					:search-form-list="searchFormList"
-					:searchable-columns="advancedQueryColumns"
-					style="padding-bottom: 10px"
-					@resetForm="resetSearchFormList"
-			/>
-			<div
-					v-if="searchType === 'advanced'"
-					style="padding-top: 10px; padding-bottom: 10px; text-align: center"
-			>
-				<el-button
-						:loading="loading"
-						size="default"
-						type="primary"
-						@click="submitForm('searchForm')"
-				>
-					{{ $t('imatrixUIPublicModel.sure') }}
-				</el-button>
-				<el-button
-						:loading="loading"
-						size="default"
-						@click="resetForm('searchForm')"
-				>
-					{{ $t('imatrixUIPublicModel.reset') }}
-				</el-button>
-				<el-button size="default" @click="saveCondition">
-					{{ $t('superGrid.saveCondition') }}
-				</el-button>
-				<span
-					v-if="
-					advancedQuery !== null &&
-					advancedQuery !== undefined &&
-					advancedQuery === true &&
-					normalQuery !== null &&
-					normalQuery !== undefined &&
-					normalQuery === true
-					"
-								style="margin-left: 10px"
-						>
-					<el-button
-							v-if="searchType === 'advanced'"
-							size="default"
-							@click="searchType = 'normal'"
-					>
-					{{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
-					</el-button>
-					<el-button
-							v-if="searchType === 'normal'"
-							size="default"
-							@click="searchType = 'advanced'"
-					>
-					{{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
-					</el-button>
-				</span>
-			</div>
-		</template>
-			<search-condition-input
-				v-if="isShowSearchCondition"
-				@close="saveConditionValue"
-			/>
-	</div>
+  <div class="amb-agilebuilder-search-form-view">
+    <el-drawer
+      v-if="isMobile"
+      v-model="isShowMobileForm"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      direction="rtl"
+      size="50%"
+      @close="closeMobileSearch()"
+    >
+      <div class="search-condition-mobile">
+        <search-condition-list
+          v-if="searchConditions.length > 0"
+          ref="searchConditionList"
+          :search-conditions="searchConditions"
+          :search-type="searchType"
+          @remove-condition="removeCondition"
+          @select-condition="selectCondition"
+        />
+      </div>
+      <search-form-mobile
+        v-if="isMobile && searchType === 'normal'"
+        ref="searchFormMobile"
+        :code="code"
+        :is-sql="isSql"
+        :load-complete-query="loadCompleteQuery"
+        :query="query"
+        :rules="rules"
+        :search-form="searchForm"
+        :searchable-columns="searchableColumns"
+        @submit-form="submitForm('searchForm')"
+        @reset-form="resetForm('searchForm')"
+        @save-condition="saveCondition()"
+      />
+    </el-drawer>
+    <template v-else>
+      <search-condition-list
+        v-if="searchConditions.length > 0"
+        ref="searchConditionList"
+        :search-conditions="searchConditions"
+        :search-type="searchType"
+        @remove-condition="removeCondition"
+        @select-condition="selectCondition"
+      />
+      <search-form-ordinary-search
+        v-if="searchType === 'normal'"
+        ref="searchFormOrdinarySearch"
+        :code="code"
+        :field-num="fieldNum"
+        :is-sql="isSql"
+        :label-width="labelWidth"
+        :load-complete-query="loadCompleteQuery"
+        :query="query"
+        :row-num="rowNum"
+        :rules="rules"
+        :search-form="searchForm"
+        :searchable-columns="searchableColumns"
+        :span-num="spanNum"
+        @submit-form="submitForm('searchForm')"
+        @reset-form="resetForm('searchForm')"
+        @save-condition="saveCondition()"
+        @open-fold="openFold"
+      />
+      <search-form-advanced-query
+        v-if="searchType === 'advanced'"
+        ref="searchFormAdvancedQuery"
+        :code="code"
+        :is-sql="isSql"
+        :prop-map="propMap"
+        :search-form-list="searchFormList"
+        :searchable-columns="advancedQueryColumns"
+        style="padding-bottom: 10px"
+        @resetForm="resetSearchFormList"
+      />
+      <div v-if="searchType === 'advanced'" style="padding-top: 10px; padding-bottom: 10px; text-align: center">
+        <el-button :loading="loading" size="default" type="primary" @click="submitForm('searchForm')">
+          {{ $t('imatrixUIPublicModel.sure') }}
+        </el-button>
+        <el-button :loading="loading" size="default" @click="resetForm('searchForm')">
+          {{ $t('imatrixUIPublicModel.reset') }}
+        </el-button>
+        <el-button size="default" @click="saveCondition">
+          {{ $t('superGrid.saveCondition') }}
+        </el-button>
+        <span
+          v-if="
+            advancedQuery !== null &&
+            advancedQuery !== undefined &&
+            advancedQuery === true &&
+            normalQuery !== null &&
+            normalQuery !== undefined &&
+            normalQuery === true
+          "
+          style="margin-left: 10px"
+        >
+          <el-button v-if="searchType === 'advanced'" size="default" @click="searchType = 'normal'">
+            {{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
+          </el-button>
+          <el-button v-if="searchType === 'normal'" size="default" @click="searchType = 'advanced'">
+            {{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
+          </el-button>
+        </span>
+      </div>
+    </template>
+    <search-condition-input v-if="isShowSearchCondition" @close="saveConditionValue" />
+  </div>
 </template>
 
 <script>
-import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
 import searchMethods from './search-methods'
 // import searchFormNumber from './search-form-number.vue'
 import searchFormOrdinarySearch from './search-form-ordinarySearch.vue'
 import searchFormAdvancedQuery from './search-form-advancedQuery.vue'
 import store from './store'
 // import { isOptionFunction, getSearchObject } from './utils'
-import {addDynamicProp, addDynamicPropDateSection} from './utils'
+import { addDynamicProp, addDynamicPropDateSection } from './utils'
 import * as Vue from 'vue'
 import SearchConditionInput from './search-condition-input.vue'
 import SearchConditionList from './search-condition-list.vue'
 import SearchFormMobile from './search-form-mobile.vue'
-import {isMobileBrowser} from '../../../src/utils/common-util'
+import { isMobileBrowser } from '../../../src/utils/common-util'
 
 export default {
-	name: 'SearchForm',
-	components: {
-		// searchFormNumber,
-		SearchConditionInput,
-		SearchConditionList,
-		searchFormOrdinarySearch,
-		searchFormAdvancedQuery,
-		SearchFormMobile
-	},
-	provide() {
-		return {
-			getListToolbarFormData: () => ({
-				listToolbarFormData: this.listToolbarFormData,
-			}),
-		}
-	},
-	props: {
-		columns: {
-			type: Array,
-			default: null,
-		},
-		code: {
-			type: String,
-			default: null,
-		},
-		url: {
-			type: String,
-			default: null,
-		},
-		pagination: {
-			type: Object,
-			default: null,
-		},
-		query: {
-			type: Object,
-			default: null,
-		},
-		searchParam: {
-			type: Object,
-			default: null,
-		},
-		initSearchProps: {
-			type: Array,
-			default: null,
-		},
-		isSql: {
-			type: Boolean,
-			default: false,
-		},
-		searchFormInfo: {
-			type: Object,
-			default: () => {
-				return {}
-			},
-		},
-		loadCompleteQuery: {
-			type: Boolean,
-			default: false,
-		},
-		listToolbarFormData: {
-			type: Object,
-			default: null,
-		},
-	},
-	data() {
-		const customComponentNames = new Set()
-		const gridParams = store.get(this.code)
-		const propMap = {}
-		let searchForm = {}
-		if (this.searchParam !== null) {
-			searchForm = JSON.parse(JSON.stringify(this.searchParam))
-		}
-		const searchColumns = this.getSearchableColumns(null, null, propMap)
-		if (this.initSearchProps === undefined || this.initSearchProps === null) {
-			this.initSearchProps = []
-		}
-		searchColumns.forEach((column) => {
-			// propMap[column.prop] = column
-			if (this.initSearchProps.indexOf(column.prop) < 0) {
-				// 表示没有默认初始查询字段
-				if (column.prop && column.prop.indexOf('.') > 0) {
-					if (column.componentType === 'dateSection') {
-						addDynamicPropDateSection(searchForm, column.prop)
-					} else {
-						// 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
-						addDynamicProp(searchForm, column.prop)
-					}
-				} else {
-					if (column.componentType === 'dateSection') {
-						searchForm[column.prop] = [new Date(), new Date()]
-					} else if (column.componentType === 'yearRange') {
-						searchForm[column.prop] = ['', '']
-					} else {
-						// 去掉该代码，是因为如果有该代码，会导致初始为空的文本框input组件无法输入值
-						// searchForm[column.prop] = null
-					}
-					this.setDefaultQueryValue(column, searchForm)
-				}
-			}
-		})
+  name: 'SearchForm',
+  components: {
+    // searchFormNumber,
+    SearchConditionInput,
+    SearchConditionList,
+    searchFormOrdinarySearch,
+    searchFormAdvancedQuery,
+    SearchFormMobile
+  },
+  provide() {
+    return {
+      getListToolbarFormData: () => ({
+        listToolbarFormData: this.listToolbarFormData
+      })
+    }
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: null
+    },
+    code: {
+      type: String,
+      default: null
+    },
+    url: {
+      type: String,
+      default: null
+    },
+    pagination: {
+      type: Object,
+      default: null
+    },
+    query: {
+      type: Object,
+      default: null
+    },
+    searchParam: {
+      type: Object,
+      default: null
+    },
+    initSearchProps: {
+      type: Array,
+      default: null
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    },
+    searchFormInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    loadCompleteQuery: {
+      type: Boolean,
+      default: false
+    },
+    listToolbarFormData: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    const customComponentNames = new Set()
+    const gridParams = store.get(this.code)
+    const propMap = {}
+    let searchForm = {}
+    if (this.searchParam !== null) {
+      searchForm = JSON.parse(JSON.stringify(this.searchParam))
+    }
+    const searchColumns = this.getSearchableColumns(null, null, propMap)
+    if (this.initSearchProps === undefined || this.initSearchProps === null) {
+      this.initSearchProps = []
+    }
+    searchColumns.forEach((column) => {
+      // propMap[column.prop] = column
+      if (this.initSearchProps.indexOf(column.prop) < 0) {
+        // 表示没有默认初始查询字段
+        if (column.prop && column.prop.indexOf('.') > 0) {
+          if (column.componentType === 'dateSection') {
+            addDynamicPropDateSection(searchForm, column.prop)
+          } else {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(searchForm, column.prop)
+          }
+        } else {
+          if (column.componentType === 'dateSection') {
+            searchForm[column.prop] = [new Date(), new Date()]
+          } else if (column.componentType === 'yearRange') {
+            searchForm[column.prop] = ['', '']
+          } else {
+            // 去掉该代码，是因为如果有该代码，会导致初始为空的文本框input组件无法输入值
+            // searchForm[column.prop] = null
+          }
+          this.setDefaultQueryValue(column, searchForm)
+        }
+      }
+    })
 
-		const isMobile = isMobileBrowser()
-		let canShowMobileSearch = false
-		if(isMobile && searchColumns && searchColumns.length > 0){
-			// 如果是移动端，且有查询字段，则新页面需要显示“查询”按钮
-			canShowMobileSearch = true
-		}
-		const spanNum = this.getSpanNum(searchColumns)
-    	const fieldNum = this.getFieldNumPerRow(searchColumns)
-		const rowNum = Math.ceil(searchColumns.length / fieldNum)
-		const advancedQuery = this.query.advancedQuery
-		const normalQuery = this.query.normalQuery
-		// console.log('searchColumns.length=' + searchColumns.length + ',fieldNum=' + fieldNum + ',rowNum=' + rowNum)
-		// // -2是把
-		// const dateSpanNum = (spanNum - 2) / 2
-		return {
-			searchForm,
-			rules: {},
-			searchParams: [],
-			labelWidth:
-					gridParams.options.search && gridParams.options.search.labelWidth
-							? gridParams.options.search.labelWidth
-							: '80px',
-			customComponentNames: customComponentNames,
-			componentName: '',
-			spanNum: spanNum,
-			fieldNum: fieldNum, // 每行放的字段个数
-			rowNum: rowNum, // 一共有几行
-			loading: false, // 是否正在查询，默认时否
-			isShowSearchCondition: false,
-			searchConditions: [],
-			propMap,
-			advancedQuery,
-			normalQuery,
-			searchFormList: [],
-			searchType: null,
-			isMobile, // 是否是移动端
-			isShowMobileForm: true, // 是否显示表单
-			canShowMobileSearch
-		}
-	},
-	computed: {
-		searchableColumns() {
-			return this.getSearchableColumns()
-		},
-		advancedQueryColumns() {
-			return this.getAdvancedQueryColumns()
-		},
-	},
-	watch: {
-		searchForm: {
-			deep: true,
-			handler(val) {
-				this.searchFormInfo['data'] = val
-			},
-		},
-	},
-	created() {
-		this.listSearchConditions()
-		if (this.normalQuery) {
-			this.searchType = 'normal'
-		} else if (this.advancedQuery) {
-			this.searchType = 'advanced'
-		}
-		console.log('this.canShowMobileSearch----', this.canShowMobileSearch)
-		if(this.canShowMobileSearch){
-			// 如果是移动端，且有查询字段，则新页面需要显示“查询”按钮
-			this.$emit('can-show-mobile-search')
-		}
-	},
-	methods: {
-		...searchMethods,
-		// 每行放的字段个数
-		getFieldNumPerRow(searchColumns) {
-			let myFieldNum
-			if (searchColumns && searchColumns.length === 1) {
-				myFieldNum = 2
-			} else {
-				const gridParams = store.get(this.code)
-				myFieldNum = gridParams.options.search && gridParams.options.search.fieldNum ? gridParams.options.search.fieldNum : 3
-			}
-			return myFieldNum
-		},
-		// 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
-		getSpanNum(searchColumns) {
-			const fieldNum = this.getFieldNumPerRow(searchColumns)
-			if (fieldNum === 1) {
-				return 22
-			} else if (fieldNum === 2) {
-				return 12
-			} else if (fieldNum === 3) {
-				return 8
-			} else if (fieldNum === 4) {
-				return 6
-			} else {
-				// 6个字段
-				return 4
-			}
-		},
-		setValueToModelProp(prop, value, componentName, index) {
-			if (prop && prop.indexOf('.') > 0) {
-				const parentOjbect = this.getParentObject(prop)
-				// 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
-				if (index != null && index !== undefined) {
-					// parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
-					parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
-				} else {
-					parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
-				}
-			} else {
-				if (index != null && index !== undefined) {
-					this.searchForm[prop][index] = value
-				} else {
-					this.searchForm[prop] = value
-				}
-			}
-		},
-		getAdvancedQueryColumns(columns, searchColumns, propMap) {
-			if (!this.customComponentNames) {
-				this.customComponentNames = new Set()
-			}
-			if (!searchColumns) {
-				searchColumns = []
-			}
-			if (!columns) {
-				columns = this.columns
-			}
-			for (let i = 0; i < columns.length; i++) {
-				const column = columns[i]
-				if (propMap) {
-					propMap[column.prop] = column
-				}
-				if (
-						column.prop === '$index' ||
-						column.prop === '$selection' ||
-						column.dynamic
-				) {
-					// 序号和复选框列、动态列 不属于该组件的查询字段
-					continue
-				}
-				if (column.groupHeader) {
-					// 组合表头中子表头的字段查询
-					this.getSearchableColumns(column.children, searchColumns, propMap)
-				} else {
-					if (
-							column.queryType === 'advanced' &&
-							!column.custom &&
-							column.prop !== ''
-					) {
-						// 表示是普通查询，且不是占位符列，是查询字段
-						if (
-								typeof column.componentType === 'undefined' ||
-								column.componentType === ''
-						) {
-							column.componentType = 'input'
-						}
-						if (column.querySetting && column.querySetting !== '') {
-							const querySetting = JSON.parse(column.querySetting)
-							if (querySetting.width) {
-								column.searchControlWidth = 'width:' + querySetting.width + 'px'
-							}
-							if (querySetting.labelWidth) {
-								column.searchLabelWidth = querySetting.labelWidth + 'px'
-							}
-							if (querySetting.label) {
-								column.searchLabel = querySetting.label
-							}
-						}
-						// 行编辑时自定义编辑组件
-						if (
-								column.componentType &&
-								column.componentType.indexOf('custom:') >= 0
-						) {
-							column.componentName = column.componentType.substring(
-									column.componentType.indexOf(':') + 1
-							)
-							this.customComponentNames.add(column.componentName)
-						} else {
-							column.componentName = ''
-						}
-						// this.$set(this.propMap, column.prop, column)
-						// this.propMap[column.prop] = column
-						searchColumns.push(column)
-					}
-				}
-			}
-			return searchColumns
-		},
-		getSearchableColumns(columns, searchColumns, propMap) {
-			if (!this.customComponentNames) {
-				this.customComponentNames = new Set()
-			}
-			if (!searchColumns) {
-				searchColumns = []
-			}
-			if (!columns) {
-				columns = this.columns
-			}
-			for (let i = 0; i < columns.length; i++) {
-				const column = columns[i]
-				if (propMap) {
-					propMap[column.prop] = column
-				}
-				if (
-						column.prop === '$index' ||
-						column.prop === '$selection' ||
-						column.dynamic
-				) {
-					// 序号和复选框列、动态列 不属于该组件的查询字段
-					continue
-				}
-				if (column.groupHeader) {
-					// 组合表头中子表头的字段查询
-					this.getSearchableColumns(column.children, searchColumns, propMap)
-				} else {
-					if (
-							column.queryType === 'normal' &&
-							!column.custom &&
-							column.prop !== ''
-					) {
-						// 表示是普通查询，且不是占位符列，是查询字段
-						if (
-								typeof column.componentType === 'undefined' ||
-								column.componentType === ''
-						) {
-							column.componentType = 'input'
-						}
-						if (column.querySetting && column.querySetting !== '') {
-							const querySetting = JSON.parse(column.querySetting)
-							if (querySetting.width) {
-								column.searchControlWidth = 'width:' + querySetting.width + 'px'
-							}
-							if (querySetting.labelWidth) {
-								column.searchLabelWidth = querySetting.labelWidth + 'px'
-							}
-							if (querySetting.label) {
-								column.searchLabel = querySetting.label
-							}
-						}
-						// 行编辑时自定义编辑组件
-						if (
-								column.componentType &&
-								column.componentType.indexOf('custom:') >= 0
-						) {
-							column.componentName = column.componentType.substring(
-									column.componentType.indexOf(':') + 1
-							)
-							this.customComponentNames.add(column.componentName)
-						} else {
-							column.componentName = ''
-						}
-						// this.$set(this.propMap, column.prop, column)
-						// this.propMap[column.prop] = column
-						searchColumns.push(column)
-					}
-				}
-			}
-			return searchColumns
-		},
-		customComponent(column) {
-			const gridParams = store.get(this.code)
-			if (column.componentName && column.componentName !== '') {
-				this.customComponentNames.add(column.componentName)
-				return true
-			}
-			if (
-					(!column.componentName || column.componentName === '') &&
-					gridParams.options &&
-					gridParams.options.search &&
-					gridParams.options.search.customSearchElements
-			) {
-				// 定义了自定义查询组件
-				const propSearchEle =
-						gridParams.options.search.customSearchElements[column.prop]
-				// console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
-				if (propSearchEle) {
-					column.componentName = 'custom-' + column.prop
-					const component = propSearchEle.call(this, column)
-					// console.log('customComponent-customSearchElements-')
-					if (component) {
-						this.customComponentNames.add(column.componentName)
-						window.$vueApp.component(column.componentName, component)
-						return true
-					}
-				}
-			}
-			return false
-		},
-		submitForm() {
-			if(this.isMobile){
-				this.$refs.searchFormMobile.validateForm().then((valid) => {
-					if (valid) {
-						// this.loading = true
-						this.searchParams = this.packageSearchParam()
-						$emit(this, 'search', this.searchParams)
-					} else {
-						return false
-					}
-				})
-			}else if (this.searchType === 'normal') {
-				this.$refs.searchFormOrdinarySearch.validateForm().then((valid) => {
-					if (valid) {
-						// this.loading = true
-						this.searchParams = this.packageSearchParam()
-						$emit(this, 'search', this.searchParams)
-					} else {
-						return false
-					}
-				})
-			} else if (this.searchType === 'advanced') {
-				this.$refs.searchFormAdvancedQuery.validateForm().then((valid) => {
-					if (valid) {
-						this.loading = true
-						this.searchParams = this.packageSearchParam()
-						$emit(this, 'search', this.searchParams)
-					} else {
-						return false
-					}
-				})
-			}
-		},
-		resetForm() {
-			if (this.$refs.searchConditionList) {
-				this.$refs.searchConditionList.editConditionId = null
-			}
-			if(this.isMobile){
-				this.$refs.searchFormMobile.resetForm()
-			} else if (this.searchType === 'normal') {
-				this.$refs.searchFormOrdinarySearch.resetForm()
-			} else if (this.searchType === 'advanced') {
-				this.$refs.searchFormAdvancedQuery.resetForm()
-				$emit(this, 'reset')
-			}
-			// 数值区间组件重置时无法清空值问题
-			eventBus.$emit('reset')
-			// 子组件重置完成后调用reset方法 同步执行
-			// this.$emit('reset')
-		},
-		setNumberValue(value, r, n) {
-			let itemValue = this.getFormItemValue(
-					this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop
-			)
-			itemValue = value
-			this.setValueToModelProp(
-					this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop,
-					itemValue
-			)
-		},
-		listSearchConditions() {
-			return new Promise((resolve, reject) => {
-				this.listSearchCondition(this.code)
-						.then((conditions) => {
-							this.searchConditions = conditions
-							resolve(conditions)
-						})
-						.catch((error) => {
-							reject(error)
-						})
-			})
-		},
-		saveCondition() {
-			const searchParams = this.packageSearchParam()
-			if (!searchParams || searchParams.length === 0) {
-				this.$message({
-					type: 'warning',
-					message: this.$t('imatrixUIMessage.pleaseInputSearchCondition'),
-					showClose: true,
-				})
-				return
-			}
-			this.isShowSearchCondition = true
-		},
-		saveConditionValue(conditionName) {
-			if (conditionName) {
-				let searchParams
-				if (
-						this.searchType === 'normal' ||
-						this.searchType === '' ||
-						this.searchType === null ||
-						this.searchType === undefined
-				) {
-					searchParams = this.packageSearchParam()
-				} else {
-					searchParams = this.searchFormList
-				}
-				const condition = {
-					listCode: this.code,
-					queryType:
-							this.searchType === 'normal' ||
-							this.searchType === '' ||
-							this.searchType === null ||
-							this.searchType === undefined
-									? 'FIXED'
-									: 'CUSTOM',
-					name: conditionName,
-					queryCondition: JSON.stringify(searchParams),
-				}
-				this.saveSearchCondition(condition).then((condition) => {
-					this.$message({
-						type: 'success',
-						message: this.$t('imatrixUIMessage.saveSuccessfully'),
-						showClose: true,
-					})
-					this.isShowSearchCondition = false
-					this.listSearchConditions().then(() => {
-						if (this.$refs.searchConditionList) {
-							// 选中刚刚保存的条件
-							this.$refs.searchConditionList.editConditionId = condition.id + ''
-						}
-						// 查询条件对应的数据
-						this.selectCondition(condition.id)
-					})
-				})
-			}
-			this.isShowSearchCondition = false
-		},
-		removeCondition(conditionId) {
-			if (conditionId) {
-				this.$confirm(
-						this.$t('imatrixUIMessage.whetherToConfirmDeletion'),
-						this.$t('imatrixUIMessage.tips'),
-						{
-							confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
-							cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
-							type: 'warning',
-						}
-				).then(() => {
-					this.removeSearchCondition(conditionId).then(() => {
-						this.$message({
-							type: 'success',
-							message: this.$t('superGrid.deleteSuccessful'),
-							showClose: true,
-						})
-						this.listSearchConditions()
-					})
-				})
-			}
-		},
-		selectCondition(conditionId) {
-			if (conditionId) {
-				this.getSearchCondition(conditionId).then((searchCondition) => {
-					if (searchCondition) {
-						const queryCondition = searchCondition.queryCondition
-						if (queryCondition) {
-							if (
-									this.searchType === 'normal' ||
-									this.searchType === '' ||
-									this.searchType === null ||
-									this.searchType === undefined
-							) {
-								const searchParams = JSON.parse(queryCondition)
-								const searchForm = this.packageSearchForm(searchParams)
-								if (searchForm) {
-									this.searchForm = searchForm
-								}
-								// 查询数据
-								this.loading = true
-								$emit(this, 'search', searchParams)
-							} else {
-								this.searchFormList = JSON.parse(queryCondition)
-								// 查询数据
-								this.loading = true
-								$emit(this, 'search', this.packageSearchParam())
-							}
-						}
-					}
-				})
-			}
-		},
-		// 封装searchForm
-		packageSearchForm(searchFormArr) {
-			if (searchFormArr && searchFormArr.length > 0) {
-				const searchForm = {}
-				const initSearchProps = []
-				searchFormArr.forEach((item) => {
-					// 获得的是"isDeleted"
-					let prop = item.propName
-					// 获得的是“deleted”
-					const columnProp = item.columnProp
-					const dataType = item.dataType
-					if (dataType && dataType === 'BOOLEAN' && columnProp) {
-						prop = columnProp
-					}
-					if (initSearchProps.indexOf(prop) === -1) {
-						initSearchProps.push(prop)
-					}
-					const propValue = item.propValue
-					if (prop && prop.indexOf('.') > 0) {
-						// 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
-						addDynamicProp(searchForm, prop, propValue)
-					} else {
-						let isRangeQueryValue = false
-						if (dataType && (dataType === 'DATE' || dataType === 'TIME')) {
-							if (item.startValue && item.endValue) {
-								isRangeQueryValue = true
-							}
-						}
-						if (isRangeQueryValue) {
-							searchForm[prop] = [
-								new Date(item.startValue),
-								new Date(item.endValue),
-							]
-						} else {
-							if (searchForm[prop]) {
-								if (searchForm[prop] instanceof Array) {
-									searchForm[prop].push(propValue)
-								} else {
-									searchForm[prop] = [searchForm[prop], propValue]
-								}
-							} else {
-								searchForm[prop] = propValue
-							}
-						}
-					}
-				})
+    const isMobile = isMobileBrowser()
+    let canShowMobileSearch = false
+    if (isMobile && searchColumns && searchColumns.length > 0) {
+      // 如果是移动端，且有查询字段，则新页面需要显示“查询”按钮
+      canShowMobileSearch = true
+    }
+    const spanNum = this.getSpanNum(searchColumns)
+    const fieldNum = this.getFieldNumPerRow(searchColumns)
+    const rowNum = Math.ceil(searchColumns.length / fieldNum)
+    const advancedQuery = this.query.advancedQuery
+    const normalQuery = this.query.normalQuery
+    // console.log('searchColumns.length=' + searchColumns.length + ',fieldNum=' + fieldNum + ',rowNum=' + rowNum)
+    // // -2是把
+    // const dateSpanNum = (spanNum - 2) / 2
+    return {
+      searchForm,
+      rules: {},
+      searchParams: [],
+      labelWidth:
+        gridParams.options.search && gridParams.options.search.labelWidth
+          ? gridParams.options.search.labelWidth
+          : '80px',
+      customComponentNames: customComponentNames,
+      componentName: '',
+      spanNum: spanNum,
+      fieldNum: fieldNum, // 每行放的字段个数
+      rowNum: rowNum, // 一共有几行
+      loading: false, // 是否正在查询，默认时否
+      isShowSearchCondition: false,
+      searchConditions: [],
+      propMap,
+      advancedQuery,
+      normalQuery,
+      searchFormList: [],
+      searchType: null,
+      isMobile, // 是否是移动端
+      isShowMobileForm: true, // 是否显示表单
+      canShowMobileSearch
+    }
+  },
+  computed: {
+    searchableColumns() {
+      return this.getSearchableColumns()
+    },
+    advancedQueryColumns() {
+      return this.getAdvancedQueryColumns()
+    }
+  },
+  watch: {
+    searchForm: {
+      deep: true,
+      handler(val) {
+        this.searchFormInfo['data'] = val
+      }
+    }
+  },
+  created() {
+    this.listSearchConditions()
+    if (this.normalQuery) {
+      this.searchType = 'normal'
+    } else if (this.advancedQuery) {
+      this.searchType = 'advanced'
+    }
+    console.log('this.canShowMobileSearch----', this.canShowMobileSearch)
+    if (this.canShowMobileSearch) {
+      // 如果是移动端，且有查询字段，则新页面需要显示“查询”按钮
+      this.$emit('can-show-mobile-search')
+    }
+  },
+  methods: {
+    ...searchMethods,
+    // 每行放的字段个数
+    getFieldNumPerRow(searchColumns) {
+      let myFieldNum
+      if (searchColumns && searchColumns.length === 1) {
+        myFieldNum = 2
+      } else {
+        const gridParams = store.get(this.code)
+        myFieldNum =
+          gridParams.options.search && gridParams.options.search.fieldNum ? gridParams.options.search.fieldNum : 3
+      }
+      return myFieldNum
+    },
+    // 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
+    getSpanNum(searchColumns) {
+      const fieldNum = this.getFieldNumPerRow(searchColumns)
+      if (fieldNum === 1) {
+        return 22
+      } else if (fieldNum === 2) {
+        return 12
+      } else if (fieldNum === 3) {
+        return 8
+      } else if (fieldNum === 4) {
+        return 6
+      } else {
+        // 6个字段
+        return 4
+      }
+    },
+    setValueToModelProp(prop, value, componentName, index) {
+      if (prop && prop.indexOf('.') > 0) {
+        const parentOjbect = this.getParentObject(prop)
+        // 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
+        if (index != null && index !== undefined) {
+          // parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
+          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
+        } else {
+          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
+        }
+      } else {
+        if (index != null && index !== undefined) {
+          this.searchForm[prop][index] = value
+        } else {
+          this.searchForm[prop] = value
+        }
+      }
+    },
+    getAdvancedQueryColumns(columns, searchColumns, propMap) {
+      if (!this.customComponentNames) {
+        this.customComponentNames = new Set()
+      }
+      if (!searchColumns) {
+        searchColumns = []
+      }
+      if (!columns) {
+        columns = this.columns
+      }
+      for (let i = 0; i < columns.length; i++) {
+        const column = columns[i]
+        if (propMap) {
+          propMap[column.prop] = column
+        }
+        if (column.prop === '$index' || column.prop === '$selection' || column.dynamic) {
+          // 序号和复选框列、动态列 不属于该组件的查询字段
+          continue
+        }
+        if (column.groupHeader) {
+          // 组合表头中子表头的字段查询
+          this.getSearchableColumns(column.children, searchColumns, propMap)
+        } else {
+          if (column.queryType === 'advanced' && !column.custom && column.prop !== '') {
+            // 表示是普通查询，且不是占位符列，是查询字段
+            if (typeof column.componentType === 'undefined' || column.componentType === '') {
+              column.componentType = 'input'
+            }
+            if (column.querySetting && column.querySetting !== '') {
+              const querySetting = JSON.parse(column.querySetting)
+              if (querySetting.width) {
+                column.searchControlWidth = 'width:' + querySetting.width + 'px'
+              }
+              if (querySetting.labelWidth) {
+                column.searchLabelWidth = querySetting.labelWidth + 'px'
+              }
+              if (querySetting.label) {
+                column.searchLabel = querySetting.label
+              }
+            }
+            // 行编辑时自定义编辑组件
+            if (column.componentType && column.componentType.indexOf('custom:') >= 0) {
+              column.componentName = column.componentType.substring(column.componentType.indexOf(':') + 1)
+              this.customComponentNames.add(column.componentName)
+            } else {
+              column.componentName = ''
+            }
+            // this.$set(this.propMap, column.prop, column)
+            // this.propMap[column.prop] = column
+            searchColumns.push(column)
+          }
+        }
+      }
+      return searchColumns
+    },
+    getSearchableColumns(columns, searchColumns, propMap) {
+      if (!this.customComponentNames) {
+        this.customComponentNames = new Set()
+      }
+      if (!searchColumns) {
+        searchColumns = []
+      }
+      if (!columns) {
+        columns = this.columns
+      }
+      for (let i = 0; i < columns.length; i++) {
+        const column = columns[i]
+        if (propMap) {
+          propMap[column.prop] = column
+        }
+        if (column.prop === '$index' || column.prop === '$selection' || column.dynamic) {
+          // 序号和复选框列、动态列 不属于该组件的查询字段
+          continue
+        }
+        if (column.groupHeader) {
+          // 组合表头中子表头的字段查询
+          this.getSearchableColumns(column.children, searchColumns, propMap)
+        } else {
+          if (column.queryType === 'normal' && !column.custom && column.prop !== '') {
+            // 表示是普通查询，且不是占位符列，是查询字段
+            if (typeof column.componentType === 'undefined' || column.componentType === '') {
+              column.componentType = 'input'
+            }
+            if (column.querySetting && column.querySetting !== '') {
+              const querySetting = JSON.parse(column.querySetting)
+              if (querySetting.width) {
+                column.searchControlWidth = 'width:' + querySetting.width + 'px'
+              }
+              if (querySetting.labelWidth) {
+                column.searchLabelWidth = querySetting.labelWidth + 'px'
+              }
+              if (querySetting.label) {
+                column.searchLabel = querySetting.label
+              }
+            }
+            // 行编辑时自定义编辑组件
+            if (column.componentType && column.componentType.indexOf('custom:') >= 0) {
+              column.componentName = column.componentType.substring(column.componentType.indexOf(':') + 1)
+              this.customComponentNames.add(column.componentName)
+            } else {
+              column.componentName = ''
+            }
+            // this.$set(this.propMap, column.prop, column)
+            // this.propMap[column.prop] = column
+            searchColumns.push(column)
+          }
+        }
+      }
+      return searchColumns
+    },
+    customComponent(column) {
+      const gridParams = store.get(this.code)
+      if (column.componentName && column.componentName !== '') {
+        this.customComponentNames.add(column.componentName)
+        return true
+      }
+      if (
+        (!column.componentName || column.componentName === '') &&
+        gridParams.options &&
+        gridParams.options.search &&
+        gridParams.options.search.customSearchElements
+      ) {
+        // 定义了自定义查询组件
+        const propSearchEle = gridParams.options.search.customSearchElements[column.prop]
+        // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
+        if (propSearchEle) {
+          column.componentName = 'custom-' + column.prop
+          const component = propSearchEle.call(this, column)
+          // console.log('customComponent-customSearchElements-')
+          if (component) {
+            this.customComponentNames.add(column.componentName)
+            window.$vueApp.component(column.componentName, component)
+            return true
+          }
+        }
+      }
+      return false
+    },
+    submitForm() {
+      if (this.isMobile) {
+        this.$refs.searchFormMobile.validateForm().then((valid) => {
+          if (valid) {
+            // this.loading = true
+            this.searchParams = this.packageSearchParam()
+            $emit(this, 'search', this.searchParams)
+          } else {
+            return false
+          }
+        })
+      } else if (this.searchType === 'normal') {
+        this.$refs.searchFormOrdinarySearch.validateForm().then((valid) => {
+          if (valid) {
+            // this.loading = true
+            this.searchParams = this.packageSearchParam()
+            $emit(this, 'search', this.searchParams)
+          } else {
+            return false
+          }
+        })
+      } else if (this.searchType === 'advanced') {
+        this.$refs.searchFormAdvancedQuery.validateForm().then((valid) => {
+          if (valid) {
+            this.loading = true
+            this.searchParams = this.packageSearchParam()
+            $emit(this, 'search', this.searchParams)
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    resetForm() {
+      if (this.$refs.searchConditionList) {
+        this.$refs.searchConditionList.editConditionId = null
+      }
+      if (this.isMobile) {
+        this.$refs.searchFormMobile.resetForm()
+      } else if (this.searchType === 'normal') {
+        this.$refs.searchFormOrdinarySearch.resetForm()
+      } else if (this.searchType === 'advanced') {
+        this.$refs.searchFormAdvancedQuery.resetForm()
+        $emit(this, 'reset')
+      }
+      // 数值区间组件重置时无法清空值问题
+      eventBus.$emit('reset')
+      // 子组件重置完成后调用reset方法 同步执行
+      // this.$emit('reset')
+    },
+    setNumberValue(value, r, n) {
+      let itemValue = this.getFormItemValue(this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop)
+      itemValue = value
+      this.setValueToModelProp(this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop, itemValue)
+    },
+    listSearchConditions() {
+      return new Promise((resolve, reject) => {
+        this.listSearchCondition(this.code)
+          .then((conditions) => {
+            this.searchConditions = conditions
+            resolve(conditions)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    saveCondition() {
+      const searchParams = this.packageSearchParam()
+      if (!searchParams || searchParams.length === 0) {
+        this.$message({
+          type: 'warning',
+          message: this.$t('imatrixUIMessage.pleaseInputSearchCondition'),
+          showClose: true
+        })
+        return
+      }
+      this.isShowSearchCondition = true
+    },
+    saveConditionValue(conditionName) {
+      if (conditionName) {
+        let searchParams
+        if (
+          this.searchType === 'normal' ||
+          this.searchType === '' ||
+          this.searchType === null ||
+          this.searchType === undefined
+        ) {
+          searchParams = this.packageSearchParam()
+        } else {
+          searchParams = this.searchFormList
+        }
+        const condition = {
+          listCode: this.code,
+          queryType:
+            this.searchType === 'normal' ||
+            this.searchType === '' ||
+            this.searchType === null ||
+            this.searchType === undefined
+              ? 'FIXED'
+              : 'CUSTOM',
+          name: conditionName,
+          queryCondition: JSON.stringify(searchParams)
+        }
+        this.saveSearchCondition(condition).then((condition) => {
+          this.$message({
+            type: 'success',
+            message: this.$t('imatrixUIMessage.saveSuccessfully'),
+            showClose: true
+          })
+          this.isShowSearchCondition = false
+          this.listSearchConditions().then(() => {
+            if (this.$refs.searchConditionList) {
+              // 选中刚刚保存的条件
+              this.$refs.searchConditionList.editConditionId = condition.id + ''
+            }
+            // 查询条件对应的数据
+            this.selectCondition(condition.id)
+          })
+        })
+      }
+      this.isShowSearchCondition = false
+    },
+    removeCondition(conditionId) {
+      if (conditionId) {
+        this.$confirm(this.$t('imatrixUIMessage.whetherToConfirmDeletion'), this.$t('imatrixUIMessage.tips'), {
+          confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+          cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
+          type: 'warning'
+        }).then(() => {
+          this.removeSearchCondition(conditionId).then(() => {
+            this.$message({
+              type: 'success',
+              message: this.$t('superGrid.deleteSuccessful'),
+              showClose: true
+            })
+            this.listSearchConditions()
+          })
+        })
+      }
+    },
+    selectCondition(conditionId) {
+      if (conditionId) {
+        this.getSearchCondition(conditionId).then((searchCondition) => {
+          if (searchCondition) {
+            const queryCondition = searchCondition.queryCondition
+            if (queryCondition) {
+              if (
+                this.searchType === 'normal' ||
+                this.searchType === '' ||
+                this.searchType === null ||
+                this.searchType === undefined
+              ) {
+                const searchParams = JSON.parse(queryCondition)
+                const searchForm = this.packageSearchForm(searchParams)
+                if (searchForm) {
+                  this.searchForm = searchForm
+                }
+                // 查询数据
+                this.loading = true
+                $emit(this, 'search', searchParams)
+              } else {
+                this.searchFormList = JSON.parse(queryCondition)
+                // 查询数据
+                this.loading = true
+                $emit(this, 'search', this.packageSearchParam())
+              }
+            }
+          }
+        })
+      }
+    },
+    // 封装searchForm
+    packageSearchForm(searchFormArr) {
+      if (searchFormArr && searchFormArr.length > 0) {
+        const searchForm = {}
+        const initSearchProps = []
+        searchFormArr.forEach((item) => {
+          // 获得的是"isDeleted"
+          let prop = item.propName
+          // 获得的是“deleted”
+          const columnProp = item.columnProp
+          const dataType = item.dataType
+          if (dataType && dataType === 'BOOLEAN' && columnProp) {
+            prop = columnProp
+          }
+          if (initSearchProps.indexOf(prop) === -1) {
+            initSearchProps.push(prop)
+          }
+          const propValue = item.propValue
+          if (prop && prop.indexOf('.') > 0) {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(searchForm, prop, propValue)
+          } else {
+            let isRangeQueryValue = false
+            if (dataType && (dataType === 'DATE' || dataType === 'TIME')) {
+              if (item.startValue && item.endValue) {
+                isRangeQueryValue = true
+              }
+            }
+            if (isRangeQueryValue) {
+              searchForm[prop] = [new Date(item.startValue), new Date(item.endValue)]
+            } else {
+              if (searchForm[prop]) {
+                if (searchForm[prop] instanceof Array) {
+                  searchForm[prop].push(propValue)
+                } else {
+                  searchForm[prop] = [searchForm[prop], propValue]
+                }
+              } else {
+                searchForm[prop] = propValue
+              }
+            }
+          }
+        })
 
-				this.searchableColumns.forEach((column) => {
-					if (initSearchProps) {
-						if (initSearchProps.indexOf(column.prop) < 0) {
-							// 表示没有默认初始查询字段
-							if (column.prop && column.prop.indexOf('.') > 0) {
-								if (column.componentType === 'dateSection') {
-									addDynamicPropDateSection(searchForm, column.prop)
-								} else {
-									// 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
-									addDynamicProp(searchForm, column.prop)
-								}
-							} else {
-								if (column.componentType === 'dateSection') {
-									searchForm[column.prop] = [new Date(), new Date()]
-								} else {
-									searchForm[column.prop] = null
-								}
-							}
-						} else {
-							if (
-									column.componentType === 'multiselect' &&
-									searchForm[column.prop]
-							) {
-								if (!(searchForm[column.prop] instanceof Array)) {
-									searchForm[column.prop] = [searchForm[column.prop]]
-								}
-							}
-						}
-					}
-				})
+        this.searchableColumns.forEach((column) => {
+          if (initSearchProps) {
+            if (initSearchProps.indexOf(column.prop) < 0) {
+              // 表示没有默认初始查询字段
+              if (column.prop && column.prop.indexOf('.') > 0) {
+                if (column.componentType === 'dateSection') {
+                  addDynamicPropDateSection(searchForm, column.prop)
+                } else {
+                  // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+                  addDynamicProp(searchForm, column.prop)
+                }
+              } else {
+                if (column.componentType === 'dateSection') {
+                  searchForm[column.prop] = [new Date(), new Date()]
+                } else {
+                  searchForm[column.prop] = null
+                }
+              }
+            } else {
+              if (column.componentType === 'multiselect' && searchForm[column.prop]) {
+                if (!(searchForm[column.prop] instanceof Array)) {
+                  searchForm[column.prop] = [searchForm[column.prop]]
+                }
+              }
+            }
+          }
+        })
 
-				return searchForm
-			}
-		},
-		resetSearchFormList() {
-			this.searchFormList = null
-		},
-		openFold(isOpen) {
-			$emit(this, 'open-fold', isOpen)
-		},
-		// 查询完毕
-		searchComplete() {
-			if(this.isMobile && this.$refs.searchFormMobile){
-				this.$refs.searchFormMobile.searchComplete()
-			}else if (this.$refs.searchFormOrdinarySearch) {
-				this.$refs.searchFormOrdinarySearch.searchComplete()
-			}
-		},
-		closeMobileSearch() {
-			this.isShowMobileForm = false
-			$emit(this, 'close-mobile-search')
-		},
-		showMobileSearch(){
-			this.isShowMobileForm = true
-		}
-	},
-	emits: ['search', 'open-fold', 'reset', 'show-mobile-search', 'close-mobile-search'],
+        return searchForm
+      }
+    },
+    resetSearchFormList() {
+      this.searchFormList = null
+    },
+    openFold(isOpen) {
+      $emit(this, 'open-fold', isOpen)
+    },
+    // 查询完毕
+    searchComplete() {
+      if (this.isMobile && this.$refs.searchFormMobile) {
+        this.$refs.searchFormMobile.searchComplete()
+      } else if (this.$refs.searchFormOrdinarySearch) {
+        this.$refs.searchFormOrdinarySearch.searchComplete()
+      }
+    },
+    closeMobileSearch() {
+      this.isShowMobileForm = false
+      $emit(this, 'close-mobile-search')
+    },
+    showMobileSearch() {
+      this.isShowMobileForm = true
+    }
+  },
+  emits: ['search', 'open-fold', 'reset', 'show-mobile-search', 'close-mobile-search']
 }
 </script>
 
 <style scoped>
 .grid-search-form :deep(.el-form-item) {
-	margin-bottom: 0px;
+  margin-bottom: 0px;
 }
 
 .grid-search-form :deep(.search-btn) {
-	margin-bottom: 5px;
-	text-align: center;
+  margin-bottom: 5px;
+  text-align: center;
 }
 
 .grid-search-form :deep(.el-select),
 .grid-search-form :deep(.customComponent) {
-	width: 100%;
+  width: 100%;
 }
 
 .amb-agilebuilder-search-form-view:empty {
-	display: none;
+  display: none;
 }
 
 .search-condition-mobile {
-	padding-bottom: 10px;
-	position: fixed;
-    top: 37px;
-    background-color: #ffffff;
-    width: 46%;
-    height: 40px;
-	z-index: 1500;
+  padding-bottom: 10px;
+  position: fixed;
+  top: 37px;
+  background-color: #ffffff;
+  width: 46%;
+  height: 40px;
+  z-index: 1500;
 }
 </style>