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