a

src/views/professional/professionalteacherhonor/index.vue

@@ -83,9 +83,45 @@
       >
         <el-table-column type="index" label="序号" width="60" align="center" />
         
-        <el-table-column prop="state" label="审核状态" width="120" align="center">
+        <el-table-column prop="state" label="审核状态" width="130" align="center">
           <template #default="scope">
-            <AuditState :state="scope.row.state" :options="auditStateOptions" />
+            <DetailPopover
+              v-if="scope.row.state === '-2' && scope.row.backReason"
+              title="审核详情"
+              placement="top"
+              :width="300"
+              :items="[
+                { label: '审核状态', layout: 'horizontal', content: getAuditStateTagConfig(scope.row.state)?.label },
+                { label: '驳回理由', content: scope.row.backReason, contentClass: 'reason-content' }
+              ]"
+            >
+              <template #reference>
+                <ClickableTag
+                  :type="getAuditStateTagConfig(scope.row.state)?.type || 'danger'"
+                  :left-icon="getAuditStateTagConfig(scope.row.state)?.leftIcon"
+                  :effect="getAuditStateTagConfig(scope.row.state)?.effect || 'dark'"                
+                >
+                  {{ getAuditStateTagConfig(scope.row.state)?.label || '已驳回' }}
+                </ClickableTag>
+              </template>
+              <template #content-0>
+                <ClickableTag
+                  :type="getAuditStateTagConfig(scope.row.state)?.type || 'danger'"
+                  :left-icon="getAuditStateTagConfig(scope.row.state)?.leftIcon"
+                  :effect="getAuditStateTagConfig(scope.row.state)?.effect || 'dark'"
+                  :right-icon="null"
+                >
+                  {{ getAuditStateTagConfig(scope.row.state)?.label || '已驳回' }}
+                </ClickableTag>
+              </template>
+              <template #content-1>
+                <div class="reason-content">
+                  <el-icon class="reason-icon"><Warning /></el-icon>
+                  <span>{{ scope.row.backReason }}</span>
+                </div>
+              </template>
+            </DetailPopover>
+            <AuditState v-else :state="scope.row.state" :options="auditStateOptions" />
           </template>
         </el-table-column>
         
@@ -114,8 +150,6 @@
           </template>
         </el-table-column>
         
-        <el-table-column prop="backReason" label="驳回理由" min-width="150" align="center" show-overflow-tooltip />
-        
         <el-table-column label="操作" width="280" align="center" fixed="right">
           <template #default="scope">
             <el-button
@@ -158,7 +192,6 @@
               type="danger"
               link
               icon="delete"
-              style="margin-left: 12px"
               @click="handleDel(scope.row)">删除
             </el-button>
           </template>
@@ -199,10 +232,12 @@ import {
   examObj, 
   delObj
 } from '/@/api/professional/professionaluser/professionalteacherhonor'
-import { PROFESSIONAL_AUDIT_STATE_OPTIONS } from '/@/config/global'
+import { PROFESSIONAL_AUDIT_STATE_OPTIONS, getStatusConfig } from '/@/config/global'
 import { defineAsyncComponent } from 'vue'
 const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
 const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue'))
+const ClickableTag = defineAsyncComponent(() => import('/@/components/ClickableTag/index.vue'))
+const DetailPopover = defineAsyncComponent(() => import('/@/components/DetailPopover/index.vue'))
 const ProfessionalBackResaon = defineAsyncComponent(() => import('/@/views/professional/common/professional-back-resaon.vue'))
 const DataForm = defineAsyncComponent(() => import('./form.vue'))
 const previewFile = defineAsyncComponent(() => import('/@/components/tools/preview-file.vue'))
@@ -217,6 +252,13 @@ const { professional_state: professionalState } = useDict('professional_state')
 // 审核状态选项
 const auditStateOptions = PROFESSIONAL_AUDIT_STATE_OPTIONS
 
+// 审核状态转 ClickableTag 配置（用 options 的 icon 字符串，与 AuditState 一致为实心）
+const getAuditStateTagConfig = (state: string | number) => {
+  const opt = getStatusConfig(auditStateOptions, state)
+  if (!opt) return null
+  return { type: opt.type, label: opt.label, leftIcon: opt.icon, effect: opt.effect || 'dark' }
+}
+
 // 无权限即无节点
 const { hasAuth } = useAuth()
 
@@ -369,4 +411,29 @@ const handleDownLoadWord = async () => {
 </script>
 
 <style lang="scss" scoped>
+/* 驳回理由展示（与 backSchoolCheckin 一致） */
+.reason-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  background-color: #fef0f0;
+  border-radius: 4px;
+  border-left: 3px solid #f56c6c;
+
+  .reason-icon {
+    color: #f56c6c;
+    font-size: 16px;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  span {
+    color: #f56c6c;
+    font-size: 13px;
+    line-height: 1.6;
+    word-break: break-all;
+    flex: 1;
+  }
+}
 </style>

src/views/professional/professionaltitlerelation/index.vue

@@ -1,41 +1,9 @@
 <template>
   <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"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- 下方：搜索区，方案 F 默认收起 -->
+        <!-- 最上：搜索区 -->
         <div v-show="showSearch" class="content-block__filter">
           <search-form
             :model="search"
@@ -118,6 +86,34 @@
           </search-form>
         </div>
 
+        <!-- 其次：左侧按钮，右侧 RightToolbar -->
+        <div class="content-block__header">
+          <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"
+              />
+            </div>
+          </div>
+        </div>
+
         <!-- 再下方：表格 -->
         <el-table
           ref="tableRef"
@@ -247,7 +243,6 @@
 
 <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'
@@ -486,10 +481,10 @@ onMounted(async () => {
   gap: 0;
 }
 
-/* 筛选：方案 F，内容区内置筛选区，默认收起 */
+/* 筛选：内容区最上方，无上外边距；与下方标题栏间距用 margin-bottom */
 .content-block__filter {
   padding: 16px 20px 5px 20px;
-  margin-top: 12px;
+  margin-top: 0;
   margin-bottom: 12px;
   background: var(--el-fill-color-light);
   border-radius: 8px;
@@ -535,21 +530,25 @@ onMounted(async () => {
 .header-actions {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
+  width: 100%;
 }
 
+/* 按钮间距按规范 10px；与 RightToolbar 区隔 */
 .action-group {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
+  flex-wrap: wrap; 
 }
 
 .header-right {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding-left: 12px;
+  // border-left: 1px solid var(--el-border-color-lighter);
 }
 
 /* 表格 */