imatrix-ui 0.2.5-up → 0.2.7-up

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

@@ -1,495 +1,495 @@
-<template>
-	<el-form-item
-			:label-width="
-      column.querySetting ? getLabelWidth(column.querySetting) : '110px'
-    "
-			:prop="column.prop"
-	>
-		<template v-slot:label>
-      <span
-		      v-if="column.searchLabel && column.searchLabel !== ''"
-		      :title="column.searchLabel.replace(/\\n/g, '</br>')"
-		      v-html="column.searchLabel.replace(/\\n/g, '</br>')"
-      />
-			<span
-					v-else
-					:title="column.label.replace(/\\n/g, '</br>')"
-					v-html="column.label.replace(/\\n/g, '</br>')"
-			/>
-		</template>
-		<span v-if="customComponent(column) === true">
-      <component
-		      :is="column.componentName"
-		      :ref="column.componentName"
-		      :entity="searchForm"
-		      :prop="column.prop"
-		      :row="searchForm"
-		      :select-options="column.valueSet"
-		      :value="getFormItemValue(column.prop)"
-		      class="customComponent"
-		      @input="setValueToModelProp(column.prop, $event, column.componentName)"
-      />
-    </span>
-		<!-- 日期区间-两个输入框方式 -->
-		<span v-else-if="column.componentType === 'dateSection'">
-      <el-date-picker
-		      :model-value="getFormItemValue(column.prop, 0)"
-		      :placeholder="$t('imatrixUIMessage.startDate')"
-		      :style="column.searchControlWidth"
-		      type="date"
-		      @input="setValueToModelProp(column.prop, $event, null, 0)"
-      />
-      <el-date-picker
-		      :model-value="getFormItemValue(column.prop, 1)"
-		      :placeholder="$t('imatrixUIMessage.endDate')"
-		      :style="column.searchControlWidth"
-		      type="date"
-		      @input="setValueToModelProp(column.prop, $event, null, 1)"
-      />
-    </span>
-		<!--后面再优化年份及年份区间控件--->
-		<year-range-picker
-				v-else-if="column.componentType === 'yearRange'"
-				:value="getFormItemValue(column.prop)"
-				type="yearRange"
-				@change="setYearRangeValue(column.prop, $event)"
-		/>
-		<el-date-picker
-				v-else-if="column.componentType === 'dateTimePicker'"
-				:default-time="getDefaultTime(column)"
-				:end-placeholder="$t('imatrixUIMessage.endDate')"
-				:range-separator="$t('imatrixUIPublicModel.to')"
-				:start-placeholder="$t('imatrixUIMessage.startDate')"
-				:style="column.searchControlWidth"
-				:value="getFormItemValue(column.prop)"
-				type="datetimerange"
-				unlink-panels
-				value-format="yyyy-MM-dd HH:mm:ss"
-				@input="setValueToModelProp(column.prop, $event)"
-		/>
-
-		<el-date-picker
-				v-else-if="column.dataType === 'DATE' || column.componentType === 'date'"
-				:end-placeholder="$t('imatrixUIMessage.endDate')"
-				:range-separator="$t('imatrixUIPublicModel.to')"
-				:start-placeholder="$t('imatrixUIMessage.startDate')"
-				:style="column.searchControlWidth"
-				:value="getFormItemValue(column.prop)"
-				type="daterange"
-				unlink-panels
-				value-format="yyyy-MM-dd"
-				@input="setValueToModelProp(column.prop, $event)"
-		/>
-		<el-date-picker
-				v-else-if="
-        column.dataType === 'TIME' && column.componentType === 'timepicker'
-      "
-				:end-placeholder="$t('imatrixUIMessage.endDate')"
-				:range-separator="$t('imatrixUIPublicModel.to')"
-				:start-placeholder="$t('imatrixUIMessage.startDate')"
-				:style="column.searchControlWidth"
-				:value="getFormItemValue(column.prop)"
-				type="datetimerange"
-				unlink-panels
-				value-format="HH:mm:ss"
-				@input="setValueToModelProp(column.prop, $event)"
-		/>
-
-		<el-time-picker
-				v-else-if="
-        column.componentType === 'timepicker' &&
-        column.dataType !== 'TIME' &&
-        column.dataType !== 'DATE'
-      "
-				:placeholder="$t('imatrixUIMessage.selectTime')"
-				:value="getFormItemValue(column.prop)"
-				style="width: 100%"
-				type="fixed-time"
-				value-format="HH:mm:ss"
-				@input="setValueToModelProp(column.prop, $event)"
-		/>
-
-		<organization-input
-				v-else-if="componentTypeTypeIsTree(column.componentType)"
-				:fields="getTreeFields(column.orgTreeSet)"
-				:models="searchForm"
-				:multiple="getTreeIsMultiTree(column.componentType)"
-				:tree-type="getTreeType(column.componentType)"
-				:value="getFormItemValue(column.prop)"
-				@clear="clearOrganizationInputEvent"
-				@setValue="organizationInputEvent"
-		/>
-
-		<el-select
-				v-else-if="
-        ((column.componentType && column.componentType === 'select') ||
-          column.dataType === 'BOOLEAN') &&
-        !isDynamicDataSourceSource(column)
-      "
-				:placeholder="$t('imatrixUIMessage.pleaseSelect')"
-				:style="column.searchControlWidth"
-				:value="getFormItemValue(column.prop)"
-				clearable
-				filterable
-				@input="setValueToModelProp(column.prop, $event)"
-		>
-			<el-option
-					v-for="item in column.valueSet"
-					:key="item.value"
-					:label="item.label"
-					:value="item.value"
-			/>
-		</el-select>
-		<el-select
-				v-else-if="
-        column.componentType &&
-        column.componentType === 'multiselect' &&
-        !isDynamicDataSourceSource(column)
-      "
-				:placeholder="$t('imatrixUIMessage.pleaseSelect')"
-				:style="column.searchControlWidth"
-				:value="getFormItemValue(column.prop)"
-				clearable
-				collapse-tags
-				filterable
-				multiple
-				@input="setValueToModelProp(column.prop, $event)"
-		>
-			<el-option
-					v-for="item in column.valueSet"
-					:key="item.value"
-					:label="item.label"
-					:value="item.value"
-			/>
-		</el-select>
-		<dynamic-source-select
-				v-else-if="
-        column.componentType &&
-        (column.componentType === 'multiselect' ||
-          column.componentType === 'select') &&
-        isDynamicDataSourceSource(column)
-      "
-				:allow-create="true"
-				:base-props="{
-        multiple: column.componentType === 'multiselect' ? true : false,
-      }"
-				:entity="searchForm"
-				:filterable="true"
-				:is-join-table="isJoinTable"
-				:list-code="code"
-				:list-toolbar-form-data="listToolbarFormData"
-				:options="getDynamicDataSourceOptions(column)"
-				:table-name="tableName"
-				:value="getFormItemValue(column.prop)"
-				@input="setValueToModelProp(column.prop, $event)"
-		/>
-		<!--
-									<el-input-number
-										v-else-if="column.componentType && column.componentType==='inputNumber'"
-										:value="getFormItemValue(column.prop)"
-										@input="setValueToModelProp(column.prop,$event)"
-									/> -->
-
-		<search-form-number
-				v-else-if="column.componentType && column.componentType === 'inputNumber'"
-				:item-value="searchForm[column.prop]"
-				:module-config="moduleConfig"
-				@setValue="setNumberValue"
-		/>
-
-		<el-switch
-				v-else-if="column.componentType && column.componentType === 'switch'"
-				:model-value="getFormItemValue(column.prop)"
-				:style="column.searchControlWidth"
-				active-color="#13ce66"
-				inactive-color="#ff4949"
-				@input="setValueToModelProp(column.prop, $event)"
-		/>
-		<el-slider
-				v-else-if="column.componentType && column.componentType === 'slider'"
-				:model-value="getFormItemValue(column.prop)"
-				:style="column.searchControlWidth"
-				@input="setValueToModelProp(column.prop, $event)"
-		/>
-
-		<el-rate
-				v-else-if="column.componentType && column.componentType === 'rate'"
-				:model-value="getFormItemValue(column.prop)"
-				:style="column.searchControlWidth"
-				@input="setValueToModelProp(column.prop, $event)"
-		/>
-		<el-input
-				v-else
-				:model-value="getFormItemValue(column.prop)"
-				:style="column.searchControlWidth"
-				@input="setValueToModelProp(column.prop, $event)"
-				@keyup.enter="submitForm('searchForm')"
-		/>
-	</el-form-item>
-</template>
-
-<script>
-import {$emit} from '../../utils/gogocodeTransfer'
-import searchMethods from './search-methods'
-import searchFormNumber from './search-form-number.vue'
-import store from './store'
-import {getDynamicDataSourceOptions, isDynamicDataSourceSource} from './utils'
-
-export default {
-	name: 'SearchFormItem',
-	components: {
-		searchFormNumber,
-	},
-	inject: ['getListToolbarFormData'],
-	props: {
-		column: {
-			type: Object,
-			default: null,
-		},
-		code: {
-			type: String,
-			default: null,
-		},
-		isSql: {
-			type: Boolean,
-			default: false,
-		},
-		tableName: {
-			type: String,
-			default: null,
-		},
-		isJoinTable: {
-			type: Boolean,
-			default: false,
-		},
-		// 查询表单信息
-		searchForm: {
-			type: Object,
-			default: null,
-		},
-		index: {
-			type: Number,
-			default: 0,
-		},
-		length: {
-			type: Number,
-			default: 0,
-		},
-		loadCompleteQuery: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		const customComponentNames = new Set()
-		return {
-			customComponentNames: customComponentNames,
-			dateOne: null,
-			dataTwo: null,
-			moduleConfig: {},
-		}
-	},
-	computed: {
-		listToolbarFormData() {
-			console.log(this.getListToolbarFormData())
-			const data = this.getListToolbarFormData()
-			if (data && data.listToolbarFormData) {
-				return this.getListToolbarFormData().listToolbarFormData
-			}
-			return null
-		},
-	},
-	created() {
-		if (this.column.valueSetOptions) {
-			this.moduleConfig = JSON.parse(this.column.valueSetOptions)
-		}
-		console.log('searchitem页面', this.column)
-	},
-	mounted() {
-		// 查询页面加载完成
-		if (this.index + 1 === this.length && this.loadCompleteQuery) {
-			$emit(this, 'submit-form')
-		}
-	},
-	methods: {
-		...searchMethods,
-		getDynamicDataSourceOptions(column) {
-			const gridParams = store.get(this.code)
-			return getDynamicDataSourceOptions(
-					column,
-					this.isSql,
-					gridParams.additionalParamMap
-			)
-		},
-		// 值设置是否是动态数据源类型的数据源
-		isDynamicDataSourceSource(column) {
-			return isDynamicDataSourceSource(column)
-		},
-		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
-				}
-			}
-		},
-		getLabelWidth(querySetting) {
-			const configData = JSON.parse(querySetting)
-			if (
-					configData.labelWidth !== '' &&
-					configData.labelWidth !== null &&
-					configData.labelWidth !== undefined
-			) {
-				return configData.labelWidth + 'px'
-			} else {
-				return '110px'
-			}
-		},
-		componentTypeTypeIsTree(componentType) {
-			if (componentType) {
-				if (componentType.indexOf('DeptManTree') > 0) {
-					// 说明是部门人员树
-					return true
-				}
-				if (componentType.indexOf('DeptTree') > 0) {
-					// 说明是部门树
-					return true
-				}
-				if (componentType.indexOf('WgManTree') > 0) {
-					// 说明是工作组人员树
-					return true
-				}
-				if (componentType.indexOf('WgManTree') > 0) {
-					// 说明是工作组树
-					return true
-				}
-			}
-			return false
-		},
-		getTreeFields(orgTreeSetJson) {
-			if (orgTreeSetJson && orgTreeSetJson !== '') {
-				const orgTreeSet = JSON.parse(orgTreeSetJson)
-				if (orgTreeSet.length) {
-					return orgTreeSet
-				} else {
-					if (orgTreeSet.orgTreeSetArr) {
-						return orgTreeSet.orgTreeSetArr
-					}
-				}
-			}
-		},
-		getTreeIsMultiTree(componentType) {
-			if (
-					componentType &&
-					componentType.indexOf('single') >= 0 &&
-					componentType.indexOf('Tree') > 0
-			) {
-				return false
-			} else {
-				return true
-			}
-		},
-		getTreeType(componentType) {
-			if (componentType) {
-				if (componentType.indexOf('DeptManTree') > 0) {
-					// 说明是部门人员树
-					return 'DeptUserTree'
-				}
-				if (componentType.indexOf('DeptTree') > 0) {
-					// 说明是部门树
-					return 'DeptTree'
-				}
-				if (componentType.indexOf('WgTree') > 0) {
-					// 说明是工作组人员树
-					return 'WgTree'
-				}
-				if (componentType.indexOf('WgManTree') > 0) {
-					// 说明是工作组树
-					return 'WgUserTree'
-				}
-			}
-		},
-		// 组织结构树文本框值改变事件
-		organizationInputEvent(prop, value) {
-			if (prop) {
-				// 必须手动调用一下input事件，否则不会更新组件的值
-				this.searchForm[prop] = value
-			}
-		},
-		// 组织结构树文本框值清空事件
-		clearOrganizationInputEvent(prop) {
-			if (prop) {
-				// 必须手动调用一下input事件，否则不会更新组件的值
-				this.searchForm[prop] = null
-			}
-		},
-		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
-		},
-		setNumberValue(value, r, n) {
-			let itemValue = this.getFormItemValue(this.column.prop)
-			itemValue = value
-			this.setValueToModelProp(this.column.prop, itemValue)
-		},
-		setYearRangeValue(prop, value) {
-			this.searchForm[prop][0] = value[0]
-			this.searchForm[prop][1] = value[1]
-		},
-		getDefaultTime(column) {
-			if (column['valueSetOptions']) {
-				const valueSetOptions = JSON.parse(column['valueSetOptions'])
-				if (valueSetOptions.defaultTime) {
-					return [valueSetOptions.defaultTime, valueSetOptions.defaultTime]
-				} else {
-					return ['00:00:00']
-				}
-			} else {
-				return ['00:00:00']
-			}
-		},
-	},
-	emits: ['submit-form'],
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(.el-range-separator) {
-	min-width: 20px;
-}
-</style>
+<template>
+	<el-form-item
+			:label-width="
+      column.querySetting ? getLabelWidth(column.querySetting) : '110px'
+    "
+			:prop="column.prop"
+	>
+		<template v-slot:label>
+      <span
+		      v-if="column.searchLabel && column.searchLabel !== ''"
+		      :title="column.searchLabel.replace(/\\n/g, '</br>')"
+		      v-html="column.searchLabel.replace(/\\n/g, '</br>')"
+      />
+			<span
+					v-else
+					:title="column.label.replace(/\\n/g, '</br>')"
+					v-html="column.label.replace(/\\n/g, '</br>')"
+			/>
+		</template>
+		<span v-if="customComponent(column) === true">
+      <component
+		      :is="column.componentName"
+		      :ref="column.componentName"
+		      :entity="searchForm"
+		      :prop="column.prop"
+		      :row="searchForm"
+		      :select-options="column.valueSet"
+		      :value="getFormItemValue(column.prop)"
+		      class="customComponent"
+		      @input="setValueToModelProp(column.prop, $event, column.componentName)"
+      />
+    </span>
+		<!-- 日期区间-两个输入框方式 -->
+		<span v-else-if="column.componentType === 'dateSection'">
+      <el-date-picker
+		      :model-value="getFormItemValue(column.prop, 0)"
+		      :placeholder="$t('imatrixUIMessage.startDate')"
+		      :style="column.searchControlWidth"
+		      type="date"
+		      @input="setValueToModelProp(column.prop, $event, null, 0)"
+      />
+      <el-date-picker
+		      :model-value="getFormItemValue(column.prop, 1)"
+		      :placeholder="$t('imatrixUIMessage.endDate')"
+		      :style="column.searchControlWidth"
+		      type="date"
+		      @input="setValueToModelProp(column.prop, $event, null, 1)"
+      />
+    </span>
+		<!--后面再优化年份及年份区间控件--->
+		<year-range-picker
+				v-else-if="column.componentType === 'yearRange'"
+				:value="getFormItemValue(column.prop)"
+				type="yearRange"
+				@change="setYearRangeValue(column.prop, $event)"
+		/>
+		<el-date-picker
+				v-else-if="column.componentType === 'dateTimePicker'"
+				:default-time="getDefaultTime(column)"
+				:end-placeholder="$t('imatrixUIMessage.endDate')"
+				:range-separator="$t('imatrixUIPublicModel.to')"
+				:start-placeholder="$t('imatrixUIMessage.startDate')"
+				:style="column.searchControlWidth"
+				:value="getFormItemValue(column.prop)"
+				type="datetimerange"
+				unlink-panels
+				value-format="yyyy-MM-dd HH:mm:ss"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+
+		<el-date-picker
+				v-else-if="column.dataType === 'DATE' || column.componentType === 'date'"
+				:end-placeholder="$t('imatrixUIMessage.endDate')"
+				:range-separator="$t('imatrixUIPublicModel.to')"
+				:start-placeholder="$t('imatrixUIMessage.startDate')"
+				:style="column.searchControlWidth"
+				:value="getFormItemValue(column.prop)"
+				type="daterange"
+				unlink-panels
+				value-format="yyyy-MM-dd"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+		<el-date-picker
+				v-else-if="
+        column.dataType === 'TIME' && column.componentType === 'timepicker'
+      "
+				:end-placeholder="$t('imatrixUIMessage.endDate')"
+				:range-separator="$t('imatrixUIPublicModel.to')"
+				:start-placeholder="$t('imatrixUIMessage.startDate')"
+				:style="column.searchControlWidth"
+				:value="getFormItemValue(column.prop)"
+				type="datetimerange"
+				unlink-panels
+				value-format="HH:mm:ss"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+
+		<el-time-picker
+				v-else-if="
+        column.componentType === 'timepicker' &&
+        column.dataType !== 'TIME' &&
+        column.dataType !== 'DATE'
+      "
+				:placeholder="$t('imatrixUIMessage.selectTime')"
+				:value="getFormItemValue(column.prop)"
+				style="width: 100%"
+				type="fixed-time"
+				value-format="HH:mm:ss"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+
+		<organization-input
+				v-else-if="componentTypeTypeIsTree(column.componentType)"
+				:fields="getTreeFields(column.orgTreeSet)"
+				:models="searchForm"
+				:multiple="getTreeIsMultiTree(column.componentType)"
+				:tree-type="getTreeType(column.componentType)"
+				:value="getFormItemValue(column.prop)"
+				@clear="clearOrganizationInputEvent"
+				@setValue="organizationInputEvent"
+		/>
+
+		<el-select
+				v-else-if="
+        ((column.componentType && column.componentType === 'select') ||
+          column.dataType === 'BOOLEAN') &&
+        !isDynamicDataSourceSource(column)
+      "
+				:placeholder="$t('imatrixUIMessage.pleaseSelect')"
+				:style="column.searchControlWidth"
+				:value="getFormItemValue(column.prop)"
+				clearable
+				filterable
+				@input="setValueToModelProp(column.prop, $event)"
+		>
+			<el-option
+					v-for="item in column.valueSet"
+					:key="item.value"
+					:label="item.label"
+					:value="item.value"
+			/>
+		</el-select>
+		<el-select
+				v-else-if="
+        column.componentType &&
+        column.componentType === 'multiselect' &&
+        !isDynamicDataSourceSource(column)
+      "
+				:placeholder="$t('imatrixUIMessage.pleaseSelect')"
+				:style="column.searchControlWidth"
+				:value="getFormItemValue(column.prop)"
+				clearable
+				collapse-tags
+				filterable
+				multiple
+				@input="setValueToModelProp(column.prop, $event)"
+		>
+			<el-option
+					v-for="item in column.valueSet"
+					:key="item.value"
+					:label="item.label"
+					:value="item.value"
+			/>
+		</el-select>
+		<dynamic-source-select
+				v-else-if="
+        column.componentType &&
+        (column.componentType === 'multiselect' ||
+          column.componentType === 'select') &&
+        isDynamicDataSourceSource(column)
+      "
+				:allow-create="true"
+				:base-props="{
+        multiple: column.componentType === 'multiselect' ? true : false,
+      }"
+				:entity="searchForm"
+				:filterable="true"
+				:is-join-table="isJoinTable"
+				:list-code="code"
+				:list-toolbar-form-data="listToolbarFormData"
+				:options="getDynamicDataSourceOptions(column)"
+				:table-name="tableName"
+				:value="getFormItemValue(column.prop)"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+		<!--
+									<el-input-number
+										v-else-if="column.componentType && column.componentType==='inputNumber'"
+										:value="getFormItemValue(column.prop)"
+										@input="setValueToModelProp(column.prop,$event)"
+									/> -->
+
+		<search-form-number
+				v-else-if="column.componentType && column.componentType === 'inputNumber'"
+				:item-value="searchForm[column.prop]"
+				:module-config="moduleConfig"
+				@setValue="setNumberValue"
+		/>
+
+		<el-switch
+				v-else-if="column.componentType && column.componentType === 'switch'"
+				:model-value="getFormItemValue(column.prop)"
+				:style="column.searchControlWidth"
+				active-color="#13ce66"
+				inactive-color="#ff4949"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+		<el-slider
+				v-else-if="column.componentType && column.componentType === 'slider'"
+				:model-value="getFormItemValue(column.prop)"
+				:style="column.searchControlWidth"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+
+		<el-rate
+				v-else-if="column.componentType && column.componentType === 'rate'"
+				:model-value="getFormItemValue(column.prop)"
+				:style="column.searchControlWidth"
+				@input="setValueToModelProp(column.prop, $event)"
+		/>
+		<el-input
+				v-else
+				:model-value="getFormItemValue(column.prop)"
+				:style="column.searchControlWidth"
+				@input="setValueToModelProp(column.prop, $event)"
+				@keyup.enter="submitForm('searchForm')"
+		/>
+	</el-form-item>
+</template>
+
+<script>
+import {$emit} from '../../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+import searchFormNumber from './search-form-number.vue'
+import store from './store'
+import {getDynamicDataSourceOptions, isDynamicDataSourceSource} from './utils'
+
+export default {
+	name: 'SearchFormItem',
+	components: {
+		searchFormNumber,
+	},
+	inject: ['getListToolbarFormData'],
+	props: {
+		column: {
+			type: Object,
+			default: null,
+		},
+		code: {
+			type: String,
+			default: null,
+		},
+		isSql: {
+			type: Boolean,
+			default: false,
+		},
+		tableName: {
+			type: String,
+			default: null,
+		},
+		isJoinTable: {
+			type: Boolean,
+			default: false,
+		},
+		// 查询表单信息
+		searchForm: {
+			type: Object,
+			default: null,
+		},
+		index: {
+			type: Number,
+			default: 0,
+		},
+		length: {
+			type: Number,
+			default: 0,
+		},
+		loadCompleteQuery: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		const customComponentNames = new Set()
+		return {
+			customComponentNames: customComponentNames,
+			dateOne: null,
+			dataTwo: null,
+			moduleConfig: {},
+		}
+	},
+	computed: {
+		listToolbarFormData() {
+			console.log(this.getListToolbarFormData())
+			const data = this.getListToolbarFormData()
+			if (data && data.listToolbarFormData) {
+				return this.getListToolbarFormData().listToolbarFormData
+			}
+			return null
+		},
+	},
+	created() {
+		if (this.column.valueSetOptions) {
+			this.moduleConfig = JSON.parse(this.column.valueSetOptions)
+		}
+		console.log('searchitem页面', this.column)
+	},
+	mounted() {
+		// 查询页面加载完成
+		if (this.index + 1 === this.length && this.loadCompleteQuery) {
+			$emit(this, 'submit-form')
+		}
+	},
+	methods: {
+		...searchMethods,
+		getDynamicDataSourceOptions(column) {
+			const gridParams = store.get(this.code)
+			return getDynamicDataSourceOptions(
+					column,
+					this.isSql,
+					gridParams.additionalParamMap
+			)
+		},
+		// 值设置是否是动态数据源类型的数据源
+		isDynamicDataSourceSource(column) {
+			return isDynamicDataSourceSource(column)
+		},
+		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
+				}
+			}
+		},
+		getLabelWidth(querySetting) {
+			const configData = JSON.parse(querySetting)
+			if (
+					configData.labelWidth !== '' &&
+					configData.labelWidth !== null &&
+					configData.labelWidth !== undefined
+			) {
+				return configData.labelWidth + 'px'
+			} else {
+				return '110px'
+			}
+		},
+		componentTypeTypeIsTree(componentType) {
+			if (componentType) {
+				if (componentType.indexOf('DeptManTree') > 0) {
+					// 说明是部门人员树
+					return true
+				}
+				if (componentType.indexOf('DeptTree') > 0) {
+					// 说明是部门树
+					return true
+				}
+				if (componentType.indexOf('WgManTree') > 0) {
+					// 说明是工作组人员树
+					return true
+				}
+				if (componentType.indexOf('WgManTree') > 0) {
+					// 说明是工作组树
+					return true
+				}
+			}
+			return false
+		},
+		getTreeFields(orgTreeSetJson) {
+			if (orgTreeSetJson && orgTreeSetJson !== '') {
+				const orgTreeSet = JSON.parse(orgTreeSetJson)
+				if (orgTreeSet.length) {
+					return orgTreeSet
+				} else {
+					if (orgTreeSet.orgTreeSetArr) {
+						return orgTreeSet.orgTreeSetArr
+					}
+				}
+			}
+		},
+		getTreeIsMultiTree(componentType) {
+			if (
+					componentType &&
+					componentType.indexOf('single') >= 0 &&
+					componentType.indexOf('Tree') > 0
+			) {
+				return false
+			} else {
+				return true
+			}
+		},
+		getTreeType(componentType) {
+			if (componentType) {
+				if (componentType.indexOf('DeptManTree') > 0) {
+					// 说明是部门人员树
+					return 'DeptUserTree'
+				}
+				if (componentType.indexOf('DeptTree') > 0) {
+					// 说明是部门树
+					return 'DeptTree'
+				}
+				if (componentType.indexOf('WgTree') > 0) {
+					// 说明是工作组人员树
+					return 'WgTree'
+				}
+				if (componentType.indexOf('WgManTree') > 0) {
+					// 说明是工作组树
+					return 'WgUserTree'
+				}
+			}
+		},
+		// 组织结构树文本框值改变事件
+		organizationInputEvent(prop, value) {
+			if (prop) {
+				// 必须手动调用一下input事件，否则不会更新组件的值
+				this.searchForm[prop] = value
+			}
+		},
+		// 组织结构树文本框值清空事件
+		clearOrganizationInputEvent(prop) {
+			if (prop) {
+				// 必须手动调用一下input事件，否则不会更新组件的值
+				this.searchForm[prop] = null
+			}
+		},
+		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
+		},
+		setNumberValue(value, r, n) {
+			let itemValue = this.getFormItemValue(this.column.prop)
+			itemValue = value
+			this.setValueToModelProp(this.column.prop, itemValue)
+		},
+		setYearRangeValue(prop, value) {
+			this.searchForm[prop][0] = value[0]
+			this.searchForm[prop][1] = value[1]
+		},
+		getDefaultTime(column) {
+			if (column['valueSetOptions']) {
+				const valueSetOptions = JSON.parse(column['valueSetOptions'])
+				if (valueSetOptions.defaultTime) {
+					return [valueSetOptions.defaultTime, valueSetOptions.defaultTime]
+				} else {
+					return ['00:00:00']
+				}
+			} else {
+				return ['00:00:00']
+			}
+		},
+	},
+	emits: ['submit-form'],
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-range-separator) {
+	min-width: 20px;
+}
+</style>