imatrix-ui 0.0.15 → 0.1.1-up

package/components/super-grid/eventBus.js

@@ -0,0 +1,2 @@
+import * as Vue from 'vue'
+export default {}

package/components/super-grid/events.js

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

package/components/super-grid/formValidatorUtil.js

@@ -0,0 +1,300 @@
+import Validator from 'async-validator'
+import store from './store'
+import * as 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
+        ) {
+          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
+        ) {
+          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) {
+            gridParams.subTableData[$index]['validateErrorField'] = ''
+          } else {
+            gridParams.gridData[$index]['validateErrorField'] = ''
+          }
+        } else if (
+          gridParams.$rowIndex !== null &&
+          gridParams.$rowIndex !== undefined &&
+          gridParams.gridData.length > gridParams.$rowIndex
+        ) {
+          gridParams.gridData[gridParams.$rowIndex]['validateErrorField'] = ''
+        } else if (
+          $index !== null &&
+          $index !== undefined &&
+          isSubTableShowPage !== undefined &&
+          isSubTableShowPage &&
+          gridParams.gridData.length <= $index
+        ) {
+          // 表示可能是子表分页时，清空子表的
+          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
+            window.$vueApp.config.globalProperties.$message({
+              showClose: true,
+              message: result,
+              type: 'warning',
+              onClose: (messageEle) => {
+                gridParams.showValidateError = true
+              },
+            })
+          }
+        }
+      }
+    }
+  )
+
+  return result
+}
+
+export default {
+  validator,
+  getValidator,
+}

package/components/super-grid/formatter.js

@@ -0,0 +1,190 @@
+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/components/super-grid/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.vue'
+// todo 组件自己引用自己
+// import GroupColumn from './group-column.vue'
+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>