imatrix-ui 2.8.21-dw → 2.8.21

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

@@ -0,0 +1,634 @@
+<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"
+      @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 {}
+      }
+    }
+
+  },
+  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
+          }
+        }
+      }
+    })
+    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')
+    },
+    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] = [item.startValue, 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>