feat: 导出修改信息

src/components/negative/action-history.vue

@@ -14,6 +14,11 @@
                         <span class="mr-8">{{ item.crtName }}</span>
                         <span class="text-primary mr-8 text-bold">{{ item.actionName }}</span>
                         <span style="color: #9e9e9e; cursor: pointer" @click="handleShowDetai(item)">详情</span>
+                        <span
+                            v-if="getReturnComparison(item, index)"
+                            class="compare-link"
+                            @click="handleShowComparison(item, index)"
+                        >对比上一步</span>
                     </div>
                     <div
                         class="flow-time"
@@ -47,6 +52,39 @@
             </div>
         </div>
     </el-dialog>
+
+    <el-dialog title="核查办理内容对比" width="70vw" v-model="comparisonShow">
+        <div v-if="activeComparison" class="comparison-dialog">
+            <div class="comparison-return-info">
+                <span>退回时间：{{ activeComparison.returnHistory.crtTime }}</span>
+                <span>退回人员：{{ activeComparison.returnHistory.crtName || '无' }}</span>
+                <span>退回意见：{{ activeComparison.returnOpinion || '无' }}</span>
+            </div>
+            <el-table v-if="!activeComparison.unavailable" :data="activeComparison.rows" border>
+                <el-table-column prop="label" label="核查办理字段" width="150" />
+                <el-table-column prop="before" :label="activeComparison.beforeLabel" min-width="260">
+                    <template #default="scope">
+                        <div
+                            class="comparison-content"
+                            :class="{ 'comparison-changed': scope.row.changed }"
+                        >{{ scope.row.before }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="after" :label="activeComparison.afterLabel" min-width="260">
+                    <template #default="scope">
+                        <div
+                            class="comparison-content"
+                            :class="{ 'comparison-changed': scope.row.changed }"
+                        >{{ scope.row.after }}</div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-empty
+                v-else
+                description="无法获取核查办理内容"
+            />
+        </div>
+    </el-dialog>
 </template>
 <script setup>
 import { formatTimeText } from "@/utils/util";
@@ -56,6 +94,62 @@ import useCatchStore from "@/stores/modules/catch.ts";
 const actionHistory = inject('actionHistory')
 const negative = inject('negative')
 const show = ref(false)
+const comparisonShow = ref(false)
+
+const VERIFY_FIELDS = [
+    { key: 'checkStatusName', label: '核查结论' },
+    { key: 'isRectifyName', label: '是否整改' },
+    { key: 'checkStatusDesc', label: '问题核查情况' },
+    { key: 'rectifyDesc', label: '问题整改情况' },
+]
+
+const returnComparisonMap = computed(() => {
+    const comparisonMap = new Map()
+    let latestSnapshot = null
+    let pendingReturn = null
+    ;(actionHistory.value || []).forEach((item, index) => {
+        const historyJson = parseHistoryJson(item)
+        const actionKey = historyJson?.actionKey
+        const snapshot = getVerifySnapshot(historyJson?.data)
+        const previousSnapshot = latestSnapshot
+        if (snapshot) {
+            latestSnapshot = snapshot
+        }
+        if (isReturnAction(actionKey)) {
+            pendingReturn = {
+                actionKey,
+                before: latestSnapshot,
+                history: item,
+                opinion: historyJson?.data?.comments,
+            }
+        } else if (actionKey === 'update_verify' && snapshot) {
+            if (pendingReturn) {
+                comparisonMap.set(getHistoryKey(item, index), buildComparison(
+                    previousSnapshot,
+                    latestSnapshot,
+                    {
+                        returnHistory: pendingReturn.history,
+                        returnOpinion: pendingReturn.opinion,
+                        beforeLabel: '修改前',
+                        afterLabel: '修改后',
+                    },
+                ))
+            }
+        } else if (pendingReturn && isResubmitAction(pendingReturn.actionKey, actionKey)) {
+            comparisonMap.set(getHistoryKey(item, index), buildComparison(
+                pendingReturn.before,
+                latestSnapshot,
+                {
+                    returnHistory: pendingReturn.history,
+                    returnOpinion: pendingReturn.opinion,
+                    beforeLabel: '退回前',
+                    afterLabel: '再次提交',
+                },
+            ))
+        }
+    })
+    return comparisonMap
+})
 
 function getConsumingTime(crtTime, index) {
     if (index === 0) {
@@ -83,11 +177,90 @@ const getOvertimeTip = (item) => {
 const activeHistory = ref({})
 function handleShowDetai(item) {
     activeHistory.value = item
-    if (item.dataJson) {
+    const historyJson = parseHistoryJson(item)
-        activeHistory.value.json = JSON.parse(item.dataJson)
+    if (historyJson) {
+        activeHistory.value.json = historyJson
     }
     show.value = true
 }
+
+function parseHistoryJson(item) {
+    if (!item?.dataJson) {
+        return null
+    }
+    try {
+        return JSON.parse(item.dataJson)
+    } catch {
+        return null
+    }
+}
+
+function getVerifySnapshot(data) {
+    if (!data || !VERIFY_FIELDS.some((field) => Object.prototype.hasOwnProperty.call(data, field.key))) {
+        return null
+    }
+    return VERIFY_FIELDS.reduce((snapshot, field) => {
+        snapshot[field.key] = data[field.key]
+        return snapshot
+    }, {})
+}
+
+function isReturnAction(actionKey) {
+    return actionKey === 'second_approve_return' || actionKey === 'first_approve_return'
+}
+
+function isResubmitAction(returnActionKey, actionKey) {
+    if (returnActionKey === 'second_approve_return') {
+        return actionKey === 'apply_completion'
+    }
+    if (returnActionKey === 'first_approve_return') {
+        return actionKey === 'second_approve' || actionKey === 'apply_completion'
+    }
+    return false
+}
+
+function getHistoryKey(item, index) {
+    return item.historyId || `${item.crtTime}-${index}`
+}
+
+function displayValue(value) {
+    return value === null || value === undefined || value === '' ? '无' : value
+}
+
+function buildComparison(beforeSnapshot, afterSnapshot, context) {
+    if (!beforeSnapshot || !afterSnapshot) {
+        return {
+            ...context,
+            rows: [],
+            unavailable: true,
+        }
+    }
+    const rows = VERIFY_FIELDS.map((field) => {
+        const before = displayValue(beforeSnapshot[field.key])
+        const after = displayValue(afterSnapshot[field.key])
+        return {
+            label: field.label,
+            before,
+            after,
+            changed: before !== after,
+        }
+    })
+    return {
+        ...context,
+        rows,
+        unavailable: false,
+    }
+}
+
+function getReturnComparison(item, index) {
+    return returnComparisonMap.value.get(getHistoryKey(item, index))
+}
+
+const activeComparison = ref(null)
+function handleShowComparison(item, index) {
+    activeComparison.value = getReturnComparison(item, index)
+    comparisonShow.value = true
+}
 </script>
 <style lang="scss" scoped>
 .flow {
@@ -134,6 +307,11 @@ function handleShowDetai(item) {
                 transform: translateY(-50%);
             }
         }
+        .compare-link {
+            color: var(--primary-color);
+            cursor: pointer;
+            margin-left: 8px;
+        }
         & > div:first-child .flow-info::before {
             width: 12px;
             height: 12px;
@@ -141,4 +319,21 @@ function handleShowDetai(item) {
         }
     }
 }
+.comparison-dialog {
+    .comparison-return-info {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px 24px;
+        margin-bottom: 16px;
+        color: #666;
+    }
+    .comparison-content {
+        white-space: pre-wrap;
+        word-break: break-all;
+    }
+    .comparison-changed {
+        color: #f56c6c;
+        font-weight: 600;
+    }
+}
 </style>