xgxt_sd/zhxg_app
18
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

外宿申请和入伍保留学籍申请移动端审批（同意的流程）完成

Browse Source
This commit is contained in:
陈
2025-12-19 17:58:09 +08:00
parent 8246da4f48
commit 8fb02b0d5d
8 changed files with 2198 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

774
pages/Approval/handleTask/processHandling/components/outsideAccommodation.vue Normal file
View File

@@ -0,0 +1,774 @@
<template>
<view class="container">
<!-- 主内容区 -->
<scroll-view class="content-scroll" scroll-y enhanced :show-scrollbar="false">
<!-- 申请概览（顶部卡片） -->
<view class="card overview-card">
<view class="overview-header">
<view class="overview-left">
<text class="apply-no">申请编号：{{ form.applyNo || '-' }}</text>
<text class="student-name">{{ form.studentName || '-' }} {{ form.studentNo || '-' }}</text>
</view>
<view class="status-tag" :class="getStatusClass(form.status)">
{{ getStatusText(form.status) }}
</view>
</view>
<view class="overview-info">
<view class="overview-item">
<text class="info-label">申请时间</text>
<text class="info-value">{{ formatDate(form.createTime) || '-' }}</text>
</view>
<view class="overview-item">
<text class="info-label">外宿周期</text>
<text class="info-value">{{ formatDate(form.startDate) || '-' }} 至 {{ formatDate(form.endDate) || '-' }}</text>
</view>
<view class="overview-item">
<text class="info-label">状态有效性：</text>
<text class="info-value" :class="form.isValid == 1 ? 'text-success' : 'text-danger'">
{{ form.isValid == 1 ? '有效' : '到期' }}
</text>
</view>
</view>
</view>
<!-- 学生基础信息 -->
<view class="card">
<view class="card-header">
<uni-icons type="contact" size="24" color="#409EFF"></uni-icons>
<text class="card-title">学生基础信息</text>
</view>
<view class="form-list">
<view class="form-item">
<text class="label">姓名：</text>
<text class="value">{{ form.studentName || '-' }}</text>
</view>
<view class="form-item">
<text class="label">学号：</text>
<text class="value">{{ form.studentNo || '-' }}</text>
</view>
<view class="form-item">
<text class="label">性别：</text>
<text class="value">{{ form.gender == '1' ? '男' : form.gender == '0' ? '女' : '-' }}</text>
</view>
<view class="form-item">
<text class="label">班级：</text>
<text class="value">{{ form.className || '-' }}</text>
</view>
<view class="form-item">
<text class="label">辅导员：</text>
<text class="value">{{ form.teacherName || '-' }}</text>
</view>
<view class="form-item">
<text class="label">原宿舍：</text>
<text class="value">{{ form.originalDormitory || '-' }}</text>
</view>
<view class="form-item">
<text class="label">住宿费：</text>
<text class="value">
<view class="fee-tag" :class="form.accommodationFeeStatus == 1 ? 'fee-paid' : 'fee-unpaid'">
{{ form.accommodationFeeStatus == 1 ? '已交' : '未交' }}
</view>
（{{ form.accommodationFee || '-' }}）
</text>
</view>
<view class="form-item">
<text class="label">出生日期：</text>
<text class="value">{{ formatDate(form.birthDate) || '-' }}</text>
</view>
<view class="form-item">
<text class="label">身份证号：</text>
<text class="value">{{ form.idCard || '-' }}</text>
</view>
<view class="form-item">
<text class="label">联系电话：</text>
<text class="value">{{ form.studentPhone || '-' }}</text>
</view>
<view class="form-item">
<text class="label">学院/专业：</text>
<text class="value">{{ form.deptName || '-' }} / {{ form.majorName || '-' }}</text>
</view>
<!-- 学生电子签名 -->
<view class="form-item signature-item" v-if="form.studentSignature">
<text class="label">学生签名：</text>
<image class="signature-img" :src="getFullUrl(form.studentSignature)" mode="aspectFit" @click="previewImage(form.studentSignature)"></image>
</view>
</view>
</view>
<!-- 外宿信息 -->
<view class="card">
<view class="card-header">
<uni-icons type="location" size="24" color="#409EFF"></uni-icons>
<text class="card-title">外宿信息</text>
</view>
<view class="form-list">
<view class="form-item">
<text class="label">外宿原因：</text>
<text class="value">{{ form.applyReason || '-' }}</text>
</view>
<view class="form-item">
<text class="label">外宿地址：</text>
<text class="value">{{ form.address || '-' }} {{ form.outsideAddress || '-' }}</text>
</view>
<view class="form-item">
<text class="label">紧急联系人：</text>
<text class="value">{{ form.emergencyContact || '-' }} ({{ form.emergencyPhone || '-' }})</text>
</view>
</view>
</view>
<!-- 家长信息 -->
<view class="card">
<view class="card-header">
<uni-icons type="people" size="24" color="#409EFF"></uni-icons>
<text class="card-title">家长信息</text>
</view>
<view class="form-list">
<view class="form-item">
<text class="label">家长意见：</text>
<text class="value">
<view class="opinion-tag" :class="form.parentOpinion == 1 ? 'opinion-agree' : 'opinion-disagree'">
{{ form.parentOpinion == 1 ? '同意' : '不同意' }}
</view>
</text>
</view>
<view class="form-item">
<text class="label">家长电话：</text>
<text class="value">{{ form.parentPhone || '-' }}</text>
</view>
<view class="form-item">
<text class="label">家长地址：</text>
<text class="value">{{ form.parentAddress || '-' }} {{ form.parentDetailAddress || '-' }}</text>
</view>
<!-- 家长签字附件 -->
<view class="form-item signature-item" v-if="form.parentSignAttachment">
<text class="label">家长签字：</text>
<image class="signature-img" :src="getFullUrl(form.parentSignAttachment)" mode="aspectFit" @click="previewImage(form.parentSignAttachment)"></image>
</view>
</view>
</view>
<!-- 承诺书信息 -->
<view class="card">
<view class="card-header">
<uni-icons type="checkbox-selected" size="24" color="#409EFF"></uni-icons>
<text class="card-title">外宿承诺书</text>
</view>
<view class="form-list">
<view class="form-item">
<text class="label">签署日期：</text>
<text class="value">{{ formatDate(form.promiseDate) || '-' }}</text>
</view>
<view class="form-item promise-item">
<text class="label">承诺内容：</text>
<view class="value promise-content" v-html="form.promiseContent || '-'"></view>
</view>
<!-- 承诺签名 -->
<view class="form-item signature-item" v-if="form.studentPromiseSign">
<text class="label">承诺签名：</text>
<image class="signature-img" :src="getFullUrl(form.studentPromiseSign)" mode="aspectFit" @click="previewImage(form.studentPromiseSign)"></image>
</view>
</view>
</view>
<!-- 附件列表 -->
<view class="card" v-if="form.outsideAccommodationAttachments && form.outsideAccommodationAttachments.length">
<view class="card-header">
<uni-icons type="paper" size="24" color="#409EFF"></uni-icons>
<text class="card-title">佐证材料</text>
</view>
<view class="attachment-list">
<view class="attachment-item" v-for="(item, index) in form.outsideAccommodationAttachments" :key="index" @click="previewImage(item.attachmentUrl)">
<view class="file-icon">
<uni-icons type="file" size="32" color="#409EFF"></uni-icons>
</view>
<view class="file-info">
<text class="file-name">{{ item.attachmentName || '未命名文件' }}</text>
<text class="file-size">{{ formatFileSize(item.fileSize) }}</text>
</view>
<uni-icons type="right" size="24" color="#ccc"></uni-icons>
</view>
</view>
</view>
<!-- 审批记录 -->
<view class="card" v-if="form.outsideAccommodationApprovals && form.outsideAccommodationApprovals.length">
<view class="card-header">
<uni-icons type="checkbox" size="24" color="#409EFF"></uni-icons>
<text class="card-title">审批记录</text>
</view>
<view class="approval-list">
<view class="approval-item" v-for="(item, index) in form.outsideAccommodationApprovals" :key="index">
<view class="approval-line">
<view class="approval-dot" :class="item.approvalResult == 1 ? 'dot-success' : item.approvalResult == 0 ? 'dot-pending' : 'dot-danger'"></view>
<view class="approval-content">
<view class="approval-header">
<text class="approval-node">{{ item.approvalNode || '未知节点' }}</text>
<text class="approval-time">{{ formatDate(item.approvalTime) || '-' }}</text>
</view>
<view class="approval-body">
<view class="approval-info">
<text class="info-key">审批人：</text>
<text class="info-val">{{ item.approverName || '-' }}</text>
</view>
<view class="approval-info">
<text class="info-key">审批结果：</text>
<view class="approval-result-tag" :class="item.approvalResult == 1 ? 'result-approve' : item.approvalResult == 0 ? 'result-pending' : 'result-reject'">
{{ item.approvalResult == 1 ? '通过' : '驳回' }}
</view>
</view>
<view class="approval-info" v-if="item.approvalOpinion">
<text class="info-key">审批意见：</text>
<text class="info-val">{{ item.approvalOpinion }}</text>
</view>
<!-- 审批签名 -->
<view class="approval-info" v-if="item.signature">
<text class="info-key">审批签名：</text>
<!-- <image class="signature-img" :src="baseUrl + approval.signature" mode="aspectFit" @click="previewFile(approval, '签名')"></image> -->
<image style="width: 100px; height: 50px;border: 1px solid #eee" :src="getFullUrl(item.signature)" mode="aspectFit" @click="previewImage(item.signature)"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 空审批记录提示 -->
<view class="card empty-card" v-if="form.outsideAccommodationApprovals && form.outsideAccommodationApprovals.length === 0">
<view class="card-header">
<uni-icons type="checkbox" size="24" color="#409EFF"></uni-icons>
<text class="card-title">审批记录</text>
</view>
<view class="empty-tip">
<uni-icons type="empty" size="60" color="#ccc"></uni-icons>
<text class="empty-text">暂无审批记录</text>
</view>
</view>
<!-- 底部留白 -->
<view class="bottom-space"></view>
</scroll-view>
</view>
</template>
<script>
import config from '@/config'
export default {
name: "OutsideAccommodationDetail",
props: {
form: {
type: Object,
default: () => ({})
}
},
data() {
return {
// 文件服务器基础地址
baseFileUrl: config.baseUrl
};
},
methods: {
/**
* 格式化日期
* @param {String} dateStr 日期字符串
* @returns {String} 格式化后的日期
*/
formatDate(dateStr) {
if (!dateStr) return '';
try {
const date = new Date(dateStr);
if (isNaN(date.getTime())) return dateStr;
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
} catch (e) {
return dateStr;
}
},
/**
* 格式化文件大小
* @param {Number} size 字节数
* @returns {String} 格式化后的大小
*/
formatFileSize(size) {
if (!size) return '0B';
if (size < 1024) return `${size}B`;
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)}KB`;
return `${(size / (1024 * 1024)).toFixed(2)}MB`;
},
/**
* 获取申请状态文本
* @param {Number} status 状态码
* @returns {String} 状态文本
*/
getStatusText(status) {
const statusMap = {
0: '待提交',
1: '待辅导员审批',
2: '待学院书记审批',
3: '待学工处审批',
4: '待学校领导审批',
5: '审核通过',
6: '已驳回'
};
return statusMap[status] || '未知状态';
},
/**
* 获取申请状态样式类
* @param {Number} status 状态码
* @returns {String} 样式类名
*/
getStatusClass(status) {
const classMap = {
0: 'status-pending',
1: 'status-processing',
2: 'status-processing',
3: 'status-processing',
4: 'status-processing',
5: 'status-success',
6: 'status-reject'
};
return classMap[status] || 'status-default';
},
/**
* 获取完整的文件URL
* @param {String} path 相对路径
* @returns {String} 完整URL
*/
getFullUrl(path) {
if (!path) return '';
// 如果是完整URL直接返回，否则拼接基础地址
if (path.startsWith('http')) return path;
return this.baseFileUrl + path;
},
/**
* 预览图片
* @param {String} url 图片地址
*/
previewImage(url) {
if (!url) {
uni.showToast({
title: '图片地址不存在',
icon: 'none'
});
return;
}
const fullUrl = this.getFullUrl(url);
uni.previewImage({
urls: [fullUrl],
current: fullUrl
});
}
}
};
</script>
<style scoped lang="scss">
// 全局样式
.container {
width: 100%;
min-height: 100vh;
background-color: #f8f9fa;
}
// 页面头部
.page-header {
padding: 24rpx 30rpx;
background-color: #fff;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.page-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
}
// 滚动容器
.content-scroll {
width: 100%;
height: calc(100vh - 96rpx);
}
// 通用卡片样式
.card {
margin: 20rpx 30rpx;
padding: 0;
background-color: #fff;
border-radius: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
overflow: hidden;
&.overview-card {
padding: 30rpx;
background: linear-gradient(135deg, #e8f4fd 0%, #f0f8fb 100%);
.overview-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24rpx;
.overview-left {
.apply-no {
font-size: 26rpx;
color: #666;
display: block;
margin-bottom: 8rpx;
}
.student-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
}
.overview-info {
display: flex;
flex-wrap: wrap;
gap: 16rpx 0;
.overview-item {
width: 100%;
display: flex;
align-items: center;
.info-label {
font-size: 26rpx;
color: #666;
min-width: 120rpx;
}
.info-value {
font-size: 26rpx;
color: #333;
flex: 1;
}
}
}
}
&.empty-card {
.empty-tip {
padding: 60rpx 0;
text-align: center;
}
}
.card-header {
display: flex;
align-items: center;
padding: 24rpx 30rpx;
border-bottom: 1px solid #f5f5f5;
.card-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
margin-left: 12rpx;
}
}
.form-list {
padding: 24rpx 30rpx;
.form-item {
display: flex;
align-items: center;
padding: 16rpx 0;
border-bottom: 1px solid #f9f9f9;
&:last-child {
border-bottom: none;
}
&.signature-item {
align-items: flex-start;
.signature-img {
width: 220rpx;
height: 88rpx;
border: 1px solid #eee;
border-radius: 8rpx;
margin-top: 4rpx;
}
}
&.promise-item {
align-items: flex-start;
.promise-content {
line-height: 1.8;
color: #333;
font-size: 26rpx;
flex: 1;
p {
margin: 8rpx 0;
}
}
}
.label {
font-size: 28rpx;
color: #666;
min-width: 120rpx;
flex-shrink: 0;
}
.value {
font-size: 28rpx;
color: #333;
flex: 1;
word-break: break-all;
}
}
}
.attachment-list {
padding: 24rpx 30rpx;
.attachment-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1px solid #f9f9f9;
&:last-child {
border-bottom: none;
}
.file-icon {
width: 60rpx;
height: 60rpx;
border-radius: 12rpx;
background-color: #e8f4fd;
display: flex;
align-items: center;
justify-content: center;
}
.file-info {
flex: 1;
margin: 0 20rpx;
.file-name {
font-size: 28rpx;
color: #333;
margin-bottom: 4rpx;
display: block;
}
.file-size {
font-size: 24rpx;
color: #999;
}
}
}
}
.approval-list {
padding: 24rpx 30rpx;
.approval-item {
position: relative;
padding-left: 20rpx;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.approval-line {
display: flex;
position: relative;
&::after {
content: '';
position: absolute;
left: 10rpx;
top: 30rpx;
bottom: -20rpx;
width: 2rpx;
background-color: #eee;
z-index: 1;
}
&:last-child::after {
display: none;
}
}
.approval-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #ddd;
z-index: 2;
flex-shrink: 0;
&.dot-success {
background-color: #67c23a;
}
&.dot-danger {
background-color: #f56c6c;
}
&.dot-pending {
background-color: #e6a23c;
}
}
.approval-content {
flex: 1;
margin-left: 20rpx;
.approval-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
.approval-node {
font-size: 28rpx;
font-weight: 500;
color: #333;
}
.approval-time {
font-size: 24rpx;
color: #999;
}
}
.approval-body {
.approval-info {
display: flex;
align-items: center;
margin-bottom: 8rpx;
font-size: 26rpx;
.info-key {
color: #666;
min-width: 80rpx;
}
.info-val {
color: #333;
flex: 1;
}
}
}
}
}
}
}
// 标签样式
.status-tag, .fee-tag, .opinion-tag, .approval-result-tag {
padding: 8rpx 16rpx;
border-radius: 24rpx;
font-size: 24rpx;
font-weight: 500;
display: inline-block;
// 申请状态
&.status-pending {
background-color: #fdf6ec;
color: #e6a23c;
}
&.status-processing {
background-color: #e8f4fd;
color: #409eff;
}
&.status-success {
background-color: #f0f9eb;
color: #67c23a;
}
&.status-reject {
background-color: #fef0f0;
color: #f56c6c;
}
&.status-default {
background-color: #f5f5f5;
color: #909399;
}
// 费用状态
&.fee-paid {
background-color: #f0f9eb;
color: #67c23a;
margin-right: 10rpx;
}
&.fee-unpaid {
background-color: #fef0f0;
color: #f56c6c;
margin-right: 10rpx;
}
// 家长意见
&.opinion-agree {
background-color: #f0f9eb;
color: #67c23a;
}
&.opinion-disagree {
background-color: #fef0f0;
color: #f56c6c;
}
// 审批结果
&.result-approve {
background-color: #f0f9eb;
color: #67c23a;
}
&.result-reject {
background-color: #fef0f0;
color: #f56c6c;
}
&.result-pending {
background-color: #fdf6ec;
color: #e6a23c;
}
}
// 文本颜色
.text-success {
color: #67c23a !important;
}
.text-danger {
color: #f56c6c !important;
}
// 空提示
.empty-tip {
empty-text {
font-size: 28rpx;
color: #ccc;
margin-top: 20rpx;
}
}
// 底部留白
.bottom-space {
height: 40rpx;
}
</style>