three-trees-ui 1.0.0

package/packages/TimePicker/src/main.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-time-picker
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :arrow-control="arrowControl"
+      :name="inputName"
+      :picker-options="pickerOptions"
+      :disabled="disabled"
+      :readonly="readonly"
+      :editable="editable"
+      :clearable="clearable"
+      :size="inputSize"
+      :start-placeholder="startPlaceholderVal"
+      :end-placeholder="endPlaceholderVal"
+      :is-range="isRange"
+      :range-separator="rangeSeparator"
+      :value-format="valueFormat"
+      :default-value="defaultValue"
+      :placeholder="placeholder"
+      @blur="handleBlur"
+    ></el-time-picker>
+    <ht-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="value"
+    />
+  </div>
+</template>
+<script>
+  import HtFieldTail from '../../FieldTail/index'
+  import locale from '@/mixins/locale.js'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'HtTimePicker',
+    components: {
+      HtFieldTail,
+    },
+    mixins: [locale, permission, inputName, form],
+    props: {
+      value: String,
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      editable: {
+        type: Boolean,
+        default: true,
+      },
+      defaultValue: {
+        type: [String, Date],
+      },
+      valueFormat: {
+        type: String,
+        default: 'HH:mm:ss',
+      },
+      rangeSeparator: {
+        type: String,
+        default: '-',
+      },
+      pickerOptions: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+      arrowControl: {
+        type: Boolean,
+        default: false,
+      },
+      isRange: {
+        type: Boolean,
+        default: false,
+      },
+      endPlaceholder: {
+        type: String,
+      },
+      startPlaceholder: {
+        type: String,
+      },
+    },
+    computed: {
+      startPlaceholderVal() {
+        return this.startPlaceholder
+          ? this.startPlaceholder
+          : this.t('ht.date.startTime')
+      },
+      endPlaceholderVal() {
+        return this.endPlaceholder
+          ? this.endPlaceholder
+          : this.t('ht.date.endTime')
+      },
+      inputVal: {
+        get: function() {
+          if (this.value && this.isRange && this.value.constructor == String) {
+            return this.value.split(',')
+          }
+          return this.value
+        },
+        set: function(val) {
+          if (val && this.isRange && val.constructor == Array) {
+            this.$emit('input', val.join(','))
+            return
+          }
+          this.$emit('input', val)
+        },
+      },
+    },
+    methods: {
+      handleBlur() {
+        // element会触发blur事件，且参数为vue实例对象，在veeValidate中会将该对象识别为日期的值导致必填校验失效。
+        // 这里再次触发校验，让其对该控件的值再做一次校验。
+        setTimeout(() => {
+          this.$validator.validate()
+        }, 10)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div.inputs.ht-form-inputs__inline {
+    width: auto;
+  }
+  .inputs {
+    div.el-date-editor--timerange[aria-invalid='true'] {
+      border-color: #f56c6c;
+    }
+  }
+</style>

package/packages/TimeSelect/index.js

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

package/packages/TimeSelect/src/main.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    v-if="permission !== 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-time-select
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :name="inputName"
+      :clearable="clearable"
+      :picker-options="pickerOptions"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :size="inputSize"
+      :editable="editable"
+      @blur="handleBlur"
+    ></el-time-select>
+    <ht-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="inputVal"
+    />
+  </div>
+</template>
+<script>
+  import HtFieldTail from '../../FieldTail/index'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'HtTimeSelect',
+    components: {
+      HtFieldTail,
+    },
+    mixins: [permission, inputName, form],
+    props: {
+      value: String,
+      pickerOptions: {
+        type: Object,
+        default() {
+          return {
+            start: '00:00',
+            step: '00:15',
+            end: '23:59',
+          }
+        },
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      editable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      inputVal: {
+        get: function() {
+          return this.value
+        },
+        set: function(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    methods: {
+      handleBlur() {
+        // element会触发blur事件，且参数为vue实例对象，在veeValidate中会将该对象识别为日期的值导致必填校验失效。
+        // 这里再次触发校验，让其对该控件的值再做一次校验。
+        setTimeout(() => {
+          this.$validator.validate()
+        }, 10)
+      },
+    },
+  }
+</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;
+  }
+  .inputs.ht-form-inputs__block {
+    ::v-deep {
+      .el-date-editor {
+        width: 100%;
+      }
+    }
+  }
+</style>

package/packages/Tree/index.js

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

package/packages/Tree/src/main.vue

@@ -0,0 +1,443 @@
+<template>
+  <div :style="containerStyle">
+    <div v-if="supportFilter" class="tree-header flex">
+      <slot name="custom-prefix"></slot>
+      <el-input
+        v-model="filterText"
+        :placeholder="t('ht.tree.filterText')"
+        clearable
+      >
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+      </el-input>
+      <div
+        :class="
+          isIeExplorer
+            ? 'tree-button-group is-ie-explorer flex'
+            : 'tree-button-group flex'
+        "
+      >
+        <slot name="custom-button"></slot>
+        <ht-icon
+          class="tree-icon"
+          :name="isExpand ? 'simple-collapse' : 'simple-expand'"
+          :title="isExpand ? '收起' : '展开'"
+          scale="1.2"
+          @click="handleExpandCollapse"
+        />
+        <ht-icon
+          class="tree-icon refresh"
+          name="refresh"
+          :pulse="loading"
+          scale="1.1"
+          title="刷新"
+          @click="refresh"
+        />
+      </div>
+    </div>
+    <el-empty
+      v-if="isShowEmpty"
+      :image="treeNoDataImg"
+      :image-size="imageSize"
+    ></el-empty>
+    <el-tree
+      v-else
+      ref="elTree"
+      class="el-tree__wrapper"
+      :style="elTreeStyle"
+      :data="data ? data : treeData"
+      :props="props"
+      :empty-text="emptyText"
+      :default-expand-all="defaultExpandAll"
+      :filter-node-method="filterNode"
+      :load="load"
+      :lazy="lazy"
+      :show-checkbox="showCheckbox"
+      :accordion="accordion"
+      :node-key="nodeKey"
+      :default-expanded-keys="defaultExpandedKeys"
+      :highlight-current="highlightCurrent"
+      :render-after-expand="renderAfterExpand"
+      :render-content="renderContent"
+      :check-on-click-node="checkOnClickNode"
+      :auto-expand-parent="autoExpandParent"
+      :check-strictly="checkStrictly"
+      :current-node-key="currentNodeKey"
+      :indent="indent"
+      :icon-class="iconClass"
+      :draggable="draggable"
+      :allow-drag="allowDrag"
+      :allow-drop="allowDrop"
+      :expand-on-click-node="expandOnClickNode"
+      :default-checked-keys="defaultCheckedKeys"
+      @node-click="handleNodeClick"
+      @node-contextmenu="nodeContextmenu"
+      @check-change="checkChange"
+      @check="check"
+      @current-change="currentChange"
+      @node-expand="nodeExpand"
+      @node-collapse="nodeCollapse"
+      @node-drag-start="nodeDragStart"
+      @node-drag-enter="nodeDragEnter"
+      @node-drag-leave="nodeDragLeave"
+      @node-drag-over="nodeDragOver"
+      @node-drag-end="nodeDragEnd"
+      @node-drop="nodeDrop"
+    >
+      <slot
+        v-if="$scopedSlots['default']"
+        slot-scope="{ node, data: subData }"
+        :node="node"
+        :data="subData"
+      ></slot>
+      <template v-else slot-scope="{ node }">
+        <span
+          class="el-tree-node__label show-ellipsis"
+          :class="{ 'full-width': !showMoreButton }"
+          :title="node.label"
+        >
+          {{ node.label }}
+        </span>
+      </template>
+    </el-tree>
+  </div>
+</template>
+<script>
+  /* eslint-disable */
+  import { setTimeout } from 'timers'
+  import Locale from '@/mixins/locale'
+
+  export default {
+    name: 'HtTree',
+    mixins: [Locale],
+    props: {
+      data: Array,
+      treeData: Array,
+      load: {
+        type: Function,
+      },
+      lazy: {
+        type: Boolean,
+        default: false,
+      },
+      accordion: {
+        type: Boolean,
+        default: false,
+      },
+      showCheckbox: {
+        type: Boolean,
+        default: false,
+      },
+      defaultExpandAll: {
+        type: Boolean,
+        default: false,
+      },
+      props: {
+        type: Object,
+        default: function() {
+          return {
+            children: 'children',
+            label: 'label',
+          }
+        },
+      },
+      supportFilter: {
+        type: Boolean,
+        default: false,
+      },
+      showMoreButton: {
+        type: Boolean,
+        default: false,
+      },
+      iconClass: {
+        type: String,
+      },
+      nodeKey: {
+        type: String,
+      },
+      defaultExpandedKeys: {
+        type: Array,
+      },
+      highlightCurrent: {
+        type: Boolean,
+        default: false,
+      },
+      renderAfterExpand: {
+        type: Boolean,
+        default: true,
+      },
+      renderContent: {
+        type: Function,
+      },
+      filterNodeMethod: Function,
+      checkOnClickNode: {
+        type: Boolean,
+        default: false,
+      },
+      autoExpandParent: {
+        type: Boolean,
+        default: true,
+      },
+      checkStrictly: {
+        type: Boolean,
+        default: false,
+      },
+      currentNodeKey: {
+        type: [String, Number],
+      },
+      indent: {
+        type: Number,
+        default: 8,
+      },
+      draggable: {
+        type: Boolean,
+        default: false,
+      },
+      allowDrag: {
+        type: Function,
+      },
+      allowDrop: {
+        type: Function,
+      },
+      expandOnClickNode: {
+        type: Boolean,
+        default: true,
+      },
+      defaultCheckedKeys: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      emptyText: String,
+      height: {
+        type: [String, Number],
+        default: 0,
+        validator: (val) => {
+          if (typeof val == 'number') {
+            return val > -1
+          } else if (typeof val == 'string') {
+            const numVal = Number(val)
+            return !isNaN(numVal) && numVal > -1
+          } else {
+            return false
+          }
+        },
+      },
+      treeNoDataImg: {
+        type: String,
+        default: require('@/assets/table-no-data.png'),
+      },
+      imageSize: {
+        type: Number,
+        default: 122,
+      },
+    },
+    data() {
+      return {
+        filterText: '',
+        isExpand: this.defaultExpandAll,
+        isIeExplorer: false,
+        loading: false,
+        defaultProps: {
+          children: 'children',
+          label: 'label',
+        },
+      }
+    },
+    computed: {
+      heightNum() {
+        return typeof this.height == 'number'
+          ? this.height
+          : Number(this.height)
+      },
+      containerStyle() {
+        return this.heightNum > 0 ? { height: `${this.heightNum}px` } : {}
+      },
+      elTreeStyle() {
+        let style = { background: this.supportFilter ? '#fafafa' : '' }
+        if (this.heightNum > 0) {
+          Object.assign(style, {
+            height: this.supportFilter ? `calc(100% - 40px)` : '100%',
+            overflow: 'auto',
+          })
+        }
+        return style
+      },
+      isShowEmpty() {
+        return (
+          this.data &&
+          this.data.length < 1 &&
+          this.treeData && this.treeData.length < 1
+        )
+      },
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.elTree.filter(val)
+      },
+      defaultCheckedKeys(val) {
+        this.$refs.elTree.setCheckedKeys(val)
+      },
+    },
+    mounted() {
+      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+        this.isIeExplorer = true
+      }
+    },
+    methods: {
+      setCurrentKey(key) {
+        this.$refs.elTree.setCurrentKey(key)
+      },
+      filterNode(value, data, node) {
+        if (
+          this.filterNodeMethod &&
+          this.filterNodeMethod.constructor == Function
+        ) {
+          return this.filterNodeMethod(value, data, node)
+        }
+        if (!value) return true
+        return data[this.props.label].indexOf(value) !== -1
+      },
+      handleNodeClick(data, node, nodeComponent) {
+        this.$emit('node-click', data, node, nodeComponent)
+      },
+      nodeContextmenu(event, data, node, nodeComponent) {
+        this.$emit('node-contextmenu', event, data, node, nodeComponent)
+      },
+      checkChange(data, isChecked, hasChildChecked) {
+        this.$emit('check-change', data, isChecked, hasChildChecked)
+      },
+      check(data, checkedObj) {
+        this.$emit('check', data, checkedObj)
+      },
+      currentChange(data, node) {
+        this.$emit('current-change', data, node)
+      },
+      nodeExpand(data, node, nodeComponent) {
+        this.$emit('node-expand', data, node, nodeComponent)
+      },
+      nodeCollapse(data, node, nodeComponent) {
+        this.$emit('node-collapse', data, node, nodeComponent)
+      },
+      nodeDragStart(node, event) {
+        this.$emit('node-drag-start', node, event)
+      },
+      nodeDragEnter(dragNode, enterNode, event) {
+        this.$emit('node-drag-enter', dragNode, enterNode, event)
+      },
+      nodeDragLeave(dragNode, enterNode, event) {
+        this.$emit('node-drag-leave', dragNode, enterNode, event)
+      },
+      nodeDragOver(dragNode, enterNode, event) {
+        this.$emit('node-drag-over', dragNode, enterNode, event)
+      },
+      nodeDragEnd(dragNode, endNode, position, event) {
+        this.$emit('node-drag-end', dragNode, endNode, position, event)
+      },
+      nodeDrop(dragNode, endNode, position, event) {
+        this.$emit('node-drop', dragNode, endNode, position, event)
+      },
+      // 树状菜单的全部展开和收起
+      handleExpandCollapse() {
+        this.isExpand = !this.isExpand
+        let elTree = this.$refs.elTree
+        this.setNodesExpand(elTree.root.childNodes)
+      },
+      //设置节点展开收起
+      setNodesExpand(nodes) {
+        if (nodes && nodes.length > 0) {
+          nodes.map((item) => {
+            item.expanded = this.isExpand
+            if (item.childNodes && item.childNodes.length > 0) {
+              this.setNodesExpand(item.childNodes)
+            }
+          })
+        }
+      },
+      refresh() {
+        this.loading = true
+        this.$emit('refresh', () => {
+          this.loading = false
+          this.isExpand = this.defaultExpandAll
+        })
+        setTimeout(() => {
+          this.loading = false
+          this.isExpand = this.defaultExpandAll
+        }, 5000)
+      },
+    },
+  }
+</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;
+  }
+  .is-ie-explorer {
+    margin-right: 25px;
+  }
+
+  div.tree-button-group i {
+    cursor: pointer;
+    display: inline;
+    font-size: 18px;
+    font-weight: bold;
+    margin-right: 10px;
+  }
+
+  div.tree-button-group i:hover {
+    color: lightcoral;
+  }
+
+  div.tree-header {
+    min-height: 30px;
+  }
+
+  .tree-button-group {
+    margin-left: 10px;
+  }
+
+  div.tree-header ::v-deep .el-input__inner {
+    border-width: 0;
+    padding-right: 0;
+  }
+
+  ::v-deep {
+    .custom-tree-node {
+      width: calc(100% - 40px);
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      padding-right: 8px;
+    }
+
+    .custom-tree-node .more-icon {
+      visibility: hidden;
+      font-weight: bold;
+    }
+
+    .custom-tree-node:hover .more-icon {
+      visibility: visible;
+    }
+    span.full-width {
+      width: 100%;
+    }
+    .show-ellipsis {
+      display: block;
+      width: calc(100% - 25px);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .tree-icon {
+    margin-right: 8px;
+    cursor: pointer;
+  }
+
+  .el-tree__wrapper {
+    @include base-scrollbar;
+  }
+</style>