外宿申请移动端申请完成

This commit is contained in:
2025-12-19 11:42:11 +08:00
parent bc78f7d2dd
commit 68c06f273b
3 changed files with 264 additions and 186 deletions

View File

@@ -9,7 +9,7 @@
<!-- 表单主体容器 -->
<view class="main-container">
<!-- 选项卡容器 - 原生选项卡 -->
<view class="tabs-container">
<view class="tabs-container" id="tabs">
<view class="tabs-header">
<!-- 详情模式下禁用选项卡切换 -->
<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
@@ -37,7 +37,7 @@
</view>
<!-- 表单内容区域 -->
<scroll-view scroll-y class="form-scroll" :style="{ height: formScrollHeight }">
<scroll-view scroll-y class="form-scroll" :style="{ height: formScrollHeight }" id="form-scroll">
<view class="form-wrapper">
<!-- 1. 基本信息标签页 -->
<view v-show="activeTab === 0" class="tab-panel">
@@ -46,13 +46,14 @@
<view class="form-item">
<label class="form-label">原宿舍号</label>
<!-- 详情模式下禁用输入框 -->
<input v-model="form.originalDormitory" placeholder="如1栋302"
class="form-input" :disabled="isDetailMode"></input>
<input v-model="form.originalDormitory" placeholder="如1栋302" class="form-input"
:disabled="isDetailMode"></input>
</view>
<view class="form-item">
<label class="form-label">姓名</label>
<input v-model="form.studentName" placeholder="请输入姓名" class="form-input" :disabled="isDetailMode"></input>
<input v-model="form.studentName" placeholder="请输入姓名" class="form-input"
:disabled="isDetailMode"></input>
</view>
<view class="form-item">
@@ -68,7 +69,8 @@
<view class="form-item">
<label class="form-label">出生年月</label>
<picker mode="date" :value="form.birthDate" @change="handleBirthDateChange" :disabled="isDetailMode">
<picker mode="date" :value="form.birthDate" @change="handleBirthDateChange"
:disabled="isDetailMode">
<view class="picker-input">
{{ form.birthDate || '请选择出生年月' }}
</view>
@@ -77,22 +79,26 @@
<view class="form-item">
<label class="form-label">专业系</label>
<input v-model="form.majorName" placeholder="请输入专业系" class="form-input" :disabled="isDetailMode"></input>
<input v-model="form.majorName" placeholder="请输入专业系" class="form-input"
:disabled="isDetailMode"></input>
</view>
<view class="form-item">
<label class="form-label">班级</label>
<input v-model="form.className" placeholder="请输入班级" class="form-input" :disabled="isDetailMode"></input>
<input v-model="form.className" placeholder="请输入班级" class="form-input"
:disabled="isDetailMode"></input>
</view>
<view class="form-item">
<label class="form-label">学号</label>
<input v-model="form.studentNo" placeholder="请输入学号" class="form-input" :disabled="isDetailMode"></input>
<input v-model="form.studentNo" placeholder="请输入学号" class="form-input"
:disabled="isDetailMode"></input>
</view>
<view class="form-item">
<label class="form-label">身份证号码</label>
<input v-model="form.idCard" placeholder="请输入身份证号码" class="form-input" :disabled="isDetailMode"></input>
<input v-model="form.idCard" placeholder="请输入身份证号码" class="form-input"
:disabled="isDetailMode"></input>
</view>
<view class="form-item">
@@ -127,12 +133,13 @@
</view>
<view class="file-list" v-if="affixFiles.length">
<view class="file-item" v-for="(file, index) in affixFiles" :key="index">
<text class="file-name" @click="previewImage(baseUrl + file.savePath)">{{ file.attachmentName || file.trueName }}</text>
<text class="file-name"
@click="previewImage(baseUrl + file.savePath)">{{ file.attachmentName || file.trueName }}</text>
<!-- 详情模式下禁用删除按钮 -->
<!-- <button size="mini" type="warn" @click="deleteAffixFile(index)" v-if="!isDetailMode"
class="delete-btn" :disabled="isDetailMode">删除</button> -->
<uni-icons type="trash-filled" size="30" @click="deleteAffixFile(index)" v-if="!isDetailMode"
class="delete-btn"></uni-icons>
<uni-icons type="trash-filled" size="30" @click="deleteAffixFile(index)"
v-if="!isDetailMode" class="delete-btn"></uni-icons>
</view>
</view>
<!-- <uni-file-picker :auto-upload="false" @select="chooseAffixFile" @delete="deleteAffixFile"></uni-file-picker> -->
@@ -143,8 +150,9 @@
<label class="form-label">电子签名</label>
<view class="signature-container">
<!-- 详情模式下隐藏签名按钮 -->
<button size="mini" type="primary" @click="!isDetailMode && openSignature('student')"
class="sign-btn" v-if="!isDetailMode">
<button size="mini" type="primary"
@click="!isDetailMode && openSignature('student')" class="sign-btn"
v-if="!isDetailMode">
签署电子签名
</button>
<image v-if="form.studentSignature" :src="baseUrl + form.studentSignature"
@@ -163,7 +171,8 @@
<view class="form-item">
<label class="form-label">外宿地区</label>
<!-- 详情模式下禁用省市区选择器 -->
<view class="area-picker" @click="!isDetailMode && (showAreaPicker = true)" :class="{disabled: isDetailMode}">
<view class="area-picker" @click="!isDetailMode && (showAreaPicker = true)"
:class="{disabled: isDetailMode}">
<text class="picker-text">{{ areaText || '请选择省/市/区' }}</text>
<uni-icons type="arrowright" size="16" color="#999" class="picker-icon"></uni-icons>
</view>
@@ -177,8 +186,8 @@
<view class="form-item">
<label class="form-label">紧急联系人</label>
<input v-model="form.emergencyContact" placeholder="请输入紧急联系人姓名"
class="form-input" :disabled="isDetailMode"></input>
<input v-model="form.emergencyContact" placeholder="请输入紧急联系人姓名" class="form-input"
:disabled="isDetailMode"></input>
</view>
<view class="form-item">
@@ -197,7 +206,8 @@
<label class="form-label">家长意见</label>
<!-- 详情模式下禁用选择器 -->
<picker mode="selector" :range="parentOpinionOptions" :range-key="'text'"
v-model="form.parentOpinion" @change="handleParentOpinionChange" :disabled="isDetailMode">
v-model="form.parentOpinion" @change="handleParentOpinionChange"
:disabled="isDetailMode">
<view class="picker-input">
{{ form.parentOpinion ? getParentOpinionText(form.parentOpinion) : '请选择家长意见' }}
</view>
@@ -227,7 +237,8 @@
<view class="form-item">
<label class="form-label">家长通讯地区</label>
<!-- 详情模式下禁用省市区选择器 -->
<view class="area-picker" @click="!isDetailMode && (showParentAreaPicker = true)" :class="{disabled: isDetailMode}">
<view class="area-picker" @click="!isDetailMode && (showParentAreaPicker = true)"
:class="{disabled: isDetailMode}">
<text class="picker-text">{{ parentAreaText || '请选择省/市/区' }}</text>
<uni-icons type="arrowright" size="16" color="#999" class="picker-icon"></uni-icons>
</view>
@@ -235,8 +246,8 @@
<view class="form-item">
<label class="form-label">家长详细地址</label>
<input v-model="form.parentDetailAddress" placeholder="请输入家长详细通讯地址"
class="form-input" :disabled="isDetailMode"></input>
<input v-model="form.parentDetailAddress" placeholder="请输入家长详细通讯地址" class="form-input"
:disabled="isDetailMode"></input>
</view>
</view>
</view>
@@ -259,8 +270,9 @@
<label class="form-label">承诺签名</label>
<view class="signature-container">
<!-- 详情模式下隐藏签名按钮 -->
<button size="mini" type="primary" @click="!isDetailMode && openSignature('promise')"
class="sign-btn" v-if="!isDetailMode">
<button size="mini" type="primary"
@click="!isDetailMode && openSignature('promise')" class="sign-btn"
v-if="!isDetailMode">
签署承诺签名
</button>
<image v-if="form.studentPromiseSign" :src="baseUrl + form.studentPromiseSign"
@@ -269,7 +281,8 @@
<view class="date-item">
<label class="form-label">签署日期</label>
<!-- 详情模式下禁用日期选择器 -->
<picker mode="date" :value="form.promiseDate" @change="handlePromiseDateChange" :disabled="isDetailMode">
<picker mode="date" :value="form.promiseDate" @change="handlePromiseDateChange"
:disabled="isDetailMode">
<view class="picker-input">
{{ form.promiseDate || '请选择签署日期' }}
</view>
@@ -287,7 +300,7 @@
<uni-icons type="folder" size="16"></uni-icons> 保存
</button>
<button type="primary" @click="submitForm(1)" class="submit-btn submit-primary"
v-if="form.status == 0">
v-if="form.status == 0 || form.processInstanceId == ''">
<uni-icons type="checkmark" size="16"></uni-icons> 提交申请
</button>
<button type="default" @click="resetForm" class="reset-btn" v-if="!currentId">
@@ -410,7 +423,8 @@
} from "@/utils/checkPic.js";
import uploadFile from "@/plugins/upload.js";
import {
getAffixItems, deleteAffix
getAffixItems,
deleteAffix
} from "@/api/affix.js";
export default {
name: 'OutsideAccommodationApply',
@@ -502,6 +516,7 @@
// 文件上传相关
affixFiles: [],
parentSignFiles: "",
reasonFileList: [],
// 页面状态
currentId: null,
loading: false,
@@ -514,7 +529,7 @@
onLoad(options) {
// 新增:判断是否为详情模式(核心逻辑)
this.isDetailMode = options.type === 'detail';
// 1. 初始化省市区数据
this.initAreaData();
// 2. 初始化页面高度
@@ -917,8 +932,9 @@
if (!isDuplicate) {
this.affixFiles.push(fileInfo);
this.reasonFileList.push(fileInfo)
}
console.log(this.affixFiles);
// console.log(this.affixFiles);
uni.showToast({
title: `文件 ${file.name} 上传成功`,
icon: 'success',
@@ -957,7 +973,7 @@
const deletedFile = this.affixFiles[index];
this.affixFiles.splice(index, 1);
// this.form.affixId = this.affixFiles.length ? 'uploaded' : '';
let fileId = deletedFile.id || deletedFile.fileId
let fileId = deletedFile.id || deletedFile.fileId
deleteAffix(fileId).then(() => {
deleteOutsideAccommodationAttachmentNameAndStuName({
attachmentName: deletedFile.trueName || deletedFile.attachmentName,
@@ -974,7 +990,7 @@
});
});
})
},
// 家长附件上传
handleUpload() {
@@ -1026,9 +1042,9 @@
// url: this.baseUrl + this.form.parentSignAttachment
// }];
// }
this.getAffixs(this.form.affixId)
this.getAffixs(this.form.affixId)
this.setFormScroll()
this.loading = false;
}).catch(() => {
this.loading = false;
@@ -1038,6 +1054,16 @@
});
});
},
// 计算表单内容顶部外边距
setFormScroll() {
// 获取搜索框元素高度
let tabs = document.getElementById("tabs")
// 获取列表内容元素
let formScroll = document.getElementById("form-scroll")
// 设置列表内容的顶部外边距,让内容不被搜索框遮挡
formScroll.style.marginTop = `${tabs.offsetHeight}px`
console.log(formScroll.style.marginTop);
},
getUser() {
this.loading = true;
getUserProfile().then((response) => {
@@ -1045,7 +1071,7 @@
if (response.data) {
this.form.studentName = response.data.nickName;
this.form.gender = response.data.sex || '';
this.setFormScroll()
getOwnInfo().then((res) => {
if (res.data) {
this.form.studentId = res.data.stuId;
@@ -1143,11 +1169,11 @@
},
// 获取上传的附件数据
getAffixs(affix) {
getAffixItems({
affixId: affix
}).then(file => {
this.affixFiles = file.data;
})
getAffixItems({
affixId: affix
}).then(file => {
this.affixFiles = file.data;
})
},
submitForm(status) {
// 定义英文字段名和中文提示的映射关系
@@ -1189,6 +1215,36 @@
return;
}
// 定义手机号正则表达式11位数字以1开头
const phoneReg = /^1[3-9]\d{9}$/;
// 校验学生手机号码格式
if (!phoneReg.test(this.form.studentPhone)) {
uni.showToast({
title: '请填写正确的手机号码',
icon: 'none'
});
return;
}
// 校验家长手机号码
if (!phoneReg.test(this.form.parentPhone)) {
uni.showToast({
title: '请填写正确的家长手机号码',
icon: 'none'
});
return;
}
// 校验紧急联系人电话
if (!phoneReg.test(this.form.emergencyPhone)) {
uni.showToast({
title: '请填写正确的紧急联系电话',
icon: 'none'
});
return;
}
if (!this.form.studentSignature) {
uni.showToast({
title: '请完成电子签名',
@@ -1245,11 +1301,11 @@
addOutsideAccommodationApply(submitForm);
requestPromise.then((response) => {
if (this.affixFiles.length > 0) {
this.affixFiles.forEach(item => {
if (this.reasonFileList.length > 0) {
this.reasonFileList.forEach(item => {
item.applyId = this.form.id || response.data.id;
});
batchAddOutsideAccommodationAttachment(this.affixFiles);
batchAddOutsideAccommodationAttachment(this.reasonFileList);
}
uni.showToast({
@@ -1378,6 +1434,10 @@
width: 100%;
background-color: #fff;
border-bottom: 1px solid #e8eaec;
position: fixed;
left: 0;
right: 0;
z-index: 100;
}
.tabs-header {
@@ -1597,7 +1657,7 @@
.area-picker:active {
border-color: #409EFF;
}
/* 新增:禁用状态样式(可选) */
.area-picker.disabled {
opacity: 0.7;