imatrix-ui 2.9.18-dw → 2.9.19-boe02

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

@@ -1,642 +0,0 @@
-<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>
-<style scoped>
-  .grid-search-form{
-    overflow: auto;
-  }
-  .grid-search-form >>> .el-form-item{
-    margin-bottom: 0px;
-  }
-
-  .grid-search-form >>> .search-btn{
-    margin-bottom: 5px;
-    text-align: center;
-  }
-  .grid-search-form >>> .el-select,.grid-search-form >>> .customComponent{
-    width: 100%;
-  }
-</style>
-<script>
-import searchMethods from './search-methods'
-// import searchFormNumber from './search-form-number'
-import searchFormOrdinarySearch from './search-form-ordinarySearch'
-// import searchFormAdvancedQuery from './search-form-advancedQuery'
-import store from './store'
-// import { isOptionFunction, getSearchObject } from './utils'
-import { addDynamicProp, addDynamicPropDateSection } from './utils'
-import Vue from 'vue'
-import SearchConditionInput from './search-condition-input'
-import SearchConditionList from './search-condition-list'
-export default {
-  name: 'SearchForm',
-  components: {
-    // searchFormNumber,
-    SearchConditionInput,
-    SearchConditionList,
-    searchFormOrdinarySearch
-    // searchFormAdvancedQuery
-  },
-  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
-    }
-
-  },
-  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)
-    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.$set(this.searchFormInfo, 'data', val)
-      }
-    }
-  },
-  created() {
-    console.log('加载查询页面', this.searchType)
-    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
-          this.$set(parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)], index, value)
-        } else {
-          parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
-        }
-      } else {
-        if (index != null && index !== undefined) {
-          this.$set(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)
-            Vue.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()
-            this.$emit('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()
-            this.$emit('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()
-        this.$emit('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
-                this.$emit('search', searchParams)
-              } else {
-                this.searchFormList = JSON.parse(queryCondition)
-                // 查询数据
-                this.loading = true
-                this.$emit('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) {
-      this.$emit('open-fold', isOpen)
-    },
-    // 查询完毕
-    searchComplete() {
-      if (this.$refs.searchFormOrdinarySearch) {
-        this.$refs.searchFormOrdinarySearch.searchComplete()
-      }
-    }
-  }
-}
-</script>