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>
			<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="progress_box">
			<view class="title">
				审批流程：
			</view>
			<view class="progress f-row aic">
				<view class="f-col aic ">
					<image class="avatar" src="" mode=""></image>
					<text>发起人</text>
				</view>
				<image class="line" src="../../static/line.png" mode=""></image>
				<view class="f-col aic">
					<image class="avatar" src="" mode=""></image>
					<text>部门领导</text>
				</view>
				<image class="line" src="../../static/line.png" mode=""></image>
				<view class="f-col aic">
					<image class="avatar" src="" mode=""></image>
					<text>人事部门</text>
				</view>
			</view>
		</view> -->
		<view class="btn f-col aic">
			<view @click="qjAdd">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		qjAddApi,
		startMutilProcessApi,
		getCategoryItemsApi
	} from '@/api/api.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 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 (!address.value.trim()) return proxy.$toast('请输入请假地点')
		if (!reason.value.trim()) return proxy.$toast('请输入请假事由')
		qjAddApi({
			username: store.userinfo.username,
			realname: store.userinfo.realname,
			phone: phone.value,
			type: type.value,
			begintime: beginTime.value,
			endtime: endTime.value,
			address: address.value,
			reason: reason.value
		}).then((res) => {
			if (res.success) {
				startMutilProcess(res.message)
			} else {
				proxy.$toast(res.message);
			}
		})
	}
	const startMutilProcess = (id) => {
		startMutilProcessApi({
			flowCode: "dev_cxc_qxj_zg_001",
			id,
			formUrl: "modules/zgqxj/modules/CxcZgqxjBpmModel",
			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
				console.log('--',res.result)
			}
		})

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

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