imatrix-ui 0.0.15 → 0.1.1-up

package/components/super-grid/super-grid-service.js

@@ -0,0 +1,682 @@
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+import * as Vue from 'vue'
+import Sortable from 'sortablejs'
+import store from './store'
+import { packageEnumAndBeanColumnValueSets } from '../utils/value-set'
+import { isHasOptionFunction } from './utils'
+const superGridService = {
+  initialize() {
+    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 =
+          window.$vueApp.config.globalProperties.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 + ''
+        }
+        if (
+          this.options &&
+          typeof this.options.isAdministerListView !== 'undefined' &&
+          this.options.isAdministerListView
+        ) {
+          param.isAdminister = this.options.isAdministerListView + ''
+        }
+        let additionalParams
+        const additionalParamMap = window.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) => {
+            // 行编辑设置所有字段的默认值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) => {
+                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,
+                  })
+                }
+                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
+                    ) {
+                      this.fetchData()
+                    }
+                  } else if (this.options.initSearch !== false) {
+                    this.fetchData()
+                  }
+                }
+                this.createBackgroundColorMap()
+                resolve()
+              })
+              .catch((error) => {
+                reject(error)
+              })
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      }
+    })
+  },
+  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 =
+          window.$vueApp.config.globalProperties.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()
+                      // 重新加载表格及表格数据
+                      $emit(this, '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(
+                window.$vueApp.config.globalProperties.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)
+            $emit(this, '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(
+            window.$vueApp.config.globalProperties.baseAPI +
+              '/component/super-grids/setting-column-widths/' +
+              this.code,
+            params
+          )
+          .then((data) => {
+            resolve(width)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      } else {
+        resolve()
+      }
+    })
+  },
+}
+export default superGridService