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 @change="bindPickerChangetype" :value="baseFormData.indextype" :range="baseFormData.submittype">
							<view class="uni-input">
								<template v-if="baseFormData.indextype==''">请选择</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="timestamp" v-model="baseFormData.startTime"/>
					</uni-forms-item>
					<view class="form-line"></view>
					<uni-forms-item label="结束时间" name="companyName" required>
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.endTime"/>
					</uni-forms-item>
					<view class="form-line"></view>
					<uni-forms-item label="申请部门" name="companyName" required>
						<picker @change="bindPickerChangetype" :value="baseFormData.indextype" :range="baseFormData.submittype">
							<view class="uni-input">
								<template v-if="baseFormData.indextype==''">请选择</template>
								<template v-else>{{baseFormData.submittype[baseFormData.indextype]}}</template>
								<text class="jiantou">〉</text>
							</view>
						</picker>
					</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="请输入备注" @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">提交</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">
					<text class="submit-title">{{item.title}}</text>
					<text class="submit-time">{{item.time}}</text>
					<view class="submit-line"></view>
					<view class="submit-start">开始时间：{{item.startT}}</view>
					<view class="submit-end">结束时间：{{item.endT}}</view>
					<view class="submit-teacher">换课老师：{{item.teacher}}</view>
					<view class="submit-remark">备注：{{item.remark}}</view>
					<view class="submit-type" v-if="item.type==0">审批通过</view>
					<view class="submit-type1" v-if="item.type==1">已拒绝</view>
					<view class="submit-type2" v-if="item.type==2">待审批</view>
				</view>

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

<script>
	export default {
		data() {
			return {
				liutype:true,//切换流程状态
				//表单数据
				baseFormData:{
					submittype:['住院医师','主任医师','副主任医师','主治医师'],//职称
					indextype:0,
					startTime:'',
					endTime:'',
					remark:'',//备注
				},
				textNum:0,
				// 校验规则
				rules: {
					indextype: {
						rules: [{
							required: true,
							errorMessage: '类型不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},
				// 提交记录 
				value: 0,
				zhuangtai: [
				  { value: 0, text: "篮球篮球" },
				  { value: 1, text: "足球" },
				  { value: 2, text: "游泳" },
				],
				value2: 0,
				TimeRanges: [
				  { value: 0, text: "近一周" },
				  { value: 1, text: "近一年" },
				  { value: 2, text: "近两年" },
				],
				submit:[
					{title:'换课申请',time:'2023.11.04  12:00',startT:'2023.11.04  12:00',endT:'2023.11.04  12:00',teacher:'李华',remark:'家中有事',type:'0'},
					{title:'换课申请',time:'2023.11.04  12:00',startT:'2023.11.04  12:00',endT:'2023.11.04  12:00',teacher:'李华',remark:'家中有事',type:'1'},
					{title:'换课申请',time:'2023.11.04  12:00',startT:'2023.11.04  12:00',endT:'2023.11.04  12:00',teacher:'李华',remark:'家中有事',type:'2'},
				]
			}
		},
		onLoad() {
			
		},
		mounted() {
			
		},
		methods: {
			//切换房型
			changeType(){
				this.liutype=!this.liutype
			},
			//修改类型
			bindPickerChangetype: function(e) {
				this.baseFormData.indextype=e.detail.value
			},
			//输入备注
			input(e){
				this.baseFormData.remark=e
			},
			// 提交记录
			// 选择审批状态
			changezhuang(e) {
			  console.log("e:", e);
			},
			// 选择时间
			changetime(e) {
			  console.log("e:", e);
			},
			// 跳转到详情页面
			clickDetail(){
				uni.navigateTo({
					url: "../liuchengO/detail/teach_detail"
				})
			}
		}
	}
</script>

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