index.vue
4.21 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<template>
<next-tree :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :checkStrictly="checkStrictly"
:selectParent="selectParent" :multiple="multiple" :treeData="treeData" @cancel="close" @confirm="onconfirm">
<!-- label插槽示意代码 -->
<!-- <template #label="{data: {id, label, iconSrc, prev, post}}">
<view class="line-block">
<image class="img" v-if="iconSrc" :src="iconSrc"></image>
<text space="nbsp" v-if="prev">{{prev}} </text><text>{{label}}</text><text space="nbsp" v-if="post"> {{post}}</text>
</view>
</template> -->
<!-- <template #topBar>
<view style="color: #666;padding:5px;"><text style="font-size: 12px;">历史记录</text></view>
<view style="display: flex;justify-content: space-between;padding-bottom: 10px;border-bottom: 1rpx solid #f0f0f0;">
<button @click="checkedFunc('1-3-3-4')" :style="'background-color:'+ (activeId === '1-3-3-4' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">北京区-4</button>
<button @click="checkedFunc('3-1-2')" :style="'background-color:'+ (activeId === '3-1-2' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-2</button>
<button @click="checkedFunc('3-1-6')" :style="'background-color:'+ (activeId === '3-1-6' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-5</button>
</view>
</template> -->
</next-tree>
</template>
<script setup>
import { nextTick, ref, unref } from 'vue';
// @ts-ignore
import nextTree from '../next-tree/next-tree.vue';
const props = defineProps({
dataList: {
type: Array,
default: []
},
valueKey: {
type: String,
default: 'id'
},
multiple: {
type: Boolean,
default: true
},
selectParent: {
type: Boolean,
default: false
},
checkStrictly: {
type: Boolean,
default: false
},
onconfirm: {
type: Function,
default: () => { }
}
})
const treeData = ref([])
const nextTreeRef = ref()
function getTitle(checked) {
return `已选：${checked.length}位驾驶员`
}
function changeVerify(current, chooseList) {
// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
// 如果函数体不做return返回值，即验证通过，控件正常处理业务
// 限制条件
if (chooseList) {
for (let index = 0; index < chooseList.length; index++) {
const element = chooseList[index];
if (current.id.indexOf(element.id) === -1 && element.label.indexOf(current.label) != -1) {
return "该驾驶员已经被选中了"
}
}
}
}
function open(dataList) {
treeData.value = handlerTreeData(dataList)
treeData.value = treeData.value.filter(item => {
return item.children[0].id
})
setTimeout(() => {
nextTick(() => {
unref(nextTreeRef).showTree = true
})
}, 0)
}
function handlerTreeData(dataList) {
return dataList
.map((item, index) => {
return {
"id": (index + 1),
"licensePlateNumber": item.licensePlateNumber,
"containerVolume": item.containerVolume + "方车",
"label": item.containerVolume + "方车" + '-' + item.licensePlateNumber,
"children": item.personnelInfo.map((childrenItem, childrenIndex) => {
return {
"id": (index + 1) + '-' + (childrenIndex + 1),
"garOrderContainerVolume": item.containerVolume,
"tel": childrenItem.tel,
"name": childrenItem.name,
"label": childrenItem.name + '-' + childrenItem.tel,
"checked": childrenItem.checked,
"carCode": item.licensePlateNumber,
"disabled": childrenItem.checked ? true : childrenItem.tel ? false : true
}
})
}
})
}
function cleanTreeData(treeData) {
treeData.map(item => {
item.checked = false
if (item.children && item.children.length) {
cleanTreeData(item.children)
}
})
}
function close() {
// 清除treeData的选中状态
cleanTreeData(unref(treeData))
}
defineExpose({
open, close, nextTreeRef
})
</script>
<style lang="scss">
.line-block {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.img {
width: 40rpx;
height: 40rpx;
border-radius: 10rpx;
margin: 0 20rpx;
}
}
</style>