three-trees-ui 1.0.0

package/src/mixins/ganged.js

@@ -0,0 +1,131 @@
+import utils from '@/utils.js'
+import CustomQuery from '@/services/CustomQuery'
+
+export default {
+  props: {
+    ganged: Object,
+    props: {
+      type: Object,
+      default: function() {
+        return {
+          key: 'key',
+          value: 'value',
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      _preParamsVal: null,
+    }
+  },
+  computed: {
+    propKey: function() {
+      if (this.props && this.props.key) {
+        return this.props.key
+      }
+      return 'key'
+    },
+    propValue: function() {
+      if (this.props && this.props.value) {
+        return this.props.value
+      }
+      return 'value'
+    },
+  },
+  methods: {
+    /**
+     * 执行关联查询
+     * @param {Object} params 构建好的关联查询条件，传null时会采用默认方法构建查询参数
+     * @param {Boolean} morph  是否按照valueBind/labelBind重新组织返回的options
+     * @returns Promise  resolve(options)、reject(error)
+     */
+    doCustomQuery: function(params, morph) {
+      if (!this.ganged || !this.ganged.alias) {
+        return new Promise((resolve) => resolve(null))
+      }
+      const paramsVal = params || this._prepareLoadParams(this.ganged.bind)
+      // 查询参数不变时不触发关联查询
+      if (utils.objectEquals(this._preParamsVal, paramsVal)) {
+        return new Promise((resolve) => resolve(null))
+      }
+      // 记录上一次关联查询的参数
+      this._preParamsVal = paramsVal
+      return new Promise((resolve, reject) => {
+        CustomQuery.load(this.ganged.alias, paramsVal)
+          .then((data) => {
+            if (!morph) {
+              // 直接返回原始数据
+              resolve(data)
+            } else {
+              // 按照回填值来构建选项
+              const options = []
+              data.forEach((m) => {
+                const opt = {}
+                if (this.ganged.valueBind) {
+                  opt[this.propKey] = m[this.ganged.valueBind]
+                }
+                if (this.ganged.labelBind) {
+                  opt[this.propValue] = m[this.ganged.labelBind]
+                }
+                options.push(opt)
+              })
+              // 指定了值绑定关系时，按照值对数组进行去重处理。
+              if (this.ganged.valueBind) {
+                resolve(options.unique(this.propKey))
+              } else {
+                resolve(options)
+              }
+            }
+          })
+          .catch((error) => {
+            CustomQuery._throwException(error)
+            reject(error)
+          })
+      })
+    },
+    // 准备查询参数
+    _prepareLoadParams: function(condition) {
+      let params = {}
+      if (condition && !utils.isEmpty(condition)) {
+        // 获取当前控件是否在子表某行中
+        let { index } = utils.getSubScopeElAndIndex(this.$el)
+
+        const pInst = utils.getOnlineFormInstance(this)
+        Object.keys(condition).forEach((k) => {
+          const bindSet = condition[k]
+          let val = null
+          // 参数绑定是对象
+          if (bindSet.constructor == Object) {
+            const bindSetKey = bindSet['key']
+            const defaultVal = bindSet['default']
+            const groovyScript = bindSet['groovyScript']
+            if (bindSetKey) {
+              val =
+                index == null
+                  ? utils.getValueByPath(pInst, bindSetKey)
+                  : utils.getValueByPath(pInst, bindSetKey, index)
+            }
+            if (val == null || val == undefined) {
+              val = defaultVal
+            }
+            if ((val == null || val == undefined) && groovyScript) {
+              val = '{"groovyScript":"' + groovyScript + '"}'
+            }
+          }
+          // 参数绑定是字符串
+          else if (bindSet.constructor == String) {
+            val =
+              index == null
+                ? utils.getValueByPath(pInst, bindSet)
+                : utils.getValueByPath(pInst, bindSet, index)
+          }
+          if (!utils.isEmpty(val)) {
+            params[k] = val
+          }
+        })
+      }
+      return params
+    },
+  },
+}

package/src/mixins/inputName.js

@@ -0,0 +1,30 @@
+import utils from '@/utils.js'
+import { t } from '@/locale'
+
+// 组件的name属性
+export default {
+  props: {
+    name: String,
+    modelName: String,
+    size: {
+      type: String,
+      validator(val) {
+        return ['large', 'medium', 'small', 'mini'].includes(val)
+      },
+    },
+    placeholder: {
+      type: String,
+      default() {
+        return t('ht.common.enter')
+      },
+    },
+  },
+  computed: {
+    inputSize() {
+      return this.size || this.$HOTENT.size
+    },
+    inputName: function() {
+      return this.name ? `${this.name}__${utils.getName()}` : utils.getName()
+    },
+  },
+}

package/src/mixins/linkage.js

@@ -0,0 +1,414 @@
+import utils from '@/utils.js'
+import _ from 'lodash'
+
+const service = {
+  // 对联动规则进行处理
+  linkageHandler: (_me, exp) => {
+    if (!_me || !_me._isVue) {
+      throw '传入的对象为空或者不是VueComponent类型.'
+    }
+    if (!exp || (exp.constructor !== Object && exp.constructor !== Array)) {
+      throw `传入的对象${exp}为空，或者既不是Object类型也不是Array类型.`
+    }
+    let linkageExp = exp
+    if (exp.constructor === Object) {
+      linkageExp = [exp]
+    }
+    const pInst = utils.getOnlineFormInstance(_me)
+    if (!pInst) {
+      throw '没有获取到控件所在的表单'
+    }
+    // 当前控件的联动轨迹
+    _me.traces = {}
+    _me.subtableRestores = []
+    _me.subtableApplies = []
+
+    //修改子表或孙表行内联动权限
+    const operationEleByPermission = function (n, permission) {
+      let idxObj = utils.getSubScopeElAndIndex(_me.$el)
+      let tpaths = n.target.split('.')
+      let fPoint =
+        n.boType +
+        '_' +
+        tpaths[tpaths.length - 2] +
+        '_' +
+        tpaths[tpaths.length - 1] +
+        '_' +
+        idxObj.index
+      let basePath = 'permission.subFields'
+      //孙表时，获取孙表所属子表序号
+      if (n.boType == 'sun') {
+        const subIdxObj = utils.getSubScopeElAndIndex(
+          idxObj.subScopeEl.parentElement
+        )
+        fPoint =
+          n.boType +
+          '_' +
+          tpaths[tpaths.length - 2] +
+          '_' +
+          tpaths[tpaths.length - 1] +
+          '_' +
+          subIdxObj.index +
+          '_' +
+          idxObj.index
+      }
+      if (!pInst.permission['subFields']) {
+        utils.setValueByPath(pInst, basePath, {})
+      }
+      utils.setValueByPath(pInst, basePath + '.' + fPoint, permission)
+      utils.setValueByPath(
+        pInst,
+        `permission.fields.${tpaths[tpaths.length - 2]}.${tpaths[tpaths.length - 1]
+        }`,
+        permission
+      )
+      pInst.permission = Object.assign({}, pInst.permission)
+    }
+
+    // 执行隐藏并清空子表数据
+    const doHideAndClearSubtable = function (subHideArrs) {
+      if (!subHideArrs || subHideArrs.length == 0) {
+        return
+      }
+      subHideArrs.forEach((item) => {
+        const { target, value } = item
+        const oldVal = utils.getValueByPath(pInst, target)
+        let tables = target.split('.')
+        if (tables.length == 4 && tables[3] == 'hidden') {
+          // 子表之前是显示状态，现在变为隐藏状态时才清空子表数据
+          if (value && oldVal !== value) {
+            for (let key in pInst.data) {
+              for (let subkey in pInst.data[key]) {
+                if ('sub_' + tables[2] == subkey) {
+                  pInst.data[key][subkey].splice(
+                    0,
+                    pInst.data[key][subkey].length
+                  )
+                  break
+                }
+              }
+            }
+          }
+        }
+        utils.setValueByPath(pInst, target, value)
+      })
+      subHideArrs.splice(0, subHideArrs.length)
+    }
+
+    // 隐藏并清空子表数据
+    const hideAndClearSubtableCall = _.debounce(() => {
+      const finalArys = []
+      _me.subtableRestores.forEach((m) => {
+        const _matchOne = _me.subtableApplies.find((n) => m.target === n.target)
+        if (_matchOne) {
+          finalArys.push({ ..._matchOne })
+        } else {
+          finalArys.push({ ...m })
+        }
+      })
+      _me.subtableRestores.splice(0, _me.subtableRestores.length)
+      _me.subtableApplies.splice(0, _me.subtableApplies.length)
+      doHideAndClearSubtable(finalArys)
+    }, 100)
+
+    // 还原联动执行的动作
+    _me._doRestoreLinkageWithTraces = function () {
+      linkageExp.forEach((m) => {
+        const subtableEffects = []
+        m.effect.forEach((n) => {
+          const traceValue = _me.traces[n.target]
+          if (n.target) {
+            if (n.target.indexOf('permission.table') != -1) {
+              //判断是否是子孙表的配置权限
+              if (traceValue !== null && traceValue !== undefined) {
+                subtableEffects.push({
+                  target: n.target,
+                  value: traceValue,
+                })
+              }
+            } else {
+              let boType = n.boType
+              if (boType && (boType == 'sub' || boType == 'sun')) {
+                operationEleByPermission(n, traceValue)
+              } else {
+                utils.setValueByPath(pInst, n.target, traceValue)
+              }
+            }
+          }
+          if (n.ref && n.ref.indexOf('sub_') != -1) {
+            let arr = n.ref.split('.')
+            //子表
+            if (arr.length == 4) {
+              if (
+                n.ref &&
+                document.querySelector('[model-name="' + n.ref + '"]')
+              ) {
+                let idxObj = utils.getSubScopeElAndIndex(_me.$el) //获取子表对象（含下标)
+                let subModeNameArray = document.querySelectorAll(
+                  '[model-name="' + n.ref + '"]'
+                )
+                subModeNameArray[idxObj.index].__vue__._data.newValidate = null
+              }
+            }
+          } else {
+            //主表
+            if (
+              n.ref &&
+              document.querySelector('[model-name="' + n.ref + '"]')
+            ) {
+              document.querySelector(
+                '[model-name="' + n.ref + '"]'
+              ).__vue__._data.newValidate = null
+            }
+          }
+        })
+        // 隐藏并清空子孙表数据的处理
+        hideAndClearSubtable(subtableEffects, true)
+      })
+    }
+
+    // 隐藏并清空子表数据（节流方法，等待100ms后执行，期间对同一个子表的显示/隐藏操作会互相抵消）
+    const hideAndClearSubtable = function (subtables, restore) {
+      if (!subtables || subtables.length == 0) {
+        return
+      }
+      if (restore) {
+        _me.subtableRestores = _me.subtableRestores.concat(subtables)
+      } else {
+        _me.subtableApplies = _me.subtableApplies.concat(subtables)
+      }
+      hideAndClearSubtableCall()
+    }
+
+    linkageExp.forEach((m) => {
+      m.effect.forEach((n) => {
+        // 联动会影响字段的显示、隐藏、必填等权限，以及字段的校验规则。
+        // 这里先将这两部分信息存放起来作为恢复的轨迹数据
+        _me.traces[n.target] = utils.getValueByPath(pInst, n.target)
+      })
+    })
+    _me.$watch(
+      'inputVal',
+      function (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          // 两个对象是否相等
+          if (
+            newVal &&
+            newVal.constructor == Object &&
+            utils.objectEquals(newVal, oldVal)
+          ) {
+            return
+          }
+          // 两个数组是否相等
+          if (
+            newVal &&
+            newVal.constructor == Array &&
+            utils.arrayEquals(newVal, oldVal)
+          ) {
+            return
+          }
+          // 在联动触发之前，先还原一次
+          _me._doRestoreLinkageWithTraces()
+
+          linkageExp.forEach((m) => {
+            // 是否匹配联动要求的值
+            let match = false
+            if (newVal) {
+              if (newVal.constructor === String) {
+                match = newVal === m.value
+              } else if (newVal.constructor === Array) {
+                match = newVal.some((v) => v === m.value)
+                // 如果是复选框触发联动，在复选框只读时返回的是选项的label，需要通过label获取选项value
+                if (!match && _me.$isCheckbox && _me.getOptionKeyByValue) {
+                  match = _me
+                    .getOptionKeyByValue(newVal)
+                    .some((v) => v === m.value)
+                }
+              }
+            }
+            const subHideArrs = []
+            m.effect.forEach((n) => {
+              if (match) {
+                switch (n.type) {
+                  // 直接赋值
+                  case '=': {
+                    //如果表单是只读的情况下,控件的必填与可编辑替换成只读
+                    let v = n.value
+                    if (pInst.isLook && (n.value === 'b' || n.value === 'w')) {
+                      v = 'r'
+                    }
+                    let boType = n.boType
+                    if (boType && (boType == 'sub' || boType == 'sun')) {
+                      operationEleByPermission(n, v)
+                    } else {
+                      if (
+                        n.target &&
+                        n.target.indexOf('permission.table') != -1
+                      ) {
+                        //判断是否是子孙表的配置权限
+                        if (v !== null && v !== undefined && !this.$hideTip) {
+                          subHideArrs.push({ target: n.target, value: v })
+                          // 隐藏并清空子孙表数据的处理
+                          hideAndClearSubtable(subHideArrs)
+                        }
+                      } else {
+                        utils.setValueByPath(pInst, n.target, v)
+                      }
+                    }
+                    break
+                  }
+                  // 追加验证规则
+                  case '+':
+                    if (
+                      !n.value ||
+                      (n.value.constructor !== Object &&
+                        n.value.constructor !== String)
+                    ) {
+                      throw `联动时要追加的验证规则${n.value}既不是String类型也不是Object类型`
+                    }
+                    if (n.target) {
+                      // 获取旧的校验规则
+                      const oldValid = utils.getValueByPath(pInst, n.target)
+                      // 将旧规则与新规则进行融合
+                      const newValid = utils.mergeValidate(oldValid, n.value)
+                      // 更新融合后的规则
+                      utils.setValueByPath(pInst, n.target, newValid)
+                    }
+                    if (n.ref) {
+                      setTimeout(() => {
+                        if (
+                          document.querySelector('[model-name="' + n.ref + '"]')
+                        ) {
+                          if (n.ref && n.ref.indexOf('sub_') != -1) {
+                            let arr = n.ref.split('.')
+                            //子表
+                            if (arr.length == 4) {
+                              let idxObj = utils.getSubScopeElAndIndex(_me.$el)
+                              let subModeNameArray = document.querySelectorAll(
+                                '[model-name="' + n.ref + '"]'
+                              )
+                              let targetVnode =
+                                subModeNameArray[idxObj.index].__vue__
+                              let oldValid = targetVnode.validate
+                              // 将旧规则与新规则进行融合
+                              const newValid = utils.mergeValidate(
+                                oldValid,
+                                n.value
+                              )
+                              targetVnode._data.newValidate = newValid
+                            }
+                          } else {
+                            //主表
+                            let targetVnode = document.querySelector(
+                              '[model-name="' + n.ref + '"]'
+                            ).__vue__
+                            let oldValid = targetVnode.validate
+                            // 将旧规则与新规则进行融合
+
+                            if (
+                              n.value !== null &&
+                              n.value !== undefined &&
+                              n.value.indexOf('confirmed:') > -1
+                            ) {
+                              let confirmPath = n.value.replace(
+                                'confirmed:',
+                                ''
+                              )
+                              n.value =
+                                'confirmed:' +
+                                utils.getValueByPath(pInst, confirmPath)
+                              let confirmVnode = document.querySelector(
+                                '[model-name="' + confirmPath + '"]'
+                              ).__vue__
+                              confirmVnode.$watch('inputVal', function (n) {
+                                const newValid = utils.mergeValidate(
+                                  oldValid,
+                                  'confirmed:' + n
+                                )
+                                targetVnode._data.newValidate = newValid
+                              })
+                            }
+                            const newValid = utils.mergeValidate(
+                              oldValid,
+                              n.value
+                            )
+                            targetVnode._data.newValidate = newValid
+                          }
+                        }
+                      }, 100)
+                    }
+                    break
+                  // 减少验证规则
+                  case '-':
+                    if (
+                      !n.value ||
+                      (n.value.constructor !== Object &&
+                        n.value.constructor !== String)
+                    ) {
+                      throw `联动时要减少的验证规则${n.value}既不是String类型也不是Object类型`
+                    }
+                    if (n.target) {
+                      // 获取旧的规则
+                      const oldV = utils.getValueByPath(pInst, n.target)
+                      // 从旧的规则移除指定规则
+                      const newValidate = utils.reduceValidate(oldV, n.value)
+                      // 更新规则
+                      utils.setValueByPath(pInst, n.target, newValidate)
+                    }
+
+                    if (n.ref) {
+                      const oldValid = pInst.$refs[n.ref].validate
+                      // 将旧规则与新规则进行融合
+                      const newValid = utils.reduceValidate(oldValid, n.value)
+                      pInst.$refs[n.ref].newValidate = newValid
+                    }
+
+                    break
+                }
+              }
+            })
+          })
+        }
+      },
+      { immediate: true }
+    )
+  },
+}
+
+export default {
+  props: {
+    linkage: Array,
+  },
+  mounted() {
+    if (this.linkage) {
+      const exp = this.linkage
+      //如果要联动的字段权限是只读“r”,则把联动配置里面要联动的字段权限“w”改为只读“r”
+      if (exp && exp.length > 0) {
+        const frmInst = utils.getOnlineFormInstance(this)
+        //表单所有字段的初始权限
+        if (frmInst && frmInst.permission) {
+          exp.forEach((item) => {
+            let effect = item.effect
+            effect.forEach((effectItem) => {
+              let initPermission = utils.getValueByPath(
+                frmInst,
+                effectItem.target
+              )
+              if (
+                effectItem.target &&
+                effectItem.target.indexOf('permission') != -1 &&
+                effectItem.value != 'n' &&
+                initPermission == 'r'
+              ) {
+                effectItem.value = initPermission
+              }
+            })
+          })
+        }
+      }
+      setTimeout(() => {
+        service.linkageHandler(this, exp)
+      }, 0)
+    }
+  },
+}

package/src/mixins/locale.js

@@ -0,0 +1,9 @@
+import { t } from '@/locale'
+
+export default {
+  methods: {
+    t(...args) {
+      return t.apply(this, args)
+    },
+  },
+}

package/src/mixins/mobileMode.js

@@ -0,0 +1,27 @@
+import utils from '../utils.js'
+
+export default {
+  data() {
+    return {
+      userAgentMobile: false,
+    }
+  },
+  inject: {
+    elForm: {
+      default: '',
+    },
+  },
+  computed: {
+    isMobile: function() {
+      return (
+        (this.elForm &&
+          this.elForm.$parent &&
+          this.elForm.$parent.mobileMode) ||
+        this.userAgentMobile
+      )
+    },
+  },
+  created() {
+    this.userAgentMobile = utils.isMobile()
+  },
+}