diff --git a/src/api/erf/erf.js b/src/api/erf/erf.js
index bfc8f7e..6675dea 100644
--- a/src/api/erf/erf.js
+++ b/src/api/erf/erf.js
@@ -35,6 +35,11 @@ export const getSubmitApprovers = data => createAPI(`/erf/expApply/getSubmitAppr
  */
 export const approveExpApply = data => createAPI(`/erf/expApply/approveExpApply`, 'post', data)
 
+/**
+ * 获取当前流程节点编码
+ */
+export const getCurrentNodeCode = data => createAPI(`/erf/expApply/getCurrentNodeCode`, 'post', data)
+
 /**
  * 撤回申请单
  */
@@ -101,3 +106,8 @@ export const saveTriConfirmProcess = data => createAPI(`/erf/triConfirm/saveTriC
  * 删除三方确认工序
  */
 export const deleteTriConfirmProcess = data => createAPI(`/erf/triConfirm/deleteTriConfirmProcess`, 'post', data)
+
+/**
+ * 批量更新工序顺序（用于拖拽排序）
+ */
+export const updateProcessSequence = data => createAPI(`/erf/triConfirm/updateProcessSequence`, 'post', data)
diff --git a/src/views/modules/erf/components/erfAttachmentManager.vue b/src/views/modules/erf/components/erfAttachmentManager.vue
index 4d197b4..b8e3fd2 100644
--- a/src/views/modules/erf/components/erfAttachmentManager.vue
+++ b/src/views/modules/erf/components/erfAttachmentManager.vue
@@ -4,14 +4,14 @@
     <div style="margin-bottom: 10px">
       <el-button
         type="primary"
-        size="small"
+        size="small" class="add-btn"
         v-if="!disabled"
         @click="handleUpload">
         上传附件
       </el-button>
       <el-button
         type="primary"
-        size="small"
+        size="small" class="reset-btn"
         @click="handleDownload">
         下载
       </el-button>
@@ -534,4 +534,30 @@ export default {
 .el-table >>> .el-table__row td {
   padding: 8px 0;
 }
+
+/* 重置按钮 - 灰色扁平 */
+.erf-attachment-manager .reset-btn {
+  background-color: #F5F7FA;
+  border-color: #D3D4D6;
+  color: #606266;
+}
+
+.erf-attachment-manager .reset-btn:hover {
+  background-color: #909399;
+  border-color: #909399;
+  color: #FFFFFF;
+}
+
+/* 新增按钮 - 绿色扁平 */
+.erf-attachment-manager .add-btn {
+  background-color: #F0F9FF;
+  border-color: #C0E6C7;
+  color: #67C23A;
+}
+
+.erf-attachment-manager .add-btn:hover {
+  background-color: #67C23A;
+  border-color: #67C23A;
+  color: #FFFFFF;
+}
 </style>
diff --git a/src/views/modules/erf/components/expProjectDetail.vue b/src/views/modules/erf/components/expProjectDetail.vue
index f77f48a..a7f1f9e 100644
--- a/src/views/modules/erf/components/expProjectDetail.vue
+++ b/src/views/modules/erf/components/expProjectDetail.vue
@@ -3,9 +3,8 @@
     <!-- 顶部操作按钮 -->
     <div class="toolbar">
       <el-button
-        v-if="!editing && (status==='草稿' || status==='已驳回')"
         @click="handleEdit"
-        type="primary"
+        type="primary" class="add-btn"
         size="small">
         编辑
       </el-button>
@@ -13,12 +12,12 @@
         v-if="editing"
         @click="handleSave"
         type="primary"
-        size="small"
+        size="small" class="add-btn"
         :loading="saving">
         保存
       </el-button>
       <el-button
-        v-if="editing"
+        v-if="editing" class="reset-btn"
         @click="handleCancel"
         size="small">
         取消
@@ -91,12 +90,12 @@
               placeholder="请输入试验申请数量">
             </el-input>
           </el-form-item>
-          <el-form-item style="margin-top: 35px" label="工艺、取样、测试要求（PartIII Process,Sampling,and Test Requirement）">
+          <el-form-item style="margin-top: 32px" label="工艺、取样、测试要求（PartIII Process,Sampling,and Test Requirement）">
             <el-input
               v-model="formData.processRequirement"
               type="textarea"
               :readonly="!editing"
-              :rows="9"
+              :rows="10"
               placeholder="请输入工艺、取样、测试要求">
             </el-input>
           </el-form-item>
@@ -301,44 +300,131 @@ export default {
 }
 
 .toolbar {
-  margin-bottom: 5px;
-  padding-bottom: 5px;
-  border-bottom: 1px solid #EBEEF5;
+  margin-bottom: 2px;
+  padding-bottom: 2px;
   text-align: left;
 }
 
+/* 表单容器增加卡片效果 */
+.el-form {
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
 .el-form-item {
-  margin-bottom: 15px;
+  margin-bottom: 16px;
 }
 
-/* 只读状态的input样式 */
+/* 增强label样式 - 更明显的视觉层次 */
+.el-form-item >>> .el-form-item__label {
+  font-size: 13px;
+  color: #303133;
+  font-weight: 600;
+  padding-bottom: 8px;
+  line-height: 1.5;
+  display: block;
+}
+
+/* 编辑状态的input样式 - 清晰的边框 */
+.el-input >>> input {
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  padding: 10px 12px;
+  font-size: 13px;
+  transition: all 0.3s;
+}
+
+.el-input >>> input:focus {
+  border-color: #409EFF;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+}
+
+.el-input >>> textarea {
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.6;
+  transition: all 0.3s;
+}
+
+.el-input >>> textarea:focus {
+  border-color: #409EFF;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+}
+
+/* 只读状态的input样式 - 更明显的区分 */
 .el-input >>> input[readonly] {
-  background-color: #F5F7FA;
-  border-color: #DCDFE6;
+  background-color: #FAFAFA;
+  border: 1px solid #E4E7ED;
   color: #606266;
   cursor: default;
+  font-size: 13px;
 }
 
 .el-input >>> textarea[readonly] {
-  background-color: #F5F7FA;
-  border-color: #DCDFE6;
+  background-color: #FAFAFA;
+  border: 1px solid #E4E7ED;
   color: #606266;
   cursor: default;
+  font-size: 13px;
+  line-height: 1.6;
 }
 
 /* 禁用状态的日期选择器样式 */
 .el-date-editor.is-disabled >>> .el-input__inner {
-  background-color: #F5F7FA;
-  border-color: #DCDFE6;
+  background-color: #FAFAFA;
+  border: 1px solid #E4E7ED;
   color: #606266;
   cursor: default;
+  font-size: 13px;
 }
 
-/* 调整label样式 */
-.el-form-item >>> .el-form-item__label {
+.el-date-editor >>> .el-input__inner {
+  padding: 10px 12px;
   font-size: 13px;
+}
+
+/* 重置按钮 - 灰色扁平 */
+.exp-project-detail .reset-btn {
+  background-color: #F5F7FA;
+  border-color: #D3D4D6;
   color: #606266;
-  font-weight: normal;
-  padding-bottom: 5px;
+  padding: 9px 15px;
+  font-size: 13px;
+}
+
+.exp-project-detail .reset-btn:hover {
+  background-color: #909399;
+  border-color: #909399;
+  color: #FFFFFF;
+}
+
+/* 新增按钮 - 绿色扁平 */
+.exp-project-detail .add-btn {
+  background-color: #F0F9FF;
+  border-color: #C0E6C7;
+  color: #67C23A;
+  padding: 9px 15px;
+  font-size: 13px;
+}
+
+.exp-project-detail .add-btn:hover {
+  background-color: #67C23A;
+  border-color: #67C23A;
+  color: #FFFFFF;
+}
+
+/* 增加行间距，让布局更舒适 */
+.el-row {
+  margin-bottom: 0;
+}
+
+/* 调整列间距 */
+.el-col {
+  padding-left: 10px;
+  padding-right: 10px;
 }
 </style>
diff --git a/src/views/modules/erf/components/expTriConfirm.vue b/src/views/modules/erf/components/expTriConfirm.vue
index b9d4fb4..f0d7612 100644
--- a/src/views/modules/erf/components/expTriConfirm.vue
+++ b/src/views/modules/erf/components/expTriConfirm.vue
@@ -2,15 +2,18 @@
   <div class="exp-tri-confirm">
     <!-- 操作按钮 -->
     <div class="toolbar">
-      <el-button @click="openAddDialog" type="primary" size="small">新增</el-button>
+      <el-button @click="openAddDialog" type="primary" class="add-btn" size="small">新增</el-button>
     </div>
 
     <!-- 三方确认表格 -->
     <el-table
+      ref="processTable"
+      :key="tableKey"
       :data="processList"
       v-loading="loading"
       border
       :height="height"
+      class="tri-confirm-table"
       style="width: 100%;">
 
       <el-table-column
@@ -20,7 +23,8 @@
         header-align="center">
         <template slot-scope="scope">
           <el-tag :type="getSeqTagType(scope.row)" size="small">
-            第{{ scope.row.processSeq }}道
+            <i class="el-icon-rank" style="margin-right: 4px; cursor: move;"></i>
+            {{ scope.row.processSeq }}
           </el-tag>
         </template>
       </el-table-column>
@@ -249,9 +253,9 @@
 
       <div slot="footer">
         <el-button @click="confirmDialogVisible = false">取消</el-button>
-        <el-button 
-          type="primary" 
-          @click="doConfirm" 
+        <el-button
+          type="primary"
+          @click="doConfirm"
           :loading="confirmLoading"
           :disabled="sampleOk === null">
           确认
@@ -262,7 +266,8 @@
 </template>
 
 <script>
-import { getTriConfirmList, saveTriConfirmProcess, deleteTriConfirmProcess, confirmTriApproval } from '@/api/erf/erf'
+import { getTriConfirmList, saveTriConfirmProcess, deleteTriConfirmProcess, confirmTriApproval, updateProcessSequence } from '@/api/erf/erf'
+import Sortable from 'sortablejs'
 
 export default {
   name: 'ExpTriConfirm',
@@ -282,6 +287,7 @@ export default {
     return {
       processList: [],
       loading: false,
+      tableKey: 0, // 用于强制刷新表格
 
       // 新增/修改工序弹框
       processDialogVisible: false,
@@ -304,7 +310,11 @@ export default {
       confirmLoading: false,
       currentProcess: null,
       currentRoleType: '',
-      currentTime: ''
+      currentTime: '',
+
+      // 拖拽排序相关
+      sortableInstance: null,  // Sortable实例
+      isDragging: false  // 是否正在拖拽
     }
   },
 
@@ -319,18 +329,65 @@ export default {
     }
   },
 
+  mounted() {
+    // 初始化表格行拖拽排序功能
+    this.$nextTick(() => {
+      this.initTableRowDrag()
+    })
+  },
+
+  beforeDestroy() {
+    // 销毁 Sortable 实例
+    if (this.sortableInstance) {
+      this.sortableInstance.destroy()
+      this.sortableInstance = null
+    }
+  },
+
   methods: {
     /**
      * 加载工序列表
      */
     loadProcessList() {
+      console.log('📥 === 开始加载工序列表 === applyNo:', this.applyNo)
+
+      // 先销毁旧的 Sortable 实例
+      if (this.sortableInstance) {
+        console.log('🗑️ 销毁旧的 Sortable 实例')
+        this.sortableInstance.destroy()
+        this.sortableInstance = null
+      }
+
       this.loading = true
       getTriConfirmList({ applyNo: this.applyNo }).then(({data}) => {
         this.loading = false
         if (data && data.code === 0) {
+          console.log('📦 原始数据 (排序前):', data.list.map(item =>
+            `${item.processStep}(序号${item.processSeq})`
+          ).join(', '))
+
           // 按工序顺序排序
           this.processList = (data.list || []).sort((a, b) => {
-            return (a.processSeq || 0) - (b.processSeq || 0)
+            const result = (a.processSeq || 0) - (b.processSeq || 0)
+            console.log(`  排序比较: ${a.processStep}(${a.processSeq}) vs ${b.processStep}(${b.processSeq}) = ${result}`)
+            return result
+          })
+
+          console.log('✅ 工序列表加载完成 (排序后):', this.processList.map(item =>
+            `${item.processStep}(序号${item.processSeq})`
+          ).join(', '))
+
+          // 强制刷新表格
+          this.tableKey++
+          console.log('🔄 强制刷新表格，tableKey:', this.tableKey)
+
+          // 等待表格完全重新渲染后再初始化拖拽功能
+          this.$nextTick(() => {
+            console.log('⏳ 等待 DOM 更新完成...')
+            setTimeout(() => {
+              console.log('🎯 开始重新初始化拖拽功能')
+              this.initTableRowDrag()
+            }, 100) // 给表格渲染留出足够时间
           })
         } else {
           this.processList = []
@@ -338,6 +395,7 @@ export default {
         }
       }).catch(error => {
         this.loading = false
+        console.error('❌ 加载工序列表异常:', error)
         this.$message.error('加载三方确认列表异常')
       })
     },
@@ -370,7 +428,7 @@ export default {
 
       // 查找上一道工序
       const previousProcess = this.processList.find(p => p.processSeq === row.processSeq - 1)
-      
+
       // 上一道工序必须已完成
       return previousProcess && previousProcess.confirmStatus === 'CONFIRMED'
     },
@@ -537,6 +595,138 @@ export default {
       const minutes = String(date.getMinutes()).padStart(2, '0')
       const seconds = String(date.getSeconds()).padStart(2, '0')
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
+    /**
+     * 初始化表格行拖拽排序功能
+     * 拖拽后自动重新计算序号并保存到数据库
+     */
+    initTableRowDrag() {
+      console.log('🎯 开始初始化表格拖拽排序功能')
+
+      // 如果正在拖拽，不重新初始化
+      if (this.isDragging) {
+        console.log('⚠️ 正在拖拽中，跳过初始化')
+        return
+      }
+
+      // 销毁旧的 Sortable 实例
+      if (this.sortableInstance) {
+        console.log('🗑️ 销毁旧的 Sortable 实例')
+        this.sortableInstance.destroy()
+        this.sortableInstance = null
+      }
+
+      // 使用 ref 获取表格元素，更可靠
+      const tableEl = this.$refs.processTable
+      if (!tableEl || !tableEl.$el) {
+        console.warn('⚠️ 表格 ref 不存在，拖拽功能初始化失败')
+        return
+      }
+
+      const el = tableEl.$el.querySelector('.el-table__body-wrapper tbody')
+      if (!el) {
+        console.warn('⚠️ 未找到表格 tbody 元素，拖拽功能初始化失败')
+        return
+      }
+
+      console.log('✅ 找到表格 tbody，当前有', el.children.length, '行')
+
+      // 创建新的 Sortable 实例
+      this.sortableInstance = Sortable.create(el, {
+        animation: 150,
+        handle: 'tr', // 整行可拖拽
+        ghostClass: 'sortable-ghost',
+        chosenClass: 'sortable-chosen',
+        dragClass: 'sortable-drag',
+        onStart: () => {
+          console.log('🖱️ 开始拖拽')
+          this.isDragging = true
+        },
+        onEnd: (evt) => {
+          const { oldIndex, newIndex } = evt
+          console.log(`🎬 拖拽结束: oldIndex=${oldIndex}, newIndex=${newIndex}`)
+          this.isDragging = false
+
+          if (oldIndex === newIndex) {
+            console.log('位置未变化，无需更新')
+            return
+          }
+
+          console.log(`🔄 拖拽: 从位置 ${oldIndex} (${this.processList[oldIndex].processStep},序号${this.processList[oldIndex].processSeq}) 移动到位置 ${newIndex}`)
+
+          // 1. 更新本地数据顺序
+          const movedItem = this.processList.splice(oldIndex, 1)[0]
+          this.processList.splice(newIndex, 0, movedItem)
+
+          // 2. 重新计算所有序号（从1开始）- 使用 Vue.set 确保响应式更新
+          this.processList.forEach((item, index) => {
+            this.$set(item, 'processSeq', index + 1)
+          })
+
+          console.log('📝 拖拽后新序号：', this.processList.map((item, idx) =>
+            `位置${idx}: ${item.processStep} (序号${item.processSeq})`
+          ).join(', '))
+
+          // 4. 使用 nextTick 确保 DOM 更新后再保存
+          this.$nextTick(() => {
+            // 5. 保存到数据库
+            this.saveProcessSequence()
+          })
+        }
+      })
+    },
+
+    /**
+     * 保存工序顺序到数据库
+     */
+    saveProcessSequence() {
+      if (this.processList.length === 0) {
+        return
+      }
+
+      console.log('💾 === 拖拽排序保存开始 ===')
+      console.log('准备保存的工序顺序：')
+      this.processList.forEach((item, index) => {
+        console.log(`  位置${index}: ${item.processStep} → 新序号 ${item.processSeq}`)
+      })
+
+      // 构建保存数据：提取工序名称列表（按新顺序）
+      const processSteps = this.processList.map(item => item.processStep)
+
+      // 显示loading
+      const loadingInstance = this.$loading({
+        lock: true,
+        text: '正在保存排序...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      // 调用API保存
+      updateProcessSequence({
+        applyNo: this.applyNo,
+        processSteps: processSteps
+      }).then(({data}) => {
+        loadingInstance.close()
+        if (data && data.code === 0) {
+          this.$message.success('排序保存成功')
+          console.log('✅ === 拖拽排序保存完成 ===')
+          // 保存成功后稍作延迟再重新加载列表，确保数据库事务已提交
+          setTimeout(() => {
+            this.loadProcessList()
+          }, 300)
+        } else {
+          this.$message.error(data.msg || '排序保存失败')
+          // 保存失败，重新加载数据恢复原状
+          this.loadProcessList()
+        }
+      }).catch(error => {
+        loadingInstance.close()
+        this.$message.error('排序保存异常')
+        console.error('保存排序异常:', error)
+        // 保存异常，重新加载数据恢复原状
+        this.loadProcessList()
+      })
     }
   }
 }
@@ -566,4 +756,48 @@ export default {
 .el-table >>> .el-table__row td {
   padding: 8px 0;
 }
+
+/* 新增按钮 - 绿色扁平 */
+.exp-tri-confirm .add-btn {
+  background-color: #F0F9FF;
+  border-color: #C0E6C7;
+  color: #67C23A;
+}
+
+.exp-tri-confirm .add-btn:hover {
+  background-color: #67C23A;
+  border-color: #67C23A;
+  color: #FFFFFF;
+}
+
+/* 拖拽排序样式 */
+.tri-confirm-table >>> tbody tr {
+  cursor: move;
+}
+
+.tri-confirm-table >>> tbody tr:hover {
+  background-color: #f5f7fa !important;
+}
+
+/* 拖拽时的样式 */
+.sortable-ghost {
+  opacity: 0.4;
+  background-color: #e3f2fd !important;
+}
+
+.sortable-chosen {
+  background-color: #e3f2fd !important;
+}
+
+.sortable-drag {
+  background-color: #ffffff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
+  opacity: 0.9;
+}
+
+/* 拖拽图标提示 */
+.tri-confirm-table >>> .el-tag .el-icon-rank {
+  font-size: 12px;
+  vertical-align: middle;
+}
 </style>
diff --git a/src/views/modules/erf/expApplyApproval.vue b/src/views/modules/erf/expApplyApproval.vue
index d18ff70..b14355a 100644
--- a/src/views/modules/erf/expApplyApproval.vue
+++ b/src/views/modules/erf/expApplyApproval.vue
@@ -1,181 +1,248 @@
 <template>
-  <div class="mod-config">
+  <div class="approval-container">
+    <!-- 页面标题和统计 -->
+    <div class="page-header">
+      <div class="header-left">
+        <h2 class="page-title">
+          <i class="el-icon-tickets"></i> 经理审批
+        </h2>
+        <p class="page-subtitle">试验申请审批管理</p>
+      </div>
+      <div class="header-right">
+        <div class="stat-cards">
+          <div class="stat-card stat-total">
+            <div class="stat-icon"><i class="el-icon-document"></i></div>
+            <div class="stat-content">
+              <div class="stat-value">{{ totalPage }}</div>
+              <div class="stat-label">待处理总数</div>
+            </div>
+          </div>
+          <div class="stat-card stat-high-risk">
+            <div class="stat-icon"><i class="el-icon-warning"></i></div>
+            <div class="stat-content">
+              <div class="stat-value">{{ highRiskCount }}</div>
+              <div class="stat-label">高风险试验</div>
+            </div>
+          </div>
+          <div class="stat-card stat-low-risk">
+            <div class="stat-icon"><i class="el-icon-success"></i></div>
+            <div class="stat-content">
+              <div class="stat-value">{{ lowRiskCount }}</div>
+              <div class="stat-label">低风险试验</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 查询条件表单 -->
-    <el-form :inline="true" label-position="top">
-      <el-form-item label="申请单号">
-        <el-input v-model="queryHeaderData.applyNo" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
-      </el-form-item>
-
-      <el-form-item label="事业部">
-        <el-select v-model="queryHeaderData.buNo" placeholder="请选择" clearable style="width: 120px">
-          <el-option label="全部" value=""></el-option>
-          <el-option
-            v-for="i in buList"
-            :key="i.buNo"
-            :label="i.buDesc"
-            :value="i.buNo">
-          </el-option>
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="试验类型">
-        <el-select v-model="queryHeaderData.experimentType" placeholder="请选择" clearable style="width: 120px">
-          <el-option label="全部" value=""></el-option>
-          <el-option label="High Risk" value="High Risk"></el-option>
-          <el-option label="Low Risk" value="Low Risk"></el-option>
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="试验名称">
-        <el-input v-model="queryHeaderData.title" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
-      </el-form-item>
-
-      <el-form-item label="项目编号">
-        <el-input v-model="queryHeaderData.projectNo" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
-      </el-form-item>
-
-      <el-form-item label="产品型号">
-        <el-input v-model="queryHeaderData.productType" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
-      </el-form-item>
-
-      <el-form-item label="申请人">
-        <el-input v-model="queryHeaderData.creatorName" placeholder="支持模糊查询" clearable style="width: 120px"></el-input>
-      </el-form-item>
-
-      <el-form-item label="申请开始日期">
-        <el-date-picker
-          v-model="queryHeaderData.createStartDate"
-          type="date"
-          placeholder="选择日期"
-          value-format="yyyy-MM-dd"
-          style="width: 150px">
-        </el-date-picker>
-      </el-form-item>
-
-      <el-form-item label="申请结束日期">
-        <el-date-picker
-          v-model="queryHeaderData.createEndDate"
-          type="date"
-          placeholder="选择日期"
-          value-format="yyyy-MM-dd"
-          style="width: 150px">
-        </el-date-picker>
-      </el-form-item>
-
-      <el-form-item label=" ">
-        <el-button @click="getDataList('Y')" type="primary">查询</el-button>
-        <el-button @click="resetQuery()" type="default">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 待办申请单表格 -->
-    <el-table
-      :data="dataList"
-      v-loading="dataListLoading"
-      border
-      stripe
-      style="width: 100%;"
-      :height="height">
-
-      <el-table-column
-        label="操作"
-        width="120"
-        align="center"
-        header-align="center"
-        fixed="left">
-        <template slot-scope="scope">
-          <a type="text" size="small" @click="openApprovalDialog(scope.row)">审批</a>
-        </template>
-      </el-table-column>
-
-      <el-table-column
-        prop="applyNo"
-        label="申请单号"
-        width="140"
-        align="center"
-        header-align="center"
-        show-overflow-tooltip>
-      </el-table-column>
-
-      <el-table-column
-        prop="buDesc"
-        label="事业部"
-        width="80"
-        align="center"
-        header-align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="experimentType"
-        label="试验类型"
-        width="100"
-        align="center"
-        header-align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="title"
-        label="试验名称"
-        min-width="200"
-        align="left"
-        header-align="center"
-        show-overflow-tooltip>
-      </el-table-column>
-
-      <el-table-column
-        prop="projectNo"
-        label="项目编号"
-        width="120"
-        align="center"
-        header-align="center"
-        show-overflow-tooltip>
-      </el-table-column>
-
-      <el-table-column
-        prop="productType"
-        label="产品型号"
-        min-width="200"
-        align="center"
-        header-align="center"
-        show-overflow-tooltip>
-      </el-table-column>
-
-      <el-table-column
-        prop="creatorName"
-        label="申请人"
-        width="100"
-        align="center"
-        header-align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="createTime"
-        label="申请时间"
-        width="160"
-        align="center"
-        header-align="center">
-      </el-table-column>
-
-      <el-table-column
-        prop="currentStep"
-        label="当前步骤"
-        width="140"
-        align="center"
-        header-align="center">
-      </el-table-column>
-    </el-table>
+    <div class="search-section">
+      <el-collapse v-model="searchExpanded">
+        <el-collapse-item name="1">
+          <template slot="title">
+            <i class="el-icon-search"></i>
+            <span style="margin-left: 8px; font-weight: 500;">筛选条件</span>
+          </template>
+          <el-form :inline="true" label-position="top" class="search-form">
+            <el-form-item label="申请单号">
+              <el-input v-model="queryHeaderData.applyNo" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
+            </el-form-item>
+
+            <el-form-item label="事业部">
+              <el-select v-model="queryHeaderData.buNo" placeholder="请选择" clearable style="width: 120px">
+                <el-option label="全部" value=""></el-option>
+                <el-option
+                  v-for="i in buList"
+                  :key="i.buNo"
+                  :label="i.buDesc"
+                  :value="i.buNo">
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="试验类型">
+              <el-select v-model="queryHeaderData.experimentType" placeholder="请选择" clearable style="width: 120px">
+                <el-option label="全部" value=""></el-option>
+                <el-option label="High Risk" value="High Risk"></el-option>
+                <el-option label="Low Risk" value="Low Risk"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="试验名称">
+              <el-input v-model="queryHeaderData.title" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
+            </el-form-item>
+
+            <el-form-item label="项目编号">
+              <el-input v-model="queryHeaderData.projectNo" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
+            </el-form-item>
+
+            <el-form-item label="产品型号">
+              <el-input v-model="queryHeaderData.productType" placeholder="支持模糊查询" clearable style="width: 150px"></el-input>
+            </el-form-item>
+
+            <el-form-item label="申请人">
+              <el-input v-model="queryHeaderData.creatorName" placeholder="支持模糊查询" clearable style="width: 120px"></el-input>
+            </el-form-item>
+
+            <el-form-item label="申请开始日期">
+              <el-date-picker
+                v-model="queryHeaderData.createStartDate"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+                style="width: 150px">
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="申请结束日期">
+              <el-date-picker
+                v-model="queryHeaderData.createEndDate"
+                type="date"
+                placeholder="选择日期"
+                value-format="yyyy-MM-dd"
+                style="width: 150px">
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label=" ">
+              <el-button @click="getDataList('Y')" type="primary" icon="el-icon-search">查询</el-button>
+              <el-button @click="resetQuery()" type="default" icon="el-icon-refresh-left">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+
+    <!-- 卡片列表 -->
+    <div class="cards-container" v-loading="dataListLoading">
+      <transition-group name="card-list" tag="div" class="cards-grid">
+        <div
+          v-for="item in dataList"
+          :key="item.applyNo"
+          class="approval-card"
+          :class="{'high-risk': item.experimentType === 'High Risk'}"
+          @click="openApprovalDialog(item)">
+
+          <!-- 卡片头部 -->
+          <div class="card-header">
+            <div class="card-title-area">
+              <el-tag
+                :type="item.experimentType === 'High Risk' ? 'danger' : 'success'"
+                size="middle"
+                effect="dark"
+                class="risk-tag">
+                <i :class="item.experimentType === 'High Risk' ? 'el-icon-warning' : 'el-icon-success'"></i>
+                {{ item.experimentType }}
+              </el-tag>
+              <span class="apply-no">{{ item.applyNo }}</span>
+            </div>
+            <el-badge
+              :value="item.attachmentCount || 0"
+              :hidden="!item.attachmentCount"
+              class="attachment-badge">
+              <el-button
+                type="text"
+                icon="el-icon-paperclip"
+                class="attachment-btn"
+                @click.stop="openAttachmentDialog(item)">
+                附件
+              </el-button>
+            </el-badge>
+          </div>
+
+          <!-- 卡片主体内容 -->
+          <div class="card-body">
+            <h3 class="experiment-title">
+              <i class="el-icon-document"></i>
+              {{ item.title }}
+            </h3>
+
+            <div class="card-details">
+              <div class="detail-row">
+                <span class="detail-label">
+                  <i class="el-icon-box"></i>
+                  项目编号
+                </span>
+                <span class="detail-value">{{ item.projectNo || '-' }}</span>
+              </div>
+
+              <div class="detail-row">
+                <span class="detail-label">
+                  <i class="el-icon-goods"></i>
+                  产品型号
+                </span>
+                <span class="detail-value" :title="item.productType">{{ item.productType || '-' }}</span>
+              </div>
+
+              <div class="detail-row">
+                <span class="detail-label">
+                  <i class="el-icon-user"></i>
+                  申请人
+                </span>
+                <span class="detail-value">{{ item.creatorName }}</span>
+              </div>
+
+              <div class="detail-row">
+                <span class="detail-label">
+                  <i class="el-icon-time"></i>
+                  申请时间
+                </span>
+                <span class="detail-value">{{ item.createTime }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 卡片底部 -->
+          <div class="card-footer">
+            <div class="current-step">
+              <i class="el-icon-position"></i>
+              {{ item.currentStep }}
+            </div>
+            <div class="action-buttons">
+              <el-button
+                type="success"
+                size="small"
+                plain
+                icon="el-icon-check"
+                class="approve-btn"
+                @click.stop="quickApprove(item)">
+                通过
+              </el-button>
+              <el-button
+                type="danger"
+                size="small"
+                plain
+                icon="el-icon-close"
+                class="reject-btn"
+                @click.stop="openRejectDialog(item)">
+                驳回
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </transition-group>
+
+      <!-- 空状态 -->
+      <div v-if="!dataListLoading && dataList.length === 0" class="empty-state">
+        <i class="el-icon-document-checked empty-icon"></i>
+        <p class="empty-text">暂无待办事项</p>
+        <p class="empty-subtext">您已完成所有审批任务</p>
+      </div>
+    </div>
 
     <!-- 分页组件 -->
-    <el-pagination
-      @size-change="sizeChangeHandle"
-      @current-change="currentChangeHandle"
-      :current-page="pageIndex"
-      :page-sizes="[20, 50, 100]"
-      :page-size="pageSize"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper"
-      style="margin-top: 20px; text-align: right;">
-    </el-pagination>
+    <div class="pagination-wrapper" v-if="dataList.length > 0">
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper"
+        background>
+      </el-pagination>
+    </div>
 
     <!-- 审批弹窗 -->
     <el-dialog
@@ -245,12 +312,136 @@
         <el-button type="primary" @click="approvalDialogVisible = false" :disabled="approvalLoading">关闭</el-button>
       </el-footer>
     </el-dialog>
+
+    <!-- 驳回原因弹窗 -->
+    <el-dialog
+      title="驳回申请"
+      :visible.sync="rejectDialogVisible"
+      width="500px"
+      :close-on-click-modal="false">
+      <el-form label-position="top">
+        <el-form-item label="驳回原因" required>
+          <el-input
+            v-model="rejectReason"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入驳回原因"
+            maxlength="500"
+            show-word-limit>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer" style="height: 40px; margin-top: 50px; text-align: center">
+        <el-button @click="rejectDialogVisible = false">取消</el-button>
+        <el-button type="danger" @click="confirmReject" :loading="approvalLoading">
+          {{ approvalLoading ? '驳回中...' : '确认驳回' }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 附件查看弹窗 -->
+    <el-dialog
+      :title="`附件列表 - ${currentAttachmentApplyNo}`"
+      :visible.sync="attachmentDialogVisible"
+      width="900px"
+      :close-on-click-modal="false"
+      append-to-body>
+      <div v-loading="attachmentLoading">
+        <el-table
+          :data="attachmentList"
+          border class="approval-logs-table"
+          stripe
+          style="width: 100%"
+          max-height="500px">
+          <el-table-column
+            type="index"
+            label="序号"
+            width="60"
+            align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="fileName"
+            label="文件名"
+            min-width="200"
+            align="left"
+            header-align="center"
+            show-overflow-tooltip>
+            <template slot-scope="scope">
+              <i :class="getFileIcon(scope.row.fileType)" style="margin-right: 5px;"></i>
+              {{ scope.row.fileName }}
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="fileType"
+            label="文件类型"
+            width="100"
+            align="center"
+            header-align="center">
+            <template slot-scope="scope">
+              <el-tag size="small" type="info">{{ scope.row.fileType }}</el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="createdBy"
+            label="上传人"
+            width="100"
+            align="center"
+            header-align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="createDate"
+            label="上传时间"
+            width="160"
+            align="center"
+            header-align="center">
+          </el-table-column>
+
+          <el-table-column
+            label="操作"
+            width="150"
+            align="center"
+            header-align="center">
+            <template slot-scope="scope">
+              <a
+                type="text"
+                size="small"
+                icon="el-icon-view"
+                @click="previewAttachment(scope.row)">
+                预览
+              </a>
+              <a
+                type="text"
+                size="small"
+                icon="el-icon-download"
+                @click="downloadAttachment(scope.row)">
+                下载
+              </a>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 空状态 -->
+        <div v-if="!attachmentLoading && attachmentList.length === 0" class="empty-attachment">
+          <i class="el-icon-folder-opened" style="font-size: 48px; color: #c0c4cc;"></i>
+          <p style="margin-top: 10px; color: #909399;">暂无附件</p>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="attachmentDialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getPendingApplyList, approveExpApply } from '@/api/erf/erf'
+import { getPendingApplyList, approveExpApply, getCurrentNodeCode } from '@/api/erf/erf'
 import { getBuList } from '@/api/factory/site'
+import { queryOss, previewOssFileById, previewOssFileById2 } from '@/api/oss/oss'
 import ApprovalHistory from './components/approvalHistory.vue'
 
 export default {
@@ -264,6 +455,8 @@ export default {
     return {
       buList: [],
       activeTab: 'basic',
+      searchExpanded: ['0'], // 搜索条件默认展开
+
       // 查询条件
       queryHeaderData: {
         applyNo: '',
@@ -303,8 +496,32 @@ export default {
       },
       approvalLoading: false,
 
-      // 表格高度
-      height: window.innerHeight - 260
+      // 驳回弹窗
+      rejectDialogVisible: false,
+      rejectReason: '',
+      rejectApplyData: {}, // 暂存待驳回的申请单信息
+
+      // 附件查看弹窗
+      attachmentDialogVisible: false,
+      attachmentLoading: false,
+      attachmentList: [],
+      currentAttachmentApplyNo: ''
+    }
+  },
+
+  computed: {
+    /**
+     * 计算高风险试验数量
+     */
+    highRiskCount() {
+      return this.dataList.filter(item => item.experimentType === 'High Risk').length
+    },
+
+    /**
+     * 计算低风险试验数量
+     */
+    lowRiskCount() {
+      return this.dataList.filter(item => item.experimentType === 'Low Risk').length
     }
   },
 
@@ -345,6 +562,9 @@ export default {
         if (data && data.code === 0) {
           this.dataList = data.page.list || []
           this.totalPage = data.page.totalCount || 0
+
+          // 为每个申请单查询附件数量
+          this.loadAttachmentCounts()
         } else {
           this.dataList = []
           this.totalPage = 0
@@ -356,6 +576,27 @@ export default {
       })
     },
 
+    /**
+     * 批量加载附件数量
+     */
+    loadAttachmentCounts() {
+      this.dataList.forEach(item => {
+        const params = {
+          orderRef1: 'ERF',
+          orderRef2: item.applyNo,
+          orderRef6: 'EXP_APPLY'
+        }
+
+        queryOss(params).then(({data}) => {
+          if (data && data.code === 0) {
+            this.$set(item, 'attachmentCount', data.rows ? data.rows.length : 0)
+          }
+        }).catch(() => {
+          this.$set(item, 'attachmentCount', 0)
+        })
+      })
+    },
+
     /**
      * 重置查询条件
      */
@@ -379,19 +620,112 @@ export default {
       this.currentApply = { ...row }
 
       // 查询当前流程实例，获取正确的节点编码
-      this.getCurrentNodeCode(row.applyNo)
+      this.loadCurrentNodeCode(row.applyNo)
+    },
+
+    /**
+     * 快速通过 - 不需要输入原因
+     */
+    quickApprove(row) {
+      this.$confirm('确认通过该申请单？', '操作提示', {
+        confirmButtonText: '确定通过',
+        cancelButtonText: '取消',
+        type: 'success'
+      }).then(() => {
+        // 获取当前节点编码并执行通过操作
+        getCurrentNodeCode({ applyNo: row.applyNo }).then(({data}) => {
+          if (data && data.code === 0) {
+            const approvalData = {
+              applyNo: row.applyNo,
+              nodeCode: data.nodeCode,
+              action: '批准',
+              comment: '批准通过', // 默认审批意见
+              operatorUserId: this.$store.state.user.id,
+              operatorName: this.$store.state.user.name
+            }
+
+            this.approvalLoading = true
+            approveExpApply(approvalData).then(({data}) => {
+              this.approvalLoading = false
+              if (data && data.code === 0) {
+                this.$message.success('审批成功')
+                this.getDataList()
+              } else {
+                this.$message.error(data.msg || '审批失败')
+              }
+            }).catch(error => {
+              this.approvalLoading = false
+              this.$message.error('审批异常')
+            })
+          } else {
+            this.$message.error('获取节点信息失败')
+          }
+        }).catch(error => {
+          this.$message.error('获取节点信息异常')
+        })
+      }).catch(() => {
+        // 取消操作
+      })
+    },
+
+    /**
+     * 打开驳回弹框
+     */
+    openRejectDialog(row) {
+      this.rejectApplyData = { ...row }
+      this.rejectReason = ''
+      this.rejectDialogVisible = true
+    },
+
+    /**
+     * 确认驳回
+     */
+    confirmReject() {
+      if (!this.rejectReason || this.rejectReason.trim() === '') {
+        this.$message.warning('请输入驳回原因')
+        return
+      }
+
+      // 获取当前节点编码并执行驳回操作
+      getCurrentNodeCode({ applyNo: this.rejectApplyData.applyNo }).then(({data}) => {
+        if (data && data.code === 0) {
+          const approvalData = {
+            applyNo: this.rejectApplyData.applyNo,
+            nodeCode: data.nodeCode,
+            action: '驳回',
+            comment: this.rejectReason,
+            operatorUserId: this.$store.state.user.id,
+            operatorName: this.$store.state.user.name
+          }
+
+          this.approvalLoading = true
+          approveExpApply(approvalData).then(({data}) => {
+            this.approvalLoading = false
+            if (data && data.code === 0) {
+              this.$message.success('驳回成功')
+              this.rejectDialogVisible = false
+              this.getDataList()
+            } else {
+              this.$message.error(data.msg || '驳回失败')
+            }
+          }).catch(error => {
+            this.approvalLoading = false
+            this.$message.error('驳回异常')
+          })
+        } else {
+          this.$message.error('获取节点信息失败')
+        }
+      }).catch(error => {
+        this.$message.error('获取节点信息异常')
+      })
     },
 
     /**
-     * 获取当前节点编码
+     * 加载当前节点编码并打开审批弹窗
      */
-    getCurrentNodeCode(applyNo) {
+    loadCurrentNodeCode(applyNo) {
       // 调用API获取流程实例的当前节点
-      this.$http({
-        url: this.$http.adornUrl('/erf/expApply/getCurrentNodeCode'),
-        method: 'post',
-        data: this.$http.adornData({ applyNo: applyNo })
-      }).then(({data}) => {
+      getCurrentNodeCode({ applyNo: applyNo }).then(({data}) => {
         if (data && data.code === 0) {
           this.approvalData = {
             applyNo: applyNo,
@@ -405,6 +739,8 @@ export default {
         } else {
           this.$message.error('获取节点信息失败')
         }
+      }).catch(error => {
+        this.$message.error('获取节点信息异常')
       })
     },
 
@@ -470,21 +806,722 @@ export default {
     currentChangeHandle(val) {
       this.pageIndex = val
       this.getDataList()
+    },
+
+    /**
+     * 打开附件查看弹窗（智能判断：单个附件直接预览，多个附件打开列表）
+     */
+    openAttachmentDialog(row) {
+      this.currentAttachmentApplyNo = row.applyNo
+
+      // 先查询附件列表
+      const params = {
+        orderRef1: 'ERF',
+        orderRef2: row.applyNo,
+        orderRef6: 'EXP_APPLY'
+      }
+
+      this.attachmentLoading = true
+      queryOss(params).then(({data}) => {
+        this.attachmentLoading = false
+        if (data && data.code === 0) {
+          const attachmentList = data.rows || []
+
+          if (attachmentList.length === 0) {
+            // 没有附件
+            this.$message.info('该申请单暂无附件')
+          } else if (attachmentList.length === 1) {
+            // 只有一个附件，直接预览
+            this.previewAttachment(attachmentList[0])
+          } else {
+            // 多个附件，打开列表弹窗
+            this.attachmentList = attachmentList
+            this.attachmentDialogVisible = true
+          }
+        } else {
+          this.$message.warning(data.msg || '查询附件失败')
+        }
+      }).catch(error => {
+        this.attachmentLoading = false
+        this.$message.error('查询附件异常')
+      })
+    },
+
+    /**
+     * 加载附件列表（用于弹窗内刷新）
+     */
+    loadAttachments(applyNo) {
+      const params = {
+        orderRef1: 'ERF',
+        orderRef2: applyNo,
+        orderRef6: 'EXP_APPLY'
+      }
+
+      this.attachmentLoading = true
+      queryOss(params).then(({data}) => {
+        this.attachmentLoading = false
+        if (data && data.code === 0) {
+          this.attachmentList = data.rows || []
+        } else {
+          this.attachmentList = []
+          this.$message.warning(data.msg || '查询附件失败')
+        }
+      }).catch(error => {
+        this.attachmentLoading = false
+        this.$message.error('查询附件异常')
+      })
+    },
+
+    /**
+     * 获取文件图标
+     */
+    getFileIcon(fileType) {
+      const type = fileType.toLowerCase()
+
+      // 图片类型
+      if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(type)) {
+        return 'el-icon-picture-outline'
+      }
+
+      // PDF类型
+      if (type === 'pdf') {
+        return 'el-icon-document'
+      }
+
+      // Word类型
+      if (['doc', 'docx'].includes(type)) {
+        return 'el-icon-document'
+      }
+
+      // Excel类型
+      if (['xls', 'xlsx'].includes(type)) {
+        return 'el-icon-tickets'
+      }
+
+      // CAD类型
+      if (['dwg', 'dxf'].includes(type)) {
+        return 'el-icon-edit-outline'
+      }
+
+      // 默认文件图标
+      return 'el-icon-document'
+    },
+
+    /**
+     * 预览附件
+     */
+    previewAttachment(row) {
+      let type = ''
+      let fileType = row.fileType.toLowerCase()
+
+      // 图片类型
+      let image = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
+      if (image.includes(fileType)) {
+        type = 'image/' + fileType
+      }
+
+      // PDF类型
+      if (fileType === 'pdf') {
+        type = 'application/pdf;charset-UTF-8'
+      }
+
+      // Excel类型
+      if (fileType === 'xlsx' || fileType === 'xls') {
+        type = 'excel'
+      }
+
+      // Word类型
+      if (fileType === 'docx') {
+        type = 'word'
+      }
+
+      // Office文件不支持预览
+      if (fileType === 'doc' || fileType === 'ppt' || fileType === 'pptx') {
+        this.$message.warning('该文件格式暂不支持预览，请下载后查看')
+        return
+      }
+
+      // CAD文件不支持预览
+      if (fileType === 'dwg' || fileType === 'dxf') {
+        this.$message.warning('CAD文件暂不支持预览，请下载后使用CAD软件查看')
+        return
+      }
+
+      if (type === '') {
+        this.$message.warning('该文件格式暂不支持预览')
+        return
+      }
+
+      let params = {
+        id: row.id,
+        fileType: type
+      }
+
+      previewOssFileById2(params).then(({data}) => {
+        if (type === 'excel' || type === 'word') {
+          type = 'application/pdf;charset-UTF-8'
+        }
+        const blob = new Blob([data], { type: type })
+        const fileURL = URL.createObjectURL(blob)
+
+        // 在新标签页中打开文件预览
+        window.open(fileURL, '_blank')
+      }).catch(error => {
+        this.$message.error('预览失败')
+      })
+    },
+
+    /**
+     * 下载附件
+     */
+    downloadAttachment(row) {
+      let params = {
+        id: row.id
+      }
+
+      previewOssFileById(params).then((response) => {
+        const blob = new Blob([response.data], { type: response.headers['content-type'] })
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.setAttribute('download', row.fileName)
+        link.target = '_blank'
+        link.click()
+        URL.revokeObjectURL(link.href)
+        this.$message.success('下载成功')
+      }).catch(error => {
+        this.$message.error('下载失败')
+      })
     }
   }
 }
 </script>
 
 <style scoped>
-.mod-config {
+/* 整体容器 */
+.approval-container {
+  padding: 15px;
+  background: #f5f7fa;
+  min-height: calc(100vh - 80px);
+}
+
+/* ===== 页面头部 ===== */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 5px 20px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+}
+
+.header-left {
+  color: #303133;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.page-title i {
+  font-size: 22px;
+  color: #409EFF;
+}
+
+.page-subtitle {
+  margin: 6px 0 0 0;
+  font-size: 13px;
+  color: #909399;
+}
+
+.header-right {
+  display: flex;
+  gap: 12px;
+}
+
+/* ===== 统计卡片 ===== */
+.stat-cards {
+  display: flex;
+  gap: 12px;
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  min-width: 140px;
+}
+
+.stat-card:hover {
+  border-color: #409EFF;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+}
+
+.stat-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-size: 20px;
+  color: white;
+}
+
+.stat-total .stat-icon {
+  background: #409EFF;
+}
+
+.stat-high-risk .stat-icon {
+  background: #F56C6C;
+}
+
+.stat-low-risk .stat-icon {
+  background: #67C23A;
+}
+
+.stat-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+/* ===== 搜索区域 ===== */
+.search-section {
+  margin-bottom: 15px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+  overflow: hidden;
+}
+
+.search-section >>> .el-collapse-item__header {
+  padding: 0 15px;
+  height: 45px;
+  line-height: 45px;
+  background: white;
+  border-bottom: 1px solid #ebeef5;
+  font-size: 13px;
+  color: #303133;
+  font-weight: 500;
+}
+
+.search-section >>> .el-collapse-item__content {
+  padding: 15px;
+  background: #FFFFFF;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.search-form >>> .el-form-item {
+  margin-bottom: 10px;
+}
+
+/* ===== 卡片容器 ===== */
+.cards-container {
+  min-height: 400px;
+  position: relative;
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+/* ===== 审批卡片 ===== */
+.approval-card {
+  background: white;
+  border-radius: 4px;
+  padding: 18px;
+  border: 1px solid #EBEEF5;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.approval-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  background: #67C23A;
+  transition: all 0.3s ease;
+}
+
+.approval-card.high-risk::before {
+  background: #F56C6C;
+}
+
+.approval-card:hover {
+  border-color: #409EFF;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+}
+
+/* 卡片头部 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.card-title-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.risk-tag {
+  font-weight: 500;
+  padding: 0px 10px;
+  font-size: 14px;
+}
+
+.risk-tag i {
+  margin-right: 4px;
+}
+
+.apply-no {
+  font-size: 13px;
+  color: #606266;
+  font-family: 'Courier New', monospace;
+  font-weight: 500;
+}
+
+/* 附件徽章 */
+.attachment-badge {
+  cursor: pointer;
+}
+
+.attachment-btn {
+  padding: 4px 12px;
+  font-size: 12px;
+  color: #909399;
+  transition: all 0.3s ease;
+}
+
+.attachment-btn:hover {
+  color: #409EFF;
+}
+
+.attachment-btn i {
+  margin-right: 4px;
+  font-size: 14px;
+}
+
+/* 附件弹窗空状态 */
+.empty-attachment {
+  text-align: center;
+  padding: 60px 20px;
+}
 
+/* 卡片主体 */
+.card-body {
+  //margin-bottom: 14px;
 }
 
-.el-form {
-  margin-bottom: 20px;
+.experiment-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 14px 0;
+  line-height: 1.5;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  //min-height: 45px;
 }
 
+.experiment-title i {
+  color: #409EFF;
+  margin-top: 2px;
+  font-size: 16px;
+}
+
+.card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  padding: 6px 10px;
+  background: #F5F7FA;
+  border-radius: 3px;
+  transition: all 0.2s ease;
+}
+
+.detail-row:hover {
+  background: #ECF5FF;
+}
+
+.detail-label {
+  color: #909399;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 500;
+}
+
+.detail-label i {
+  color: #409EFF;
+  font-size: 14px;
+}
+
+.detail-value {
+  color: #606266;
+  font-weight: 500;
+  text-align: right;
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 卡片底部 */
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 10px;
+  border-top: 1px solid #EBEEF5;
+}
+
+.current-step {
+  font-size: 12px;
+  color: #909399;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.current-step i {
+  color: #409EFF;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.approve-btn {
+  background: #f0f9ff;
+  border-color: #b3e19d;
+  color: #67C23A;
+  font-weight: 500;
+  padding: 7px 16px;
+  font-size: 13px;
+  transition: all 0.3s ease;
+}
+
+.approve-btn:hover {
+  background: #67C23A;
+  border-color: #67C23A;
+  color: #FFFFFF;
+}
+
+.reject-btn {
+  background: #fef0f0;
+  border-color: #fbc4c4;
+  color: #F56C6C;
+  font-weight: 500;
+  padding: 7px 16px;
+  font-size: 13px;
+  transition: all 0.3s ease;
+}
+
+.reject-btn:hover {
+  background: #F56C6C;
+  border-color: #F56C6C;
+  color: #FFFFFF;
+}
+
+/* ===== 空状态 ===== */
+.empty-state {
+  text-align: center;
+  padding: 80px 20px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+}
+
+.empty-icon {
+  font-size: 64px;
+  color: #c0c4cc;
+  margin-bottom: 12px;
+}
+
+.empty-text {
+  font-size: 15px;
+  color: #606266;
+  margin: 0 0 6px 0;
+  font-weight: 500;
+}
+
+.empty-subtext {
+  font-size: 13px;
+  color: #909399;
+  margin: 0;
+}
+
+/* ===== 分页 ===== */
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 15px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+}
+
+/* ===== 卡片动画 ===== */
+.card-list-enter-active {
+  animation: cardFadeIn 0.4s ease;
+}
+
+.card-list-leave-active {
+  animation: cardFadeOut 0.3s ease;
+}
+
+@keyframes cardFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cardFadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* ===== 响应式设计 ===== */
+@media screen and (max-width: 1600px) {
+  .cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
+
+  .page-header {
+    flex-direction: column;
+    gap: 15px;
+    align-items: flex-start;
+  }
+
+  .stat-cards {
+    width: 100%;
+    overflow-x: auto;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .cards-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stat-cards {
+    flex-direction: column;
+  }
+
+  .stat-card {
+    width: 100%;
+  }
+}
+
+/* ===== 弹窗样式优化 ===== */
 .dialog-footer {
   text-align: right;
 }
+
+/* 表头样式 - 深灰色背景，白色文字 */
+.approval-logs-table >>> .el-table__header-wrapper th,
+.approval-logs-table >>> .el-table__header-wrapper .el-table__cell {
+  background-color: #F5F7FA !important;
+  color: #606266 !important;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* 数据行样式 - 更高的行高防止遮挡 */
+.approval-logs-table >>> .el-table__body-wrapper .el-table__row {
+  height: 40px !important;
+}
+
+.approval-logs-table >>> .el-table__body-wrapper td,
+.approval-logs-table >>> .el-table__body-wrapper .el-table__cell {
+  height: 40px !important;
+  padding: 0 !important;
+}
+
+/* 关键修复：cell容器要有足够的padding和overflow可见 */
+.approval-logs-table >>> .el-table__body-wrapper .cell {
+  padding: 1px 12px !important;
+  line-height: 24px !important;
+  overflow: visible !important;
+  height: auto !important;
+}
+
+/* 标签样式 - 确保不被遮挡 */
+.approval-logs-table >>> .el-tag {
+  vertical-align: middle !important;
+  display: inline-block !important;
+  margin: 2px 0 !important;
+}
+
+/* 悬停效果 */
+.approval-logs-table >>> .el-table__body tr:hover > td {
+  background-color: #f5f7fa !important;
+}
 </style>
diff --git a/src/views/modules/erf/expApplyList.vue b/src/views/modules/erf/expApplyList.vue
index 1fba138..cb2f2ac 100644
--- a/src/views/modules/erf/expApplyList.vue
+++ b/src/views/modules/erf/expApplyList.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="mod-config">
+  <div class="mod-config exp-apply-page">
     <!-- 查询条件表单 -->
-    <el-form :inline="true" label-position="top">
+    <el-form :inline="true" label-position="top" class="query-form">
       <el-form-item label="申请单号">
         <el-input v-model="queryHeaderData.applyNo" placeholder="请输入申请单号" clearable style="width: 150px"></el-input>
       </el-form-item>
@@ -72,10 +72,10 @@
         </el-date-picker>
       </el-form-item>
 
-      <el-form-item label=" ">
-        <el-button @click="getDataList('Y')" type="primary">查询</el-button>
-        <el-button @click="resetQuery()" type="default">重置</el-button>
-        <el-button @click="openCreateDialog()" type="primary">新增申请单</el-button>
+      <el-form-item label=" " style="margin-top: -11px">
+        <el-button @click="getDataList('Y')" type="primary" plain class="search-btn">查询</el-button>
+        <el-button @click="resetQuery()" plain class="reset-btn">重置</el-button>
+        <el-button @click="openCreateDialog()" type="success" plain class="add-btn">新增申请单</el-button>
       </el-form-item>
     </el-form>
 
@@ -87,47 +87,33 @@
       :data="dataList"
       v-loading="dataListLoading"
       border
-      stripe
+      class="data-table"
       style="width: 100%;"
       :height="tableHeight">
 
       <el-table-column
         label="操作"
-        width="180"
+        width="120"
         align="center"
-        header-align="center"
-        fixed="left">
+        header-align="center">
         <template slot-scope="scope">
-          <a type="text" size="small" @click="viewDetail(scope.row)">查看</a>
           <a
-            v-if="scope.row.status === '草稿' || scope.row.status === '已驳回'"
-            type="text"
-            size="small"
             @click="editApply(scope.row)">修改</a>
           <a
             v-if="scope.row.status === '草稿' || scope.row.status === '已驳回'"
-            type="text"
-            size="small"
-            style="color: green"
             @click="submitApply(scope.row)">{{ scope.row.status === '已驳回' ? '重新下达' : '下达' }}</a>
           <a
             v-if="scope.row.status === '草稿'"
-            type="text"
-            size="small"
-            style="color: red"
             @click="deleteApply(scope.row)">删除</a>
           <a
             v-if="scope.row.status !== '草稿' && scope.row.status !== '已完成' && scope.row.status !== '已驳回'"
-            type="text"
-            size="small"
-            style="color: orange"
             @click="withdrawApply(scope.row)">撤回</a>
         </template>
       </el-table-column>
       <el-table-column
         prop="buDesc"
         label="事业部"
-        width="80"
+        width="70"
         align="center"
         header-align="center">
       </el-table-column>
@@ -151,14 +137,14 @@
         prop="experimentType"
         label="试验类型"
         width="100"
-        align="center"
+        align="center" show-overflow-tooltip
         header-align="center">
       </el-table-column>
 
       <el-table-column
         prop="title"
         label="试验名称"
-        min-width="200"
+        min-width="120"
         align="left"
         header-align="center"
         show-overflow-tooltip>
@@ -167,7 +153,7 @@
       <el-table-column
         prop="projectNo"
         label="项目编号"
-        width="120"
+        width="100"
         align="center"
         header-align="center"
         show-overflow-tooltip>
@@ -176,7 +162,7 @@
       <el-table-column
         prop="productType"
         label="产品型号"
-        min-width="200"
+        min-width="220"
         align="center"
         header-align="center"
         show-overflow-tooltip>
@@ -201,8 +187,8 @@
       <el-table-column
         prop="createTime"
         label="创建时间"
-        width="120"
-        align="center"
+        min-width="100"
+        align="center" show-overflow-tooltip
         header-align="center">
       </el-table-column>
     </el-table>
@@ -227,7 +213,7 @@
       @tab-click="handleTabClick">
 
       <!-- Tab 1: 项目详情 -->
-      <el-tab-pane :label="getProjectDetailLabel()" name="projectDetail">
+<!--      <el-tab-pane :label="getProjectDetailLabel()" name="projectDetail">
         <exp-project-detail
           v-if="currentRow.applyNo"
           ref="projectDetail"
@@ -239,8 +225,19 @@
         <div v-else class="empty-tip">
           请在上方表格中选择一条申请单记录
         </div>
+      </el-tab-pane>-->
+      <el-tab-pane label="附件上传" name="attachment">
+        <erf-attachment-manager
+          v-if="currentRow.applyNo"
+          ref="attachmentManager"
+          :apply-no="currentRow.applyNo"
+          :disabled="false"
+          :height="detailHeight">
+        </erf-attachment-manager>
+        <div v-else class="empty-tip">
+          请在上方表格中选择一条申请单记录
+        </div>
       </el-tab-pane>
-
       <!-- Tab 2: 三方确认 -->
       <el-tab-pane label="三方确认"  v-if="currentRow.experimentType==='High Risk'" name="triConfirm">
         <exp-tri-confirm
@@ -254,19 +251,8 @@
         </div>
       </el-tab-pane>
 
-      <!-- Tab 3: 附件图纸上传 -->
-      <el-tab-pane label="附件图纸上传" name="attachment">
-        <erf-attachment-manager
-          v-if="currentRow.applyNo"
-          ref="attachmentManager"
-          :apply-no="currentRow.applyNo"
-          :disabled="false"
-          :height="detailHeight">
-        </erf-attachment-manager>
-        <div v-else class="empty-tip">
-          请在上方表格中选择一条申请单记录
-        </div>
-      </el-tab-pane>
+      <!-- Tab 3: 附件上传 -->
+
 
       <!-- Tab 4: 审批状态和日志 -->
       <el-tab-pane label="审批状态和日志" name="approvalStatus">
@@ -506,10 +492,10 @@ export default {
       currentRow: {},
 
       // Tab页签
-      activeName: 'projectDetail',
+      activeName: 'attachment',
 
       // 表格高度
-      tableHeight:  (window.innerHeight - 250)/2,
+      tableHeight:  (window.innerHeight - 260)/2,
       detailHeight: '35vh',
 
       // 下达确认弹窗
@@ -796,7 +782,7 @@ export default {
           if (app.checkApprovalNotifications) {
             // 延迟1秒后检查，确保后端数据已更新
             setTimeout(() => {
-              app.checkApprovalNotifications()
+              //app.checkApprovalNotifications()
               console.log('[审批通知] 已触发手动检查')
             }, 1000)
           }
@@ -904,7 +890,7 @@ export default {
         this.loadFlowStatus()
       } else {
         // 否则自动切换到项目详情tab
-        this.activeName = 'projectDetail'
+        this.activeName = 'attachment'
       }
     },
 
@@ -1072,6 +1058,191 @@ export default {
   font-size: 14px;
 }
 
+/* ==================== 页面专属样式 - 不影响全局 ==================== */
+
+/* 查询表单样式 */
+.exp-apply-page .query-form {
+  background-color: #FFFFFF;
+  padding: 15px 15px 5px 15px;
+  border-radius: 4px;
+}
+
+.exp-apply-page .query-form >>> .el-form-item__label {
+  color: #333333;
+  font-size: 13px;
+  padding-bottom: 5px;
+}
+
+.exp-apply-page .query-form >>> .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  font-size: 13px;
+}
+
+.exp-apply-page .query-form >>> .el-input__inner::placeholder {
+  color: #C0C4CC;
+  font-size: 13px;
+}
+
+.exp-apply-page .query-form >>> .el-select .el-input__inner {
+  border-radius: 4px;
+}
+
+.exp-apply-page .query-form >>> .el-date-editor .el-input__inner {
+  border-radius: 4px;
+}
+
+/* 按钮样式 - 扁平化风格 */
+.exp-apply-page >>> .el-button {
+  height: 32px;
+  padding: 0 15px;
+  font-size: 13px;
+  border-radius: 4px;
+}
+
+/* 查询按钮 - 蓝色扁平 */
+.exp-apply-page .search-btn {
+  background-color: #ECF5FF;
+  border-color: #B3D8FF;
+  color: #409EFF;
+}
+
+.exp-apply-page .search-btn:hover {
+  background-color: #409EFF;
+  border-color: #409EFF;
+  color: #FFFFFF;
+}
+
+/* 重置按钮 - 灰色扁平 */
+.exp-apply-page .reset-btn {
+  background-color: #F5F7FA;
+  border-color: #D3D4D6;
+  color: #606266;
+}
+
+.exp-apply-page .reset-btn:hover {
+  background-color: #909399;
+  border-color: #909399;
+  color: #FFFFFF;
+}
+
+/* 新增按钮 - 绿色扁平 */
+.exp-apply-page .add-btn {
+  background-color: #F0F9FF;
+  border-color: #C0E6C7;
+  color: #67C23A;
+}
+
+.exp-apply-page .add-btn:hover {
+  background-color: #67C23A;
+  border-color: #67C23A;
+  color: #FFFFFF;
+}
+
+/* 数据表格样式 */
+.exp-apply-page .data-table {
+  background-color: #FFFFFF;
+  border-radius: 4px;
+}
+
+.exp-apply-page .data-table >>> .el-table__header-wrapper th {
+  background-color: #F5F7FA !important;
+  color: #333333;
+  font-weight: 600;
+  font-size: 16px;
+  border-color: #EBEEF5;
+  padding: 10px 0;
+  height: auto;
+}
+
+/* 固定列表头也使用相同背景色 */
+.exp-apply-page .data-table >>> .el-table__fixed-header-wrapper th {
+  background-color: #F5F7FA !important;
+  color: #333333;
+  font-weight: 600;
+  font-size: 16px;
+  border-color: #EBEEF5;
+  padding: 12px 0;
+  height: auto;
+}
+
+.exp-apply-page .data-table >>> .el-table__header-wrapper .cell {
+  text-align: center;
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+}
+
+.exp-apply-page .data-table >>> .el-table__fixed-header-wrapper .cell {
+  text-align: center;
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.exp-apply-page .data-table >>> .el-table__body-wrapper td {
+  border-color: #EBEEF5;
+  padding: 12px 0;
+  font-size: 16px;
+  color: #606266;
+  height: auto;
+}
+
+/* 固定列数据行也使用相同样式 */
+.exp-apply-page .data-table >>> .el-table__fixed-body-wrapper td {
+  border-color: #EBEEF5;
+  padding: 12px 0;
+  font-size: 16px;
+  color: #606266;
+  height: auto;
+}
+
+.exp-apply-page .data-table >>> .el-table__body-wrapper .cell {
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+}
+
+.exp-apply-page .data-table >>> .el-table__fixed-body-wrapper .cell {
+  padding: 0 10px;
+  //line-height: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 操作列链接样式 - 统一蓝色样式 */
+.exp-apply-page .data-table >>> .el-table__body-wrapper a {
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 13px;
+  color: #409EFF !important;
+  white-space: nowrap;
+}
+
+.exp-apply-page .data-table >>> .el-table__body-wrapper a:hover {
+  color: #66B1FF !important;
+  text-decoration: underline;
+}
+
+.exp-apply-page .data-table >>> .el-table__body tr:hover > td {
+  background-color: #F5F7FA !important;
+}
+
+.exp-apply-page .data-table >>> .el-table__body tr.current-row > td {
+  background-color: #ECF5FF !important;
+}
+
 /* Tab样式优化 - 两栏布局 */
 
 /* 两栏布局容器 */
diff --git a/src/views/modules/sys/user-add-or-update.vue b/src/views/modules/sys/user-add-or-update.vue
index 51edf2d..4bbee07 100644
--- a/src/views/modules/sys/user-add-or-update.vue
+++ b/src/views/modules/sys/user-add-or-update.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-add-or-update">
     <el-dialog
-      width="530px"
+      width="700px"
       @close="closeDialog"
       :title="!dataForm.id ?  buttons.add :buttons.edit"
       :close-on-click-modal="false"
@@ -18,25 +18,23 @@
           <el-form-item :label="buttons.comfirmPassword||'确认密码'" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
             <el-input v-model="dataForm.comfirmPassword" style="width: 150px;" type="password"></el-input>
           </el-form-item>
-        </el-form>
-        <el-form>
           <el-form-item :label="buttons.userDisplay||'用户名'" prop="email">
             <el-input v-model="dataForm.userDisplay" style="width: 150px;" ></el-input>
           </el-form-item>
+        </el-form>
+        <el-form>
           <el-form-item :label="buttons.email||'邮箱'" prop="email">
             <el-input v-model="dataForm.email" style="width: 150px;" ></el-input>
           </el-form-item>
           <el-form-item :label="buttons.mobile||'手机号'" prop="mobile">
             <el-input v-model="dataForm.mobile" style="width: 150px;" placeholder="手机号"></el-input>
           </el-form-item>
-        </el-form>
-        <el-form>
           <el-form-item>
             <span slot="label" style="" @click="getBaseList(93)"><a herf="#">{{buttons.site||'工厂'}}</a></span>
             <el-input v-model="dataForm.site" style="width: 150px;" placeholder="工厂"></el-input>
           </el-form-item>
           <el-form-item label="车间">
-            <el-select v-model="dataForm.workShopId" placeholder="请选择"  clearable>
+            <el-select style="width: 150px;" v-model="dataForm.workShopId" placeholder="请选择"  clearable>
               <el-option
                 v-for = "i in workShopList"
                 :key = "i.workShopId"
@@ -49,11 +47,25 @@
         <el-form>
           <el-form-item label="角色" size="mini" prop="roleIdList">
             <el-checkbox-group v-model="dataForm.roleIdList">
-              <el-checkbox
-                v-for="role in roleList"
-                :key="role.roleId"
-                :label="role.roleId">{{role.roleName}}
-              </el-checkbox>
+              <!-- 其他角色组 -->
+              <div v-if="otherRoleList.length > 0">
+                <el-checkbox
+                  v-for="role in otherRoleList"
+                  :key="role.roleId"
+                  :label="role.roleId">{{role.roleName}}
+                </el-checkbox>
+              </div>
+              <!-- 工程实验申请角色组 -->
+              <div v-if="erfRoleList.length > 0" style="margin-bottom: 15px;">
+                <div style="font-weight: bold; color: #409EFF; margin-bottom: 8px; font-size: 13px;">
+                  工程实验申请专用角色
+                </div>
+                <el-checkbox
+                  v-for="role in erfRoleList"
+                  :key="role.roleId"
+                  :label="role.roleId">{{role.roleName}}
+                </el-checkbox>
+              </div>
             </el-checkbox-group>
           </el-form-item>
         </el-form>
@@ -130,6 +142,26 @@ export default {
       workShopList:[],
     }
   },
+  computed: {
+    /**
+     * 工程实验申请相关角色列表
+     * 根据remark字段包含"工程实验申请"进行过滤
+     */
+    erfRoleList() {
+      return this.roleList.filter(role => {
+        return role.remark && role.remark.includes('工程实验申请')
+      })
+    },
+    /**
+     * 其他角色列表
+     * 不包含"工程实验申请"的角色
+     */
+    otherRoleList() {
+      return this.roleList.filter(role => {
+        return !role.remark || !role.remark.includes('工程实验申请')
+      })
+    }
+  },
   methods: {
     getFunctionButtonList() {
       let queryButton = {
@@ -263,5 +295,30 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+// 角色分组样式
+::v-deep .el-checkbox-group {
+  display: block;
+
+  .el-checkbox {
+    margin-right: 15px;
+    margin-bottom: 8px;
+  }
+}
+
+// 分组容器样式
+.el-form-item ::v-deep .el-checkbox-group > div {
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
 
+  &:first-child {
+    background-color: #ecf5ff;
+    border: 1px solid #d9ecff;
+  }
+
+  &:last-child {
+    background-color: #f5f7fa;
+    border: 1px solid #e4e7ed;
+  }
+}
 </style>