swordpass-ui 1.0.0

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,199 @@
+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)
+            }
+          }
+        },
+        (reason) => {
+          cb([])
+          CustomQuery._throwException(reason)
+        }
+      )
+  },
+  _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

package/src/services/SubPagination.js

@@ -0,0 +1,132 @@
+import Vue from 'vue'
+import utils from '../utils.js'
+
+const SubPagination = {
+  // 全局对象，存放不同子表路径对应的数据
+  _map: new Map(),
+  set: (path, obj) => {
+    SubPagination._map.set(path, obj)
+    if (obj.rows) {
+      // 分页信息变化时需要触发子表调用filter
+      SubPagination._digest(obj.rows)
+    }
+  },
+  // 销毁path对象的数据
+  clear: (path) => {
+    SubPagination._map.delete(path)
+    SubPagination._map.delete(SubPagination._vueComponentKey(path))
+  },
+  // 消化子表数据变化，触发视图层渲染
+  _digest: (rows) => {
+    if (rows && rows.length > 0) {
+      const firstItem = rows[0]
+      Vue.set(rows, 0, firstItem)
+    }
+  },
+  _vueComponentKey: (path) => {
+    return `${path}:VueComponent`
+  },
+  // 导入数据
+  importData: (path, importRows, mode, mergeMethod) => {
+    return new Promise((resolve, reject) => {
+      if (SubPagination._map.has(path)) {
+        const instKey = SubPagination._vueComponentKey(path)
+
+        if (!SubPagination._map.has(instKey)) {
+          reject(`未找到${path}所对应的数据实例，无法导入数据。`)
+        }
+
+        const obj = SubPagination._map.get(path),
+          inst = SubPagination._map.get(instKey),
+          array = obj.rows
+        switch (mode) {
+          case 'override':
+            // 覆盖
+            utils.setValueByPath(inst, path, importRows)
+            break
+          case 'append': {
+            // 追加
+            const newAry = array.concat(importRows)
+            utils.setValueByPath(inst, path, newAry)
+            break
+          }
+          case 'merge': {
+            if (!mergeMethod && mergeMethod.constructor != Function) {
+              reject(`合并导入必须提供合并导入的方法：${mergeMethod}`)
+            }
+            const newRows = mergeMethod(array, importRows)
+            utils.setValueByPath(inst, path, newRows)
+            break
+          }
+        }
+        obj.rows = utils.getValueByPath(inst, path)
+        SubPagination._digest(obj.rows)
+        resolve()
+      } else {
+        reject(`未找到${path}所对应的子表数据`)
+      }
+    })
+  },
+  // 导出数据
+  exportData: (path, type, pInst, subtablePagination) => {
+    return new Promise((resolve, reject) => {
+      if (subtablePagination) {
+        if (SubPagination._map.has(path)) {
+          if (type == 'current') {
+            resolve(SubPagination.pagingByPath(path))
+          } else if (type == 'all') {
+            const obj = SubPagination._map.get(path)
+            resolve(obj.rows)
+          } else {
+            reject(`未知的导出类型：${type}`)
+          }
+        } else {
+          reject(`未找到${path}所对应的子表数据`)
+        }
+      } else {
+        let rows = utils.getValueByPath(pInst, path)
+        resolve(rows)
+      }
+    })
+  },
+  pagingByPath: (path, inst) => {
+    const instKey = SubPagination._vueComponentKey(path)
+    if (!SubPagination._map.has(instKey) && inst) {
+      // 将子表数据所属的VueComponent对象实例存储（用于数据导入）
+      SubPagination._map.set(instKey, inst)
+    }
+
+    // 如果有该子表路径的对象，则进行前端分页
+    if (SubPagination._map.has(path)) {
+      const obj = SubPagination._map.get(path),
+        array = obj.rows,
+        pageSize = obj.pageSize,
+        offset = (obj.currentPage - 1) * pageSize
+      return offset + pageSize >= array.length
+        ? array.slice(offset, array.length)
+        : array.slice(offset, offset + pageSize)
+    } else {
+      // 没有子表路径的对象时，直接返回空集合
+      return []
+    }
+  },
+  // 获取分页数据 offset
+  getPageOffset: (path, inst) => {
+    let pageOffset = 0
+    const instKey = SubPagination._vueComponentKey(path)
+    if (!SubPagination._map.has(instKey) && inst) {
+      // 将子表数据所属的VueComponent对象实例存储（用于数据导入）
+      SubPagination._map.set(instKey, inst)
+    }
+    // 如果有该子表路径的对象，则进行前端分页
+    if (SubPagination._map.has(path)) {
+      const { pageSize, currentPage } = SubPagination._map.get(path)
+      if (pageSize && currentPage) {
+        pageOffset = (currentPage - 1) * pageSize
+      }
+    }
+    return pageOffset
+  },
+}
+
+export default SubPagination

package/src/styles/index.scss

@@ -0,0 +1,7 @@
+:export {
+  primary_color: $base-color-blue;
+  success_color: $base-color-green;
+  info_color: $base-color-gray;
+  warning_color: $base-color-orange;
+  danger_color: $base-color-red;
+}