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-08-03 11:51:07 +08:00
parent 088ff356f2
commit ec76d588e2
50 changed files with 826 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
uni_modules/uview-plus/components/u-popup/u-popup.vue
View File

@@ -32,7 +32,6 @@
class="u-popup__content"
:style="[contentStyle]"
@click.stop="noop"
@touchmove.stop.prevent="noop"
>
<u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
<!-- 增加触摸区域，用于处理手势 -->

140
uni_modules/xq-tree/components/xq-tree/xq-tree.vue
View File

@@ -545,15 +545,35 @@ defineExpose({ getCheckedKeys, getCheckedNodes, setCheckedKeys, expandAll, colla
// 初始化勾选状态
updateCheckedState()
const scrollStyle = computed(() => {
const style = {
width: '100%',
boxSizing: 'border-box'
}
if (props.height) {
style.height = `${props.height}rpx`
} else {
style.height = '100%'
}
return style
})
</script>
<template>
<scroll-view scroll-x scroll-y enable-flex class="tree-wrapper">
<scroll-view
scroll-x
scroll-y
enable-flex
:style="scrollStyle"
class="tree-wrapper"
>
<view class="xq-tree-scroll">
<view
class="xq-tree" :style="{
minWidth: `${width}rpx`,
minHeight: `${height}rpx`,
class="xq-tree"
:style="{
minWidth: width ? `${width}rpx` : undefined,
minHeight: height ? `${height}rpx` : undefined
}"
>
<!-- 空数据提示 -->
@@ -572,21 +592,11 @@ updateCheckedState()
<view class="xq-tree-node-content" @click="handleNodeClick(node)">
<!-- 展开/折叠图标 -->
<view class="xq-tree-node-icon" @click.stop="toggleExpand(node)">
<!-- #ifndef MP-WEIXIN -->
<text v-if="hasChildren(node)" class="uni-icon-warp">
<slot name="icon" :node="node">
<!-- <uni-icons type="right" size="18" class="icon-arrow" :class="{ 'is-expanded': node._expanded }" /> -->
<text class="icon-arrow" :class="{ 'is-expanded': node._expanded }">
▶
</text>
</slot>
</text>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<text v-if="hasChildren(node)" class="icon-arrow" :class="{ 'is-expanded': node._expanded }">
▶
</text>
<!-- #endif -->
<view
v-if="hasChildren(node)"
class="icon-arrow"
:class="{ 'is-expanded': node._expanded }"
/>
<view v-else class="leaf-icon-placeholder"></view>
</view>
@@ -617,7 +627,6 @@ updateCheckedState()
</slot>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<!-- 微信的插槽真的浪费性能 -->
<slot
v-if="labelSlot" name="node" :node="node" :data="node" :level="node._level"
:expanded="node._expanded" :checked="node[checkedKey]" :indeterminate="node._indeterminate"
@@ -637,60 +646,32 @@ updateCheckedState()
<style scoped lang="scss">
.xq-tree {
display: inline-block;
/* ⚠️ 关键：宽度由内容撑开，不继承父容器宽度 */
/* 内容不换行 */
/* 至少撑满容器 */
box-sizing: border-box;
width: max-content;
/* 宽度由内容决定，不换行 */
white-space: nowrap;
}
.tree-wrapper {
width: 100%;
height: 100%;
// padding: 20rpx;
/* 确保节点不换行 */
box-sizing: border-box;
}
.xq-tree-scroll {
display: inline-block;
/* ⚠️ 关键：宽度由内容撑开，不继承父容器宽度 */
white-space: nowrap;
/* 内容不换行 */
min-width: 100%;
/* 至少撑满容器 */
box-sizing: border-box;
background-color: #fff;
padding: 16rpx;
}
/* 小程序下 scroll-view 的滚动条样式由原生控制，通常无法自定义；H5 端同样可用 ::-webkit-scrollbar */
/* 下面的样式仅对 H5 端生效 */
.tree-wrapper::-webkit-scrollbar {
height: 8rpx;
width: 8rpx;
}
.tree-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
}
.tree-wrapper::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4rpx;
}
// 进入动画（直接使用之前的 keyframes，但通过 TransitionGroup 自动触发）
.tree-node-enter-active {
animation: treeExpandIn 0.3s ease-out both;
// animation-delay 已通过内联 style 设置，不需要在这里写死
}
// 离开动画：使用 transition 让 max-height、padding、opacity 平滑过渡
.tree-node-leave-active {
animation: treeCollapseOut 0.3s ease-in both;
overflow: hidden; // 确保高度变化时内容不会溢出
overflow: hidden;
}
.tree-node-leave-to {
@@ -700,7 +681,6 @@ updateCheckedState()
opacity: 0;
}
// 需要的关键帧 remain unchanged (可以保留)
@keyframes treeExpandIn {
0% {
max-height: 0;
@@ -717,10 +697,9 @@ updateCheckedState()
}
}
// 新增离开关键帧
@keyframes treeCollapseOut {
0% {
max-height: 500px; // 开始时的实际高度，取一个足够大的值
max-height: 500px;
opacity: 1;
padding-top: 8rpx;
padding-bottom: 8rpx;
@@ -734,27 +713,17 @@ updateCheckedState()
}
}
// 节点基本样式微调
.xq-tree-node {
padding: 8rpx 0;
overflow: hidden;
transform-origin: top;
}
.xq-tree {
width: 100%;
}
.xq-tree-empty {
padding: 40rpx;
text-align: center;
color: #999;
}
.xq-tree-node {
padding: 8rpx 0;
}
.xq-tree-node-content {
display: flex;
align-items: center;
@@ -762,18 +731,38 @@ updateCheckedState()
.xq-tree-node-icon {
width: 40rpx;
text-align: center;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-arrow {
width: 0;
height: 0;
border-top: 8rpx solid transparent;
border-bottom: 8rpx solid transparent;
border-left: 10rpx solid #666;
transition: transform 0.2s ease;
transform-origin: 30% 50%;
}
.icon-arrow.is-expanded {
transform: rotate(90deg);
}
.xq-tree-node-checkbox {
margin-right: 12rpx;
flex-shrink: 0;
}
.xq-tree-node-label {
flex: 1;
flex-shrink: 0;
white-space: nowrap;
font-size: 28rpx;
color: #333;
line-height: 1.5;
}
.checkbox-custom {
@@ -799,25 +788,8 @@ updateCheckedState()
}
.leaf-icon-placeholder {
width: 100%;
height: 100%;
}
.uni-icon-warp {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40rpx;
height: 40rpx;
}
.icon-arrow.is-expanded {
transform: rotate(90deg);
}
.icon-arrow {
display: inline-block;
transition: transform 0.3s ease;
width: 16rpx;
height: 16rpx;
}
// #ifdef H5