411 lines
12 KiB
Vue
411 lines
12 KiB
Vue
<template>
|
||
<List
|
||
class="he-tree"
|
||
:id="nodeKey"
|
||
ref="virtualizationList"
|
||
:items="visibleStats"
|
||
:enabled="virtualization"
|
||
:class="{'he-tree-rtl': rtl}"
|
||
>
|
||
<template #prepend>
|
||
<slot name="prepend" :tree="self"></slot>
|
||
</template>
|
||
<template #default="{ item: stat, index }">
|
||
<TreeNode :vt-index="index" :class="[
|
||
stat.class,
|
||
{
|
||
'drag-placeholder-wrapper': stat.data === placeholderData,
|
||
'dragging-node': stat === dragNode,
|
||
},
|
||
]" :style="stat.style" :stat="stat" :rtl="rtl" :btt="btt" :indent="indent" :table="table" :treeLine="treeLine"
|
||
:treeLineOffset="treeLineOffset" :processor="processor" @click="$emit('click:node', stat)"
|
||
@open="$emit('open:node', $event)" @close="$emit('close:node', $event)" @check="$emit('check:node', $event)">
|
||
<template #default="{ indentStyle }">
|
||
<template v-if="stat.data === placeholderData">
|
||
<view v-if="!table" class="drag-placeholder he-tree-drag-placeholder">
|
||
<slot name="placeholder" :tree="self"></slot>
|
||
</view>
|
||
<td v-else :style="indentStyle" :colspan="placeholderColspan">
|
||
<view class="drag-placeholder he-tree-drag-placeholder">
|
||
<slot name="placeholder" :tree="self"></slot>
|
||
</view>
|
||
</td>
|
||
</template>
|
||
<slot v-else :node="stat.data" :stat="stat" :indentStyle="indentStyle" :tree="self">{{ stat.data[textKey] }}
|
||
</slot>
|
||
</template>
|
||
</TreeNode>
|
||
</template>
|
||
<template #append>
|
||
<slot name="append" :tree="self"></slot>
|
||
</template>
|
||
</List>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
// 如果遇到滚动不流畅的情况，不用处理，因为Dev tool造成的。
|
||
// If the scrolling is not smooth, do not deal with it, because it is caused by the Dev tool.
|
||
import { PropType, defineComponent, reactive } from "./vue";
|
||
import * as hp from "./helper-js";
|
||
import List from "./list";
|
||
import TreeNode from "./treeNode.vue";
|
||
import { vueMakeTreeProcessor, Stat, TreeProcessor } from "./TreeProcessorVue";
|
||
|
||
export { walkTreeData } from "./helper-js";
|
||
|
||
const cpt = defineComponent({
|
||
components: { List, TreeNode },
|
||
props: {
|
||
// for vue3
|
||
modelValue: { required: true, type: Array as PropType<any[]> },
|
||
updateBehavior: {
|
||
type: String as PropType<"modify" | "new" | "disabled">,
|
||
default: "modify",
|
||
},
|
||
processor: {
|
||
type: Object as PropType<TreeProcessor>,
|
||
default: () =>
|
||
vueMakeTreeProcessor([], {
|
||
noInitialization: true,
|
||
}),
|
||
},
|
||
childrenKey: { type: String, default: "children" },
|
||
/**
|
||
* for default slot. 用于默认插槽
|
||
*/
|
||
textKey: { type: String, default: "text" },
|
||
/**
|
||
* node indent. 节点缩进
|
||
*/
|
||
indent: { type: Number, default: 20 },
|
||
/**
|
||
* Enable virtual list. 启用虚拟列表
|
||
*/
|
||
virtualization: { type: Boolean, default: false },
|
||
/**
|
||
* Render count for virtual list at start. 虚拟列表初始渲染数量.
|
||
*/
|
||
virtualizationPrerenderCount: { type: Number, default: 20 },
|
||
/**
|
||
* Open all nodes by default. 默认打开所有节点.
|
||
*/
|
||
defaultOpen: { type: Boolean, default: true },
|
||
statHandler: { type: Function as PropType<(stat: Stat<any>) => Stat<any>> },
|
||
/**
|
||
* From right to left. 由右向左显示.
|
||
*/
|
||
rtl: { type: Boolean, default: false },
|
||
/**
|
||
* From bottom to top. 由下向上显示
|
||
*/
|
||
btt: { type: Boolean, default: false },
|
||
/**
|
||
* Display as table
|
||
*/
|
||
table: { type: Boolean, default: false },
|
||
watermark: { type: Boolean, default: false },
|
||
nodeKey: {
|
||
type: [String, Function] as PropType<
|
||
"index" | ((stat: Stat<any>, index: number) => any)
|
||
>,
|
||
default: 'index',
|
||
},
|
||
treeLine: { type: Boolean, default: false },
|
||
treeLineOffset: { type: Number, default: 8 },
|
||
},
|
||
emits: [
|
||
"update:modelValue",
|
||
"click:node",
|
||
"open:node",
|
||
"close:node",
|
||
"check:node",
|
||
"beforeDragStart",
|
||
"before-drag-start",
|
||
"after-drop",
|
||
"change",
|
||
"enter",
|
||
"leave",
|
||
],
|
||
data() {
|
||
return {
|
||
treeID: hp.randString(),
|
||
stats: [],
|
||
statsFlat: [],
|
||
dragNode: null,
|
||
dragOvering: false,
|
||
placeholderData: {},
|
||
placeholderColspan: 1,
|
||
batchUpdateWaiting: false,
|
||
self: this,
|
||
_ignoreValueChangeOnce: false,
|
||
} as {
|
||
treeID: any,
|
||
stats: Exclude<TreeProcessor["stats"], null>;
|
||
statsFlat: Exclude<TreeProcessor["statsFlat"], null>;
|
||
dragNode: Stat<any> | null;
|
||
dragOvering: boolean;
|
||
placeholderData: {};
|
||
placeholderColspan: number;
|
||
batchUpdateWaiting: boolean;
|
||
self: any;
|
||
_ignoreValueChangeOnce: boolean;
|
||
};
|
||
},
|
||
computed: {
|
||
valueComputed() {
|
||
return (this.modelValue) || [];
|
||
},
|
||
visibleStats() {
|
||
const { statsFlat, isVisible } = this;
|
||
let items = statsFlat;
|
||
if (this.btt) {
|
||
items = items.slice();
|
||
items.reverse();
|
||
}
|
||
return items.filter((stat) => isVisible(stat));
|
||
},
|
||
rootChildren() {
|
||
return this.stats
|
||
},
|
||
},
|
||
methods: {
|
||
_emitValue(value: any[]) {
|
||
// @ts-ignore
|
||
this.$emit("update:modelValue", value);
|
||
},
|
||
/**
|
||
* private method
|
||
* @param value
|
||
*/
|
||
_updateValue(value: any[]) {
|
||
if (this.updateBehavior === "disabled") {
|
||
return false;
|
||
}
|
||
// if value changed, ignore change once
|
||
if (value !== this.valueComputed) {
|
||
this._ignoreValueChangeOnce = true;
|
||
}
|
||
this._emitValue(value);
|
||
return true;
|
||
},
|
||
getStat: reactiveFirstArg(
|
||
processorMethodProxy("getStat")
|
||
) as TreeProcessor["getStat"],
|
||
has: reactiveFirstArg(processorMethodProxy("has")) as TreeProcessor["has"],
|
||
updateCheck: processorMethodProxy(
|
||
"updateCheck"
|
||
) as TreeProcessor["updateCheck"],
|
||
getChecked: processorMethodProxy(
|
||
"getChecked"
|
||
) as TreeProcessor["getChecked"],
|
||
getUnchecked: processorMethodProxy(
|
||
"getUnchecked"
|
||
) as TreeProcessor["getUnchecked"],
|
||
openAll: processorMethodProxy("openAll") as TreeProcessor["openAll"],
|
||
closeAll: processorMethodProxy("closeAll") as TreeProcessor["closeAll"],
|
||
openNodeAndParents: processorMethodProxy("openNodeAndParents") as TreeProcessor["openNodeAndParents"],
|
||
isVisible: processorMethodProxy("isVisible") as TreeProcessor["isVisible"],
|
||
move: processorMethodProxyWithBatchUpdate("move") as TreeProcessor["move"],
|
||
add: reactiveFirstArg(
|
||
processorMethodProxyWithBatchUpdate("add")
|
||
) as TreeProcessor["add"],
|
||
addMulti(
|
||
dataArr: any[],
|
||
parent?: Stat<any> | null,
|
||
startIndex?: number | null
|
||
) {
|
||
this.batchUpdate(() => {
|
||
let index = startIndex;
|
||
for (const data of dataArr) {
|
||
this.add(data, parent, index);
|
||
if (index != null) {
|
||
index++;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
remove: processorMethodProxy("remove") as TreeProcessor["remove"],
|
||
removeMulti(dataArr: any[]) {
|
||
let cloned = [...dataArr];
|
||
this.batchUpdate(() => {
|
||
for (const data of cloned) {
|
||
this.remove(data);
|
||
}
|
||
});
|
||
},
|
||
iterateParent: processorMethodProxy(
|
||
"iterateParent"
|
||
) as TreeProcessor["iterateParent"],
|
||
getSiblings: processorMethodProxy(
|
||
"getSiblings"
|
||
) as TreeProcessor["getSiblings"],
|
||
getData: processorMethodProxy("getData") as hp.ReplaceReturnType<
|
||
TreeProcessor["getData"],
|
||
any[]
|
||
>,
|
||
getRootEl() {
|
||
// @ts-ignore
|
||
return this.$refs.vtlist.listElRef as HTMLElement;
|
||
},
|
||
batchUpdate(task: () => any | Promise<any>) {
|
||
const r = this.ignoreUpdate(task);
|
||
if (!this.batchUpdateWaiting) {
|
||
this._updateValue(
|
||
this.updateBehavior === "new" ? this.getData() : this.valueComputed
|
||
);
|
||
}
|
||
return r;
|
||
},
|
||
ignoreUpdate(task: () => any | Promise<any>) {
|
||
const old = this.batchUpdateWaiting;
|
||
this.batchUpdateWaiting = true;
|
||
const r = task();
|
||
this.batchUpdateWaiting = old;
|
||
return r;
|
||
},
|
||
},
|
||
watch: {
|
||
processor: {
|
||
immediate: true,
|
||
handler(processor: typeof this.processor) {
|
||
if (processor) {
|
||
// hook
|
||
const getNodeDataChildren = (nodeData: any): any[] => {
|
||
if (!nodeData) {
|
||
return this.valueComputed;
|
||
} else {
|
||
const { childrenKey } = this;
|
||
if (!nodeData[childrenKey]) {
|
||
nodeData[childrenKey] = [];
|
||
}
|
||
return nodeData[childrenKey];
|
||
}
|
||
};
|
||
processor["_statHandler2"] = this.statHandler
|
||
? (stat) => {
|
||
if (stat.data === this.placeholderData) {
|
||
return stat;
|
||
}
|
||
return this.statHandler!(stat);
|
||
}
|
||
: null;
|
||
processor.afterSetStat = (stat, parent, index) => {
|
||
const { childrenKey, updateBehavior } = this;
|
||
let value = this.valueComputed;
|
||
if (updateBehavior === "new") {
|
||
if (this.batchUpdateWaiting) {
|
||
return;
|
||
}
|
||
value = this.getData();
|
||
} else if (updateBehavior === "modify") {
|
||
const siblings = getNodeDataChildren(parent?.data);
|
||
if (siblings.includes(stat.data)) {
|
||
// when call add -> add child -> _setPositionm ignore because the child already in parent.children
|
||
} else {
|
||
siblings.splice(index, 0, stat.data);
|
||
}
|
||
} else if (updateBehavior === "disabled") {
|
||
}
|
||
if (this.batchUpdateWaiting) {
|
||
return;
|
||
}
|
||
this._updateValue(value);
|
||
};
|
||
processor.afterRemoveStat = (stat) => {
|
||
const { childrenKey, updateBehavior } = this;
|
||
let value = this.valueComputed;
|
||
if (updateBehavior === "new") {
|
||
if (this.batchUpdateWaiting) {
|
||
return;
|
||
}
|
||
value = this.getData();
|
||
} else if (updateBehavior === "modify") {
|
||
const siblings = getNodeDataChildren(stat.parent?.data);
|
||
hp.arrayRemove(siblings, stat.data);
|
||
} else if (updateBehavior === "disabled") {
|
||
}
|
||
if (this.batchUpdateWaiting) {
|
||
return;
|
||
}
|
||
this._updateValue(value);
|
||
};
|
||
}
|
||
if (!processor.initialized) {
|
||
processor.data = this.valueComputed;
|
||
Object.assign(
|
||
processor,
|
||
hp.objectOnly(this, ["childrenKey", "defaultOpen"])
|
||
);
|
||
processor.init();
|
||
processor.updateCheck();
|
||
}
|
||
this.stats = processor.stats!;
|
||
this.statsFlat = processor.statsFlat!;
|
||
if (processor.data !== this.valueComputed) {
|
||
this._updateValue(processor.data);
|
||
}
|
||
},
|
||
},
|
||
valueComputed: {
|
||
handler(value) {
|
||
// isDragging triggered in Vue2 because its array is not same with Vue3
|
||
const isDragging = this.dragOvering || this.dragNode
|
||
if (isDragging || this._ignoreValueChangeOnce) {
|
||
this._ignoreValueChangeOnce = false;
|
||
} else {
|
||
const { processor } = this;
|
||
processor.data = value;
|
||
processor.init();
|
||
this.stats = processor.stats!;
|
||
this.statsFlat = processor.statsFlat!;
|
||
}
|
||
},
|
||
},
|
||
},
|
||
created() { },
|
||
mounted() {
|
||
|
||
},
|
||
});
|
||
|
||
export default cpt;
|
||
export type BaseTreeType = InstanceType<typeof cpt>;
|
||
|
||
function processorMethodProxy(name: string) {
|
||
return function (...args) {
|
||
// @ts-ignore
|
||
return this.processor[name](...args);
|
||
};
|
||
}
|
||
function processorMethodProxyWithBatchUpdate(name: string) {
|
||
return function (...args) {
|
||
// @ts-ignore
|
||
return this.batchUpdate(() => {
|
||
// @ts-ignore
|
||
return this.processor[name](...args);
|
||
});
|
||
};
|
||
}
|
||
function reactiveFirstArg(func: any) {
|
||
return function (arg1, ...args) {
|
||
if (arg1) {
|
||
arg1 = reactive(arg1);
|
||
}
|
||
// @ts-ignore
|
||
return func.call(this, arg1, ...args);
|
||
};
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.he-tree--rtl {
|
||
direction: rtl;
|
||
}
|
||
|
||
.he-tree-drag-placeholder {
|
||
background: #ddf2f9;
|
||
border: 1px dashed #00d9ff;
|
||
height: 22px;
|
||
width: 100%;
|
||
}
|
||
</style> |