imatrix-ui 0.2.5-up → 0.2.7-up

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

@@ -1,762 +1,762 @@
-<template>
-  <div>
-    <search-condition-list
-      v-if="searchConditions.length > 0"
-      ref="searchConditionList"
-      :search-type="searchType"
-      :search-conditions="searchConditions"
-      @remove-condition="removeCondition"
-      @select-condition="selectCondition"
-    />
-    <search-form-ordinarySearch
-      v-if="searchType === 'normal'"
-      ref="searchFormOrdinarySearch"
-      :searchable-columns="searchableColumns"
-      :search-form="searchForm"
-      :field-num="fieldNum"
-      :label-width="labelWidth"
-      :query="query"
-      :code="code"
-      :row-num="rowNum"
-      :span-num="spanNum"
-      :rules="rules"
-      :is-sql="isSql"
-      :load-complete-query="loadCompleteQuery"
-      @submit-form="submitForm('searchForm')"
-      @reset-form="resetForm('searchForm')"
-      @save-condition="saveCondition()"
-      @open-fold="openFold"
-    />
-    <search-form-advancedQuery
-      v-if="searchType === 'advanced'"
-      ref="searchFormAdvancedQuery"
-      style="padding-bottom: 10px"
-      :code="code"
-      :searchable-columns="advancedQueryColumns"
-      :search-form-list="searchFormList"
-      :prop-map="propMap"
-      :is-sql="isSql"
-      @resetForm="resetSearchFormList"
-    />
-    <div
-      v-if="searchType === 'advanced'"
-      style="padding-top: 10px; padding-bottom: 10px; text-align: center"
-    >
-      <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-button size="mini" @click="saveCondition">
-        {{ $t('superGrid.saveCondition') }}
-      </el-button>
-      <span
-        v-if="
-          advancedQuery !== null &&
-          advancedQuery !== undefined &&
-          advancedQuery === true &&
-          normalQuery !== null &&
-          normalQuery !== undefined &&
-          normalQuery === true
-        "
-        style="margin-left: 10px"
-      >
-        <el-button
-          v-if="searchType === 'advanced'"
-          size="mini"
-          @click="searchType = 'normal'"
-        >
-          {{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
-        </el-button>
-        <el-button
-          v-if="searchType === 'normal'"
-          size="mini"
-          @click="searchType = 'advanced'"
-        >
-          {{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
-        </el-button>
-      </span>
-    </div>
-    <search-condition-input
-      v-if="isShowSearchCondition"
-      @close="saveConditionValue"
-    />
-  </div>
-</template>
-
-<script>
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-import searchMethods from './search-methods'
-// import searchFormNumber from './search-form-number.vue'
-import searchFormOrdinarySearch from './search-form-ordinarySearch.vue'
-// import searchFormAdvancedQuery from './search-form-advancedQuery'
-import store from './store'
-// import { isOptionFunction, getSearchObject } from './utils'
-import { addDynamicProp, addDynamicPropDateSection } from './utils'
-import * as Vue from 'vue'
-import SearchConditionInput from './search-condition-input.vue'
-import SearchConditionList from './search-condition-list.vue'
-export default {
-  name: 'SearchForm',
-  components: {
-    // searchFormNumber,
-    SearchConditionInput,
-    SearchConditionList,
-    searchFormOrdinarySearch,
-    // searchFormAdvancedQuery
-  },
-  provide() {
-    return {
-      getListToolbarFormData: () => ({
-        listToolbarFormData: this.listToolbarFormData,
-      }),
-    }
-  },
-  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,
-    },
-    isSql: {
-      type: Boolean,
-      default: false,
-    },
-    searchFormInfo: {
-      type: Object,
-      default: () => {
-        return {}
-      },
-    },
-    loadCompleteQuery: {
-      type: Boolean,
-      default: false,
-    },
-    listToolbarFormData: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    const customComponentNames = new Set()
-    const gridParams = store.get(this.code)
-    const propMap = {}
-    let searchForm = {}
-    if (this.searchParam !== null) {
-      searchForm = JSON.parse(JSON.stringify(this.searchParam))
-    }
-    const searchColumns = this.getSearchableColumns(null, null, propMap)
-    if (this.initSearchProps === undefined || this.initSearchProps === null) {
-      this.initSearchProps = []
-    }
-    console.log('searchForm=', searchColumns)
-    searchColumns.forEach((column) => {
-      // propMap[column.prop] = column
-      if (this.initSearchProps.indexOf(column.prop) < 0) {
-        // 表示没有默认初始查询字段
-        if (column.prop && column.prop.indexOf('.') > 0) {
-          if (column.componentType === 'dateSection') {
-            addDynamicPropDateSection(searchForm, column.prop)
-          } else {
-            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
-            addDynamicProp(searchForm, column.prop)
-          }
-        } else {
-          if (column.componentType === 'dateSection') {
-            searchForm[column.prop] = [new Date(), new Date()]
-          } else if (column.componentType === 'yearRange') {
-            searchForm[column.prop] = ['', '']
-          } else {
-            searchForm[column.prop] = null
-          }
-          this.setDefaultQueryValue(column, searchForm)
-        }
-      }
-    })
-    const spanNum = this.getSpanNum()
-    const fieldNum = this.getFieldNumPerRow()
-    const rowNum = Math.ceil(searchColumns.length / fieldNum)
-    console.log('rowNumrowNumrowNumrowNum', rowNum)
-    console.log(searchColumns)
-    console.log(fieldNum)
-    const advancedQuery = this.query.advancedQuery
-    const normalQuery = this.query.normalQuery
-    // 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, // 是否正在查询，默认时否
-      isShowSearchCondition: false,
-      searchConditions: [],
-      propMap,
-      advancedQuery,
-      normalQuery,
-      searchFormList: [],
-      searchType: null,
-    }
-  },
-  computed: {
-    searchableColumns() {
-      return this.getSearchableColumns()
-    },
-    advancedQueryColumns() {
-      return this.getAdvancedQueryColumns()
-    },
-  },
-  watch: {
-    searchForm: {
-      deep: true,
-      handler(val) {
-        this.searchFormInfo['data'] = val
-      },
-    },
-  },
-  created() {
-    this.listSearchConditions()
-    if (this.normalQuery) {
-      this.searchType = 'normal'
-    } else if (this.advancedQuery) {
-      this.searchType = 'advanced'
-    }
-  },
-  methods: {
-    ...searchMethods,
-    // 每行放的字段个数
-    getFieldNumPerRow() {
-      const gridParams = store.get(this.code)
-      return gridParams.options.search && gridParams.options.search.fieldNum
-        ? gridParams.options.search.fieldNum
-        : 3
-    },
-    // 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
-    getSpanNum() {
-      const fieldNum = this.getFieldNumPerRow()
-      if (fieldNum === 1) {
-        return 22
-      } 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, componentName, index) {
-      if (prop && prop.indexOf('.') > 0) {
-        const parentOjbect = this.getParentObject(prop)
-        // 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
-        if (index != null && index !== undefined) {
-          // parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
-          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
-        } else {
-          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
-        }
-      } else {
-        if (index != null && index !== undefined) {
-          this.searchForm[prop][index] = value
-        } else {
-          this.searchForm[prop] = value
-        }
-      }
-    },
-    getAdvancedQueryColumns(columns, searchColumns, propMap) {
-      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 (propMap) {
-          propMap[column.prop] = column
-        }
-        if (
-          column.prop === '$index' ||
-          column.prop === '$selection' ||
-          column.dynamic
-        ) {
-          // 序号和复选框列、动态列 不属于该组件的查询字段
-          continue
-        }
-        if (column.groupHeader) {
-          // 组合表头中子表头的字段查询
-          this.getSearchableColumns(column.children, searchColumns, propMap)
-        } else {
-          if (
-            column.queryType === 'advanced' &&
-            !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 &&
-              column.componentType.indexOf('custom:') >= 0
-            ) {
-              column.componentName = column.componentType.substring(
-                column.componentType.indexOf(':') + 1
-              )
-              this.customComponentNames.add(column.componentName)
-            } else {
-              column.componentName = ''
-            }
-            // this.$set(this.propMap, column.prop, column)
-            // this.propMap[column.prop] = column
-            searchColumns.push(column)
-          }
-        }
-      }
-      return searchColumns
-    },
-    getSearchableColumns(columns, searchColumns, propMap) {
-      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 (propMap) {
-          propMap[column.prop] = column
-        }
-        if (
-          column.prop === '$index' ||
-          column.prop === '$selection' ||
-          column.dynamic
-        ) {
-          // 序号和复选框列、动态列 不属于该组件的查询字段
-          continue
-        }
-        if (column.groupHeader) {
-          // 组合表头中子表头的字段查询
-          this.getSearchableColumns(column.children, searchColumns, propMap)
-        } 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 &&
-              column.componentType.indexOf('custom:') >= 0
-            ) {
-              column.componentName = column.componentType.substring(
-                column.componentType.indexOf(':') + 1
-              )
-              this.customComponentNames.add(column.componentName)
-            } else {
-              column.componentName = ''
-            }
-            // this.$set(this.propMap, column.prop, column)
-            // this.propMap[column.prop] = column
-            searchColumns.push(column)
-          }
-        }
-      }
-      return searchColumns
-    },
-    customComponent(column) {
-      const gridParams = store.get(this.code)
-      if (column.componentName && column.componentName !== '') {
-        this.customComponentNames.add(column.componentName)
-        return true
-      }
-      if (
-        (!column.componentName || column.componentName === '') &&
-        gridParams.options &&
-        gridParams.options.search &&
-        gridParams.options.search.customSearchElements
-      ) {
-        // 定义了自定义查询组件
-        const propSearchEle =
-          gridParams.options.search.customSearchElements[column.prop]
-        // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
-        if (propSearchEle) {
-          column.componentName = 'custom-' + column.prop
-          const component = propSearchEle.call(this, column)
-          // console.log('customComponent-customSearchElements-')
-          if (component) {
-            this.customComponentNames.add(column.componentName)
-            window.$vueApp.component(column.componentName, component)
-            return true
-          }
-        }
-      }
-      return false
-    },
-    submitForm() {
-      if (this.searchType === 'normal') {
-        this.$refs.searchFormOrdinarySearch.validateForm().then((valid) => {
-          if (valid) {
-            // this.loading = true
-            this.searchParams = this.packageSearchParam()
-            $emit(this, 'search', this.searchParams)
-          } else {
-            return false
-          }
-        })
-      } else if (this.searchType === 'advanced') {
-        this.$refs.searchFormAdvancedQuery.validateForm().then((valid) => {
-          if (valid) {
-            this.loading = true
-            this.searchParams = this.packageSearchParam()
-            $emit(this, 'search', this.searchParams)
-          } else {
-            return false
-          }
-        })
-      }
-    },
-    resetForm() {
-      if (this.$refs.searchConditionList) {
-        this.$refs.searchConditionList.editConditionId = null
-      }
-      if (this.searchType === 'normal') {
-        this.$refs.searchFormOrdinarySearch.resetForm()
-      } else if (this.searchType === 'advanced') {
-        this.$refs.searchFormAdvancedQuery.resetForm()
-        $emit(this, 'reset')
-      }
-      // 子组件重置完成后调用reset方法 同步执行
-      // this.$emit('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
-      )
-    },
-    listSearchConditions() {
-      return new Promise((resolve, reject) => {
-        this.listSearchCondition(this.code)
-          .then((conditions) => {
-            this.searchConditions = conditions
-            resolve(conditions)
-          })
-          .catch((error) => {
-            reject(error)
-          })
-      })
-    },
-    saveCondition() {
-      const searchParams = this.packageSearchParam()
-      if (!searchParams || searchParams.length === 0) {
-        this.$message({
-          type: 'warning',
-          message: this.$t('imatrixUIMessage.pleaseInputSearchCondition'),
-          showClose: true,
-        })
-        return
-      }
-      this.isShowSearchCondition = true
-    },
-    saveConditionValue(conditionName) {
-      if (conditionName) {
-        let searchParams
-        if (
-          this.searchType === 'normal' ||
-          this.searchType === '' ||
-          this.searchType === null ||
-          this.searchType === undefined
-        ) {
-          searchParams = this.packageSearchParam()
-        } else {
-          searchParams = this.searchFormList
-        }
-        const condition = {
-          listCode: this.code,
-          queryType:
-            this.searchType === 'normal' ||
-            this.searchType === '' ||
-            this.searchType === null ||
-            this.searchType === undefined
-              ? 'FIXED'
-              : 'CUSTOM',
-          name: conditionName,
-          queryCondition: JSON.stringify(searchParams),
-        }
-        this.saveSearchCondition(condition).then((condition) => {
-          this.$message({
-            type: 'success',
-            message: this.$t('imatrixUIMessage.saveSuccessfully'),
-            showClose: true,
-          })
-          this.isShowSearchCondition = false
-          this.listSearchConditions().then(() => {
-            if (this.$refs.searchConditionList) {
-              // 选中刚刚保存的条件
-              this.$refs.searchConditionList.editConditionId = condition.id + ''
-            }
-            // 查询条件对应的数据
-            this.selectCondition(condition.id)
-          })
-        })
-      }
-      this.isShowSearchCondition = false
-    },
-    removeCondition(conditionId) {
-      if (conditionId) {
-        this.$confirm(
-          this.$t('imatrixUIMessage.whetherToConfirmDeletion'),
-          this.$t('imatrixUIMessage.tips'),
-          {
-            confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
-            cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
-            type: 'warning',
-          }
-        ).then(() => {
-          this.removeSearchCondition(conditionId).then(() => {
-            this.$message({
-              type: 'success',
-              message: this.$t('superGrid.deleteSuccessful'),
-              showClose: true,
-            })
-            this.listSearchConditions()
-          })
-        })
-      }
-    },
-    selectCondition(conditionId) {
-      if (conditionId) {
-        this.getSearchCondition(conditionId).then((searchCondition) => {
-          if (searchCondition) {
-            const queryCondition = searchCondition.queryCondition
-            if (queryCondition) {
-              if (
-                this.searchType === 'normal' ||
-                this.searchType === '' ||
-                this.searchType === null ||
-                this.searchType === undefined
-              ) {
-                const searchParams = JSON.parse(queryCondition)
-                const searchForm = this.packageSearchForm(searchParams)
-                if (searchForm) {
-                  this.searchForm = searchForm
-                }
-                // 查询数据
-                this.loading = true
-                $emit(this, 'search', searchParams)
-              } else {
-                this.searchFormList = JSON.parse(queryCondition)
-                // 查询数据
-                this.loading = true
-                $emit(this, 'search', this.packageSearchParam())
-              }
-            }
-          }
-        })
-      }
-    },
-    // 封装searchForm
-    packageSearchForm(searchFormArr) {
-      if (searchFormArr && searchFormArr.length > 0) {
-        const searchForm = {}
-        const initSearchProps = []
-        searchFormArr.forEach((item) => {
-          // 获得的是"isDeleted"
-          let prop = item.propName
-          // 获得的是“deleted”
-          const columnProp = item.columnProp
-          const dataType = item.dataType
-          if (dataType && dataType === 'BOOLEAN' && columnProp) {
-            prop = columnProp
-          }
-          if (initSearchProps.indexOf(prop) === -1) {
-            initSearchProps.push(prop)
-          }
-          const propValue = item.propValue
-          if (prop && prop.indexOf('.') > 0) {
-            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
-            addDynamicProp(searchForm, prop, propValue)
-          } else {
-            let isRangeQueryValue = false
-            if (dataType && (dataType === 'DATE' || dataType === 'TIME')) {
-              if (item.startValue && item.endValue) {
-                isRangeQueryValue = true
-              }
-            }
-            if (isRangeQueryValue) {
-              searchForm[prop] = [
-                new Date(item.startValue),
-                new Date(item.endValue),
-              ]
-            } else {
-              if (searchForm[prop]) {
-                if (searchForm[prop] instanceof Array) {
-                  searchForm[prop].push(propValue)
-                } else {
-                  searchForm[prop] = [searchForm[prop], propValue]
-                }
-              } else {
-                searchForm[prop] = propValue
-              }
-            }
-          }
-        })
-
-        this.searchableColumns.forEach((column) => {
-          if (initSearchProps) {
-            if (initSearchProps.indexOf(column.prop) < 0) {
-              // 表示没有默认初始查询字段
-              if (column.prop && column.prop.indexOf('.') > 0) {
-                if (column.componentType === 'dateSection') {
-                  addDynamicPropDateSection(searchForm, column.prop)
-                } else {
-                  // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
-                  addDynamicProp(searchForm, column.prop)
-                }
-              } else {
-                if (column.componentType === 'dateSection') {
-                  searchForm[column.prop] = [new Date(), new Date()]
-                } else {
-                  searchForm[column.prop] = null
-                }
-              }
-            } else {
-              if (
-                column.componentType === 'multiselect' &&
-                searchForm[column.prop]
-              ) {
-                if (!(searchForm[column.prop] instanceof Array)) {
-                  searchForm[column.prop] = [searchForm[column.prop]]
-                }
-              }
-            }
-          }
-        })
-
-        return searchForm
-      }
-    },
-    resetSearchFormList() {
-      this.searchFormList = null
-    },
-    openFold(isOpen) {
-      $emit(this, 'open-fold', isOpen)
-    },
-    // 查询完毕
-    searchComplete() {
-      if (this.$refs.searchFormOrdinarySearch) {
-        this.$refs.searchFormOrdinarySearch.searchComplete()
-      }
-    },
-  },
-  emits: ['search', 'open-fold', '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>
+  <div>
+    <search-condition-list
+      v-if="searchConditions.length > 0"
+      ref="searchConditionList"
+      :search-type="searchType"
+      :search-conditions="searchConditions"
+      @remove-condition="removeCondition"
+      @select-condition="selectCondition"
+    />
+    <search-form-ordinary-search
+      v-if="searchType === 'normal'"
+      ref="searchFormOrdinarySearch"
+      :searchable-columns="searchableColumns"
+      :search-form="searchForm"
+      :field-num="fieldNum"
+      :label-width="labelWidth"
+      :query="query"
+      :code="code"
+      :row-num="rowNum"
+      :span-num="spanNum"
+      :rules="rules"
+      :is-sql="isSql"
+      :load-complete-query="loadCompleteQuery"
+      @submit-form="submitForm('searchForm')"
+      @reset-form="resetForm('searchForm')"
+      @save-condition="saveCondition()"
+      @open-fold="openFold"
+    />
+    <search-form-advanced-query
+      v-if="searchType === 'advanced'"
+      ref="searchFormAdvancedQuery"
+      style="padding-bottom: 10px"
+      :code="code"
+      :searchable-columns="advancedQueryColumns"
+      :search-form-list="searchFormList"
+      :prop-map="propMap"
+      :is-sql="isSql"
+      @resetForm="resetSearchFormList"
+    />
+    <div
+      v-if="searchType === 'advanced'"
+      style="padding-top: 10px; padding-bottom: 10px; text-align: center"
+    >
+      <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-button size="mini" @click="saveCondition">
+        {{ $t('superGrid.saveCondition') }}
+      </el-button>
+      <span
+        v-if="
+          advancedQuery !== null &&
+          advancedQuery !== undefined &&
+          advancedQuery === true &&
+          normalQuery !== null &&
+          normalQuery !== undefined &&
+          normalQuery === true
+        "
+        style="margin-left: 10px"
+      >
+        <el-button
+          v-if="searchType === 'advanced'"
+          size="mini"
+          @click="searchType = 'normal'"
+        >
+          {{ $t('imatrixUIPublicModel.switchToNormalQuery') }}
+        </el-button>
+        <el-button
+          v-if="searchType === 'normal'"
+          size="mini"
+          @click="searchType = 'advanced'"
+        >
+          {{ $t('imatrixUIPublicModel.switchToAdvancedQuery') }}
+        </el-button>
+      </span>
+    </div>
+    <search-condition-input
+      v-if="isShowSearchCondition"
+      @close="saveConditionValue"
+    />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import searchMethods from './search-methods'
+// import searchFormNumber from './search-form-number.vue'
+import searchFormOrdinarySearch from './search-form-ordinarySearch.vue'
+import searchFormAdvancedQuery from './search-form-advancedQuery'
+import store from './store'
+// import { isOptionFunction, getSearchObject } from './utils'
+import { addDynamicProp, addDynamicPropDateSection } from './utils'
+import * as Vue from 'vue'
+import SearchConditionInput from './search-condition-input.vue'
+import SearchConditionList from './search-condition-list.vue'
+export default {
+  name: 'SearchForm',
+  components: {
+    // searchFormNumber,
+    SearchConditionInput,
+    SearchConditionList,
+    searchFormOrdinarySearch,
+    searchFormAdvancedQuery
+  },
+  provide() {
+    return {
+      getListToolbarFormData: () => ({
+        listToolbarFormData: this.listToolbarFormData,
+      }),
+    }
+  },
+  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,
+    },
+    isSql: {
+      type: Boolean,
+      default: false,
+    },
+    searchFormInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    loadCompleteQuery: {
+      type: Boolean,
+      default: false,
+    },
+    listToolbarFormData: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    const customComponentNames = new Set()
+    const gridParams = store.get(this.code)
+    const propMap = {}
+    let searchForm = {}
+    if (this.searchParam !== null) {
+      searchForm = JSON.parse(JSON.stringify(this.searchParam))
+    }
+    const searchColumns = this.getSearchableColumns(null, null, propMap)
+    if (this.initSearchProps === undefined || this.initSearchProps === null) {
+      this.initSearchProps = []
+    }
+    console.log('searchForm=', searchColumns)
+    searchColumns.forEach((column) => {
+      // propMap[column.prop] = column
+      if (this.initSearchProps.indexOf(column.prop) < 0) {
+        // 表示没有默认初始查询字段
+        if (column.prop && column.prop.indexOf('.') > 0) {
+          if (column.componentType === 'dateSection') {
+            addDynamicPropDateSection(searchForm, column.prop)
+          } else {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(searchForm, column.prop)
+          }
+        } else {
+          if (column.componentType === 'dateSection') {
+            searchForm[column.prop] = [new Date(), new Date()]
+          } else if (column.componentType === 'yearRange') {
+            searchForm[column.prop] = ['', '']
+          } else {
+            searchForm[column.prop] = null
+          }
+          this.setDefaultQueryValue(column, searchForm)
+        }
+      }
+    })
+    const spanNum = this.getSpanNum()
+    const fieldNum = this.getFieldNumPerRow()
+    const rowNum = Math.ceil(searchColumns.length / fieldNum)
+    console.log('rowNumrowNumrowNumrowNum', rowNum)
+    console.log(searchColumns)
+    console.log(fieldNum)
+    const advancedQuery = this.query.advancedQuery
+    const normalQuery = this.query.normalQuery
+    // 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, // 是否正在查询，默认时否
+      isShowSearchCondition: false,
+      searchConditions: [],
+      propMap,
+      advancedQuery,
+      normalQuery,
+      searchFormList: [],
+      searchType: null,
+    }
+  },
+  computed: {
+    searchableColumns() {
+      return this.getSearchableColumns()
+    },
+    advancedQueryColumns() {
+      return this.getAdvancedQueryColumns()
+    },
+  },
+  watch: {
+    searchForm: {
+      deep: true,
+      handler(val) {
+        this.searchFormInfo['data'] = val
+      },
+    },
+  },
+  created() {
+    this.listSearchConditions()
+    if (this.normalQuery) {
+      this.searchType = 'normal'
+    } else if (this.advancedQuery) {
+      this.searchType = 'advanced'
+    }
+  },
+  methods: {
+    ...searchMethods,
+    // 每行放的字段个数
+    getFieldNumPerRow() {
+      const gridParams = store.get(this.code)
+      return gridParams.options.search && gridParams.options.search.fieldNum
+        ? gridParams.options.search.fieldNum
+        : 3
+    },
+    // 根据每行显示的字段个数，确定栅栏个数,默认是4个字段。最多就只能放6个字段
+    getSpanNum() {
+      const fieldNum = this.getFieldNumPerRow()
+      if (fieldNum === 1) {
+        return 22
+      } 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, componentName, index) {
+      if (prop && prop.indexOf('.') > 0) {
+        const parentOjbect = this.getParentObject(prop)
+        // 嵌套属性中的最后一个属性是属于这个中间父对象的，所有要通过中间父对象来赋值
+        if (index != null && index !== undefined) {
+          // parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
+          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
+        } else {
+          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
+        }
+      } else {
+        if (index != null && index !== undefined) {
+          this.searchForm[prop][index] = value
+        } else {
+          this.searchForm[prop] = value
+        }
+      }
+    },
+    getAdvancedQueryColumns(columns, searchColumns, propMap) {
+      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 (propMap) {
+          propMap[column.prop] = column
+        }
+        if (
+          column.prop === '$index' ||
+          column.prop === '$selection' ||
+          column.dynamic
+        ) {
+          // 序号和复选框列、动态列 不属于该组件的查询字段
+          continue
+        }
+        if (column.groupHeader) {
+          // 组合表头中子表头的字段查询
+          this.getSearchableColumns(column.children, searchColumns, propMap)
+        } else {
+          if (
+            column.queryType === 'advanced' &&
+            !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 &&
+              column.componentType.indexOf('custom:') >= 0
+            ) {
+              column.componentName = column.componentType.substring(
+                column.componentType.indexOf(':') + 1
+              )
+              this.customComponentNames.add(column.componentName)
+            } else {
+              column.componentName = ''
+            }
+            // this.$set(this.propMap, column.prop, column)
+            // this.propMap[column.prop] = column
+            searchColumns.push(column)
+          }
+        }
+      }
+      return searchColumns
+    },
+    getSearchableColumns(columns, searchColumns, propMap) {
+      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 (propMap) {
+          propMap[column.prop] = column
+        }
+        if (
+          column.prop === '$index' ||
+          column.prop === '$selection' ||
+          column.dynamic
+        ) {
+          // 序号和复选框列、动态列 不属于该组件的查询字段
+          continue
+        }
+        if (column.groupHeader) {
+          // 组合表头中子表头的字段查询
+          this.getSearchableColumns(column.children, searchColumns, propMap)
+        } 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 &&
+              column.componentType.indexOf('custom:') >= 0
+            ) {
+              column.componentName = column.componentType.substring(
+                column.componentType.indexOf(':') + 1
+              )
+              this.customComponentNames.add(column.componentName)
+            } else {
+              column.componentName = ''
+            }
+            // this.$set(this.propMap, column.prop, column)
+            // this.propMap[column.prop] = column
+            searchColumns.push(column)
+          }
+        }
+      }
+      return searchColumns
+    },
+    customComponent(column) {
+      const gridParams = store.get(this.code)
+      if (column.componentName && column.componentName !== '') {
+        this.customComponentNames.add(column.componentName)
+        return true
+      }
+      if (
+        (!column.componentName || column.componentName === '') &&
+        gridParams.options &&
+        gridParams.options.search &&
+        gridParams.options.search.customSearchElements
+      ) {
+        // 定义了自定义查询组件
+        const propSearchEle =
+          gridParams.options.search.customSearchElements[column.prop]
+        // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
+        if (propSearchEle) {
+          column.componentName = 'custom-' + column.prop
+          const component = propSearchEle.call(this, column)
+          // console.log('customComponent-customSearchElements-')
+          if (component) {
+            this.customComponentNames.add(column.componentName)
+            window.$vueApp.component(column.componentName, component)
+            return true
+          }
+        }
+      }
+      return false
+    },
+    submitForm() {
+      if (this.searchType === 'normal') {
+        this.$refs.searchFormOrdinarySearch.validateForm().then((valid) => {
+          if (valid) {
+            // this.loading = true
+            this.searchParams = this.packageSearchParam()
+            $emit(this, 'search', this.searchParams)
+          } else {
+            return false
+          }
+        })
+      } else if (this.searchType === 'advanced') {
+        this.$refs.searchFormAdvancedQuery.validateForm().then((valid) => {
+          if (valid) {
+            this.loading = true
+            this.searchParams = this.packageSearchParam()
+            $emit(this, 'search', this.searchParams)
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    resetForm() {
+      if (this.$refs.searchConditionList) {
+        this.$refs.searchConditionList.editConditionId = null
+      }
+      if (this.searchType === 'normal') {
+        this.$refs.searchFormOrdinarySearch.resetForm()
+      } else if (this.searchType === 'advanced') {
+        this.$refs.searchFormAdvancedQuery.resetForm()
+        $emit(this, 'reset')
+      }
+      // 子组件重置完成后调用reset方法 同步执行
+      // this.$emit('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
+      )
+    },
+    listSearchConditions() {
+      return new Promise((resolve, reject) => {
+        this.listSearchCondition(this.code)
+          .then((conditions) => {
+            this.searchConditions = conditions
+            resolve(conditions)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    saveCondition() {
+      const searchParams = this.packageSearchParam()
+      if (!searchParams || searchParams.length === 0) {
+        this.$message({
+          type: 'warning',
+          message: this.$t('imatrixUIMessage.pleaseInputSearchCondition'),
+          showClose: true,
+        })
+        return
+      }
+      this.isShowSearchCondition = true
+    },
+    saveConditionValue(conditionName) {
+      if (conditionName) {
+        let searchParams
+        if (
+          this.searchType === 'normal' ||
+          this.searchType === '' ||
+          this.searchType === null ||
+          this.searchType === undefined
+        ) {
+          searchParams = this.packageSearchParam()
+        } else {
+          searchParams = this.searchFormList
+        }
+        const condition = {
+          listCode: this.code,
+          queryType:
+            this.searchType === 'normal' ||
+            this.searchType === '' ||
+            this.searchType === null ||
+            this.searchType === undefined
+              ? 'FIXED'
+              : 'CUSTOM',
+          name: conditionName,
+          queryCondition: JSON.stringify(searchParams),
+        }
+        this.saveSearchCondition(condition).then((condition) => {
+          this.$message({
+            type: 'success',
+            message: this.$t('imatrixUIMessage.saveSuccessfully'),
+            showClose: true,
+          })
+          this.isShowSearchCondition = false
+          this.listSearchConditions().then(() => {
+            if (this.$refs.searchConditionList) {
+              // 选中刚刚保存的条件
+              this.$refs.searchConditionList.editConditionId = condition.id + ''
+            }
+            // 查询条件对应的数据
+            this.selectCondition(condition.id)
+          })
+        })
+      }
+      this.isShowSearchCondition = false
+    },
+    removeCondition(conditionId) {
+      if (conditionId) {
+        this.$confirm(
+          this.$t('imatrixUIMessage.whetherToConfirmDeletion'),
+          this.$t('imatrixUIMessage.tips'),
+          {
+            confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+            cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
+            type: 'warning',
+          }
+        ).then(() => {
+          this.removeSearchCondition(conditionId).then(() => {
+            this.$message({
+              type: 'success',
+              message: this.$t('superGrid.deleteSuccessful'),
+              showClose: true,
+            })
+            this.listSearchConditions()
+          })
+        })
+      }
+    },
+    selectCondition(conditionId) {
+      if (conditionId) {
+        this.getSearchCondition(conditionId).then((searchCondition) => {
+          if (searchCondition) {
+            const queryCondition = searchCondition.queryCondition
+            if (queryCondition) {
+              if (
+                this.searchType === 'normal' ||
+                this.searchType === '' ||
+                this.searchType === null ||
+                this.searchType === undefined
+              ) {
+                const searchParams = JSON.parse(queryCondition)
+                const searchForm = this.packageSearchForm(searchParams)
+                if (searchForm) {
+                  this.searchForm = searchForm
+                }
+                // 查询数据
+                this.loading = true
+                $emit(this, 'search', searchParams)
+              } else {
+                this.searchFormList = JSON.parse(queryCondition)
+                // 查询数据
+                this.loading = true
+                $emit(this, 'search', this.packageSearchParam())
+              }
+            }
+          }
+        })
+      }
+    },
+    // 封装searchForm
+    packageSearchForm(searchFormArr) {
+      if (searchFormArr && searchFormArr.length > 0) {
+        const searchForm = {}
+        const initSearchProps = []
+        searchFormArr.forEach((item) => {
+          // 获得的是"isDeleted"
+          let prop = item.propName
+          // 获得的是“deleted”
+          const columnProp = item.columnProp
+          const dataType = item.dataType
+          if (dataType && dataType === 'BOOLEAN' && columnProp) {
+            prop = columnProp
+          }
+          if (initSearchProps.indexOf(prop) === -1) {
+            initSearchProps.push(prop)
+          }
+          const propValue = item.propValue
+          if (prop && prop.indexOf('.') > 0) {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(searchForm, prop, propValue)
+          } else {
+            let isRangeQueryValue = false
+            if (dataType && (dataType === 'DATE' || dataType === 'TIME')) {
+              if (item.startValue && item.endValue) {
+                isRangeQueryValue = true
+              }
+            }
+            if (isRangeQueryValue) {
+              searchForm[prop] = [
+                new Date(item.startValue),
+                new Date(item.endValue),
+              ]
+            } else {
+              if (searchForm[prop]) {
+                if (searchForm[prop] instanceof Array) {
+                  searchForm[prop].push(propValue)
+                } else {
+                  searchForm[prop] = [searchForm[prop], propValue]
+                }
+              } else {
+                searchForm[prop] = propValue
+              }
+            }
+          }
+        })
+
+        this.searchableColumns.forEach((column) => {
+          if (initSearchProps) {
+            if (initSearchProps.indexOf(column.prop) < 0) {
+              // 表示没有默认初始查询字段
+              if (column.prop && column.prop.indexOf('.') > 0) {
+                if (column.componentType === 'dateSection') {
+                  addDynamicPropDateSection(searchForm, column.prop)
+                } else {
+                  // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+                  addDynamicProp(searchForm, column.prop)
+                }
+              } else {
+                if (column.componentType === 'dateSection') {
+                  searchForm[column.prop] = [new Date(), new Date()]
+                } else {
+                  searchForm[column.prop] = null
+                }
+              }
+            } else {
+              if (
+                column.componentType === 'multiselect' &&
+                searchForm[column.prop]
+              ) {
+                if (!(searchForm[column.prop] instanceof Array)) {
+                  searchForm[column.prop] = [searchForm[column.prop]]
+                }
+              }
+            }
+          }
+        })
+
+        return searchForm
+      }
+    },
+    resetSearchFormList() {
+      this.searchFormList = null
+    },
+    openFold(isOpen) {
+      $emit(this, 'open-fold', isOpen)
+    },
+    // 查询完毕
+    searchComplete() {
+      if (this.$refs.searchFormOrdinarySearch) {
+        this.$refs.searchFormOrdinarySearch.searchComplete()
+      }
+    },
+  },
+  emits: ['search', 'open-fold', '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>