tijiao

src/components/SearchForm/index.vue

@@ -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 }">
+		<div class="search-form__bar">
-			<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">
+					<!-- 筛选 + 展开更多 放在同一表单项内，保证垂直对齐 -->
+					<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 {
+.search-form__left-group {
-		display: block;
+	: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;
+	padding-right: 12px;
-	margin-right: 14px;
+	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) {
+	/* grid 0fr→1fr 高度过渡，ease-out 收尾不弹跳 */
-		.collapse-trigger-item {
+	.collapse-grid {
-			margin-left: 0;
+		display: grid;
-			margin-bottom: 0;
+		grid-template-rows: 0fr;
-		}
+		transition: grid-template-rows 0.26s cubic-bezier(0.33, 1, 0.68, 1);
-
+		contain: layout;
-		.toggle-btn {
+		&.is-expanded {
-			padding: 0;
+			grid-template-rows: 1fr;
-			font-size: 14px;
 		}
 	}
-
+	.collapse-grid-inner {
-	.collapsible-content {
+		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;
 	}
 }

src/views/professional/professionaltitlerelation/index.vue

@@ -1,120 +1,135 @@
 <template>
-  <div class="layout-padding">
+  <div class="titlerelation-page">
-    <div class="layout-padding-auto layout-padding-view">
+    <div class="page-wrapper">
-      <!-- 搜索表单 -->
+      <!-- 方案 F：最上标题+右侧按钮，下方搜索，再下方表格 -->
-      <search-form 
+      <div class="content-block">
-        v-show="showSearch" 
+        <!-- 最上：左侧图标+标题，右侧所有按钮 -->
-        :model="search" 
+        <div class="content-block__header">
-        ref="searchFormRef"
+          <span class="card-title">
-        @keyup-enter="handleFilter"
+            <el-icon class="title-icon"><Document /></el-icon>
-      >
+            职称关系
-        <template #default="{ visible }">
+          </span>
-          <template v-if="visible">
+          <div class="header-actions">
-            <el-form-item label="审核状态" prop="state">
+            <div class="action-group">
-              <el-select
+              <el-button
-                v-model="search.state"
+                v-if="hasAuth('professional_professionaltitlerelation_add')"
-                clearable
+                type="primary"
-                placeholder="请选择审核状态"
+                icon="FolderAdd"
-              >
+                @click="handleAdd"
-                <el-option
+              >新增</el-button>
-                  v-for="item in professionalState"
+              <el-button
-                  :key="item.value"
+                v-if="hasAuth('professional_teacherbase_export')"
-                  :label="item.label"
+                type="warning"
-                  :value="item.value"
+                plain
-                />
+                icon="Download"
-              </el-select>
+                @click="handleDownLoadWord"
-            </el-form-item>
+                :loading="exportLoading"
-
+              >导出信息</el-button>
-            <el-form-item label="工号" prop="teacherNo">
+            </div>
-              <el-input
+            <div class="header-right">
-                v-model="search.teacherNo"
+              <RightToolbar
-                clearable
+                v-model:showSearch="showSearch"
-                placeholder="请输入工号"
+                @queryTable="getDataList"
               />
-            </el-form-item>
+            </div>
-
+          </div>
-            <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>
-      </el-row>
 
-      <!-- 表格 -->
+        <!-- 下方：搜索区，方案 F 默认收起 -->
-      <el-table
+        <div v-show="showSearch" class="content-block__filter">
-        ref="tableRef"
+          <search-form
-        :data="state.dataList"
+            :model="search"
-        row-key="id"
+            ref="searchFormRef"
-        v-loading="state.loading"
+            @keyup-enter="handleFilter"
-        border
+          >
-        :cell-style="tableStyle.cellStyle"
+            <template #default="{ visible }">
-        :header-cell-style="tableStyle.headerCellStyle"
+              <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
+        <pagination
-        v-bind="state.pagination"
+          v-bind="state.pagination"
-        @current-change="currentChangeHandle"
+          @current-change="currentChangeHandle"
-        @size-change="sizeChangeHandle"
+          @size-change="sizeChangeHandle"
-      />
+        />
-
+      </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>
+
+    <!-- 材料预览：图片直接显示，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>

src/views/professional/teacherbase/index.vue

@@ -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;
+    }
   }
 
   // 列表内链接与占位（主表格与弹窗内通用）