cxc-szcx-uniapp/pages/leave/application.vue

<template>
	<view :class="{'gray':store.isgray==1}">
		<view class="form">
			<view class="f-row aic jcb input_box">
				<view class="title">
					职工姓名：
				</view>
				<input v-model="realname" disabled />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					工作单位：
				</view>
				<input v-model="depart" disabled />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					联系方式：
				</view>
				<input v-model="phone" />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					请假类型：
				</view>
				<tree-select :dataSource="dataSource" v-model="type" dataValue="name" />
			</view>
			<picker mode="date" fields="day" @change="chooseStart" :value="beginTime" :start="startDate" :end="endTime">
				<view class="f-row aic jcb box">
					<view class="title">
						开始时间：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':!beginTime},{'choosed':beginTime}]">
							{{beginTime?beginTime:'请选择'}}
						</view>
						<uni-icons type="bottom" color="#333333"></uni-icons>
					</view>
				</view>
			</picker>
			<picker mode="date" fields="day" @change="chooseEnd" :value="endTime" :start="beginTime">
				<view class="f-row aic jcb box">
					<view class="title">
						截止时间：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':!endTime},{'choosed':endTime}]">
							{{endTime?endTime:'请选择'}}
						</view>
						<uni-icons type="bottom" color="#333333"></uni-icons>
					</view>
				</view>
			</picker>
			<picker @change="bindType" :value="typeIndex" :range="typeArr" range-key="realname" v-if="ifShow">
				<view class="f-row aic jcb box">
					<view class="title">
						审批领导：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':typeIndex==null},{'choosed':typeIndex!=null}]">
							{{typeIndex!=null?typeArr[typeIndex].realname:'请选择'}}
						</view>
						<uni-icons type="bottom" color="#333333"></uni-icons>
					</view>
				</view>
			</picker>
			<view class="f-row aic jcb input_box">
				<view class="title">
					出发地：
				</view>
				<input v-model="departure" placeholder="请输入" nplaceholder-style="font-size: 28rpx;color: #999999;" />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					目的地：
				</view>
				<input v-model="destination" placeholder="请输入" nplaceholder-style="font-size: 28rpx;color: #999999;" />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					请假事由：
				</view>
				<input v-model="reason" placeholder="请输入" placeholder-style="font-size: 28rpx;color: #999999;" />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					上传附件：
				</view>
				<uni-file-picker @select="select" :image-styles="imageStyles" />
			</view>
		</view>

		<view class="btn f-col aic">
			<view @click="qjAdd">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		startMutilProcessApi,
		getCategoryItemsApi,
	} from '@/api/api.js';
	import {
		qjAddApi,
		queryZwmcAndExaApi,
		queryHisDateApi
	} from '@/api/leaveApi.js';
	import {
		queryDepByCode,
		queryZbDepByLdhth
	} from '@/api/depart.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store';
	import treeSelect from "@/components/treeSelect/treeSelect.vue"

	const store = useStore()
	const {
		proxy
	} = getCurrentInstance()

	/**职工姓名*/
	const realname = ref(store.userinfo.realname)
	/**工作单位*/
	const depart = ref('')
	/**工作单位*/
	const orgCode = ref('')
	/**联系方式*/
	const phone = ref(store.userinfo.phone)
	/**请假类型*/
	const type = ref('')
	const dataSource = ref([])
	/**开始时间*/
	const beginTime = ref('')
	const chooseStart = (e) => {
		beginTime.value = e.detail.value
	}
	/**请假开始时间 绑定start*/
	const startDate = ref('')
	/**结束时间*/
	const endTime = ref('')
	const chooseEnd = (e) => {
		endTime.value = e.detail.value
	}
	/**审批领导*/
	const typeArr = ref([])
	const typeIndex = ref(null)
	/**判断是否显示审批领导字段*/
	const ifShow = ref(true)
	/**职位层级*/
	const zwcj = ref('')
	/**出发地*/
	const departure = ref('')
	/**目的地*/
	const destination = ref('')
	/**请假事由*/
	const reason = ref('')
	/**附件路径*/
	const path = ref([])
	const baseUrl = import.meta.env.VITE_REQUEST_BASE_URL + '/jeecg-boot/sys/common/upload/'
	const imageStyles = {
		width: 64,
		height: 64,
		border: {
			color: "#dce7e1",
			width: 2,
			style: 'dashed',
			radius: '2px'
		}
	}
	onLoad(() => {
		loadData()
	})

	const select = (e) => {
		const tempFilePaths = e.tempFilePaths
		for (let i = 0; i < e.tempFilePaths.length; i++) {
			let photoPath = '职工请假/' + depart.value + '/' + store.userinfo.realname
			uni.uploadFile({
				url: baseUrl,
				filePath: e.tempFilePaths[i],
				name: 'file',
				formData: {
					appPath: photoPath
				},
				success: (res) => {
					path.value.push(JSON.parse(res.data).message)
				}
			});
		}
	}

	const qjAdd = () => {
		if (!phone.value.trim()) return proxy.$toast('请输入联系方式')
		if (!type.value) return proxy.$toast('请选择请假类型')
		if (!beginTime.value) return proxy.$toast('请选择开始时间')
		if (!endTime.value) return proxy.$toast('请选择结束时间')
		if (ifShow.value) {
			if (typeIndex.value == null) { //副职、员工需要选择审批领导
				return proxy.$toast('请选择审批领导')
			}
		}
		if (!departure.value.trim()) return proxy.$toast('请输入出发地')
		if (!destination.value.trim()) return proxy.$toast('请输入目的地')
		if (!reason.value.trim()) return proxy.$toast('请输入请假事由')

		qjAddApi({
			sysOrgCode: orgCode.value,
			username: store.userinfo.username,
			phone: phone.value,
			type: type.value,
			begintime: beginTime.value,
			endtime: endTime.value,
			examineleader: typeArr.value[typeIndex.value] ? typeArr.value[typeIndex.value].username : '',
			departure: departure.value,
			destination: destination.value,
			reason: reason.value,
			zwmc: zwcj.value,
			path: path.value.toString()
		}).then((res) => {
			if (res.success) {
				startMutilProcess(res.message)
			} else {
				proxy.$toast(res.message);
			}
		})
	}

	const startMutilProcess = (id) => {
		startMutilProcessApi({
			flowCode: "dev_cxc_qxj",
			id,
			formUrl: "modules/qxj/modules/CxcQxjBpmModel",
			formUrlMobile: "leaveApplication" //对应main.js里全局注册createApp()里的 app.component('leaveApplication',index)
		}).then((res) => {
			if (res.success) {
				proxy.$toast(res.message)
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}
		}).catch((err) => {
			console.log(err);
		})
	}
	const loadData = () => {
		getCategoryItemsApi('1838487445813645313').then((res) => { //请假类型
			if (res.success) {
				dataSource.value = res.result
			}
		})

		queryZbDepByLdhth(store.userinfo.workNo).then((res) => { //获取工作单位
			depart.value = res.departName
			orgCode.value = res.orgCode
		})

		queryZwmcAndExaApi(store.userinfo.username).then((res) => { //本人职位及审批领导列表
			if (res.success) {
				typeArr.value = res.result.list
				zwcj.value = res.result.zwmc
				if (zwcj.value == '单位专家' || zwcj.value == '基层正职' || zwcj.value == '高级主管') {
					ifShow.value = false;
				}
			} else {
				proxy.$toast(res.message);
			}
		})

		queryHisDateApi(store.userinfo.username).then((res) => { // 最新请假结束日期
			if (res) {
				getTomorrowDate(res);
				startDate.value = beginTime.value; // 如果有最新请假日期，设置startDate为该日期
			} else {
				getTomorrowDate();
				startDate.value = '1900-01-01';
			}
		})
	}

	const bindType = (e) => {
		typeIndex.value = e.detail.value
	}

	const getTomorrowDate = (e) => {
		let tomorrow;
		if (e) {
			// 将传入的日期字符串转换为Date对象
			const dateParts = e.split('-').map(Number);
			tomorrow = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
		} else {
			// 如果没有提供日期，则使用当前日期
			tomorrow = new Date();
		}
		// 设置为明天的日期
		tomorrow.setDate(tomorrow.getDate() + 1);
		// 格式化日期
		const year = tomorrow.getFullYear();
		const month = (tomorrow.getMonth() + 1).toString().padStart(2, '0');
		const day = tomorrow.getDate().toString().padStart(2, '0');
		beginTime.value = `${year}-${month}-${day}`;
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.btn {
		border-top: 1px solid #EFEFEF;
		height: 120rpx;
		justify-content: center;
		position: fixed;
		bottom: 0;
		width: 100vw;

		view {
			width: 690rpx;
			height: 88rpx;
			background: #01508B;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.input_box {
		height: 100rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		input {
			flex: 1;
			height: 100%;
			text-align: right;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.form {
		padding: 0 30rpx;
		background-color: #fff;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		.box {
			height: 100rpx;
		}

		.box:not(:last-child) {
			border-bottom: 1px solid #EFEFEF;

		}

		.choose {
			font-size: 28rpx;
			color: #999999;
		}

		.choosed {
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>