imatrix-ui 0.0.15 → 0.1.1-up

package/components/super-grid/search-form-advancedQuery.vue

@@ -0,0 +1,820 @@
+<template>
+  <div v-if="formFlag">
+    <!-- <el-row style="padding-bottom: 8px">
+                <el-button type="primary" size="mini" plain icon="el-icon-circle-plus-outline" @click="add">
+                  {{ $t('imatrixUIPublicModel.add') }}
+                </el-button>
+                <el-button type="primary" size="mini" 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
+      style="width: 100%"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column
+        :label="$t('imatrixUIPublicModel.edit')"
+        fixed="left"
+        align="center"
+        width="80"
+      >
+        <template v-slot="scope">
+          <el-icon><el-icon-circle-plus-outline /></el-icon>
+          <el-icon><el-icon-remove-outline /></el-icon>
+        </template>
+      </el-table-column>
+      <el-table-column prop="leftBracket" label="(" width="90">
+        <template v-slot="scope">
+          <el-select
+            v-model="scope.row.leftBracket"
+            size="small"
+            clearable
+            @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"
+            size="small"
+            clearable
+            filterable
+            @focus="selectRow(scope.row)"
+            @change="changeFieldName(scope.$index)"
+          >
+            <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"
+            size="small"
+            clearable
+            @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"
+            type="daterange"
+            size="small"
+            :style="scope.row.searchControlWidth"
+            :range-separator="$t('imatrixUIPublicModel.to')"
+            unlink-panels
+            :start-placeholder="$t('imatrixUIMessage.startDate')"
+            :end-placeholder="$t('imatrixUIMessage.endDate')"
+            value-format="yyyy-MM-dd"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          />
+
+          <el-date-picker
+            v-else-if="scope.row.componentType === 'dateTimePicker'"
+            v-model="scope.row.value"
+            type="datetimerange"
+            :range-separator="$t('imatrixUIPublicModel.to')"
+            unlink-panels
+            size="small"
+            :style="scope.row.searchControlWidth"
+            :start-placeholder="$t('imatrixUIMessage.startDate')"
+            :end-placeholder="$t('imatrixUIMessage.endDate')"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          />
+
+          <el-date-picker
+            v-else-if="
+              scope.row.dataType === 'TIME' &&
+              scope.row.componentType === 'timepicker'
+            "
+            v-model="scope.row.value"
+            type="datetimerange"
+            :range-separator="$t('imatrixUIPublicModel.to')"
+            unlink-panels
+            size="small"
+            :style="scope.row.searchControlWidth"
+            :start-placeholder="$t('imatrixUIMessage.startDate')"
+            :end-placeholder="$t('imatrixUIMessage.endDate')"
+            value-format="HH:mm:ss"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          />
+
+          <el-time-picker
+            v-else-if="
+              scope.row.componentType === 'timepicker' &&
+              scope.row.dataType !== 'TIME' &&
+              scope.row.dataType !== 'DATE'
+            "
+            v-model="scope.row.value"
+            type="fixed-time"
+            size="small"
+            :placeholder="$t('imatrixUIMessage.selectTime')"
+            style="width: 100%"
+            value-format="HH:mm:ss"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          />
+
+          <organization-input
+            v-else-if="componentTypeTypeIsTree(scope.row.componentType)"
+            v-model:value="scope.row.value"
+            :fields="getTreeFields(scope.row.orgTreeSet)"
+            :models="searchForm"
+            :size="small"
+            :multiple="getTreeIsMultiTree(scope.row.componentType)"
+            :tree-type="getTreeType(scope.row.componentType)"
+            @setValue="organizationInputEvent"
+            @clear="clearOrganizationInputEvent"
+            @focus="selectRow(scope.row)"
+          />
+
+          <el-select
+            v-else-if="
+              ((scope.row.componentType &&
+                scope.row.componentType === 'select') ||
+                scope.row.dataType === 'BOOLEAN') &&
+              !isDynamicDataSourceSource(scope.row)
+            "
+            v-model="scope.row.value"
+            clearable
+            :style="scope.row.searchControlWidth"
+            :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+            size="small"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          >
+            <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"
+            clearable
+            multiple
+            :style="scope.row.searchControlWidth"
+            collapse-tags
+            size="small"
+            :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          >
+            <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)
+            "
+            :value="scope.row.value"
+            :base-props="{
+              multiple:
+                scope.row.componentType === 'multiselect' ? true : false,
+            }"
+            :entity="scope.row"
+            :options="getDynamicDataSourceOptions(scope.row)"
+            :table-name="tableName"
+            :is-join-table="isJoinTable"
+            :list-code="code"
+            @input="setValueToModelProp(scope.$index, $event)"
+          />
+          <!--<search-form-number-->
+          <!--  v-else-if="-->
+          <!--    scope.row.componentType &&-->
+          <!--    scope.row.componentType === 'inputNumber'-->
+          <!--  "-->
+          <!--  :r="r"-->
+          <!--  :n="n"-->
+          <!--  size="small"-->
+          <!--  @setValue="setNumberValue"-->
+          <!--  @focus="selectRow(scope.row)"-->
+          <!--/>-->
+
+          <el-switch
+            v-else-if="
+              scope.row.componentType && scope.row.componentType === 'switch'
+            "
+            v-model="scope.row.value"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            size="small"
+            :style="scope.row.searchControlWidth"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          />
+          <el-slider
+            v-else-if="
+              scope.row.componentType && scope.row.componentType === 'slider'
+            "
+            v-model="scope.row.value"
+            size="small"
+            :style="scope.row.searchControlWidth"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          />
+
+          <el-rate
+            v-else-if="
+              scope.row.componentType && scope.row.componentType === 'rate'
+            "
+            v-model="scope.row.value"
+            :style="scope.row.searchControlWidth"
+            size="small"
+            @input="setValueToModelProp(scope.$index, $event)"
+            @focus="selectRow(scope.row)"
+          />
+          <span v-else-if="customComponent(scope.row.prop) === true">
+            <component
+              :is="scope.row.componentName"
+              :ref="scope.row.componentName"
+              v-model:value="scope.row.value"
+              class="customComponent"
+              :prop="scope.row.prop"
+              :row="scope.row"
+              @input="
+                setValueToModelProp(
+                  scope.$index,
+                  $event,
+                  scope.row.componentName
+                )
+              "
+              @focus="selectRow(scope.row)"
+            />
+          </span>
+          <el-input
+            v-else
+            v-model="scope.row.value"
+            size="small"
+            :style="scope.row.searchControlWidth"
+            @focus="selectRow(scope.row)"
+            @keyup.enter="submitForm('searchForm')"
+            @input="setValueToModelProp(scope.$index, $event)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="rightBracket" label=")" width="90">
+        <template v-slot="scope">
+          <el-select
+            v-model="scope.row.rightBracket"
+            size="small"
+            clearable
+            @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"
+            size="small"
+            clearable
+            @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"
+            size="small"
+            clearable
+            @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 {
+  CirclePlusOutline as ElIconCirclePlusOutline,
+  RemoveOutline as ElIconRemoveOutline,
+} from '@element-plus/icons'
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+// import searchFormNumber from './search-form-number'
+// import { isOptionFunction, getSearchObject } from './utils'
+import store from './store'
+import SearchConditionInput from './search-condition-input'
+import SearchConditionList from './search-condition-list'
+import { getDynamicDataSourceOptions, isDynamicDataSourceSource } from './utils'
+import * as Vue from 'vue'
+export default {
+  components: {
+    // searchFormNumber,
+    SearchConditionInput,
+    SearchConditionList,
+    ElIconCirclePlusOutline,
+    ElIconRemoveOutline,
+  },
+  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) {
+      return getDynamicDataSourceOptions(column, this.isSql)
+    },
+    // 值设置是否是动态数据源类型的数据源
+    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 >>> .el-form-item {
+  margin-bottom: 0px;
+}
+.grid-search-form >>> .search-btn {
+  margin-bottom: 5px;
+  text-align: center;
+}
+.grid-search-form >>> .el-select,
+.grid-search-form >>> .customComponent {
+  width: 100%;
+}
+</style>