ihotel-h5/pages/liuchengO/liu_other.vue

<template>
	<view class="content">
		<!-- 切换发起提交与提交记录 -->
		<view class="select-type" v-if="liutype" @click="changeType">
			<view class="allday">发起提交</view>
			<view class="hourday_no">提交记录</view>
		</view>
		<view class="select-type" v-else @click="changeType">
			<view class="allday2">发起提交</view>
			<view class="hourday_no2">提交记录</view>
		</view>
		<!-- 发起提交各选项表单 -->
		<view v-if="liutype">
			<view class="submit">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="baseFormData">
					<uni-forms-item label="类型" name="companyName" required>
						<!-- <picker :range="baseFormData.submittype"> -->
							<view class="uni-input" style="margin-right: 40px;color: black;">
								<template>临时人员</template>
								<!-- <template v-else>{{baseFormData.submittype[baseFormData.indextype]}}</template>
								<text class="jiantou">〉</text> -->
							</view>
						<!-- </picker> -->
					</uni-forms-item>
					<view class="form-line"></view>
					<uni-forms-item label="开始时间" name="companyName" required>
						<uni-datetime-picker type="dateTime" return-type="datetime" @change="changeStartTime" v-model="baseFormData.startTime" :start="baseFormData.mindate"/>
					</uni-forms-item>
					<view class="form-line"></view>
					<uni-forms-item label="结束时间" name="companyName" required>
						<uni-datetime-picker type="date" return-type="datetime" @change="changeEndTime" v-model="baseFormData.endTime" :start="baseFormData.mindate"/>
					</uni-forms-item>
					<view class="form-line"></view>
					<uni-forms-item label="申请部门" name="companyName" required>
						<view class="uni-input" style="margin-right: 40px;color: black;">
							<!-- <template v-if="baseFormData.indextype==null">请选择</template> -->
							<template>
								<template v-if="baseFormData.bumen=='0'">其他</template>
								<template v-if="baseFormData.bumen=='1'">学生</template>
								<template v-if="baseFormData.bumen=='4'">教职工</template>
								<template v-if="baseFormData.bumen=='5'">校友</template>
								<template v-if="baseFormData.bumen=='6'">访客</template>
								<template v-if="baseFormData.bumen=='7'">临时人员</template>
							</template>
							<!-- <text class="jiantou">〉</text> -->
						</view>
					</uni-forms-item>
					<view style="width: 750rpx;height: 20rpx;background-color: rgba(242, 243, 245, 1);margin-left: -20px;"></view>
					<uni-forms-item label="备注" name="companyName" required>
					</uni-forms-item>
					<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="请输入备注" maxlength="800" @input="input"></uni-easyinput>
					<text class="textsrea-txt">{{textNum}}/800</text>
					<view style="width:100%;height: 30px;"></view>
				</uni-forms>
			</view>
			<view class="submit_button" @click="submitshen">提交</view>
		</view>
		<!-- 提交记录 -->
		<view v-else>
			<view class="select_submit">
				<view style="width: 80px;margin-left: 9rpx;position: absolute;">
					<uni-data-select
						v-model="value"
						:localdata="zhuangtai"
						@change="changezhuang"
					  ></uni-data-select>
				</view>
				<view style="width: 80px;margin-left: 196rpx;">
					<uni-data-select
						v-model="value2"
						:localdata="TimeRanges"
						@change="changetime"
					  ></uni-data-select>
				</view>
				<!-- 不同状态的记录 -->
				<view class="submit-list" v-for="(item,index) in submit" :key="index" @click="clickDetail(item.id,item.department)">
					<text class="submit-title">临时人员</text>
					<text class="submit-time">{{item.submissionTime}}</text>
					<view class="submit-line"></view>
					<view class="submit-start">开始时间：{{item.startTime}}</view>
					<view class="submit-end">结束时间：{{item.endTime}}</view>
					<view class="submit-remark">备注：{{item.reasonApplication}}</view>
					<view class="submit-type1" v-if="item.status==0">已拒绝</view>
					<view class="submit-type1" v-if="item.status==1">待审批</view>
					<view class="submit-type2" v-if="item.status==2">处理中</view>
					<view class="submit-type" v-if="item.status==3">已同意</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		postLingshi,
		getOtherlist
	} from '../../utils/api_hotel.js'
	export default {
		data() {
			return {
				liutype:true,//切换流程状态
				//表单数据
				baseFormData:{
					startTime:'',
					endTime:'',
					mindate:new Date().toISOString().slice(0, 10),
					remark:'',//备注
					bumen:localStorage.getItem('department'),
				},
				textNum:0,
				// 校验规则
				rules: {
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},
				// 提交记录 
				value: '',
				zhuangtai: [
				  { value: 0, text: "已拒绝" },
				  { value: 1, text: "待审批" },
				  { value: 2, text: "处理中" },
				  { value: 3, text: "已同意" },
				  { value: '', text: "全部" },
				],
				value2: 2,
				TimeRanges: [
				  { value: 0, text: "近一周" },
				  { value: 1, text: "本月" },
				  { value: 2, text: "全部" },
				],
				submit:[],
				page:1,
				size:10,
				startTime:'',
				endTime:'',
				nowTime: new Date().toISOString().slice(0, 10),//当前日期2024-07-23
				totalCount:0,
			}
		},
		onLoad() {
		},
		mounted() {
			
		},
		methods: {
			//切换
			changeType(){
				this.liutype=!this.liutype
				if(this.liutype==false){
					this.getOtherlist()
				}
				
			},
			//输入备注
			input(e){
				this.baseFormData.remark=e
				this.textNum=e.length
			},
			changeStartTime(e){
				this.baseFormData.startTime=e
			},
			changeEndTime(e){
				this.baseFormData.endTime=e
			},
			//提交审核
			submitshen(){
				if(this.baseFormData.endTime<=this.baseFormData.startTime){
					uni.showToast({
						title: '开始时间不能大于结束时间',
						icon: 'error',
						duration: 1000
					})
					return
				}
				let _self = this
				this.$axios.defaults.headers.common['token'] = localStorage.getItem('token');
				this.$axios.defaults.headers.common['request_token'] = this.submitToken;
				this.$axios.defaults.headers.common['Content-Type'] ='application/json'
				var data={
					"usersId": localStorage.getItem('usersId'), //申请人id
					"startTime": this.baseFormData.startTime, //开始时间
					"endTime": this.baseFormData.endTime, //结束时间
					"department": localStorage.getItem('department'), //部门
					"reasonApplication": this.baseFormData.remark ,//申请原因
				}
				postLingshi(data).then((res) => {
					if (res.success) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 1000
						})
						this.liutype=false
						this.getOtherlist()
						// setTimeout(function() {
						// 	this.liutype=false
						// 	// uni.switchTab({
						// 	// 	url:'/pages/myself/myself'
						// 	// })
						// }, 2000);
					} else {
					}
				}).catch((err) => {
					uni.showToast({
						title: err.message
					})
				});
			},
			// 临时人员提交记录
			getOtherlist(){
				let _self = this
				// adminMenuId身份类型，4为教职工，7为临时人员localStorage.getItem('department')
				// 状态，0:已拒绝，1:待审批，2:处理中，3:已同意
				var data="?department="+localStorage.getItem('department')+"&userId=13"+"&startTime="+this.startTime+"&endTime="+this.endTime+"&status="+this.value+"&page="+this.page+"&size="+this.size
				getOtherlist(data).then((res) => {
					if (res.success) {
						this.totalCount=res.data.totalCount
						if (this.page == 1) {
							this.submit = res.data.list
						} else {
							this.submit = [...this.submit, ...res.data.list]
						}
						uni.stopPullDownRefresh();
						uni.hideLoading()
					} else {
						console.log('获取记录失败')
					}
				}).catch((err) => {
					uni.showToast({
						title: err.message
					})
				});
			},
			onReachBottom: function() {
				console.log('当前长度',this.submit.length,this.totalCount)
				
				if (this.submit.length < this.totalCount) {
					wx.showLoading({
					   title: '加载中...',
					 })
					this.page = this.page + 1;
					this.getOtherlist()
				} else {
					// uni.showToast({
					// 	title: '已经到底了',
					// 	icon: 'none'
					// })
				}
			},
			onPullDownRefresh: function() {
				this.page = 1;
				this.getOtherlist();
			},
			// 选择审批状态
			changezhuang(e) {
				this.value=e
				this.getOtherlist()
			},
			//获得本周的开始时间：
			getStartDayOfWeek(time) {
				let now = new Date(time); // 当前日期
				let nowDayOfWeek = now.getDay(); // 今天本周的第几天
				let day = nowDayOfWeek || 7;
				let nowDay = now.getDate(); // 当前日
				let nowMonth = now.getMonth(); // 当前月
				return this.formatDate(new Date(now.getFullYear(), nowMonth, nowDay + 1 - day));
			},
			//获得本周的结束时间：
			getEndDayOfWeek(time) {
				let now = new Date(time); // 当前日期
				let nowDayOfWeek = now.getDay(); // 今天本周的第几天
				let day = nowDayOfWeek || 7;
				let nowDay = now.getDate(); // 当前日
				let nowMonth = now.getMonth(); // 当前月
				return this.formatDate(new Date(now.getFullYear(), nowMonth, nowDay + 7 - day));
			},
			//获得本月的开始时间：
			getStartDayOfMonth(time) {
				let now = new Date(time); // 当前日期
				let nowDay = now.getDate(); // 当前日
				let nowMonth = now.getMonth(); // 当前月
				return this.formatDate(new Date(now.getFullYear(), nowMonth, 1));
			},
			// 日期格式化
			formatDate(date) {
				let myyear = date.getFullYear();
				let mymonth = date.getMonth() + 1;
				let myweekday = date.getDate();
				if (mymonth < 10) {
					mymonth = '0' + mymonth;
				}
				if (myweekday < 10) {
					myweekday = '0' + myweekday;
				}
				return (myyear + '-' + mymonth + '-' + myweekday);
			},
			// 选择时间
			changetime(e) {
			    this.value2=e
				if(this.value2==0){
					this.startTime=this.getStartDayOfWeek(this.nowTime).slice(0, 10)+' 00:00:00'
					this.endTime=this.getEndDayOfWeek(this.nowTime).slice(0, 10)+' 23:59:59'
				}else if(this.value2==1){
					this.startTime=this.getStartDayOfMonth(this.nowTime).slice(0, 10)+' 00:00:00'
					this.endTime=this.nowTime+' 23:59:59'
				}else if(this.value2==2){
					this.startTime=''
					this.endTime=''
				}
				this.getOtherlist()
			},
			// 跳转到详情页面
			clickDetail(id,department){
				uni.navigateTo({
					url: "../liuchengO/detail/teach_detail?id="+id+"&department="+department
				})
			}
		}
	}
</script>

<style>
	@import url("./css/liu_other.css");
</style>