a

src/views/recruit/recruitstudentsignupturnover/index.vue

@@ -1,20 +1,3 @@
-<!--
-  -    Copyright (c) 2018-2025, cyweb All rights reserved.
-  -
-  - Redistribution and use in source and binary forms, with or without
-  - modification, are permitted provided that the following conditions are met:
-  -
-  - Redistributions of source code must retain the above copyright notice,
-  - this list of conditions and the following disclaimer.
-  - Redistributions in binary form must reproduce the above copyright
-  - notice, this list of conditions and the following disclaimer in the
-  - documentation and/or other materials provided with the distribution.
-  - Neither the name of the pig4cloud.com developer nor the names of its
-  - contributors may be used to endorse or promote products derived from
-  - this software without specific prior written permission.
-  -
-  -->
-
 <template>
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
@@ -60,38 +43,94 @@
         :header-cell-style="tableStyle.headerCellStyle"
       >
         <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="type" label="异动类型" align="center" show-overflow-tooltip>
+        <el-table-column prop="type" label="异动类型" width="100" align="center" show-overflow-tooltip>
           <template #default="scope">
             {{ getTypeLabel(scope.row.type) }}
           </template>
         </el-table-column>
-        <el-table-column prop="name" label="姓名[唯一号]" width="140" align="center" show-overflow-tooltip />
-        <el-table-column prop="majorChangeInfo" label="专业变更情况" align="center" show-overflow-tooltip />
-        <el-table-column label="代办费变更情况" align="center">
-          <el-table-column prop="newAgencyFee" label="新费用" align="center" show-overflow-tooltip />
-          <el-table-column prop="oldAgencyFee" label="旧费用" align="center" show-overflow-tooltip />
-        </el-table-column>
-        <el-table-column label="学费变更情况" align="center">
-          <el-table-column prop="newFeeTuition" label="新费用" align="center" show-overflow-tooltip />
-          <el-table-column prop="oldFeeTuition" label="旧费用" align="center" show-overflow-tooltip />
-        </el-table-column>
-        <el-table-column label="分数变更情况" align="center">
-          <el-table-column prop="scoreName" label="分数类型" align="center" show-overflow-tooltip />
-          <el-table-column prop="newCorrectedScore" label="新分值" align="center" show-overflow-tooltip />
-          <el-table-column prop="oldCorrectedScore" label="旧分值" align="center" show-overflow-tooltip />
-        </el-table-column>
-        <el-table-column prop="createBy" label="异动发起人" align="center" show-overflow-tooltip />
-        <el-table-column prop="createTime" label="异动时间" align="center" show-overflow-tooltip />
-        <el-table-column prop="remarks" label="备注信息" align="center" show-overflow-tooltip />
-        <el-table-column prop="isMajorChange" label="异动审核" width="110" align="center" show-overflow-tooltip>
+        <el-table-column prop="name" label="姓名[唯一号]" min-width="160" align="center" show-overflow-tooltip />
+        <el-table-column prop="majorChangeInfo" label="专业变更情况" min-width="180" align="center" show-overflow-tooltip />
+        <el-table-column label="代办费变更情况" min-width="130" align="center" show-overflow-tooltip>
           <template #default="scope">
-            <AuditState :state="scope.row.isMajorChange" :options="auditStateOptions" />
+            <span class="new-fee">{{ scope.row.newAgencyFee }}</span> / <span class="old-fee">{{ scope.row.oldAgencyFee }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="学费变更情况" min-width="140" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <span class="new-fee">{{ scope.row.newFeeTuition }}</span> / <span class="old-fee">{{ scope.row.oldFeeTuition }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="分数变更情况" min-width="130" align="center">
+          <template #default="scope">
+              <span class="new-fee">{{ scope.row.newCorrectedScore }}</span> / <span class="old-fee">{{ scope.row.oldCorrectedScore }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createBy" label="异动发起人" min-width="120" align="center" show-overflow-tooltip />
+        <el-table-column prop="createTime" label="异动时间" min-width="180" align="center" show-overflow-tooltip />
+        <el-table-column prop="isMajorChange" label="异动审核" min-width="110" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <template v-if="getStatusConfig(auditStateOptions, scope.row.isMajorChange)">
+              <!-- 有备注信息时，使用 popover 包裹 ClickableTag -->
+              <el-popover
+                v-if="scope.row.remarks"
+                placement="right"
+                :width="300"
+                trigger="click">
+                <template #reference>
+                  <ClickableTag 
+                    :type="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.type || 'info'"
+                    :left-icon="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.icon">
+                    {{ getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.label }}
+                  </ClickableTag>
+                </template>
+                
+                <!-- 弹出内容 -->
+                <div class="audit-detail-popover">
+                  <div class="detail-title">异动审核详情</div>
+                  
+                  <!-- 审核状态 -->
+                  <div class="detail-section horizontal">
+                    <div class="section-label">审核状态</div>
+                    <div class="section-content">
+                      <ClickableTag 
+                        :type="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.type || 'info'"
+                        :left-icon="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.icon"
+                        :right-icon="null">
+                        {{ getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.label }}
+                      </ClickableTag>
+                    </div>
+                  </div>
+                  
+                  <!-- 备注信息 -->
+                  <div v-if="scope.row.remarks" class="detail-section">
+                    <div class="section-label">备注信息</div>
+                    <div class="section-content reason-content">
+                      <el-icon class="reason-icon"><Warning /></el-icon>
+                      <span>{{ scope.row.remarks }}</span>
+                    </div>
+                  </div>
+                </div>
+              </el-popover>
+              
+              <!-- 没有备注信息时，直接显示 ClickableTag -->
+              <ClickableTag 
+                v-else
+                :type="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.type || 'info'"
+                :left-icon="getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.icon"
+                :right-icon="null">
+                {{ getStatusConfig(auditStateOptions, scope.row.isMajorChange)?.label }}
+              </ClickableTag>
+            </template>
+            
+            <!-- 无状态 -->
+            <span v-else class="empty-text">-</span>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="100" align="center" fixed="right">
           <template #default="scope">
             <el-button
-              v-if="permissions.recruit_recruitstudentsignupturnover_edit && scope.row.isMajorChange == '1'"
+              v-auth="'recruit_recruitstudentsignupturnover_edit'"
+              v-if="scope.row.isMajorChange == '1'"
               type="primary"
               link
               icon="EditPen"
@@ -146,7 +185,7 @@
 </template>
 
 <script setup lang="ts" name="recruitstudentsignupturnover">
-import { ref, reactive, computed, onMounted, defineAsyncComponent } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useUserInfo } from '/@/stores/userInfo'
 import { BasicTableProps, useTable } from '/@/hooks/table'
@@ -154,8 +193,8 @@ import { useMessage } from '/@/hooks/message'
 import { fetchList, putObj } from '/@/api/recruit/recruitstudentsignupturnover'
 import { getList } from '/@/api/recruit/recruitstudentplangroup'
 import type { StateOption } from '/@/components/AuditState/index.vue'
-
-const AuditState = defineAsyncComponent(() => import('/@/components/AuditState/index.vue'))
+import ClickableTag from '/@/components/ClickableTag/index.vue'
+import { Warning, Clock, CircleClose, CircleCheck } from '@element-plus/icons-vue'
 
 // 使用 Pinia store
 const userInfoStore = useUserInfo()
@@ -185,13 +224,22 @@ const majorChangeVisible = ref(false)
 const planList = ref<any[]>([])
 const typeList = ref([{ label: '专业变更', value: '1' }, { label: '退学', value: '2' }])
 
-// 审核状态选项配置（用于 AuditState 组件和检索条件）
+// 审核状态选项配置（用于 ClickableTag 组件和检索条件）
 const auditStateOptions = ref<StateOption[]>([
-  { value: '1', label: '待审核', type: 'warning', icon: 'fa-regular fa-clock', effect: 'light' },
-  { value: '2', label: '驳回', type: 'danger', icon: 'fa-solid fa-circle-xmark', effect: 'dark' },
-  { value: '3', label: '通过', type: 'success', icon: 'fa-solid fa-circle-check', effect: 'dark' }
+  { value: '1', label: '待审核', type: 'warning', icon: Clock, effect: 'light' },
+  { value: '2', label: '驳回', type: 'danger', icon: CircleClose, effect: 'dark' },
+  { value: '3', label: '通过', type: 'success', icon: CircleCheck, effect: 'dark' }
 ])
 
+// 获取状态配置（用于 ClickableTag）
+const getStatusConfig = (statusList: any[], value: string | number) => {
+  const config = statusList.find(item => String(item.value) === String(value))
+  if (config && config.type === '') {
+    config.type = 'info'
+  }
+  return config || null
+}
+
 // 从 auditStateOptions 派生检索条件列表（只包含 label 和 value）
 const majorChangeList = computed(() => {
   return auditStateOptions.value.map(item => ({
@@ -318,5 +366,99 @@ onMounted(() => {
 })
 </script>
 
+<style lang="scss" scoped>
+.new-fee {
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+.old-fee {
+  text-decoration: line-through;
+  color: #909399;
+}
+
+.empty-text {
+  color: #909399;
+}
+
+// Popover详情样式
+.audit-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;
+    }
+    
+    .section-content {
+      font-size: 13px;
+      color: #303133;
+      
+      &.reason-content {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 12px;
+        background-color: #fef0f0;
+        border-radius: 4px;
+        border-left: 3px solid #f56c6c;
+        
+        .reason-icon {
+          color: #f56c6c;
+          font-size: 16px;
+          flex-shrink: 0;
+          margin-top: 1px;
+        }
+        
+        span {
+          color: #f56c6c;
+          line-height: 1.6;
+          word-break: break-all;
+          flex: 1;
+        }
+      }
+    }
+    
+    :deep(.el-tag) {
+      .tag-icon {
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 </style>