“编译修改”

web/src/views/rs/overseas/index.vue

@@ -1169,6 +1169,66 @@
         }}</el-descriptions-item>
       </el-descriptions>
 
+      <!-- 变更历史记录 -->
+      <div v-if="state.viewData && 'recordId' in state.viewData" style="margin-top: 20px;">
+        <el-divider content-position="left">
+          <span style="font-size: 16px; font-weight: bold; color: #409eff;">
+            <el-icon style="vertical-align: middle; margin-right: 5px;"><EditPen /></el-icon>
+            变更历史记录
+          </span>
+        </el-divider>
+        
+        <!-- 变更历史列表 -->
+        <div v-loading="state.changeHistoryLoading">
+          <el-empty 
+            v-if="!state.changeHistoryLoading && state.changeHistoryList.length === 0" 
+            description="暂无变更记录"
+            :image-size="80"
+          />
+          
+          <el-table 
+            v-else
+            :data="state.changeHistoryList" 
+            border 
+            style="width: 100%"
+            max-height="400px"
+          >
+            <el-table-column label="变更时间" align="center" prop="createTime" min-width="160" />
+            <el-table-column label="变更类型" align="center" prop="changeType" min-width="150">
+              <template #default="scope">
+                <el-tag 
+                  v-for="(type, index) in (scope.row.changeType || '').split(',')" 
+                  :key="index"
+                  style="margin: 2px;"
+                  size="small"
+                >
+                  {{ type }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="原目的地" align="center" prop="originalDestination" min-width="120" />
+            <el-table-column label="新目的地" align="center" prop="newDestination" min-width="120" />
+            <el-table-column label="原出国时间" align="center" min-width="200">
+              <template #default="scope">
+                {{ formatDate(scope.row.originalStartDate) }} 至 {{ formatDate(scope.row.originalEndDate) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="新出国时间" align="center" min-width="200">
+              <template #default="scope">
+                {{ formatDate(scope.row.newStartDate) }} 至 {{ formatDate(scope.row.newEndDate) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="变更原因" align="center" prop="changeReason" min-width="200" show-overflow-tooltip />
+            <el-table-column label="状态" align="center" prop="statusText" min-width="100">
+              <template #default="scope">
+                <el-tag :type="getChangeStatusTagType(scope.row.status)">{{ scope.row.statusText }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="审批意见" align="center" prop="approvalOpinion" min-width="150" show-overflow-tooltip />
+          </el-table>
+        </div>
+      </div>
+
       <!-- 记录详情操作按钮 -->
       <template #footer v-if="state.viewData && 'recordId' in state.viewData">
         <div class="dialog-footer">
@@ -1257,6 +1317,7 @@ import {
   listOverseasAttachments,
   uploadOverseasAttachment,
   deleteOverseasAttachment,
+  getItineraryChangeHistory,
   type OverseasApplicationQuery,
   type OverseasApplicationVO,
   type OverseasApplicationForm,
@@ -1267,7 +1328,7 @@ import {
   type OverseasAttachmentVO
 } from '@/api/rs/overseas';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { UploadFilled, Document, Loading, Download, Delete, View } from '@element-plus/icons-vue';
+import { UploadFilled, Document, Loading, Download, Delete, View, EditPen } from '@element-plus/icons-vue';
 import ImagePreview from '@/components/ImagePreview/index.vue';
 import animate from '@/animate';
 import { parseTime } from '@/utils/ruoyi';
@@ -1382,6 +1443,10 @@ const state = reactive({
     status: '0'
   },
 
+  // 变更历史记录
+  changeHistoryLoading: false,
+  changeHistoryList: [] as any[],
+
   // 文件通知阅读弹窗
   noticeDialog: {
     visible: false,
@@ -2524,6 +2589,17 @@ const getStatusTagType = (status: string): 'primary' | 'success' | 'info' | 'war
   return typeMap[status || ''] || 'info';
 };
 
+// 获取变更状态的Tag类型
+const getChangeStatusTagType = (status: string): 'success' | 'warning' | 'danger' | 'info' => {
+  const typeMap: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
+    '0': 'warning', // 待审核
+    '1': 'success', // 已通过
+    '2': 'danger', // 已拒绝
+    '3': 'info' // 已撤回
+  };
+  return typeMap[status] || 'info';
+};
+
 const getCompletionStatusTagType = (status: string): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
   const typeMap: Record<string, 'primary' | 'success' | 'info' | 'warning' | 'danger'> = {
     '1': 'success', // 已完成
@@ -2533,12 +2609,42 @@ const getCompletionStatusTagType = (status: string): 'primary' | 'success' | 'in
 };
 
 // 记录相关操作
-const handleViewRecord = (row: OverseasRecordVO) => {
+const handleViewRecord = async (row: OverseasRecordVO) => {
   // 查看记录详情
   console.log('查看记录:', row);
   state.viewData = row;
   state.viewDialog.visible = true;
   state.viewDialog.title = '出国记录详情';
+  
+  // 加载该记录的变更历史
+  await loadChangeHistory(row.recordId);
+};
+
+// 加载变更历史记录
+const loadChangeHistory = async (recordId: number) => {
+  if (!recordId) {
+    console.warn('recordId为空,无法加载变更历史');
+    state.changeHistoryList = [];
+    return;
+  }
+  
+  state.changeHistoryLoading = true;
+  try {
+    console.log('🔄 开始加载变更历史记录, recordId:', recordId);
+    const response = await getItineraryChangeHistory(recordId);
+    if (response.code === 200) {
+      state.changeHistoryList = response.data || [];
+      console.log('✅ 变更历史记录加载成功, 共', state.changeHistoryList.length, '条记录');
+    } else {
+      console.warn('⚠️ 获取变更历史失败:', response.msg);
+      state.changeHistoryList = [];
+    }
+  } catch (error) {
+    console.error('❌ 加载变更历史记录失败:', error);
+    state.changeHistoryList = [];
+  } finally {
+    state.changeHistoryLoading = false;
+  }
 };
 
 // 下载因私出国（境）情况回执PDF