a
This commit is contained in:
guochunsi
188
src/assets/styles/page-cards.scss
Normal file
188
src/assets/styles/page-cards.scss
Normal file
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* 列表页卡片布局公共样式（筛选卡片 + 内容卡片 + 表头）
|
||||
* 各业务模块通用，不限于专业模块
|
||||
*
|
||||
* 使用：@import '/@/assets/styles/page-cards.scss';
|
||||
* 模板类名：.page-cards > .page-wrapper > .search-card / .content-card
|
||||
*/
|
||||
|
||||
// 页面整体
|
||||
.page-cards {
|
||||
padding: 12px;
|
||||
min-height: 100%;
|
||||
background: var(--el-bg-color-page, #f5f6f8);
|
||||
}
|
||||
|
||||
// 页面包装器
|
||||
.page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// 筛选卡片
|
||||
.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 5px 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: 20px 20px 15px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 15px 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
// 小屏幕适配（≤768px）
|
||||
@media screen and (max-width: 768px) {
|
||||
.page-cards {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-card :deep(.el-card__body) {
|
||||
padding: 12px 14px 4px 14px;
|
||||
}
|
||||
|
||||
.content-card :deep(.el-card__header) {
|
||||
padding: 14px 14px 12px;
|
||||
}
|
||||
|
||||
.content-card :deep(.el-card__body) {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
.title-icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
gap: 8px;
|
||||
// 按钮间距
|
||||
.el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 超小屏幕适配（≤576px）
|
||||
@media screen and (max-width: 576px) {
|
||||
.page-cards {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-card :deep(.el-card__body) {
|
||||
padding: 10px 12px 14px 12px;
|
||||
}
|
||||
|
||||
.content-card :deep(.el-card__header) {
|
||||
padding: 12px 12px 10px;
|
||||
}
|
||||
|
||||
.content-card :deep(.el-card__body) {
|
||||
padding: 10px 12px 12px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
}
|
||||
.action-group {
|
||||
gap: 6px;
|
||||
// 按钮间距
|
||||
.el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-top: 8px;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
}
|
||||
@@ -1,27 +1,31 @@
|
||||
<template>
|
||||
<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle }">
|
||||
<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle && props.showFilterTitle }">
|
||||
<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">
|
||||
<el-form-item v-if="(filterTitle && props.showFilterTitle) || hasCollapsibleItems" class="search-form__left-group">
|
||||
<div class="search-form__left-inner">
|
||||
<span v-if="filterTitle" class="search-form__title">
|
||||
<span v-if="filterTitle && props.showFilterTitle" class="search-form__title" :style="{ marginRight: hasCollapsibleItems ? '12px' : '0' }">
|
||||
<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"
|
||||
round
|
||||
>
|
||||
<el-icon style="margin-right: 4px">
|
||||
<ArrowUp v-if="isExpanded" />
|
||||
<ArrowDown v-else />
|
||||
<el-icon
|
||||
class="toggle-btn__icon"
|
||||
:class="{ 'toggle-btn__icon--expanded': isExpanded }"
|
||||
>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
{{ isExpanded ? '收起' : '展开更多' }}
|
||||
<span class="toggle-btn__text">
|
||||
{{ isExpanded ? '收起筛选' : '更多筛选' }}
|
||||
</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@@ -44,7 +48,7 @@
|
||||
|
||||
<script setup lang="ts" name="search-form">
|
||||
import { ref, watch, computed, onMounted, nextTick } from 'vue';
|
||||
import { ArrowUp, ArrowDown, Search } from '@element-plus/icons-vue';
|
||||
import { CaretBottom, Search } from '@element-plus/icons-vue';
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
@@ -52,7 +56,14 @@ const props = defineProps({
|
||||
*/
|
||||
filterTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: '筛选',
|
||||
},
|
||||
/**
|
||||
* 是否显示筛选标题文案（仅控制左侧「筛选」文字和图标）
|
||||
*/
|
||||
showFilterTitle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* 表单数据模型
|
||||
@@ -227,7 +238,6 @@ defineExpose({
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
padding-right: 12px;
|
||||
margin-right: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
@@ -261,13 +271,29 @@ defineExpose({
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-form__left-inner :deep(.toggle-btn__icon) {
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.search-form__left-inner :deep(.toggle-btn__icon--expanded) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.search-form__left-inner :deep(.toggle-btn) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
// 默认态直接使用 hover 的视觉样式
|
||||
color: var(--el-color-primary);
|
||||
background-color: var(--el-fill-color-lighter);
|
||||
border: 1px solid var(--el-color-primary-light-7);
|
||||
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
border-color: var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item:not(:has(.el-button))) {
|
||||
|
||||
@@ -50,7 +50,7 @@ body,
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.layout-pd {
|
||||
padding: 10px !important;
|
||||
padding: 12px !important;
|
||||
background: linear-gradient(135deg,#f5f7fa,#e9ecef);
|
||||
}
|
||||
.layout-flex {
|
||||
|
||||
@@ -439,6 +439,12 @@
|
||||
background-color: #f5f7ff;
|
||||
}
|
||||
|
||||
/* 表格单元格内边距（全局）- 左右用默认，上下 9px */
|
||||
.el-table .el-table__body td,
|
||||
.el-table .el-table__header th {
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
/* scrollbar
|
||||
------------------------------- */
|
||||
.el-scrollbar__bar {
|
||||
|
||||
@@ -1,87 +1,100 @@
|
||||
<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"
|
||||
<div class="page-cards">
|
||||
<div class="page-wrapper">
|
||||
<!-- 筛选卡片 -->
|
||||
<el-card v-show="showSearch" class="search-card" shadow="never">
|
||||
<search-form
|
||||
: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="请输入工号"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="工号" prop="teacherNo">
|
||||
<el-input
|
||||
v-model="search.teacherNo"
|
||||
clearable
|
||||
placeholder="请输入工号"
|
||||
/>
|
||||
</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="realName">
|
||||
<el-input
|
||||
v-model="search.realName"
|
||||
clearable
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</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-card>
|
||||
|
||||
<!-- 列表内容卡片 -->
|
||||
<el-card class="content-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
<el-icon class="title-icon"><Medal /></el-icon>
|
||||
职业资格信息
|
||||
</span>
|
||||
<div class="header-actions">
|
||||
<div class="action-group">
|
||||
<el-button
|
||||
v-if="hasAuth('professional_professionalqualificationrelation_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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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_professionalqualificationrelation_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>
|
||||
</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"
|
||||
>
|
||||
<!-- 表格 -->
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
:data="state.dataList"
|
||||
row-key="id"
|
||||
v-loading="state.loading"
|
||||
border
|
||||
stripe
|
||||
: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">
|
||||
@@ -172,27 +185,28 @@
|
||||
</el-button>
|
||||
</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="职业资格材料"
|
||||
/>
|
||||
|
||||
<!-- 子组件 -->
|
||||
<DataForm ref="dataFormRef" @refreshData="handleFilter" />
|
||||
<ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-bind="state.pagination"
|
||||
@current-change="currentChangeHandle"
|
||||
@size-change="sizeChangeHandle"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 材料预览：图片直接显示，PDF 在组件内部 dialog 中显示 -->
|
||||
<preview-file
|
||||
v-for="src in imgUrl"
|
||||
:key="src.title"
|
||||
:authSrc="src.url"
|
||||
dialog-title="职业资格材料"
|
||||
/>
|
||||
|
||||
<!-- 子组件 -->
|
||||
<DataForm ref="dataFormRef" @refreshData="handleFilter" />
|
||||
<ProfessionalBackResaon ref="backReasonRef" @refreshData="handleFilter" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -213,6 +227,8 @@ import { getLevelList } from '/@/api/professional/rsbase/professionalqualificati
|
||||
import { getWorkTypeList } from '/@/api/professional/rsbase/professionalworktype'
|
||||
import { PROFESSIONAL_AUDIT_STATE_OPTIONS } from '/@/config/global'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { Medal } from '@element-plus/icons-vue'
|
||||
const RightToolbar = defineAsyncComponent(() => import('/@/components/RightToolbar/index.vue'))
|
||||
const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
|
||||
const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue'))
|
||||
const DataForm = defineAsyncComponent(() => import('./form.vue'))
|
||||
@@ -424,4 +440,5 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/@/assets/styles/page-cards.scss';
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
|
||||
<template>
|
||||
<div class="teacherbase-page">
|
||||
<div class="page-cards">
|
||||
<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 }">
|
||||
@@ -2698,96 +2697,7 @@
|
||||
|
||||
</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 5px 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: 20px 20px 15px;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 15px 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
// 主表格行高稍增加
|
||||
.teacherbase-table {
|
||||
:deep(.el-table__body td),
|
||||
:deep(.el-table__header th) {
|
||||
padding: 9px 0;
|
||||
}
|
||||
}
|
||||
@import '/@/assets/styles/page-cards.scss';
|
||||
|
||||
// 列表内链接与占位（主表格与弹窗内通用）
|
||||
:deep(.certificate-link) {
|
||||
|
||||
Reference in New Issue
Block a user