imatrix-ui 0.2.6-up → 0.2.7-up

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

@@ -1,700 +1,700 @@
-<template>
-  <el-form
-    v-if="searchableColumns.length > 0"
-    ref="searchForm"
-    :model="searchForm"
-    :rules="rules"
-    :label-width="labelWidth"
-    :label-position="query.queryLabelPosition"
-    class="grid-search-form"
-    size="mini"
-  >
-    <table>
-      <tr v-for="r of rowNum" :key="r">
-        <td
-          v-for="n of getColumnNumPerRow(r, searchableColumns.length)"
-          :key="n"
-        >
-          <el-form-item
-            :prop="searchableColumns[fieldNum * (r - 1) + (n - 1)].prop"
-            :label-width="
-              searchableColumns[fieldNum * (r - 1) + (n - 1)].searchLabelWidth
-                ? searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                    .searchLabelWidth
-                : '160px'
-            "
-            :style="{ paddingLeft: '10px', minWidth: '200px' }"
-          >
-            <template v-slot:label>
-              <span
-                v-if="
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].searchLabel &&
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                    .searchLabel !== ''
-                "
-                v-html="
-                  searchableColumns[
-                    fieldNum * (r - 1) + (n - 1)
-                  ].searchLabel.replace(/\\n/g, '</br>')
-                "
-              />
-              <span
-                v-else
-                v-html="
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].label.replace(
-                    /\\n/g,
-                    '</br>'
-                  )
-                "
-              />
-            </template>
-            <el-date-picker
-              v-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
-                  'DATE' ||
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'date'
-              "
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              type="daterange"
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .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(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            />
-
-            <el-date-picker
-              v-else-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'dateTimePicker'
-              "
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              type="datetimerange"
-              :range-separator="$t('imatrixUIPublicModel.to')"
-              unlink-panels
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .searchControlWidth
-              "
-              :start-placeholder="$t('imatrixUIMessage.startDate')"
-              :end-placeholder="$t('imatrixUIMessage.endDate')"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            />
-
-            <el-date-picker
-              v-else-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
-                  'TIME' &&
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'timepicker'
-              "
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              type="datetimerange"
-              :range-separator="$t('imatrixUIPublicModel.to')"
-              unlink-panels
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .searchControlWidth
-              "
-              :start-placeholder="$t('imatrixUIMessage.startDate')"
-              :end-placeholder="$t('imatrixUIMessage.endDate')"
-              value-format="HH:mm:ss"
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            />
-
-            <el-time-picker
-              v-else-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'timepicker' &&
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType !==
-                  'TIME' &&
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType !==
-                  'DATE'
-              "
-              type="fixed-time"
-              :placeholder="$t('imatrixUIMessage.selectTime')"
-              style="width: 100%"
-              value-format="HH:mm:ss"
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            />
-            <el-select
-              v-else-if="
-                (searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType &&
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                    .componentType === 'select') ||
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
-                  'BOOLEAN'
-              "
-              clearable
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .searchControlWidth
-              "
-              :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            >
-              <el-option
-                v-for="item in searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .valueSet"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <el-select
-              v-else-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'multiselect'
-              "
-              clearable
-              multiple
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .searchControlWidth
-              "
-              collapse-tags
-              :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            >
-              <el-option
-                v-for="item in searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .valueSet"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <!--
-                  <el-input-number
-                    v-else-if="searchableColumns[fieldNum*(r-1)+(n-1)].componentType && searchableColumns[fieldNum*(r-1)+(n-1)].componentType==='inputNumber'"
-                    :value="getFormItemValue(searchableColumns[fieldNum*(r-1)+(n-1)].prop)"
-                    @input="setValueToModelProp(searchableColumns[fieldNum*(r-1)+(n-1)].prop,$event)"
-                  /> -->
-
-            <search-form-number
-              v-else-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'inputNumber'
-              "
-              :r="r"
-              :n="n"
-              @setValue="setNumberValue"
-            />
-
-            <el-switch
-              v-else-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'switch'
-              "
-              active-color="#13ce66"
-              inactive-color="#ff4949"
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .searchControlWidth
-              "
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            />
-            <el-slider
-              v-else-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'slider'
-              "
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .searchControlWidth
-              "
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            />
-
-            <el-rate
-              v-else-if="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .componentType === 'rate'
-              "
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .searchControlWidth
-              "
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            />
-            <span
-              v-else-if="
-                customComponent(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                ) === true
-              "
-            >
-              <component
-                :is="
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].componentName
-                "
-                :ref="
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].componentName
-                "
-                class="customComponent"
-                :prop="searchableColumns[fieldNum * (r - 1) + (n - 1)].prop"
-                :value="
-                  getFormItemValue(
-                    searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                  )
-                "
-                @input="
-                  setValueToModelProp(
-                    searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                    $event
-                  )
-                "
-              />
-            </span>
-            <el-input
-              v-else
-              :model-value="
-                getFormItemValue(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
-                )
-              "
-              :style="
-                searchableColumns[fieldNum * (r - 1) + (n - 1)]
-                  .searchControlWidth
-              "
-              @keyup.enter="submitForm('searchForm')"
-              @input="
-                setValueToModelProp(
-                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
-                  $event
-                )
-              "
-            />
-          </el-form-item>
-        </td>
-      </tr>
-    </table>
-
-    <el-form-item class="search-btn">
-      <el-button
-        :loading="loading"
-        type="primary"
-        size="mini"
-        @click="submitForm('searchForm')"
-      >
-        {{ $t('imatrixUIPublicModel.sure') }}
-      </el-button>
-      <el-button
-        :loading="loading"
-        size="mini"
-        @click="resetForm('searchForm')"
-      >
-        {{ $t('imatrixUIPublicModel.reset') }}
-      </el-button>
-    </el-form-item>
-  </el-form>
-</template>
-
-<script>
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-import searchMethods from './search-methods'
-import searchFormNumber from './search-form-number.vue'
-import store from './store'
-// import { isOptionFunction, getSearchObject } from './utils'
-import { addDynamicProp } from './utils'
-import * as Vue from 'vue'
-export default {
-  name: 'SearchForm',
-  components: {
-    searchFormNumber,
-  },
-  props: {
-    columns: {
-      type: Array,
-      default: null,
-    },
-    code: {
-      type: String,
-      default: null,
-    },
-    url: {
-      type: String,
-      default: null,
-    },
-    pagination: {
-      type: Object,
-      default: null,
-    },
-    query: {
-      type: Object,
-      default: null,
-    },
-    searchParam: {
-      type: Object,
-      default: null,
-    },
-    initSearchProps: {
-      type: Array,
-      default: null,
-    },
-    // 九宫格组件的id
-    gridId: {
-      type: String,
-      default: '_nineGrid',
-    },
-  },
-  data() {
-    const storeId = this.code + '~' + this.gridId
-    const customComponentNames = new Set()
-    const gridParams = store.get(storeId)
-    let searchForm = {}
-    if (this.searchParam !== null) {
-      searchForm = JSON.parse(JSON.stringify(this.searchParam))
-      // searchForm = this.searchParam
-    }
-    console.log('searchForm=', searchForm)
-    const searchColumns = this.getSearchableColumns()
-    if (this.initSearchProps === undefined || this.initSearchProps === null) {
-      this.initSearchProps = []
-    }
-    searchColumns.forEach((column) => {
-      if (this.initSearchProps.indexOf(column.prop) < 0) {
-        // 表示没有默认初始查询字段
-        if (column.prop.indexOf('.') > 0) {
-          // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
-          addDynamicProp(searchForm, column.prop)
-        } else {
-          searchForm[column.prop] = null
-        }
-      }
-    })
-
-    const spanNum = this.getSpanNum(storeId)
-    const fieldNum = this.getFieldNumPerRow(storeId)
-    const rowNum = Math.ceil(searchColumns.length / fieldNum)
-    // console.log('searchColumns.length=' + searchColumns.length + ',fieldNum=' + fieldNum + ',rowNum=' + rowNum)
-    // // -2是把
-    // const dateSpanNum = (spanNum - 2) / 2
-
-    return {
-      searchForm,
-      rules: {},
-      searchParams: [],
-      labelWidth:
-        gridParams.options.search && gridParams.options.search.labelWidth
-          ? gridParams.options.search.labelWidth
-          : '80px',
-      customComponentNames: customComponentNames,
-      componentName: '',
-      spanNum: spanNum,
-      fieldNum: fieldNum, // 每行放的字段个数
-      rowNum: rowNum, // 一共有几行
-      loading: false, // 是否正在查询，默认时否
-      storeId, // 缓存的列表id
-    }
-  },
-  computed: {
-    searchableColumns() {
-      return this.getSearchableColumns()
-    },
-  },
-  methods: {
-    ...searchMethods,
-    // 获得每行排放的字段个数
-    getColumnNumPerRow(rowIndex, searchColumnsLength) {
-      let columnNumPerRow = this.fieldNum
-      if (this.fieldNum * rowIndex > searchColumnsLength) {
-        // 表示字段无法填满最后一行
-        columnNumPerRow = searchColumnsLength - this.fieldNum * (rowIndex - 1)
-      }
-      return columnNumPerRow
-    },
-    // 每行放的字段个数
-    getFieldNumPerRow(storeId) {
-      const gridParams = store.get(storeId)
-      // console.log('gridParamsgridParamsgridParamsgridParams', gridParams)
-      return gridParams.options.search && gridParams.options.search.fieldNum
-        ? gridParams.options.search.fieldNum
-        : 4
-    },
-    // 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
-    getSpanNum(storeId) {
-      const fieldNum = this.getFieldNumPerRow(storeId)
-      if (fieldNum === 1) {
-        return 14
-      } else if (fieldNum === 2) {
-        return 10
-      } else if (fieldNum === 3) {
-        return 8
-      } else if (fieldNum === 4) {
-        return 6
-      } else {
-        // 6个字段
-        return 4
-      }
-    },
-    setValueToModelProp(prop, value) {
-      if (prop.indexOf('.') > 0) {
-        const parentOjbect = this.getParentObject(prop)
-        // 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
-        parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
-      } else {
-        this.searchForm[prop] = value
-      }
-    },
-    getSearchableColumns(columns, searchColumns) {
-      // console.log('columnscolumnscolumns', columns)
-      if (!this.customComponentNames) {
-        this.customComponentNames = new Set()
-      }
-      if (!searchColumns) {
-        searchColumns = []
-      }
-      if (!columns) {
-        columns = this.columns
-      }
-      for (let i = 0; i < columns.length; i++) {
-        const column = columns[i]
-        if (
-          column.prop === '$index' ||
-          column.prop === '$selection' ||
-          column.dynamic
-        ) {
-          // 序号和复选框列、动态列 不属于该组件的查询字段
-          continue
-        }
-        if (column.groupHeader) {
-          // 组合表头中子表头的字段查询
-          this.getSearchableColumns(column.children, searchColumns)
-        } else {
-          if (
-            column.queryType === 'normal' &&
-            !column.custom &&
-            column.prop !== ''
-          ) {
-            // 表示是普通查询，且不是占位符列，是查询字段
-            if (
-              typeof column.componentType === 'undefined' ||
-              column.componentType === ''
-            ) {
-              column.componentType = 'input'
-            }
-            if (column.querySetting && column.querySetting !== '') {
-              const querySetting = JSON.parse(column.querySetting)
-              if (querySetting.width) {
-                column.searchControlWidth = 'width:' + querySetting.width + 'px'
-              }
-              if (querySetting.labelWidth) {
-                column.searchLabelWidth = querySetting.labelWidth + 'px'
-              }
-              if (querySetting.label) {
-                column.searchLabel = querySetting.label
-              }
-            }
-            // 行编辑时自定义编辑组件
-            if (column.componentType.indexOf('custom:') >= 0) {
-              column.componentName = column.componentType.substring(
-                column.componentType.indexOf(':') + 1
-              )
-              this.customComponentNames.add(column.componentName)
-            } else {
-              column.componentName = ''
-            }
-            searchColumns.push(column)
-          }
-        }
-      }
-      return searchColumns
-    },
-    customComponent(column) {
-      const gridParams = store.get(this.storeId)
-      if (column.componentName && column.componentName !== '') {
-        this.customComponentNames.add(column.componentName)
-        return true
-      }
-      if (
-        (!column.componentName || column.componentName === '') &&
-        gridParams.options &&
-        gridParams.options.search &&
-        gridParams.options.search.customSearchElements
-      ) {
-        // 定义了自定义查询组件
-        const propSearchEle =
-          gridParams.options.search.customSearchElements[column.prop]
-        // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
-        if (propSearchEle) {
-          column.componentName = 'custom-' + column.prop
-          const component = propSearchEle.call(this, column)
-          // console.log('customComponent-customSearchElements-')
-          if (component) {
-            this.customComponentNames.add(column.componentName)
-            window.$vueApp.component(column.componentName, component)
-            return true
-          }
-        }
-      }
-      return false
-    },
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          //     const searchDemo = [
-          //   { leftBracket: '', propName: 'name', enumName: '', operator: 'contain', propValue: '系统', rightBracket: '', joinSign: 'and', dataType: 'TEXT' },
-          //   { leftBracket: '', propName: 'createdTime', enumName: '', operator: 'eq', startValue: '2019-01-29', endValue: '2019-01-30', propValue: '2019-01-30', rightBracket: '', joinSign: 'and', dataType: 'DATE' },
-          //   { leftBracket: '', propName: 'enabledState', enumName: 'tech.imatrix.enumeration.MenuState', operator: 'eq', propValue: 'ENABLE', rightBracket: '', joinSign: 'and', dataType: 'ENUM' }
-          // ]
-          this.loading = true
-          this.searchParams = this.packageSearchParam()
-          $emit(this, 'search', this.searchParams, true)
-        } else {
-          // console.log('error submit!!')
-          return false
-        }
-      })
-    },
-
-    resetForm(formName) {
-      // console.log('customComponentNames=', this.customComponentNames)
-      for (const componentName of this.customComponentNames) {
-        // 遍历
-        this.$refs[componentName][0].resetField()
-      }
-      // this.$refs[formName].resetFields()
-
-      this.searchableColumns.forEach((column) => {
-        // 表示没有默认初始查询字段
-        if (column.prop.indexOf('.') > 0) {
-          // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
-          addDynamicProp(this.searchForm, column.prop)
-        } else {
-          this.searchForm[column.prop] = null
-        }
-      })
-      $emit(this, 'reset')
-    },
-    setNumberValue(value, r, n) {
-      let itemValue = this.getFormItemValue(
-        this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop
-      )
-      itemValue = value
-      this.setValueToModelProp(
-        this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop,
-        itemValue
-      )
-    },
-  },
-  emits: ['search', 'reset'],
-}
-</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>
+<template>
+  <el-form
+    v-if="searchableColumns.length > 0"
+    ref="searchForm"
+    :model="searchForm"
+    :rules="rules"
+    :label-width="labelWidth"
+    :label-position="query.queryLabelPosition"
+    class="grid-search-form"
+    size="mini"
+  >
+    <table>
+      <tr v-for="r of rowNum" :key="r">
+        <td
+          v-for="n of getColumnNumPerRow(r, searchableColumns.length)"
+          :key="n"
+        >
+          <el-form-item
+            :prop="searchableColumns[fieldNum * (r - 1) + (n - 1)].prop"
+            :label-width="
+              searchableColumns[fieldNum * (r - 1) + (n - 1)].searchLabelWidth
+                ? searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                    .searchLabelWidth
+                : '160px'
+            "
+            :style="{ paddingLeft: '10px', minWidth: '200px' }"
+          >
+            <template v-slot:label>
+              <span
+                v-if="
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].searchLabel &&
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                    .searchLabel !== ''
+                "
+                v-html="
+                  searchableColumns[
+                    fieldNum * (r - 1) + (n - 1)
+                  ].searchLabel.replace(/\\n/g, '</br>')
+                "
+              />
+              <span
+                v-else
+                v-html="
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].label.replace(
+                    /\\n/g,
+                    '</br>'
+                  )
+                "
+              />
+            </template>
+            <el-date-picker
+              v-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
+                  'DATE' ||
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'date'
+              "
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              type="daterange"
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .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(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            />
+
+            <el-date-picker
+              v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'dateTimePicker'
+              "
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              type="datetimerange"
+              :range-separator="$t('imatrixUIPublicModel.to')"
+              unlink-panels
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+              :start-placeholder="$t('imatrixUIMessage.startDate')"
+              :end-placeholder="$t('imatrixUIMessage.endDate')"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            />
+
+            <el-date-picker
+              v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
+                  'TIME' &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'timepicker'
+              "
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              type="datetimerange"
+              :range-separator="$t('imatrixUIPublicModel.to')"
+              unlink-panels
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+              :start-placeholder="$t('imatrixUIMessage.startDate')"
+              :end-placeholder="$t('imatrixUIMessage.endDate')"
+              value-format="HH:mm:ss"
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            />
+
+            <el-time-picker
+              v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'timepicker' &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType !==
+                  'TIME' &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType !==
+                  'DATE'
+              "
+              type="fixed-time"
+              :placeholder="$t('imatrixUIMessage.selectTime')"
+              style="width: 100%"
+              value-format="HH:mm:ss"
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            />
+            <el-select
+              v-else-if="
+                (searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType &&
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                    .componentType === 'select') ||
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].dataType ===
+                  'BOOLEAN'
+              "
+              clearable
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+              :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            >
+              <el-option
+                v-for="item in searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .valueSet"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-select
+              v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'multiselect'
+              "
+              clearable
+              multiple
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+              collapse-tags
+              :placeholder="$t('imatrixUIMessage.pleaseSelect')"
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            >
+              <el-option
+                v-for="item in searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .valueSet"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <!--
+                  <el-input-number
+                    v-else-if="searchableColumns[fieldNum*(r-1)+(n-1)].componentType && searchableColumns[fieldNum*(r-1)+(n-1)].componentType==='inputNumber'"
+                    :value="getFormItemValue(searchableColumns[fieldNum*(r-1)+(n-1)].prop)"
+                    @input="setValueToModelProp(searchableColumns[fieldNum*(r-1)+(n-1)].prop,$event)"
+                  /> -->
+
+            <search-form-number
+              v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'inputNumber'
+              "
+              :r="r"
+              :n="n"
+              @setValue="setNumberValue"
+            />
+
+            <el-switch
+              v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'switch'
+              "
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            />
+            <el-slider
+              v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'slider'
+              "
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            />
+
+            <el-rate
+              v-else-if="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)].componentType &&
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .componentType === 'rate'
+              "
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            />
+            <span
+              v-else-if="
+                customComponent(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                ) === true
+              "
+            >
+              <component
+                :is="
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].componentName
+                "
+                :ref="
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].componentName
+                "
+                class="customComponent"
+                :prop="searchableColumns[fieldNum * (r - 1) + (n - 1)].prop"
+                :value="
+                  getFormItemValue(
+                    searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                  )
+                "
+                @input="
+                  setValueToModelProp(
+                    searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                    $event
+                  )
+                "
+              />
+            </span>
+            <el-input
+              v-else
+              :model-value="
+                getFormItemValue(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop
+                )
+              "
+              :style="
+                searchableColumns[fieldNum * (r - 1) + (n - 1)]
+                  .searchControlWidth
+              "
+              @keyup.enter="submitForm('searchForm')"
+              @input="
+                setValueToModelProp(
+                  searchableColumns[fieldNum * (r - 1) + (n - 1)].prop,
+                  $event
+                )
+              "
+            />
+          </el-form-item>
+        </td>
+      </tr>
+    </table>
+
+    <el-form-item class="search-btn">
+      <el-button
+        :loading="loading"
+        type="primary"
+        size="mini"
+        @click="submitForm('searchForm')"
+      >
+        {{ $t('imatrixUIPublicModel.sure') }}
+      </el-button>
+      <el-button
+        :loading="loading"
+        size="mini"
+        @click="resetForm('searchForm')"
+      >
+        {{ $t('imatrixUIPublicModel.reset') }}
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+import searchFormNumber from './search-form-number.vue'
+import store from './store'
+// import { isOptionFunction, getSearchObject } from './utils'
+import { addDynamicProp } from './utils'
+import * as Vue from 'vue'
+export default {
+  name: 'SearchForm',
+  components: {
+    searchFormNumber,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: null,
+    },
+    code: {
+      type: String,
+      default: null,
+    },
+    url: {
+      type: String,
+      default: null,
+    },
+    pagination: {
+      type: Object,
+      default: null,
+    },
+    query: {
+      type: Object,
+      default: null,
+    },
+    searchParam: {
+      type: Object,
+      default: null,
+    },
+    initSearchProps: {
+      type: Array,
+      default: null,
+    },
+    // 九宫格组件的id
+    gridId: {
+      type: String,
+      default: '_nineGrid',
+    },
+  },
+  data() {
+    const storeId = this.code + '~' + this.gridId
+    const customComponentNames = new Set()
+    const gridParams = store.get(storeId)
+    let searchForm = {}
+    if (this.searchParam !== null) {
+      searchForm = JSON.parse(JSON.stringify(this.searchParam))
+      // searchForm = this.searchParam
+    }
+    console.log('searchForm=', searchForm)
+    const searchColumns = this.getSearchableColumns()
+    if (this.initSearchProps === undefined || this.initSearchProps === null) {
+      this.initSearchProps = []
+    }
+    searchColumns.forEach((column) => {
+      if (this.initSearchProps.indexOf(column.prop) < 0) {
+        // 表示没有默认初始查询字段
+        if (column.prop.indexOf('.') > 0) {
+          // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+          addDynamicProp(searchForm, column.prop)
+        } else {
+          searchForm[column.prop] = null
+        }
+      }
+    })
+
+    const spanNum = this.getSpanNum(storeId)
+    const fieldNum = this.getFieldNumPerRow(storeId)
+    const rowNum = Math.ceil(searchColumns.length / fieldNum)
+    // console.log('searchColumns.length=' + searchColumns.length + ',fieldNum=' + fieldNum + ',rowNum=' + rowNum)
+    // // -2是把
+    // const dateSpanNum = (spanNum - 2) / 2
+
+    return {
+      searchForm,
+      rules: {},
+      searchParams: [],
+      labelWidth:
+        gridParams.options.search && gridParams.options.search.labelWidth
+          ? gridParams.options.search.labelWidth
+          : '80px',
+      customComponentNames: customComponentNames,
+      componentName: '',
+      spanNum: spanNum,
+      fieldNum: fieldNum, // 每行放的字段个数
+      rowNum: rowNum, // 一共有几行
+      loading: false, // 是否正在查询，默认时否
+      storeId, // 缓存的列表id
+    }
+  },
+  computed: {
+    searchableColumns() {
+      return this.getSearchableColumns()
+    },
+  },
+  methods: {
+    ...searchMethods,
+    // 获得每行排放的字段个数
+    getColumnNumPerRow(rowIndex, searchColumnsLength) {
+      let columnNumPerRow = this.fieldNum
+      if (this.fieldNum * rowIndex > searchColumnsLength) {
+        // 表示字段无法填满最后一行
+        columnNumPerRow = searchColumnsLength - this.fieldNum * (rowIndex - 1)
+      }
+      return columnNumPerRow
+    },
+    // 每行放的字段个数
+    getFieldNumPerRow(storeId) {
+      const gridParams = store.get(storeId)
+      // console.log('gridParamsgridParamsgridParamsgridParams', gridParams)
+      return gridParams.options.search && gridParams.options.search.fieldNum
+        ? gridParams.options.search.fieldNum
+        : 4
+    },
+    // 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
+    getSpanNum(storeId) {
+      const fieldNum = this.getFieldNumPerRow(storeId)
+      if (fieldNum === 1) {
+        return 14
+      } else if (fieldNum === 2) {
+        return 10
+      } else if (fieldNum === 3) {
+        return 8
+      } else if (fieldNum === 4) {
+        return 6
+      } else {
+        // 6个字段
+        return 4
+      }
+    },
+    setValueToModelProp(prop, value) {
+      if (prop.indexOf('.') > 0) {
+        const parentOjbect = this.getParentObject(prop)
+        // 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
+        parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
+      } else {
+        this.searchForm[prop] = value
+      }
+    },
+    getSearchableColumns(columns, searchColumns) {
+      // console.log('columnscolumnscolumns', columns)
+      if (!this.customComponentNames) {
+        this.customComponentNames = new Set()
+      }
+      if (!searchColumns) {
+        searchColumns = []
+      }
+      if (!columns) {
+        columns = this.columns
+      }
+      for (let i = 0; i < columns.length; i++) {
+        const column = columns[i]
+        if (
+          column.prop === '$index' ||
+          column.prop === '$selection' ||
+          column.dynamic
+        ) {
+          // 序号和复选框列、动态列 不属于该组件的查询字段
+          continue
+        }
+        if (column.groupHeader) {
+          // 组合表头中子表头的字段查询
+          this.getSearchableColumns(column.children, searchColumns)
+        } else {
+          if (
+            column.queryType === 'normal' &&
+            !column.custom &&
+            column.prop !== ''
+          ) {
+            // 表示是普通查询，且不是占位符列，是查询字段
+            if (
+              typeof column.componentType === 'undefined' ||
+              column.componentType === ''
+            ) {
+              column.componentType = 'input'
+            }
+            if (column.querySetting && column.querySetting !== '') {
+              const querySetting = JSON.parse(column.querySetting)
+              if (querySetting.width) {
+                column.searchControlWidth = 'width:' + querySetting.width + 'px'
+              }
+              if (querySetting.labelWidth) {
+                column.searchLabelWidth = querySetting.labelWidth + 'px'
+              }
+              if (querySetting.label) {
+                column.searchLabel = querySetting.label
+              }
+            }
+            // 行编辑时自定义编辑组件
+            if (column.componentType.indexOf('custom:') >= 0) {
+              column.componentName = column.componentType.substring(
+                column.componentType.indexOf(':') + 1
+              )
+              this.customComponentNames.add(column.componentName)
+            } else {
+              column.componentName = ''
+            }
+            searchColumns.push(column)
+          }
+        }
+      }
+      return searchColumns
+    },
+    customComponent(column) {
+      const gridParams = store.get(this.storeId)
+      if (column.componentName && column.componentName !== '') {
+        this.customComponentNames.add(column.componentName)
+        return true
+      }
+      if (
+        (!column.componentName || column.componentName === '') &&
+        gridParams.options &&
+        gridParams.options.search &&
+        gridParams.options.search.customSearchElements
+      ) {
+        // 定义了自定义查询组件
+        const propSearchEle =
+          gridParams.options.search.customSearchElements[column.prop]
+        // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
+        if (propSearchEle) {
+          column.componentName = 'custom-' + column.prop
+          const component = propSearchEle.call(this, column)
+          // console.log('customComponent-customSearchElements-')
+          if (component) {
+            this.customComponentNames.add(column.componentName)
+            window.$vueApp.component(column.componentName, component)
+            return true
+          }
+        }
+      }
+      return false
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          //     const searchDemo = [
+          //   { leftBracket: '', propName: 'name', enumName: '', operator: 'contain', propValue: '系统', rightBracket: '', joinSign: 'and', dataType: 'TEXT' },
+          //   { leftBracket: '', propName: 'createdTime', enumName: '', operator: 'eq', startValue: '2019-01-29', endValue: '2019-01-30', propValue: '2019-01-30', rightBracket: '', joinSign: 'and', dataType: 'DATE' },
+          //   { leftBracket: '', propName: 'enabledState', enumName: 'tech.imatrix.enumeration.MenuState', operator: 'eq', propValue: 'ENABLE', rightBracket: '', joinSign: 'and', dataType: 'ENUM' }
+          // ]
+          this.loading = true
+          this.searchParams = this.packageSearchParam()
+          $emit(this, 'search', this.searchParams, true)
+        } else {
+          // console.log('error submit!!')
+          return false
+        }
+      })
+    },
+
+    resetForm(formName) {
+      // console.log('customComponentNames=', this.customComponentNames)
+      for (const componentName of this.customComponentNames) {
+        // 遍历
+        this.$refs[componentName][0].resetField()
+      }
+      // this.$refs[formName].resetFields()
+
+      this.searchableColumns.forEach((column) => {
+        // 表示没有默认初始查询字段
+        if (column.prop.indexOf('.') > 0) {
+          // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+          addDynamicProp(this.searchForm, column.prop)
+        } else {
+          this.searchForm[column.prop] = null
+        }
+      })
+      $emit(this, 'reset')
+    },
+    setNumberValue(value, r, n) {
+      let itemValue = this.getFormItemValue(
+        this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop
+      )
+      itemValue = value
+      this.setValueToModelProp(
+        this.searchableColumns[this.fieldNum * (r - 1) + (n - 1)].prop,
+        itemValue
+      )
+    },
+  },
+  emits: ['search', 'reset'],
+}
+</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>