imatrix-ui 2.8.21-dw → 2.8.21

package/packages/super-grid/src/columns-config.vue

@@ -0,0 +1,335 @@
+<template>
+  <el-dialog
+    :title="$t('superGrid.columnConfig')"
+    width="50%"
+    top="5vh"
+    append-to-body
+    :close-on-click-modal="false"
+    :visible="true"
+    :show-close="true"
+    @open="$emit('open')"
+    @opend="$emit('opend')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <div
+      class="operation-area"
+    >
+      <el-button type="primary" size="small" @click="saveConfig">
+        {{ $t('imatrixUIPublicModel.sure') }}
+      </el-button>
+      <el-button size="small" @click="resetConfig">
+        {{ $t('imatrixUIPublicModel.reset') }}
+      </el-button>
+      <el-button size="small" @click="$emit('close')">
+        {{ $t('imatrixUIPublicModel.cancel') }}
+      </el-button>
+      <span v-if="isDragColumn" style="padding-left:10px;color:red">({{ $t('superGrid.dragColumnOrderMessage') }})</span>
+    </div>
+    <el-table v-if="hasLoaded" :data="columns" max-height="450" class="custom-config-elTable">
+      <el-table-column property="label" :label="$t('superGrid.label')" width="220">
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.label">{{ scope.row.label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column property="showType" :label="$t('superGrid.isShow')" width="120">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.showType" :disabled="isDisabledShow(scope.row)" @change="changeShow(scope.row, $event)">
+            <el-option
+              :label="isDisabledShow(scope.row)?$t('superGrid.default'):$t('superGrid.show')"
+              value="default"
+            />
+            <el-option
+              :label="$t('superGrid.hidden')"
+              value="false"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column property="exportType" :label="$t('superGrid.isExportable')" width="120">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.exportType" :disabled="isDisabledExport(scope.row)" @change="changeExport(scope.row, $event)">
+            <el-option
+              :label="isDisabledExport(scope.row)?$t('superGrid.default'):$t('superGrid.export')"
+              value="default"
+            />
+            <el-option
+              :label="$t('superGrid.unExport')"
+              value="false"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="isDragColumn" property="displayOrderType" :label="$t('superGrid.displayOrder')" width="120">
+        <template slot-scope="scope">
+          <el-input v-if="scope.row.displayOrderType && scope.row.displayOrderType === 'custom'" v-model="scope.row.displayOrder" clearable size="mini" @clear="clearDisplayOrder(scope.row)" />
+          <el-select v-else v-model="scope.row.displayOrderType">
+            <el-option
+              :label="$t('superGrid.default')"
+              value="default"
+            />
+            <el-option
+              :label="$t('superGrid.custom')"
+              value="custom"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column property="widthType" :label="$t('superGrid.width')" width="120">
+        <template slot-scope="scope">
+          <el-input v-if="scope.row.widthType && scope.row.widthType === 'custom'" v-model="scope.row.width" size="mini" clearable @clear="clearWidth(scope.row)" />
+          <el-select v-else v-model="scope.row.widthType">
+            <el-option
+              :label="$t('superGrid.default')"
+              value="default"
+            />
+            <el-option
+              :label="$t('superGrid.custom')"
+              value="custom"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+<script>
+import Vue from 'vue'
+import store from './store'
+import Sortable from 'sortablejs'
+export default {
+  name: 'ColumnsConfig',
+  props: {
+    listCode: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      columns: [],
+      hasLoaded: false
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    this.listAllColumns().then((columns) => {
+      this.columns = columns
+      this.hasLoaded = true
+      this.$nextTick(() => {
+        this.dragColumnDisplayOrder()
+      })
+    })
+  },
+  methods: {
+    isDisabledShow(row) {
+      // 序号、复选框列不可以配置是否显示；占位符列不可以设置是否显示；当不是自定义的显示状态为false时，不可配置是否显示
+      return (row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
+      row.custom === true || (row.showType && row.showType !== 'false' && row.show === false)
+    },
+    isDisabledExport(row) {
+      // 序号、复选框列不可以配置是否导出；占位符列不可以设置是否导出；当不是自定义的导出状态为false时，不可配置是否导出
+      return (row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
+      row.custom === true || (row.exportType && row.exportType !== 'false' && row.exportable === false)
+    },
+    changeShow(row, value) {
+      if (value !== undefined && value === 'false') {
+        row.show = false
+      } else {
+        row.show = true
+      }
+    },
+    changeExport(row, value) {
+      if (value !== undefined && value === 'false') {
+        row.exportable = false
+      } else {
+        row.exportable = true
+      }
+    },
+    saveConfig() {
+      const params = {
+        'settingColumns': this.columns,
+        'listCode': this.listCode
+      }
+      this.$http.post(Vue.prototype.baseAPI + '/component/super-grids/setting-columns', params).then(data => {
+        this.$message({
+          type: 'success',
+          message: this.$t('imatrixUIMessage.saveSuccessfully'),
+          showClose: true
+        })
+        this.$emit('close', true)
+      })
+    },
+    resetConfig() {
+      this.$confirm(this.$t('superGrid.whetherToConfirmReset'), this.$t('imatrixUIMessage.tips'), {
+        confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+        cancelButtonText: this.$t('imatrixUIPublicModel.cancel'),
+        type: 'warning'
+      }).then(() => {
+        const url = Vue.prototype.baseAPI + '/component/super-grids/reset-columns/' + this.listCode
+        this.$http.delete(url).then(() => {
+          this.$message({
+            type: 'success',
+            message: this.$t('superGrid.resetSuccessful'),
+            showClose: true
+          })
+          this.listAllColumns().then((columns) => {
+            this.columns = columns
+            this.$emit('reset', true)
+          })
+        })
+      })
+    },
+    listAllColumns() {
+      return new Promise((resolve, reject) => {
+        const url = Vue.prototype.baseAPI + '/component/super-grids/all-list-columns/' + this.listCode
+        const gridParams = store.get(this.listCode)
+        const params = {}
+        const isSql = gridParams.isSql
+        this.isDragColumn = gridParams.colSetting.isDragColumn
+        if (typeof (isSql) !== 'undefined') {
+          params.isSql = isSql + ''
+        }
+        this.$http.post(url, params).then(columns => {
+          resolve(columns)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    clearDisplayOrder(row) {
+      row.displayOrderType = 'default'
+    },
+    clearWidth(row) {
+      row.widthType = 'default'
+    },
+    // 移动完成后的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]
+              selectCol.displayOrderType = 'custom'
+              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]
+                    col.displayOrderType = 'custom'
+                    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]
+                    col.displayOrderType = 'custom'
+                    if (i === arr.length - 1) {
+                    // 紧靠原始位置的上一个
+                      col[prop] = selectCol[prop]
+                    } else {
+                      col[prop] = arr[i + 1][prop]
+                    }
+                  }
+                }
+                selectCol[prop] = befProp
+              }
+            }
+          }
+        }
+      }
+    },
+    // 拖动列顺序
+    dragColumnDisplayOrder() {
+      if (!this.isDragColumn) {
+        return
+      }
+      return new Promise((resolve, reject) => {
+        const tbody = document.querySelector('.custom-config-elTable .el-table__body-wrapper tbody')
+        if (tbody != null) {
+          const vm = this
+          Sortable.create(tbody, {
+            onEnd({ newIndex, 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
+                  }
+                }
+              }
+              console.log('config拖动字段', vm.columns)
+              console.log('config拖动字段oldIndex', oldIndex)
+              console.log('config拖动字段newIndex', newIndex)
+              vm.hasLoaded = false
+              setTimeout(function() {
+                vm.hasLoaded = true
+                vm.$nextTick(() => {
+                  vm.indexAfterTheChangeUpdateDisplayOrder(vm.columns, oldIndex, newIndex, 'displayOrder')
+                  vm.dragColumnDisplayOrder()
+                })
+              }, 100)
+
+              // vm.hasLoaded = false
+              // // 添加setTimeout是解决拖动顺序后数组columns值改变了，但是列表没有重新渲染问题
+              // setTimeout(function() {
+              //   vm.hasLoaded = true
+              //   vm.$nextTick(() => {
+              //     vm.dragColumnDisplayOrder()
+              //   })
+              //   const currentColumn = vm.columns[oldIndex]
+              //   const targetColumn = vm.columns[newIndex]
+              //   const currentDisplayOrder = currentColumn.displayOrder
+              //   const targetDisplayOrder = targetColumn.displayOrder
+              //   vm.columns.splice(oldIndex, 1)
+              //   vm.columns.splice(newIndex, 0, currentColumn)
+              //   vm.$set(currentColumn, 'displayOrder', targetDisplayOrder)
+              //   vm.$set(currentColumn, 'displayOrderType', 'custom')
+              //   vm.$set(targetColumn, 'displayOrder', currentDisplayOrder)
+              //   vm.$set(targetColumn, 'displayOrderType', 'custom')
+              //   vm.hasLoaded = true
+              //   vm.$nextTick(() => {
+              //     vm.dragColumnDisplayOrder()
+              //   })
+              // }, 100)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>

package/packages/super-grid/src/custom-formatter.js

@@ -0,0 +1,250 @@
+import Vue from 'vue'
+import {
+  doFormat
+} from './formatter'
+import store from './store'
+import {
+  initialization,
+  jumpToPage
+} from '../../../src/utils/jump-page-utils'
+import {
+  analysisFileSetObj, otherFilesToStandard
+} from './utils'
+const customFormatter = {
+  /**
+   * 自定义格式化值
+   * @param {prop} 属性名
+   * @param {formatValue} 格式化后的值
+   * @param {format} 格式化方法
+   * @param {componentName} 组件名
+   */
+  customFormatValue(row, prop, format, rowIndex) {
+    // const start = new Date().getTime()
+    // console.log('---super-grid--customFormatValue--')
+    if (this.customFormat) {
+      let originalValue = row[prop]
+      if (this.isObjectProp(prop)) {
+        originalValue = this.objectPropOriginalValue(row, prop)
+      }
+      const formatValue = doFormat(this.column, originalValue)
+      const component = format.call(this, originalValue, formatValue, row, this.column, rowIndex)
+      if (typeof (component) === 'undefined') {
+        return false
+      } else {
+        Vue.component(prop + rowIndex, component)
+      }
+
+      // const end = new Date().getTime()
+      // console.log('---super-grid--customFormatValue--time1=', (end - start))
+      return true
+    } else {
+      // const end = new Date().getTime()
+      // console.log('---super-grid--customFormatValue--time2=', (end - start))
+      return false
+    }
+  },
+
+  isObjectProp(prop) {
+    // const start = new Date().getTime()
+    // console.log('---super-grid--isObjectProp--')
+    if (prop && prop.indexOf('.') > 0) {
+      // const end = new Date().getTime()
+      // console.log('---super-grid--isObjectProp--time1=', (end - start))
+      return true
+    } else {
+      // const end = new Date().getTime()
+      // console.log('---super-grid--isObjectProp--time2=', (end - start))
+      return false
+    }
+  },
+
+  objectPropOriginalValue(row, prop) {
+    try {
+      // console.log('---super-grid--objectPropOriginalValue--')
+      let objValue = row
+      if (prop && prop.indexOf('.') > 0) {
+        const props = prop.split('.')
+        props.forEach(subProp => {
+          if (objValue) {
+            objValue = objValue[subProp]
+          } else {
+            objValue = ''
+            throw objValue
+          }
+        })
+        return objValue
+      } else {
+        return row[prop]
+      }
+    } catch (e) {
+      // console.log(e)
+      return ''
+    }
+  },
+
+  objectPropValue(row, prop) {
+    return this.formatter(row, prop, this.column)
+  },
+  // 获取显示的值
+  // 附件类型，显示值与实际值不相同。如果时子表多选，需要单独判断
+  objectPropValueTwo(row, column) {
+    if (column.componentType === 'annex' || column.componentType === 'multipartUpload') {
+      // 判断是否是对象集合（子表存储）
+      const fileSetObj = JSON.parse(column.fileSet)
+      if (fileSetObj.childAnnexDataTableCode) {
+        // 获取存好的json并解析
+        const keyValueParam = analysisFileSetObj(fileSetObj, this.isSql)
+        // 子表存储。返回最后一个对象的展示名称
+        const fileArr = this.objectPropValue(row, column.prop)
+        if (fileArr && fileArr.length > 0) {
+          const fileList = otherFilesToStandard(fileSetObj, keyValueParam, fileArr, null)
+          return fileList[fileList.length - 1].showName
+        }
+      } else {
+        return this.objectPropValue(row, column.prop)
+      }
+    } else if (column.formatter && column.formatter.type === 'files') {
+      // 判断是否是对象集合（子表存储）
+      const fileSetObj = JSON.parse(column.formatter.options.fileSet)
+      if (fileSetObj.childAnnexDataTableCode) {
+        // 获取存好的json并解析
+        const keyValueParam = analysisFileSetObj(fileSetObj, this.isSql)
+        // 子表存储。返回最后一个对象的展示名称
+        const fileArr = this.objectPropValue(row, column.prop)
+        if (fileArr && fileArr.length > 0) {
+          const fileList = otherFilesToStandard(fileSetObj, keyValueParam, fileArr, null)
+          return fileList[fileList.length - 1].showName
+        }
+      } else {
+        return this.objectPropValue(row, column.prop)
+      }
+    } else {
+      return this.objectPropValue(row, column.prop)
+    }
+  },
+  formatter(row, prop, column) {
+    const cellValue = this.objectPropOriginalValue(row, prop)
+    if (this.columnFormatter !== undefined && this.columnFormatter.type === 'custom') {
+      // 自定义事件
+      let funName
+      if (this.columnFormatter.options && this.columnFormatter.options.format) {
+        funName = this.columnFormatter.options.format
+      }
+      if (funName && funName !== null && funName !== '') {
+        const gridParams = store.get(this.listCode)
+        if (gridParams.options && gridParams.options['eventCallBack'] &&
+          gridParams.options['eventCallBack'][funName] && typeof (gridParams.options['eventCallBack'][funName]) === 'function') {
+          const param = {
+            value: cellValue,
+            row: row,
+            column: this.column,
+            prop: prop
+          }
+          return gridParams.options['eventCallBack'][funName].call(this, param)
+        } else {
+          return doFormat(column, cellValue)
+        }
+      } else {
+        return doFormat(column, cellValue)
+      }
+    } else {
+      return doFormat(column, cellValue)
+    }
+  },
+  getColumnValue(row, column) {
+    const prop = column.prop
+    let originalValue = row[prop]
+    if (this.isObjectProp(prop)) {
+      originalValue = this.objectPropOriginalValue(row, prop)
+    }
+    const formatValue = doFormat(column, originalValue)
+    return {
+      originalValue,
+      formatValue
+    }
+  },
+  onClickFun(row, column, onClick, rowIndex) {
+    const values = this.getColumnValue(row, column)
+    onClick.call(this, values.originalValue, values.formatValue, row, column, rowIndex)
+  },
+  isShowButtonFun(row, column, isShowFun, rowIndex) {
+    if (isShowFun === undefined) {
+      return true
+    }
+    if (typeof (isShowFun) === 'function') {
+      const values = this.getColumnValue(row, column)
+      let isShow = isShowFun.call(this, values.originalValue, values.formatValue, row, column, rowIndex)
+      if (isShow === undefined) {
+        isShow = true
+      }
+      return isShow
+    } else {
+      return isShowFun
+    }
+  },
+  // 超链接解析
+  getHyperLinkSetting(column, row, isSql, additionalParamerter, contextParameter, tableName, listCode) {
+    const gridParams = store.get(listCode)
+    let parentFormData = null
+    if (gridParams.options.extraParam && gridParams.options.extraParam.entityMap) {
+      parentFormData = gridParams.options.extraParam.entityMap
+    }
+    let hyperLinkResult = {}
+    let jumpPageJson
+    if (column && column.formatter && column.formatter.options && column.formatter.options.format) {
+      jumpPageJson = column.formatter.options.format
+    }
+    if (jumpPageJson && jumpPageJson !== '') {
+      // 解析是否需要显示该超链接
+      const result = initialization(JSON.parse(jumpPageJson), row, isSql, additionalParamerter, contextParameter, tableName, parentFormData)
+      // console.log('getHyperLinkSetting--resut=', result)
+      if (result && result.label && result.label !== '') {
+        console.log('label存在')
+      } else {
+        result.label = this.objectPropValueTwo(row, column)
+      }
+      if (result && result.title && result.title !== '') {
+        console.log('title存在')
+      } else {
+        result.title = result.label
+      }
+      hyperLinkResult = result
+    } else {
+      // 表示显示超链接
+      hyperLinkResult.visible = true
+      hyperLinkResult.label = this.objectPropValueTwo(row, column)
+      hyperLinkResult.title = hyperLinkResult.label
+    }
+    return hyperLinkResult
+  },
+  // 点击超链接
+  clickHyperLink(column, row, listCode, rowIndex) {
+    let jumpPageJson
+    if (column && column.formatter && column.formatter.options && column.formatter.options.format) {
+      jumpPageJson = column.formatter.options.format
+    }
+    if (jumpPageJson && jumpPageJson !== '') {
+      // 解析是否需要显示该超链接
+      const gridParams = store.get(listCode)
+      let parentFormData = null
+      if (gridParams.options.extraParam && gridParams.options.extraParam.entityMap) {
+        parentFormData = gridParams.options.extraParam.entityMap
+      }
+      console.log('ridParams.options.extraParam.entityMap', gridParams.options.extraParam)
+      jumpToPage(JSON.parse(jumpPageJson), gridParams.system, row.id ? row.id : row.ID, row, gridParams.additionalParamMap, null, null, parentFormData).then((openPageParams) => {
+        console.log('clickHyperLink--openPageParams===', openPageParams)
+        if (openPageParams) {
+          // 点击列表组件中某元素弹出的页面
+          openPageParams._position = 'list'
+          openPageParams._listCode = listCode
+          openPageParams._rowIndex = rowIndex
+          // 行编辑的记录
+          openPageParams.row = row
+          // 通知父页面弹出页面
+          this.$emit('open-page', openPageParams)
+        }
+      })
+    }
+  }
+}
+export default customFormatter