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-30 17:15:53 +08:00
parent c6da6e286f
commit 3324dbf6dd
3 changed files with 338 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/SearchForm/index.vue
View File

@@ -1,48 +1,47 @@
<template>
<div class="search-form-container">
<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
<!-- 直接展示的表单项 -->
<slot :visible="true" :expanded="isExpanded"></slot>
<!-- 可折叠的表单项区域 - 使用 display: contents 确保不影响布局 -->
<div v-show="isExpanded" class="collapsible-content">
<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle }">
<div class="search-form__bar" :class="{ 'search-form__bar--no-title': !filterTitle }">
<span v-if="filterTitle" class="search-form__title">
<el-icon class="search-form__title-icon"><Search /></el-icon>
{{ filterTitle }}
</span>
<div class="search-form-container">
<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
<slot :visible="true" :expanded="isExpanded"></slot>
<div v-show="isExpanded" class="collapsible-content">
<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
</div>
<div v-show="false" ref="detectionWrapperRef" class="detection-wrapper">
<slot :visible="false" :expanded="true"></slot>
</div>
<slot name="actions"></slot>
<el-form-item v-if="hasCollapsibleItems" class="collapse-trigger-item">
<el-button link type="primary" @click="toggleExpand" class="toggle-btn">
<el-icon style="margin-right: 4px">
<ArrowUp v-if="isExpanded" />
<ArrowDown v-else />
</el-icon>
{{ isExpanded ? '收起' : '展开更多' }}
</el-button>
</el-form-item>
</el-form>
</div>
<!-- 隐藏的检测元素，用于检测是否有可折叠内容 -->
<div v-show="false" ref="detectionWrapperRef" class="detection-wrapper">
<slot :visible="false" :expanded="true">
<!-- 如果插槽有内容，这里会被渲染，我们可以通过检查这个元素来判断 -->
</slot>
</div>
<!-- 操作按钮插槽（查询、重置等） -->
<slot name="actions"></slot>
<!-- 展开/收起按钮（在操作按钮之后） -->
<el-form-item v-if="hasCollapsibleItems" class="collapse-trigger-item">
<el-button
link
type="primary"
@click="toggleExpand"
class="toggle-btn"
>
<el-icon style="margin-right: 4px">
<ArrowUp v-if="isExpanded" />
<ArrowDown v-else />
</el-icon>
{{ isExpanded ? '收起' : '展开更多' }}
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup lang="ts" name="search-form">
import { ref, watch, computed, onMounted, nextTick } from 'vue';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import { ArrowUp, ArrowDown, Search } from '@element-plus/icons-vue';
const props = defineProps({
/**
* 筛选标题（如「筛选」），传入时在表单左侧显示标题+竖线，与表单项同一行
*/
filterTitle: {
type: String,
default: '',
},
/**
* 表单数据模型
*/
@@ -77,6 +76,7 @@ const props = defineProps({
const emit = defineEmits(['expand-change', 'keyup-enter']);
const formModel = props.model;
const { filterTitle } = props;
const formRef = ref();
const isExpanded = ref(props.defaultExpanded);
const hasCollapsibleContent = ref(false);
@@ -183,9 +183,58 @@ defineExpose({
</script>
<style lang="scss" scoped>
.search-form__bar {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 4px 0;
min-height: 32px;
&--no-title {
display: block;
}
}
.search-form__title {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding-right: 14px;
margin-right: 14px;
height: 32px;
line-height: 32px;
font-size: 14px;
font-weight: 500;
color: var(--el-text-color-regular);
&::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 14px;
background: var(--el-border-color);
}
}
.search-form__title-icon {
font-size: 15px;
color: var(--el-color-primary);
}
.search-form-container {
// 直接使用全局样式 el-form--inline，只需要覆盖特殊样式
flex: 1;
min-width: 0;
:deep(.el-form-item:not(:has(.el-button))) {
margin-bottom: 14px;
margin-right: 16px;
}
:deep(.el-form--inline) {
.collapse-trigger-item {
margin-left: 0;
@@ -196,21 +245,8 @@ defineExpose({
padding: 0;
font-size: 14px;
}
// 如果需要自定义宽度，可以覆盖全局样式（默认使用全局的 240px）
// 如果需要改为 200px，取消下面的注释
// .el-form-item {
// & > .el-input,
// .el-cascader,
// .el-select,
// .el-date-editor,
// .el-autocomplete {
// width: 200px;
// }
// }
}
// 可折叠内容区域 - 使用 contents 让包装器不影响布局
.collapsible-content {
display: contents;
}

36
src/components/TableColumnControl/index.vue
View File

@@ -1,17 +1,29 @@
<template>
<div class="table-column-control">
<el-button
:type="triggerType"
:icon="slots.trigger ? undefined : Menu"
:size="triggerSize"
:circle="triggerCircle"
:link="triggerLink"
@click="visible = true"
>
<slot name="trigger">
{{ triggerText || '列显隐' }}
</slot>
</el-button>
<template v-if="slots.trigger">
<el-button
:type="triggerType"
:size="triggerSize"
:circle="triggerCircle"
:link="triggerLink"
@click="visible = true"
>
<slot name="trigger"></slot>
</el-button>
</template>
<template v-else>
<el-tooltip class="item" effect="dark" content="列设置" placement="top">
<el-button
circle
:type="triggerType"
:size="triggerSize"
style="margin-left: 0;"
@click="visible = true"
>
<el-icon><Menu /></el-icon>
</el-button>
</el-tooltip>
</template>
<el-dialog
v-model="visible"

353
src/views/professional/teacherbase/index.vue
View File

@@ -1,14 +1,15 @@
<template>
<div class="layout-padding">
<div class="layout-padding-auto layout-padding-view">
<!-- 搜索表单 -->
<search-form
v-show="showSearch"
:model="search"
ref="searchFormRef"
@keyup-enter="handleFilter(search)"
>
<div class="teacherbase-page">
<div class="page-wrapper">
<!-- 筛选条件卡片：标题由 SearchForm 组件内置 -->
<el-card v-show="showSearch" class="search-card" shadow="never">
<search-form
:model="search"
ref="searchFormRef"
filter-title="筛选"
@keyup-enter="handleFilter(search)"
>
<template #default="{ visible }">
<!-- 直接展示的常用筛选条件 -->
<template v-if="visible">
@@ -190,90 +191,82 @@
<el-button @click="resetQuery" icon="Refresh">重置</el-button>
</el-form-item>
</template>
</search-form>
</search-form>
</el-card>
<!-- 操作按钮 -->
<el-row>
<div class="mb15" style="width: 100%; display: flex; justify-content: space-between; align-items: center;">
<div>
<!-- 主要操作：新增 -->
<el-button
type="primary"
icon="FolderAdd"
@click="handleAdd"
v-if="permissions.professional_teacherbase_add">新 增
</el-button>
<!-- 查询操作：使用 primary plain 样式，统一协调 -->
<!-- <el-button
type="primary"
plain
icon="User"
class="ml10"
v-if="permissions.professional_teacherbase_status_lock"
@click="handelQuickSeach(4)">双师
</el-button> -->
<!-- 设置操作：使用默认样式，中性灰色 -->
<el-button
icon="Lock"
class="ml10"
v-if="permissions.professional_teacherbase_status_lock"
@click="dialogVisible.statusDialogFormVisible=true">状态锁定
</el-button>
<!-- 导出操作：使用 warning plain 样式，橙色边框，表示数据导出 -->
<el-button
type="warning"
plain
icon="Download"
class="ml10"
v-if="permissions.professional_teacherbase_export"
@click="handleDownLoadWord('')"
:loading="exportLoading">导出WORD
</el-button>
<el-button
type="warning"
plain
icon="Download"
class="ml10"
v-if="permissions.professional_teacherbase_export"
@click="handleExportDialog"
:loading="exportLoading">自定义导出
</el-button>
<!-- 导入操作：使用 primary plain 样式，蓝色边框，保持项目默认样式 -->
<el-button
type="primary"
plain
icon="UploadFilled"
class="ml10"
v-if="permissions.professional_teacherinfo_import"
@click="handleImportDialog"
:loading="exportLoading">导入信息
</el-button>
<!-- 列表内容卡片 -->
<el-card class="content-card" shadow="never">
<template #header>
<div class="card-header">
<span class="card-title">
<el-icon class="title-icon"><User /></el-icon>
教师基础信息
</span>
<div class="header-actions">
<div class="action-group">
<el-button
v-if="permissions.professional_teacherbase_add"
type="primary"
icon="FolderAdd"
@click="handleAdd">新增
</el-button>
<el-button
v-if="permissions.professional_teacherbase_status_lock"
icon="Lock"
@click="dialogVisible.statusDialogFormVisible=true">状态锁定
</el-button>
<el-button
v-if="permissions.professional_teacherbase_export"
type="warning"
plain
icon="Download"
:loading="exportLoading"
@click="handleDownLoadWord('')">导出WORD
</el-button>
<el-button
v-if="permissions.professional_teacherbase_export"
type="warning"
plain
icon="Download"
:loading="exportLoading"
@click="handleExportDialog">自定义导出
</el-button>
<el-button
v-if="permissions.professional_teacherinfo_import"
type="primary"
plain
icon="UploadFilled"
:loading="exportLoading"
@click="handleImportDialog">导入信息
</el-button>
</div>
<div class="header-right">
<RightToolbar
v-model:showSearch="showSearch"
@queryTable="getDataList"
>
<TableColumnControl
ref="tableColumnControlRef"
:table-ref="tableRef"
v-model="visibleTableColumns"
storage-key="teacherbase-table-columns"
/>
</RightToolbar>
</div>
</div>
</div>
<!-- 列显示控制 - 使用自动提取，靠右显示 -->
<TableColumnControl
ref="tableColumnControlRef"
:table-ref="tableRef"
v-model="visibleTableColumns"
storage-key="teacherbase-table-columns"
trigger-type="default"
trigger-link
>
</TableColumnControl>
</div>
</el-row>
</template>
<!-- 表格 -->
<el-table
ref="tableRef"
:data="state.dataList"
v-loading="state.loading"
border
>
<!-- 表格 -->
<el-table
ref="tableRef"
:data="state.dataList"
v-loading="state.loading"
border
stripe
row-key="teacherNo"
class="teacherbase-table"
>
<!-- 调试：检查 tableRef -->
<!-- tableRef 会在组件挂载后自动赋值 -->
<!-- <TableColumn type="index" label="序号" width="60" align="center" /> -->
@@ -335,7 +328,7 @@
}
]">
<template #reference>
<span class="certificate-link" style="color: var(--el-color-primary); cursor: pointer;">
<span class="certificate-link">
查看详情
<el-icon class="title-icon"><InfoFilled /></el-icon>
</span>
@@ -355,7 +348,7 @@
<TableColumn label="操作" width="150" align="center" fixed="right">
<template #default="scope">
<div style="display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; white-space: nowrap;">
<div class="op-cell">
<el-button
v-if="permissions.professional_teacherbase_edit"
type="primary"
@@ -382,9 +375,9 @@
@currentChange="currentChangeHandle"
@sizeChange="sizeChangeHandle"
/>
</el-card>
</div>
<!--1 职工基础信息-->
<el-dialog v-model="dialogFromVisible" width="90%" :title="nowUserInfo.userName" class="employee-info-dialog">
@@ -2705,6 +2698,111 @@
</script>
<style lang="scss" scoped>
// 页面整体布局
.teacherbase-page {
padding: 12px;
min-height: 100%;
background: var(--el-bg-color-page, #f5f6f8);
}
.page-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
// 筛选卡片（标题栏与表单样式在 SearchForm 组件内）
.search-card {
border-radius: 8px;
border: 1px solid var(--el-border-color-lighter);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
background: var(--el-bg-color);
:deep(.el-card__body) {
padding: 18px 20px;
}
}
// 列表内容卡片
.content-card {
border-radius: 8px;
border: 1px solid var(--el-border-color-lighter);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
background: var(--el-bg-color);
:deep(.el-card__header) {
padding: 14px 20px;
border-bottom: 1px solid var(--el-border-color-lighter);
}
:deep(.el-card__body) {
padding: 18px;
}
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.card-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
color: var(--el-text-color-primary);
.title-icon {
font-size: 16px;
color: var(--el-color-primary);
}
}
.header-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.action-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.header-right {
display: flex;
align-items: center;
gap: 8px;
}
// 列表内链接与占位（主表格与弹窗内通用）
:deep(.certificate-link) {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--el-color-primary) !important;
cursor: pointer;
transition: color 0.2s ease;
&:hover {
color: var(--el-color-primary-light-3) !important;
text-decoration: underline;
}
.title-icon {
font-size: 14px;
opacity: 0.8;
}
}
.empty-text {
color: var(--el-text-color-secondary, #909399);
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
@@ -2922,47 +3020,35 @@
color: #c0c4cc;
font-size: 14px;
}
// 资格证书链接样式
:deep(.certificate-link){
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--el-color-primary)!important;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
color: var(--el-color-primary-light-3)!important;
text-decoration: underline;
}
.title-icon {
font-size: 14px;
opacity: 0.8;
}
}
.empty-text {
color: #909399;
}
}
// 弹窗内容区域样式优化 - 只优化外层容器，不修改组件内部样式
.employee-info-dialog {
// 只优化弹窗外层，不修改内部组件样式
// 列表操作列
.op-cell {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
white-space: nowrap;
}
// 响应式优化
@media (max-width: 1200px) {
.teacherbase-page {
padding: 12px;
}
.card-header {
flex-direction: column;
align-items: flex-start;
}
.header-actions {
width: 100%;
justify-content: space-between;
}
.base-info-form {
padding: 20px;
.form-section {
padding: 16px;
margin-bottom: 24px;
.section-title {
font-size: 15px;
margin-bottom: 16px;
@@ -2970,7 +3056,22 @@
}
}
}
@media (max-width: 768px) {
.teacherbase-page {
padding: 8px;
}
.action-group {
flex-direction: column;
width: 100%;
.el-button {
width: 100%;
}
}
.header-right {
width: 100%;
justify-content: flex-start;
}
}
</style>