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-02-02 18:32:54 +08:00
parent 21562e57a6
commit b018f8f4c7
3 changed files with 402 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,29 +1,49 @@
<template>
<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__bar">
<div class="search-form-container">
<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
<!-- 筛选 + 展开更多 放在同一表单项内，保证垂直对齐 -->
<el-form-item v-if="filterTitle || hasCollapsibleItems" class="search-form__left-group">
<div class="search-form__left-inner">
<span v-if="filterTitle" class="search-form__title">
<el-icon class="search-form__title-icon"><Search /></el-icon>
{{ filterTitle }}
</span>
<el-button
v-if="hasCollapsibleItems"
link
type="primary"
class="toggle-btn"
@click="toggleExpand"
>
<el-icon style="margin-right: 4px">
<ArrowUp v-if="isExpanded" />
<ArrowDown v-else />
</el-icon>
{{ isExpanded ? '收起' : '展开更多' }}
</el-button>
</div>
</el-form-item>
<slot :visible="true" :expanded="isExpanded"></slot>
<div v-show="isExpanded" class="collapsible-content">
<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
<!-- 收起时：查询/重置在首行 -->
<div v-show="!isExpanded" class="actions-outside">
<slot name="actions"></slot>
</div>
<!-- 折叠区：展开时内部再放一份查询/重置，位置在更多筛选项之后 -->
<div v-if="hasCollapsibleItems" class="collapse-grid" :class="{ 'is-expanded': isExpanded }">
<div class="collapse-grid-inner">
<div class="collapse-grid-cell">
<slot :visible="false" :expanded="isExpanded" @has-content="hasCollapsibleContent = true"></slot>
<div v-show="isExpanded" class="actions-inside">
<slot name="actions"></slot>
</div>
</div>
</div>
</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>
@@ -189,10 +209,24 @@ defineExpose({
flex-wrap: wrap;
gap: 4px 0;
min-height: 32px;
}
&--no-title {
display: block;
.search-form__left-group {
:deep(.el-form-item__label) {
display: none;
}
:deep(.el-form-item__content) {
margin-left: 0 !important;
}
margin-right: 16px;
margin-bottom: 18px;
}
.search-form__left-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
}
.search-form__title {
@@ -201,13 +235,15 @@ defineExpose({
align-items: center;
gap: 6px;
flex-shrink: 0;
padding-right: 14px;
margin-right: 14px;
padding-right: 12px;
margin-right: 12px;
height: 32px;
line-height: 32px;
font-size: 14px;
font-weight: 500;
color: var(--el-text-color-regular);
color: var(--el-text-color-secondary);
cursor: default;
user-select: none;
&::after {
content: '';
@@ -223,31 +259,59 @@ defineExpose({
.search-form__title-icon {
font-size: 15px;
color: var(--el-color-primary);
color: var(--el-text-color-secondary);
}
.search-form-container {
flex: 1;
min-width: 0;
:deep(.el-form--inline) {
align-items: center;
}
.search-form__left-inner :deep(.toggle-btn) {
font-size: 14px;
font-weight: 500;
height: 32px;
display: inline-flex;
align-items: center;
border-radius: 6px;
}
:deep(.el-form-item:not(:has(.el-button))) {
margin-bottom: 14px;
margin-right: 16px;
}
:deep(.el-form--inline) {
.collapse-trigger-item {
margin-left: 0;
margin-bottom: 0;
}
.toggle-btn {
padding: 0;
font-size: 14px;
/* grid 0fr→1fr 高度过渡，ease-out 收尾不弹跳 */
.collapse-grid {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.26s cubic-bezier(0.33, 1, 0.68, 1);
contain: layout;
&.is-expanded {
grid-template-rows: 1fr;
}
}
.collapsible-content {
.collapse-grid-inner {
overflow: hidden;
min-height: 0;
backface-visibility: hidden;
}
.collapse-grid-cell {
overflow: hidden;
min-height: 0;
opacity: 0;
/* 收起时立即隐藏，不出现输入框慢慢消失 */
transition: opacity 0s;
}
.collapse-grid.is-expanded .collapse-grid-cell {
opacity: 1;
/* 仅展开时淡入 */
transition: opacity 0.12s ease-out;
}
.actions-outside,
.actions-inside {
display: contents;
}
}

425
src/views/professional/professionaltitlerelation/index.vue
View File

@@ -1,120 +1,135 @@
<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"
>
<template #default="{ visible }">
<template v-if="visible">
<el-form-item label="审核状态" prop="state">
<el-select
v-model="search.state"
clearable
placeholder="请选择审核状态"
>
<el-option
v-for="item in professionalState"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="工号" prop="teacherNo">
<el-input
v-model="search.teacherNo"
clearable
placeholder="请输入工号"
<div class="titlerelation-page">
<div class="page-wrapper">
<!-- 方案 F：最上标题+右侧按钮，下方搜索，再下方表格 -->
<div class="content-block">
<!-- 最上：左侧图标+标题，右侧所有按钮 -->
<div class="content-block__header">
<span class="card-title">
<el-icon class="title-icon"><Document /></el-icon>
职称关系
</span>
<div class="header-actions">
<div class="action-group">
<el-button
v-if="hasAuth('professional_professionaltitlerelation_add')"
type="primary"
icon="FolderAdd"
@click="handleAdd"
>新增</el-button>
<el-button
v-if="hasAuth('professional_teacherbase_export')"
type="warning"
plain
icon="Download"
@click="handleDownLoadWord"
:loading="exportLoading"
>导出信息</el-button>
</div>
<div class="header-right">
<RightToolbar
v-model:showSearch="showSearch"
@queryTable="getDataList"
/>
</el-form-item>
<el-form-item label="姓名" prop="realName">
<el-input
v-model="search.realName"
clearable
placeholder="请输入姓名"
/>
</el-form-item>
<el-form-item label="职称" prop="professionalTitleConfigId">
<el-select
v-model="search.professionalTitleConfigId"
clearable
filterable
placeholder="请选择职称"
>
<el-option
v-for="item in professionalTitleList"
:key="item.id"
:label="item.professionalTitle"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="专业技术职务" prop="majorStation">
<el-select
v-model="search.majorStation"
clearable
filterable
placeholder="请选择专业技术职务"
>
<el-option
v-for="item in majorStationList"
:key="item.id"
:label="item.majorStationName"
:value="item.id"
/>
</el-select>
</el-form-item>
</template>
</template>
<!-- 操作按钮 -->
<template #actions>
<el-form-item>
<el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
<el-button @click="resetQuery" icon="Refresh">重置</el-button>
</el-form-item>
</template>
</search-form>
<!-- 操作按钮：无权限不渲染 -->
<el-row>
<div class="mb15" style="width: 100%;">
<el-button
v-if="hasAuth('professional_professionaltitlerelation_add')"
type="primary"
icon="FolderAdd"
@click="handleAdd">新 增
</el-button>
<el-button
v-if="hasAuth('professional_teacherbase_export')"
class="ml10"
type="warning"
plain
icon="Download"
@click="handleDownLoadWord"
:loading="exportLoading">导出信息
</el-button>
</div>
</div>
</div>
</el-row>
<!-- 表格 -->
<el-table
ref="tableRef"
:data="state.dataList"
row-key="id"
v-loading="state.loading"
border
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<!-- 下方：搜索区，方案 F 默认收起 -->
<div v-show="showSearch" class="content-block__filter">
<search-form
:model="search"
ref="searchFormRef"
@keyup-enter="handleFilter"
>
<template #default="{ visible }">
<template v-if="visible">
<el-form-item label="姓名" prop="realName">
<el-input
v-model="search.realName"
clearable
placeholder="请输入姓名"
class="filter-input"
/>
</el-form-item>
<el-form-item label="工号" prop="teacherNo">
<el-input
v-model="search.teacherNo"
clearable
placeholder="请输入工号"
class="filter-input"
/>
</el-form-item>
<el-form-item label="审核状态" prop="state">
<el-select
v-model="search.state"
clearable
placeholder="请选择审核状态"
class="filter-select"
>
<el-option
v-for="item in professionalState"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="职称" prop="professionalTitleConfigId">
<el-select
v-model="search.professionalTitleConfigId"
clearable
filterable
placeholder="请选择职称"
class="filter-select"
>
<el-option
v-for="item in professionalTitleList"
:key="item.id"
:label="item.professionalTitle"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="专业技术职务" prop="majorStation">
<el-select
v-model="search.majorStation"
clearable
filterable
placeholder="请选择专业技术职务"
class="filter-select"
>
<el-option
v-for="item in majorStationList"
:key="item.id"
:label="item.majorStationName"
:value="item.id"
/>
</el-select>
</el-form-item>
</template>
</template>
<template #actions>
<el-form-item>
<el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
<el-button @click="resetQuery" icon="Refresh">重置</el-button>
</el-form-item>
</template>
</search-form>
</div>
<!-- 再下方：表格 -->
<el-table
ref="tableRef"
:data="state.dataList"
row-key="id"
v-loading="state.loading"
border
stripe
class="titlerelation-table"
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="state" label="审核状态" width="120" align="center">
@@ -150,7 +165,7 @@
icon="Document"
@click="handlePreview(scope.row.srcList)">查看
</el-button>
<span v-else>-</span>
<span v-else class="empty-text">-</span>
</template>
</el-table-column>
@@ -158,6 +173,7 @@
<el-table-column label="操作" width="280" align="center" fixed="right">
<template #default="scope">
<div class="op-cell">
<el-button
v-if="hasAuth('professional_professionaltitlerelation_edit') && (scope.row.state === '0' || scope.row.state === '-2')"
type="primary"
@@ -198,38 +214,40 @@
type="danger"
link
icon="delete"
style="margin-left: 12px"
@click="handleDel(scope.row)">删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-table>
<!-- 分页 -->
<pagination
v-bind="state.pagination"
@current-change="currentChangeHandle"
@size-change="sizeChangeHandle"
/>
<!-- 材料预览：图片直接显示，PDF 在组件内部 dialog 中显示 -->
<preview-file
v-for="src in imgUrl"
:key="src.title"
:authSrc="src.url"
dialog-title="职称材料"
/>
<!-- 子组件 -->
<MultiDialog ref="multiDialogRef" @getList="getDataList" :page="state.pagination" :nowRow="null" />
<DataForm ref="dataFormRef" @refreshData="handleFilter" />
<ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
<!-- 分页 -->
<pagination
v-bind="state.pagination"
@current-change="currentChangeHandle"
@size-change="sizeChangeHandle"
/>
</div>
</div>
<!-- 材料预览：图片直接显示，PDF 在组件内部 dialog 中显示 -->
<preview-file
v-for="src in imgUrl"
:key="src.title"
:authSrc="src.url"
dialog-title="职称材料"
/>
<!-- 子组件 -->
<MultiDialog ref="multiDialogRef" @getList="getDataList" :page="state.pagination" :nowRow="null" />
<DataForm ref="dataFormRef" @refreshData="handleFilter" />
<ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { Document } from '@element-plus/icons-vue'
import { BasicTableProps, useTable } from '/@/hooks/table'
import { useAuth } from '/@/hooks/auth'
import { useMessage } from '/@/hooks/message'
@@ -269,7 +287,7 @@ const searchFormRef = ref()
const multiDialogRef = ref()
const dataFormRef = ref()
const backReasonRef = ref()
const showSearch = ref(true)
const showSearch = ref(true) // 方案 F：默认收起筛选，首屏仅一张大卡片
// 搜索表单数据
const search = reactive({
@@ -456,4 +474,139 @@ onMounted(async () => {
</script>
<style lang="scss" scoped>
.titlerelation-page {
padding: 12px;
min-height: 100%;
background: var(--el-bg-color-page, #f5f6f8);
}
.page-wrapper {
display: flex;
flex-direction: column;
gap: 0;
}
/* 筛选：方案 F，内容区内置筛选区，默认收起 */
.content-block__filter {
padding: 16px 20px 5px 20px;
margin-top: 12px;
margin-bottom: 12px;
background: var(--el-fill-color-light);
border-radius: 8px;
:deep(.filter-input),
:deep(.filter-select) {
width: 180px;
}
}
/* 职称关系区域：无卡片，表头 + 表格 + 分页 */
.content-block {
background: var(--el-bg-color);
border-radius: 8px;
padding: 20px;
}
.content-block__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 0;
border-bottom: 1px solid var(--el-border-color-lighter);
}
.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;
}
/* 表格 */
.titlerelation-table {
:deep(.el-table__body td) {
transition: background-color 0.12s ease;
}
:deep(.el-button + .el-button) {
margin-left: 0;
}
}
/* 操作列 */
.op-cell {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px 8px;
}
.empty-text {
color: var(--el-text-color-secondary, #909399);
}
/* 表格与分页间距 */
.content-block .titlerelation-table {
margin-top: 12px;
margin-bottom: 0;
}
.content-block .titlerelation-table + * {
margin-top: 16px;
}
/* 响应式 */
@media (max-width: 1200px) {
.titlerelation-page {
padding: 8px;
}
.card-header {
flex-direction: column;
align-items: flex-start;
}
.header-actions {
width: 100%;
justify-content: space-between;
}
}
@media (max-width: 768px) {
.action-group {
flex-direction: column;
width: 100%;
.el-button {
width: 100%;
}
}
}
</style>

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

@@ -2719,7 +2719,7 @@
background: var(--el-bg-color);
:deep(.el-card__body) {
padding: 18px 20px;
padding: 18px 20px 5px 20px;
}
}
@@ -2731,12 +2731,12 @@
background: var(--el-bg-color);
:deep(.el-card__header) {
padding: 14px 20px;
padding: 20px 20px 15px;
border-bottom: 1px solid var(--el-border-color-lighter);
}
:deep(.el-card__body) {
padding: 18px;
padding: 15px 20px 20px;
}
}
@@ -2773,13 +2773,20 @@
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.header-right {
display: flex;
align-items: center;
gap: 8px;
padding-left: 10px;
}
// 主表格行高稍增加
.teacherbase-table {
:deep(.el-table__body td),
:deep(.el-table__header th) {
padding: 9px 0;
}
}
// 列表内链接与占位（主表格与弹窗内通用）