imatrix-ui 2.8.21-dw → 2.8.21

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

@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()

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

@@ -0,0 +1,55 @@
+const events = {
+  select: function(selection, row) {
+    this.$emit('select', selection, row)
+  },
+  selectAll: function(selection) {
+    this.$emit('select-all', selection)
+  },
+  selectionChange: function(selection) {
+    this.$emit('selection-change', selection)
+  },
+  cellMouseEnter: function(row, column, cell, event) {
+    this.$emit('cell-mouse-enter', row, column, cell, event)
+  },
+  cellMouseLeave: function(row, column, cell, event) {
+    this.$emit('cell-mouse-leave', row, column, cell, event)
+  },
+  cellClick: function(row, column, cell, event) {
+    this.$emit('cell-click', row, column, cell, event)
+  },
+  cellDblClick: function(row, column, cell, event) {
+    this.$emit('cell-dblclick', row, column, cell, event)
+  },
+  rowClick: function(row, column, event) {
+    this.$emit('row-click', row, column, event)
+  },
+  rowContextMenu: function(row, column, event) {
+    this.$emit('row-contextmenu', row, column, event)
+  },
+  rowDblClick: function(row, column, event) {
+    this.$emit('row-dblclick', row, column, event)
+  },
+  headerClick: function(column, event) {
+    this.$emit('header-click', column, event)
+  },
+  headerContextMenu: function(column, event) {
+    this.$emit('header-contextmenu', column, event)
+  },
+  // super-grid.vue中已经做了处理
+  // sortChange: function({ column, prop, order }) {
+  //   this.$emit('sort-change', { column, prop, order })
+  // },
+  filterChange: function(filters) {
+    this.$emit('filter-change', filters)
+  },
+  currentChange: function(currentRow, oldCurrentRow) {
+    this.$emit('current-change', currentRow, oldCurrentRow)
+  },
+  headerDragEnd: function(newWidth, oldWidth, column, event) {
+    this.$emit('header-dragend', newWidth, oldWidth, column, event)
+  },
+  expandChange: function(row, expandedRows) {
+    this.$emit('expand-change', row, expandedRows)
+  }
+}
+export default events

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

@@ -0,0 +1,226 @@
+import Validator from 'async-validator'
+import store from './store'
+import Vue from 'vue'
+import {
+  isDisableEdit
+} from './utils'
+import {
+  getI18n
+} from '../../../src/utils/util'
+
+function setObjectPropRule(editField, rules, leafRule) {
+  const rule = {}
+  const prop = editField.prop
+  if (!rules) {
+    rules = {}
+  }
+  let num = 0
+  const props = prop.split('.')
+  props.forEach(subProp => {
+    let objectRule
+    if (num === props.length - 1) {
+      // 说明是最后一个
+      objectRule = getEndObjectRule(rule, props, subProp)
+      objectRule.fields[subProp] = leafRule
+    } else {
+      let lastObjectRule
+      if (num === 0) {
+        objectRule = rules
+      } else {
+        lastObjectRule = getLastObjectRule(rule, props, props[num - 1])
+        objectRule = lastObjectRule.fields
+      }
+      if (!objectRule[subProp]) {
+        objectRule[subProp] = {
+          type: 'object',
+          required: true,
+          fields: {}
+        }
+      }
+      if (num === 0) {
+        rule[subProp] = objectRule[subProp]
+      } else {
+        lastObjectRule.fields[subProp] = objectRule[subProp]
+      }
+    }
+    num++
+  })
+  return rule
+}
+
+function getLastObjectRule(rule, props, currentProp) {
+  let lastObjectdRule
+  for (let i = 0; i < props.length; i++) {
+    const subProp = props[i]
+    if (i === 0) {
+      lastObjectdRule = rule[subProp]
+    } else {
+      lastObjectdRule = lastObjectdRule.fields[props[i]]
+    }
+    if (subProp === currentProp) {
+      break
+    }
+  }
+  return lastObjectdRule
+}
+
+function getEndObjectRule(rule, props, currentProp) {
+  let lastObjectdRule
+  for (let i = 0; i < props.length; i++) {
+    if (i === 0) {
+      lastObjectdRule = rule[props[i]]
+    } else {
+      lastObjectdRule = lastObjectdRule.fields[props[i]]
+    }
+    if (i !== props.length - 1) {
+      const leafSubProp = props[i + 1]
+      if (leafSubProp === currentProp) {
+        break
+      }
+    }
+  }
+  return lastObjectdRule
+}
+
+/**
+ * @param {editFieldInfos} Array 编辑字段信息集合
+ */
+function getValidator(listCode) {
+  if (!listCode) {
+    listCode = store.get('_list_code')
+  }
+  const gridParams = store.get(listCode)
+  const editFieldInfos = gridParams.columns
+  const rules = {}
+  if (editFieldInfos) {
+    editFieldInfos.forEach(editField => {
+      const prop = editField.prop
+      if (prop && editField.validations && !isDisableEdit(prop, listCode)) {
+        const validations = JSON.parse(editField.validations)
+        validations.forEach(item => {
+          if (item.pattern) {
+            // 后台传递的是正则字符串，不能直接使用
+            item.pattern = new RegExp(item.pattern)
+          }
+        })
+        if (prop.indexOf('.') > 0) {
+          setObjectPropRule(editField, rules, validations)
+        } else {
+          if (validations && validations.length > 0) {
+            rules[prop] = [...validations]
+          }
+        }
+      }
+    })
+  }
+  // console.log('rules', rules)
+  return rules
+}
+/**
+ * 验证实体
+ * @param {*} entity 实体记录
+ * @param {*} listCode 列表编码
+ * @param {*} $index 当前行下标
+ * @param {*} rules 验证规则
+ * @param {*} isSubTableShowPage 表单子表是否显示分页区域
+ * @param {*} pageNum  当前记录在子表中的第几页
+ * @returns void
+ */
+
+function validator(entity, listCode, $index, rules, isSubTableShowPage, pageNum, pageRowIndex) {
+  return validatorEntity(entity, listCode, $index, rules, true, isSubTableShowPage, pageNum, pageRowIndex)
+}
+
+function validatorEntity(entity, listCode, $index, rules, isShouldRepeateValdate, isSubTableShowPage, pageNum, pageRowIndex) {
+  let result = false
+  let validateRules
+  if (rules) {
+    validateRules = rules
+  } else {
+    validateRules = getValidator(listCode)
+  }
+  const validator = new Validator(validateRules)
+  if (!listCode) {
+    listCode = store.get('_list_code')
+  }
+
+  const gridParams = store.get(listCode)
+  validator.validate(entity, {
+    first: true
+  },
+  (errors, fields) => {
+    let fieldName
+    if (errors) {
+      const message = errors[0]['message']
+      fieldName = errors[0]['field']
+      if ($index !== null && $index !== undefined && gridParams.gridData.length > $index) {
+        Vue.set(gridParams.gridData[$index], 'validateErrorField', errors[0]['field'])
+        if (isSubTableShowPage !== undefined && isSubTableShowPage && pageNum !== undefined && pageRowIndex !== undefined) {
+          // 表示表单子表验证时
+          result = getI18n().t('superGrid.pageRecordLine', {
+            pageNum: pageNum,
+            row: pageRowIndex
+          }) + '，' + message
+        } else {
+          // 表示列表记录验证时
+          result = getI18n().t('superGrid.recordLine', {
+            row: ($index + 1)
+          }) + '，' + message
+        }
+      } else if (gridParams.$rowIndex !== null && gridParams.$rowIndex !== undefined && gridParams.gridData.length > gridParams.$rowIndex) {
+        Vue.set(gridParams.gridData[gridParams.$rowIndex], 'validateErrorField', errors[0]['field'])
+        result = getI18n().t('superGrid.recordLine', {
+          row: (gridParams.$rowIndex + 1)
+        }) + '，' + message
+      }
+    } else {
+      // 验证成功后，将最后验证失败的字段置空
+      if ($index !== null && $index !== undefined && gridParams.gridData.length > $index) {
+        if (isSubTableShowPage !== undefined && isSubTableShowPage) {
+          Vue.set(gridParams.subTableData[$index], 'validateErrorField', '')
+        } else {
+          Vue.set(gridParams.gridData[$index], 'validateErrorField', '')
+        }
+      } else if (gridParams.$rowIndex !== null && gridParams.$rowIndex !== undefined && gridParams.gridData.length > gridParams.$rowIndex) {
+        Vue.set(gridParams.gridData[gridParams.$rowIndex], 'validateErrorField', '')
+      } else if ($index !== null && $index !== undefined && isSubTableShowPage !== undefined && isSubTableShowPage && gridParams.gridData.length <= $index) {
+        // 表示可能是子表分页时，清空子表的
+        Vue.set(gridParams.subTableData[$index], 'validateErrorField', '')
+      }
+
+      result = true
+    }
+    if (fieldName && isShouldRepeateValdate === true) {
+      // 将实体中字段名改为大写，然后再验证一次该字段是否已填值。因为mysql中jdbc获得实体记录字段名是小写的，但是验证规则中字段名是大写的，所以会导致字段验证失败
+      const reg1 = /[A-Z]+/ // 大写字母
+      if ((result !== undefined && result + '' !== 'true' && result + '' !== 'false') && (gridParams.isSql !== undefined && gridParams.isSql === true && reg1.test(fieldName) && entity[fieldName.toLowerCase()] !== undefined)) {
+        // 表示验证失败，需要重新验证一次
+        const copyEntity = JSON.parse(JSON.stringify(entity))
+        copyEntity[fieldName.toUpperCase()] = entity[fieldName.toLowerCase()]
+        delete copyEntity[fieldName.toLowerCase()]
+        result = validatorEntity(copyEntity, listCode, $index, rules, false)
+      }
+      if (result !== undefined && result + '' !== 'true' && result + '' !== 'false') {
+        // 表示验证失败
+        if (gridParams.showValidateError) {
+          gridParams.showValidateError = false
+          Vue.prototype.$message({
+            showClose: true,
+            message: result,
+            type: 'warning',
+            onClose: (messageEle) => {
+              gridParams.showValidateError = true
+            }
+          })
+        }
+      }
+    }
+  })
+
+  return result
+}
+
+export default {
+  validator,
+  getValidator
+}

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

@@ -0,0 +1,181 @@
+import { isDynamicDataSourceSource } from './utils'
+const formatter = {
+  number: function(inputValue, options) {
+    // 小数位数
+    const precision = options.precision
+    // 数字符号
+    const sign = options.sign
+    // 是否显示千分位
+    const isDelimiter = options.delimiter
+    // 是否显示科学计数法
+    const scientific = options.scientific
+    // 几位开始计算
+    let scientificNum = options.scientificNum
+    if (inputValue !== undefined && inputValue != null) {
+      if (precision > 0) {
+        // 表示有小数
+        inputValue = parseFloat(inputValue)
+        inputValue = inputValue.toFixed(precision)
+      }
+      if (isDelimiter) {
+        const inputValueStr = inputValue + ''
+        const value = inputValueStr.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
+        if (sign) {
+          return value + sign
+        } else {
+          return value
+        }
+      } else if (scientific != null) {
+        let isScientific = false
+        if (scientificNum) {
+          scientificNum = parseInt(scientificNum)
+        } else {
+          scientificNum = 11
+        }
+        if (inputValue.length >= scientificNum) {
+          isScientific = true
+        }
+        if (isScientific) {
+          inputValue = '' + inputValue
+          inputValue = parseFloat(inputValue)
+          inputValue = inputValue.toExponential() // 转换为标准的科学计数法形式（字符串）
+          // const tmpArray = eformat.match(/\d(?:\.(\d*))?e([+-]\d+)/) // 分离出小数值和指数值
+          // inputValue = inputValue.toFixed(Math.max(0, (tmpArray[1] || '').length - tmpArray[2]))
+        }
+      } else {
+        if (sign) {
+          return inputValue + sign
+        } else {
+          return inputValue
+        }
+      }
+    }
+
+    return inputValue
+  },
+  currency: function(value, options) {
+    // 单位：$ 或 ￥
+    const sign = options.sign
+    return sign + this.number(value, options)
+  },
+  date: function(value, options) {
+    // format格式，例如：yyyy-m-d,yyyy-m-d hh:mm:ss等等
+    const format = options.format
+    if (value != null) {
+      const date = new Date(value)
+      var y = date.getFullYear()
+      var m = date.getMonth() + 1
+      var d = date.getDate()
+      var h = date.getHours()
+      var min = date.getMinutes()
+      var s = date.getSeconds()
+      if (m < 10) {
+        m = '0' + m
+      }
+      if (d < 10) {
+        d = '0' + d
+      }
+      if (h < 10) {
+        h = '0' + h
+      }
+      if (min < 10) {
+        min = '0' + min
+      }
+      if (s < 10) {
+        s = '0' + s
+      }
+      const newValue = format.replace('yyyy', y)
+        .replace('mm', min)
+        .replace('M', m)
+        .replace('m', m)
+        .replace('d', d)
+        .replace('hh', h)
+        .replace('ss', s)
+        // 判断格式化的值是否包含NaN，如果包含NaN取数据库的值
+      if (newValue.indexOf('NaN') === -1) {
+        return newValue
+      }
+      return value
+    }
+    return value
+  },
+  time: function(value, options) {
+    return this.date(value, options)
+  },
+  percent: function(value, options) {
+    if (value || value >= 0) {
+      return this.number(value, options) + '%'
+    }
+    return value
+  }
+}
+
+export function doFormat(column, value) {
+  value = doFormatWithValueSet(column, value)
+  if (value === undefined || value === null) {
+    return
+  }
+  // 获得默认的格式设置
+  if (column.formatter === undefined) {
+    if (column.dataType === 'DATE') {
+      // 默认的“DATE”类型的格式设置
+      column.formatter = {
+        type: 'date',
+        options: {
+          format: 'yyyy-m-d'
+        }
+      }
+    } else if (column.dataType === 'TIME') {
+      // 默认的“TIME”类型的格式设置
+      column.formatter = {
+        type: 'time',
+        options: {
+          format: 'yyyy-m-d hh:mm:ss'
+        }
+      }
+    }
+  }
+  const columnFormatter = column.formatter
+  if (columnFormatter !== undefined && formatter[columnFormatter.type] !== undefined) {
+    return formatter[columnFormatter.type](value, columnFormatter.options)
+  } else {
+    return value
+  }
+}
+
+export function doFormatWithValueSet(column, value) {
+  if (value === undefined || value === null) {
+    return value
+  }
+  const valueSet = column.valueSet
+  // 先处理值设置再处理格式化设置：即会对值设置的结果进行格式化设置
+  if (valueSet !== undefined) {
+    if (column.componentType === 'multiselect' && !isDynamicDataSourceSource(column)) {
+      if (typeof (value) === 'number') {
+        // 当value是0时， value instanceof Number 为false
+        value += ''
+      }
+      const beforeLabel = (value + '').split(',')
+      const label = []
+      beforeLabel.forEach(element => {
+        const item = valueSet.filter(item => {
+          return item.value === element + ''
+        })
+        if (item.length > 0) {
+          label.push(item[0].label)
+        }
+      })
+      value = label.join(',')
+    } else {
+      const item = valueSet.filter(item => {
+        return item.value === value + ''
+      })
+      if (item.length > 0) {
+        // 数据库的原始值要显示成label值，后续对这个label进行格式化（不是处理原始值）
+        value = item[0].label
+      }
+    }
+  }
+  return value
+}
+

package/packages/super-grid/src/group-column.vue

@@ -0,0 +1,100 @@
+
+<template>
+  <el-table-column
+    width="150"
+    :align="column.groupHeader?'center':''"
+  >
+    <template v-slot:header>
+      <span class="cell--span" :title="label" v-html="label" />
+    </template>
+    <template v-if="customFormat">
+      <component
+        :is="child.prop?'NormalColumn':'GroupColumn'"
+        v-for="(child, index) in visibleChildren"
+        :key="child.label + index"
+        :column="child"
+        :is-sql="isSql"
+        :custom-format="child.prop ?customFormat[child.prop] : customFormat"
+        :list-code="listCode"
+        @findIndex="findIndex(scope.$index)"
+        @refresData="refresData"
+        @refresPortData="refresPortData"
+        @refresPortsData="refresPortsData"
+        @refresMainTableFields="refresMainTableFields"
+      />
+    </template>
+    <template v-else>
+      <component
+        :is="child.prop?'NormalColumn':'GroupColumn'"
+        v-for="(child, index) in visibleChildren"
+        :key="child.label + index"
+        :is-sql="isSql"
+        :column="child"
+        :list-code="listCode"
+      />
+    </template>
+  </el-table-column>
+</template>
+<script>
+import NormalColumn from './normal-column'
+import GroupColumn from './group-column'
+import { doFormatWithValueSet } from './formatter'
+export default {
+  name: 'GroupColumn',
+  components: {
+    NormalColumn,
+    GroupColumn
+  },
+  props: {
+    column: {
+      type: Object,
+      default: null
+    },
+    // 操作列、占位符列内容显示的函数，格式为：{'属性名':方法},例如：{'name':viewUser,'operation':showOperation}
+    customFormat: {
+      type: Object,
+      default: null
+    },
+    listCode: {
+      type: String,
+      default: null
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      label: null // 标题
+    }
+  },
+  computed: {
+    visibleChildren() {
+      if (this.column.children) {
+        return this.column.children.filter(column => {
+          return column.show === undefined || column.show
+        })
+      } else {
+        return []
+      }
+    }
+  },
+  created() {
+    this.label = this.getHeader()
+  },
+  methods: {
+    getHeader() {
+      if (!this.column.titleValueSet) {
+        return this.column.label.replace(/\\n/g, '</br>')
+      } else {
+        return this.formatHeader()
+      }
+    },
+    formatHeader() {
+      return doFormatWithValueSet(this.column.titleValueSetValue, this.column.label)
+    }
+  }
+}
+</script>
+

package/packages/super-grid/src/header-context-menu.vue

@@ -0,0 +1,87 @@
+<template>
+  <ul class="context-menu">
+    <li v-for="menu in buttomArr" :key="menu.name">
+      <i :class="menu.icon" /><span @click="buttonClick(menu.event, menu)">{{ menu.label }}</span>
+    </li>
+  </ul>
+</template>
+<script>
+// import Vue from 'vue'
+
+export default {
+  name: 'HeaderContextMenu',
+  components: {
+  },
+  filters: {
+  },
+  props: {
+    buttomArr: {
+      type: Array,
+      default: null
+    },
+    column: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+  created() {
+    console.log('12345', this.buttomArr)
+  },
+  methods: {
+    // 操作按钮的点击事件
+    buttonClick(event, data) {
+      if (event) {
+        if (typeof (event) === 'function') {
+          event.call(this, data, this.column)
+        } else {
+          this.$emit(event, data, this.column)
+        }
+        this.$emit('clearHeaderContextmenu')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+li {
+  color: #333;
+}
+.context-menu {
+  position: fixed;
+  background: #fff;
+  z-index: 999;
+  padding:5px;
+  margin:0;
+  margin-top: 30px
+}
+.context-menu li {
+  min-width: 75px;
+  height: 28px;
+  line-height: 28px;
+  text-align: left;
+  color: #1a1a1a;
+}
+.context-menu li:hover {
+  background: #42b983;
+  color: #fff;
+}
+.context-menu {
+    border: 1px solid #eee;
+    box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
+    border-radius: 5px;
+}
+li {
+    list-style-type:none;
+}
+</style>

package/packages/super-grid/src/index-column.vue

@@ -0,0 +1,51 @@
+
+<template>
+  <el-table-column
+    align="center"
+    :fixed="fixed"
+    :width="column.width?column.width:'80'"
+  >
+    <template v-slot:header>
+      <span class="cell--span">{{ $t('superGrid.index') }}</span>
+    </template>
+    <template slot-scope="scope">
+      <span class="cell--span">
+        {{ scope.$index + 1 }}
+      </span>
+    </template>
+  </el-table-column>
+</template>
+<script>
+/**
+ * 序号列
+ */
+export default {
+  name: 'IndexColumn',
+  components: {
+  },
+  props: {
+    column: {
+      type: Object,
+      default: null
+    },
+    isLineEdit: {
+      type: Boolean,
+      default: false
+    }
+
+  },
+  computed: {
+    fixed() {
+      if (this.column.fixed && (this.column.fixed === 'false' || this.column.fixed === '')) {
+        return false
+      }
+      // 序号只支持左固定
+      if (this.column.fixed && (this.column.fixed === 'right')) {
+        return 'left'
+      }
+      return this.column.fixed
+    }
+  }
+}
+</script>
+