From 3324dbf6dd93f55dace2840aa19d6e737a61902f Mon Sep 17 00:00:00 2001
From: guochunsi <1595020186@qq.com>
Date: Fri, 30 Jan 2026 17:15:53 +0800
Subject: [PATCH] a

---
 src/components/SearchForm/index.vue          | 138 +++++---
 src/components/TableColumnControl/index.vue  |  36 +-
 src/views/professional/teacherbase/index.vue | 353 ++++++++++++-------
 3 files changed, 338 insertions(+), 189 deletions(-)

diff --git a/src/components/SearchForm/index.vue b/src/components/SearchForm/index.vue
index 09cd0df..0b72c1a 100644
--- a/src/components/SearchForm/index.vue
+++ b/src/components/SearchForm/index.vue
@@ -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;
 	}
diff --git a/src/components/TableColumnControl/index.vue b/src/components/TableColumnControl/index.vue
index fd3e2fe..34cbc90 100644
--- a/src/components/TableColumnControl/index.vue
+++ b/src/components/TableColumnControl/index.vue
@@ -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"
diff --git a/src/views/professional/teacherbase/index.vue b/src/views/professional/teacherbase/index.vue
index fa163fa..311f323 100644
--- a/src/views/professional/teacherbase/index.vue
+++ b/src/views/professional/teacherbase/index.vue
@@ -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>