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">
				<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">
				<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="address" type="text" placeholder="请输入"
					placeholder-style="font-size: 28rpx;color: #999999;" />
			</view>
		</view>
		<view class="reason f-col">
			<view class="title">
				请假事由：
			</view>
			<textarea v-model="reason" placeholder="请输入请假事由" placeholder-style="font-size: 28rpx;color: #999999;"
				cols="30" rows="10"></textarea>
		</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
	} from '@/api/pages.js';
	import {
		queryDepByCode
	} 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 phone = ref(store.userinfo.phone)
	/**请假类型*/
	const type = ref('')
	const dataSource = ref([])
	/**开始时间*/
	const beginTime = ref('')
	const chooseStart = (e) => {
		beginTime.value = e.detail.value
	}
	/**结束时间*/
	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 address = ref('')
	/**请假事由*/
	const reason = ref('')

	onLoad(() => {
		loadData()
	})

	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 (zwcj.value != '单位专家' && zwcj.value != '正职' && zwcj.value != '高级主管') {
			if (typeIndex.value == null) { //副职、员工需要选择审批领导
				return proxy.$toast('请选择审批领导')
			}
		}
		if (!address.value.trim()) return proxy.$toast('请输入请假地点')
		if (!reason.value.trim()) return proxy.$toast('请输入请假事由')
		qjAddApi({
			username: store.userinfo.username,
			phone: phone.value,
			type: type.value,
			begintime: beginTime.value,
			endtime: endTime.value,
			examineleader: typeArr.value[typeIndex.value].username,
			address: address.value,
			reason: reason.value,
			zwcj: zwcj.value,
		}).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
			}
		})

		queryDepByCode(store.userinfo.orgCode).then((res) => { //部门翻译
			if (res.success) {
				depart.value = res.result
			}
		})

		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);
			}
		})
	}

	const bindType = (e) => {
		typeIndex.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;
		}
	}

	.reason {
		background-color: #fff;
		margin-top: 20rpx;

		height: 290rpx;
		padding: 30rpx;

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

		}

		textarea {
			width: 100%;
			margin-top: 20rpx;
		}
	}


	// .progress_box {
	// 	background-color: #fff;
	// 	margin-top: 20rpx;
	// 	padding: 30rpx;

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

	// 	.avatar {
	// 		width: 78rpx;
	// 		height: 78rpx;
	// 		border-radius: 38rpx;
	// 		background-color: #333333;
	// 		margin-top: 30rpx;
	// 	}

	// 	text {
	// 		font-size: 24rpx;
	// 		color: #333333;
	// 		margin-top: 10rpx;
	// 	}

	// 	.line {
	// 		width: 91rpx;
	// 		height: 17rpx;
	// 		margin: 0 40rpx;
	// 	}
	// }

	.lines {
		height: 20rpx;
		background-color: #F8F8F8;
	}
</style>