learning-system-mobile/pages/learnPath/allPath.vue

<template>
	<view class="all_path">
		<view class="headers">
			<text>全岗位路径图</text>
			<view class="go_to" @click="goSearch">
				<text class="text">筛选</text>
				<image class="img" src="../../static/images/learnpath/uotdown.png" mode=""></image>
			</view>
		</view>
		<view class="path">
			<view class="item">
				<image class="img" src="../../static/images/learnpath/thispath.png" mode=""></image>
				<text class="text">当前路径</text>
			</view>
			<view class="item" style="margin-left: 80rpx;">
				<image class="img" src="../../static/images/learnpath/otherpath.png" mode=""></image>
				<text class="text">其他路径</text>
			</view>
			<!-- <view class="item">
				<image class="img" src="../../static/images/learnpath/notpath.png" mode=""></image>
				<text class="text">其他路径(无权限)</text>
			</view> -->
		</view>
		<view class="table">
			<view class="table-container">
			    <table>
			      <thead>
			        <tr style="background: #F0F6FC;display: flex;align-items: center;">
			          <th class="first" align="center"><view class="text">
			          </view></th>
			          <th class="item1" v-for="item in titleList" align="center">{{ item.title }}</th>
			        </tr>
			      </thead>
			      <tbody>
			        <tr style="display: flex;align-items: center;" v-for="item,index in preparedData" :key="index">
			          <td class="first" align="center"><view class="text">{{ item.isOtherPosition == 1 ? item.positionName + '(' + item.organizationName + ')' : item.positionName }}</view></td>
			          <td :style="{width: 158 * t.number + 'rpx'}" class="item" align="center" v-for="t,i in item.bandCodes">
			            <image 
			               v-if="(t && t.isMajorPosition) "
			              src="@/static/images/learnpath/thispath.png" 
			              mode="aspectFit"
			            />
			            <image 
			              v-else-if="(t && t.permission)"
			              src="@/static/images/learnpath/otherpath.png" 
			              mode="aspectFit"
			            />
			           <!-- <image 
			              v-else-if="!(t && t.permission)"
			              src="@/static/images/learnpath/notpath.png" 
			              mode="aspectFit"
			            /> -->
						<text v-else></text>
			          </td>
			        </tr>
			      </tbody>
			    </table>
			  </view>
		</view>
	</view>
</template>

<script>
	import { getFullJobPath } from "@/api/modules/growth.js"
	export default {
		data() {
			return {
				 gridData: [{
					 name: '市场企划岗',
					 marketStatus: 0,
					 saleStatus: 1,
					 productStatus: 2,
					 FAEStatusL: 0,
					 salesManagement: 1
				   }, {
					 name: '销售岗',
					 marketStatus: 1,
					 saleStatus: 2,
					 productStatus: 1,
					 FAEStatusL: 0,
					 salesManagement: 1
				   }, {
					 name: '产品企划岗',
					 marketStatus: 2,
					 saleStatus: 0,
					 productStatus: 0,
					 FAEStatusL: 0,
					 salesManagement: 1
				   }, {
					 name: 'FAE岗',
					 marketStatus: 0,
					 saleStatus: 1,
					 productStatus: 2,
					 FAEStatusL: 0,
					 salesManagement: 1
				   }, {
					 name: '销售管理岗位',
					 marketStatus: 1,
					 saleStatus: 2,
					 productStatus: 0,
					 FAEStatusL: 0,
					 salesManagement: 1
				}],
				pathData: [],
				titleList: [],
				preparedData: [],
			}
		},
		onLoad() {
			getFullJobPath({
				positionIdList:this.$route.query.positionIdList || '',
				bandCodeList:this.$route.query.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')
			  }
			})
		},
		methods: {
			integrateTableData(data) {
			    const { growFullPositionPathBoItemList, allBandCodeList } = data;
			    const bandCodeIndexMap = new Map(allBandCodeList.map((code, index) => [code, index]));
			    const integratedDataMap = new Map();
			    growFullPositionPathBoItemList.flat().forEach(item => {
			        const key = `${item.positionName}-${item.organizationName}-${item.isOtherPosition}`;
			
			        if (!integratedDataMap.has(key)) {
			          integratedDataMap.set(key, {
			            positionName: item.positionName,
			            organizationName: item.organizationName,
			            isOtherPosition: item.isOtherPosition,
			            bandCodes: new Array(allBandCodeList.length).fill(null),
			          });
			        }
			        item.bandCodes.split(',').forEach(code => {
			          const codeTrimmed = code.trim();
			          const index = bandCodeIndexMap.get(codeTrimmed);
			          if (index !== undefined) {
			            integratedDataMap.get(key).bandCodes[index] = { growId: item.growId, permission: item.permission ,isMajorPosition:item.isMajorPosition };
			          }
			        });
			      });
			      const integratedDataArray = Array.from(integratedDataMap.values());
				  const mergeById = (array) => {
					  const result = [];
					  let currentGroup = null;
			  
					  array.forEach(item => {
						if (item === null) {
						  if (currentGroup && currentGroup.growId !== null) {
							result.push(currentGroup);
							currentGroup = null;
						  }
						  if (!currentGroup) {
							currentGroup = { growId: null, number: 1, ...item };
						  } else {
							currentGroup.number++;
						  }
						} else {
						  if (!currentGroup || currentGroup.growId !== item.growId) {
							if (currentGroup) {
							  result.push(currentGroup);
							}
							currentGroup = { growId: item.growId, number: 1, ...item };
						  } else {
							currentGroup.number++;
						  }
						}
					  });
					  if (currentGroup) {
						result.push(currentGroup);
					  }
			  
					  return result;
					};
					integratedDataArray.forEach(item => {
					  item.bandCodes = mergeById(item.bandCodes);
					});
			      console.log(integratedDataArray,'integratedDataArray')
			      return integratedDataArray;
			},
			goSearch(){
				let positionId = this.preparedData.map(item => item.positionName).join(',')
				uni.navigateTo({
					url: `/pages/learnPath/pathSearch?positionId=${positionId}`
				})
			},
		}
	}
</script>

<style>
.all_path{
	padding: 0 30rpx;
	padding-top: 38rpx;
	background: #fff;
	height: 100vh;
	.table {
	  .table-container {
	    /* width: 100%; */
	    overflow-x: auto;
	  }
	  table {
	    width: 100%;
	    border-collapse: collapse;
		border: 2rpx solid #F0F6FC;
	  }
	  
	 /* th {
	    padding: 12px 20px;
	    text-align: center;
	    border: 2rpx solid #F0F6FC;
	    background: #F0F6FC;
	  } */
	  /* td{
		  padding: 12px 16px;
		  text-align: center;
		  border: 2rpx solid #F0F6FC;
		  color: #333333;
		  font-weight: 400;
		  font-size: 28rpx;
	  } */
	  
	  th {
	    font-weight: bold;
	    color: #387DF7;
	  }
	  .first{
		  display: block;
	  	  text-align: center;
		  .text{
			width: 212rpx;
			border-collapse: collapse;
		  }
	  }
	  .item1{
		  /* padding: 12px 20px; */
		  width: 156rpx;
		  min-height: 100rpx;
		  text-align: center;
		  border: 2rpx solid #F0F6FC;
		  background: #F0F6FC;
		  font-weight: bold;
		  color: #387DF7;
		  font-weight: bold;
		  border-collapse: collapse;
		  display: flex;
		  justify-content: center;
		  align-items: center;
	  }
	 .item{
		  width: 156rpx;
		  min-height: 120rpx;
		  text-align: center;
		  border: 2rpx solid #F0F6FC;
		  border-bottom: none;
		  background-color: #ffffff;
		  color: #333333;
		  font-weight: 400;
		  font-size: 28rpx;
		  border-collapse: collapse;
		  display: flex;
		  justify-content: center;
		  align-items: center;
	  }
	  tbody tr:nth-child(odd) {
	    background-color: #ffffff;
	  }
	  
	  tbody tr:hover {
	    background-color: rgba(0, 0, 0, .05);
	  }
	  
	  image {
	    width: 40rpx;
	    height: 36rpx;
	    vertical-align: middle;
	  }
	}
	
	.headers{
		/* margin-top: 38rpx; */
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		.go_to{
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;
			top: 0;
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				text-align: left;
				margin-right: 16rpx;
			}
			.img{
				width: 24rpx;
				height: 16rpx;
			}
		}
	}
	.path{
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		margin-bottom: 30rpx;
		.item{
			display: flex;
			align-items: center;
			.img{
				width: 40rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
			}
		}
	}
}
</style>