three-trees-ui 1.0.0

package/packages/Icon/src/icons/video.js

@@ -0,0 +1,14 @@
+import Icon from '../main.vue'
+
+Icon.register({
+  video: {
+    width: 1024,
+    height: 1024,
+    paths: [
+      {
+        d:
+          'M896 305.066667a72.533333 72.533333 0 0 0-78.933333 12.8l-91.733334 85.333333V341.333333a128 128 0 0 0-128-128H213.333333a128 128 0 0 0-128 128v341.333334a128 128 0 0 0 128 128h384a128 128 0 0 0 128-128v-61.866667l92.16 85.333333a74.24 74.24 0 0 0 49.493334 19.2 71.68 71.68 0 0 0 29.44-6.4 68.266667 68.266667 0 0 0 42.666666-63.146666V368.213333A68.266667 68.266667 0 0 0 896 305.066667z',
+      },
+    ],
+  },
+})

package/packages/Icon/src/icons/word.js

@@ -0,0 +1,19 @@
+import Icon from '../main.vue'
+
+Icon.register({
+  word: {
+    width: 1024,
+    height: 1024,
+    paths: [
+      {
+        d:
+          'M171.677269 1.50935h680.653822a150.424495 150.424495 0 0 1 170.163455 170.163455v680.653822a150.424495 150.424495 0 0 1-170.163455 170.163456H171.677269a150.424495 150.424495 0 0 1-170.163456-170.163456V171.672805a150.424495 150.424495 0 0 1 170.163456-170.163455z',
+      },
+      {
+        d:
+          'M675.417818 728.561074h-76.913882L511.663853 465.828699l-86.840083 262.732375h-77.140767l-125.920957-433.065994h96.425958l72.943401 273.112346 86.15943-273.112346h68.916199l86.216151 273.112346 73.737498-273.112346h96.142352z',
+        fill: '#FFFFFF',
+      },
+    ],
+  },
+})

package/packages/Icon/src/main.vue

@@ -0,0 +1,432 @@
+<script>
+  let icons = {}
+
+  function warn(msg, vm) {
+    if (!vm) {
+      /* eslint-disable no-console */
+      console.error(msg)
+      /* eslint-enable no-console */
+      return
+    }
+    vm.constructor.super.util.warn(msg, vm)
+  }
+
+  export default {
+    name: 'HtIcon',
+    props: {
+      name: {
+        type: String,
+        default: '',
+        validator(val) {
+          if (val && !(val in icons)) {
+            warn(
+              `Invalid prop: prop "name" is referring to an unregistered icon "${val}".\n` +
+                `Please make sure you have imported this icon before using it.`,
+              this
+            )
+            return false
+          }
+          return true
+        },
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      scale: {
+        type: [Number, String],
+        default: 1,
+      },
+      spin: {
+        type: Boolean,
+        default: false,
+      },
+      inverse: {
+        type: Boolean,
+        default: false,
+      },
+      pulse: {
+        type: Boolean,
+        default: false,
+      },
+      flip: {
+        validator(val) {
+          return (
+            val === 'horizontal' ||
+            val === 'vertical' ||
+            val === 'both' ||
+            val === ''
+          )
+        },
+        default: '',
+      },
+      rotate: {
+        type: [Number, String],
+        default: 0,
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      tabindex: {
+        type: [Number, String],
+        default: '',
+      },
+    },
+    data() {
+      return {
+        x: false,
+        y: false,
+        childrenWidth: 0,
+        childrenHeight: 0,
+        outerScale: 1,
+      }
+    },
+    computed: {
+      normalizedScale() {
+        let scale = this.scale
+        scale = typeof scale === 'undefined' ? 1 : Number(scale)
+        if (isNaN(scale) || scale <= 0) {
+          warn(`Invalid prop: prop "scale" should be a number over 0.`, this)
+          return this.outerScale
+        }
+        return scale * this.outerScale
+      },
+      rotateDegree() {
+        let rotate = this.rotate
+        rotate = typeof rotate === 'undefined' ? 0 : Number(rotate)
+        if (isNaN(rotate)) {
+          warn(`Invalid prop: prop "rotate" should be a number.`, this)
+          return 0
+        }
+        return rotate
+      },
+      klass() {
+        let classes = {
+          'fa-icon': true,
+          'fa-spin': this.spin,
+          'fa-flip-horizontal': this.flip === 'horizontal',
+          'fa-flip-vertical': this.flip === 'vertical',
+          'fa-flip-both': this.flip === 'both',
+          'fa-inverse': this.inverse,
+          'fa-pulse': this.pulse,
+        }
+
+        if (this.classes) {
+          Object.keys(this.classes).forEach((c) => {
+            if (this.classes[c]) {
+              classes[c] = true
+            }
+          })
+        }
+
+        return classes
+      },
+      icon() {
+        if (this.name) {
+          return icons[this.name]
+        }
+        return null
+      },
+      box() {
+        if (this.icon) {
+          return `0 0 ${this.icon.width} ${this.icon.height}`
+        }
+        return `0 0 ${this.width} ${this.height}`
+      },
+      ratio() {
+        if (!this.icon) {
+          return 1
+        }
+        let { width, height } = this.icon
+        return Math.max(width, height) / 16
+      },
+      // 长宽比
+      aspectRatio() {
+        if (!this.icon) {
+          return 1
+        }
+        let { width, height } = this.icon
+        return width / height
+      },
+      // 宽度是否需要修正
+      amendWidth() {
+        return this.aspectRatio < 1
+      },
+      // 高度是否需要修正
+      amendHeight() {
+        return this.aspectRatio > 1
+      },
+      width() {
+        return (
+          this.childrenWidth ||
+          (this.icon &&
+            (this.icon.width /
+              (this.amendWidth ? this.aspectRatio : 1) /
+              this.ratio) *
+              this.normalizedScale) ||
+          0
+        )
+      },
+      height() {
+        return (
+          this.childrenHeight ||
+          (this.icon &&
+            ((this.icon.height * (this.amendHeight ? this.aspectRatio : 1)) /
+              this.ratio) *
+              this.normalizedScale) ||
+          0
+        )
+      },
+      style() {
+        if (this.normalizedScale === 1 && this.rotateDegree === 0) {
+          return false
+        }
+        const styleObj = {}
+        if (this.normalizedScale !== 1) {
+          styleObj.fontSize = this.normalizedScale + 'em'
+        }
+        if (this.rotateDegree !== 0) {
+          styleObj.transform = `rotate(${this.rotateDegree}deg)`
+        }
+        return styleObj
+      },
+      raw() {
+        // generate unique id for each icon's SVG element with ID
+        if (!this.icon || !this.icon.raw) {
+          return null
+        }
+        let raw = this.icon.raw
+        let ids = {}
+        raw = raw.replace(
+          /\s(?:xml:)?id=(["']?)([^"')\s]+)\1/g,
+          (match, quote, id) => {
+            let uniqueId = getId('vat-')
+            ids[id] = uniqueId
+            return ` id="${uniqueId}"`
+          }
+        )
+        raw = raw.replace(
+          /#(?:([^'")\s]+)|xpointer\(id\((['"]?)([^')]+)\2\)\))/g,
+          (match, rawId, _, pointerId) => {
+            let id = rawId || pointerId
+            if (!id || !ids[id]) {
+              return match
+            }
+
+            return `#${ids[id]}`
+          }
+        )
+
+        return raw
+      },
+      focusable() {
+        let { tabindex } = this
+        if (tabindex == null) {
+          return 'false'
+        }
+        let index =
+          typeof tabindex === 'string' ? parseInt(tabindex, 10) : tabindex
+        if (index >= 0) {
+          return null
+        }
+        return 'false'
+      },
+    },
+    mounted() {
+      this.updateStack()
+    },
+    updated() {
+      this.updateStack()
+    },
+    methods: {
+      updateStack() {
+        if (!this.name && this.name !== null && this.$children.length === 0) {
+          warn(`Invalid prop: prop "name" is required.`, this)
+          return
+        }
+
+        if (this.icon) {
+          return
+        }
+
+        let width = 0
+        let height = 0
+        this.$children.forEach((child) => {
+          child.outerScale = this.normalizedScale
+
+          width = Math.max(width, child.width)
+          height = Math.max(height, child.height)
+        })
+        this.childrenWidth = width
+        this.childrenHeight = height
+        this.$children.forEach((child) => {
+          child.x = (width - child.width) / 2
+          child.y = (height - child.height) / 2
+        })
+      },
+    },
+    render(h) {
+      if (this.name === null) {
+        return h()
+      }
+
+      let options = {
+        class: this.klass,
+        style: this.style,
+        attrs: {
+          role: this.$attrs.role || (this.label || this.title ? 'img' : null),
+          'aria-label': this.label || null,
+          'aria-hidden': !(this.label || this.title),
+          tabindex: this.tabindex,
+          x: this.x,
+          y: this.y,
+          width: this.width,
+          height: this.height,
+          viewBox: this.box,
+          focusable: this.focusable,
+        },
+        on: this.$listeners,
+      }
+
+      if (this.raw) {
+        let html = `<g>${this.raw}</g>`
+
+        if (this.title) {
+          html = `<title>${escapeHTML(this.title)}</title>${html}`
+        }
+
+        options.domProps = { innerHTML: html }
+      }
+
+      let content = this.title ? [h('title', this.title)] : []
+
+      return h(
+        'svg',
+        options,
+        this.raw
+          ? null
+          : content.concat([
+              h(
+                'g',
+                this.$slots.default ||
+                  (this.icon
+                    ? [
+                        ...this.icon.paths.map((path, i) =>
+                          h('path', {
+                            attrs: path,
+                            key: `path-${i}`,
+                          })
+                        ),
+                        ...this.icon.polygons.map((polygon, i) =>
+                          h('polygon', {
+                            attrs: polygon,
+                            key: `polygon-${i}`,
+                          })
+                        ),
+                      ]
+                    : [])
+              ),
+            ])
+      )
+    },
+    register(data) {
+      for (let name in data) {
+        let icon = data[name]
+        let { paths = [], d, polygons = [], points } = icon
+
+        if (d) {
+          paths.push({ d })
+        }
+
+        if (points) {
+          polygons.push({ points })
+        }
+
+        icons[name] = assign({}, icon, {
+          paths,
+          polygons,
+        })
+      }
+    },
+    icons,
+  }
+
+  function hasOwn(obj, key) {
+    return Object.prototype.hasOwnProperty.call(obj, key)
+  }
+
+  function assign(obj, ...sources) {
+    sources.forEach((source) => {
+      for (let key in source) {
+        if (hasOwn(source, key)) {
+          obj[key] = source[key]
+        }
+      }
+    })
+
+    return obj
+  }
+
+  let count = 0
+  function getId(prefix = '') {
+    return prefix + count++
+  }
+
+  const ESCAPE_MAP = {
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '&': '&amp;',
+  }
+
+  function escapeHTML(html) {
+    return html.replace(/[<>"&]/g, (c) => ESCAPE_MAP[c] || c)
+  }
+</script>
+
+<style>
+  .fa-icon {
+    display: inline-block;
+    fill: currentColor;
+    overflow: hidden;
+    vertical-align: -0.3em;
+  }
+
+  .fa-icon > g {
+    transform-origin: 50% 50%;
+  }
+
+  .fa-flip-horizontal {
+    transform: scale(-1, 1);
+  }
+
+  .fa-flip-vertical {
+    transform: scale(1, -1);
+  }
+
+  .fa-flip-both {
+    transform: scale(-1, -1);
+  }
+
+  .fa-spin > g {
+    animation: fa-spin 1s 0s infinite linear;
+  }
+
+  .fa-pulse > g {
+    animation: fa-spin 1s infinite steps(8);
+  }
+
+  .fa-inverse {
+    color: #fff;
+  }
+
+  @keyframes fa-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/packages/Iframe/index.js

@@ -0,0 +1,6 @@
+import HtIframe from '../Iframe/src/main.vue'
+HtIframe.install = function(Vue) {
+  Vue.component(HtIframe.name, HtIframe)
+}
+
+export default HtIframe

package/packages/Iframe/src/main.vue

@@ -0,0 +1,208 @@
+<template>
+  <div :name="iframeNmae + 'Div'">
+    <iframe
+      id="iframeControl"
+      v-if="isReday"
+      :src="endSrc"
+      :height="height"
+      :width="width"
+      :style="iframeStyle"
+      :name="iframeNmae"
+      :frameborder="frameborder"
+    ></iframe>
+  </div>
+</template>
+<script>
+import { decode } from '@/util/base64'
+export default {
+  name: 'HtIframe',
+  componentName: 'HtIframe',
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    height: { type: String, default: '500px' },
+    width: { type: String, default: '100%' },
+    iframeStyle: { type: String, default: '' },
+    iframeNmae: { type: String, default: 'iframeControl' },
+    frameborder: { type: String, default: '1' },
+    data: {
+      type: Object,
+      default: () => {
+        return []
+      },
+    },
+    permission: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    instId: { type: String, default: '' },
+    isBusinessForm: { type: Boolean, default: false },
+    urlParameter: {
+      type: [Array, Object],
+      default: () => {
+        return {}
+      },
+    },
+    returnParameter: {
+      type: [Array, Object],
+      default: () => {
+        return {}
+      },
+    },
+    iframeType: {
+      type: String, // static dynamic
+      default: 'static'
+    },
+    iframeSrcJs: String // 动态url base64格式
+  },
+  data() {
+    return {
+      subPageData: {},
+      endSrc: '',
+      isReday: false,
+    }
+  },
+  async mounted() {
+    let _this = this
+    //拼接url参数
+    if (!this.src) {
+      this.$message.error('当前URL表单地址未填写。')
+      return
+    }
+    if (this.iframeType == 'dynamic') {
+      await this.getDynamicSrc()
+    } else {
+      this.endSrc = this.src
+    }
+    if (this.isBusinessForm) {
+      if (
+        this.urlParameter &&
+        this.urlParameter instanceof Array &&
+        this.urlParameter.length > 0
+      ) {
+        this.disposeUrl()
+      }
+    }
+    //父子页面事件监听器
+    window.addEventListener('message', (e) => {
+      if (e.data && e.data.type && e.data.iframeNmae == this.iframeNmae) {
+        if (e.data.type == 'getParentPageData') {
+          _this.getParentPageDataMsg()
+        } else if (e.data.type == 'getSubPageData') {
+          _this.getSubPageData(e.data.data)
+        } else if (e.data.type == 'addHeight') {
+          _this.addHeight(e.data.height)
+        }
+      }
+    })
+    this.isReday = true
+  },
+  created() {},
+  methods: {
+    async getDynamicSrc() {
+      if (!this.iframeSrcJs) {
+        return
+      }
+      let _this = this
+      let data = this.data
+      let currentUserDetail = await this.$requestConfig.getCurrentUser()
+      let userId = this.$requestConfig.getUserId()
+      let account = this.$requestConfig.getAccount()
+      let token = this.$requestConfig.getToken()
+      const preScript = `const scriptFunction = function(_this,data,currentUserDetail,userId,account,token){
+        ${decode(this.iframeSrcJs)}
+      };`
+      this.endSrc = eval(`${preScript} scriptFunction(_this,data,currentUserDetail,userId,account,token);`)
+    },
+    addHeight(height) {
+      this.height = height
+    },
+    async disposeUrl() {
+      let currentUserDetail = await this.$requestConfig.getCurrentUser()
+
+      let vStr = ''
+      for (let x = 0; x < this.urlParameter.length; x++) {
+        let parma = this.urlParameter[x]
+        if (parma.type == 1) {
+          vStr = vStr + `&${parma.key}=${this.getFromData(parma.value)}`
+        } else if (parma.type == 2) {
+          vStr = vStr + `&${parma.key}=${parma.value}`
+        } else if (parma.type == 3 && parma.value) {
+          let _this = this
+          const preScript = `const scriptFunction = function(_this){
+            ${Base64.decode(parma.value)}
+          };`
+          const result = eval(`${preScript} scriptFunction(_this);`)
+          if (result) {
+            vStr = vStr + `&${parma.key}=${result}`
+          }
+        } else if (parma.type == 4) {
+          let res = ''
+          if (parma.value == 1) {
+            res = currentUserDetail.fullname
+          } else if (parma.value == 2) {
+            res = currentUserDetail.userId
+          } else if (parma.value == 3) {
+            res = currentUserDetail.account
+          } else if (parma.value == 4) {
+            res = this.$requestConfig.getToken()
+          } else if (parma.value == 5) {
+            //得到任务id
+            res = this.$route.query.taskId
+          } else if (parma.value == 6) {
+            res = this.instId
+          }
+          vStr = vStr + `&${parma.key}=${res}`
+        }
+      }
+      if (this.endSrc.includes('?')) {
+        this.endSrc = this.endSrc + vStr
+      } else {
+        this.endSrc = this.endSrc + vStr.replace('&', '?')
+      }
+    },
+    getFromData(path) {
+      let pathAry = path.split('.')
+      let v = this.data
+      for (let x = 0; x < pathAry.length; x++) {
+        v = v[pathAry[x]]
+      }
+      return v
+    },
+    getSubPageData(subPageData) {
+      this.subPageData = subPageData
+      console.log(subPageData)
+    },
+    getParentPageDataMsg() {
+      const frm = this.getIframeDom()
+      frm.contentWindow.postMessage(
+        {
+          type: 'getParentPageData',
+          instId: this.instId,
+          data: this.data,
+          permission: this.permission,
+        },
+        '*'
+      )
+    },
+    getIframeDom() {
+      const frmControl = document.querySelectorAll(
+        `[name='${this.iframeNmae}']`
+      )
+      if (!frmControl || !frmControl[0]) {
+        this.$message.error('当前URL表单加载不正确。')
+        return
+      }
+      return frmControl[0]
+    },
+    //流程系统获取业务系统的表单数据
+    getSubPageData() {},
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>

package/packages/Image/index.js

@@ -0,0 +1,7 @@
+import Image from './src/main.vue'
+
+Image.install = function(Vue) {
+  Vue.component(Image.name, Image)
+}
+
+export default Image