暂存

ZZJ

2021-12-20 832896ccaf8ac6a8ca31394e55577f064bc5eacf

 src/components/treeMenu/jsTree/treeItem.vue

@@ -10,8 +10,14 @@
    @dragleave.stop.prevent="isDragEnter = false"
    @drop.stop.prevent="handleItemDrop($event, _self, _self.model)"
  >
    <div role="presentation" :class="wholeRowClasses" v-if="isWholeRow">&nbsp;</div>
    <i class="tree-icon tree-ocl" role="presentation" @click="handleItemToggle"></i>
    <div role="presentation" :class="wholeRowClasses" v-if="isWholeRow">

      &nbsp;

    </div>

    <i

      class="tree-icon tree-ocl"

      role="presentation"

      @click="handleItemToggle"

    ></i>

    <div :class="anchorClasses" v-on="events">
      <i
        class="tree-icon tree-checkbox"
@@ -20,11 +26,21 @@
        @click.stop="handleCheckbox($event)"
      ></i>
      <slot :vm="this" :model="model">
        <i :class="themeIconClasses" role="presentation" v-if="!model.loading"></i>
        <i

          :class="themeIconClasses"

          role="presentation"

          v-if="!model.loading"

        ></i>

        <span v-html="model[textFieldName]"></span>
      </slot>
    </div>
    <ul role="group" ref="group" class="tree-children" v-if="isFolder" :style="groupStyle">
    <ul

      role="group"

      ref="group"

      class="tree-children"

      v-if="isFolder"

      :style="groupStyle"

    >

      <tree-item
        v-for="(child, index) in model[childrenFieldName]"
        :key="index"
@@ -52,7 +68,11 @@
      >
        <template slot-scope="_">
          <slot :vm="_.vm" :model="_.model">
            <i :class="_.vm.themeIconClasses" role="presentation" v-if="!model.loading"></i>
            <i

              :class="_.vm.themeIconClasses"

              role="presentation"

              v-if="!model.loading"

            ></i>

            <span v-html="_.model[textFieldName]"></span>
          </slot>
        </template>
@@ -80,29 +100,29 @@
    dragOverBackgroundColor: { type: String },
    onItemClick: {
      type: Function,
      default: () => false
      default: () => false,

    },
    onItemToggle: {
      type: Function,
      default: () => false
      default: () => false,

    },
    onItemDragStart: {
      type: Function,
      default: () => false
      default: () => false,

    },
    onItemDragEnd: {
      type: Function,
      default: () => false
      default: () => false,

    },
    onItemDrop: {
      type: Function,
      default: () => false
      default: () => false,

    },
    onCheckboxClick: {
      type: Function,
      default: () => false
      default: () => false,

    },
    klass: String
    klass: String,

  },
  data() {
    return {
@@ -110,7 +130,7 @@
      isDragEnter: false,
      model: this.data,
      maxHeight: 0,
      events: {}
      events: {},

    };
  },
  watch: {
@@ -129,8 +149,8 @@
        this.onItemToggle(this, this.model);
        this.handleGroupMaxHeight();
      },
      deep: true
    }
      deep: true,

    },

  },
  computed: {
    isShowCheckBox() {
@@ -150,7 +170,7 @@
        { "tree-leaf": !this.isFolder },
        { "tree-loading": !!this.model.loading },
        { "tree-drag-enter": this.isDragEnter },
        { [this.klass]: !!this.klass }
        { [this.klass]: !!this.klass },

      ];
    },
    anchorClasses() {
@@ -158,14 +178,14 @@
        { "tree-anchor": true },
        { "tree-disabled": this.model.disabled },
        { "tree-selected": this.model.selected },
        { "tree-hovered": this.isHover }
        { "tree-hovered": this.isHover },

      ];
    },
    wholeRowClasses() {
      return [
        { "tree-wholerow": true },
        { "tree-wholerow-clicked": this.model.selected },
        { "tree-wholerow-hovered": this.isHover }
        { "tree-wholerow-hovered": this.isHover },

      ];
    },
    themeIconClasses() {
@@ -173,7 +193,7 @@
        { "tree-icon": true },
        { "tree-themeicon": true },
        { [this.model.icon]: !!this.model.icon },
        { "tree-themeicon-custom": !!this.model.icon }
        { "tree-themeicon-custom": !!this.model.icon },

      ];
    },
    isWholeRow() {
@@ -201,9 +221,9 @@
          ? "block"
          : this.model.opened
          ? "block"
          : "none"
          : "none",

      };
    }
    },

  },
  methods: {
    handleItemToggle(e) {
@@ -247,14 +267,14 @@
      if (this.model.disabled) return;
      this.model.selected = !this.model.selected;
      this.onCheckboxClick(this, this.model, e);
    }
    },

  },
  created() {
    const self = this;
    const events = {
      click: this.handleItemClick,
      mouseover: this.handleItemMouseOver,
      mouseout: this.handleItemMouseOut
      mouseout: this.handleItemMouseOut,

    };
    for (let itemEvent in this.itemEvents) {
      let itemEventCallback = this.itemEvents[itemEvent];
@@ -274,6 +294,6 @@
  },
  mounted() {
    this.handleGroupMaxHeight();
  }
  },

};
</script>