<template>
|
<a-modal :title="title" :visible="visible" :width="700" @cancel="handleCloseModal" @ok="handleOpenCompareModal"
|
:maskClosable="false">
|
<a-table :dataSource="dataSource" :columns="columns" :pagination="false" bordered :scroll="{y:364}"
|
:customRow="customRow"
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" rowKey="fileId">
|
<template slot="fileName" slot-scope="text,record,index">
|
<span :style="{color:setCurrentVersionColor(record.publishFlag)}">
|
{{ text }}.{{ record.fileSuffix }}
|
<span v-if="record.publishFlag">[当前版本]</span>
|
</span>
|
</template>
|
</a-table>
|
|
<FileCompareModal ref="fileCompareModalRef" :fileDiffObject="fileDiffObject" :fileVersionArray="fileVersionArray"/>
|
</a-modal>
|
</template>
|
|
<script>
|
import dncApi from '@/api/dnc'
|
import FileCompareModal from './FileCompareModal'
|
|
export default {
|
name: 'SelectFileCompareModal',
|
components: { FileCompareModal },
|
props: {
|
dataSource: {
|
type: Array
|
},
|
setCurrentVersionColor: {
|
type: Function
|
}
|
},
|
data() {
|
return {
|
visible: false,
|
title: '',
|
selectedRowKeys: [],
|
fileDiffObject: {},
|
fileVersionArray: [],
|
selectedFileInfo: {},
|
columns: [
|
{
|
title: '序号',
|
dataIndex: 'rowIndex',
|
width: 65,
|
align: 'center',
|
customRender: function(t, r, index) {
|
return parseInt(index) + 1
|
}
|
},
|
{ title: '文件名称', dataIndex: 'fileName', align: 'center', scopedSlots: { customRender: 'fileName' } },
|
{ title: '版本号', dataIndex: 'docVersion', align: 'center' }
|
]
|
}
|
},
|
watch: {
|
visible: {
|
handler(value) {
|
this.$nextTick(() => {
|
const selectAllCheckboxNode = document.querySelector('.ant-table-selection-column .ant-table-selection')
|
if (value) {
|
if (this.dataSource.length > 2) selectAllCheckboxNode.style.display = 'none'
|
else selectAllCheckboxNode.style.display = 'block'
|
}
|
})
|
}
|
}
|
},
|
methods: {
|
/**
|
* 定制表格行样式
|
* @param record 表格行信息
|
* @returns {{style: {color: *}}} 样式
|
*/
|
customRow(record) {
|
return {
|
style: {
|
color: this.setCurrentVersionColor(record.publishFlag)
|
}
|
}
|
},
|
|
/**
|
* 当表格多选框改变时触发
|
* @param selectedRowKeys 选中的每一行的key集合
|
*/
|
onSelectChange(selectedRowKeys) {
|
if (selectedRowKeys.length < 3) this.selectedRowKeys = selectedRowKeys
|
else this.selectedRowKeys = selectedRowKeys.slice(-2)
|
},
|
|
// 打开对比窗口
|
handleOpenCompareModal() {
|
const { $confirm, $notification, selectedRowKeys, title, dataSource } = this
|
if (selectedRowKeys.length < 2) {
|
$notification.warning({
|
message: '消息',
|
description: '请勾选两个版本比对'
|
})
|
return
|
}
|
const that = this
|
$confirm({
|
title: '提示',
|
content: '确认提交吗？',
|
okText: '确认',
|
cancelText: '取消',
|
onOk: () => {
|
that.fileVersionArray = []
|
dncApi.fileCompareApi(selectedRowKeys)
|
.then(res => {
|
if (res.success) {
|
$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
that.fileDiffObject = res.data
|
// 传递给子组件当前选中的文件版本号
|
selectedRowKeys.forEach(fileId => {
|
const selectedFileVersion = dataSource.find(item => item.fileId === fileId).docVersion
|
that.fileVersionArray.push(selectedFileVersion)
|
})
|
that.handleCloseModal()
|
if (!that.$refs.fileCompareModalRef) return
|
that.$refs.fileCompareModalRef.visible = true
|
that.$refs.fileCompareModalRef.title = title
|
} else {
|
$notification.error({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.catch(err => {
|
$notification.error({
|
message: '消息',
|
description: err.message
|
})
|
})
|
}
|
})
|
},
|
|
// 关闭窗口
|
handleCloseModal() {
|
this.visible = false
|
this.selectedRowKeys = []
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
