From 0d3db253cad1fb49c4fae9b9a537c8c318c7172f Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 29 十一月 2023 10:23:59 +0800
Subject: [PATCH] 优化应用中心卸载
---
src/components/treeMenu/jsTree/treeItem.vue | 578 +++++++++++++++++++++++++++++---------------------------
1 files changed, 299 insertions(+), 279 deletions(-)
diff --git a/src/components/treeMenu/jsTree/treeItem.vue b/src/components/treeMenu/jsTree/treeItem.vue
index d0c97fa..3ba7d6e 100644
--- a/src/components/treeMenu/jsTree/treeItem.vue
+++ b/src/components/treeMenu/jsTree/treeItem.vue
@@ -1,279 +1,299 @@
-<template>
- <li
- role="treeitem"
- :class="classes"
- :draggable="draggable"
- @dragstart.stop="onItemDragStart($event, _self, _self.model)"
- @dragend.stop.prevent="onItemDragEnd($event, _self, _self.model)"
- @dragover.stop.prevent="isDragEnter = true"
- @dragenter.stop.prevent="isDragEnter = true"
- @dragleave.stop.prevent="isDragEnter = false"
- @drop.stop.prevent="handleItemDrop($event, _self, _self.model)"
- >
- <div role="presentation" :class="wholeRowClasses" v-if="isWholeRow"> </div>
- <i class="tree-icon tree-ocl" role="presentation" @click="handleItemToggle"></i>
- <div :class="anchorClasses" v-on="events">
- <i
- class="tree-icon tree-checkbox"
- role="presentation"
- v-show="isShowCheckBox"
- @click.stop="handleCheckbox($event)"
- ></i>
- <slot :vm="this" :model="model">
- <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">
- <tree-item
- v-for="(child, index) in model[childrenFieldName]"
- :key="index"
- :data="child"
- :text-field-name="textFieldName"
- :value-field-name="valueFieldName"
- :children-field-name="childrenFieldName"
- :item-events="itemEvents"
- :whole-row="wholeRow"
- :show-checkbox="showCheckbox"
- :allow-transition="allowTransition"
- :height="height"
- :parent-item="model[childrenFieldName]"
- :draggable="draggable"
- :drag-over-background-color="dragOverBackgroundColor"
- :on-item-click="onItemClick"
- :on-item-toggle="onItemToggle"
- :on-item-drag-start="onItemDragStart"
- :on-item-drag-end="onItemDragEnd"
- :on-item-drop="onItemDrop"
- :on-checkbox-click="onCheckboxClick"
- :klass="
- index === model[childrenFieldName].length - 1 ? 'tree-last' : ''
- "
- >
- <template slot-scope="_">
- <slot :vm="_.vm" :model="_.model">
- <i :class="_.vm.themeIconClasses" role="presentation" v-if="!model.loading"></i>
- <span v-html="_.model[textFieldName]"></span>
- </slot>
- </template>
- </tree-item>
- </ul>
- </li>
-</template>
-
-<script>
-/* eslint-disable */
-export default {
- name: "TreeItem",
- props: {
- data: { type: Object, required: true },
- textFieldName: { type: String },
- valueFieldName: { type: String },
- childrenFieldName: { type: String },
- itemEvents: { type: Object },
- wholeRow: { type: Boolean, default: false },
- showCheckbox: { type: Boolean, default: false },
- allowTransition: { type: Boolean, default: false },
- height: { type: Number, default: 24 },
- parentItem: { type: Array },
- draggable: { type: Boolean, default: false },
- dragOverBackgroundColor: { type: String },
- onItemClick: {
- type: Function,
- default: () => false
- },
- onItemToggle: {
- type: Function,
- default: () => false
- },
- onItemDragStart: {
- type: Function,
- default: () => false
- },
- onItemDragEnd: {
- type: Function,
- default: () => false
- },
- onItemDrop: {
- type: Function,
- default: () => false
- },
- onCheckboxClick: {
- type: Function,
- default: () => false
- },
- klass: String
- },
- data() {
- return {
- isHover: false,
- isDragEnter: false,
- model: this.data,
- maxHeight: 0,
- events: {}
- };
- },
- watch: {
- isDragEnter(newValue) {
- if (newValue) {
- this.$el.style.backgroundColor = this.dragOverBackgroundColor;
- } else {
- this.$el.style.backgroundColor = "inherit";
- }
- },
- data(newValue) {
- this.model = newValue;
- },
- "model.opened": {
- handler: function(val, oldVal) {
- this.onItemToggle(this, this.model);
- this.handleGroupMaxHeight();
- },
- deep: true
- }
- },
- computed: {
- isShowCheckBox() {
- return this.showCheckbox && (this.isHover || this.model.selected);
- },
- isFolder() {
- return (
- this.model[this.childrenFieldName] &&
- this.model[this.childrenFieldName].length
- );
- },
- classes() {
- return [
- { "tree-node": true },
- { "tree-open": this.model.opened },
- { "tree-closed": !this.model.opened },
- { "tree-leaf": !this.isFolder },
- { "tree-loading": !!this.model.loading },
- { "tree-drag-enter": this.isDragEnter },
- { [this.klass]: !!this.klass }
- ];
- },
- anchorClasses() {
- return [
- { "tree-anchor": true },
- { "tree-disabled": this.model.disabled },
- { "tree-selected": this.model.selected },
- { "tree-hovered": this.isHover }
- ];
- },
- wholeRowClasses() {
- return [
- { "tree-wholerow": true },
- { "tree-wholerow-clicked": this.model.selected },
- { "tree-wholerow-hovered": this.isHover }
- ];
- },
- themeIconClasses() {
- return [
- { "tree-icon": true },
- { "tree-themeicon": true },
- { [this.model.icon]: !!this.model.icon },
- { "tree-themeicon-custom": !!this.model.icon }
- ];
- },
- isWholeRow() {
- if (this.wholeRow) {
- if (
- this.$parent.model === undefined ||
- this.$parent.model.opened === true
- ) {
- return true;
- }
- }
-
- return false;
- },
- groupStyle() {
- return {
- position: this.model.opened ? "" : "relative",
- "max-height": !!this.allowTransition ? this.maxHeight + "px" : "",
- "transition-duration": this.allowTransition
- ? Math.ceil(this.model[this.childrenFieldName].length / 100) * 300 +
- "ms"
- : "",
- "transition-property": !!this.allowTransition ? "max-height" : "",
- display: this.allowTransition
- ? "block"
- : this.model.opened
- ? "block"
- : "none"
- };
- }
- },
- methods: {
- handleItemToggle(e) {
- if (this.isFolder) {
- this.model.opened = !this.model.opened;
- this.onItemToggle(this, this.model);
- }
- },
- handleGroupMaxHeight() {
- if (this.allowTransition) {
- let length = 0;
- let childHeight = 0;
- if (this.model.opened) {
- length = this.$children.length;
- for (let children of this.$children) {
- childHeight += children.maxHeight;
- }
- }
- this.maxHeight = length * this.height + childHeight;
- if (this.$parent.$options._componentTag === "tree-item") {
- this.$parent.handleGroupMaxHeight();
- }
- }
- },
- handleItemClick(e) {
- if (this.model.disabled) return;
- this.model.selected = !this.model.selected;
- this.onItemClick(this, this.model, e);
- },
- handleItemMouseOver() {
- this.isHover = true;
- },
- handleItemMouseOut() {
- this.isHover = false;
- },
- handleItemDrop(e, oriNode, oriItem) {
- this.$el.style.backgroundColor = "inherit";
- this.onItemDrop(e, oriNode, oriItem);
- },
- handleCheckbox(e) {
- 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
- };
- for (let itemEvent in this.itemEvents) {
- let itemEventCallback = this.itemEvents[itemEvent];
- if (events.hasOwnProperty(itemEvent)) {
- let eventCallback = events[itemEvent];
- events[itemEvent] = function(event) {
- eventCallback(self, self.model, event);
- itemEventCallback(self, self.model, event);
- };
- } else {
- events[itemEvent] = function(event) {
- itemEventCallback(self, self.model, event);
- };
- }
- }
- this.events = events;
- },
- mounted() {
- this.handleGroupMaxHeight();
- }
-};
-</script>
+<template>
+ <li
+ role="treeitem"
+ :class="classes"
+ :draggable="draggable"
+ @dragstart.stop="onItemDragStart($event, _self, _self.model)"
+ @dragend.stop.prevent="onItemDragEnd($event, _self, _self.model)"
+ @dragover.stop.prevent="isDragEnter = true"
+ @dragenter.stop.prevent="isDragEnter = true"
+ @dragleave.stop.prevent="isDragEnter = false"
+ @drop.stop.prevent="handleItemDrop($event, _self, _self.model)"
+ >
+ <div role="presentation" :class="wholeRowClasses" v-if="isWholeRow">
+
+ </div>
+ <i
+ class="tree-icon tree-ocl"
+ role="presentation"
+ @click="handleItemToggle"
+ ></i>
+ <div :class="anchorClasses" v-on="events">
+ <i
+ class="tree-icon tree-checkbox"
+ role="presentation"
+ v-show="isShowCheckBox"
+ @click.stop="handleCheckbox($event)"
+ ></i>
+ <slot :vm="this" :model="model">
+ <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"
+ >
+ <tree-item
+ v-for="(child, index) in model[childrenFieldName]"
+ :key="index"
+ :data="child"
+ :text-field-name="textFieldName"
+ :value-field-name="valueFieldName"
+ :children-field-name="childrenFieldName"
+ :item-events="itemEvents"
+ :whole-row="wholeRow"
+ :show-checkbox="showCheckbox"
+ :allow-transition="allowTransition"
+ :height="height"
+ :parent-item="model[childrenFieldName]"
+ :draggable="draggable"
+ :drag-over-background-color="dragOverBackgroundColor"
+ :on-item-click="onItemClick"
+ :on-item-toggle="onItemToggle"
+ :on-item-drag-start="onItemDragStart"
+ :on-item-drag-end="onItemDragEnd"
+ :on-item-drop="onItemDrop"
+ :on-checkbox-click="onCheckboxClick"
+ :klass="
+ index === model[childrenFieldName].length - 1 ? 'tree-last' : ''
+ "
+ >
+ <template slot-scope="_">
+ <slot :vm="_.vm" :model="_.model">
+ <i
+ :class="_.vm.themeIconClasses"
+ role="presentation"
+ v-if="!model.loading"
+ ></i>
+ <span v-html="_.model[textFieldName]"></span>
+ </slot>
+ </template>
+ </tree-item>
+ </ul>
+ </li>
+</template>
+
+<script>
+/* eslint-disable */
+export default {
+ name: "TreeItem",
+ props: {
+ data: { type: Object, required: true },
+ textFieldName: { type: String },
+ valueFieldName: { type: String },
+ childrenFieldName: { type: String },
+ itemEvents: { type: Object },
+ wholeRow: { type: Boolean, default: false },
+ showCheckbox: { type: Boolean, default: false },
+ allowTransition: { type: Boolean, default: false },
+ height: { type: Number, default: 24 },
+ parentItem: { type: Array },
+ draggable: { type: Boolean, default: false },
+ dragOverBackgroundColor: { type: String },
+ onItemClick: {
+ type: Function,
+ default: () => false,
+ },
+ onItemToggle: {
+ type: Function,
+ default: () => false,
+ },
+ onItemDragStart: {
+ type: Function,
+ default: () => false,
+ },
+ onItemDragEnd: {
+ type: Function,
+ default: () => false,
+ },
+ onItemDrop: {
+ type: Function,
+ default: () => false,
+ },
+ onCheckboxClick: {
+ type: Function,
+ default: () => false,
+ },
+ klass: String,
+ },
+ data() {
+ return {
+ isHover: false,
+ isDragEnter: false,
+ model: this.data,
+ maxHeight: 0,
+ events: {},
+ };
+ },
+ watch: {
+ isDragEnter(newValue) {
+ if (newValue) {
+ this.$el.style.backgroundColor = this.dragOverBackgroundColor;
+ } else {
+ this.$el.style.backgroundColor = "inherit";
+ }
+ },
+ data(newValue) {
+ this.model = newValue;
+ },
+ "model.opened": {
+ handler: function (val, oldVal) {
+ this.onItemToggle(this, this.model);
+ this.handleGroupMaxHeight();
+ },
+ deep: true,
+ },
+ },
+ computed: {
+ isShowCheckBox() {
+ return this.showCheckbox && (this.isHover || this.model.selected);
+ },
+ isFolder() {
+ return (
+ this.model[this.childrenFieldName] &&
+ this.model[this.childrenFieldName].length
+ );
+ },
+ classes() {
+ return [
+ { "tree-node": true },
+ { "tree-open": this.model.opened },
+ { "tree-closed": !this.model.opened },
+ { "tree-leaf": !this.isFolder },
+ { "tree-loading": !!this.model.loading },
+ { "tree-drag-enter": this.isDragEnter },
+ { [this.klass]: !!this.klass },
+ ];
+ },
+ anchorClasses() {
+ return [
+ { "tree-anchor": true },
+ { "tree-disabled": this.model.disabled },
+ { "tree-selected": this.model.selected },
+ { "tree-hovered": this.isHover },
+ ];
+ },
+ wholeRowClasses() {
+ return [
+ { "tree-wholerow": true },
+ { "tree-wholerow-clicked": this.model.selected },
+ { "tree-wholerow-hovered": this.isHover },
+ ];
+ },
+ themeIconClasses() {
+ return [
+ { "tree-icon": true },
+ { "tree-themeicon": true },
+ { [this.model.icon]: !!this.model.icon },
+ { "tree-themeicon-custom": !!this.model.icon },
+ ];
+ },
+ isWholeRow() {
+ if (this.wholeRow) {
+ if (
+ this.$parent.model === undefined ||
+ this.$parent.model.opened === true
+ ) {
+ return true;
+ }
+ }
+
+ return false;
+ },
+ groupStyle() {
+ return {
+ position: this.model.opened ? "" : "relative",
+ "max-height": !!this.allowTransition ? this.maxHeight + "px" : "",
+ "transition-duration": this.allowTransition
+ ? Math.ceil(this.model[this.childrenFieldName].length / 100) * 300 +
+ "ms"
+ : "",
+ "transition-property": !!this.allowTransition ? "max-height" : "",
+ display: this.allowTransition
+ ? "block"
+ : this.model.opened
+ ? "block"
+ : "none",
+ };
+ },
+ },
+ methods: {
+ handleItemToggle(e) {
+ if (this.isFolder) {
+ this.model.opened = !this.model.opened;
+ this.onItemToggle(this, this.model);
+ }
+ },
+ handleGroupMaxHeight() {
+ if (this.allowTransition) {
+ let length = 0;
+ let childHeight = 0;
+ if (this.model.opened) {
+ length = this.$children.length;
+ for (let children of this.$children) {
+ childHeight += children.maxHeight;
+ }
+ }
+ this.maxHeight = length * this.height + childHeight;
+ if (this.$parent.$options._componentTag === "tree-item") {
+ this.$parent.handleGroupMaxHeight();
+ }
+ }
+ },
+ handleItemClick(e) {
+ if (this.model.disabled) return;
+ this.model.selected = !this.model.selected;
+ this.onItemClick(this, this.model, e);
+ },
+ handleItemMouseOver() {
+ this.isHover = true;
+ },
+ handleItemMouseOut() {
+ this.isHover = false;
+ },
+ handleItemDrop(e, oriNode, oriItem) {
+ this.$el.style.backgroundColor = "inherit";
+ this.onItemDrop(e, oriNode, oriItem);
+ },
+ handleCheckbox(e) {
+ 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,
+ };
+ for (let itemEvent in this.itemEvents) {
+ let itemEventCallback = this.itemEvents[itemEvent];
+ if (events.hasOwnProperty(itemEvent)) {
+ let eventCallback = events[itemEvent];
+ events[itemEvent] = function (event) {
+ eventCallback(self, self.model, event);
+ itemEventCallback(self, self.model, event);
+ };
+ } else {
+ events[itemEvent] = function (event) {
+ itemEventCallback(self, self.model, event);
+ };
+ }
+ }
+ this.events = events;
+ },
+ mounted() {
+ this.handleGroupMaxHeight();
+ },
+};
+</script>
--
Gitblit v1.8.0