cxc-szcx-uniapp/pages/views/renliziyuan/qingjiaxinxi/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" @change="queryHisDate" />
			</view>
			<view class="f-row aic jcb input_box">
				<view class="title">
					请假时间：
				</view>
				<cxc-szcx-dateRangeSelect mode="range" v-model="rangeDate" :startDate="startDate" :isSearch="false"></cxc-szcx-dateRangeSelect>
			</view>
			<picker @change="bindType" :value="leaderIndex" :range="leaderArr" range-key="realname">
				<view class="f-row aic jcb box">
					<view class="title">
						{{examineleader}}：
					</view>
					<view class="f-row aic">
						<view :class="[{'choose':leaderIndex==null},{'choosed':leaderIndex!=null}]">
							{{leaderIndex!=null?leaderArr[leaderIndex].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 rangeDate = ref([null, null])
	const startDate = ref('')
	/**审批领导*/
	const leaderArr = ref([])
	const leaderIndex = ref(null)
	/**判断显示审批 / 分管领导*/
	const examineleader = 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'
		}
	}
	/**返回的最新一条请假结束时间*/
	const resDate = ref('')
	
	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 (!rangeDate.value || rangeDate.value.every(item => item === null)) return proxy.$toast('请选择请假时间')
		if (leaderIndex.value == null) return proxy.$toast('请选择' + examineleader.value)
		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: rangeDate.value[0],
			endtime: rangeDate.value[1],
			examineleader: leaderArr.value[leaderIndex.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) {
				leaderArr.value = res.result.list
				zwcj.value = res.result.zwmc
				if (zwcj.value == '单位专家' || zwcj.value == '基层正职' || zwcj.value == '高级主管') {
					examineleader.value = '分管领导';
				} else {
					examineleader.value = '审批领导';
				}
			} else {
				proxy.$toast(res.message);
			}
		})

		queryHisDateApi(store.userinfo.username).then((res) => {
			resDate.value = res ? new Date(res) : null; // 如果 res 存在，转换为 Date 对象
			queryHisDate();
		});
	}

	const queryHisDate = () => {
		const today = new Date(); // 获取当前日期
		if (resDate.value) {
			// 如果 res 存在
			if (type.value != '干部离返濮报备') {
				startDate.value = getNextDay(resDate.value); // startDate 为 res 的第二天
			}else{
				startDate.value = null;
			}
			rangeDate.value = [getNextDay(resDate.value < today ? today : resDate.value), getNextDay(getNextDay(
				resDate.value < today ? today : resDate.value))]
		} else {
			// 如果 res 不存在
			rangeDate.value = [getNextDay(today), getNextDay(today)]
		}
	}

	// 获取传入日期的第二天
	const getNextDay = (date) => {
		const nextDay = new Date(date);
		nextDay.setDate(nextDay.getDate() + 1); // 设置为第二天
		const year = nextDay.getFullYear();
		const month = (nextDay.getMonth() + 1).toString().padStart(2, '0');
		const day = nextDay.getDate().toString().padStart(2, '0');
		return `${year}-${month}-${day}`;
	};

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

</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>