three-trees-ui 1.0.0

package/packages/Avatar/src/AvatarImage.vue

@@ -0,0 +1,218 @@
+<template>
+  <div
+    class="vue-avatar--wrapper"
+    :style="[style, customStyle]"
+    aria-hidden="true"
+  >
+    <img v-if="isImage" style="display: none" :src="src" @error="onImgError" />
+    <span v-show="!isImage">{{ userInitial }}</span>
+  </div>
+</template>
+
+<script>
+  const getInitials = (username) => {
+    let parts = username.split(/[ -]/)
+    let initials = ''
+
+    for (var i = 0; i < parts.length; i++) {
+      initials += parts[i].charAt(0)
+    }
+
+    if (initials.length > 3 && initials.search(/[A-Z]/) !== -1) {
+      initials = initials.replace(/[a-z]+/g, '')
+    }
+    // 包括中文且没有空格
+    if (parts.length == 1 && /^[\u4e00-\u9fa5]+.*$/.test(username)) {
+      initials =
+        username.length > 1 ? username.substr(0, 2) : username.substr(0, 1)
+    } else {
+      initials = initials.substr(0, 3).toUpperCase()
+    }
+
+    return initials
+  }
+
+  export default {
+    name: 'HtAvatarImage',
+    props: {
+      username: {
+        type: String,
+      },
+      initials: {
+        type: String,
+      },
+      backgroundColor: {
+        type: String,
+      },
+      color: {
+        type: String,
+      },
+      customStyle: {
+        type: Object,
+      },
+      inline: {
+        type: Boolean,
+      },
+      size: {
+        type: Number,
+        default: 50,
+      },
+      src: {
+        type: String,
+      },
+      rounded: {
+        type: Boolean,
+        default: true,
+      },
+      lighten: {
+        type: Number,
+        default: 80,
+      },
+      parser: {
+        type: Function,
+        default: getInitials,
+        validator: (parser) => typeof parser('John', getInitials) === 'string',
+      },
+    },
+
+    data() {
+      return {
+        backgroundColors: [
+          '#F44336',
+          '#FF4081',
+          '#9C27B0',
+          '#673AB7',
+          '#3F51B5',
+          '#2196F3',
+          '#03A9F4',
+          '#00BCD4',
+          '#009688',
+          '#4CAF50',
+          '#8BC34A',
+          '#CDDC39',
+          '#FFC107',
+          '#FF9800',
+          '#FF5722',
+          '#795548',
+          '#9E9E9E',
+          '#607D8B',
+        ],
+        imgError: false,
+      }
+    },
+    computed: {
+      background() {
+        if (!this.isImage) {
+          return (
+            this.backgroundColor ||
+            this.randomBackgroundColor(
+              this.username.length,
+              this.backgroundColors
+            )
+          )
+        }
+        return null
+      },
+
+      fontColor() {
+        if (!this.isImage) {
+          return this.color || this.lightenColor(this.background, this.lighten)
+        }
+        return null
+      },
+
+      isImage() {
+        return !this.imgError && Boolean(this.src)
+      },
+
+      style() {
+        const style = {
+          display: this.inline ? 'inline-flex' : 'flex',
+          width: `${this.size}px`,
+          height: `${this.size}px`,
+          borderRadius: this.rounded ? '50%' : 0,
+          lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
+          fontWeight: 'bold',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          userSelect: 'none',
+        }
+
+        const imgBackgroundAndFontStyle = {
+          background: `transparent url('${this.src}') no-repeat scroll 0% 0% / ${this.size}px ${this.size}px content-box border-box`,
+        }
+
+        const initialBackgroundAndFontStyle = {
+          backgroundColor: this.background,
+          font: `${Math.floor(this.size / 2.5)}px/${
+            this.size
+          }px Helvetica, Arial, sans-serif`,
+          color: this.fontColor,
+        }
+
+        const backgroundAndFontStyle = this.isImage
+          ? imgBackgroundAndFontStyle
+          : initialBackgroundAndFontStyle
+
+        Object.assign(style, backgroundAndFontStyle)
+
+        return style
+      },
+
+      userInitial() {
+        if (!this.isImage) {
+          const initials =
+            this.initials || this.parser(this.username, getInitials)
+          return initials
+        }
+        return ''
+      },
+    },
+
+    mounted() {
+      if (!this.isImage) {
+        this.$emit('avatar-initials', this.username, this.userInitial)
+      }
+    },
+
+    methods: {
+      initial: getInitials,
+
+      onImgError() {
+        this.imgError = true
+      },
+
+      randomBackgroundColor(seed, colors) {
+        return colors[seed % colors.length]
+      },
+
+      lightenColor(hex, amt) {
+        var usePound = false
+
+        if (hex[0] === '#') {
+          hex = hex.slice(1)
+          usePound = true
+        }
+
+        var num = parseInt(hex, 16)
+        var r = (num >> 16) + amt
+
+        if (r > 255) r = 255
+        else if (r < 0) r = 0
+
+        var b = ((num >> 8) & 0x00ff) + amt
+
+        if (b > 255) b = 255
+        else if (b < 0) b = 0
+
+        var g = (num & 0x0000ff) + amt
+
+        if (g > 255) g = 255
+        else if (g < 0) g = 0
+
+        return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
+      },
+    },
+  }
+</script>

package/packages/Button/index.js

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

package/packages/Button/src/main.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    v-if="permission !== 'n'"
+    v-express
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <ht-input
+      v-if="isShowInput"
+      v-model="inputVal"
+      :size="inputSize"
+      :placeholder="placeholder"
+      type="text"
+      :permission="permission_sub"
+    >
+      <template v-if="inputWriteable" slot="append">
+        <el-button
+          btn="btn"
+          :size="inputSize"
+          type="primary"
+          :icon="icon"
+          @click="customEvilJS"
+        >
+          {{ btnName }}
+        </el-button>
+      </template>
+    </ht-input>
+    <el-button
+      v-else
+      :disabled="!inputWriteable"
+      btn="btn"
+      :size="inputSize"
+      type="primary"
+      :icon="icon"
+      @click="customEvilJS"
+    >
+      {{ btnName }}
+    </el-button>
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+  import script from '@/mixins/script.js'
+
+  export default {
+    name: 'HtButton',
+    mixins: [permission, inputName, form, script],
+    props: {
+      value: [String, Number],
+      icon: String,
+      btnName: String,
+      isShowInput: Boolean,
+    },
+    computed: {
+      inputVal: {
+        get() {
+          return this.value
+        },
+        set(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    methods: {
+      customEvilJS() {
+        const result = this.evilJS()
+
+        if (result != null && result != undefined) {
+          this.inputVal = result
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div[aria-invalid='true'] ::v-deep .el-input__inner,
+  div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
+    border-color: #f56c6c;
+  }
+  .button-row {
+    margin: 5px 10px;
+    float: right;
+  }
+</style>

package/packages/Cascader/index.js

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

package/packages/Cascader/src/main.vue

@@ -0,0 +1,210 @@
+<template>
+  <div
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-cascader
+      v-if="inputWriteable && permission_sub != 'n'"
+      :ref="refName"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :size="inputSize"
+      :props="propsVal"
+      :name="inputName"
+      :validate="validate"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :clearable="clearable"
+      :show-all-levels="showAllLevels"
+      :collapse-tags="collapseTags"
+      :separator="separator"
+      :popper-class="popperClass"
+      @change="(node) => $emit('change', node)"
+      @expand-change="(parentNodes) => $emit('expand-change', parentNodes)"
+      @blur="(event) => $emit('blur', event)"
+      @focus="(event) => $emit('focus', event)"
+      @visible-change="(show) => $emit('visible-change', show)"
+      @remove-tag="(node) => $emit('remove-tag', node)"
+    >
+      <slot slot="empty" name="empty"></slot>
+      <slot slot-scope="{ node, data }" :node="node" :data="data"></slot>
+    </el-cascader>
+    <ht-field-tail
+      v-if="permission != 'n'"
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="inputVal"
+    ></ht-field-tail>
+  </div>
+</template>
+
+<script>
+  import utils from '@/utils.js'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+  import ganged from '@/mixins/ganged.js'
+
+  export default {
+    name: 'HtCascader',
+    mixins: [permission, inputName, form, ganged],
+    props: {
+      value: String,
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      showAllLevels: {
+        type: Boolean,
+        default: true,
+      },
+      collapseTags: {
+        type: Boolean,
+        default: false,
+      },
+      separator: {
+        type: String,
+        default: '>',
+      },
+      popperClass: {
+        type: String,
+      },
+    },
+    data() {
+      let _this = this
+      return {
+        refName: `cascader-${utils.getName()}`,
+        lazyLoadResolve: null,
+        propsVal: {
+          value: _this.ganged.valueBind,
+          label: _this.ganged.labelBind,
+          lazy: true,
+          lazyLoad(node, resolve) {
+            _this.dynamicLoadOption(node, resolve)
+          },
+        },
+      }
+    },
+    computed: {
+      inputVal: {
+        get() {
+          if (this.value) {
+            if (this.value.constructor == String) {
+              if (!this.value) {
+                return ''
+              }
+              let cascaderModel = JSON.parse(this.value)
+              if (!this.inputWriteable) {
+                return cascaderModel.pathLabels.join('>')
+              }
+              return cascaderModel.path
+            }
+            return this.value.path
+          } else {
+            return this.value
+          }
+        },
+        set() {
+          let selectValArr = this.$refs[this.refName].getCheckedNodes(false)
+          if (selectValArr.length > 0 && selectValArr[0] !== null) {
+            let result = {
+              path: selectValArr[0].path,
+              pathLabels: selectValArr[0].pathLabels,
+            }
+            this.$emit('input', JSON.stringify(result))
+          } else {
+            this.$emit('input', '')
+          }
+        },
+      },
+    },
+    methods: {
+      /**
+       * 获取选中的节点
+       */
+      getCheckedNodes: function(leafOnly) {
+        return this.$refs[this.refName].getCheckedNodes(leafOnly)
+      },
+      // 动态加载选项
+      dynamicLoadOption: function(node, resolve) {
+        this.lazyLoadResolve = resolve
+        setTimeout(() => {
+          const params = this.prepareLoadParams(this.ganged.bind, node)
+          this.doCustomQuery(params).then((data) =>
+            this.dynamicOptionResponse(data, this.ganged.leafJudge)
+          )
+        }, 0)
+      },
+      // 准备查询参数
+      prepareLoadParams: function(condition, node) {
+        let params = {}
+        if (condition && !utils.isEmpty(condition)) {
+          Object.keys(condition).forEach((k) => {
+            const bindSet = condition[k]
+            let val = null
+            // 参数绑定是对象
+            if (bindSet.constructor == Object) {
+              // 根节点
+              if (node.level == 0) {
+                val = !utils.isEmpty(bindSet['default'])
+                  ? bindSet['default']
+                  : null
+              } else {
+                val = node.data[bindSet['key']]
+              }
+            }
+            // 参数绑定是字符串
+            else if (bindSet.constructor == String && node.level > 0) {
+              val = node.data[bindSet]
+            }
+            if (!utils.isEmpty(val)) {
+              params[k] = val
+            }
+          })
+        }
+        return params
+      },
+      // 动态加载选项返回值处理
+      dynamicOptionResponse: function(data, leafJudge) {
+        if (this.lazyLoadResolve) {
+          // 判定是否叶子节点的方法
+          if (leafJudge && leafJudge.constructor == Function) {
+            data.forEach((opt) => {
+              opt.leaf = leafJudge(opt)
+            })
+          }
+          this.lazyLoadResolve(data)
+          // 动态加载选项后触发组件视图更新
+          this.$refs[this.refName].computePresentContent()
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  div[aria-invalid='true'] {
+    ::v-deep {
+      .el-input__inner,
+      .el-input__inner:focus {
+        border-color: #f56c6c;
+      }
+    }
+  }
+
+  .inputs {
+    ::v-deep {
+      .el-cascader {
+        width: 100%;
+      }
+    }
+  }
+</style>

package/packages/Chart/index.js

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