nsgk_mobile/src/components/form/SubjectTreeChooserNodeItem.vue

<!-- 会计科目选择节点组件 zhao -->
<template>
  <van-collapse v-model="active">
    <template v-for="(subject, index) in subjects">
      <van-collapse-item :ref="'collapse' + index" :lazy-render="false" :title="subject.subjectId + ' ' + subject.subjectName" :name="subject.subjectId" :is-link="subject.is_last !== 'Y'" :class="subject.is_last === 'Y' ? 'subject-tree-node-leaf' : 'subject-tree-node-non-leaf'" v-if="subject.visible">
        <template #title>
          <div @click="($event) => onItemClicked($event, subject)">{{ subject.subjectId }} {{ subject.subjectName }}</div>
        </template>
        <SubjectTreeChooserNodeItem :ref="'childCollapse' + index" :subjects="subject.children" v-if="subject.children && Array.isArray(subject.children) && subject.children.length > 0" @clicked="onChildItemClicked" :can-select-non-leaf="canSelectNonLeaf">
        </SubjectTreeChooserNodeItem>
      </van-collapse-item>
    </template>
  </van-collapse>
</template>

<script>

export default {
  name: "SubjectTreeChooserNodeItem",
  props: [
    'subjects', 'canSelectNonLeaf',
  ],
  watch: {
  },
  created() {
  },
  data() {
    return {
      active: [],
    };
  },
  methods: {
    onItemClicked($event, subject) {
      if(this.canSelectNonLeaf || subject.is_last === 'Y')
      {
        this.$emit('clicked', subject);
        //$event.preventDefault();
        $event.stopPropagation();
      }
    },
    onChildItemClicked(subject) {
        this.$emit('clicked', subject);
    },
    folderAll() { // TODO: not work
      for(let i in this.subjects)
      {
        if(this.$refs['childCollapse' + i])
          this.$refs['childCollapse' + i][0].folderAll();
        if(this.$refs['collapse' + i])
          this.$refs['collapse' + i][0].toggle(false);
      }
    },
  },
}
</script>

<style>
.subject-tree-node-non-leaf .van-collapse-item__content {
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.subject-tree-node-leaf .van-collapse-item__content {
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
</style>