Merge remote-tracking branch 'origin/developer' into developer

src/views/professional/professionalqualificationrelation/index.vue

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

src/views/professional/teacherbase/index.vue

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