dvcp_v2_wxcp_app/components/AiTreePath.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>