a

src/views/professional/professionaltitlerelation/index.vue

@@ -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>