three-trees-ui 1.0.0

package/src/plugins/loading/index.js

@@ -0,0 +1,37 @@
+import loadingComponent from './index.vue'
+
+const loadingConfig = {}
+loadingConfig.install = (Vue) => {
+  const LoadingConstructor = Vue.extend(loadingComponent)
+  let toastDom, el
+  function showLoading(title='', color='', duration = 2000) {
+    if (!el && !toastDom) {
+      el = document.createElement('div');
+      toastDom = new LoadingConstructor({
+        el,
+        data() {
+          return {
+            isShow: true, // 是否显示
+            title, // 文本内容
+            color
+          };
+        }
+      });
+      // 添加节点
+      document.body.appendChild(toastDom.$el);
+    } else {
+      toastDom.isShow = true;
+    }
+  }
+  
+  function cancelLoading() {
+    if (toastDom) {
+      toastDom.isShow = false;
+    }
+  }
+  Vue.prototype.$showLoading = showLoading
+  Vue.prototype.$cancelLoading = cancelLoading
+}
+
+export default loadingConfig
+

package/src/plugins/loading/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <van-overlay
+      :show="isShow"
+      :custom-style="{
+        background: 'rgb(0, 0, 0, 0.2)',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 5000
+      }"
+    >
+      <van-loading size="24px" :color="color || '#409eff'">
+        <span :style="{color: color || '#409eff'}">{{ title || '加载中···' }}</span>
+      </van-loading>
+    </van-overlay>
+  </div>
+</template>

package/src/service.js

@@ -0,0 +1,336 @@
+import utils from '@/utils.js'
+var 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 = {}
+
+    //修改子表或孙表行内联动权限
+    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)
+    }
+
+    // 隐藏并清空子表数据
+    const hideAndClearSubtable = function(subHideArrs) {
+      if (!subHideArrs || subHideArrs.length == 0) {
+        return
+      }
+      subHideArrs.forEach((item) => {
+        const { target, value } = item
+        const oldVal = utils.getValueByPath(pInst, target)
+        // 子表之前是显示状态，现在变为隐藏状态时才清空子表数据
+        if (value && oldVal !== value) {
+          let tables = target.split('.')
+          if (tables.length == 4) {
+            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)
+    }
+
+    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
+          }
+          // 在联动触发之前，先还原一次
+          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)
+          })
+
+          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 service

package/src/services/CustomQuery.js

@@ -0,0 +1,197 @@
+import Vue from 'vue'
+import utils from '../utils.js'
+import { Message } from 'element-ui'
+
+const CustomQuery = {
+  /**
+   * 通过别名获取关联查询定义
+   */
+  get: (alias) => {
+    return new Promise((resolve, reject) => {
+      if (!alias) {
+        reject('alias can not be null.')
+      }
+      Vue.prototype.$requestConfig
+        .getCustomQuery(alias)
+        .then((response) => resolve(response))
+        .catch((error) => reject(error))
+    })
+  },
+  /**
+   * 传入关联查询别名和查询参数，返回查询到的数据
+   */
+  load: (alias, params) => {
+    return new Promise((resolve, reject) => {
+      CustomQuery.get(alias).then(
+        (query) => {
+          // 执行关联查询
+          CustomQuery._doQuery(query, params, '1', (data) => {
+            resolve(data)
+          })
+        },
+        () => {
+          reject()
+        }
+      )
+    })
+  },
+  _throwException: (msg) => {
+    Message.error(msg)
+    throw msg
+  },
+  // 处理POST请求时的参数
+  _handlePostData: (query, queryParams) => {
+    if (!query.dataParam || query.dataParam.constructor != String) {
+      return queryParams
+    }
+    // 构建上下文数据对象
+    let ctx = {}
+    queryParams &&
+      queryParams.forEach((element) => {
+        ctx[element.key] = element.value
+      })
+    const exp = utils.parseExp(query.dataParam, ctx)
+    try {
+      return JSON.parse(exp)
+    } catch (e) {
+      CustomQuery._throwException(
+        `POST参数不是有效的JSON格式${query.dataParam}`
+      )
+    }
+  },
+  // 处理GET请求的URL（GET请求的查询参数追加到URL后面）
+  _handleGetUrl: (url, queryParams) => {
+    if (!url) {
+      CustomQuery._throwException('Restful类型的url地址为空')
+    }
+    let urlParamsAry = []
+    queryParams &&
+      queryParams.forEach((q) => {
+        urlParamsAry.push(`${q.key}=${q.value}`)
+      })
+    const linkWord = url.indexOf('?') == -1 ? '?' : '&'
+    return `${url}${linkWord}${urlParamsAry.join('&')}`
+  },
+  _doQuery: (query, params, type, cb) => {
+    params = params || {}
+    // 复制一份关联查询对象
+    query = { ...query }
+    // 关联数据始终查询第一页
+    const page = 1
+    // 关联数据查询参数
+    let queryParams = []
+
+    if (query.conditionfield) {
+      try {
+        const conditionFields = JSON.parse(query.conditionfield)
+        // 构建查询参数
+        if (
+          conditionFields &&
+          conditionFields.constructor == Array &&
+          conditionFields.length > 0
+        ) {
+          conditionFields.forEach((c) => {
+            // 默认按照固定值构建查询参数
+            let obj = {
+              key: c.field,
+              value: c.defaultValue || '',
+            }
+            // 参数传入时获取传入的params中的同名参数值
+            if (c.defaultType == '1') {
+              if (params.hasOwnProperty(c.field)) {
+                obj.value = params[c.field] || ''
+              }
+            }
+            queryParams.push(obj)
+          })
+        }
+      } catch (e) {
+        CustomQuery._throwException(`条件字段的JSON格式错误：${e}`)
+      }
+    }
+    if (query.dsType != 'dataSource') {
+      // POST请求，则处理queryParams参数
+      if (query.requestType == 'POST') {
+        queryParams = CustomQuery._handlePostData(query, queryParams)
+      }
+      // GET请求，则处理url地址
+      else if (query.requestType == 'GET') {
+        query.url = CustomQuery._handleGetUrl(query.url, queryParams)
+      }
+    }
+    // 构建查询地址
+    const queryUrl =
+      query.dsType == 'dataSource'
+        ? '${form}/form/customQuery/v1/doQuery?alias=' +
+          query.alias +
+          '&page=' +
+          page
+        : query.url
+    let requestMethod = 'POST'
+    //如果关联数据列表查询数据不是数据源则请求方法为restful配置的请求方式
+    if (query.dsType != 'dataSource') {
+      requestMethod = query.requestType
+    }
+    //查询数据
+    Vue.prototype.$requestConfig
+      .request(
+        {
+          url: queryUrl,
+          method: requestMethod,
+          data: queryParams,
+          headers: query.header,
+        },
+        query.dsType
+      )
+      .then(
+        (response) => {
+          //自定义对话框因为要显示分页信息，并且显示字段的key是小写，故此处直接返回，由自定义对话框组件本身处理数据
+          if (type == '1') {
+            //如果数据来源是数据源
+            if (query.dsType == 'dataSource') {
+              cb(response.rows)
+            } else {
+              // 如果数据来源是REST接口
+              const data = CustomQuery._handleResponse(response, query.listKey)
+              cb(data)
+            }
+          }
+        },
+        () => {
+          cb([])
+        }
+      )
+  },
+  _handleResponse: (data, rowsKey) => {
+    if (!data) {
+      Message.error('返回的数据为空')
+      return []
+    }
+    if (data.constructor == String) {
+      try {
+        data = JSON.parse(data)
+      } catch (e) {
+        CustomQuery._throwException(`将返回值解析为JSON对象时出错了：${e}`)
+      }
+    }
+
+    if (data.constructor == Object) {
+      // 如果没有指定提取key，则将返回值包装为列表
+      if (!rowsKey) {
+        return [data]
+      }
+      try {
+        return utils.getValueByPath(data, rowsKey)
+      } catch (e) {
+        CustomQuery._throwException(`从返回的数据中提取数组时出错了：${e}`)
+      }
+    } else if (data.constructor == Array) {
+      // 已经是数组类型时，不再通过rowsKey提取
+      return data
+    } else {
+      CustomQuery._throwException(`返回的数据无法解析:${data}`)
+    }
+  },
+}
+
+export default CustomQuery