外宿申请移动端申请完成
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user