调整排序
This commit is contained in:
parent
a7db35dec8
commit
24a0663e55
|
|
@ -1,150 +0,0 @@
|
|||
<template>
|
||||
<div class="student-info">
|
||||
<div class="lg:flex">
|
||||
<el-card class="!border-none mb-4 lg:mr-4 lg:w-[1250px]" shadow="never">
|
||||
<template #header>
|
||||
<span class="card-title">学生信息完善</span>
|
||||
</template>
|
||||
<div class="lg:flex gap-6">
|
||||
<!-- 基本信息表单 -->
|
||||
<el-card class="!border-none flex-1" shadow="never">
|
||||
<template #header>
|
||||
<span>基本信息</span>
|
||||
</template>
|
||||
<el-form layout="vertical" :model="studentData.baseInfo" class="mt-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<el-form-item label="学生姓名">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.name"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="studentData.baseInfo.gender">
|
||||
<el-radio label="male">男</el-radio>
|
||||
<el-radio label="female">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.idCard"
|
||||
placeholder="请输入18位身份证号"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.phone"
|
||||
placeholder="请输入手机号码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="家庭住址" class="md:col-span-2">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.address"
|
||||
placeholder="请输入详细家庭住址"
|
||||
type="textarea"
|
||||
rows="3"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="紧急联系人">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.emergencyContact"
|
||||
placeholder="请输入紧急联系人姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="紧急联系电话">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.emergencyPhone"
|
||||
placeholder="请输入紧急联系人电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 注册状态信息 -->
|
||||
<el-card class="!border-none mb-4 flex-1" shadow="never">
|
||||
<template #header>
|
||||
<span>注册状态</span>
|
||||
</template>
|
||||
<div class="status-info mt-4">
|
||||
<div class="mb-6">
|
||||
<div class="text-tx-secondary text-sm mb-2">当前状态</div>
|
||||
<el-tag :type="statusConfig.type">{{ statusConfig.label }}</el-tag>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<div class="text-tx-secondary text-sm mb-2">状态进度</div>
|
||||
<el-progress :percentage="statusConfig.progress" :stroke-width="6" />
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<el-checkbox v-model="statusConfig.steps[0].completed" disabled>
|
||||
已报名
|
||||
</el-checkbox>
|
||||
<span> {{ statusConfig.steps[0].time }} </span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<el-checkbox v-model="statusConfig.steps[1].completed" disabled>
|
||||
材料审核
|
||||
</el-checkbox>
|
||||
<span> {{ statusConfig.steps[1].time || '待完成' }} </span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<el-checkbox v-model="statusConfig.steps[2].completed" disabled>
|
||||
已录取
|
||||
</el-checkbox>
|
||||
<span> {{ statusConfig.steps[2].time || '待完成' }} </span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<el-checkbox v-model="statusConfig.steps[3].completed" disabled>
|
||||
已入学
|
||||
</el-checkbox>
|
||||
<span> {{ statusConfig.steps[3].time || '待完成' }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<el-button type="primary" block>保存信息</el-button>
|
||||
<el-button type="default" block class="mt-2">提交审核</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="StudentInfo">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
// 学生信息数据
|
||||
const studentData = reactive({
|
||||
baseInfo: {
|
||||
name: '',
|
||||
gender: 'male',
|
||||
idCard: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
emergencyContact: '',
|
||||
emergencyPhone: ''
|
||||
},
|
||||
additionalInfo: {
|
||||
enrollYear: '',
|
||||
major: '',
|
||||
education: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 状态配置
|
||||
const statusConfig = reactive({
|
||||
label: '已报名',
|
||||
type: 'info',
|
||||
progress: 25,
|
||||
steps: [
|
||||
{ completed: true, time: '2024-03-15' },
|
||||
{ completed: false, time: '' },
|
||||
{ completed: false, time: '' },
|
||||
{ completed: false, time: '' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -99,16 +99,33 @@
|
|||
/>
|
||||
</div>
|
||||
<el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
|
||||
<el-table-column label="用户ID" prop="userId" min-width="100" />
|
||||
<el-table-column label="关联基本信息ID" prop="baseInfoId" min-width="100" />
|
||||
<el-table-column label="报名编号" prop="applicationNumber" min-width="100" />
|
||||
<el-table-column label="邀请码" prop="invitationCode" min-width="100" />
|
||||
<el-table-column label="意向学院ID" prop="intendedCollegeId" min-width="100" />
|
||||
<el-table-column label="意向专业ID" prop="intendedMajorId" min-width="100" />
|
||||
<el-table-column label="录取状态" prop="admissionStatus" min-width="100" />
|
||||
<el-table-column label="缴费状态" prop="paymentStatus" min-width="100" />
|
||||
<el-table-column label="入学状态" prop="registrationStatus" min-width="100" />
|
||||
<el-table-column label="审核状态" prop="approvalStatus" min-width="100" />
|
||||
<el-table-column
|
||||
label="录取状态"
|
||||
prop="admissionStatus"
|
||||
min-width="100"
|
||||
:formatter="formatAdmissionStatus"
|
||||
/>
|
||||
<el-table-column
|
||||
label="缴费状态"
|
||||
prop="paymentStatus"
|
||||
min-width="100"
|
||||
:formatter="formatPaymentStatus"
|
||||
/>
|
||||
<el-table-column
|
||||
label="入学状态"
|
||||
prop="registrationStatus"
|
||||
min-width="100"
|
||||
:formatter="formatRegistrationStatus"
|
||||
/>
|
||||
<el-table-column
|
||||
label="审核状态"
|
||||
prop="approvalStatus"
|
||||
min-width="100"
|
||||
:formatter="formatApprovalStatus"
|
||||
/>
|
||||
<el-table-column label="审核人ID" prop="approvedBy" min-width="100" />
|
||||
<el-table-column label="审核时间" prop="approvedTime" min-width="100" />
|
||||
<el-table-column label="拒绝原因" prop="rejectionReason" min-width="100" />
|
||||
|
|
@ -164,12 +181,9 @@ const userStore = useUserStore()
|
|||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
const showEdit = ref(false)
|
||||
const queryParams = reactive({
|
||||
userId: '',
|
||||
baseInfoId: '',
|
||||
applicationNumber: '',
|
||||
invitationCode: '',
|
||||
intendedCollegeId: '',
|
||||
intendedMajorId: '',
|
||||
admissionStatus: '',
|
||||
paymentStatus: '',
|
||||
registrationStatus: '',
|
||||
|
|
@ -185,6 +199,40 @@ const queryParams = reactive({
|
|||
registrationTimeEnd: ''
|
||||
})
|
||||
|
||||
const formatAdmissionStatus = (row: any, column: any, cellValue: any) => {
|
||||
const statusMap: Record<string | number, string> = {
|
||||
'0': '待审核',
|
||||
'1': '已录取',
|
||||
'2': '未录取'
|
||||
}
|
||||
return statusMap[String(cellValue)] || cellValue
|
||||
}
|
||||
|
||||
const formatPaymentStatus = (row: any, column: any, cellValue: any) => {
|
||||
const statusMap: Record<string | number, string> = {
|
||||
'0': '未缴费',
|
||||
'1': '已缴费'
|
||||
}
|
||||
return statusMap[String(cellValue)] || cellValue
|
||||
}
|
||||
|
||||
const formatRegistrationStatus = (row: any, column: any, cellValue: any) => {
|
||||
const statusMap: Record<string | number, string> = {
|
||||
'0': '未入学',
|
||||
'1': '已入学'
|
||||
}
|
||||
return statusMap[String(cellValue)] || cellValue
|
||||
}
|
||||
|
||||
const formatApprovalStatus = (row: any, column: any, cellValue: any) => {
|
||||
const statusMap: Record<string | number, string> = {
|
||||
'0': '待审核',
|
||||
'1': '已审核',
|
||||
'2': '审核不通过'
|
||||
}
|
||||
return statusMap[String(cellValue)] || cellValue
|
||||
}
|
||||
|
||||
// 根据权限选择对应的 API
|
||||
const getFetchFun = () => {
|
||||
const { perms } = userStore
|
||||
|
|
@ -273,6 +273,10 @@ getLists()
|
|||
background-color: #f2fff2;
|
||||
}
|
||||
|
||||
:deep(.el-table tbody tr:hover > td) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const isMenuOpen = ref(false); // 用于移动端菜单控制
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 导航栏固定在页面顶端 -->
|
||||
<header class="navbar">
|
||||
<div class="navbar-container">
|
||||
<!-- 品牌标识 -->
|
||||
|
|
@ -61,12 +62,29 @@ const isMenuOpen = ref(false); // 用于移动端菜单控制
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 重置页面默认边距,确保导航栏紧贴顶端 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden; /* 防止横向滚动 */
|
||||
}
|
||||
|
||||
/* 导航栏固定在顶端,z-index设为最高确保不被遮挡 */
|
||||
.navbar {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
position: fixed; /* 改为fixed确保始终固定在顶端 */
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9999; /* 提高层级,避免被其他元素覆盖 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
|
|
@ -123,6 +141,8 @@ const isMenuOpen = ref(false); // 用于移动端菜单控制
|
|||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
|
|
@ -130,6 +150,7 @@ const isMenuOpen = ref(false); // 用于移动端菜单控制
|
|||
padding: 15px 20px;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mobile-menu a {
|
||||
|
|
@ -137,6 +158,11 @@ const isMenuOpen = ref(false); // 用于移动端菜单控制
|
|||
padding: 10px 0;
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.mobile-menu a:hover {
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
.mobile-menu a.active {
|
||||
|
|
@ -144,11 +170,12 @@ const isMenuOpen = ref(false); // 用于移动端菜单控制
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 主内容区添加顶部内边距,避免被固定导航栏遮挡 */
|
||||
main {
|
||||
max-width: 1200px;
|
||||
width: 100vw;
|
||||
margin: 20px auto;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 80px 20px 20px; /* 顶部padding=导航栏高度(60px)+20px间距 */
|
||||
}
|
||||
|
||||
.app {
|
||||
|
|
@ -168,5 +195,10 @@ main {
|
|||
.mobile-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 移动端主内容区顶部padding调整(考虑展开的移动端菜单) */
|
||||
main {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue