122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<template>
|
|
<div class="fl-tree width-100 fl-mt-md">
|
|
<n-tree v-if="state.treeLoading"
|
|
block-line
|
|
:default-expanded-keys="state.expandedKeys"
|
|
:default-selected-keys="state.clickKey"
|
|
label-field="name"
|
|
key-field="key"
|
|
:expand-on-click="true"
|
|
:render-label="renderLabel"
|
|
:data="state.treeData"
|
|
@update:selected-keys="handleSelectTree" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onBeforeMount,
|
|
onMounted,
|
|
getCurrentInstance,
|
|
computed,
|
|
defineEmits,
|
|
watch,
|
|
nextTick,
|
|
h
|
|
} from "vue";
|
|
|
|
import { PlusCircleOutlined, MinusCircleOutlined, EditOutlined, PlusOutlined, MinusOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
|
|
|
|
import treeLabel from "./treelabel.vue";
|
|
import { NTree } from 'naive-ui';
|
|
|
|
const currentInstance = getCurrentInstance();
|
|
const { $request } = currentInstance.appContext.config.globalProperties;
|
|
let props = defineProps({
|
|
data: Object,
|
|
refreshCount: Number,
|
|
config: Object,
|
|
expandedKeys: Array,
|
|
clickKey: [String, Number]
|
|
})
|
|
const state = reactive({
|
|
expandedKeys: [],
|
|
editTitle: '',
|
|
treeData: [],
|
|
clickKey: [],
|
|
treeLoading: true
|
|
});
|
|
|
|
watch(() => props.refreshCount, () => {
|
|
state.clickKey = [props.clickKey]
|
|
state.treeLoading = false
|
|
nextTick(() => {
|
|
state.treeData = props.data
|
|
calcDefaultConfig(state.treeData, 1)
|
|
state.treeLoading = true
|
|
})
|
|
});
|
|
|
|
watch(() => props.expandedKeys, () => {
|
|
state.clickKey = [props.clickKey]
|
|
state.expandedKeys = props.expandedKeys
|
|
}, { deep: true });
|
|
|
|
onBeforeMount(() => {
|
|
state.clickKey = [props.clickKey]
|
|
state.treeData = props.data
|
|
calcDefaultConfig(state.treeData, 1);
|
|
state.expandedKeys = state.treeData.map(item => item.key)
|
|
});
|
|
|
|
onMounted(() => {
|
|
});
|
|
|
|
const emit = defineEmits(["triggerTreeAction", "triggerTreeClick", "triggerTreeDefaultClick"]);
|
|
const handleSelectTree = (keys, option, meta) => {
|
|
if (keys.length === 1) {
|
|
emit('triggerTreeClick', { selectedKey: keys[0], tree: option[0] })
|
|
} else {
|
|
emit('triggerTreeDefaultClick')
|
|
}
|
|
}
|
|
const renderLabel = (option, checked) => {
|
|
return h(
|
|
treeLabel,
|
|
{
|
|
dataRef: option,
|
|
checked: checked,
|
|
config: props.config,
|
|
clickKey: props.clickKey,
|
|
onTriggerTreeAction: handleTreeAction
|
|
},
|
|
{}
|
|
)
|
|
}
|
|
|
|
const calcDefaultConfig = (data, level) => {
|
|
for (let item of data) {
|
|
if (!item.key) {
|
|
item.key = item.title + '_' + level;
|
|
}
|
|
item.edit = false
|
|
if (item.children) {
|
|
calcDefaultConfig(item.children, level + 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
const override = ({ option }) => {
|
|
if (option.children) {
|
|
return "toggleExpand";
|
|
}
|
|
return "default";
|
|
};
|
|
const handleTreeAction = ({ type, val }) => {
|
|
emit('triggerTreeAction', { type, val })
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style>
|