外宿申请移动端申请完成
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="app-container">
|
||||
<view>
|
||||
<!-- 搜索区（仅非学生角色显示） -->
|
||||
<view class="fixed-search-wrap" v-if="roleGroup != '学生'">
|
||||
<view class="fixed-search-wrap" id="search" v-if="roleGroup != '学生'">
|
||||
<view class="search-content">
|
||||
<view class="search-card">
|
||||
<!-- 姓名搜索输入框 -->
|
||||
@@ -44,151 +44,153 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据列表滚动容器 -->
|
||||
<scroll-view class="list-container" scroll-y @scrolltolower="handleLoadMore" lower-threshold="50" enhanced
|
||||
:show-scrollbar="false">
|
||||
<!-- 初始加载状态 -->
|
||||
<uni-load-more :status="loading ? 'loading' : 'done'" v-if="loading" class="loading-wrap"></uni-load-more>
|
||||
|
||||
<!-- 空数据状态 -->
|
||||
<view class="empty-state" v-if="!loading && !hasData">
|
||||
<uni-icons type="empty" size="80" color="#c0c4cc"></uni-icons>
|
||||
<text class="empty-text">暂无外宿申请数据</text>
|
||||
<text class="empty-tip" v-if="roleGroup.includes('学生')">点击右下角"+号"按钮提交新申请</text>
|
||||
</view>
|
||||
|
||||
<!-- 数据列表 -->
|
||||
<view class="card-list" v-if="!loading && hasData">
|
||||
<view class="apply-card" v-for="(item, index) in validDataList" :key="index" hover-class="card-hover"
|
||||
:hover-stop-propagation="true">
|
||||
<!-- 卡片头部 -->
|
||||
<view class="card-header">
|
||||
<view class="apply-no">
|
||||
<text class="label-text">申请编号：</text>
|
||||
<text class="no-text">{{ getSafeValue(item, 'applyNo', '无') }}</text>
|
||||
</view>
|
||||
<view class="status-wrap">
|
||||
<view class="status-label" :class="getStatusClass(item)">
|
||||
{{ getStatusText(item) }}
|
||||
<view class="app-container">
|
||||
<!-- 数据列表滚动容器 -->
|
||||
<scroll-view class="list-container" id="list-container" scroll-y @scrolltolower="handleLoadMore"
|
||||
lower-threshold="50" enhanced :show-scrollbar="false">
|
||||
<!-- 初始加载状态 -->
|
||||
<uni-load-more :status="loading ? 'loading' : 'done'" v-if="loading" class="loading-wrap"></uni-load-more>
|
||||
|
||||
<!-- 空数据状态 -->
|
||||
<view class="empty-state" v-if="!loading && !hasData">
|
||||
<uni-icons type="empty" size="80" color="#c0c4cc"></uni-icons>
|
||||
<text class="empty-text">暂无外宿申请数据</text>
|
||||
<text class="empty-tip" v-if="roleGroup.includes('学生')">点击右下角"+号"按钮提交新申请</text>
|
||||
</view>
|
||||
|
||||
<!-- 数据列表 -->
|
||||
<view class="card-list" v-if="!loading && hasData">
|
||||
<view class="apply-card" v-for="(item, index) in validDataList" :key="index" hover-class="card-hover"
|
||||
:hover-stop-propagation="true">
|
||||
<!-- 卡片头部 -->
|
||||
<view class="card-header">
|
||||
<view class="apply-no">
|
||||
<text class="label-text">申请编号：</text>
|
||||
<text class="no-text">{{ getSafeValue(item, 'applyNo', '无') }}</text>
|
||||
</view>
|
||||
<view class="valid-label"
|
||||
:class="getSafeValue(item, 'isValid') == 1 ? 'valid-success' : 'valid-info'">
|
||||
{{ getSafeValue(item, 'isValid') == 1 ? '有效' : '到期' }}
|
||||
<view class="status-wrap">
|
||||
<view class="status-label" :class="getStatusClass(item)">
|
||||
{{ getStatusText(item) }}
|
||||
</view>
|
||||
<view class="valid-label"
|
||||
:class="getSafeValue(item, 'isValid') == 1 ? 'valid-success' : 'valid-info'">
|
||||
{{ getSafeValue(item, 'isValid') == 1 ? '有效' : '到期' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 卡片主体折叠面板 -->
|
||||
<uni-collapse accordion v-model="item.activeCollapse">
|
||||
<uni-collapse-item title="基本信息" name="basic" class="collapse-item">
|
||||
<view class="info-grid">
|
||||
<view class="info-item"><text class="label">学号：</text><text
|
||||
class="value">{{ getSafeValue(item, 'studentNo', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">姓名：</text><text
|
||||
class="value">{{ getSafeValue(item, 'studentName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">性别：</text><text
|
||||
class="value">{{ getSafeValue(item, 'gender') == 1 ? '男' : getSafeValue(item, 'gender') == 0 ? '女' : '-' }}</text>
|
||||
|
||||
<!-- 卡片主体折叠面板 -->
|
||||
<uni-collapse accordion v-model="item.activeCollapse">
|
||||
<uni-collapse-item title="基本信息" name="basic" class="collapse-item">
|
||||
<view class="info-grid">
|
||||
<view class="info-item"><text class="label">学号：</text><text
|
||||
class="value">{{ getSafeValue(item, 'studentNo', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">姓名：</text><text
|
||||
class="value">{{ getSafeValue(item, 'studentName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">性别：</text><text
|
||||
class="value">{{ getSafeValue(item, 'gender') == 1 ? '男' : getSafeValue(item, 'gender') == 0 ? '女' : '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item"><text class="label">出生年月：</text><text
|
||||
class="value">{{ parseTime(getSafeValue(item, 'birthDate')) || '-' }}</text>
|
||||
</view>
|
||||
<view class="info-item"><text class="label">学院：</text><text
|
||||
class="value">{{ getSafeValue(item, 'deptName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">专业：</text><text
|
||||
class="value">{{ getSafeValue(item, 'majorName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">班级：</text><text
|
||||
class="value">{{ getSafeValue(item, 'className', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">辅导员：</text><text
|
||||
class="value">{{ getSafeValue(item, 'teacherName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">原宿舍号：</text><text
|
||||
class="value">{{ getSafeValue(item, 'originalDormitory', '-') }}</text></view>
|
||||
<view class="info-item">
|
||||
<text class="label">住宿费状态：</text>
|
||||
<text class="value">
|
||||
<view class="fee-label"
|
||||
:class="getSafeValue(item, 'accommodationFeeStatus') === 1 ? 'fee-success' : 'fee-info'">
|
||||
{{ getSafeValue(item, 'accommodationFeeStatus') === 1 ? '已交' : '未交' }}
|
||||
</view>
|
||||
</text>
|
||||
</view>
|
||||
<view class="info-item"><text class="label">宿费交纳：</text><text
|
||||
class="value">{{ getSafeValue(item, 'accommodationFee', '-') }}</text></view>
|
||||
</view>
|
||||
<view class="info-item"><text class="label">出生年月：</text><text
|
||||
class="value">{{ parseTime(getSafeValue(item, 'birthDate')) || '-' }}</text>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item title="外宿信息" name="outside" class="collapse-item">
|
||||
<view class="info-form">
|
||||
<view class="form-item"><text class="label">外宿原因：</text><text
|
||||
class="value">{{ getSafeValue(item, 'applyReason', '-') }}</text></view>
|
||||
<view class="form-item"><text class="label">外宿地址：</text><text
|
||||
class="value">{{ (getSafeValue(item, 'address', '') + ' ' + getSafeValue(item, 'outsideAddress', '')) || '-' }}</text>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">外宿时间：</text>
|
||||
<text class="value">{{ parseTime(getSafeValue(item, 'startDate')) || '-' }}
|
||||
<text class="split-text">至</text>
|
||||
{{ parseTime(getSafeValue(item, 'endDate')) || '-' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="form-item"><text class="label">紧急联系人：</text><text
|
||||
class="value">{{ getSafeValue(item, 'emergencyContact', '-') }}
|
||||
({{ getSafeValue(item, 'emergencyPhone', '-') }})</text></view>
|
||||
<view class="form-item"><text class="label">家长意见：</text><text
|
||||
class="value">{{ getSafeValue(item, 'parentOpinion') == 1 ? '同意' : getSafeValue(item, 'parentOpinion') == 0 ? '不同意' : '-' }}</text>
|
||||
</view>
|
||||
<view class="form-item"><text class="label">家长联系方式：</text><text
|
||||
class="value">{{ getSafeValue(item, 'parentPhone', '-') }}</text></view>
|
||||
</view>
|
||||
<view class="info-item"><text class="label">学院：</text><text
|
||||
class="value">{{ getSafeValue(item, 'deptName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">专业：</text><text
|
||||
class="value">{{ getSafeValue(item, 'majorName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">班级：</text><text
|
||||
class="value">{{ getSafeValue(item, 'className', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">辅导员：</text><text
|
||||
class="value">{{ getSafeValue(item, 'teacherName', '-') }}</text></view>
|
||||
<view class="info-item"><text class="label">原宿舍号：</text><text
|
||||
class="value">{{ getSafeValue(item, 'originalDormitory', '-') }}</text></view>
|
||||
<view class="info-item">
|
||||
<text class="label">住宿费状态：</text>
|
||||
<text class="value">
|
||||
<view class="fee-label"
|
||||
:class="getSafeValue(item, 'accommodationFeeStatus') === 1 ? 'fee-success' : 'fee-info'">
|
||||
{{ getSafeValue(item, 'accommodationFeeStatus') === 1 ? '已交' : '未交' }}
|
||||
</view>
|
||||
</text>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item title="审批记录" name="approval" class="collapse-item">
|
||||
<view class="approval-list"
|
||||
v-if="getSafeValue(item, 'outsideAccommodationApprovals', []).length > 0">
|
||||
<view class="approval-item"
|
||||
v-for="(approval, idx) in getSafeValue(item, 'outsideAccommodationApprovals', [])"
|
||||
:key="idx">
|
||||
<text
|
||||
class="approval-node">{{ getSafeValue(approval, 'approvalNode', '未知节点') }}：</text>
|
||||
<text class="approval-result"
|
||||
:class="getSafeValue(approval, 'approvalResult') == 1 ? 'result-pass' : 'result-reject'">
|
||||
{{ getSafeValue(approval, 'approvalResult') == 1 ? '通过' : '驳回' }}
|
||||
</text>
|
||||
<text class="approval-time"
|
||||
v-if="getSafeValue(approval, 'approvalTime')">{{ parseTime(getSafeValue(approval, 'approvalTime')) }}</text>
|
||||
<text class="approval-remark"
|
||||
v-if="getSafeValue(approval, 'approvalRemark')">备注：{{ getSafeValue(approval, 'approvalRemark') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item"><text class="label">宿费交纳：</text><text
|
||||
class="value">{{ getSafeValue(item, 'accommodationFee', '-') }}</text></view>
|
||||
<view class="empty-approval" v-else>暂无审批记录</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
|
||||
<!-- 卡片操作区 -->
|
||||
<view class="card-actions">
|
||||
<view>
|
||||
<uni-button type="text" size="mini" @click="detail(item, '修改')"
|
||||
v-if="item.status == 0 || getRejectInfo(item.outsideAccommodationApprovals).isReject">
|
||||
<uni-icons type="eye-filled" size="14" class="mr-5"></uni-icons>修改
|
||||
</uni-button>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item title="外宿信息" name="outside" class="collapse-item">
|
||||
<view class="info-form">
|
||||
<view class="form-item"><text class="label">外宿原因：</text><text
|
||||
class="value">{{ getSafeValue(item, 'applyReason', '-') }}</text></view>
|
||||
<view class="form-item"><text class="label">外宿地址：</text><text
|
||||
class="value">{{ (getSafeValue(item, 'address', '') + ' ' + getSafeValue(item, 'outsideAddress', '')) || '-' }}</text>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">外宿时间：</text>
|
||||
<text class="value">{{ parseTime(getSafeValue(item, 'startDate')) || '-' }}
|
||||
<text class="split-text">至</text>
|
||||
{{ parseTime(getSafeValue(item, 'endDate')) || '-' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="form-item"><text class="label">紧急联系人：</text><text
|
||||
class="value">{{ getSafeValue(item, 'emergencyContact', '-') }}
|
||||
({{ getSafeValue(item, 'emergencyPhone', '-') }})</text></view>
|
||||
<view class="form-item"><text class="label">家长意见：</text><text
|
||||
class="value">{{ getSafeValue(item, 'parentOpinion') == 1 ? '同意' : getSafeValue(item, 'parentOpinion') == 0 ? '不同意' : '-' }}</text>
|
||||
</view>
|
||||
<view class="form-item"><text class="label">家长联系方式：</text><text
|
||||
class="value">{{ getSafeValue(item, 'parentPhone', '-') }}</text></view>
|
||||
<view>
|
||||
<uni-button type="text" size="mini" @click="detail(item, '详情')" class="detail-btn"
|
||||
:disabled="!getSafeValue(item, 'id')">
|
||||
<uni-icons type="info" size="14" class="mr-5"></uni-icons>查看详情
|
||||
</uni-button>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
|
||||
<uni-collapse-item title="审批记录" name="approval" class="collapse-item">
|
||||
<view class="approval-list"
|
||||
v-if="getSafeValue(item, 'outsideAccommodationApprovals', []).length > 0">
|
||||
<view class="approval-item"
|
||||
v-for="(approval, idx) in getSafeValue(item, 'outsideAccommodationApprovals', [])"
|
||||
:key="idx">
|
||||
<text
|
||||
class="approval-node">{{ getSafeValue(approval, 'approvalNode', '未知节点') }}：</text>
|
||||
<text class="approval-result"
|
||||
:class="getSafeValue(approval, 'approvalResult') == 1 ? 'result-pass' : 'result-reject'">
|
||||
{{ getSafeValue(approval, 'approvalResult') == 1 ? '通过' : '驳回' }}
|
||||
</text>
|
||||
<text class="approval-time"
|
||||
v-if="getSafeValue(approval, 'approvalTime')">{{ parseTime(getSafeValue(approval, 'approvalTime')) }}</text>
|
||||
<text class="approval-remark"
|
||||
v-if="getSafeValue(approval, 'approvalRemark')">备注：{{ getSafeValue(approval, 'approvalRemark') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty-approval" v-else>暂无审批记录</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
|
||||
<!-- 卡片操作区 -->
|
||||
<view class="card-actions">
|
||||
<view>
|
||||
<uni-button type="text" size="mini" @click="detail(item, '修改')" v-if="item.status == 0 || getRejectInfo(item.outsideAccommodationApprovals).isReject">
|
||||
<uni-icons type="eye-filled" size="14" class="mr-5"></uni-icons>修改
|
||||
</uni-button>
|
||||
</view>
|
||||
<view>
|
||||
<uni-button type="text" size="mini" @click="detail(item, '详情')" class="detail-btn"
|
||||
:disabled="!getSafeValue(item, 'id')">
|
||||
<uni-icons type="info" size="14" class="mr-5"></uni-icons>查看详情
|
||||
</uni-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多状态 -->
|
||||
<view class="load-more-wrap" v-if="hasData">
|
||||
<uni-load-more :status="loadingMore ? 'loading' : (hasMore ? 'more' : 'nomore')"
|
||||
:content-text="loadMoreText"></uni-load-more>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 加载更多状态 -->
|
||||
<view class="load-more-wrap" v-if="hasData">
|
||||
<uni-load-more :status="loadingMore ? 'loading' : (hasMore ? 'more' : 'nomore')"
|
||||
:content-text="loadMoreText"></uni-load-more>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 添加外宿申请按钮 -->
|
||||
<view class="add" @click="addOutsideAccommodation">+</view>
|
||||
<view class="add" @click="addOutsideAccommodation" v-if="roleGroup == '学生'">+</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -379,21 +381,32 @@
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 计算列表内容顶部外边距
|
||||
setList() {
|
||||
// 获取搜索框元素高度
|
||||
let search = document.getElementById("search")
|
||||
// 获取列表内容元素
|
||||
let listContainer = document.getElementById("list-container")
|
||||
// 设置列表内容的顶部外边距，让内容不被搜索框遮挡
|
||||
listContainer.style.marginTop = `${search.offsetHeight}px`
|
||||
},
|
||||
/** 获取用户信息 */
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
const res = response || {};
|
||||
this.user = res.data || {};
|
||||
this.roleGroup = res.roleGroup || '';
|
||||
|
||||
// 填充查询条件
|
||||
if (this.roleGroup.includes("学生")) {
|
||||
this.queryParams.studentName = this.user.nickName || '';
|
||||
this.queryParams.studentName = this.user.nickName || '';
|
||||
} else if (this.roleGroup.includes("辅导员")) {
|
||||
this.queryParams.teacherName = this.user.nickName || '';
|
||||
this.setList()
|
||||
} else if (this.roleGroup.includes("二级学院")) {
|
||||
this.queryParams.deptName = this.user.dept?.deptName || '';
|
||||
this.setList()
|
||||
} else {
|
||||
this.setList()
|
||||
}
|
||||
|
||||
this.getList(true);
|
||||
@@ -506,6 +519,8 @@
|
||||
padding: 20rpx;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
@@ -517,7 +532,9 @@
|
||||
z-index: 90;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 15rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.search-content {
|
||||
@@ -616,7 +633,7 @@
|
||||
/* 列表滚动容器 */
|
||||
.list-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 380rpx);
|
||||
height: calc(100vh - 100rpx);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
@@ -794,7 +811,8 @@
|
||||
}
|
||||
|
||||
.info-grid .info-item {
|
||||
width: calc(50% - 10rpx);
|
||||
/* width: calc(50% - 10rpx); */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
@@ -913,7 +931,7 @@
|
||||
}
|
||||
|
||||
/* 适配小屏幕 */
|
||||
@media (max-width: 750rpx) {
|
||||
@media (max-width: 650rpx) {
|
||||
.info-grid .info-item {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -929,7 +947,7 @@
|
||||
}
|
||||
|
||||
.list-container {
|
||||
height: calc(100vh - 420rpx);
|
||||
/* height: calc(100vh - 420rpx); */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user