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

View File

@@ -3,6 +3,7 @@
:type="type" :type="type"
:size="size" :size="size"
:class="['clickable-tag', { 'has-action': actualRightIcon !== null}]" :class="['clickable-tag', { 'has-action': actualRightIcon !== null}]"
:style="{ width: width ? `${width}px` : 'auto' }"
@click="handleClick"> @click="handleClick">
<!-- 左侧图标 --> <!-- 左侧图标 -->
<el-icon <el-icon
@@ -43,6 +44,7 @@ interface Props {
leftIcon?: any // 左侧图标组件 leftIcon?: any // 左侧图标组件
middleIcon?: any // 中间图标组件(如警告图标) middleIcon?: any // 中间图标组件(如警告图标)
rightIcon?: any // 右侧图标组件(默认为 Right null 则不显示) rightIcon?: any // 右侧图标组件(默认为 Right null 则不显示)
width?: string | number // 自定义宽度
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@@ -50,7 +52,8 @@ const props = withDefaults(defineProps<Props>(), {
size: 'default', size: 'default',
leftIcon: undefined, leftIcon: undefined,
middleIcon: undefined, middleIcon: undefined,
rightIcon: undefined rightIcon: undefined,
width: undefined
}) })
// 获取实际的右侧图标:未传值时使用默认图标,传 null 则不显示 // 获取实际的右侧图标:未传值时使用默认图标,传 null 则不显示
@@ -97,7 +100,6 @@ export default {
} }
} }
} }
.middle-icon { .middle-icon {
animation: pulse 1.5s ease-in-out infinite; animation: pulse 1.5s ease-in-out infinite;
} }

View File

@@ -0,0 +1,162 @@
# DetailPopover 详情弹窗组件
一个通用的详情弹窗组件,用于展示结构化的详情信息。
## 功能特性
- ✅ 自定义标题和标题图标
- ✅ 支持多个详情项label + content
- ✅ 支持横向/纵向布局
- ✅ 支持自定义内容(插槽或组件)
- ✅ 支持标签图标
- ✅ 支持内容区域自定义样式类
## Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----|------|------|-------|--------|
| title | 标题 | string | - | '' |
| titleIcon | 标题图标组件 | Component | - | undefined |
| items | 详情项列表 | DetailItem[] | - | [] |
| placement | 弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | right |
| width | Popover 宽度 | string \| number | - | 300 |
| trigger | 触发方式 | string | click/focus/hover/contextmenu | click |
| popperClass | Popover 自定义类名 | string | - | '' |
## DetailItem 接口
```typescript
interface DetailItem {
label?: string // 标签文本
content?: string | number // 内容文本
labelIcon?: Component // 标签图标
layout?: 'horizontal' | 'vertical' // 布局方向,默认 vertical
contentClass?: string // 内容区域的自定义类名
component?: Component // 自定义组件
componentProps?: Record<string, any> // 自定义组件的 props
}
```
## Slots
| 插槽名 | 说明 | 参数 |
|--------|------|------|
| reference | 触发元素 | - |
| content-{index} | 自定义第 index 项的内容 | { item: DetailItem } |
| custom-content | 自定义内容(显示在所有详情项之后) | - |
## 使用示例
### 基础用法
```vue
<template>
<DetailPopover
title="专业变更详情"
:title-icon="InfoFilled"
:width="320"
:items="[
{ label: '旧专业', content: '计算机应用技术' },
{ label: '新专业', content: '软件技术', contentClass: 'new-major' }
]">
<template #reference>
<span class="link">查看详情</span>
</template>
</DetailPopover>
</template>
<script setup>
import DetailPopover from '/@/components/DetailPopover/index.vue'
import { InfoFilled } from '@element-plus/icons-vue'
</script>
```
### 横向布局
```vue
<DetailPopover
title="异动审核详情"
:items="[
{
label: '审核状态',
layout: 'horizontal',
content: '待审核'
}
]">
<template #reference>
<el-button>查看</el-button>
</template>
</DetailPopover>
```
### 使用插槽自定义内容
```vue
<DetailPopover
title="异动审核详情"
:items="[
{ label: '审核状态', layout: 'horizontal' },
{ label: '备注信息', contentClass: 'reason-content' }
]">
<template #reference>
<ClickableTag>待审核</ClickableTag>
</template>
<!-- 自定义第一项内容 -->
<template #content-0>
<ClickableTag type="warning">待审核</ClickableTag>
</template>
<!-- 自定义第二项内容 -->
<template #content-1>
<div class="reason-content">
<el-icon><Warning /></el-icon>
<span>需要补充材料</span>
</div>
</template>
</DetailPopover>
```
### 使用标签图标
```vue
<DetailPopover
title="详情"
:items="[
{
label: '状态',
labelIcon: CircleCheck,
content: '已完成'
}
]">
<template #reference>
<el-button>查看</el-button>
</template>
</DetailPopover>
```
## 样式自定义
可以通过 `contentClass` 为内容区域添加自定义样式类:
```vue
<DetailPopover
:items="[
{
label: '新专业',
content: '软件技术',
contentClass: 'new-major' // 添加自定义样式类
}
]">
<template #reference>
<span>查看</span>
</template>
</DetailPopover>
<style scoped>
.new-major {
color: var(--el-color-primary);
font-weight: 500;
}
</style>
```

View File

@@ -0,0 +1,185 @@
<template>
<el-popover
:placement="placement"
:width="width"
:trigger="trigger"
:popper-class="popperClass">
<template #reference>
<slot name="reference"></slot>
</template>
<!-- 弹出内容 -->
<div class="detail-popover">
<!-- 标题 -->
<div v-if="title" class="detail-title">
<el-icon v-if="titleIcon" class="title-icon">
<component :is="titleIcon" />
</el-icon>
<span>{{ title }}</span>
</div>
<!-- 详情项列表 -->
<div
v-for="(item, index) in items"
:key="index"
:class="['detail-section', { 'horizontal': item.layout === 'horizontal' }]">
<div v-if="item.label" class="section-label">
<el-icon v-if="item.labelIcon" class="label-icon">
<component :is="item.labelIcon" />
</el-icon>
<span>{{ item.label }}</span>
</div>
<div class="section-content" :class="item.contentClass">
<!-- 使用插槽自定义内容 -->
<slot
v-if="$slots[`content-${index}`]"
:name="`content-${index}`"
:item="item">
</slot>
<!-- 默认显示文本内容 -->
<template v-else>
<component
v-if="item.component"
:is="item.component"
v-bind="item.componentProps || {}">
</component>
<span v-else :class="item.contentClass">{{ item.content }}</span>
</template>
</div>
</div>
<!-- 自定义内容插槽 -->
<slot name="custom-content"></slot>
</div>
</el-popover>
</template>
<script setup lang="ts">
import type { Component } from 'vue'
export interface DetailItem {
label?: string // 标签文本
content?: string | number // 内容文本
labelIcon?: Component // 标签图标
layout?: 'horizontal' | 'vertical' // 布局方向,默认 vertical
contentClass?: string // 内容区域的自定义类名
component?: Component // 自定义组件
componentProps?: Record<string, any> // 自定义组件的 props
}
interface Props {
title?: string // 标题
titleIcon?: Component // 标题图标
items?: DetailItem[] // 详情项列表
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
width?: string | number // Popover 宽度
trigger?: 'click' | 'focus' | 'hover' | 'contextmenu' // 触发方式
popperClass?: string // Popover 自定义类名
}
withDefaults(defineProps<Props>(), {
title: '',
titleIcon: undefined,
items: () => [],
placement: 'right',
width: 300,
trigger: 'click',
popperClass: ''
})
</script>
<script lang="ts">
export default {
name: 'DetailPopover'
}
</script>
<style scoped lang="scss">
.detail-popover {
padding: 0;
.detail-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid #EBEEF5;
.title-icon {
color: var(--el-color-primary);
font-size: 18px;
}
}
.detail-section {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
// 横向布局
&.horizontal {
display: flex;
align-items: center;
gap: 16px;
.section-label {
margin-bottom: 0;
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.section-content {
flex: 1;
}
}
// 纵向布局(默认)
&:not(.horizontal) {
.section-label {
margin-bottom: 10px;
}
}
.section-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #909399;
font-weight: 500;
.label-icon {
font-size: 14px;
color: var(--el-color-primary);
}
}
.section-content {
font-size: 14px;
color: #303133;
line-height: 1.6;
word-break: break-all;
// 新专业样式(蓝色高亮)
&.new-major {
color: var(--el-color-primary);
font-weight: 500;
}
// 支持嵌套的样式类
:deep(.new-major) {
color: var(--el-color-primary);
font-weight: 500;
}
}
}
}
</style>

View File

@@ -62,12 +62,6 @@ export const PUSHED_STATUS_LIST = [
{ label: "已推送", value: "1" ,type: "success"}, { label: "已推送", value: "1" ,type: "success"},
]; ];
// 数据来源 (使用字典 recruit_data_source
export const DATA_SOURCE_LIST = [
{ label: "学校", value: "0" },
{ label: "市平台", value: "1" }
];
// 录取通知书发放状态 // 录取通知书发放状态
export const NOTICE_SEND_STATUS_LIST = [ export const NOTICE_SEND_STATUS_LIST = [
{ label: "未发放", value: "0" }, { label: "未发放", value: "0" },
@@ -123,6 +117,13 @@ export const NEW_CITY_MATERIAL_STATUS_LIST = [
{ label: "已上传", value: "1" }, { label: "已上传", value: "1" },
]; ];
// 异动审核状态
export const TURNOVER_AUDIT_STATUS_LIST = [
{ label: "待审核", value: "1" ,type: "warning", icon: "Clock"},
{ label: "驳回", value: "2" ,type: "danger", icon: "CircleClose"},
{ label: "通过", value: "3" ,type: "success", icon: "CircleCheck"}
];
/** /**
* 根据值从状态列表中获取配置项 * 根据值从状态列表中获取配置项
* @param statusList 状态列表 * @param statusList 状态列表

View File

@@ -1,20 +1,3 @@
<!--
- Copyright (c) 2018-2025, cyweb All rights reserved.
-
- Redistribution and use in source and binary forms, with or without
- modification, are permitted provided that the following conditions are met:
-
- Redistributions of source code must retain the above copyright notice,
- this list of conditions and the following disclaimer.
- Redistributions in binary form must reproduce the above copyright
- notice, this list of conditions and the following disclaimer in the
- documentation and/or other materials provided with the distribution.
- Neither the name of the pig4cloud.com developer nor the names of its
- contributors may be used to endorse or promote products derived from
- this software without specific prior written permission.
-
-->
<template> <template>
<div class="layout-padding"> <div class="layout-padding">
<div class="layout-padding-auto layout-padding-view"> <div class="layout-padding-auto layout-padding-view">
@@ -60,7 +43,7 @@
<el-table-column type="index" label="序号" width="60" align="center" /> <el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="deptCode" label="学院" align="center" show-overflow-tooltip /> <el-table-column prop="deptCode" label="学院" align="center" show-overflow-tooltip />
<el-table-column prop="classCode" label="班级" align="center" width="80" show-overflow-tooltip /> <el-table-column prop="classCode" label="班级" align="center" width="80" show-overflow-tooltip />
<el-table-column label="姓名/学号" align="center" width="150" show-overflow-tooltip> <el-table-column label="姓名/学号" align="center" min-width="150" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<TeacherNameNo :name="scope.row.name" :no="scope.row.stuNo" /> <TeacherNameNo :name="scope.row.name" :no="scope.row.stuNo" />
</template> </template>
@@ -81,12 +64,12 @@
<el-table-column prop="isDormApply" label="住宿申请" align="center" width="100"> <el-table-column prop="isDormApply" label="住宿申请" align="center" width="100">
<template #default="scope"> <template #default="scope">
<el-tag v-if="scope.row.isDormApply == '1'" type="success">通过</el-tag> <el-tag v-if="scope.row.isDormApply == '1'" type="success">通过</el-tag>
<el-tag v-else-if="scope.row.isDormApply == '0'" type="info">未通过</el-tag> <el-tag v-else-if="scope.row.isDormApply == '0'" type="danger">未通过</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="isRoom" label="是否住宿" align="center" width="100"> <el-table-column prop="isRoom" label="是否住宿" align="center" width="100">
<template #default="scope"> <template #default="scope">
<span>{{ scope.row.isRoom === '1' ? '是' : scope.row.isRoom === '0' ? '否' : '' }}</span> <span>{{ getStatusConfig(yes_no_type, scope.row.isRoom)?.label }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="roomNo" label="宿舍号" align="center" width="80" show-overflow-tooltip /> <el-table-column prop="roomNo" label="宿舍号" align="center" width="80" show-overflow-tooltip />
@@ -100,10 +83,10 @@
<el-table-column label="操作" width="100" align="center" fixed="right"> <el-table-column label="操作" width="100" align="center" fixed="right">
<template #default="scope"> <template #default="scope">
<el-button <el-button
v-if="permissions.recruit_newstucheckin_edit" v-auth="'recruit_newstucheckin_edit'"
type="primary" type="primary"
link link
icon="CircleCheck" icon="EditPen"
@click="handleCheckIn(scope.row)" @click="handleCheckIn(scope.row)"
> >
报到 报到
@@ -132,13 +115,18 @@ import { useUserInfo } from '/@/stores/userInfo'
import { BasicTableProps, useTable } from '/@/hooks/table' import { BasicTableProps, useTable } from '/@/hooks/table'
import { useMessage } from '/@/hooks/message' import { useMessage } from '/@/hooks/message'
import { fetchList } from '/@/api/recruit/newstucheckin' import { fetchList } from '/@/api/recruit/newstucheckin'
import { getTypeValue } from '/@/api/admin/dict' import { getDictsByTypes } from '/@/api/admin/dict'
import { useDict } from '/@/hooks/dict'
import request from '/@/utils/request' import request from '/@/utils/request'
import { getStatusConfig } from '/@/config/global'
const StuCheckIn = defineAsyncComponent(() => import('./stu-check-in.vue')) const StuCheckIn = defineAsyncComponent(() => import('./stu-check-in.vue'))
const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue')) const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
const GenderTag = defineAsyncComponent(() => import('/@/components/GenderTag/index.vue')) const GenderTag = defineAsyncComponent(() => import('/@/components/GenderTag/index.vue'))
// 是否住宿字典
const { yes_no_type } = useDict('yes_no_type')
// 使用 Pinia store // 使用 Pinia store
const userInfoStore = useUserInfo() const userInfoStore = useUserInfo()
const { userInfos } = storeToRefs(userInfoStore) const { userInfos } = storeToRefs(userInfoStore)
@@ -155,6 +143,9 @@ const permissions = computed(() => {
// 消息提示 hooks // 消息提示 hooks
const message = useMessage() const message = useMessage()
// 文化程度字典数据
const eduList = ref<any[]>([])
// 表格引用 // 表格引用
const tableRef = ref() const tableRef = ref()
const stuCheckInRef = ref() const stuCheckInRef = ref()
@@ -258,8 +249,9 @@ const handleExportOut = async () => {
// 查询报到状态字典 // 查询报到状态字典
const getCheckInStatusData = async () => { const getCheckInStatusData = async () => {
try { try {
const data = await getTypeValue('check_in_status') const data = await getDictsByTypes(['check_in_status','finance_student_source'])
checkInStatusData.value = data.data || [] checkInStatusData.value = data.data.check_in_status || []
eduList.value = data.data.finance_student_source || []
} catch (error) { } catch (error) {
// 获取报到状态字典失败 // 获取报到状态字典失败
} }

View File

@@ -266,8 +266,7 @@ const remoteMethod = (query: string) => {
// 查询此房间为几人间 // 查询此房间为几人间
const fearchRoomStuNums = (roomNo: string) => { const fearchRoomStuNums = (roomNo: string) => {
const data = { "roomNo": roomNo } fearchRoomStuNum(roomNo).then(data => {
fearchRoomStuNum(data).then(data => {
bedNoData.value = data.data bedNoData.value = data.data
}) })
} }

View File

@@ -311,7 +311,7 @@
header-align="center" header-align="center"
align="center" align="center"
width="100" width="100"
label="是否同步"> label="是否同步">
<template #default="scope"> <template #default="scope">
<el-tag :type="getYesNoType(scope.row.isTb)?.type"> <el-tag :type="getYesNoType(scope.row.isTb)?.type">
{{ getYesNoType(scope.row.isTb)?.label }} {{ getYesNoType(scope.row.isTb)?.label }}
@@ -376,7 +376,7 @@
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="changeClassVisible=false"> </el-button> <el-button @click="changeClassVisible=false">取消</el-button>
<el-button @click="changeClassInfoHandle" type="primary">保存</el-button> <el-button @click="changeClassInfoHandle" type="primary">保存</el-button>
</div> </div>
</template> </template>
@@ -387,8 +387,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, nextTick, onMounted, defineAsyncComponent } from 'vue' import { ref, reactive, nextTick, onMounted, defineAsyncComponent } from 'vue'
import { Search, ZoomIn, Edit } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import { useMessage } from '/@/hooks/message' import { useMessage } from '/@/hooks/message'
import { useMessageBox } from '/@/hooks/message' import { useMessageBox } from '/@/hooks/message'
import { BasicTableProps, useTable } from '/@/hooks/table' import { BasicTableProps, useTable } from '/@/hooks/table'
@@ -400,14 +398,14 @@ import {
oneClass, oneClass,
oneStuNo, oneStuNo,
changeClassInfo, changeClassInfo,
getMajorClass getMajorClass,
queryAllRecruitUser
} from '/@/api/recruit/recruitstudentsignup' } from '/@/api/recruit/recruitstudentsignup'
import { getLabelValueByProps } from '/@/utils/dictLabel' import { getLabelValueByProps } from '/@/utils/dictLabel'
import { getClassListByRole, getDeptList } from "/@/api/basic/basicclass" import { getClassListByRole, getDeptList } from "/@/api/basic/basicclass"
import {listPlanByCondition as planMajor} from "/@/api/recruit/recruitstudentplan" import {listPlanByCondition as planMajor} from "/@/api/recruit/recruitstudentplan"
import { getDictsByTypes } from "/@/api/admin/dict" import { getDictsByTypes } from "/@/api/admin/dict"
import { getUserListByRole } from "/@/api/admin/user" import { PUSHED_STATUS_LIST, PAY_STATUS_LIST, getStatusConfig } from "/@/config/global"
import { ROLE_CODE, PUSHED_STATUS_LIST, PAY_STATUS_LIST, getStatusConfig } from "/@/config/global"
import { showLoading, hideLoading } from '/@/api/asset/loading' import { showLoading, hideLoading } from '/@/api/asset/loading'
import { useDict } from '/@/hooks/dict' import { useDict } from '/@/hooks/dict'
@@ -642,20 +640,9 @@ const init = () => {
}) })
// 所有经办人 // 所有经办人
getUserListByRole(ROLE_CODE.ROLE_RECRUIT_SECOND).then((res: any) => { queryAllRecruitUser().then((res: any) => {
auditorList.value = res.data auditorList.value = res.data || []
getUserListByRole(ROLE_CODE.ROLE_RECRUIT).then((re: any) => {
re.data.forEach((r: any) => {
auditorList.value.push(r)
}) })
auditorList.value = unique(auditorList.value)
})
})
}
const unique = (arr: any[]) => {
const rese = new Map()
return arr.filter((item) => !rese.has(item.username) && rese.set(item.username, 1))
} }
const chanMajor = () => { const chanMajor = () => {

View File

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