pizhengyu/threeonecheck_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一单四制优化及加入工作流

Browse Source
This commit is contained in:
王利强
2026-07-27 09:27:22 +08:00
parent 455fd4fc07
commit 7c3285ed5a
725 changed files with 19668 additions and 2921 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
uni_modules/uview-plus/components/u-tree/tree-node.vue
View File

@@ -1,27 +1,35 @@
<template>
<view class="u-tree-node" :style="{ paddingLeft: depth * 20 + 'px' }">
<view class="u-tree-node-content" @click="toggle">
<!-- <text v-if="hasChildren" class="u-tree-node-toggle">
{{ node.expanded ? '▼' : '▶' }}
</text> -->
<up-icon v-if="hasChildren" class="u-tree-node-toggle"
:name="node.expanded ? 'arrow-down-fill' : 'play-right-fill'" size="12" />
<view class="u-tree-node">
<view class="u-tree-node-content" :style="{ paddingLeft: depth * indent + 'rpx' }" @click="toggle">
<up-icon
v-if="hasChildren"
class="u-tree-node-toggle"
:name="isExpanded ? collapseIcon : expandIcon"
:size="iconSize"
/>
<view v-else class="u-tree-node-toggle u-tree-node-toggle--placeholder"></view>
<up-checkbox
v-if="showCheckbox"
usedAlone
:size="12"
:size="checkboxSize"
:checked="node.checked"
@change="toggleCheck"
style="margin-right: 10px;"
/>
<slot :nodeData="node" :level="depth + 1">
{{ node[props.label] }}
<!-- #ifdef MP-WEIXIN -->
<text class="u-tree-node-label" :class="labelClass">{{ node[props.label] }}</text>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<slot :node="node" :data="node" :level="depth + 1" :expanded="isExpanded" :checked="!!node.checked" :disabled="isDisabled">
<text class="u-tree-node-label" :class="labelClass">{{ node[props.label] }}</text>
</slot>
<!-- #endif -->
</view>
<view v-if="hasChildren && (node.expanded === undefined ? true : node.expanded)"
<view
v-if="hasChildren && isExpanded"
class="u-tree-node-children"
:style="{ paddingLeft: (depth + 1) * 20 + 'px' }">
<tree-node
>
<TreeNode
v-for="child in node[props.children]"
:key="child[props.nodeKey]"
:node="child"
@@ -29,20 +37,31 @@
:show-checkbox="showCheckbox"
:check-strictly="checkStrictly"
:expand-on-click-node="expandOnClickNode"
:highlight-current="highlightCurrent"
:current-node-key="currentNodeKey"
:indent="indent"
:icon-size="iconSize"
:checkbox-size="checkboxSize"
:expand-icon="expandIcon"
:collapse-icon="collapseIcon"
:depth="depth + 1"
@node-click="$emit('node-click', $event)"
@check-change="$emit('check-change', $event)">
<template #default="{ nodeData, level }">
<slot name="default" :nodeData="nodeData" :level="level"></slot>
@check-change="$emit('check-change', $event)"
>
<template #default="slotProps">
<slot name="default" v-bind="slotProps"></slot>
</template>
</tree-node>
</TreeNode>
</view>
</view>
</template>
<script>
import TreeNode from './tree-node.vue';
export default {
name: 'tree-node',
components: { TreeNode },
props: {
node: {
type: Object,
@@ -64,9 +83,37 @@ export default {
type: Boolean,
default: true
},
highlightCurrent: {
type: Boolean,
default: false
},
currentNodeKey: {
type: [String, Number],
default: ''
},
indent: {
type: [String, Number],
default: 32
},
iconSize: {
type: [String, Number],
default: 14
},
checkboxSize: {
type: [String, Number],
default: 16
},
expandIcon: {
type: String,
default: 'play-right-fill'
},
collapseIcon: {
type: String,
default: 'arrow-down-fill'
},
depth: {
type: Number,
default: 0
type: Number,
default: 0
}
},
computed: {
@@ -74,12 +121,29 @@ export default {
return this.node[this.props.children] && this.node[this.props.children].length > 0;
},
isExpanded() {
return this.node.expanded === undefined ? false : this.node.expanded;
return this.node.expanded === undefined ? false : this.node.expanded;
},
isDisabled() {
const disabledKey = this.props.disabled || 'disabled';
return !!this.node[disabledKey];
},
isCurrent() {
if (!this.highlightCurrent || this.currentNodeKey === '' || this.currentNodeKey === null || this.currentNodeKey === undefined) {
return false;
}
return String(this.node[this.props.nodeKey]) === String(this.currentNodeKey);
},
labelClass() {
return {
'u-tree-node-label--current': this.isCurrent,
'u-tree-node-label--disabled': this.isDisabled
};
}
},
emits: ['node-click', 'check-change'],
methods: {
toggle() {
if (this.isDisabled) return;
if (this.expandOnClickNode && this.hasChildren) {
this.node.expanded = !this.node.expanded;
}
@@ -91,11 +155,11 @@ export default {
this.updateChildCheckStatus(this.node, checked);
this.updateParentCheckStatus(this.node);
}
this.$emit('check-change', this.node);
this.$emit('check-change', this.node, checked);
},
updateChildCheckStatus(node, checked) {
if (node[this.props.children]) {
node[this.props.children].forEach(child => {
node[this.props.children].forEach((child) => {
child.checked = checked;
this.updateChildCheckStatus(child, checked);
});
@@ -104,9 +168,7 @@ export default {
updateParentCheckStatus(node) {
let parent = this.$parent;
while (parent && parent.node) {
const allChecked = parent.node[this.props.children].every(
child => child.checked
);
const allChecked = parent.node[this.props.children].every((child) => child.checked);
parent.node.checked = allChecked;
parent = parent.$parent;
}
@@ -120,9 +182,31 @@ export default {
display: flex;
flex-direction: row;
align-items: center;
padding-left: 20px;
min-height: 72rpx;
padding-right: 20rpx;
}
.u-tree-node-toggle {
margin-right: 5px;
margin-right: 8rpx;
flex-shrink: 0;
}
</style>
.u-tree-node-toggle--placeholder {
width: 14px;
}
.u-tree-node-label {
flex: 1;
font-size: 28rpx;
color: #333;
}
.u-tree-node-label--current {
color: #2667E9;
font-weight: 600;
}
.u-tree-node-label--disabled {
color: #c0c4cc;
}
</style>