384 lines
9.9 KiB
Vue
384 lines
9.9 KiB
Vue
<template>
|
||
<view class="container" style="padding-bottom: 60px;">
|
||
<!--学号 -->
|
||
<view class="form-item">
|
||
<text class="label">学号：</text>
|
||
<input v-model="studID" class="uni-input" focus placeholder="请输入学号" />
|
||
</view>
|
||
<!--姓名 -->
|
||
<view class="form-item">
|
||
<text class="label">姓名：</text>
|
||
<input v-model="name" class="uni-input" focus placeholder="请输入姓名" />
|
||
</view>
|
||
<!-- 性别 -->
|
||
<view class="form-item">
|
||
<text class="label">性别</text>
|
||
<picker :range="options" v-model="selectedOptionIndex" @change="onPickerChange">
|
||
<view class="select">{{ options[selectedOptionIndex] || '性别' }} </view>
|
||
</picker>
|
||
</view>
|
||
<!--院部 -->
|
||
<view class="form-item">
|
||
<text class="label">院部：</text>
|
||
<input v-model="courtyard" class="uni-input" focus placeholder="请输入院部" />
|
||
</view>
|
||
<!--班级 -->
|
||
<view class="form-item">
|
||
<text class="label">班级 ：</text>
|
||
<input v-model="classroom" class="uni-input" focus placeholder="请输入班级 " />
|
||
</view>
|
||
<!--联系电话 -->
|
||
<view class="form-item">
|
||
<text class="label">联系电话 ：</text>
|
||
<input v-model="phone" class="uni-input" focus placeholder="请输入联系电话 " />
|
||
</view>
|
||
<!--家长姓名 -->
|
||
<view class="form-item">
|
||
<text class="label">家长姓名：</text>
|
||
<input v-model="parent" class="uni-input" focus placeholder="请输入家长姓名 " />
|
||
</view>
|
||
<!--家长联系电话 -->
|
||
<view class="form-item">
|
||
<text class="label">联系电话：</text>
|
||
<input v-model="parentPhone" class="uni-input" focus placeholder="请输入联系电话 " />
|
||
</view>
|
||
<!-- 请假事由 -->
|
||
<view class="form-item">
|
||
<text class="label">请假事由：</text>
|
||
<picker :range="politicalOptions" v-model="selectedPoliticalIndex" @change="onPoliticalChange">
|
||
<view class="select">{{ politicalOptions[selectedPoliticalIndex] || '请选择请假事由' }}</view>
|
||
</picker>
|
||
</view>
|
||
<!-- 请假事由说明 -->
|
||
<view class="form-text">
|
||
<text class="label">请假事由说明：</text>
|
||
<view class="txt">
|
||
<uni-forms-item>
|
||
<uni-easyinput type="textarea" v-model="deeds" maxlength="500" placeholder="输入请假事由说明" />
|
||
</uni-forms-item>
|
||
</view>
|
||
</view>
|
||
<!-- 请假时间 -->
|
||
<view class="form-item"> <!-- 根据选择的申请类型来决定是否显示 -->
|
||
<text class="label">请假起始时间：</text>
|
||
|
||
<view class="example-body">
|
||
<uni-datetime-picker type="date" :clear-icon="false" v-model="beginData" @maskClick="maskClick"
|
||
:border="false" />
|
||
</view>
|
||
</view>
|
||
<view class="form-item"> <!-- 根据选择的申请类型来决定是否显示 -->
|
||
<text class="label">请假截至时间：</text>
|
||
<view class="example-body">
|
||
<uni-datetime-picker type="date" :clear-icon="false" v-model="endData" @maskClick="maskClick"
|
||
:border="false" />
|
||
</view>
|
||
</view>
|
||
<!--请假天数 -->
|
||
<view class="form-item">
|
||
<text class="label">请假天数：</text>
|
||
<input v-model="dataNum" class="uni-input" focus placeholder="请输入请假天数 " />
|
||
</view>
|
||
<!-- 上传佐证 -->
|
||
<view class="form-img">
|
||
<text class="label">上传佐证：</text>
|
||
<view class="example-body">
|
||
<uni-file-picker limit="9" title=""></uni-file-picker>
|
||
</view>
|
||
</view>
|
||
<!-- 是否离桂 -->
|
||
<view class="form-item">
|
||
<text class="label">是否离桂（广西）：</text>
|
||
<picker :range="leave" v-model="leaveIndex" @change="onleaveChange">
|
||
<view class="select">{{ leave[leaveIndex] || '请选择是否离桂' }}</view>
|
||
</picker>
|
||
</view>
|
||
<!-- 目的地 -->
|
||
<!-- <view class="form-address">
|
||
|
||
<view class="example-body">
|
||
<complex-picker-region label="目的地址" clear-icon="false" @confirm='confirm' />
|
||
</view>
|
||
</view> -->
|
||
<!--详细地址 -->
|
||
<view class="form-item">
|
||
<text class="label">详细地址：</text>
|
||
<input v-model="address" class="uni-input" focus placeholder="请输入详细地址 " />
|
||
</view>
|
||
<!--协议 -->
|
||
<view class="form-item">
|
||
<text class="labelsafe">《广西水利电力职业技术学院安全承诺书》
|
||
</text>
|
||
<label>
|
||
<checkbox :value="isChecked.toString()" @click="toggleCheckbox" />
|
||
</label>
|
||
</view>
|
||
<!-- 签名 -->
|
||
<view class="form-canvas">
|
||
<text class="label">签名：</text>
|
||
<!-- <liu-signature @change="change" bgColor="#e8e8e8" lineColor="#000" :width="700"></liu-signature>
|
||
<image class="success-img" :src="url" @click="previewImg(url)"></image> -->
|
||
<liu-signature @change="change" bgColor="#e8e8e8" lineColor="#000" :width="700"></liu-signature>
|
||
<image class="success-img" :src="url" @click="previewImg(url)"></image>
|
||
</view>
|
||
<!-- 按钮 -->
|
||
<view class="btn">
|
||
<button style="background-color: red;" @click="clean">清除</button>
|
||
<button style="background-color: whitesmoke; color: black;" @click="save">保存</button>
|
||
<button>提交申请</button>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
studID: "",
|
||
name: "",
|
||
courtyard: "",
|
||
options: ['男', '女'],
|
||
classroom: "",
|
||
phone: "",
|
||
parent: "",
|
||
parentPhone: "",
|
||
selectedOptionIndex: -1, // 当前选中的奖项索引
|
||
politicalOptions: ['因病', '因事'], // 请假选项
|
||
selectedPoliticalIndex: -1, // 当前选中的请假索引
|
||
beginData: '',
|
||
endData: "",
|
||
dataNum: "",
|
||
deeds: "",
|
||
leave: ['是', '否'],
|
||
leaveIndex: -1,
|
||
address: "",
|
||
url: "",
|
||
isChecked: false,
|
||
// 签名
|
||
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
// 在组件挂载时尝试从本地存储中加载已保存的数据
|
||
this.loadFormData();
|
||
|
||
|
||
},
|
||
methods: {
|
||
change(e) {
|
||
console.log('生成的图片:', e)
|
||
this.url = e
|
||
},
|
||
//预览图片
|
||
previewImg(url) {
|
||
if (!url) return
|
||
let list = [url]
|
||
uni.previewImage({
|
||
urls: list
|
||
})
|
||
},
|
||
onPickerChange(event) {
|
||
this.selectedOptionIndex = event.detail.value;
|
||
},
|
||
//
|
||
onPoliticalChange(event) {
|
||
this.selectedPoliticalIndex = event.detail.value;
|
||
},
|
||
// 是否离桂
|
||
|
||
onleaveChange(event) {
|
||
this.leaveIndex = event.detail.value;
|
||
},
|
||
confirm(selectData) {
|
||
console.log('selectData', selectData);
|
||
},
|
||
toggleCheckbox() {
|
||
this.isChecked = !this.isChecked; // 切换选中状态
|
||
},
|
||
// 清空表单
|
||
clean() {
|
||
this.studID = "";
|
||
this.name = "";
|
||
this.courtyard = "";
|
||
this.selectedOptionIndex = -1;
|
||
this.classroom = '';
|
||
this.phone = '';
|
||
this.parent = '';
|
||
this.parentPhone = "";
|
||
this.selectedPoliticalIndex = -1
|
||
this.beginData = "";
|
||
this.endData = '';
|
||
this.dataNum = '';
|
||
this.deeds = '';
|
||
this.leaveIndex = -1;
|
||
this.address = '';
|
||
this.isChecked = false;
|
||
this.$forceUpdate(); // 强制更新组件
|
||
this.url = ''
|
||
localStorage.removeItem('formData');
|
||
},
|
||
save() {
|
||
// 构造数据对象
|
||
const formData = {
|
||
studID: this.studID,
|
||
name: this.name,
|
||
courtyard: this.courtyard,
|
||
classroom: this.classroom,
|
||
phone: this.phone,
|
||
parent: this.parent,
|
||
parentPhone: this.parentPhone,
|
||
beginData: this.beginData,
|
||
endData: this.endData,
|
||
beginData: this.beginData,
|
||
dataNum: this.dataNum,
|
||
deeds: this.deeds,
|
||
address: this.address,
|
||
url: this.url,
|
||
because: this.politicalOptions[this.selectedPoliticalIndex],
|
||
gender: this.options[this.selectedOptionIndex], // 获取选中的性别
|
||
leave: this.leave[this.leaveIndex]
|
||
// 其他表单项...
|
||
};
|
||
|
||
// 将表单数据保存到本地存储
|
||
localStorage.setItem('formData', JSON.stringify(formData));
|
||
|
||
console.log("保存的表单数据：", formData);
|
||
},
|
||
loadFormData() {
|
||
// 尝试从本地存储中加载已保存的表单数据
|
||
const savedData = localStorage.getItem('formData');
|
||
if (savedData) {
|
||
const formData = JSON.parse(savedData);
|
||
// 将加载的数据填充到表单中
|
||
this.studID = formData.studID;
|
||
this.name = formData.name;
|
||
this.courtyard = formData.courtyard;
|
||
this.classroom = formData.classroom;
|
||
this.phone = formData.phone;
|
||
this.parent = formData.parent;
|
||
this.parentPhone = formData.parentPhone;
|
||
this.beginDatabeginData = formData.beginData;
|
||
this.dataNum = formData.dataNum;
|
||
this.deeds = formData.deeds;
|
||
this.url = formData.url;
|
||
// 如果性别存在于选项中，则设置其索引
|
||
this.selectedOptionIndex = this.options.indexOf(formData.gender);
|
||
this.selectedPoliticalIndex = this.politicalOptions.indexOf(formData.because);
|
||
this.leaveIndex = this.leave.indexOf(formData.leave);
|
||
// 其他表单项...
|
||
}
|
||
}
|
||
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
|
||
}
|
||
|
||
.form-item {
|
||
width: 95%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ededee;
|
||
}
|
||
|
||
.form-text {
|
||
width: 95%;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1px solid #ededee;
|
||
}
|
||
|
||
.form-img {
|
||
width: 95%;
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1px solid #ededee;
|
||
}
|
||
|
||
.example-body {
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.txt {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.label {
|
||
text-align: right;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.select {
|
||
color: #888889;
|
||
white-space: nowrap;
|
||
/* 防止换行 */
|
||
overflow: hidden;
|
||
/* 隐藏溢出部分 */
|
||
text-overflow: ellipsis;
|
||
/* 显示省略号 */
|
||
}
|
||
|
||
.uni-input {
|
||
color: #888889;
|
||
text-align: right;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 0;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
button {
|
||
width: 30%;
|
||
background-color: #87CEFA;
|
||
color: white;
|
||
}
|
||
|
||
.form-address {
|
||
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.labelsafe {
|
||
color: red;
|
||
}
|
||
|
||
.form-canvas {
|
||
width: 95%;
|
||
height: 700rpx;
|
||
}
|
||
|
||
.tab-box {
|
||
width: 80%;
|
||
height: 100vh;
|
||
background-color: #f0f0f0;
|
||
}
|
||
.success-img {
|
||
width: 90%;
|
||
height: 300rpx;
|
||
|
||
}
|
||
</style> |