hs_hzl_uniapp_ml/pageA/psq/dayForm.vue

<template>
	<view class="wrapper" style="padding: 30px">
		<div class="header">
			<div>
				<h2 v-if="!isOffDuty">每日上岗</h2>
			</div>
			<div style="position: absolute;padding: 5px 20px;font-size: 15px;color: rgba(0,0,0,0.39);
      right: 10px;top:10px;border: 1px solid rgba(0,0,0,0.39);border-radius: 10px">
				<span>{{form.orgName}}</span>
			</div>
		</div>
		<view class="main">
			<view>
				<text class="u-block__title" style="font-size: 18px;">{{1+'.'+text[0].label}}</text>
				<view class="u-demo-block__content" style="padding: 15px;">
					<view class="u-page__radio-item">
						<u-radio-group v-model="form.queResults[0]" placement="column" activeColor="#73a6a4">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in text[0].resultList"
								:key="item.id" :label="item.value" :name="item.value" size="25">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view>
				</view>
				<view class="uni-list" v-if="form.queResults[0] === '是'">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							<span style="font-size: 16px;color: #acacac;">
								开始时间：
							</span>
						</view>
						<view class="uni-list-cell-db">
							<view class="example-body">
								<uni-datetime-picker type="datetime" :border="false" :clear-icon="false"
									return-type="timestamp" :start="Date.now()" v-model="form.vacateStartTime" />
							</view>
							<!-- <picker mode="date" :value="form.vacateStartTime" :start="startDate" :end="endDate"
								@change="bindStartDateChange">
								<view class="uni-input">{{form.vacateStartTime}}</view>
							</picker> -->
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							<span style="font-size: 16px;color: #acacac;">
								结束时间：
							</span>
						</view>
						<view class="uni-list-cell-db">
							<view class="example-body">
								<uni-datetime-picker type="datetime" :border="false" :clear-icon="false"
									return-type="timestamp" :start="Date.now()" v-model="form.vacateEndTime" />
							</view>
							<!-- <picker mode="date" :value="form.vacateEndTime" :start="startDate" :end="endDate"
								@change="bindEndDateChange">
								<view class="uni-input">{{form.vacateEndTime}}</view>
							</picker> -->
						</view>
					</view>
				</view>
			</view>
			<view>
				<text class="u-block__title" style="font-size: 18px;">{{1+'.'+text[1 ].label}}</text>
				<view class="u-demo-block__content" style="padding: 15px;">
					<view class="u-page__radio-item">
						<u-radio-group v-model="form.queResults[1]" placement="column" activeColor="#73a6a4">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in text[1].resultList"
								:key="item.id" :label="item.value" :name="item.value" size="25">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view>
				<text class="u-block__title" style="font-size: 18px;">{{1+'.'+text[2].label}}</text>
				<view class="u-demo-block__content" style="padding: 15px;">
					<view class="u-page__radio-item">
						<u-radio-group v-model="form.queResults[2]" placement="column" activeColor="#73a6a4">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in text[2].resultList"
								:key="item.id" :label="item.value" :name="item.value" size="25">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
		<view>
			<u-button v-if="!isOffDuty" type="success" @click="submit" color="#73a6a4" :disabled="disabled">
				上班提交
			</u-button>
			<view v-if="isOffDuty" style="">
				<u-text text="说明:"></u-text>
				<view style="border: 1px solid #d5d5d5; margin:5px 0 50px 0;">
					<u-textarea v-model="form.remark" placeholder="请输入内容" count></u-textarea>
				</view>
				<u-button style="font-size: 24px;" type="success" @click="submit" color="#73a6a4" :disabled="disabled">
					下班打卡
				</u-button>
			</view>
		</view>
		<view class="uni-fixed-bottom">
			<div style="margin-bottom: 5px;">
				<u-row>
					<u-col span="5">
						<u-text text="技术支持：会山科技" color="#cacaca">
						</u-text>
					</u-col>
					<u-col span="2">
						<div></div>
					</u-col>
					<u-col span="5">
						<u-text text="hs@willalp.com" color="#cacaca">
						</u-text>
					</u-col>
				</u-row>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		name: "form",
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				text: [{
					"id": "1509390250483634177",
					"label": "是否请假",
					"prop": "queResultText1",
					"resultList": [{
							"value": "是",
							"id": "1"
						},
						{
							"value": "否",
							"id": "2"
						}
					]
				}, {
					"id": "1519272021753278466",
					"label": "是否晚班",
					"prop": "queResultText2",
					"resultList": [{
							"value": "是",
							"id": "1"
						},
						{
							"value": "否",
							"id": "2"
						}
					]
				}, {
					"id": "1523961554814062594",
					"label": "是否被管控",
					"prop": "queResultText3",
					"resultList": [{
							"value": "是",
							"id": "1"
						},
						{
							"value": "否",
							"id": "2"
						}
					]
				}],
				queDbList: [],
				disabled: false,
				isOffDuty: false,
				form: {
					userName: '',
					userNo: '',
					orgNo: '',
					orgName: '',
					clockInType: 0,
					vacateStartTime: '',
					vacateEndTime: '',
					remark: '',
					queResults: [],
					ques: []
				}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			const orgInfo = uni.getStorageSync('orgInfo');
			this.form.userName = userInfo.nickName
			this.form.userNo = userInfo.userName
			this.form.orgNo = orgInfo.organizationCode
			this.form.orgName = orgInfo.organizationName
			//是否打卡
			this.isClockingIn()
		},
		created() {
			this.getList()
		},
		methods: {
			bindStartDateChange: function(e) {
				this.form.vacateStartTime = e.detail.value
			},
			bindEndDateChange: function(e) {
				this.form.vacateEndTime = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async getQueList() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/yq/list?queGroupId=' + 2,
					method: 'get',
				})
				if (res.code == 200) {
					this.queDbList = res.data
					this.queDbList.forEach(q => {
						this.form.ques.push(q.id)
					})
				} else {

				}
			},
			async save() {
				const {
					data: res
				} = await this.$httpRequest({
					method: 'POST',
					url: '/api/ci/clocking/in',
					data: this.form
				})
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
					setTimeout(() => {
						location.reload()
					}, 1000)
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			async isClockingIn() {
				const {
					data: res
				} = await this.$httpRequest({
					method: 'POST',
					url: '/api/ci/clocking/info',
					data: this.form
				})
				if (res.code == 200) {
					if (undefined !== res.data) {
						console.log("not null")
						this.isOffDuty = true
						this.form.clockInType = 5
					}
				} else {

				}
			},
			getList() {
				this.getQueList();
			},
			submit() {
				this.disabled = true
				console.log(this.form.vacateStartTime)
				if (this.form.vacateStartTime > this.form.vacateEndTime) {
					uni.showToast({
						title: '结束时间小于开始时间',
						icon: 'none'
					})
					this.disabled = false
					return;
				}
				this.save()
				setTimeout(() => {
					this.disabled = false
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.header {
		flex: 0;
		margin-top: 20px;
	}

	.main {
		flex: 1;
		margin: 20px 0;
	}

	.footer {
		flex: 0;
	}


	.uni-fixed-bottom {
		width: 100%;
		bottom: 0upx;
		padding: 0upx;
		position: fixed;
		background: #FFFFFF;
		transform: translateZ(0);
		bottom: env(safe-area-inset-bottom);
		bottom: constant(safe-area-inset-bottom);
	}

	.u-page {
		&__style {
			font-size: 16px;
			color: rgb(96, 98, 102);
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		&__title {
			font-size: 16px;
			color: rgb(96, 98, 102);
			margin-bottom: 20rpx;
		}
	}
</style>