123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <template>
- <div class="p-tree-node">
- <div
- :class="['p-tree-node-content', !multiple&&treeItem.checked==='checked'&&'p-tree-node-content-checked', treeItem.disabled&&'p-tree-node-content-disabled']"
- :style="{paddingLeft: paddingLeft+'px'}"
- >
- <section class="p-tree-svg" @click="openChild" >
- <ArrowTriangle
- :class="['p-tree-icon-svg', (treeItem.open)&&'p-tree-icon-rotate']"
- v-if="triangleShow"
- />
- </section>
- <div class="p-tree-node-check" @click="handleCheck(treeItem, index)">
- <!-- v-if="multiple&&(!lastStage||!triangleShow)" -->
- <section class="p-tree-node-title">
- <article class="p-tree-node-name" @mouseenter="treeItemEnter" v-html="treeItem.name" />
- </section>
- </div>
- </div>
- <div class="p-tree-child" v-if="triangleShow" v-show="treeItem.open">
- <TreeNode
- :multiple="multiple"
- :linkage="linkage"
- :lastStage="lastStage"
- v-for="(item, ind) in treeItem.children"
- :key="item.id+'-'+ind"
- :treeItem="item"
- :triangleShow="!!(item.children&&item.children.length)"
- :index="`${index}-${ind}`"
- :change="change"
- :leftPosition="leftPosition"
- />
- </div>
- </div>
- </template>
- <script>
- import ArrowTriangle from './arrow_triangle.svg';
- export default {
- name: 'TreeNode',
- components: { ArrowTriangle},
- props: {
- /**
- * 是否开启多选
- */
- multiple: {
- type: Boolean,
- default: false
- },
- /**
- * 是否联动选择
- */
- linkage: {
- type: Boolean,
- default: true
- },
- /**
- * 只能选择末级
- */
- lastStage: {
- type: Boolean,
- default: false
- },
- /**
- * 树形结构子项数据列表
- */
- treeItem: {
- type: Object,
- default: {}
- },
- /**
- * 点击某项
- */
- change: {
- type: Function,
- default: () => false
- },
- /**
- * 下拉三角形是否显示
- */
- triangleShow: {
- type: Boolean,
- default: false
- },
- /**
- * 索引
- */
- index: {
- type: String,
- default: ''
- },
- leftPosition: {
- type: Number,
- default: 12
- }
- },
- computed: {
- // 左边内边距
- paddingLeft() {
- return (this.index.split('-').length-1)*24+Number(this.leftPosition);
- },
- checkboxShow() {
- const item = this.treeItem
- debugger
- // const flag = item.hasOwnProperty('isleaf') ? item.isleaf : true
- return this.multiple && (!this.triangleShow || !this.lastStage) && flag
- }
- },
- methods: {
- // 展开/收起
- openChild() {
- // if (!this.disabledOpen && this.treeItem.disabled ) return
- this.treeItem.open=!this.treeItem.open
- },
- // 鼠标hover
- treeItemEnter(e) {
- const target=e.target;
- const {clientWidth, scrollWidth, title}=target;
- if (!title && scrollWidth > clientWidth) target.title=target.innerText;
- },
- // 选择
- handleCheck(obj, index) {
- if (obj.disabled) return;
- if (this.multiple) {
- if(this.checkboxShow) {
- let status='';
- const treeItem=this.treeItem;
- const {checked, children}=treeItem;
- if (checked === 'checked') {
- status='uncheck';
- } else {
- // if (checked === 'uncheck' || checked === 'notNull')
- status='checked';
- }
- if (this.linkage) {
- // 上下级联动
- if (children && children.length) treeItem.children=this.setCheckedStatus(children, status);
- treeItem.checked=status;
- this.treeItem=treeItem;
- this.change(obj, index);
- } else {
- // 上下级不联动 this.lastStage为true-表示只能选择末级节点
- if (this.lastStage && children && children.length) return;
- this.treeItem=treeItem;
- treeItem.checked=status;
- this.change(obj, index);
- }
- }
- } else {
- // const notLastNode = obj.hasOwnProperty('children') || (obj.hasOwnProperty('isleaf') ? !obj.isleaf : false)
- if(this.lastStage && notLastNode) return
- // 执行父级的函数
- this.change(obj, index);
- }
- },
- // 设置checked状态
- setCheckedStatus(data, status) {
- return data.map(d => {
- d.checked=status;
- if (d.children && d.children.length)
- d.children=this.setCheckedStatus(d.children, status);
- return d;
- })
- }
- }
- }
- </script>
|