RISE/school-developer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
guochunsi
2026-01-23 18:00:43 +08:00
parent f7445e1baf
commit 5dd173d8d3
8 changed files with 508 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
src/views/recruit/recruitstudentsignupturnover/index.vue
View File

@@ -49,7 +49,33 @@
</template>
</el-table-column>
<el-table-column prop="name" label="姓名[唯一号]" min-width="160" align="center" show-overflow-tooltip />
<el-table-column prop="majorChangeInfo" label="专业变更情况" min-width="180" align="center" show-overflow-tooltip />
<el-table-column prop="majorChangeInfo" label="专业变更情况" min-width="180" align="center" show-overflow-tooltip>
<template #default="scope">
<DetailPopover
v-if="scope.row.newMajorInfo || scope.row.oldMajorInfo"
title="专业变更详情"
:title-icon="InfoFilled"
:width="320"
:items="(() => {
const items = []
if (scope.row.oldMajorInfo) {
items.push({ label: '旧专业', content: scope.row.oldMajorInfo })
}
if (scope.row.newMajorInfo) {
items.push({ label: '新专业', content: scope.row.newMajorInfo, contentClass: 'new-major' })
}
return items
})()">
<template #reference>
<span class="major-change-link">
{{ scope.row.newMajorInfo || '查看详情' }}
<el-icon class="title-icon"><InfoFilled /></el-icon>
</span>
</template>
</DetailPopover>
<span v-else class="empty-text">-</span>
</template>
</el-table-column>
<el-table-column label="代办费变更情况" min-width="130" align="center" show-overflow-tooltip>
<template #default="scope">
<span class="new-fee">{{ scope.row.newAgencyFee }}</span> / <span class="old-fee">{{ scope.row.oldAgencyFee }}</span>
@@ -71,50 +97,50 @@
<template #default="scope">
<template v-if="getStatusConfig(auditStateOptions, scope.row.isMajorChange)">
<!-- 有备注信息时，使用 popover 包裹 ClickableTag -->
<el-popover
<DetailPopover
v-if="scope.row.remarks"
placement="right"
title="异动审核详情"
:width="300"
trigger="click">
:items="[
{
label: '审核状态',
layout: 'horizontal',
content: getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.label
},
{
label: '备注信息',
content: scope.row.remarks,
contentClass: 'reason-content'
}
]">
<template #reference>
<ClickableTag
width="80"
:type="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.type || 'info'"
:left-icon="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.icon">
{{ getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.label }}
</ClickableTag>
</template>
<!-- 弹出内容 -->
<div class="audit-detail-popover">
<div class="detail-title">异动审核详情</div>
<!-- 审核状态 -->
<div class="detail-section horizontal">
<div class="section-label">审核状态</div>
<div class="section-content">
<ClickableTag
:type="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.type || 'info'"
:left-icon="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.icon"
:right-icon="null">
{{ getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.label }}
</ClickableTag>
</div>
<template #content-0>
<ClickableTag
:type="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.type || 'info'"
:left-icon="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.icon"
:right-icon="null">
{{ getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.label }}
</ClickableTag>
</template>
<template #content-1>
<div class="reason-content">
<el-icon class="reason-icon"><Warning /></el-icon>
<span>{{ scope.row.remarks }}</span>
</div>
<!-- 备注信息 -->
<div v-if="scope.row.remarks" class="detail-section">
<div class="section-label">备注信息</div>
<div class="section-content reason-content">
<el-icon class="reason-icon"><Warning /></el-icon>
<span>{{ scope.row.remarks }}</span>
</div>
</div>
</div>
</el-popover>
</template>
</DetailPopover>
<!-- 没有备注信息时，直接显示 ClickableTag -->
<ClickableTag
v-else
width="80"
:type="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.type || 'info'"
:left-icon="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.icon"
:right-icon="null">
@@ -151,9 +177,9 @@
<!-- 异动审核弹窗 -->
<el-dialog v-model="majorChangeVisible" title="异动审核" width="600px">
<el-form :model="exarmForm" ref="exarmFormRef" label-width="80px" :rules="dataRule">
<el-form :model="exarmForm" ref="exarmFormRef" label-width="100px" :rules="dataRule">
<el-form-item label="审核结果" prop="isMajorChange">
<el-select v-model="exarmForm.isMajorChange" filterable clearable placeholder="请选择审核结果" style="width: 100%">
<el-select v-model="exarmForm.isMajorChange" filterable clearable placeholder="请选择审核结果">
<el-option
v-for="item in isMajorChangeList"
:key="item.value"
@@ -165,7 +191,7 @@
<el-form-item label="审核意见" prop="remarks">
<el-input
type="textarea"
placeholder="请输入审核内容"
placeholder="请输入审核意见"
:autosize="{ minRows: 2, maxRows: 4 }"
style="width: 100%"
v-model="exarmForm.remarks"
@@ -186,28 +212,15 @@
<script setup lang="ts" name="recruitstudentsignupturnover">
import { ref, reactive, computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserInfo } from '/@/stores/userInfo'
import { BasicTableProps, useTable } from '/@/hooks/table'
import { useMessage } from '/@/hooks/message'
import { fetchList, putObj } from '/@/api/recruit/recruitstudentsignupturnover'
import { getList } from '/@/api/recruit/recruitstudentplangroup'
import type { StateOption } from '/@/components/AuditState/index.vue'
import ClickableTag from '/@/components/ClickableTag/index.vue'
import { Warning, Clock, CircleClose, CircleCheck } from '@element-plus/icons-vue'
// 使用 Pinia store
const userInfoStore = useUserInfo()
const { userInfos } = storeToRefs(userInfoStore)
// 创建权限对象
const permissions = computed(() => {
const perms: Record<string, boolean> = {}
userInfos.value.authBtnList.forEach((perm: string) => {
perms[perm] = true
})
return perms
})
import DetailPopover from '/@/components/DetailPopover/index.vue'
import { Warning, InfoFilled } from '@element-plus/icons-vue'
import { TURNOVER_AUDIT_STATUS_LIST, getStatusConfig } from '/@/config/global'
import { getDicts } from '/@/api/admin/dict'
// 消息提示 hooks
const message = useMessage()
@@ -222,23 +235,11 @@ const majorChangeVisible = ref(false)
// 数据
const planList = ref<any[]>([])
const typeList = ref([{ label: '专业变更', value: '1' }, { label: '退学', value: '2' }])
// 使用字典 recruit_change_type
const typeList = ref<any[]>([])
// 审核状态选项配置（用于 ClickableTag 组件和检索条件）
const auditStateOptions = ref<StateOption[]>([
{ value: '1', label: '待审核', type: 'warning', icon: Clock, effect: 'light' },
{ value: '2', label: '驳回', type: 'danger', icon: CircleClose, effect: 'dark' },
{ value: '3', label: '通过', type: 'success', icon: CircleCheck, effect: 'dark' }
])
// 获取状态配置（用于 ClickableTag）
const getStatusConfig = (statusList: any[], value: string | number) => {
const config = statusList.find(item => String(item.value) === String(value))
if (config && config.type === '') {
config.type = 'info'
}
return config || null
}
const auditStateOptions = ref<any[]>(TURNOVER_AUDIT_STATUS_LIST)
// 从 auditStateOptions 派生检索条件列表（只包含 label 和 value）
const majorChangeList = computed(() => {
@@ -251,7 +252,7 @@ const majorChangeList = computed(() => {
// 审核弹窗中的选项（只包含通过和驳回）
const isMajorChangeList = computed(() => {
return auditStateOptions.value
.filter(item => item.value === '2' || item.value === '3')
.filter(item => item.value !== '1')
.map(item => ({
label: item.label,
value: item.value
@@ -283,7 +284,7 @@ const dataRule = {
// 获取异动类型标签
const getTypeLabel = (type: string) => {
const item = typeList.value.find(item => item.value === type)
const item = typeList.value.find((it: any) => String(it.value) === String(type))
return item ? item.label : ''
}
@@ -314,9 +315,12 @@ const init = async () => {
if (planList.value.length > 0) {
queryForm.groupId = planList.value[0].id
}
const typeData = await getDicts('recruit_change_type')
typeList.value = typeData.data || []
getDataList()
} catch (error) {
message.error('初始化失败')
// eslint-disable-next-line no-console
console.log('初始化失败', error)
}
}
@@ -344,8 +348,9 @@ const update = async () => {
message.success('审核成功')
majorChangeVisible.value = false
getDataList()
} catch (error: any) {
message.error(error.msg || '审核失败')
} catch (error) {
// eslint-disable-next-line no-console
console.log(error)
}
}
@@ -369,96 +374,67 @@ onMounted(() => {
<style lang="scss" scoped>
.new-fee {
color: var(--el-color-primary);
font-weight: 500;
font-weight: 600;
font-size: 14px;
}
.old-fee {
text-decoration: line-through;
color: #909399;
color: #606266;
font-size: 13px;
margin-left: 4px;
}
.empty-text {
color: #909399;
}
// Popover详情样式
.audit-detail-popover {
.detail-title {
font-size: 14px;
font-weight: 600;
color: #303133;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #EBEEF5;
// 备注内容样式（用于 DetailPopover 的插槽内容）
.reason-content {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px;
background-color: #fef0f0;
border-radius: 4px;
border-left: 3px solid #f56c6c;
.reason-icon {
color: #f56c6c;
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.detail-section {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
// 横向布局
&.horizontal {
display: flex;
align-items: center;
gap: 12px;
.section-label {
margin-bottom: 0;
white-space: nowrap;
}
.section-content {
flex: 1;
}
}
.section-label {
font-size: 12px;
color: #909399;
margin-bottom: 8px;
font-weight: 500;
}
.section-content {
font-size: 13px;
color: #303133;
&.reason-content {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px;
background-color: #fef0f0;
border-radius: 4px;
border-left: 3px solid #f56c6c;
.reason-icon {
color: #f56c6c;
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
span {
color: #f56c6c;
line-height: 1.6;
word-break: break-all;
flex: 1;
}
}
}
:deep(.el-tag) {
.tag-icon {
font-size: 12px;
}
}
span {
color: #f56c6c;
line-height: 1.6;
word-break: break-all;
flex: 1;
}
}
</style>
<style lang="scss" scoped>
// 专业变更链接样式
.major-change-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--el-color-primary);
text-decoration: underline;
cursor: pointer;
font-weight: 500;
&:hover {
color: var(--el-color-primary-light-3);
}
.title-icon {
color: var(--el-color-primary);
}
}
// 新专业样式（用于 DetailPopover 的内容类）
.new-major {
color: var(--el-color-primary);
font-weight: 500;
}
</style>