60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
<section class="AiTreePath">
|
|
<b v-text="`全部`" @click="$emit('click','all')"/>
|
|
<div flex v-for="p in parents" :key="p.id">
|
|
<u-icon name="arrow-right" size="32" color="#ccc"/>
|
|
<div class="mar-l8" v-text="p[options.label]" @click="$emit('click',p)"/>
|
|
</div>
|
|
<u-icon v-if="label" name="arrow-right" size="32" color="#ccc"/>
|
|
<div class="active" v-text="label" @click="$emit('click',node)"/>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "AiTreePath",
|
|
props: {
|
|
prop: {default: () => ({})},
|
|
paths: {default: () => ({})},
|
|
node: {default: null}
|
|
},
|
|
computed: {
|
|
options: v => ({
|
|
id: 'id',
|
|
label: 'name',
|
|
parent: 'parentId',
|
|
...v.prop
|
|
}),
|
|
label: v => v.node?.[v.options.label] || "",
|
|
parent: v => v.paths?.[v.node?.[v.options.parent]],
|
|
parents() {
|
|
const arr = []
|
|
const {id: KEY, parent: PARENT} = this.options
|
|
const find = n => {
|
|
if (!!n?.[KEY]) {
|
|
arr.unshift(n)
|
|
find(this.paths[n?.[PARENT]])
|
|
}
|
|
}
|
|
find(this.parent)
|
|
return arr
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.AiTreePath {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 36px;
|
|
line-height: 40px;
|
|
font-family: PingFang-SC;
|
|
flex-wrap: wrap;
|
|
|
|
.active {
|
|
font-weight: bold;
|
|
color: #26f
|
|
}
|
|
}
|
|
</style>
|