23 changed files with 1638 additions and 1368 deletions
@ -0,0 +1,127 @@
|
||||
<template> |
||||
<view class="tree_container"> |
||||
<block v-for="item in $props.treeData" :key="item.id"> |
||||
<view class=""> |
||||
<view :class="{'tree_label': true, 'active': item.id === $props.activeId}" @click="nodeClick(item)"> |
||||
<template v-if="item.children && item.children.length > 0"> |
||||
<view class="tree_icon"> |
||||
<view :class="{'icon': true ,'down': isOpen(item.id)}"> |
||||
<u-icon name="arrow-down-fill" color="#adafb6" size="26"></u-icon> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<text>{{item.title}}</text> |
||||
</view> |
||||
|
||||
<!-- #ifdef H5 --> |
||||
<view class="tree_item" :style="{'grid-template-rows': isOpen(item.id) ? '1fr' : '0fr'}"> |
||||
<!-- #endif --> |
||||
|
||||
<!-- #ifdef APP --> |
||||
<view class="tree_item" :style="{'display': isOpen(item.id) ? 'block' : 'none'}"> |
||||
<!-- #endif --> |
||||
|
||||
<!-- #ifdef MP-WEIXIN --> |
||||
<view class="tree_item" :style="{'display': isOpen(item.id) ? 'block' : 'none'}"> |
||||
<!-- #endif --> |
||||
<template v-if="item.children && item.children.length > 0"> |
||||
<MyTree :treeData="item.children" @node-click="$emit('node-click', $event)" |
||||
:activeId="$props.activeId"></MyTree> |
||||
</template> |
||||
</view> |
||||
</view> |
||||
</block> |
||||
</view> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { defineProps, ref } from 'vue'; |
||||
|
||||
const $props = defineProps(["treeData", 'activeId']) |
||||
console.log('$props :>> ', $props); |
||||
const $emit = defineEmits(["node-click"]) |
||||
|
||||
const expandedKeys = ref([]) |
||||
const treeData = $props.treeData |
||||
|
||||
|
||||
const isOpen = (id) => { |
||||
// 判断节点id在不在数组中，在则显示，不在则隐藏 |
||||
return expandedKeys.value.includes(id) |
||||
} |
||||
|
||||
|
||||
const nodeClick = (item) => { |
||||
$emit("node-click", item) |
||||
|
||||
if (item.children && item.children.length) { |
||||
let index = expandedKeys.value.indexOf(item.id) |
||||
if (index > -1) { |
||||
// 如果当前节点id存在数组中，则删除 |
||||
expandedKeys.value.splice(index, 1) |
||||
} else { |
||||
// 如果当前节点id不存在数组中，则添加 |
||||
expandedKeys.value.push(item.id) |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.tree_label { |
||||
padding: 10upx 40upx; |
||||
position: relative; |
||||
|
||||
&.active { |
||||
background-color: var(--subjectColor); |
||||
border-radius: 10upx; |
||||
color: #fff; |
||||
|
||||
|
||||
:deep(.u-icon__icon) { |
||||
color: #fff !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tree_item { |
||||
margin-top: 10upx; |
||||
padding-left: 40upx; |
||||
} |
||||
|
||||
// 头部搜索 |
||||
.tree_item { |
||||
display: grid; |
||||
grid-template-rows: 0fr; |
||||
transition: all 0.3s; |
||||
// overflow: hidden; |
||||
|
||||
&>view { |
||||
min-height: 0; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
// &>div, |
||||
// &>form { |
||||
// } |
||||
} |
||||
|
||||
.tree_icon { |
||||
position: absolute; |
||||
left: 5upx; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
margin-right: 20upx; |
||||
transform-origin: center; |
||||
|
||||
.icon { |
||||
transition: all 0.3s; |
||||
transform: rotate(-90deg); |
||||
} |
||||
|
||||
.down { |
||||
transform: rotate(0deg); |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,96 +1,46 @@
|
||||
<template> |
||||
<view class="h100"> |
||||
<view style="line-height: 40px;display: flex;justify-content: space-between;"> |
||||
<view @click="toAssign">滚动到：Item999</view> |
||||
<view @click="toAssign1">滚动到：Item100</view> |
||||
<view @click="toAssign2">滚动到：Item0</view> |
||||
</view> |
||||
<jp-virtual-list code="id" class="h100" :refresher="true" isBackTop @scrolltoupper="scrolltoupper" |
||||
@refresher="refresher" :data="listx" ref="search"> |
||||
<template v-slot="{ list }"> |
||||
<view v-for="item in list" :key="item.id" :id="item.id" :ref="item.id"> |
||||
<view class="list_item" :style="'height:' + item.height +'rpx'"> |
||||
{{item.id}}随机高度：{{item.height}} |
||||
</view> |
||||
</view> |
||||
</template> |
||||
</jp-virtual-list> |
||||
<view> |
||||
<MyTree :tree-data="treeData" @node-click="nodeClick" :activeId="activeId"></MyTree> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
listx: [], |
||||
key: '' |
||||
} |
||||
}, |
||||
mounted() { |
||||
const data = [] |
||||
for (let i = 0; i < 10000; i++) { |
||||
data.push({ |
||||
name: `Item ${i}`, |
||||
index: i, |
||||
id: `Item${i}`, |
||||
height: (Math.floor(Math.random() * 100) + 100) |
||||
}) |
||||
} |
||||
this.listx = data |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref } from 'vue'; |
||||
|
||||
const treeData = [ |
||||
{ id: 1, name: '一级1' }, |
||||
{ |
||||
id: 2, |
||||
name: '一级2', |
||||
children: [ |
||||
{ id: 3, name: '二级2-1' }, |
||||
{ id: 4, name: '二级2-2' } |
||||
] |
||||
}, |
||||
methods: { |
||||
toAssign() { |
||||
this.$refs.search.toAssign('Item999', this) |
||||
}, |
||||
toAssign1() { |
||||
this.$refs.search.toAssign('Item100', this) |
||||
}, |
||||
toAssign2() { |
||||
this.$refs.search.toAssign('Item0', this) |
||||
}, |
||||
scrolltoupper() { |
||||
const data = [] |
||||
for (let i = 0; i < 30; i++) { |
||||
data.push({ |
||||
name: `Itemc ${i}`, |
||||
index: i, |
||||
id: `Itemc${i}${(Math.floor(Math.random() * 100)+100)}`, |
||||
height: (Math.floor(Math.random() * 100) + 100) |
||||
}) |
||||
} |
||||
setTimeout(() => { |
||||
// 告诉组件我需要添加该数据 |
||||
this.$refs.search.addPage(data) |
||||
}, 1000) |
||||
}, |
||||
refresher() { |
||||
const data = [] |
||||
for (let i = 0; i < 10000; i++) { |
||||
data.push({ |
||||
name: `Item ${i}`, |
||||
index: i, |
||||
id: `Item${i}`, |
||||
height: (Math.floor(Math.random() * 100) + 100) |
||||
}) |
||||
} |
||||
setTimeout(() => { |
||||
this.listx = data |
||||
// 告诉组件刷新成功了 |
||||
this.$refs.search.refreshers() |
||||
}, 2000) |
||||
}, |
||||
{ |
||||
id: 5, |
||||
name: '一级3', |
||||
children: [ |
||||
{ |
||||
id: 6, |
||||
name: '二级3-1', |
||||
children: [ |
||||
{ id: 7, name: '三级3-1-1' }, |
||||
{ id: 8, name: '三级3-1-2' } |
||||
] |
||||
}, |
||||
{ id: 9, name: '二级3-2' }, |
||||
{ id: 10, name: '二级3-3' } |
||||
] |
||||
} |
||||
} |
||||
</script> |
||||
] |
||||
|
||||
<style lang="scss"> |
||||
.h100 { |
||||
height: calc(100vh - 80px); |
||||
} |
||||
const activeId = ref(0) |
||||
|
||||
.list_item { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border: 1px solid #f5f5f5; |
||||
const nodeClick = (val) => { |
||||
console.log(val) |
||||
activeId.value = val.id |
||||
} |
||||
</style> |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
File diff suppressed because it is too large
Load Diff
@ -1 +1 @@
|
||||
<basic-container wx:if="{{m}}" class="r" u-s="{{['head','body']}}" u-r="basicContainer" u-i="592c6178-0" bind:__l="__l" u-p="{{m}}"><view slot="head"><view class="head"><view class="type1"><view>物品：<view style="color:#092C4D">{{a}}</view></view></view><view class="type1"><view>货位：<view style="color:#092C4D">{{b}}</view></view><view>SKU：<view style="color:#092C4D">{{c}}</view></view></view><view class="type1"><view>规格：<view style="color:#092C4D">{{d}}</view></view><view>单位：<view style="color:#092C4D">{{e}}</view></view></view><view class="type1"><view>计划数量：<view style="color:#092C4D">{{f}}</view></view><view>已扫数量：<view style="color:#092C4D">{{g}}</view></view></view></view><view class="butsbx"><view bindtap="{{h}}">采集原包条码</view><view bindtap="{{i}}">扫描打印包条</view><view bindtap="{{j}}">新生成包码</view></view></view><scroll-view scroll-y="true" class="scrollv" slot="body"><view class="mabxs"><view wx:for="{{k}}" wx:for-item="item" class="ite"><view><view>序号：{{item.a}}</view><view>作业时间：{{item.b}}</view></view><view><view>包条码：{{item.c}}</view><view></view></view><view><view>批次号：{{item.d}}</view><view></view></view></view></view></scroll-view></basic-container><tiplist class="r" u-r="tips" u-i="592c6178-1" bind:__l="__l"></tiplist><pop-up class="r" u-s="{{['d']}}" u-r="popUp_AddPrint" u-i="592c6178-2" bind:__l="__l"><view class=""> 计划件数: {{o}} 可用数量: {{p}}</view><input class="popUpInput" type="number" placeholder="新生成包条数量" value="{{q}}" bindinput="{{r}}"/></pop-up><pop-up class="r" u-s="{{['d']}}" u-r="popUp_Edit" u-i="592c6178-3" bind:__l="__l"><view class="popUp_Edit_text"> 检测当前批次和计划批次不同，是否切换批次 </view></pop-up><bluetooth-list class="r" u-r="bluetoothList" u-i="592c6178-4" bind:__l="__l"></bluetooth-list> |
||||
<basic-container wx:if="{{m}}" class="r" u-s="{{['head','body']}}" u-r="basicContainer" u-i="592c6178-0" bind:__l="__l" u-p="{{m}}"><view slot="head"><view class="head"><view class="type1"><view>物品：<view style="color:#092C4D">{{a}}</view></view></view><view class="type1"><view>货位：<view style="color:#092C4D">{{b}}</view></view><view>SKU：<view style="color:#092C4D">{{c}}</view></view></view><view class="type1"><view>规格：<view style="color:#092C4D">{{d}}</view></view><view>单位：<view style="color:#092C4D">{{e}}</view></view></view><view class="type1"><view>计划数量：<view style="color:#092C4D">{{f}}</view></view><view>已扫数量：<view style="color:#092C4D">{{g}}</view></view></view></view><view class="butsbx"><view bindtap="{{h}}">采集原包条码</view><view bindtap="{{i}}">扫描打印包条码</view><view bindtap="{{j}}">新生成包条码</view></view></view><scroll-view scroll-y="true" class="scrollv" slot="body"><view class="mabxs"><view wx:for="{{k}}" wx:for-item="item" class="ite"><view><view>序号：{{item.a}}</view><view>作业时间：{{item.b}}</view></view><view><view>包条码：{{item.c}}</view><view></view></view><view><view>批次号：{{item.d}}</view><view></view></view></view></view></scroll-view></basic-container><tiplist class="r" u-r="tips" u-i="592c6178-1" bind:__l="__l"></tiplist><pop-up class="r" u-s="{{['d']}}" u-r="popUp_AddPrint" u-i="592c6178-2" bind:__l="__l"><view class=""> 计划件数: {{o}} 可用数量: {{p}}</view><input class="popUpInput" type="number" placeholder="新生成包条数量" value="{{q}}" bindinput="{{r}}"/></pop-up><pop-up class="r" u-s="{{['d']}}" u-r="popUp_Edit" u-i="592c6178-3" bind:__l="__l"><view class="popUp_Edit_text"> 检测当前批次和计划批次不同，是否切换批次 </view></pop-up><bluetooth-list class="r" u-r="bluetoothList" u-i="592c6178-4" bind:__l="__l"></bluetooth-list> |
||||
Loading…
Reference in new issue