imatrix-ui 2.8.39-dw → 2.8.39-pvtmp

package/packages/super-grid/src/super-grid-service.js

@@ -0,0 +1,595 @@
+/* eslint-disable no-undef */
+import Sortable from 'sortablejs'
+import Vue from 'vue'
+import {
+  packageEnumAndBeanColumnValueSets
+} from '../../utils/value-set'
+import store from './store'
+import {
+  isHasOptionFunction
+} from './utils'
+const superGridService = {
+  initialize() {
+    // const a = new Date().getTime()
+    return new Promise((resolve, reject) => {
+      const gridParams = store.get(this.code)
+      if (this.options.isAdministerListView) {
+        // 要从配置中实时获取页面的配置
+        // 根据this.options.showColumns设置显示的字段
+        this.getShowColumns(this.options.SuperGrid)
+        Object.assign(this, this.options.SuperGrid)
+        gridParams.isSql = this.isSql
+        gridParams.columns = this.columns
+        gridParams.query = this.query
+        gridParams.pagination = this.pagination
+        this.createBackgroundColorMap()
+        this.hasLoadedColumns = true
+        this.fetchData(null, null, null, null)
+        resolve()
+      } else {
+        const url = Vue.prototype.baseAPI + '/component/super-grids/' + this.code
+        const param = {}
+        const isSqlSetting = this.options.isSql
+        if (this.options && typeof (isSqlSetting) !== 'undefined') {
+          this.isSql = isSqlSetting
+          param.isSql = isSqlSetting + ''
+        }
+        param.publishVersion = this.publishVersion
+        if (this.options && typeof (this.options.isAdministerListView) !== 'undefined' && this.options.isAdministerListView) {
+          param.isAdminister = this.options.isAdministerListView + ''
+        }
+        let additionalParams
+        const additionalParamMap = sessionStorage.getItem('additionalParamMap')
+        if (additionalParamMap) {
+          // console.log('进入判断', additionalParamMap)
+          if (additionalParamMap && typeof (additionalParamMap) === 'object') {
+            additionalParams = JSON.stringify(additionalParamMap)
+          } else if (additionalParamMap && additionalParamMap !== '') {
+            additionalParams = additionalParamMap
+          }
+        }
+        if (this.options.additionalParamMap && typeof (this.options.additionalParamMap) === 'object') {
+          const optionParam = JSON.stringify(this.options.additionalParamMap)
+          if (additionalParams) {
+            Object.assign(additionalParams, optionParam)
+          } else {
+            additionalParams = optionParam
+          }
+        } else if (this.options.additionalParamMap && this.options.additionalParamMap !== '') {
+          const optionParam = this.options.additionalParamMap
+          if (additionalParams) {
+            Object.assign(additionalParams, optionParam)
+          } else {
+            additionalParams = optionParam
+          }
+        }
+        if (additionalParams) {
+          param.additionalParamMap = additionalParams
+        }
+        if (this.options.extraParam && this.options.extraParam.entityMap) {
+          this.parentFormData = this.options.extraParam.entityMap
+        }
+        this.isLoading = true
+        // 初始化组件时先获取元信息再获取数据，以后翻页、排序、查询不再去获取元数据了
+        this.$http.post(url, param).then(data => {
+          // const p1 = new Date().getTime()
+          // 判断是否查询组件渲染完之后查询
+          this.isLoadCompleteQuery(data.columns)
+          // 行编辑设置所有字段的默认值null时使用，优化行编辑性能
+          let allColumns = []
+          allColumns = allColumns.concat(JSON.parse(JSON.stringify(data.columns)))
+          // 根据this.options.showColumns设置显示的字段
+          this.getShowColumns(data)
+          // 将列表信息存入store缓存中，用来导出时获取国际化名
+          if (data.basicInfo) {
+            store.set(this.code + 'basicInfo', data.basicInfo)
+          }
+          if (this.options.pageSizes && data.pagination) {
+            // 组件的options属性配置中配置“可选行数”，已该配置为准
+            let pageSizeArr = null
+            const pageSizeStrs = this.options.pageSizes.split(',')
+            if (pageSizeStrs && pageSizeStrs.length > 0) {
+              pageSizeArr = []
+              for (var i = 0; i < pageSizeStrs.length; i++) {
+                pageSizeArr.push(pageSizeStrs[i] * 1)
+              }
+              data.pagination.pageSize = pageSizeArr[0]
+            }
+            data.pagination.layout = 'total, sizes, prev, pager, next, jumper'
+            data.pagination.pageSizes = pageSizeArr
+          }
+          if (typeof (this.options.initSortInfo) !== 'undefined') {
+            // 组件的options属性配置中配置“排序信息”，以该配置为准
+            if (Array.isArray(this.options.initSortInfo)) {
+              data.sortInfo = this.options.initSortInfo
+            } else {
+              data.sortInfo = []
+              data.sortInfo.push(this.options.initSortInfo)
+            }
+          }
+
+          // 需要多个组件共享的数据放到store中，避免组件定义一堆props来接收这些共享数据
+          packageEnumAndBeanColumnValueSets(data.columns, this.code).then(() => {
+            return this.getDynamicColumnByBean(additionalParams, data.dynamicColumnInfo, data.columns, gridParams)
+          }).then((dynamicColumns) => {
+            // const b = new Date().getTime()
+            let showColumns = []
+            if (typeof (this.options.showColumns) !== 'undefined') {
+              showColumns = this.options.showColumns.split(',')
+            }
+            let customDynamicColumns = dynamicColumns
+            if (!customDynamicColumns || customDynamicColumns.length === 0) {
+              if (this.options.dynamicColumns && this.options.dynamicColumns.length > 0) {
+                customDynamicColumns = this.options.dynamicColumns
+              }
+            }
+            if (customDynamicColumns && customDynamicColumns.length > 0) {
+              allColumns = allColumns.concat(JSON.parse(JSON.stringify(customDynamicColumns)))
+              if (showColumns && showColumns.length > 0) {
+                for (let i = 0; i < customDynamicColumns.length; i++) {
+                  const prop = customDynamicColumns[i].prop
+                  customDynamicColumns[i].dynamic = true
+                  if (showColumns.indexOf(prop) >= 0) {
+                    customDynamicColumns[i].show = true
+                  } else {
+                    customDynamicColumns[i].show = false
+                  }
+                }
+              }
+              data.columns = data.columns.concat(customDynamicColumns)
+              // 按照排序字段的值升序排列字段
+              data.columns = data.columns.sort((col1, col2) => col1.displayOrder - col2.displayOrder)
+            }
+            Object.assign(this, data)
+            if (this.options && typeof (isSqlSetting) === 'undefined') {
+              // 如果options中没有配置，则以后台传过来的为准，在有动态列配置时，该值会赋值为true
+              this.isSql = this.basicInfo.sql
+            }
+            gridParams.isSql = this.isSql
+            // 行编辑时使用
+            gridParams.allColumns = allColumns
+            gridParams.columns = this.columns
+            // 存放map，prop-columnOption。方便直接通过prop 获取对应的配置
+            this.packageColumnOptionMap(gridParams)
+            // const columnOptionMap = {}
+            // if (gridParams.columns && gridParams.columns.length > 0) {
+            //   gridParams.columns.forEach(item => {
+            //     if (item && item.prop) {
+            //       columnOptionMap[item.prop] = item
+            //     }
+            //   })
+            // }
+            // gridParams.columnOptionMap = columnOptionMap
+            this.judgeIsFormSubTable()
+            gridParams.colSetting = this.colSetting
+            gridParams.lineEdit = this.lineEdit
+            gridParams.basicInfo = this.basicInfo
+            gridParams.pagination = this.pagination
+            if (this.pagination) {
+              // 监控每行显示多少条变量使用
+              this.pageSize = this.pagination.pageSize
+            }
+            gridParams.query = this.query
+            gridParams.dynamicColumnInfo = this.dynamicColumnInfo
+            gridParams.mainDefaultValueColumns = this.mainDefaultValueColumns
+            gridParams.contextParameter = this.contextParameter
+            // 是否显示分页区域
+            this.isShowPage = this.isShowPageArea()
+            // 子表是否分页
+            this.isSubTableShowPage = this.isFormSubTable ? this.isShowPage : false
+            gridParams.isSubTableShowPage = this.isSubTableShowPage
+            this.hasLoadedColumns = true
+            let canFetchData = true
+            if (isHasOptionFunction('loadBeforeSend', this.code)) {
+              canFetchData = gridParams.options.loadBeforeSend.call(this, {
+                columns: this.columns,
+                gridParams,
+                additionalParamMap: gridParams.additionalParamMap
+              })
+            }
+            if (canFetchData === undefined || canFetchData === true) {
+              // 表示初始化时查询记录
+              if (this.options.isPageInfo) {
+                // 表示是页面展示模式
+              } else if (typeof (this.options.initSearch) === 'undefined') {
+                if (typeof (gridParams.basicInfo.initializationQuery) === 'undefined' || gridParams.basicInfo.initializationQuery) {
+                  // 判断是否初始化完查询条件后再查询数据
+                  if (this.loadCompleteQuery) {
+                    this.isLoading = false
+                  } else {
+                    this.fetchData()
+                  }
+                }
+              } else if (this.options.initSearch !== false) {
+                // 判断是否初始化完查询条件后再查询数据
+                if (this.loadCompleteQuery) {
+                  this.isLoading = false
+                } else {
+                  this.fetchData()
+                }
+              }
+            }
+            this.createBackgroundColorMap()
+            // const p2 = new Date().getTime()
+            // console.log('拿到共享数据并存储p2-p1=', p2 - p1)
+            // console.log('拿到共享数据并存储p2-b=', p2 - b)
+            resolve()
+          }).catch(error => {
+            reject(error)
+          })
+        }).catch(error => {
+          reject(error)
+        })
+      }
+      // const a1 = new Date().getTime()
+      // console.log('初始化所耗时间', a1 - a)
+    })
+  },
+  isLoadCompleteQuery(columns) {
+    if (columns !== null) {
+      let queryParameterSize = 0
+      columns.forEach(column => {
+        if (column.hasOwnProperty('queryType') && column.hasOwnProperty('prop')) {
+          if (column.prop !== '$index' && column.prop !== '$selection') {
+            if (column.queryType && column.queryType !== 'no') {
+              // 配置了默认值
+              if (column.controlConfig) {
+                queryParameterSize++
+              }
+            }
+          }
+        }
+      })
+      if (queryParameterSize > 0) {
+        this.loadCompleteQuery = true
+      }
+    }
+  },
+  packageColumnOptionMap(gridParams) {
+    const columnOptionMap = {}
+    if (gridParams.columns && gridParams.columns.length > 0) {
+      this.packageColumnOptionMapItems(gridParams.columns, columnOptionMap)
+    }
+    gridParams.columnOptionMap = columnOptionMap
+  },
+  packageColumnOptionMapItems(columns, columnOptionMap) {
+    columns.forEach(item => {
+      if (item.children && item.children.length > 0) {
+        this.packageColumnOptionMapItems(item.children, columnOptionMap)
+      }
+      if (item && item.prop) {
+        columnOptionMap[item.prop] = item
+      }
+    })
+  },
+  getDynamicColumnByBean(additionalParams, dynamicColumnInfos, columns, gridParams) {
+    return new Promise((resolve, reject) => {
+      if (gridParams.options.extraParam && gridParams.options.extraParam.entityMap) {
+        this.parentFormData = gridParams.options.extraParam.entityMap
+      }
+      if (!this.options.isPageInfo && dynamicColumnInfos && dynamicColumnInfos.length > 0) {
+        const totalDynamicColumns = []
+        this.getDynamicColumnByBeanWithOneSet(additionalParams, dynamicColumnInfos[0], columns, 0, dynamicColumnInfos, totalDynamicColumns, gridParams).then(totalDynamicColumns => {
+          resolve(totalDynamicColumns)
+        }).catch(error => {
+          reject(error)
+        })
+      } else {
+        resolve([])
+      }
+    })
+  },
+  getDynamicColumnByBeanWithOneSet(additionalParams, dynamicColumnInfo, columns, index, dynamicColumnInfos, totalDynamicColumns, gridParams) {
+    return new Promise((resolve, reject) => {
+      if (dynamicColumnInfo && dynamicColumnInfo.beanName) {
+        const url = Vue.prototype.baseURL + '/common/dynamic-columns'
+        const param = {
+          additionalParams, // 附加参数对象
+          listCode: this.code,
+          columns,
+          beanName: dynamicColumnInfo.beanName
+        }
+        if (this.parentFormData) {
+          // 初始化表单时，加载动态列需要
+          if (gridParams.dynamicTemp) {
+            param.parent = gridParams.dynamicTemp.parent
+            param.watchParentAttrValues = gridParams.dynamicTemp.watchParentAttrValues
+          } else {
+            param.parent = this.parentFormData
+          }
+          // 监听主表字段的值
+          if (dynamicColumnInfo.watchParentAttr) {
+            const watchParentAttrs = dynamicColumnInfo.watchParentAttr.split(',')
+            watchParentAttrs.forEach(watchParentAttr => {
+              if (watchParentAttr) {
+                // 存储属性对应的值
+                if (!param.watchParentAttrValues) {
+                  param.watchParentAttrValues = {}
+                }
+                param.watchParentAttrValues[watchParentAttr] = this.parentFormData[watchParentAttr]
+                const unWatch = this.$watch('parentFormData.' + watchParentAttr, function (newValue, oldValue) {
+                  // 重新加载表格及表格数据
+                  if (!gridParams.dynamicTemp) {
+                    gridParams.dynamicTemp = {}
+                  }
+                  gridParams.dynamicTemp.parent = this.parentFormData
+                  if (!gridParams.dynamicTemp.watchParentAttrValues) {
+                    gridParams.dynamicTemp.watchParentAttrValues = {}
+                  }
+                  gridParams.dynamicTemp.watchParentAttrValues[watchParentAttr] = newValue
+                  if (this.$refs && this.$refs.superGrid) {
+                    // 手动注销watch，否则会调用多次watch
+                    unWatch()
+                    // 重新加载表格及表格数据
+                    this.$emit('reload-grid')
+                  }
+                })
+              }
+            })
+          }
+        }
+        this.$http.post(url, param).then(dynamicColumns => {
+          // 给动态列分组。如果是后台接口返回的动态列，保存时要自己实现动态列的保存
+          dynamicColumnInfo.dynamicColumns = dynamicColumns
+          totalDynamicColumns = totalDynamicColumns.concat(dynamicColumns)
+          if (index + 1 < dynamicColumnInfos.length) {
+            this.getDynamicColumnByBeanWithOneSet(additionalParams, dynamicColumnInfos[index + 1], columns, index + 1, dynamicColumnInfos, totalDynamicColumns)
+          } else {
+            resolve(totalDynamicColumns)
+          }
+        }).catch(() => {
+          resolve([])
+        })
+      } else {
+        resolve([])
+      }
+    })
+  },
+  // 列拖拽
+  columnDrop() {
+    const vm = this
+    // 作用于实际展示列表数据时拖拽列
+    let isDragColumnFlag = false
+    if (typeof (this.options.isDragColumnFlag) !== 'undefined' && this.options.isDragColumn != null &&
+      this.options.isDragColumn === true) {
+      isDragColumnFlag = true
+      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
+      if (wrapperTr != null) {
+        this.sortable = Sortable.create(wrapperTr, {
+          animation: 180,
+          delay: 0,
+          onEnd: evt => {
+            let oldIndex = evt.oldIndex
+            let newIndex = evt.newIndex
+            // 判断冻结列，获取真实index
+            const frozenArr = []
+            // const columns = this.listColumnList.filter(listColumn => {
+            //   return listColumn.listColumnFixed === 'left' || listColumn.listColumnFixed === 'right'
+            // })
+            for (var r = 0; r < vm.columns.length; r++) {
+              if (vm.columns[r].fixed === 'left' || vm.columns[r].fixed === 'right') {
+                frozenArr.push(r)
+              }
+            }
+            if (frozenArr && frozenArr.length > 0) {
+              for (var m = 0; m < frozenArr.length; m++) {
+                if (frozenArr[m] >= newIndex) {
+                  newIndex--
+                }
+                if (frozenArr[m] >= oldIndex) {
+                  oldIndex--
+                }
+              }
+            }
+            if (oldIndex !== null && oldIndex !== undefined && oldIndex !== -1 && newIndex !== null && newIndex !== undefined && newIndex !== -1) {
+              if (oldIndex > newIndex) {
+                // 从后往前
+                if (vm.columns && vm.columns.length > 0) {
+                  const item = vm.columns[oldIndex]
+                  for (var i = oldIndex - 1; i >= newIndex; i--) {
+                    const col = vm.columns[i]
+                    col.displayOrderType = 'custom'
+                    vm.columns[i + 1] = col
+                  }
+                  vm.columns[newIndex] = item
+                }
+              } else {
+                // 从前往后
+                if (vm.columns && vm.columns.length > 0) {
+                  const item = vm.columns[oldIndex]
+                  for (var k = oldIndex + 1; k <= newIndex; k++) {
+                    const col = vm.columns[k]
+                    col.displayOrderType = 'custom'
+                    vm.columns[k - 1] = col
+                  }
+                  vm.columns[newIndex] = item
+                }
+              }
+            }
+            vm.indexAfterTheChangeUpdateDisplayOrder(vm.columns, oldIndex, newIndex, 'displayOrder')
+            let splitArr = []
+            if (oldIndex > newIndex) {
+              // 从后往前
+              splitArr = vm.columns.slice(newIndex, oldIndex + 1)
+            } else {
+              // 从前往后
+              splitArr = vm.columns.slice(oldIndex, newIndex + 1)
+            }
+            const params = {
+              listCode: vm.code,
+              columns: splitArr
+            }
+            vm.$http.post(Vue.prototype.baseAPI + '/component/super-grids/drag-columns', params).then(data => {
+              // console.log('移动成功')
+            })
+            // const oldIndex = evt.oldIndex
+            // const newIndex = evt.newIndex
+            // const currentItem = vm.columns[evt.oldIndex]
+            // const targetItem = vm.columns[evt.newIndex]
+            // const currentDisplayOrder = vm.getDisplayOrder(currentItem, oldIndex + 1)
+            // const targetDisplayOrder = vm.getDisplayOrder(targetItem, newIndex + 1)
+            // const params = {
+            //   'listCode': vm.code,
+            //   'oldIndex': currentDisplayOrder,
+            //   'newIndex': targetDisplayOrder,
+            //   'currentProp': currentItem.prop, // 当前拖动的列的属性名
+            //   'targetProp': targetItem.prop // 拖动的列的原属性名
+            // }
+            // vm.$http.post(Vue.prototype.baseAPI + '/component/super-grids/drag-columns', params).then(data => {
+            //   vm.columns.splice(oldIndex, 1)
+            //   vm.columns.splice(newIndex, 0, currentItem)
+            //   vm.$set(currentItem, 'displayOrder', targetDisplayOrder)
+            //   vm.$set(currentItem, 'displayOrderType', 'custom')
+            //   vm.$set(targetItem, 'displayOrder', currentDisplayOrder)
+            //   vm.$set(targetItem, 'displayOrderType', 'custom')
+            // })
+          }
+        })
+      }
+    }
+    // 作用于列表管理编辑模式
+    // 作用于列表管理编辑模式
+    if (typeof (this.options.isAdministerListView) !== 'undefined' && this.options.isAdministerListView != null &&
+      this.options.isAdministerListView === true && !isDragColumnFlag) {
+      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
+      if (wrapperTr != null) {
+        this.sortable = Sortable.create(wrapperTr, {
+          animation: 180,
+          delay: 0,
+          onEnd: evt => {
+            const oldIndex = evt.oldIndex
+            const newIndex = evt.newIndex
+            const oldItem = this.columns[evt.oldIndex]
+            const that = this
+            that.columns.splice(oldIndex, 1)
+            that.columns.splice(newIndex, 0, oldItem)
+            this.$emit('columnDrop', oldIndex, newIndex)
+          }
+        })
+      }
+    }
+  },
+  // 移动完成后的displayOrder设置
+  indexAfterTheChangeUpdateDisplayOrder(dataList, oldIndex, newIndex, prop) {
+    if (dataList && dataList.length > 0) {
+      if (oldIndex != null && oldIndex !== undefined && oldIndex !== -1) {
+        if (newIndex !== null && newIndex !== undefined && newIndex !== -1) {
+          if (prop && prop !== '') {
+            const selectCol = dataList[newIndex]
+            if (newIndex > oldIndex) {
+              // 表示向后移动
+              // 位置已经移动，所以参数要赋值给原始位置的下一个
+              const afProp = dataList[newIndex - 1][prop]
+              const arr = dataList.slice(oldIndex, newIndex)
+              if (arr && arr.length > 0) {
+                for (let i = arr.length - 1; i > -1; i--) {
+                  const col = arr[i]
+                  if (i === 0) {
+                    // 紧靠原始位置的上一个
+                    col[prop] = selectCol[prop]
+                  } else {
+                    col[prop] = arr[i - 1][prop]
+                  }
+                }
+              }
+              selectCol[prop] = afProp
+            } else {
+              const befProp = dataList[newIndex + 1][prop]
+              // 表示向前移动
+              // 位置已经移动，所以参数要赋值给原始位置的上一个
+              const arr = dataList.slice(newIndex + 1, oldIndex + 1)
+              if (arr && arr.length > 0) {
+                for (let i = 0; i < arr.length; i++) {
+                  const col = arr[i]
+                  if (i === arr.length - 1) {
+                    // 紧靠原始位置的上一个
+                    col[prop] = selectCol[prop]
+                  } else {
+                    col[prop] = arr[i + 1][prop]
+                  }
+                }
+              }
+              selectCol[prop] = befProp
+            }
+          }
+        }
+      }
+    }
+  },
+  getDisplayOrder(column, dragIndex) {
+    if (column && column.displayOrder !== undefined && column.displayOrder !== null) {
+      return column.displayOrder
+    } else {
+      return dragIndex + 1
+    }
+  },
+  getShowColumns(data) {
+    let showColumns = []
+    if (typeof (this.options.showColumns) !== 'undefined') {
+      showColumns = this.options.showColumns.split(',')
+    }
+    if (showColumns.length > 0) {
+      const columns = []
+      for (let i = 0; i < data.columns.length; i++) {
+        const column = data.columns[i]
+        const prop = column.prop
+        if (prop === '$index' || prop === '$selection') {
+          columns.push(column)
+          continue
+        }
+        if (column.hasOwnProperty('children')) {
+          // 表示是组合表头，需要判断子表头是否显示
+          const children = this.getChildrenColumns(column.children, showColumns)
+          column.children = children
+          if (children.length > 0) {
+            columns.push(column)
+          }
+        } else {
+          if (showColumns.indexOf(prop) >= 0) {
+            columns.push(column)
+          }
+        }
+      }
+      data.columns = columns
+    }
+  },
+  getChildrenColumns(children, showColumns) {
+    const columns = []
+    for (let i = 0; i < children.length; i++) {
+      const column = children[i]
+      const prop = column.prop
+      if (column.hasOwnProperty('children')) {
+        // 表示是组合表头，需要判断子表头是否显示
+        const children = this.getChildrenColumns(column.children, showColumns)
+        column.children = children
+        if (children.length > 0) {
+          columns.push(column)
+        }
+      } else {
+        if (showColumns.indexOf(prop) >= 0) {
+          columns.push(column)
+        }
+      }
+    }
+    return columns
+  },
+  // 保存拖动列宽
+  saveColumnWidth(prop, width) {
+    return new Promise((resolve, reject) => {
+      if (width !== undefined) {
+        const params = {
+          'prop': prop,
+          'width': width + ''
+        }
+        this.$http.post(Vue.prototype.baseAPI + '/component/super-grids/setting-column-widths/' + this.code, params).then(data => {
+          resolve(width)
+        }).catch(error => {
+          reject(error)
+        })
+      } else {
+        resolve()
+      }
+    })
+  }
+}
+export default superGridService