You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
6.5 KiB
287 lines
6.5 KiB
<template>
|
|
<view class="long-indexedList">
|
|
<view class="left">
|
|
<scroll-view
|
|
scroll-y
|
|
scroll-with-animation
|
|
@scroll="scroll"
|
|
:scroll-into-view="cIndex"
|
|
>
|
|
<view class="list_item" v-for="(item, index) in list" :key="index">
|
|
<block v-if="item.list.length > 0">
|
|
<view class="item-label" :id="`cid${ index }`">{{ item.char }}</view>
|
|
<view class="list-container">
|
|
<view
|
|
v-for="(child, cIndex) in item.list"
|
|
:key="cIndex"
|
|
class="list-item"
|
|
@click="itemClick(child)"
|
|
>
|
|
<view v-if="isType == true" class="l_item_name">
|
|
{{child.vehicleCode}}
|
|
</view >
|
|
<view v-if="isType == false" class="l_item_name">
|
|
{{child.employeeName||child.constructionName}}
|
|
</view>
|
|
<view class="l_item_icon">
|
|
<uni-icons
|
|
v-show="selectedMap[child.userId] != undefined"
|
|
size="24"
|
|
type="checkmarkempty"
|
|
color="#007CFF"
|
|
></uni-icons>
|
|
</view>
|
|
<view class="l_item_phone">
|
|
<block v-if="isType == true">
|
|
<view class="l_item_phone_1">{{child.vehiclePersonName}}</view>
|
|
<view class="l_item_phone_2">
|
|
<block
|
|
v-for="(va,ind) in child.vehiclePerson"
|
|
:key="ind"
|
|
>
|
|
<block v-if="va.isDriver">{{va.userPhone}}</block>
|
|
</block>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="l_item_phone_1">
|
|
<block v-if="child.contactName">
|
|
{{child.contactName}}
|
|
</block>
|
|
</view>
|
|
<view class="l_item_phone_2">
|
|
{{child.employeePhone||child.contactPhone}}
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="right">
|
|
<view
|
|
class="index-words"
|
|
:class="{ 'index-words-active': index === activeIndex }"
|
|
v-for="(item, index) in list"
|
|
:key="item.char"
|
|
@click="indexedClick(index)"
|
|
>
|
|
<view v-if="item.list.length > 0||item.vehicleGpsList.length > 0">
|
|
{{ item.char }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
selectList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
multi: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isType: { //true自有车 false外请车
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
cIndex: '',
|
|
topList: [],
|
|
selectedMap: {},
|
|
flag: false,
|
|
};
|
|
},
|
|
methods: {
|
|
indexedClick(index) {
|
|
this.$nextTick(() => {
|
|
this.cIndex = `cid${ index }`
|
|
this.flag = true
|
|
})
|
|
this.cIndex = ''
|
|
this.activeIndex = index
|
|
},
|
|
itemClick(item) {
|
|
if (!this.multi) {
|
|
Object.keys(this.selectedMap).forEach(key => {
|
|
this.$delete(this.selectedMap, key)
|
|
})
|
|
};
|
|
if (this.selectedMap[item.userId] != undefined) {
|
|
this.$delete(this.selectedMap, item.userId)
|
|
} else {
|
|
this.$set(this.selectedMap, item.userId, item)
|
|
};
|
|
this.$emit('change', this.getValues())
|
|
},
|
|
selectCar(id) {
|
|
this.$emit('selectCar', id)
|
|
},
|
|
clearSelectList() {
|
|
this.selectedMap = {};
|
|
},
|
|
scroll(e) {
|
|
if (this.flag) {
|
|
this.flag = false
|
|
return
|
|
}
|
|
let scrollTop = e.target.scrollTop
|
|
for (let i = 0; i < this.topList.length; i++) {
|
|
let h1 = this.topList[i]
|
|
let h2 = this.topList[i + 1]
|
|
if (scrollTop > h1 && scrollTop < h2) {
|
|
this.activeIndex = i
|
|
}
|
|
}
|
|
},
|
|
getNodesInfo() {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.selectAll('.item-label').boundingClientRect().exec(res => {
|
|
let nodes = res[0]
|
|
this.topList = nodes.map(item => item.top)
|
|
})
|
|
},
|
|
getValues() {
|
|
return Object.values(JSON.parse(JSON.stringify(this.selectedMap)))
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getNodesInfo()
|
|
if (this.selectList) {
|
|
setTimeout(() => {
|
|
this.selectList.forEach(item => {
|
|
this.$set(this.selectedMap, item.userId, item)
|
|
console.log('this.selectedMap', this.selectedMap)
|
|
})
|
|
}, 100)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
/deep/::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.long-indexedList {
|
|
height: 100%;
|
|
width: 750rpx;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
color: #333333;
|
|
scroll-view {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.left {
|
|
width: 700rpx;
|
|
height: 100%;
|
|
.list_item {
|
|
width: 100%;
|
|
background-color: #efefef;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.item-label {
|
|
width: 100%;
|
|
margin-left: 32rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-weight: bold;
|
|
}
|
|
.list-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.list-item {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: white;
|
|
margin-bottom: 4rpx;
|
|
border-radius: 3rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.l_item_name {
|
|
width:250rpx;
|
|
// border: 1rpx solid red;
|
|
margin-left: 20rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
font-size: 28rpx;
|
|
}
|
|
.l_item_icon{
|
|
// border: 1rpx solid red;
|
|
width: 65rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.l_item_phone {
|
|
width: 345rpx;
|
|
padding-right:20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
font-size: 24rpx;
|
|
color: #6abae7;
|
|
.l_item_phone_1{
|
|
width:180rpx;
|
|
// border: 1rpx solid red;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
color: #000000;
|
|
}
|
|
.l_item_phone_2{
|
|
width: 165rpx;
|
|
// border: 1rpx solid red;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
font-size: 24rpx;
|
|
color: #6abae7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
width: 50rpx;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.index-words {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 25rpx;
|
|
font-weight: bold;
|
|
color: #6c6c6c;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|