<script lang="ts" setup>
|
import type { AuditFieldDiff } from './auditDiff';
|
|
import { computed } from 'vue';
|
|
import { formatAuditDiffValue, getAuditDiffDisplayValue, getSafeAuditDiffFieldLabel, hasAuditDiffValue, isSensitiveAuditDiff } from './auditDiff';
|
|
interface AuditDiffTableRow {
|
diff: AuditFieldDiff;
|
index: number;
|
key: string;
|
}
|
|
const props = withDefaults(
|
defineProps<{
|
diffs: AuditFieldDiff[];
|
hideTechnicalFieldNames?: boolean;
|
maskSensitive?: boolean;
|
}>(),
|
{
|
hideTechnicalFieldNames: false,
|
maskSensitive: false,
|
},
|
);
|
const emit = defineEmits<{ viewChild: [diff: AuditFieldDiff] }>();
|
|
const columns = [
|
{ dataIndex: 'field', key: 'field', title: '字段', width: 170 },
|
{ dataIndex: 'oldValue', key: 'oldValue', title: '变更前', width: 250 },
|
{ dataIndex: 'newValue', key: 'newValue', title: '变更后', width: 250 },
|
];
|
|
const rows = computed<AuditDiffTableRow[]>(() =>
|
props.diffs.map((diff, index) => ({
|
diff,
|
index,
|
key: `${diff.field || 'field'}-${index}`,
|
})),
|
);
|
|
function getFieldLabel(row: AuditDiffTableRow) {
|
if (props.hideTechnicalFieldNames) return getSafeAuditDiffFieldLabel(row.diff, row.index);
|
return row.diff.fieldName || row.diff.field || '未命名字段';
|
}
|
|
function getValueText(diff: AuditFieldDiff, side: 'new' | 'old') {
|
if (diff.masked || (props.maskSensitive && isSensitiveAuditDiff(diff))) return '敏感信息已隐藏';
|
|
const value = getAuditDiffDisplayValue(diff, side);
|
return hasAuditDiffValue(value) ? formatAuditDiffValue(value) : '空值';
|
}
|
|
function isChildDiff(diff: AuditFieldDiff) {
|
return diff.jnpfKey === 'table' && !!diff.chidData?.length && !!diff.chidField?.length;
|
}
|
</script>
|
|
<template>
|
<a-table
|
class="audit-diff-table"
|
size="small"
|
:columns="columns"
|
:data-source="rows"
|
:pagination="false"
|
:scroll="{ x: 670 }"
|
row-key="key"
|
table-layout="fixed">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'field'">
|
<div class="audit-diff-field" :title="getFieldLabel(record)">
|
<span>{{ getFieldLabel(record) }}</span>
|
<a-tag v-if="record.diff.technical" :bordered="false">技术字段</a-tag>
|
</div>
|
</template>
|
<template v-else-if="column.key === 'oldValue'">
|
<div v-if="isChildDiff(record.diff)" class="audit-diff-cell audit-diff-cell-child">子表行级变化</div>
|
<div v-else class="audit-diff-cell audit-diff-cell-old">{{ getValueText(record.diff, 'old') }}</div>
|
</template>
|
<template v-else-if="column.key === 'newValue'">
|
<a-button v-if="isChildDiff(record.diff)" type="link" size="small" class="audit-child-diff-button" @click="emit('viewChild', record.diff)">
|
查看子表变更
|
</a-button>
|
<div v-else class="audit-diff-cell audit-diff-cell-new">{{ getValueText(record.diff, 'new') }}</div>
|
</template>
|
</template>
|
</a-table>
|
</template>
|
|
<style lang="scss" scoped>
|
.audit-diff-table {
|
width: 100%;
|
|
:deep(.ant-table-cell) {
|
vertical-align: top;
|
}
|
}
|
|
.audit-diff-field {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 6px;
|
align-items: center;
|
min-width: 0;
|
font-weight: 500;
|
overflow-wrap: anywhere;
|
}
|
|
.audit-diff-cell {
|
max-height: 160px;
|
padding: 3px 7px;
|
overflow: auto;
|
line-height: 1.6;
|
white-space: pre-wrap;
|
border-radius: 4px;
|
overflow-wrap: anywhere;
|
}
|
|
.audit-diff-cell-old {
|
background: var(--error-color-hover);
|
}
|
|
.audit-diff-cell-new {
|
background: var(--success-color-hover);
|
}
|
|
.audit-diff-cell-child {
|
color: var(--text-color-secondary);
|
background: var(--component-background);
|
}
|
|
.audit-child-diff-button {
|
height: auto;
|
padding: 3px 0;
|
}
|
</style>
|
