From a3baad7d3ce8ddc0764b20a9d92d90af48b32051 Mon Sep 17 00:00:00 2001
From: zhangsir <z1823137@163.com>
Date: Thu, 11 Jul 2024 10:56:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/learnPath/allPath.vue | 452 +++++++++++++++++++++++++++++++++++-
 1 file changed, 441 insertions(+), 11 deletions(-)

diff --git a/pages/learnPath/allPath.vue b/pages/learnPath/allPath.vue
index a1aee83..5928207 100644
--- a/pages/learnPath/allPath.vue
+++ b/pages/learnPath/allPath.vue
@@ -88,14 +88,84 @@
 			    </table>
 			  </view>
 		</view>
+		<u-popup :show="showSearch" :duration="0" mode="top" >
+			<view class="searchs">
+				<view class="item">
+					<view class="title updown">
+						岗位
+						<view v-if="!isTrue" @click="listslice" class="up">
+							收起
+							<image class="img" src="../../static/images/learnpath/updown.png" mode=""></image>
+						</view>
+					</view>
+					<view class="check">
+						<view style="display: flex;flex-wrap: wrap;">
+							<view :style="{marginRight:index/2!=0||index==0?'12rpx':''}" :class="indexs.includes(index)?'items':'item'" @click="searchItem(item,index)" v-for="(item,index) in posiLists" :key="index" class="item">
+								{{item.positionName}}
+							</view>
+							<view v-if="startList.length > 9 && isTrue" class="item" @click="allList">
+								<text class="text">查看更多</text>
+								<image class="img" src="../../static/images/learnpath/uotdown.png" mode=""></image>
+							</view>
+							
+						</view>
+					</view>
+				</view>
+				<view class="item" style='margin-bottom: 180rpx;'>
+					<view class="title">
+						职级
+					</view>
+					<view class="downlist">
+						<view class="title">
+							<view @click="downList" class="btn">
+								<text>{{bandFirst || '职级'}}</text>
+								<img class="img" src="../../static/images/learnpath/uotdown.png" alt="">
+							</view>
+							<text class="line"></text>
+							<view @click="downList" class="btn">
+								<text>{{bandEnd || '职级'}}</text>
+								<img class="img" src="../../static/images/learnpath/uotdown.png" alt="">
+							</view>
+						</view>
+						<view v-if="bandShow" class="body">
+							<view @click="isBand(item,index)" :class=" {'item2': bandIndexs.includes(index),'disabled-item': isDisabled(index)}" v-for="(item,index) in bandLists" :key="index" class="item">
+								{{item.bandCode}}
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="footers">
+					<view class="btn left" @click="reach">
+						重置
+					</view>
+					<view class="btn right" @click="goAllPath">
+						确定
+					</view>
+				</view>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
-	import { getFullJobPath } from "@/api/modules/growth.js"
+	import { getFullJobPath,getAllPosition,getAllBandInfo } from "@/api/modules/growth.js"
 	export default {
 		data() {
 			return {
+				bandCodeList: '',
+				positionIdList: '',
+				posiLists: [],
+				startList: [],
+				isTrue: true,
+				indexs: [],
+				posiData: [],
+				bandLists: [],
+				bandShow: false,
+				bandIndexs: [],
+				bandItem: [],
+				bandFirst: '',
+				bandEnd: '',
+				showSearch: false,
 				 gridData: [{
 					 name: '市场企划岗',
 					 marketStatus: 0,
@@ -138,11 +208,35 @@
 			}
 		},
 		 onShow: function(options) {
-			  const bandCodeList = uni.getStorageSync('bandCodeList');
-			  const positionIdList = uni.getStorageSync('positionIdList');
+			 //  const bandCodeList = uni.getStorageSync('bandCodeList');
+			 //  const positionIdList = uni.getStorageSync('positionIdList');
+				// getFullJobPath({
+				// 	positionIdList: positionIdList || '',
+				// 	bandCodeList: bandCodeList || ''
+				// }).then(res=>{
+				//   if(res.code == 200){
+				// 	this.pathData = res.data
+				// 	this.titleList = this.pathData.allBandCodeList
+				// 	this.preparedData = this.integrateTableData(this.pathData);
+				// 	this.titleList = this.titleList.map(item=>({
+				// 	  title: item,
+				// 	}))
+				// 	// this.titleList.unshift({
+				// 	//   title: ''
+				// 	// })
+				// 	console.log(this.titleList,'titleList')
+				//   }
+				// })
+				this.getPosiList()
+				this.getFullJobPaths()
+		  },
+		onLoad() {
+		},
+		methods: {
+			getFullJobPaths(){
 				getFullJobPath({
-					positionIdList: positionIdList || '',
-					bandCodeList: bandCodeList || ''
+					positionIdList: this.positionIdList || '',
+					bandCodeList: this.bandCodeList || ''
 				}).then(res=>{
 				  if(res.code == 200){
 					this.pathData = res.data
@@ -157,10 +251,7 @@
 					console.log(this.titleList,'titleList')
 				  }
 				})
-		  },
-		onLoad() {
-		},
-		methods: {
+			},
 			goOtherPath(item){
 				console.log(item,'item')
 				uni.navigateTo({
@@ -231,9 +322,181 @@
 			},
 			goSearch(){
 				// let positionId = this.preparedData.map(item => item.positionName).join(',')
-				uni.navigateTo({
-					url: `/pages/learnPath/pathSearch`
+				// uni.navigateTo({
+				// 	url: `/pages/learnPath/pathSearch`
+				// })
+				this.showSearch = true
+			},
+			reach(){
+				this.bandIndexs = []
+				this.bandItem = []
+				this.indexs = []
+				this.posiData = []
+				this.bandFirst = ''
+				this.bandEnd = ''
+				this.bandCodeList = ''
+				this.positionIdList = ''
+			},
+			goAllPath(){
+				this.bandCodeList = this.bandItem.map(item => item.bandCode).join(',')
+				this.positionIdList = this.posiData.map(item => item.positionId).join(',')
+				// uni.setStorageSync('bandCodeList', bandCodeList);
+				// uni.setStorageSync('positionIdList', positionIdList);
+				// uni.navigateBack({
+				//   delta: 1
+				// });
+				this.showSearch = false
+				this.getFullJobPaths()
+			},
+			getPosiList(){
+				getAllPosition().then(res=>{
+					this.startList = res.data
+					if(res.code == 200 ){
+						const majorItem = res.data.find(item => item.isMajor === 1);
+						if (majorItem) {
+						  const index = res.data.indexOf(majorItem);
+						  res.data.splice(index, 1);
+						  res.data.unshift(majorItem);
+						}
+						this.posiLists = res.data
+						// const positionName = this.preparedData.map(item => item.positionName).join(',')
+						// const positionNames = positionName.split(',');
+						// const matchedItemsWithIndexes = positionNames.flatMap((item, index) => {
+						//   // 先找到匹配的项
+						//   const matches = this.posiLists
+						//     .map((listItem, listItemIndex) => listItem.positionName === item ? { listItem, listItemIndex } : null)
+						//     .filter(match => match !== null);
+						//   return matches.map(match => ({ 
+						//     matchedItem: match.listItem, 
+						//     indexInPosiLists: match.listItemIndex 
+						//   }));
+						// });
+						// this.posiData = matchedItemsWithIndexes.map(item=> item.matchedItem)
+						// this.indexs = matchedItemsWithIndexes.map(item=> item.indexInPosiLists)
+						if(this.posiLists.length > 9){
+							this.posiLists = this.posiLists.slice(0, 9)
+						}
+					}
 				})
+				getAllBandInfo().then(res=>{
+					if(res.code == 200){
+						this.bandLists = res.data
+					}
+				})
+			},
+			allList(){
+				this.posiLists = this.startList
+				this.isTrue = false
+			},
+			listslice(){
+				this.posiLists = this.startList.slice(0, 9)
+				this.isTrue = true
+			},
+			searchItem(item,index){
+				const indexToRemove = this.indexs.indexOf(index);
+				if (indexToRemove !== -1) {
+				    this.indexs.splice(indexToRemove, 1);
+				} else {
+				    this.indexs.push(index);
+				}
+				console.log(this.indexs,'this.indexs')
+				this.posiData = this.indexs.map(index => this.startList[index]);
+			},
+			downList(){
+				this.bandShow = !this.bandShow
+			},
+			isDisabled(index) {
+			    if (this.bandIndexs.length == 1) {
+			      const firstClickIndex = this.bandIndexs[0];
+			      const allowedRangeEnd = firstClickIndex + 2;
+			      return index < firstClickIndex - 2 || index > allowedRangeEnd;
+			    }
+				if (this.bandIndexs.length == 2) {
+				  const firstClickIndex = this.bandIndexs[0];
+				  const allowedRangeEnd = firstClickIndex + 2;
+				  return index < firstClickIndex - 1 || index > allowedRangeEnd;
+				}
+				if (this.bandIndexs.length == 3) {
+					const firstClickIndex = Math.min(...this.bandIndexs);
+					const allowedRangeEnd = Math.max(...this.bandIndexs);
+				  return index < firstClickIndex || index > allowedRangeEnd;
+				}
+			    return false;
+			},
+			isBand(item,index){
+				console.log(this.bandIndexs.length)
+				if (this.bandIndexs.length == 1) {
+					const firstClickIndex = this.bandIndexs[0];
+					const allowedRangeEnd = firstClickIndex + 2;
+					if (index < firstClickIndex - 2 || index > allowedRangeEnd) {
+						return;
+					}
+				}
+				if (this.bandIndexs.length == 2) {
+					const firstClickIndex = this.bandIndexs[0];
+					const allowedRangeEnd = firstClickIndex + 2;
+					if (index < firstClickIndex - 1 || index > allowedRangeEnd) {
+						return;
+					}
+				}
+				if (this.bandIndexs.length == 3) {
+					const firstClickIndex = Math.min(...this.bandIndexs);
+					const allowedRangeEnd = Math.max(...this.bandIndexs);
+				  if (index < firstClickIndex  || index > allowedRangeEnd) {
+				  	return;
+				  }
+				}
+				this.bandIndexs.sort((a, b) => a - b);
+				 if (this.bandIndexs.length === 3 && this.bandIndexs.includes(index) && this.bandIndexs.indexOf(index) == 1) {
+					// 删除最后一个元素
+					this.bandIndexs.sort((a, b) => a - b);
+					this.bandIndexs.pop();
+					this.bandItem = this.bandIndexs.map(index => this.bandLists[index])
+					this.bandItem = this.bandItem.sort((a, b) => parseInt(a.bandId, 10) - parseInt(b.bandId, 10));
+					this.bandFirst = this.bandItem[0].bandCode
+					if(this.bandItem && this.bandItem.length > 1){
+						this.bandEnd = this.bandItem[this.bandItem.length - 1].bandCode
+					}
+					return;
+				}
+				let currentIndex = index;
+				let firstClickIndex = this.bandIndexs[0];
+				
+				if (this.bandIndexs.length === 0) {
+					this.bandIndexs.push(currentIndex);
+					this.bandItem = this.bandIndexs.map(index => this.bandLists[index])
+					this.bandItem = this.bandItem.sort((a, b) => parseInt(a.bandId, 10) - parseInt(b.bandId, 10));
+					this.bandFirst = this.bandItem[0].bandCode
+					return;
+				}
+				const indexToRemove = this.bandIndexs.findIndex(index => index === currentIndex);
+				if (indexToRemove !== -1) {
+				    this.bandIndexs.splice(indexToRemove, 1);
+				} else {
+				    // 如果索引不存在于数组中，则需要检查是否需要填充连续索引
+				    const start = Math.min(firstClickIndex, currentIndex);
+				    const end = Math.max(firstClickIndex, currentIndex);
+				    console.log(start,end,'end')
+				    for (let i = start; i <= end; i++) {
+				        if (!this.bandIndexs.includes(i)) {
+				            this.bandIndexs.push(i);
+				        }
+				    }
+				}
+				if(this.bandIndexs.length == 0){
+					this.bandFirst = ''
+					this.bandItem = []
+					return
+				}
+				if(this.bandIndexs.length == 1){
+					this.bandEnd = ''
+				}
+				this.bandItem = this.bandIndexs.map(index => this.bandLists[index])
+				this.bandItem = this.bandItem.sort((a, b) => parseInt(a.bandId, 10) - parseInt(b.bandId, 10));
+				this.bandFirst = this.bandItem[0].bandCode
+				if(this.bandItem && this.bandItem.length > 1){
+					this.bandEnd = this.bandItem[this.bandItem.length - 1].bandCode
+				}
 			},
 		}
 	}
@@ -380,4 +643,171 @@
 		}
 	}
 }
+.searchs{
+	background: #fff;
+	min-height: 100vh;
+	overflow: auto;
+	padding: 56rpx 56rpx 0 38rpx;
+	.item{
+		
+		.downlist{
+			margin: 0 auto;
+			.body{
+				display: flex;
+				flex-wrap: wrap;
+				.item{
+					margin-right: 18rpx;
+					width: 190rpx;
+					margin-bottom: 28rpx;
+					height: 60rpx;
+					background: #F7F7F7;
+					border-radius: 34rpx;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #666666;
+					text-align: center;
+					line-height: 60rpx;
+				}
+				.item2{
+					background: #EAF2FF;
+					border: 2rpx solid #387DF7;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #387DF7;
+				}
+				.disabled-item {
+				  background-color: #ccc;
+				}
+			}
+			.title{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.line{
+					width: 16rpx;
+					border: 2rpx solid #979797;
+					margin-left: 6rpx;
+					margin-right: 6rpx;
+				}
+				.btn{
+					width: 316rpx;
+					height: 60rpx;
+					background: #F7F7F7;
+					border-radius: 34rpx;
+					padding: 0 32rpx 0 40rpx;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #666666;
+					.img{
+						width: 20rpx;
+						height: 10rpx;
+					}
+				}
+			}
+		}
+		.updown{
+			display: flex;
+			justify-content: space-between;
+			.up{
+				margin-right: 18rpx;
+				font-weight: 400;
+				font-size: 28rpx;
+				color: #666666;
+				.img{
+					width: 24rpx;
+					height: 16rpx;
+					margin-left: 10rpx;
+				}
+			}
+		}
+		.title{
+			font-weight: 500;
+			font-size: 32rpx;
+			color: #333333;
+			line-height: 44rpx;
+			text-align: left;
+			margin-bottom: 34rpx;
+		}
+			.check{
+				display: flex;
+				justify-content: center;
+				flex-wrap: wrap;
+				margin-bottom: 34rpx;
+				.item{
+					margin-bottom: 28rpx;
+					width: 240rpx;
+					height: 60rpx;
+					padding: 0 30rpx 0 34rpx;
+					border-radius: 34rpx;
+					background: #F7F7F7;
+					line-height: 60rpx;
+					text-align: center;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #666666;
+					.text{
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #666666;
+						line-height: 40rpx;
+					}
+					.img{
+						width: 24rpx;
+						height: 16rpx;
+						margin-left: 14rpx;
+					}
+				}
+				.items{
+					width: 240rpx;
+					height: 60rpx;
+					background: #EAF2FF;
+					border-radius: 34rpx;
+					border: 1rpx solid #387DF7;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #387DF7;
+				}
+			}
+		
+	}
+	.footers{
+		width: 100%;
+		height: 120rpx;
+		position: fixed;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%, 0%);
+		display: flex;
+		justify-content: center;
+		/* align-items: center; */
+		background: #fff;
+		.btn{
+			width: 284rpx;
+			height: 96rpx;
+			line-height: 96rpx;
+			border-radius: 48rpx;
+			text-align: center;
+		}
+		.left{
+			border: 2rpx solid #387DF7;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #387DF7;
+			margin-right: 36rpx;
+		}
+		.right{
+			background: linear-gradient( 112deg, #5491FD 0%, #2A58FA 100%);
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #FFFFFF;
+		}
+	}
+}
+
 </style>