agilebuilder-ui 1.1.37 → 1.1.38-sit1

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

@@ -1,500 +1,500 @@
 <template>
-	<el-form-item
-			:label-width="labelWidth ?? (column.querySetting ? getLabelWidth(column.querySetting) : '110px')"
-			:prop="column.prop"
-	>
-		<template v-slot:label>
-			<span :title="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')" v-html="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')" />
-		</template>
-		<span v-if="customComponent(column) === true">
+  <el-form-item
+    :label-width="labelWidth ?? (column.querySetting ? getLabelWidth(column.querySetting) : '110px')"
+    :prop="column.prop"
+  >
+    <template v-slot:label>
+      <span
+        :title="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')"
+        v-html="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')"
+      />
+    </template>
+    <span v-if="customComponent(column) === true">
       <component
-		      :is="column.componentName"
-		      :ref="column.componentName"
-		      :entity="searchForm"
-			  :additional-settings="controlConfig"
-			  :model-value="getFormItemValue(column.prop)"
-		      :prop="column.prop"
-		      :row="searchForm"
-		      :select-options="column.valueSet"
-		      class="customComponent"
-			  @change="setValueToModelProp(column.prop,$event, column.componentName)"
+        :is="column.componentName"
+        :ref="column.componentName"
+        :entity="searchForm"
+        :additional-settings="controlConfig"
+        :model-value="getFormItemValue(column.prop)"
+        :prop="column.prop"
+        :row="searchForm"
+        :select-options="column.valueSet"
+        class="customComponent"
+        @change="setValueToModelProp(column.prop, $event, column.componentName)"
       />
     </span>
-		<!-- 日期区间-两个输入框方式 -->
-		<span v-else-if="column.componentType === 'dateSection'">
+    <!-- 日期区间-两个输入框方式 -->
+    <span v-else-if="column.componentType === 'dateSection'">
       <el-date-picker
-			  v-model="searchForm[column.prop][0]"
-		      :placeholder="$t('imatrixUIMessage.startDate')"
-		      :style="column.searchControlWidth"
-		      type="date"
-			  @change="setValueToModelProp(column.prop,$event, null, 0)"
+        v-model="searchForm[column.prop][0]"
+        :placeholder="$t('imatrixUIMessage.startDate')"
+        :style="column.searchControlWidth"
+        type="date"
+        @change="setValueToModelProp(column.prop, $event, null, 0)"
       />
       <el-date-picker
-			v-model="searchForm[column.prop][1]"
-			:placeholder="$t('imatrixUIMessage.endDate')"
-			:style="column.searchControlWidth"
-			type="date"
-			  @change="setValueToModelProp(column.prop,$event, null, 1)"
+        v-model="searchForm[column.prop][1]"
+        :placeholder="$t('imatrixUIMessage.endDate')"
+        :style="column.searchControlWidth"
+        type="date"
+        @change="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')"
-				v-model="searchForm[column.prop]"
-				:range-separator="$t('imatrixUIPublicModel.to')"
-				:start-placeholder="$t('imatrixUIMessage.startDate')"
-				:style="column.searchControlWidth"
-				type="datetimerange"
-				unlink-panels
-				format="YYYY-MM-DD HH:mm:ss"
-				value-format="YYYY-MM-DD HH:mm:ss"
-				@change="setValueToModelProp(column.prop,$event)"
-		/>
-		<!--:model-value="getFormItemValue(column.prop)"改成v-model="searchForm[column.prop]" 是因为新页面查询日期时会无法选中日期-->
-		<el-date-picker
-				v-else-if="column.dataType === 'DATE' || column.componentType === 'date'"
-				:end-placeholder="$t('imatrixUIMessage.endDate')"
-				v-model="searchForm[column.prop]"
-				:range-separator="$t('imatrixUIPublicModel.to')"
-				:start-placeholder="$t('imatrixUIMessage.startDate')"
-				:style="column.searchControlWidth"
-				type="daterange"
-				unlink-panels
-				format="YYYY-MM-DD"
-				value-format="YYYY-MM-DD"
-				@change="setValueToModelProp(column.prop,$event)"
-		/>
-		<el-date-picker
-				v-else-if="
-        column.dataType === 'TIME' && column.componentType === 'timepicker'
-      "
-				:end-placeholder="$t('imatrixUIMessage.endDate')"
-				v-model="searchForm[column.prop]"
-				:range-separator="$t('imatrixUIPublicModel.to')"
-				:start-placeholder="$t('imatrixUIMessage.startDate')"
-				:style="column.searchControlWidth"
-				type="datetimerange"
-				unlink-panels
-				format="HH:mm:ss"
-				value-format="HH:mm:ss"
-				@change="setValueToModelProp(column.prop,$event)"
-		/>
-
-		<el-time-picker
-				v-else-if="
-        column.componentType === 'timepicker' &&
-        column.dataType !== 'TIME' &&
-        column.dataType !== 'DATE'
-      "
-				v-model="searchForm[column.prop]"
-				:placeholder="$t('imatrixUIMessage.selectTime')"
-				style="width: 100%"
-				type="fixed-time"
-				format="HH:mm:ss"
-				value-format="HH:mm:ss"
-				@change="setValueToModelProp(column.prop,$event)"
-		/>
+    <!--后面再优化年份及年份区间控件--->
+    <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')"
+      v-model="searchForm[column.prop]"
+      :range-separator="$t('imatrixUIPublicModel.to')"
+      :start-placeholder="$t('imatrixUIMessage.startDate')"
+      :style="column.searchControlWidth"
+      type="datetimerange"
+      unlink-panels
+      format="YYYY-MM-DD HH:mm:ss"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      @change="setValueToModelProp(column.prop, $event)"
+    />
+    <!--:model-value="getFormItemValue(column.prop)"改成v-model="searchForm[column.prop]" 是因为新页面查询日期时会无法选中日期-->
+    <el-date-picker
+      v-else-if="column.dataType === 'DATE' || column.componentType === 'date'"
+      :end-placeholder="$t('imatrixUIMessage.endDate')"
+      v-model="searchForm[column.prop]"
+      :range-separator="$t('imatrixUIPublicModel.to')"
+      :start-placeholder="$t('imatrixUIMessage.startDate')"
+      :style="column.searchControlWidth"
+      type="daterange"
+      unlink-panels
+      format="YYYY-MM-DD"
+      value-format="YYYY-MM-DD"
+      @change="setValueToModelProp(column.prop, $event)"
+    />
+    <el-date-picker
+      v-else-if="column.dataType === 'TIME' && column.componentType === 'timepicker'"
+      :end-placeholder="$t('imatrixUIMessage.endDate')"
+      v-model="searchForm[column.prop]"
+      :range-separator="$t('imatrixUIPublicModel.to')"
+      :start-placeholder="$t('imatrixUIMessage.startDate')"
+      :style="column.searchControlWidth"
+      type="datetimerange"
+      unlink-panels
+      format="HH:mm:ss"
+      value-format="HH:mm:ss"
+      @change="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-time-picker
+      v-else-if="column.componentType === 'timepicker' && column.dataType !== 'TIME' && column.dataType !== 'DATE'"
+      v-model="searchForm[column.prop]"
+      :placeholder="$t('imatrixUIMessage.selectTime')"
+      style="width: 100%"
+      type="fixed-time"
+      format="HH:mm:ss"
+      value-format="HH:mm:ss"
+      @change="setValueToModelProp(column.prop, $event)"
+    />
 
-		<el-select
-				v-else-if="
-        ((column.componentType && column.componentType === 'select') ||
-          column.dataType === 'BOOLEAN') &&
+    <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 === 'radio'"
+      :model-value="getFormItemValue(column.prop)"
+      :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+      :style="column.searchControlWidth"
+      clearable
+      filterable
+      @change="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 === 'select') || column.dataType === 'BOOLEAN') &&
         !isDynamicDataSourceSource(column)
       "
-				:model-value="getFormItemValue(column.prop)"
-				:placeholder="$t('imatrixUIMessage.pleaseSelect')"
-				:style="column.searchControlWidth"
-				clearable
-				filterable
-				@change="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="
+      :model-value="getFormItemValue(column.prop)"
+      :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+      :style="column.searchControlWidth"
+      clearable
+      filterable
+      @change="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)"
+      :model-value="getFormItemValue(column.prop)"
+      :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+      :style="column.searchControlWidth"
+      clearable
+      collapse-tags
+      filterable
+      multiple
+      @change="setValueToModelProp(column.prop, $event)"
+    >
+      <el-option v-for="item in column.valueSet" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+    <template
+      v-else-if="
         column.componentType &&
-        column.componentType === 'multiselect' &&
-        !isDynamicDataSourceSource(column)
-      "
-				:model-value="getFormItemValue(column.prop)"
-				:placeholder="$t('imatrixUIMessage.pleaseSelect')"
-				:style="column.searchControlWidth"
-				clearable
-				collapse-tags
-				filterable
-				multiple
-				@change="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') &&
+        (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)"
-		/>
-		<!--
+    >
+      <dynamic-source-select
+        v-model:value="searchForm[column.prop]"
+        :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"
+        @change="multiselectChange"
+        @input="setValueToModelProp(column.prop, $event)"
+      />
+    </template>
+    <!--
 									<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"
-		/>
+    <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"
-				@change="setValueToModelProp(column.prop,$event)"
-		/>
-		<el-slider
-				v-else-if="column.componentType && column.componentType === 'slider'"
-				:model-value="getFormItemValue(column.prop)"
-				:style="column.searchControlWidth"
-				@change="setValueToModelProp(column.prop,$event)"
-		/>
+    <el-switch
+      v-else-if="column.componentType && column.componentType === 'switch'"
+      :model-value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      active-color="#13ce66"
+      inactive-color="#ff4949"
+      @change="setValueToModelProp(column.prop, $event)"
+    />
+    <el-slider
+      v-else-if="column.componentType && column.componentType === 'slider'"
+      :model-value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      @change="setValueToModelProp(column.prop, $event)"
+    />
 
-		<el-rate
-				v-else-if="column.componentType && column.componentType === 'rate'"
-				:model-value="getFormItemValue(column.prop)"
-				:style="column.searchControlWidth"
-				@change="setValueToModelProp(column.prop,$event)"
-		/>
-		<el-input
-				v-else
-				:model-value="getFormItemValue(column.prop)"
-				:style="column.searchControlWidth"
-				@keyup.enter="submitForm('searchForm')"
-				@input="setValueToModelProp(column.prop,$event)"
-		/>
-	</el-form-item>
+    <el-rate
+      v-else-if="column.componentType && column.componentType === 'rate'"
+      :model-value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      @change="setValueToModelProp(column.prop, $event)"
+    />
+    <el-input
+      v-else
+      :model-value="getFormItemValue(column.prop)"
+      :style="column.searchControlWidth"
+      @keyup.enter="submitForm('searchForm')"
+      @input="setValueToModelProp(column.prop, $event)"
+    />
+  </el-form-item>
 </template>
 
 <script>
-import {$emit} from '../../utils/gogocodeTransfer'
+import { $emit } from '../../utils/gogocodeTransfer'
 import searchMethods from './search-methods'
 import searchFormNumber from './search-form-number.vue'
 import store from './store'
-import {getDynamicDataSourceOptions, isDynamicDataSourceSource, getControlConfig} from './utils'
+import { getDynamicDataSourceOptions, isDynamicDataSourceSource, getControlConfig } 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,
-		},
-		labelWidth: {
-			type: [String, Number, undefined],
-			default: undefined,
-		},
-	},
-	data() {
-		const customComponentNames = new Set()
-		return {
-			customComponentNames: customComponentNames,
-			dateOne: null,
-			dataTwo: null,
-			moduleConfig: {},
-			dateVal: this.getFormItemValue(this.column.prop),
-			controlConfig: getControlConfig(this.column)
-		}
-	},
-	computed: {
-		listToolbarFormData() {
-			const data = this.getListToolbarFormData()
-			if (data && data.listToolbarFormData) {
-				return data.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)
-			let baseURL = gridParams.options.backendUrl
-			if (!baseURL) {
-				baseURL = window.$vueApp.config.globalProperties.baseURL
-			}
-			return getDynamicDataSourceOptions(
-					column,
-					this.isSql,
-					gridParams.additionalParamMap,
-					baseURL
-			)
-		},
-		// 值设置是否是动态数据源类型的数据源
-		isDynamicDataSourceSource(column) {
-			return isDynamicDataSourceSource(column)
-		},
-		setValueToModelProp(prop, value, componentName, index) {
-			console.log('%c描述-105004', 'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px', 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'],
+  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
+    },
+    labelWidth: {
+      type: [String, Number, undefined],
+      default: undefined
+    }
+  },
+  data() {
+    const customComponentNames = new Set()
+    return {
+      customComponentNames: customComponentNames,
+      dateOne: null,
+      dataTwo: null,
+      moduleConfig: {},
+      dateVal: this.getFormItemValue(this.column.prop),
+      controlConfig: getControlConfig(this.column)
+    }
+  },
+  computed: {
+    listToolbarFormData() {
+      const data = this.getListToolbarFormData()
+      if (data && data.listToolbarFormData) {
+        return data.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)
+      let baseURL = gridParams.options.backendUrl
+      if (!baseURL) {
+        baseURL = window.$vueApp.config.globalProperties.baseURL
+      }
+      return getDynamicDataSourceOptions(column, this.isSql, gridParams.additionalParamMap, baseURL)
+    },
+    // 值设置是否是动态数据源类型的数据源
+    isDynamicDataSourceSource(column) {
+      return isDynamicDataSourceSource(column)
+    },
+    setValueToModelProp(prop, value, componentName, index) {
+      console.log(
+        '%c描述-105004',
+        'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',
+        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']
+      }
+    },
+    multiselectChange(arr, selectedItem) {
+      if (arr.indexOf('saveAll') !== -1) {
+        if (this.searchForm[this.column.prop]) {
+          const options = this.getDynamicDataSourceOptions(this.column)
+          this.searchForm[this.column.prop] = this.searchForm[this.column.prop].split(',')
+        } else {
+          this.searchForm[this.column.prop] = []
+        }
+      } else {
+        this.searchForm[this.column.prop] = arr
+      }
+    }
+  },
+  emits: ['submit-form']
 }
 </script>
 
 <style lang="scss" scoped>
 :deep(.el-range-separator) {
-	min-width: 20px;
+  min-width: 20px;
 }
 </style>