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.
440 lines
11 KiB
440 lines
11 KiB
<template>
|
|
<view class="long-indexedList">
|
|
<view class="left">
|
|
<scroll-view
|
|
scroll-y
|
|
scroll-with-animation
|
|
scroll-y="true"
|
|
:refresher-triggered="triggered"
|
|
@refresherrefresh="onRefresh"
|
|
refresher-enabled="true"
|
|
@scroll="scroll"
|
|
:scroll-into-view="cIndex"
|
|
@scrolltolower="onScrolltolower"
|
|
>
|
|
<!-- 人员管理 -->
|
|
<view v-if="type=='user'">
|
|
<view class="list_item" v-for="(item, index) in list" :key="index">
|
|
<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0">{{ item.char }}</view>
|
|
<view class="list-container">
|
|
<view
|
|
v-for="(child, cIndex) in item.list"
|
|
:key="cIndex"
|
|
class="list-item"
|
|
@click="itemClick(child)"
|
|
>
|
|
<view class="l_item_name2">
|
|
<view class="l_item_name2_1">
|
|
<block v-if="userPx">
|
|
[{{child.roleName}}]
|
|
</block>
|
|
<block v-if="!userPx">
|
|
{{child.employeeName}}
|
|
</block>
|
|
</view>
|
|
<view class="l_item_name2_icon">
|
|
<uni-icons
|
|
v-show="selectedMap[child.id] != undefined"
|
|
size="24"
|
|
type="checkmarkempty"
|
|
color="#007CFF"
|
|
></uni-icons>
|
|
</view>
|
|
<view class="l_item_name2_2">
|
|
<block v-if="!userPx">
|
|
[{{child.roleName}}]
|
|
</block>
|
|
<block v-if="userPx">
|
|
{{child.employeeName}}
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="l_item_phone">
|
|
{{child.employeePhone}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 车辆管理 -->
|
|
<view v-if="type=='car'">
|
|
<view class="list_item" v-for="(item, index) in list" :key="index">
|
|
<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0">{{ item.char }}</view>
|
|
<view class="list-container">
|
|
<view
|
|
v-for="(child, cIndex) in item.list"
|
|
:key="cIndex"
|
|
class="list-item"
|
|
@click="itemClick(child)"
|
|
>
|
|
<view class="l_item_name2">
|
|
<view class="l_item_name2_1">
|
|
{{child.vehicleCode}}
|
|
</view>
|
|
<view class="l_item_name2_icon">
|
|
<uni-icons
|
|
v-show="selectedMap[child.id] != undefined"
|
|
size="24"
|
|
type="checkmarkempty"
|
|
color="#007CFF"
|
|
></uni-icons>
|
|
</view>
|
|
<view class="l_item_name2_2" v-if="child.vehiclePersonName!=null">
|
|
{{child.vehiclePersonName}}
|
|
</view>
|
|
</view>
|
|
<view class="l_item_phone" v-if="child.vehiclePersonPhone!=null">
|
|
{{child.vehiclePersonPhone}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 工程管理 -->
|
|
<view v-if="type=='project'">
|
|
<view class="list_item" v-for="(item, index) in list" :key="index">
|
|
<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0" >{{ item.char }}</view>
|
|
<view class="list-container">
|
|
<view
|
|
v-for="(child, cIndex) in item.list"
|
|
:key="cIndex"
|
|
class="list-item"
|
|
@click="itemClick(child)"
|
|
>
|
|
<view class="l_item_name2">
|
|
<view class="l_item_name2_1">
|
|
{{child.projectName}}
|
|
</view>
|
|
<view class="l_item_name2_icon">
|
|
<uni-icons
|
|
v-show="selectedMap[child.id] != undefined"
|
|
size="24"
|
|
type="checkmarkempty"
|
|
color="#007CFF"
|
|
></uni-icons>
|
|
</view>
|
|
<view class="l_item_name2_2" v-if="child.projectPeoples.length>0">
|
|
{{child.projectPeoples[0].projectPersonName}}
|
|
</view>
|
|
</view>
|
|
<view class="l_item_phone" v-if="child.projectPeoples.length>0">
|
|
{{child.projectPeoples[0].projectPersonPhone}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 施工单位 -->
|
|
<view v-if="type=='companyInfo'">
|
|
<view class="list_item" v-for="(item, index) in list" :key="index">
|
|
<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0" >{{ item.char }}</view>
|
|
<view class="list-container">
|
|
<view
|
|
v-for="(child, cIndex) in item.list"
|
|
:key="cIndex"
|
|
class="list-item"
|
|
@click="itemClick(child)"
|
|
>
|
|
<view class="l_item_name2">
|
|
<view class="l_item_name2_1">
|
|
{{child.constructionName}}
|
|
</view>
|
|
<view class="l_item_name2_icon">
|
|
<uni-icons
|
|
v-show="selectedMap[child.id] != undefined"
|
|
size="24"
|
|
type="checkmarkempty"
|
|
color="#007CFF"
|
|
></uni-icons>
|
|
</view>
|
|
<view class="l_item_name2_2">
|
|
{{child.contactName}}
|
|
</view>
|
|
</view>
|
|
<view class="l_item_phone">
|
|
{{child.contactPhone}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 任务车型 -->
|
|
<view v-if="type=='taskCar'">
|
|
<view class="list_item" v-for="(item, index) in list" :key="index">
|
|
<view class="item-label" :id="`cid${ index }`" v-if="item.list.length>0" >{{ item.char }}</view>
|
|
<view class="list-container">
|
|
<view
|
|
v-for="(child, cIndex) in item.list"
|
|
:key="cIndex"
|
|
class="list-item"
|
|
@click="itemClick(child)"
|
|
>
|
|
<view class="l_item_name2">
|
|
<view class="l_item_name2_1">
|
|
{{child.name}}
|
|
</view>
|
|
<view class="l_item_name2_icon">
|
|
<uni-icons
|
|
v-show="selectedMap[child.id] != undefined"
|
|
size="24"
|
|
type="checkmarkempty"
|
|
color="#007CFF"
|
|
></uni-icons>
|
|
</view>
|
|
<view class="l_item_name2_2">
|
|
<!-- {{child.contactName}} -->
|
|
</view>
|
|
</view>
|
|
<view class="l_item_phone">
|
|
<!-- {{child.contactPhone}} -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottomTitle" v-if="is_no">
|
|
<text>没有更多数据了 ~</text>
|
|
</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)"
|
|
>
|
|
<block v-if="item.list.length>0">
|
|
{{ item.char }}
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
multi: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
is_no: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
triggered: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
userPx:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
cIndex: '',
|
|
topList: [],
|
|
flag: false,
|
|
selectedMap: {},
|
|
is_nos:false
|
|
};
|
|
},
|
|
methods: {
|
|
// 下拉刷新
|
|
onRefresh() {
|
|
this.$emit('onRefresh')
|
|
},
|
|
// 上拉加载
|
|
onScrolltolower() {
|
|
console.log('加载')
|
|
this.is_nos=true
|
|
// this.$emit('Scrolltolower')
|
|
},
|
|
indexedClick(index) {
|
|
this.$nextTick(() => {
|
|
this.cIndex = `cid${ index }`
|
|
this.flag = true
|
|
})
|
|
this.cIndex = ''
|
|
this.activeIndex = index
|
|
},
|
|
itemClick(item) {
|
|
this.$emit("onclick", item)
|
|
},
|
|
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()
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
/deep/::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.long-indexedList {
|
|
height: 90vh;
|
|
width: 750rpx;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
color: #333333;
|
|
scroll-view {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.bottomTitle {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.left {
|
|
width: 700rpx;
|
|
height: 100%;
|
|
.list_item {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #efefef;
|
|
.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_name2 {
|
|
// border: 1rpx solid red;
|
|
width: 495rpx;
|
|
padding-left: 20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
flex: 1;
|
|
.l_item_name2_1{
|
|
// border: 1rpx solid red;
|
|
width:250rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.l_item_name2_icon{
|
|
// border: 1rpx solid red;
|
|
width: 65rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.l_item_name2_2{
|
|
// border: 1rpx solid red;
|
|
width: 180rpx;
|
|
color: #8ca1b0;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex:1;
|
|
}
|
|
}
|
|
.l_item_phone{
|
|
// border: 1rpx solid red;
|
|
width: 165rpx;
|
|
padding-right:20rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
font-size: 24rpx;
|
|
color: #6abae7;
|
|
}
|
|
}
|
|
.active {
|
|
background: #FFF7EE;
|
|
border: 2upx solid #FFE4C6;
|
|
color: #F8571A;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
|
|
// .index-words-active{
|
|
// background-color: #c1e2d8;
|
|
// color: white;
|
|
// }
|
|
}
|
|
}
|
|
</style>
|
|
|