dingzhou-app/pages/shenqing/shenqing.vue

<template>
	<view style="background-color: #fff;" v-if="content != null">
		<view style="height: 100%;overflow: auto;">
			<u--form labelPosition="left" labelAlign="center" :model="content" ref="uForm" :rules="rules"
				errorType="toast" :labelStyle="{fontSize:'32rpx'}" labelWidth="120">
				<view v-if="fkFlow == '006'">
					<u-form-item label="出差处室:" borderBottom prop="outWorkDept">
						<u--input v-model="content.outWorkDept" border="none" readonly></u--input>
					</u-form-item>
					<u-form-item label="出差人:" borderBottom prop="userName">
						<u--input v-model="content.userName" border="none" readonly></u--input>
					</u-form-item>
					<u-form-item label="目的地:" borderBottom prop="destination">
						<view>
							<view>
								<u-radio-group v-model="content.provinceType" @change="groupChange">
									<u-radio :customStyle="{marginRight: '40rpx'}" key="0" label="省内" name="0">
									</u-radio>
									<u-radio key="1" label="省外" name="1"> </u-radio>
								</u-radio-group>
							</view>
							<view style="margin-top: 20rpx;">
								<u--input v-model="content.destination" border="none" placeholder="请填写目的地"></u--input>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="起止日期:" borderBottom prop="startTime" @click="show = true">
						<view :style="{color:content.startTime==null?'rgb(192, 196, 204)':''}">
							{{content.startTime == null?'请选择起止日期':content.startTime+' 至 '+content.endTime}}
						</view>
					</u-form-item>
					<u-form-item label="出差事由:" borderBottom prop="reason">
						<u--textarea v-model="content.reason" placeholder="请填写出差事由" border="none"
							height="100"></u--textarea>
					</u-form-item>
					<u-form-item label="接收人:" borderBottom prop="toEmpsName"  @click="peoShow = true">
						<view :style="{color:content.toEmpsName==null?'rgb(192, 196, 204)':''}">
							{{content.params.toEmps == null?'请选择接收人':content.toEmpsName}}
						</view>
					</u-form-item>
				</view>
				<view v-if="fkFlow == '007'">
					<u-form-item label="申请人:" borderBottom prop="userName">
						<u--input v-model="content.userName" border="none" readonly></u--input>
					</u-form-item>
					<u-form-item label="邀请单位:" borderBottom prop="inviteUnit">
						<u--input v-model="content.inviteUnit" border="none" placeholder="请填写邀请单位"></u--input>
					</u-form-item>
					<u-form-item label="培训名称:" borderBottom prop="trainName">
						<u--input v-model="content.trainName" border="none" placeholder="请填写培训名称"></u--input>
					</u-form-item>
					<u-form-item label="目的地:" borderBottom prop="destination">
						<u--input v-model="content.destination" border="none" placeholder="请填写目的地"></u--input>
					</u-form-item>
					<u-form-item label="起止日期:" borderBottom prop="startTime" @click="show = true">
						<view :style="{color:content.startTime==null?'rgb(192, 196, 204)':''}">
							{{content.startTime == null?'请选择起止日期':content.startTime+' 至 '+content.endTime}}
						</view>
					</u-form-item>
					<u-form-item label="授课题目:" borderBottom prop="teacherTitle">
						<u--input v-model="content.teacherTitle" border="none" placeholder="请填写授课题目"></u--input>
					</u-form-item>
					<u-form-item label="参加人数:" borderBottom prop="numberOfParticipants">
						<u--input v-model="content.numberOfParticipants" border="none" placeholder="请填写参加人数"></u--input>
					</u-form-item>
				</view>
				<view v-if="fkFlow == '009'">
					<u-form-item label="姓名:" borderBottom ref="item1">
						<u--input v-model="content.name" border="none" readonly></u--input>
					</u-form-item>
					<u-form-item label="请(休)假类别:" borderBottom prop="leaveTpye">
						<uni-data-select v-model="content.leaveTpye" :clear="false" placeholder="请选择请假类别"
							:localdata="statusList"></uni-data-select>
					</u-form-item>
					<u-form-item label="起止日期:" borderBottom prop="leaveStartTime" @click="show = true">
						<view :style="{color:content.leaveStartTime==null?'rgb(192, 196, 204)':''}">
							{{content.leaveStartTime == null?'请选择起止日期':content.leaveStartTime+' 至 '+content.leaveEndTime}}
						</view>
					</u-form-item>
					<u-form-item label="请(休)假天数:" borderBottom ref="item1">
						<u--input v-model="content.leaveNumber" border="none" readonly
							placeholder="请填写请(休)假天数"></u--input>
					</u-form-item>
					<u-form-item label="请(休)假事由:" borderBottom prop="leaveReason">
						<u--textarea v-model="content.leaveReason" placeholder="请填写请(休)假事由" border="none"
							height="100"></u--textarea>
					</u-form-item>
					<u-form-item label="接收人:" borderBottom prop="toEmpsName" v-if="fzr == true"  @click="peoShow = true">
						<view :style="{color:content.toEmpsName==null?'rgb(192, 196, 204)':''}">
							{{content.params.toEmps == null?'请选择接收人':content.toEmpsName}}
						</view>
					</u-form-item>
				</view>
				<view style="padding: 0 20rpx;">
					<u-button type="primary" text="提交" @click="submit" style="margin-top: 40rpx;"></u-button>
				</view>
			</u--form>
		</view>
		<u-calendar :show="show" mode="range" allowSameDay @confirm="confirm" @close="show = false"></u-calendar>
		<u-modal :show="peoShow"  title="选择接收人" showCancelButton @cancel="cancel" @confirm="queren">
			<view style="width: 100%;height: 40vh;overflow: auto;" v-if="peoShow == true">
				<u-radio-group 
				    v-model="value" @change="radioChange"
				    iconPlacement="right">
					<u-collapse accordion style="width: 100%;">
						<u-collapse-item :title="v.Name" :name="v.No" :key="v.No" v-for="v in deptList"  style="width: 100%;">
							<view style="font-size: 32rpx; padding: 20rpx 0; border-bottom: 1px solid #eaeaea;" v-for=" i in userList" :key="i.NO" v-if="i.FK_Dept == v.No">
								<u-radio :label="i.Name" :name="i"></u-radio>
							</view>
						</u-collapse-item>
					</u-collapse>
				</u-radio-group>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { handleTree } from '../../utils/wjw'
	// import uButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue"
	export default {
		data() {
			return {
				workid: null,
				flowNo: null,
				id: null,
				content: null,
				statusList: [],
				//上个页面传过来的参数
				parameter: null,
				fkFlow: null, // 006 中层出差  007 外出授课备案 009请假
				show: false, //日历
				fzr:false,//判断是否是负责人
				peoShow:false,
				deptList:[],//部门列表
				userList:[],//人员列表
				value:null,
				rules: {},
				rules1: {
					destination: {
						type: 'string',
						required: true,
						message: '请填写目的地',
						trigger: ['blur', 'change']
					},
					startTime: {
						type: 'string',
						required: true,
						message: '请选择起止日期',
						trigger: ['blur', 'change']
					},
					reason: {
						type: 'string',
						required: true,
						message: '请填写出差事由',
						trigger: ['blur', 'change']
					},
					toEmpsName:{
						type: 'string',
						required: true,
						message: '请选择接收人',
						trigger: ['blur', 'change']
					},
				},
				rules2: {
					inviteUnit: {
						type: 'string',
						required: true,
						message: '请填写邀请单位',
						trigger: ['blur', 'change']
					},
					trainName: {
						type: 'string',
						required: true,
						message: '请填写培训名称',
						trigger: ['blur', 'change']
					},
					destination: {
						type: 'string',
						required: true,
						message: '请填写目的地',
						trigger: ['blur', 'change']
					},
					startTime: {
						type: 'string',
						required: true,
						message: '请选择起止时间',
						trigger: ['blur', 'change']
					},
					teacherTitle: {
						type: 'string',
						required: true,
						message: '请填写授课题目',
						trigger: ['blur', 'change']
					},
					numberOfParticipants: {
						type: 'number',
						required: true,
						message: '请填写参加人数',
						trigger: ['blur', 'change']
					},
				},
				rules3: {
					leaveReason: null,
					leaveTpye: {
						type: 'string',
						required: true,
						message: '请填写请假类别',
						trigger: ['blur', 'change']
					},
					leaveStartTime: {
						type: 'string',
						required: true,
						message: '请选择起止时间',
						trigger: ['blur', 'change']
					},
					leaveReason: {
						type: 'string',
						required: true,
						message: '请填写请假事由',
						trigger: ['blur', 'change']
					},
					toEmpsName:{
						type: 'string',
						required: true,
						message: '请选择接收人',
						trigger: ['blur', 'change']
					},
				},

			}
		},
		onLoad(options) {
			let that = this
			let roles = uni.getStorageSync('userInfo').roles
			if(options.fkFlow=='006'){
				this.getPeoList(options.fkFlow)
			}
			for(let i in roles){
				if(roles[i].roleKey == 'chushifzr' && options.fkFlow=='009'){
					this.fzr = true
					this.getPeoList(options.fkFlow)
					break
				}
			}
			that.parameter = options
			that.fkFlow = options.fkFlow
			that.type = options.type
			that.workid = options.workid
			that.flowNo = options.flowNo
			uni.setNavigationBarTitle({
				title: options.title
			})
			if (options.fkFlow == '009') {
				this.getDicts()
			}
			this.getContent(options.fkFlow)
			this.getRules(options.fkFlow)
		},
		methods: {
			// 查询请假类型
			getDicts() {
				uni.$u.http.get('/system/dict/data/type/leave_type').then(res => {
					this.statusList = res.data.map((item, index) => {
						let obj = {
							value: item.dictValue,
							id: item.dictValue,
							text: item.dictLabel
						}
						return obj
					})
				})
			},
			//提交待办
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title:"请稍等...",
						mask:true
					})
					switch (this.fkFlow) {
						case '006':
							uni.$u.http.post("/system/work/startOutWork", this.content).then(res => {
								if (res.data.VarAcceptersName != "" && res.data.VarAcceptersName != "结束") {
									uni.showToast({
										title: "已发送到" + res.data.VarToNodeName + "节点，接收人：" + res
											.data.VarAcceptersName,
										icon: "none",
										mask: true,
										duration: 3000
									})
								} else if (res.data.VarAcceptersName == "结束") {
									uni.showToast({
										title: res.data.Message,
										icon: "none",
										mask: true,
										duration: 3000
									})
								} else {
									uni.showToast({
										title: res.data.Message.replace(/[@]/g, ""),
										icon: "none",
										mask: true,
										duration: 3000
									})
								}
								uni.$emit('query', {
									a: 'back'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							}).catch(res => {
								uni.hideLoading()
								uni.showToast({
									title: "请稍后重试",
									icon: "none"
								})
							})
							break
						case '007':
							uni.$u.http.post("/system/registration/startTeacherOut", this.content).then(res => {
								if (res.data.VarAcceptersName != "" && res.data.VarAcceptersName != "结束") {
									uni.showToast({
										title: "已发送到" + res.data.VarToNodeName + "节点，接收人：" + res
											.data.VarAcceptersName,
										icon: "none",
										mask: true,
										duration: 3000
									})
								} else if (res.data.VarAcceptersName == "结束") {
									uni.showToast({
										title: res.data.Message,
										icon: "none",
										mask: true,
										duration: 3000
									})
								} else {
									uni.showToast({
										title: res.data.Message.replace(/[@]/g, ""),
										icon: "none",
										mask: true,
										duration: 3000
									})
								}
								uni.$emit('query', {
									a: 'back'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							}).catch(res => {
								uni.hideLoading()
								uni.showToast({
									title: "请稍后重试",
									icon: "none"
								})
							})
							break
						case '009':
							uni.$u.http.post("/oa/leave/startLeave", this.content).then(res => {
								if (res.data.VarAcceptersName != "" && res.data.VarAcceptersName != "结束") {
									uni.showToast({
										title: "已发送到" + res.data.VarToNodeName + "节点，接收人：" + res
											.data.VarAcceptersName,
										icon: "none",
										mask: true,
										duration: 3000
									})
								} else if (res.data.VarAcceptersName == "结束") {
									uni.showToast({
										title: res.data.Message,
										icon: "none",
										mask: true,
										duration: 3000
									})
								} else {
									uni.showToast({
										title: res.data.Message.replace(/[@]/g, ""),
										icon: "none",
										mask: true,
										duration: 3000
									})
								}
								uni.$emit('query', {
									a: 'back'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							}).catch(res => {
								uni.hideLoading()
								uni.showToast({
									title: "请稍后重试",
									icon: "none"
								})
							})
							break
					}
				}).catch(errors => {
					console.log(errors)
				})
			},
			//日历选择
			confirm(e) {
				switch (this.fkFlow) {
					case '006':
						this.content.startTime = e[0]
						this.content.endTime = e[e.length - 1]
						break
					case '007':
						this.content.startTime = e[0]
						this.content.endTime = e[e.length - 1]
						break
					case '009':
						this.content.leaveStartTime = e[0]
						this.content.leaveEndTime = e[e.length - 1]
						if(e[0]==e[e.length - 1]){
							this.content.leaveNumber = 1
						}else{
							this.content.leaveNumber = e.length
						}
						break
				}
				this.show = false
			},
			groupChange(e) {
				this.content.provinceType = e
			},
			radioChange(e){
				console.log(e)
				this.content.params.toEmps = e.NO
				this.content.toEmpsName = e.Name
				
			},
			cancel(){
				this.peoShow = false
				this.content.params.toEmps = null
				this.content.toEmpsName = null
				this.value = null
			},
			queren(){
				this.peoShow = false
			},
			getContent(v) {
				switch (v) {
					case '006':
						this.content = {
							outWorkDept: uni.getStorageSync('userInfo').dept.deptName,
							userName: uni.getStorageSync('userInfo').nickName,
							destination: null,
							provinceType: '0',
							startTime: null,
							endTime: null,
							reason: null,
							toEmpsName:null,
							params:{
								toEmps:null
							}
						}
						break
					case '007':
						this.content = {
							userName: uni.getStorageSync('userInfo').nickName,
							leaveTpye: null,
							trainName: null,
							destination: null,
							startTime: null,
							endTime: null,
							teacherTitle: null,
							numberOfParticipants: null
						}
						break
					case '009':
						this.content = {
							name: uni.getStorageSync('userInfo').nickName,
							deptId:uni.getStorageSync('userInfo').dept.deptId,
							inviteUnit: null,
							leaveStartTime: null,
							leaveEndTime: null,
							leaveNumber: null,
							leaveReason: null,
							params:{}
						}
						if(this.fzr == true){
							this.content.params.toEmps = null
							this.content.toEmpsName = null
						}
						break
				}
			},
			getRules(v) {
				switch (v) {
					case '006':
						this.rules = this.rules1
						break
					case '007':
						this.rules = this.rules2
						break
					case '009':
						this.rules = this.rules3
						break
				}
			},
			//获取接收人信息
			getPeoList(v){
				uni.$u.http.get(`/jflow/restful/GenerNextStepNodeEmpsNoWorkId?flowNo=${v}&toNodeID=602`).then(res=>{
					this.deptList = res.Depts
					this.userList = res.Emps
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: 32rpx;
	}

	.tab {
		width: 48%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active {
		color: #2979ff
	}
</style>