three-trees-ui 1.0.0

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/services/commonScripts.js

@@ -0,0 +1,45 @@
+const $ = require('jquery')
+
+const CommonScripts = (vue)=> {
+  return {
+    getValue(script) {
+      return this.executeScript(script)
+    },
+    executeScript(script) {
+      let value = ''
+      $.ajax({
+        type: 'POST', //请求方式
+        async: false, // fasle表示同步请求，true表示异步请求
+        contentType: 'application/json;charset=UTF-8', //请求的媒体类型
+        url: vue.prototype.$requestConfig.flowUrl + '/runtime/script/v1/executeScript', //请求地址
+        data: script, //数
+        beforeSend: function (XMLHttpRequest) {
+          XMLHttpRequest.setRequestHeader(
+            'Authorization',
+            vue.prototype.$requestConfig.getToken()
+          )
+        },
+        success: function (result) {
+          //请求成功
+          if (result.state) {
+            value = result.value
+          } else {
+            console.log('执行脚本失败：' + result.message)
+          }
+        },
+        error: function (e) {
+          //请求失败，包含具体的错误信息
+          console.log(e.status)
+          console.log(e.responseText)
+        },
+      })
+      return value
+    },
+  }
+}
+
+CommonScripts.install = (Vue) => {
+  Vue.prototype.$CommonScripts = CommonScripts(Vue)
+}
+
+export default CommonScripts

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;
+}

package/src/styles/selector.css

@@ -0,0 +1,140 @@
+.dialog-selector__wrapper {
+  overflow: unset !important;
+}
+
+@media (max-width: 1400px) {
+  .dialog-selector__wrapper ::v-deep .el-dialog {
+    width: 90%;
+    height: 90%;
+    margin-top: 4vh !important;
+  }
+  .dialog-selector__wrapper ::v-deep .el-dialog .ht-selector__table {
+    height: 380px;
+  }
+  .dialog-selector__wrapper ::v-deep .el-dialog .el-pagination {
+    white-space: pre-wrap !important;
+  }
+}
+
+@media (min-width: 1400px) {
+  .dialog-selector__wrapper ::v-deep .el-dialog {
+    width: 1260px;
+  }
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog {
+  min-width: 910px;
+  height: 76%;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__header {
+  background: #f8f8f8;
+  padding: 6px 20px;
+  height: 24px;
+  line-height: 24px;
+  border-bottom: 1px solid #eee;
+  border-radius: 2px 2px 0 0;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__title {
+  font-size: 16px;
+  color: #333;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__headerbtn {
+  top: 11px;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__body {
+  height: calc(100% - 120px);
+  padding-top: 10px;
+  padding-bottom: 10px;
+  overflow: auto;
+  font-size: 12px;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__body .el-main {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__body .el-container {
+  height: 100%;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .el-input__inner {
+  font-size: 12px;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .left-aside {
+  overflow: unset;
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .left-aside .box-card {
+  height: calc(100% - 2px);
+}
+
+.dialog-selector__wrapper ::v-deep .el-dialog .left-aside .box-card .el-card__body {
+  max-height: unset;
+  overflow: auto;
+  height: calc(100% - 90px);
+}
+
+.dialog-selector__wrapper ::v-deep .el-pagination {
+  padding: 5px;
+}
+
+.dialog-selector__wrapper ::v-deep .el-pagination .el-input--suffix.el-input--mini > .el-input__inner {
+  height: 22px;
+}
+
+.dialog-selector__wrapper ::v-deep .dialog-footer {
+  text-align: center;
+}
+
+.mobile-dialog ::v-deep .el-dialog {
+  width: 100%;
+  min-width: 100%;
+  height: 100vh;
+  margin-top: 0 !important;
+  border-radius: 0;
+}
+
+.mobile-dialog ::v-deep .el-dialog .el-dialog__header {
+  border-radius: 0;
+}
+
+.mobile-dialog ::v-deep .el-dialog .el-dialog__body {
+  height: calc(100% - 90px);
+  padding: 0;
+}
+
+.mobile-dialog ::v-deep .el-dialog .el-dialog__footer {
+  padding: 5px 0 0 0;
+}
+
+.mobile-dialog ::v-deep .el-dialog .el-pager,
+.mobile-dialog ::v-deep .el-dialog .el-row {
+  line-height: 1;
+}
+
+.mobile-dialog ::v-deep .el-dialog .el-footer {
+  padding: 10px;
+}
+
+.mobile-dialog ::v-deep .el-dialog .el-main {
+  padding: 0;
+}
+
+.mobile-dialog ::v-deep .el-dialog .el-tabs__header {
+  margin: 0;
+  padding: 5px 20px;
+}
+
+.mobile-dialog ::v-deep .el-dialog .ht-header__search {
+  padding: 15px 10px 0 10px;
+}
+
+.mobile-dialog ::v-deep .el-dialog .ht-selector__table {
+  height: 100%;
+}

package/src/styles/selector.min.css

@@ -0,0 +1 @@
+.dialog-selector__wrapper{overflow:unset !important}@media (max-width: 1400px){.dialog-selector__wrapper ::v-deep .el-dialog{width:90%;height:90%;margin-top:4vh !important}.dialog-selector__wrapper ::v-deep .el-dialog .ht-selector__table{height:380px}.dialog-selector__wrapper ::v-deep .el-dialog .el-pagination{white-space:pre-wrap !important}}@media (min-width: 1400px){.dialog-selector__wrapper ::v-deep .el-dialog{width:1260px}}.dialog-selector__wrapper ::v-deep .el-dialog{min-width:910px;height:76%}.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__header{background:#f8f8f8;padding:6px 20px;height:24px;line-height:24px;border-bottom:1px solid #eee;border-radius:2px 2px 0 0}.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__title{font-size:16px;color:#333}.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__headerbtn{top:11px}.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__body{height:calc(100% - 120px);padding-top:10px;padding-bottom:10px;overflow:auto;font-size:12px}.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__body .el-main{padding-top:0;padding-bottom:0}.dialog-selector__wrapper ::v-deep .el-dialog .el-dialog__body .el-container{height:100%}.dialog-selector__wrapper ::v-deep .el-dialog .el-input__inner{font-size:12px}.dialog-selector__wrapper ::v-deep .el-dialog .left-aside{overflow:unset}.dialog-selector__wrapper ::v-deep .el-dialog .left-aside .box-card{height:calc(100% - 2px)}.dialog-selector__wrapper ::v-deep .el-dialog .left-aside .box-card .el-card__body{max-height:unset;overflow:auto;height:calc(100% - 90px)}.dialog-selector__wrapper ::v-deep .el-pagination{padding:5px}.dialog-selector__wrapper ::v-deep .el-pagination .el-input--suffix.el-input--mini>.el-input__inner{height:22px}.dialog-selector__wrapper ::v-deep .dialog-footer{text-align:center}.mobile-dialog ::v-deep .el-dialog{width:100%;min-width:100%;height:100vh;margin-top:0 !important;border-radius:0}.mobile-dialog ::v-deep .el-dialog .el-dialog__header{border-radius:0}.mobile-dialog ::v-deep .el-dialog .el-dialog__body{height:calc(100% - 90px);padding:0}.mobile-dialog ::v-deep .el-dialog .el-dialog__footer{padding:5px 0 0 0}.mobile-dialog ::v-deep .el-dialog .el-pager,.mobile-dialog ::v-deep .el-dialog .el-row{line-height:1}.mobile-dialog ::v-deep .el-dialog .el-footer{padding:10px}.mobile-dialog ::v-deep .el-dialog .el-main{padding:0}.mobile-dialog ::v-deep .el-dialog .el-tabs__header{margin:0;padding:5px 20px}.mobile-dialog ::v-deep .el-dialog .ht-header__search{padding:15px 10px 0 10px}.mobile-dialog ::v-deep .el-dialog .ht-selector__table{height:100%}

package/src/styles/selector.scss

@@ -0,0 +1,130 @@
+//弹窗样式
+.dialog-selector__wrapper {
+  overflow: unset !important;
+
+  ::v-deep {
+    @media (max-width: 1400px) {
+      .el-dialog {
+        width: 90%;
+        height: 90%;
+        margin-top: 4vh !important;
+        .ht-selector__table {
+          height: 380px;
+        }
+        .el-pagination{
+          white-space: pre-wrap !important;
+        }
+      }    
+    }
+
+    @media (min-width: 1400px) {
+      .el-dialog {
+        width: 1260px;
+      }
+    }
+
+    .el-dialog {
+      min-width: 910px;
+      height: 76%;
+      .el-dialog__header {
+        background: #f8f8f8;
+        padding: 6px 20px;
+        height: 24px;
+        line-height: 24px;
+        border-bottom: 1px solid #eee;
+        border-radius: 2px 2px 0 0;
+      }
+
+      .el-dialog__title {
+        font-size: 16px;
+        color: #333;
+      }
+
+      .el-dialog__headerbtn {
+        top: 11px;
+      }
+      .el-dialog__body {
+        height: calc(100% - 120px);
+        padding-top: 10px;
+        padding-bottom: 10px;
+        overflow: auto;
+        font-size: 12px;
+        .el-main {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+        .el-container {
+          height: 100%;
+        }
+      }
+      .el-input__inner {
+        font-size: 12px;
+      }
+      .left-aside {
+        overflow: unset;
+        .box-card {
+          height: calc(100% - 2px);
+          .el-card__body {
+            max-height: unset;
+            overflow: auto;
+            height: calc(100% - 90px);
+          }
+        }
+      }
+    }
+
+    .el-pagination {
+      padding: 5px;
+
+      .el-input--suffix.el-input--mini > .el-input__inner {
+        height: 22px;
+      }
+    }
+
+    //弹窗底部按钮样式
+    .dialog-footer {
+      text-align: center;
+    }
+  }
+}
+
+// 移动端选择器样式
+.mobile-dialog {
+  ::v-deep .el-dialog {
+    width: 100%;
+    min-width: 100%;
+    height: 100vh;
+    margin-top: 0 !important;
+    border-radius: 0;
+    .el-dialog__header {
+      border-radius: 0;
+    }
+    .el-dialog__body {
+      height: calc(100% - 90px);
+      padding: 0;
+    }
+    .el-dialog__footer {
+      padding: 5px 0 0 0;
+    }
+    .el-pager,
+    .el-row {
+      line-height: 1;
+    }
+    .el-footer {
+      padding: 10px;
+    }
+    .el-main {
+      padding: 0;
+    }
+    .el-tabs__header {
+      margin: 0;
+      padding: 5px 20px;
+    }
+    .ht-header__search {
+      padding: 15px 10px 0 10px;
+    }
+    .ht-selector__table {
+      height: 100%;
+    }
+  }
+}

package/src/styles/variables.css

@@ -0,0 +1,67 @@
+@charset "UTF-8";
+/* 改变主题色变量 */
+.ht-typography__header {
+  position: relative;
+  padding-left: var(--header-padding-left);
+}
+
+.ht-typography__header::before {
+  content: '';
+  width: var(--bar-width);
+  background-color: var(--bar-color);
+  border-radius: calc(var(--bar-width) / 2);
+  transition: background-color 0.3s var(--bezier);
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.el-popover__reference-wrapper > svg.fa-icon.el-popover__reference {
+  vertical-align: -3px;
+}
+
+.inputs.ht-form-inputs__block {
+  display: inline-block;
+  width: 100%;
+}
+
+.inputs.ht-form-inputs__inline {
+  position: relative;
+  display: inline-block;
+  width: 220px;
+}
+
+.ht-form-inputs__block.has-company-box,
+.ht-form-inputs__inline.has-company-box {
+  display: flex;
+}
+
+th.hidden,
+td.hidden,
+col[width='1'] {
+  display: none;
+}
+
+.inputs .clear-icon {
+  display: none;
+}
+
+.inputs .has-value:hover .clear-icon {
+  display: block;
+  cursor: pointer;
+  color: #dbdbdb;
+}
+
+.inputs .has-value:hover .user-icon,
+.inputs .has-value:hover .org-icon {
+  display: none;
+}
+
+.inputs .has-value .el-input .el-input__inner {
+  color: #fff;
+}
+
+.inputs .el-select__tags_readonly .tag-wrap {
+  display: flex;
+}

package/src/styles/variables.min.css

@@ -0,0 +1 @@
+.ht-typography__header{position:relative;padding-left:var(--header-padding-left)}.ht-typography__header::before{content:'';width:var(--bar-width);background-color:var(--bar-color);border-radius:calc(var(--bar-width) / 2);transition:background-color 0.3s var(--bezier);left:0;top:0;bottom:0;position:absolute}.el-popover__reference-wrapper>svg.fa-icon.el-popover__reference{vertical-align:-3px}.inputs.ht-form-inputs__block{display:inline-block;width:100%}.inputs.ht-form-inputs__inline{position:relative;display:inline-block;width:220px}.ht-form-inputs__block.has-company-box,.ht-form-inputs__inline.has-company-box{display:flex}th.hidden,td.hidden,col[width='1']{display:none}.inputs .clear-icon{display:none}.inputs .has-value:hover .clear-icon{display:block;cursor:pointer;color:#dbdbdb}.inputs .has-value:hover .user-icon,.inputs .has-value:hover .org-icon{display:none}.inputs .has-value .el-input .el-input__inner{color:#fff}.inputs .el-select__tags_readonly .tag-wrap{display:flex}

package/src/styles/variables.scss

@@ -0,0 +1,109 @@
+$--font-size-extra-large: 20px !default;
+$--font-size-large: 16px !default;
+$--font-size-medium: 14px !default;
+$--font-size-base: 12px !default;
+$--font-size-small: 10px !default;
+$--font-size-extra-small: 9px !default;
+/* 改变主题色变量 */
+$base-color-black: #000000 !default;
+$base-color-white: #ffffff !default;
+$base-color-blue: #409eff !default;
+$base-color-green: #67c23a !default;
+$base-color-gray: #909399 !default;
+$base-color-orange: #cf9236 !default;
+$base-color-red: #dd6161 !default;
+
+@mixin base-scrollbar {
+  &::-webkit-scrollbar {
+    width: 13px;
+    height: 13px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.4);
+    background-clip: padding-box;
+    border: 3px solid transparent;
+    border-radius: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track:hover {
+    background-color: #f8fafc;
+  }
+}
+
+.ht-typography__header {
+  position: relative;
+  padding-left: var(--header-padding-left);
+
+  &::before {
+    content: '';
+    width: var(--bar-width);
+    background-color: var(--bar-color);
+    border-radius: calc(var(--bar-width) / 2);
+    transition: background-color 0.3s var(--bezier);
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+  }
+}
+
+.el-popover__reference-wrapper > svg.fa-icon.el-popover__reference {
+  vertical-align: -3px;
+}
+
+.inputs.ht-form-inputs__block {
+  display: inline-block;
+  width: 100%;
+}
+.inputs.ht-form-inputs__inline {
+  position: relative;
+  display: inline-block;
+  width: 220px;
+}
+.ht-form-inputs__block.has-company-box,
+.ht-form-inputs__inline.has-company-box {
+  display: flex;
+}
+
+th.hidden,
+td.hidden,
+col[width='1'] {
+  display: none;
+}
+.inputs {
+  .clear-icon {
+    display: none;
+  }
+  .has-value {
+    &:hover {
+      .clear-icon {
+        display: block;
+        cursor: pointer;
+        color: #dbdbdb;
+      }
+      .user-icon,
+      .org-icon {
+        display: none;
+      }
+    }
+    .el-input {
+      .el-input__inner {
+        color: #fff;
+      }
+    }
+  }
+  .el-select__tags_readonly {
+    .tag-wrap {
+      display: flex;
+    }
+  }
+}

package/src/util/base64.js

@@ -0,0 +1,46 @@
+const { Base64 } = require('js-base64')
+const notBase64 = /[^A-Z0-9+\/=]/i
+
+/**
+ * base64编码
+ * @param {*} content 要编码内容
+ * @param {*} encoding 编码字符集（默认UTF-8）
+ * @returns 编码后的内容
+ */
+export function encode(content, encoding) {
+  return content ? Base64.encode(content, encoding || 'utf-8') : content
+}
+
+/**
+ * base64解码
+ * @param {*} content 要解码内容
+ * @param {*} encoding 解码字符集（默认UTF-8）
+ * @returns 解码后的内容
+ */
+export function decode(content, encoding) {
+  return content ? Base64.decode(content, encoding || 'utf-8') : content
+}
+
+/**
+ * 判断字符串是否为base64编码格式
+ * @param {*} content
+ * @returns
+ */
+export function isBase64(content) {
+  if (!content || content.constructor !== String) {
+    return false
+  }
+  if (content === '' || content.trim() === '') {
+    return false
+  }
+  const len = content.length
+  if (!len || len % 4 !== 0 || notBase64.test(content)) {
+    return false
+  }
+  const firstPaddingChar = content.indexOf('=')
+  return (
+    firstPaddingChar === -1 ||
+    firstPaddingChar === len - 1 ||
+    (firstPaddingChar === len - 2 && content[len - 1] === '=')
+  )
+}

package/src/util/brower.js

@@ -0,0 +1,15 @@
+/**
+ * 通过Object创建链接地址
+ * @param {Object} content
+ * @returns
+ */
+export function createObjectURL(content) {
+  if (
+    window.navigator.userAgent.indexOf('Chrome') >= 1 ||
+    window.navigator.userAgent.indexOf('Safari') >= 1
+  ) {
+    return window.webkitURL.createObjectURL(content)
+  } else {
+    return window.URL.createObjectURL(content)
+  }
+}