|
|
|
@ -50,33 +50,37 @@ |
|
|
|
<el-table-column type="index" width="55" align="center" label="序号"></el-table-column> |
|
|
|
<el-table-column prop="operation" header-align="center" align="left" min-width="160" label="操作" /> |
|
|
|
<el-table-column prop="username" header-align="center" align="center" width="120" label="操作人" /> |
|
|
|
<el-table-column prop="createDate" header-align="center" align="center" width="170" label="创建时间" /> |
|
|
|
<template v-for="field in dynamicColumns"> |
|
|
|
<el-table-column prop="createDate" header-align="center" align="center" width="170" label="修改时间" /> |
|
|
|
<el-table-column |
|
|
|
:key="field + '_old'" |
|
|
|
:label="getFieldLabel(field) + '改动前'" |
|
|
|
header-align="center" |
|
|
|
align="left" |
|
|
|
min-width="180" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
width="200" |
|
|
|
label="项目名称" |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
{{ flattenDisplayValue(getFieldRawValue(scope.row.parsedOldValue, field)) }} |
|
|
|
{{ getProjectName(scope.row) }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
:key="field + '_new'" |
|
|
|
:label="getFieldLabel(field) + '改动后'" |
|
|
|
header-align="center" |
|
|
|
align="left" |
|
|
|
min-width="180" |
|
|
|
min-width="440" |
|
|
|
label="修改内容" |
|
|
|
:show-overflow-tooltip="true" |
|
|
|
> |
|
|
|
<template slot-scope="scope"> |
|
|
|
{{ flattenDisplayValue(getFieldRawValue(scope.row.parsedNewValue, field)) }} |
|
|
|
<div class="change-content-cell"> |
|
|
|
<div v-for="item in getDetailDiffList(scope.row)" :key="item.key" class="change-item"> |
|
|
|
<span class="change-field">{{ item.label }}:</span> |
|
|
|
<span class="change-old-label">改动前:</span> |
|
|
|
<span class="change-old-value">{{ item.oldValue }}</span> |
|
|
|
<span class="change-sep">;</span> |
|
|
|
<span class="change-new-label">改动后:</span> |
|
|
|
<span class="change-new-value">{{ item.newValue }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</template> |
|
|
|
<!-- <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-link style="cursor: pointer" @click="openDetail(scope.row)">详情</el-link> |
|
|
|
@ -99,7 +103,8 @@ |
|
|
|
<el-descriptions :column="2" border size="small"> |
|
|
|
<el-descriptions-item label="操作人">{{ detailRow.username }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="操作" :span="2">{{ detailRow.operation }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="创建时间">{{ detailRow.createDate }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="项目名称">{{ getProjectName(detailRow) }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="修改时间">{{ detailRow.createDate }}</el-descriptions-item> |
|
|
|
</el-descriptions> |
|
|
|
|
|
|
|
<div style="margin-top: 12px"> |
|
|
|
@ -137,7 +142,6 @@ export default { |
|
|
|
tableHeight: 500, |
|
|
|
detailVisible: false, |
|
|
|
detailRow: {}, |
|
|
|
dynamicColumns: [], |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -201,9 +205,14 @@ export default { |
|
|
|
} |
|
|
|
return undefined |
|
|
|
}, |
|
|
|
buildDynamicColumns(list) { |
|
|
|
// 这里直接固定为你约定的字段集合,避免出现数组下标(0/1/2...)被当成“列名” |
|
|
|
this.dynamicColumns = this.getMappedFieldKeys() |
|
|
|
getProjectName(row) { |
|
|
|
const oldObj = this.parseJsonObject(row && row.oldValue) |
|
|
|
const newObj = this.parseJsonObject(row && row.newValue) |
|
|
|
const oldText = this.flattenDisplayValue(this.getFieldRawValue(oldObj, 'projectName')) |
|
|
|
if (oldText !== '-') return oldText |
|
|
|
const newText = this.flattenDisplayValue(this.getFieldRawValue(newObj, 'projectName')) |
|
|
|
if (newText !== '-') return newText |
|
|
|
return '-' |
|
|
|
}, |
|
|
|
getFieldLabel(key) { |
|
|
|
const map = this.getFieldLabelMap() |
|
|
|
@ -226,7 +235,15 @@ export default { |
|
|
|
} |
|
|
|
pushLeaf(val) |
|
|
|
if (!values.length) return '-' |
|
|
|
return values.join(';') |
|
|
|
// 去重但保留顺序(例如多条记录里 projectName 重复出现) |
|
|
|
const uniq = [] |
|
|
|
const seen = new Set() |
|
|
|
values.forEach((v) => { |
|
|
|
if (seen.has(v)) return |
|
|
|
seen.add(v) |
|
|
|
uniq.push(v) |
|
|
|
}) |
|
|
|
return uniq.join(';') |
|
|
|
}, |
|
|
|
getDataList() { |
|
|
|
this.dataListLoading = true |
|
|
|
@ -248,11 +265,9 @@ export default { |
|
|
|
parsedNewValue, |
|
|
|
} |
|
|
|
}) |
|
|
|
this.buildDynamicColumns(this.dataList) |
|
|
|
this.totalPage = data.page.totalCount || 0 |
|
|
|
} else { |
|
|
|
this.dataList = [] |
|
|
|
this.dynamicColumns = [] |
|
|
|
this.totalPage = 0 |
|
|
|
} |
|
|
|
}) |
|
|
|
@ -310,6 +325,49 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.change-content-cell { |
|
|
|
padding: 2px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.change-item { |
|
|
|
font-size: 12px; |
|
|
|
margin-bottom: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.change-field { |
|
|
|
color: #606266; |
|
|
|
font-weight: 600; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.change-old-label, |
|
|
|
.change-new-label { |
|
|
|
color: #909399; |
|
|
|
font-weight: 600; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.change-old-value { |
|
|
|
color: #f56c6c; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.change-new-value { |
|
|
|
color: #67c23a; |
|
|
|
} |
|
|
|
|
|
|
|
.change-sep { |
|
|
|
color: #909399; |
|
|
|
margin: 0 6px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 让表格表头更接近“灰底设计图” */ |
|
|
|
>>> .el-table th { |
|
|
|
background-color: #f5f7fa !important; |
|
|
|
color: #606266 !important; |
|
|
|
font-weight: 600 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.status-green { |
|
|
|
color: #67c23a; |
|
|
|
} |
|
|
|
|