agilebuilder-ui 1.0.0

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

@@ -0,0 +1,833 @@
+<template>
+	<div v-if="formFlag">
+		<!-- <el-row style="padding-bottom: 8px">
+						<el-button type="primary" size="default" plain icon="el-icon-circle-plus-outline" @click="add">
+							{{ $t('imatrixUIPublicModel.add') }}
+						</el-button>
+						<el-button type="primary" size="default" plain icon="el-icon-delete" @click="remove">
+							{{ $t('imatrixUIPublicModel.delete') }}
+						</el-button>
+					</el-row> -->
+		<el-table
+				ref="table"
+				:data="searchFormList"
+				:row-class-name="tableRowClassName"
+				border
+				highlight-current-row
+				style="width: 100%"
+				@current-change="handleCurrentChange"
+		>
+			<el-table-column
+					:label="$t('imatrixUIPublicModel.edit')"
+					align="center"
+					fixed="left"
+					width="80"
+			>
+				<template v-slot="scope">
+					<el-icon @click="add">
+						<CirclePlus/>
+					</el-icon>
+					<el-icon @click="remove(scope.$index)">
+						<Remove/>
+					</el-icon>
+				</template>
+			</el-table-column>
+			<el-table-column label="(" prop="leftBracket" width="90">
+				<template v-slot="scope">
+					<el-select
+							v-model="scope.row.leftBracket"
+							clearable
+							size="default"
+							@focus="selectRow(scope.row)"
+					>
+						<el-option label="" value=""/>
+						<el-option label="(" value="("/>
+						<el-option label="((" value="(("/>
+						<el-option label="(((" value="((("/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('imatrixUIPublicModel.fieldName')"
+					width="200"
+			>
+				<template v-slot="scope">
+					<el-select
+							v-model="scope.row.prop"
+							clearable
+							filterable
+							size="default"
+							@change="changeFieldName(scope.$index)"
+							@focus="selectRow(scope.row)"
+					>
+						<el-option
+								v-for="item in searchableColumns"
+								:key="item.prop"
+								:label="item.label"
+								:value="item.prop"
+						/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column :label="$t('imatrixUIPublicModel.operator')" width="110">
+				<template v-slot="scope">
+					<el-select
+							v-model="scope.row.operator"
+							clearable
+							size="default"
+							@focus="selectRow(scope.row)"
+					>
+						<el-option
+								v-for="option in operationArr[scope.$index]"
+								:key="option.name"
+								:label="option.label"
+								:value="option.name"
+						/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column :label="$t('imatrixUIPublicModel.value')">
+				<template v-if="scope.row.prop" v-slot="scope">
+					<el-date-picker
+							v-if="
+              scope.row.dataType === 'DATE' ||
+              scope.row.componentType === 'date'
+            "
+							v-model="scope.row.value"
+							:end-placeholder="$t('imatrixUIMessage.endDate')"
+							:range-separator="$t('imatrixUIPublicModel.to')"
+							:start-placeholder="$t('imatrixUIMessage.startDate')"
+							:style="scope.row.searchControlWidth"
+							size="default"
+							type="daterange"
+							unlink-panels
+							value-format="YYYY-MM-DD"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					/>
+
+					<el-date-picker
+							v-else-if="scope.row.componentType === 'dateTimePicker'"
+							v-model="scope.row.value"
+							:end-placeholder="$t('imatrixUIMessage.endDate')"
+							:range-separator="$t('imatrixUIPublicModel.to')"
+							:start-placeholder="$t('imatrixUIMessage.startDate')"
+							:style="scope.row.searchControlWidth"
+							size="default"
+							type="datetimerange"
+							unlink-panels
+							value-format="YYYY-MM-DD HH:mm:ss"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					/>
+
+					<el-date-picker
+							v-else-if="
+              scope.row.dataType === 'TIME' &&
+              scope.row.componentType === 'timepicker'
+            "
+							v-model="scope.row.value"
+							:end-placeholder="$t('imatrixUIMessage.endDate')"
+							:range-separator="$t('imatrixUIPublicModel.to')"
+							:start-placeholder="$t('imatrixUIMessage.startDate')"
+							:style="scope.row.searchControlWidth"
+							size="default"
+							type="datetimerange"
+							unlink-panels
+							value-format="HH:mm:ss"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					/>
+
+					<el-time-picker
+							v-else-if="
+              scope.row.componentType === 'timepicker' &&
+              scope.row.dataType !== 'TIME' &&
+              scope.row.dataType !== 'DATE'
+            "
+							v-model="scope.row.value"
+							:placeholder="$t('imatrixUIMessage.selectTime')"
+							size="default"
+							style="width: 100%"
+							type="fixed-time"
+							value-format="HH:mm:ss"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					/>
+
+					<organization-input
+							v-else-if="componentTypeTypeIsTree(scope.row.componentType)"
+							v-model:value="scope.row.value"
+							:fields="getTreeFields(scope.row.orgTreeSet)"
+							:models="searchForm"
+							:multiple="getTreeIsMultiTree(scope.row.componentType)"
+							:size="default"
+							:tree-type="getTreeType(scope.row.componentType)"
+							@clear="clearOrganizationInputEvent"
+							@focus="selectRow(scope.row)"
+							@setValue="organizationInputEvent"
+					/>
+
+					<el-select
+							v-else-if="
+              ((scope.row.componentType &&
+                scope.row.componentType === 'select') ||
+                scope.row.dataType === 'BOOLEAN') &&
+              !isDynamicDataSourceSource(scope.row)
+            "
+							v-model="scope.row.value"
+							:placeholder="$t('imatrixUIMessage.pleaseSelect')"
+							:style="scope.row.searchControlWidth"
+							clearable
+							size="default"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					>
+						<el-option
+								v-for="item in scope.row.valueSet"
+								:key="item.value"
+								:label="item.label"
+								:value="item.value"
+						/>
+					</el-select>
+					<el-select
+							v-else-if="
+              scope.row.componentType &&
+              scope.row.componentType === 'multiselect' &&
+              !isDynamicDataSourceSource(scope.row)
+            "
+							v-model="scope.row.value"
+							:placeholder="$t('imatrixUIMessage.pleaseSelect')"
+							:style="scope.row.searchControlWidth"
+							clearable
+							collapse-tags
+							multiple
+							size="default"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					>
+						<el-option
+								v-for="item in scope.row.valueSet"
+								:key="item.value"
+								:label="item.label"
+								:value="item.value"
+						/>
+					</el-select>
+
+					<dynamic-source-select
+							v-else-if="
+              scope.row.componentType &&
+              (scope.row.componentType === 'multiselect' ||
+                scope.row.componentType === 'select') &&
+              isDynamicDataSourceSource(scope.row)
+            "
+							:base-props="{
+              multiple:
+                scope.row.componentType === 'multiselect' ? true : false,
+            }"
+							:entity="scope.row"
+							:is-join-table="isJoinTable"
+							:list-code="code"
+							:options="getDynamicDataSourceOptions(scope.row)"
+							:table-name="tableName"
+							:value="scope.row.value"
+							@input="setValueToModelProp(scope.$index, $event)"
+					/>
+					<search-form-number
+							v-else-if="
+              scope.row.componentType &&
+              scope.row.componentType === 'inputNumber'
+            "
+							:n="n"
+							:r="r"
+							size="default"
+							@focus="selectRow(scope.row)"
+							@setValue="setNumberValue"
+					/>
+
+					<el-switch
+							v-else-if="
+              scope.row.componentType && scope.row.componentType === 'switch'
+            "
+							v-model="scope.row.value"
+							:style="scope.row.searchControlWidth"
+							active-color="#13ce66"
+							inactive-color="#ff4949"
+							size="default"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					/>
+					<el-slider
+							v-else-if="
+              scope.row.componentType && scope.row.componentType === 'slider'
+            "
+							v-model="scope.row.value"
+							:style="scope.row.searchControlWidth"
+							size="default"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					/>
+
+					<el-rate
+							v-else-if="
+              scope.row.componentType && scope.row.componentType === 'rate'
+            "
+							v-model="scope.row.value"
+							:style="scope.row.searchControlWidth"
+							size="default"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+					/>
+					<span v-else-if="customComponent(scope.row.prop) === true">
+            <component
+		            :is="scope.row.componentName"
+		            :ref="scope.row.componentName"
+		            v-model:value="scope.row.value"
+		            :prop="scope.row.prop"
+		            :row="scope.row"
+		            class="customComponent"
+		            @focus="selectRow(scope.row)"
+		            @input="
+                setValueToModelProp(
+                  scope.$index,
+                  $event,
+                  scope.row.componentName
+                )
+              "
+            />
+          </span>
+					<el-input
+							v-else
+							v-model="scope.row.value"
+							:style="scope.row.searchControlWidth"
+							size="default"
+							@focus="selectRow(scope.row)"
+							@input="setValueToModelProp(scope.$index, $event)"
+							@keyup.enter="submitForm('searchForm')"
+					/>
+				</template>
+			</el-table-column>
+			<el-table-column label=")" prop="rightBracket" width="90">
+				<template v-slot="scope">
+					<el-select
+							v-model="scope.row.rightBracket"
+							clearable
+							size="default"
+							@focus="selectRow(scope.row)"
+					>
+						<el-option label="" value=""/>
+						<el-option label=")" value=")"/>
+						<el-option label="))" value="))"/>
+						<el-option label=")))" value=")))"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('imatrixUIPublicModel.andOr')"
+					prop="logicOperator"
+					width="110"
+			>
+				<template v-slot="scope">
+					<el-select
+							v-model="scope.row.joinSign"
+							clearable
+							size="default"
+							@focus="selectRow(scope.row)"
+					>
+						<el-option :label="$t('imatrixUIPublicModel.perhaps')" value="or"/>
+						<el-option :label="$t('imatrixUIPublicModel.also')" value="and"/>
+					</el-select>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('imatrixUIPublicModel.whenTheVariableIsEmpty')"
+					width="110"
+			>
+				<template v-slot="scope">
+					<el-select
+							v-model="scope.row.variableIsNull"
+							clearable
+							size="default"
+							@focus="selectRow(scope.row)"
+					>
+						<el-option label="Null" value="null"/>
+						<el-option
+								:label="$t('imatrixUIPublicModel.ignore11')"
+								value="1=1"
+						/>
+						<el-option
+								:label="$t('imatrixUIPublicModel.nonConformity')"
+								value="1<>1"
+						/>
+					</el-select>
+				</template>
+			</el-table-column>
+		</el-table>
+	</div>
+</template>
+
+<script>
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+import searchFormNumber from './search-form-number.vue'
+// import { isOptionFunction, getSearchObject } from './utils'
+import store from './store'
+import SearchConditionInput from './search-condition-input.vue'
+import SearchConditionList from './search-condition-list.vue'
+import {getDynamicDataSourceOptions, isDynamicDataSourceSource} from './utils'
+import {
+	CirclePlus,
+	Remove,
+} from '@element-plus/icons-vue'
+import * as Vue from 'vue'
+
+export default {
+	components: {
+		searchFormNumber,
+		SearchConditionInput,
+		SearchConditionList,
+		CirclePlus,
+		Remove
+	},
+	name: 'SearchForm',
+	props: {
+		searchableColumns: {
+			type: Array,
+			default: null,
+		},
+		searchFormList: {
+			type: Array,
+			default: null,
+		},
+		propMap: {
+			type: Object,
+			default: null,
+		},
+		code: {
+			type: String,
+			default: null,
+		},
+		isSql: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		const gridParams = store.get(this.code)
+		let tableName
+		if (gridParams && gridParams.basicInfo && gridParams.basicInfo.tableName) {
+			tableName = gridParams.basicInfo.tableName
+		}
+		let isHasJoinTable
+		if (
+				gridParams &&
+				gridParams.basicInfo &&
+				gridParams.basicInfo.hasJoinTable
+		) {
+			isHasJoinTable = gridParams.basicInfo.hasJoinTable
+		}
+		const customComponentNames = new Set()
+		return {
+			customComponentNames: customComponentNames,
+			currentRow: null,
+			formFlag: true,
+			operationArr: [],
+			tableName,
+			isJoinTable: isHasJoinTable, // 是否是关联表
+		}
+	},
+	computed: {},
+	watch: {
+		searchableColumns: {
+			deep: true,
+			handler(newValue, oldValue) {
+				this.searchableColumns = newValue
+				this.refreshOperators()
+				this.formFlag = false
+				this.$nextTick(() => {
+					this.formFlag = true
+				})
+			},
+		},
+	},
+	created() {
+		this.refreshOperators()
+		if (!this.searchFormList || this.searchFormList.length < 1) {
+			this.add()
+		}
+	},
+	methods: {
+		...searchMethods,
+		getDynamicDataSourceOptions(column) {
+			const gridParams = store.get(this.code)
+			return getDynamicDataSourceOptions(
+					column,
+					this.isSql,
+					gridParams.additionalParamMap
+			)
+		},
+		// 值设置是否是动态数据源类型的数据源
+		isDynamicDataSourceSource(column) {
+			return isDynamicDataSourceSource(column)
+		},
+		refreshOperators() {
+			if (this.searchableColumns && this.searchableColumns.length > 0) {
+				for (var i = 0; i < this.searchableColumns.length; i++) {
+					const prop = this.searchableColumns[i].prop
+					const item = this.propMap[prop]
+					this.operationArr[i] = this.getOperators(item)
+				}
+			}
+		},
+		handleCurrentChange(val) {
+			this.currentRow = val
+		},
+		tableRowClassName({row, rowIndex}) {
+			// 把每一行的索引放进row
+			row.index = rowIndex
+		},
+		// 选择行
+		selectRow(row) {
+			this.$refs.table.setCurrentRow(row)
+		},
+		// 改变选择的属性
+		changeFieldName(index) {
+			const prop = this.currentRow.prop
+			const item = this.propMap[prop]
+			this.searchFormList[index].dataType = item.dataType
+			this.searchFormList[index].orgProp = item.orgProp
+			this.searchFormList[index].componentType = item.componentType
+			this.searchFormList[index].componentName = item.componentName
+			this.searchFormList[index].queryMatching = item.queryMatching
+			this.searchFormList[index].searchControlWidth = item.searchControlWidth
+			this.searchFormList[index].fuzzy = item.fuzzy
+			this.searchFormList[index].valueSet = item.valueSet
+			this.operationArr[index] = this.getOperators(item)
+		},
+		setValueToModelProp(index, value, componentName) {
+			if (index !== null && index !== undefined) {
+				this.searchFormList[index]['value'] = value
+			}
+		},
+		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(orgTreeSet) {
+			if (orgTreeSet && orgTreeSet !== '') {
+				return JSON.parse(orgTreeSet)
+			}
+		},
+		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 (this.currentRow) {
+				this.currentRow['value'] = value
+			}
+		},
+		// 组织结构树文本框值清空事件
+		clearOrganizationInputEvent(prop) {
+			if (this.currentRow) {
+				this.currentRow['value'] = null
+			}
+		},
+		customComponent(prop) {
+			const column = this.propMap[prop]
+			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
+		},
+		validateForm() {
+			return new Promise((resolve, reject) => {
+				resolve(true)
+			})
+		},
+		resetForm() {
+			if (this.customComponentNames && this.customComponentNames.length > 0) {
+				for (const componentName of this.customComponentNames) {
+					// 遍历
+					this.$refs[componentName][0].resetField()
+				}
+			}
+			// 当是保持页数默认赋值的查询字段resetFields()不会被清空，需要下面的方法遍历设未null
+			$emit(this, 'resetForm')
+			this.add()
+		},
+		setNumberValue(value, r, n) {
+			if (this.currentRow) {
+				this.currentRow['value'] = value
+			}
+		},
+		// 添加
+		add() {
+			if (!this.searchFormList) {
+				this.searchFormList = []
+			}
+			this.searchFormList.push({
+				leftBracket: '',
+				prop: '',
+				operator: '',
+				value: '',
+				rightBracket: '',
+				joinSign: 'or',
+				dataType: '',
+				propDbName: '',
+			})
+			this.operationArr.push([])
+		},
+		// 删除
+		remove(index) {
+			if (index !== null && index !== undefined && index !== -1) {
+				this.searchFormList.splice(index, 1)
+			} else {
+				if (this.currentRow === null) {
+					this.$alert(this.$t('message.pleaseSelectARow'))
+					return
+				}
+				if (
+						this.currentRow &&
+						this.currentRow.index &&
+						this.currentRow.index !== null &&
+						this.currentRow.index !== undefined
+				) {
+					this.searchFormList.splice(this.currentRow.index, 1)
+				}
+			}
+		},
+		// 实时根据类型改变连接符
+		getOperators(item) {
+			if (item) {
+				if (
+						item.dataType === 'INTEGER' ||
+						item.dataType === 'LONG' ||
+						item.dataType === 'DOUBLE' ||
+						item.dataType === 'FLOAT'
+				) {
+					return [
+						{
+							name: 'GT',
+							label: this.$t('imatrixUIPublicModel.greaterThan'),
+						},
+						{
+							name: 'LT',
+							label: this.$t('imatrixUIPublicModel.lessThan'),
+						},
+						{
+							name: 'EQ',
+							label: this.$t('imatrixUIPublicModel.beEqualTo'),
+						},
+						{
+							name: 'LET',
+							label: this.$t('imatrixUIPublicModel.notGreaterThan'),
+						},
+						{
+							name: 'GET',
+							label: this.$t('imatrixUIPublicModel.notLessThan'),
+						},
+						{
+							name: 'NET',
+							label: this.$t('imatrixUIPublicModel.notEqualTo'),
+						},
+						{
+							name: 'IS_NULL',
+							label: this.$t('imatrixUIPublicModel.isNull'),
+						},
+						{
+							name: 'IS_NOT_NULL',
+							label: this.$t('imatrixUIPublicModel.isNotNull'),
+						},
+					]
+				} else if (item.dataType === 'DATE' || item.dataType === 'TIME') {
+					return [
+						{
+							name: 'GT',
+							label: this.$t('imatrixUIPublicModel.laterThan'),
+						},
+						{
+							name: 'LT',
+							label: this.$t('imatrixUIPublicModel.earlierThan'),
+						},
+						{
+							name: 'EQ',
+							label: this.$t('imatrixUIPublicModel.beEqualTo'),
+						},
+						{
+							name: 'LET',
+							label: this.$t('imatrixUIPublicModel.noLaterThan'),
+						},
+						{
+							name: 'GET',
+							label: this.$t('imatrixUIPublicModel.noEarlierThan'),
+						},
+						{
+							name: 'IS_NULL',
+							label: this.$t('imatrixUIPublicModel.isNull'),
+						},
+						{
+							name: 'IS_NOT_NULL',
+							label: this.$t('imatrixUIPublicModel.isNotNull'),
+						},
+					]
+				} else if (item.dataType === 'TEXT') {
+					return [
+						{
+							name: 'EQ',
+							label: this.$t('imatrixUIPublicModel.beEqualTo'),
+						},
+						{
+							name: 'NET',
+							label: this.$t('imatrixUIPublicModel.notEqualTo'),
+						},
+						{
+							name: 'CONTAIN',
+							label: this.$t('imatrixUIPublicModel.contain'),
+						},
+						{
+							name: 'NOT_CONTAIN',
+							label: this.$t('imatrixUIPublicModel.notIncluded'),
+						},
+						{
+							name: 'IS_NULL',
+							label: this.$t('imatrixUIPublicModel.isNull'),
+						},
+						{
+							name: 'IS_NOT_NULL',
+							label: this.$t('imatrixUIPublicModel.isNotNull'),
+						},
+					]
+				} else {
+					return [
+						{
+							name: 'EQ',
+							label: this.$t('imatrixUIPublicModel.beEqualTo'),
+						},
+						{
+							name: 'NET',
+							label: this.$t('imatrixUIPublicModel.notEqualTo'),
+						},
+						{
+							name: 'IS_NULL',
+							label: this.$t('imatrixUIPublicModel.isNull'),
+						},
+						{
+							name: 'IS_NOT_NULL',
+							label: this.$t('imatrixUIPublicModel.isNotNull'),
+						},
+					]
+				}
+			} else {
+				return [
+					{
+						name: 'EQ',
+						label: this.$t('imatrixUIPublicModel.beEqualTo'),
+					},
+					{
+						name: 'NET',
+						label: this.$t('imatrixUIPublicModel.notEqualTo'),
+					},
+					{
+						name: 'IS_NULL',
+						label: this.$t('imatrixUIPublicModel.isNull'),
+					},
+					{
+						name: 'IS_NOT_NULL',
+						label: this.$t('imatrixUIPublicModel.isNotNull'),
+					},
+				]
+			}
+		},
+	},
+	emits: ['resetForm'],
+}
+</script>
+
+<style scoped>
+.grid-search-form {
+	overflow: auto;
+}
+
+.grid-search-form :deep(.el-form-item) {
+	margin-bottom: 0px;
+}
+
+.grid-search-form :deep(.search-btn) {
+	margin-bottom: 5px;
+	text-align: center;
+}
+
+.grid-search-form :deep(.el-select),
+.grid-search-form :deep(.customComponent) {
+  width: 100%;
+}
+</style>