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>

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

@@ -1,19 +1,27 @@
<template>
<view class="u-tree">
<tree-node
<TreeNode
v-for="node in treeData"
:key="node[props.nodeKey]"
:key="node[nodeKeyName]"
:node="node"
:props="props"
:show-checkbox="showCheckbox"
:check-strictly="checkStrictly"
:expand-on-click-node="expandOnClickNode"
:highlight-current="highlightCurrent"
:current-node-key="innerCurrentNodeKey"
:indent="indent"
:icon-size="iconSize"
:checkbox-size="checkboxSize"
:expand-icon="expandIcon"
:collapse-icon="collapseIcon"
@node-click="handleNodeClick"
@check-change="$emit('check-change', $event)">
<template #default="{ nodeData, level }">
<slot :node="nodeData" :level="level"></slot>
@check-change="handleCheckChange"
>
<template #default="slotProps">
<slot v-bind="slotProps"></slot>
</template>
</tree-node>
</TreeNode>
</view>
</template>
@@ -26,16 +34,21 @@ export default {
props: {
data: {
type: Array,
required: true
default: () => []
},
props: {
type: Object,
default: () => ({
label: 'label',
children: 'children',
nodeKey: 'id'
nodeKey: 'id',
disabled: 'disabled'
})
},
nodeKey: {
type: String,
default: ''
},
showCheckbox: {
type: Boolean,
default: false
@@ -44,67 +57,167 @@ export default {
type: Boolean,
default: false
},
defaultExpandedKeys: {
type: Array,
default: () => []
},
defaultCheckedKeys: {
type: Array,
default: () => []
},
expandOnClickNode: {
type: Boolean,
default: true
},
checkOnClickNode: {
type: Boolean,
default: false
},
checkStrictly: {
type: Boolean,
default: false
},
accordion: {
type: Boolean,
default: false
},
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'
}
},
data() {
return {
treeData: []
treeData: [],
innerCurrentNodeKey: ''
};
},
created() {
this.initTree();
computed: {
nodeKeyName() {
return this.nodeKey || this.props.nodeKey || 'id';
}
},
watch: {
data: {
handler(newVal) {
this.treeData = JSON.parse(JSON.stringify(newVal));
this.initExpandedState(this.treeData, this.defaultExpandAll);
this.initTree(newVal);
},
deep: true,
immediate: true
},
currentNodeKey: {
handler(val) {
this.innerCurrentNodeKey = val;
},
immediate: true
}
},
emits: ['node-click', 'check-change'],
emits: ['node-click', 'check-change', 'check', 'node-expand', 'node-collapse', 'current-change'],
methods: {
initTree() {
this.treeData = JSON.parse(JSON.stringify(this.data));
this.initExpandedState(this.treeData, this.defaultExpandAll);
initTree(data = this.data) {
this.treeData = JSON.parse(JSON.stringify(data || []));
this.applyDefaultState(this.treeData);
},
initExpandedState(nodes, expanded) {
nodes.forEach(node => {
node.expanded = expanded;
if (node[this.props.children]) {
this.initExpandedState(node[this.props.children], expanded);
applyDefaultState(nodes, parent = null) {
nodes.forEach((node) => {
const key = node[this.nodeKeyName];
if (this.defaultExpandAll) {
node.expanded = true;
} else if (this.defaultExpandedKeys.length) {
node.expanded = this.defaultExpandedKeys.map(String).includes(String(key));
} else {
node.expanded = false;
}
if (this.defaultCheckedKeys.length) {
node.checked = this.defaultCheckedKeys.map(String).includes(String(key));
}
const children = node[this.props.children];
if (children && children.length) {
this.applyDefaultState(children, node);
}
});
},
handleNodeClick(node) {
if (this.highlightCurrent) {
const oldKey = this.innerCurrentNodeKey;
this.innerCurrentNodeKey = node[this.nodeKeyName];
this.$emit('current-change', node, oldKey);
}
if (this.checkOnClickNode && this.showCheckbox) {
node.checked = !node.checked;
this.handleCheckChange(node, node.checked);
}
this.$emit('node-click', node);
},
/**
* 直接递归 treeData 获取所有 checked 的节点
*/
getCheckedNodes() {
const traverse = (nodes) => {
let result = [];
nodes.forEach(node => {
if (node.checked) {
result.push(node);
}
if (node[this.props.children] && node[this.props.children].length > 0) {
result = result.concat(traverse(node[this.props.children]));
}
});
return result;
};
return traverse(this.treeData);
handleCheckChange(node, checked) {
this.$emit('check-change', node, checked);
this.$emit('check', node, {
checkedNodes: this.getCheckedNodes(),
checkedKeys: this.getCheckedKeys(),
halfCheckedNodes: [],
halfCheckedKeys: []
});
},
traverse(nodes, callback) {
nodes.forEach((node) => {
callback(node);
const children = node[this.props.children];
if (children && children.length) {
this.traverse(children, callback);
}
});
},
getCheckedNodes(leafOnly = false) {
const result = [];
this.traverse(this.treeData, (node) => {
if (!node.checked) return;
const children = node[this.props.children] || [];
if (leafOnly && children.length) return;
result.push(node);
});
return result;
},
getCheckedKeys(leafOnly = false) {
return this.getCheckedNodes(leafOnly).map((node) => node[this.nodeKeyName]);
},
setCurrentKey(key) {
this.innerCurrentNodeKey = key;
},
getCurrentKey() {
return this.innerCurrentNodeKey;
},
getCurrentNode() {
let current = null;
this.traverse(this.treeData, (node) => {
if (String(node[this.nodeKeyName]) === String(this.innerCurrentNodeKey)) {
current = node;
}
});
return current;
}
}
};
@@ -114,4 +227,4 @@ export default {
.u-tree {
font-size: 28rpx;
}
</style>
</style>