recruit

src/views/recruit/recruitstudentsignup/index.vue

@@ -346,52 +346,105 @@
           <el-table-column
             prop="name"
             header-align="center"
-            align="left"
-            width="290"
+            align="center"
+            width="140"
             label="资料检测">
             <template #default="scope">
-              <div v-if="scope.row.isOut=='0'" class="material-check-cell">
-                <!-- 资料审核状态 -->
-                <div class="check-item">
-                  <span class="check-label">审核状态：</span>
-                  <el-tag v-if="scope.row.zlsh=='0'" type="info" size="small">未填写</el-tag>
-                  <el-tag v-else-if="scope.row.zlsh=='2'" type="success" size="small">
-                    <el-icon class="tag-icon"><CircleCheck /></el-icon>
-                    审核通过
-                  </el-tag>
-                  <el-tag v-else-if="scope.row.zlsh=='1'" type="warning" size="small">待审核</el-tag>
-                  <el-tag v-else-if="scope.row.zlsh=='3'" type="danger" size="small">
-                    <el-icon class="tag-icon"><CircleClose /></el-icon>
-                    审核驳回
-                  </el-tag>
-                </div>
+              <div v-if="scope.row.isOut=='0'" class="material-check-compact">
+                <!-- 审核通过不需要弹窗，直接显示 -->
+                <ClickableTag 
+                  v-if="scope.row.zlsh=='2'" 
+                  type="success" 
+                  :left-icon="CircleCheck"
+                  :right-icon="null">
+                  审核通过
+                </ClickableTag>
                 
-                <!-- 材料状态 -->
-                <div v-if="scope.row.zlsh !='2'" class="check-item">
-                  <span class="check-label">材料状态：</span>
-                  <div class="material-status">
-                    <el-tag v-if="!scope.row.graPic" type="warning" size="small" class="material-tag">
-                      <el-icon class="tag-icon"><Warning /></el-icon>
-                      缺少毕业证
-                    </el-tag>
-                    <el-tag v-if="scope.row.degreeOfEducation == '1' && scope.row.zlsh !='2' && !scope.row.yyPic && !scope.row.housePic && !scope.row.sbPic" type="warning" size="small" class="material-tag">
-                      <el-icon class="tag-icon"><Warning /></el-icon>
-                      缺新市民材料
-                    </el-tag>
-                    <span v-if="scope.row.degreeOfEducation == '1' && scope.row.isOut == '1'" class="no-upload-text">无需上传</span>
+                <!-- 其他状态需要弹窗查看详情 -->
+                <el-popover
+                  v-else
+                  placement="right"
+                  :width="320"
+                  trigger="click">
+                  <template #reference>
+                    <div class="status-wrapper">
+                      <!-- 审核状态标签 -->
+                      <ClickableTag 
+                        v-if="scope.row.zlsh=='0'" 
+                        type="info" 
+                        :left-icon="Document">
+                        未填写
+                      </ClickableTag>
+                      <ClickableTag 
+                        v-else-if="scope.row.zlsh=='1'" 
+                        type="warning" 
+                        :left-icon="Clock"
+                        :middle-icon="!scope.row.graPic || (scope.row.degreeOfEducation == '1' && !scope.row.yyPic && !scope.row.housePic && !scope.row.sbPic) ? WarningFilled : undefined">
+                        待审核
+                      </ClickableTag>
+                      <ClickableTag 
+                        v-else-if="scope.row.zlsh=='3'" 
+                        type="danger" 
+                        :left-icon="CircleClose">
+                        审核驳回
+                      </ClickableTag>
+                    </div>
+                  </template>
+                  
+                  <!-- 弹出内容 -->
+                  <div class="material-detail-popover">
+                    <div class="detail-title">资料检测详情</div>
+                    
+                    <!-- 审核状态 -->
+                    <div class="detail-section horizontal">
+                      <div class="section-label">审核状态</div>
+                      <div class="section-content">
+                        <el-tag v-if="scope.row.zlsh=='0'" type="info" size="small">未填写</el-tag>
+                        <el-tag v-else-if="scope.row.zlsh=='2'" type="success" size="small">
+                          <el-icon class="tag-icon"><CircleCheck /></el-icon>
+                          审核通过
+                        </el-tag>
+                        <el-tag v-else-if="scope.row.zlsh=='1'" type="warning" size="small">待审核</el-tag>
+                        <el-tag v-else-if="scope.row.zlsh=='3'" type="danger" size="small">
+                          <el-icon class="tag-icon"><CircleClose /></el-icon>
+                          审核驳回
+                        </el-tag>
+                      </div>
+                    </div>
+                    
+                    <!-- 材料状态 -->
+                    <div v-if="scope.row.zlsh !='2'" class="detail-section">
+                      <div class="section-label">材料状态</div>
+                      <div class="material-list">
+                        <div v-if="!scope.row.graPic" class="material-item warning">
+                          <el-icon><Warning /></el-icon>
+                          <span>缺少毕业证</span>
+                        </div>
+                        <div v-if="scope.row.degreeOfEducation == '1' && scope.row.zlsh !='2' && !scope.row.yyPic && !scope.row.housePic && !scope.row.sbPic" class="material-item warning">
+                          <el-icon><Warning /></el-icon>
+                          <span>缺新市民材料</span>
+                        </div>
+                        <div v-if="scope.row.degreeOfEducation == '1' && scope.row.isOut == '1'" class="material-item success">
+                          <el-icon><CircleCheck /></el-icon>
+                          <span>无需上传</span>
+                        </div>
+                        <div v-if="scope.row.graPic && (scope.row.degreeOfEducation != '1' || scope.row.yyPic || scope.row.housePic || scope.row.sbPic)" class="material-item success">
+                          <el-icon><CircleCheck /></el-icon>
+                          <span>材料齐全</span>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <!-- 审核意见 -->
+                    <div v-if="scope.row.zlsh=='3' && scope.row.zlshRemark" class="detail-section">
+                      <div class="section-label">审核意见</div>
+                      <div class="remark-box">
+                        <el-icon class="remark-icon"><Warning /></el-icon>
+                        <div class="remark-text">{{ scope.row.zlshRemark }}</div>
+                      </div>
+                    </div>
                   </div>
-                </div>
-                
-                <!-- 审核意见 -->
-                <div v-if="scope.row.zlsh=='3' && scope.row.zlshRemark" class="check-item check-remark">
-                  <span class="check-label">审核意见：</span>
-                  <div class="remark-content">
-                    <el-icon class="remark-icon"><Warning /></el-icon>
-                    <el-tooltip :content="scope.row.zlshRemark" placement="top" :show-after="300">
-                      <span class="remark-text">{{ scope.row.zlshRemark }}</span>
-                    </el-tooltip>
-                  </div>
-                </div>
+                </el-popover>
               </div>
               <span v-else class="empty-text">-</span>
             </template>
@@ -434,7 +487,7 @@
               prop="auditTime"
               header-align="center"
               align="center"
-              width="110"
+              width="160"
               label="录取时间">
               <template #default="scope">
                 <span v-if="scope.row.auditStatus==20" class="time-text">{{ dateFormat(scope.row.auditTime) }}</span>
@@ -526,18 +579,15 @@
             prop="deptCode"
             header-align="center"
             align="center"
-            width="120"
-            label="学院(经办人)">
-
+            width="180"
+            label="学院(经办人)"
+            show-overflow-tooltip>
             <template #default="scope">
               <span v-if="scope.row.auditStatus==20">
                 {{ getLabelValueByProps(deptList, scope.row.deptCode, { key: 'deptCode', value: 'deptName' }) }}
-              </span> <br/>
-              <span v-if="scope.row.auditStatus==20">
-                <span v-if="scope.row.auditorName">({{scope.row.auditorName}})</span>
-                <span v-else>-</span>
+                <span v-if="scope.row.auditorName">({{ scope.row.auditorName }})</span>
               </span>
-
+              <span v-else class="empty-text">-</span>
             </template>
           </el-table-column>
 
@@ -606,7 +656,8 @@
 
 <script setup lang="ts" name="recruitstudentsignup">
 import { ref, reactive, onMounted, nextTick, defineAsyncComponent, watch } from 'vue'
-import { Edit, Check, DocumentChecked, Close, Switch, Tickets, Document, Upload, Warning, User, CircleCheck, CircleClose } from '@element-plus/icons-vue'
+import { Edit, Check, DocumentChecked, Close, Switch, Tickets, Document, Upload, Warning, User, CircleCheck, CircleClose, Clock, WarningFilled } from '@element-plus/icons-vue'
+import ClickableTag from '/@/components/ClickableTag/index.vue'
 import { useMessage, useMessageBox } from '/@/hooks/message'
 import { BasicTableProps, useTable } from '/@/hooks/table'
 import { auth } from '/@/utils/authFunction'
@@ -632,7 +683,12 @@ import { getDictsByTypes } from "/@/api/admin/dict";
 import { getUserListByRole } from "/@/api/admin/user";
 import { queryTeacherBaseByNo } from "/@/api/professional/professionaluser/teacherbase";
 import { useDict } from '/@/hooks/dict'
-import { ROLE_CODE } from '/@/config/global'
+import { 
+  ROLE_CODE, 
+  PUSHED_STATUS_LIST, 
+  DATA_SOURCE_LIST,
+  NOTICE_SEND_STATUS_LIST
+} from '/@/config/global'
 import { showLoading, hideLoading } from '/@/api/asset/loading'
 
 // 定义组件
@@ -725,18 +781,18 @@ const deptList = ref<any[]>([])
 const teacherList = ref<any[]>([])
 const interviewDicList = ref<any[]>([])
 const zlshList = ref<any[]>([])
-const paystatusList = ref<any[]>([])
+const paystatusList = ref<any[]>([])           // 缴费状态
+const auditStatusList = ref<any[]>([])         // 审核状态
+const cityExamTypeList = ref<any[]>([])        // 市平台考试类型
+const isOutFwList = ref<any[]>([])             // 宿舍范围状态
 
 // 字典数据
 const { yes_no_type } = useDict('yes_no_type')
 
 // 静态数据
-const isBackTzList = [{ label: '未发放', value: '0' }, { label: '已发放', value: '1' }]
-const auditStatusList = [{ label: '未录取', value: '-20' }, { label: '待审核', value: '0' }, { label: '已录取', value: '20' }]
-const cityExamTypeList = [{ label: '待审核', value: '0' }, { label: '通过', value: '1' }, { label: '驳回', value: '2' }]
-const pushedList = [{ label: '未推送', value: '0' }, { label: '已推送', value: '1' }]
-const isOutFwList = [{ label: '待确认', value: '0' }, { label: '范围内', value: '1' }, { label: '范围外', value: '2' }]
-const isOutList = [{ label: '学校', value: '0' }, { label: '市平台', value: '1' }]
+const isBackTzList = NOTICE_SEND_STATUS_LIST
+const pushedList = PUSHED_STATUS_LIST
+const isOutList = DATA_SOURCE_LIST
 
 // 日期格式化
 const dateFormat = (date: string | null | undefined) => {
@@ -1024,7 +1080,7 @@ const getPaymentStatusTagType = (status: string | number) => {
   return statusMap[String(status)] || ''
 }
 
-// 缴费状态
+// 缴费状态（使用字典）
 const getStatus = (type: string) => {
   return getLabelValue(paystatusList.value, type)
 }
@@ -1226,12 +1282,23 @@ const init = async () => {
   })
   
 
-  // 批量获取字典数据：文化程度、面试结果、资料审核状态、缴费状态
-  getDictsByTypes(['finance_student_source','interview_dic', 'recruit_zlsh', 'recruit_pay_status']).then((res) => {
+  // 批量获取字典数据
+  getDictsByTypes([
+    'finance_student_source',    // 文化程度
+    'interview_dic',              // 面试结果
+    'recruit_zlsh',               // 资料审核状态
+    'recruit_pay_status',         // 缴费状态
+    'recruit_audit_status',       // 审核状态
+    'recruit_city_exam_type',     // 市平台考试类型
+    'recruit_dorm_range_status'   // 宿舍范围状态
+  ]).then((res) => {
     eduList.value = res.data.finance_student_source || []
     interviewDicList.value = res.data.interview_dic || []
     zlshList.value = res.data.recruit_zlsh || []
     paystatusList.value = res.data.recruit_pay_status || []
+    auditStatusList.value = res.data.recruit_audit_status || []
+    cityExamTypeList.value = res.data.recruit_city_exam_type || []
+    isOutFwList.value = res.data.recruit_dorm_range_status || []
   })
   
   // 所有经办人
@@ -1361,7 +1428,126 @@ onMounted(() => {
   }
 }
 
-// 资料检测样式
+// 资料检测样式（紧凑版）
+.material-check-compact {
+  .status-wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+// Popover详情样式
+.material-detail-popover {
+  .detail-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #EBEEF5;
+  }
+  
+  .detail-section {
+    margin-bottom: 16px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    // 横向布局
+    &.horizontal {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      
+      .section-label {
+        margin-bottom: 0;
+        white-space: nowrap;
+      }
+      
+      .section-content {
+        flex: 1;
+      }
+    }
+    
+    .section-label {
+      font-size: 12px;
+      color: #909399;
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
+    
+    :deep(.el-tag) {
+      .tag-icon {
+        font-size: 12px;
+      }
+    }
+  }
+  
+  .material-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    
+    .material-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      padding: 6px 10px;
+      border-radius: 4px;
+      
+      &.warning {
+        background-color: #fef0f0;
+        color: #f56c6c;
+        
+        .el-icon {
+          color: #f56c6c;
+        }
+      }
+      
+      &.success {
+        background-color: #f0f9ff;
+        color: #67c23a;
+        
+        .el-icon {
+          color: #67c23a;
+        }
+      }
+      
+      .el-icon {
+        font-size: 14px;
+      }
+    }
+  }
+  
+  .remark-box {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background-color: #fef0f0;
+    border-radius: 4px;
+    border-left: 3px solid #f56c6c;
+    
+    .remark-icon {
+      color: #f56c6c;
+      font-size: 16px;
+      flex-shrink: 0;
+      margin-top: 1px;
+    }
+    
+    .remark-text {
+      color: #f56c6c;
+      font-size: 13px;
+      line-height: 1.6;
+      word-break: break-all;
+      flex: 1;
+    }
+  }
+}
+
+// 旧样式保留（如果其他地方还在使用）
 .material-check-cell {
   display: flex;
   flex-direction: column;