ahyd_DIB/pages/askForLeave/newLeave.vue

<template>
	<view  class="content">
		<view>
			<view class="block-title">请选择请假审批流程</view>
			<view class="uni-flex uni-row leave-box">
				<view class="leave-type uni-flex uni-column" :class="{'active':selectType==item.Prodef_Id}" @tap="choeseSelect(item.Prodef_Id)" v-for="(item,i) in prodeList" :key="i">
					<image :src="item.imgPath" mode="aspectFit" style="width: 67upx;height: 61upx;"></image>
					<text class="type-title">{{item.Prodef_Name}}</text>
					<text>请假审批流程</text>
				</view>
				<!-- <view class="leave-type uni-flex uni-column" :class="{'active':selectType==461}" @tap="choeseSelect(461)">
					<image src="../../static/images/leave/fwq-gl.png" mode="aspectFit" style="width: 67upx;height: 61upx;"></image>
					<text class="type-title">服务区经营管理者</text>
					<text>请假审批流程</text>
				</view>
				<view class="leave-type uni-flex uni-column" :class="{'active':selectType==462}" @tap="choeseSelect(462)">
					<image src="../../static/images/leave/qy.png" mode="aspectFit" style="width: 67upx;height: 61upx;"></image>
					<text class="type-title">区域员工</text>
					<text>请假审批流程</text>
				</view> -->
			</view>
			<view class="block-title">
				请选择所属服务区
			</view>
			<view class="block-input uni-flex uni-row" style="align-items: center;">
				<text>服务区</text>
				<text class="text-red">*</text>
				<view class=" uni-flex uni-row" style="flex: 1;margin-left: 32upx;align-items: center;">
					<picker mode="selector" @change="pickerChange" :value="pickerIndex" range-key="SERVERPART_NAME" :range="severpartList" style="flex: 1;" >
						
						<input disabled="true" type="text" :value="severpartList[pickerIndex].SERVERPART_NAME" placeholder="请选择" placeholder-style="color:#969EA4;"/>
					</picker>
					<i class="uni-icon uni-icon-arrowright"></i>
				</view>
			</view>
			<view  class="block-title tip-text text-red">注：请选择相应的请假流程进行提交</view>
		</view>
		<button type="default" class="next-btn" @tap="nextTap">下一步</button>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {
				prodeList: [
				
					456,
					461,
					462
				],
				selectType: 456,
				severpartList: [],
				canselectList:{},
				pickerIndex: 0,
			}
		},
		computed:{
			...mapGetters({'users':'getUser'})
		},
		methods: {
			choeseSelect(_id) {
				this.selectType = _id 
				if(_id==462){
					this.severpartList = this.canselectList.ListSpregion
				}else{
					this.severpartList = this.canselectList.ListServer
				}
				this.$forceUpdate()
				
			},
			pickerChange(e){
			
				this.pickerIndex = e.detail.value
			},
			getSeverpart(){
				let _this = this
				_this.$request.$get('GetStaffLeaveServerpart',{}).then(res=>{
					_this.canselectList = res.Data
					_this.severpartList = res.Data.ListServer
				})
			},
			nextTap(){
				this.$util.toNextRoute('navigateTo',  '/pages/askForLeave/newLeave2?prodefId='+this.selectType+'&sCode='+this.severpartList[this.pickerIndex].SERVERPART_CODE)
				
			},
			getProde(){
				let _this =this
				let img = ['/static/images/leave/fwq-yg.png','/static/images/leave/fwq-gl.png','/static/images/leave/qy.png']
				this.$request.$get('GetProdefInfo',{}).then(res=>{
					if(res.ResultCode==100){
						_this.selectType =  res.Data.List[0].Prodef_Id
						res.Data.List.map((n,i)=>{ 
							n.Prodef_Name = n.Prodef_Name.replace('请假审批流程','')
							n.imgPath = img[i]
							
						})
						_this.prodeList = res.Data.List
						
					}
				})
			}
		},
		onUnload() {
			this.$util.addUserBehavior()
		},
		onLoad() {
			this.getProde()
			this.getSeverpart()
		}
	}
</script>

<style scoped>
	.content {
		height: 100%;
		justify-content: space-between;
	}
	.block-title {
		color: #788691;
		font-size: 26upx;
		padding: 27upx 24upx;
	}
	.leave-box {
		justify-content: space-around;
		padding: 0 12upx;
		margin-bottom: 24upx;
	}
	.leave-type {
		width: 216upx;
		height: 222upx;
		background-color: #FFFFFF;
		overflow: hidden;
		border-radius: 12upx;
		text-align: center;
		font-size: 24upx;
		align-items: center;
		justify-content: center;
		border: 1upx solid #fff;
	}
	.leave-type.active {
		border-color: #5E8FEA;
		position: relative;
	}
	.active:after {
		content: '';
		position: absolute;
		background-image: url('../../static/images/leave/type-active.png'); 
		background-size: contain;
		background-repeat: no-repeat;
		right: -2upx;
		top: 0;
		height: 59upx;
		width: 61upx;
	
	}
	.type-title{
		margin-top: 24upx;
		line-height: 1;
	}
	.block-input {
		height: 92upx;
		background-color: #fff;
		padding: 0 24upx;
	}
	.text-red {
		color: #EA3020;
	}
	.tip-text {
		font-size: 24upx;
		margin-top: 24upx;
	}
	.uni-icon-arrowright{
		color: #969EA4;
	}
	.next-btn {
		background-color: #fff;
		width: 95%;
		border-radius: 0;
		color: #5E8FEA;
		font-size: 32upx;
		height: 90upx;
		line-height: 89upx;
		margin-top: 60upx;
	}
	button:after {
		border: none;
		border-radius: 0;
		border-top: 2upx solid #E9EDF2;
	}
</style>