442 lines
15 KiB
Vue
442 lines
15 KiB
Vue
<template>
|
|
<el-dialog title="" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
:before-close="handleClose" width="450px" center>
|
|
<div class="auditDocumentDetail">
|
|
<div class="header">
|
|
<div class="file_icon">
|
|
<i class="name_folder" v-if="!rowData.AuditDocumentTypeEnum"></i>
|
|
<img v-else-if="['png', 'jpg', 'jpeg'].includes(rowData.FileFormat.toLowerCase())"
|
|
:src="OSSclientConfig.basePath + rowData.FilePath" alt="" class="name_image">
|
|
<i :class="`name_${rowData.FileFormat}`" v-else></i>
|
|
</div>
|
|
<div class="file_name">
|
|
<div class="name">
|
|
<span class="name-text">{{ rowData.Name }}</span>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="size">{{ formatFileSize(rowData) }}</span>
|
|
<span v-if="rowData.AuditDocumentTypeEnum">, </span>
|
|
<span class="time">{{ rowData.UpdateTime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane :label="$t('trials:trials-workbench:auditDocument:detail:tabs:versions')"
|
|
name="versions" v-if="rowData.AuditDocumentTypeEnum === 1">
|
|
<div class="versions_top">
|
|
<div class="title">{{
|
|
$t('trials:trials-workbench:auditDocument:detail:title:historicalVersion') }}
|
|
</div>
|
|
<div class="btnBox">
|
|
<el-button icon="el-icon-refresh" circle size="small"
|
|
@click.stop="getHistoricalVersion" />
|
|
<el-button icon="el-icon-upload2" plain size="small" @click.stop="openFile">{{
|
|
$t('trials:trials-workbench:auditDocument:detail:title:uploadNewVersion')
|
|
}}</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="versions_content" v-loading="loading">
|
|
<div class="item" v-for="item of versionList" :key="item.Id">
|
|
<div class="item_line">
|
|
<div class="version current_version" v-if="item.IsCurrentVersion">
|
|
<span>{{
|
|
$t('trials:trials-workbench:auditDocument:detail:title:currentVersion')
|
|
}}</span>
|
|
</div>
|
|
<div class="version" v-else>
|
|
<span>v{{ item.Version }}</span>
|
|
</div>
|
|
<div class="mtime">{{ item.CreateTime }}</div>
|
|
<div class="size">{{ formatFileSize(item) }}</div>
|
|
<div class="add_desc" @click.stop="openMenu($event, item, 'c_version')"
|
|
v-if="item.IsCurrentVersion">
|
|
<i class="el-icon-more" />
|
|
</div>
|
|
<div class="add_desc" @click.stop="openMenu($event, item, 'version')" v-else>
|
|
<i class="el-icon-more" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('trials:trials-workbench:auditDocument:detail:tabs:Stats')" name="Stats"
|
|
v-if="false">
|
|
<div class="p">
|
|
<div class="title">{{ $t('trials:trials-workbench:auditDocument:detail:title:path') }}</div>
|
|
<div class="content">{shareItem:8}/周会/20250324-工作总结及后续工作.pptx</div>
|
|
</div>
|
|
<div class="p" v-if="!rowData.AuditDocumentTypeEnum">
|
|
<div class="title">{{ $t('trials:trials-workbench:auditDocument:detail:title:contain') }}
|
|
</div>
|
|
<div class="content">4项 (2文件, 2文件夹)</div>
|
|
</div>
|
|
<div class="p" v-else>
|
|
<div class="title">{{ $t('trials:trials-workbench:auditDocument:detail:title:size') }}</div>
|
|
<div class="content">{{ formatFileSize(rowData) }}</div>
|
|
</div>
|
|
<div class="p">
|
|
<div class="title">{{ $t('trials:trials-workbench:auditDocument:detail:title:updateTime') }}
|
|
</div>
|
|
<div class="content">{{ rowData.UpdateTime }}</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
import { getHistoricalVersion } from '@/api/trials'
|
|
export default {
|
|
name: "auditDocumentDetail",
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
rowData: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: 'versions',
|
|
versionList: [],
|
|
loading: false
|
|
}
|
|
},
|
|
// mounted() {
|
|
// this.getHistoricalVersion()
|
|
// },
|
|
watch: {
|
|
rowData: {
|
|
handler() {
|
|
this.getHistoricalVersion()
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick() { },
|
|
openMenu(e, row, type) {
|
|
this.$emit('openContextmenu', { e, row, type, zIndex: 3000 })
|
|
},
|
|
handleClose() {
|
|
this.$emit("update:visible", false)
|
|
},
|
|
delAll() {
|
|
let ids = []
|
|
this.versionList.forEach(item => {
|
|
if (!item.IsCurrentVersion) {
|
|
ids.push(item.Id)
|
|
}
|
|
})
|
|
this.$emit('delData', ids)
|
|
},
|
|
// 获取历史版本
|
|
async getHistoricalVersion() {
|
|
if (!this.rowData || !this.rowData.Id) return false
|
|
try {
|
|
let data = {
|
|
Id: this.rowData.Id
|
|
}
|
|
this.loading = true
|
|
let res = await getHistoricalVersion(data)
|
|
this.loading = false
|
|
if (res.IsSuccess) {
|
|
this.versionList = res.Result
|
|
}
|
|
} catch (err) {
|
|
this.loading = false
|
|
console.log(err)
|
|
}
|
|
},
|
|
openFile() {
|
|
let faccept = `.${this.rowData.FileFormat}`
|
|
this.$emit('openFileNewVersion', faccept)
|
|
},
|
|
// 格式化文件大小
|
|
formatFileSize(row) {
|
|
if (!row.FileSize) return ''
|
|
if (row.FileSize < 1000) {
|
|
return row.FileSize + "B"
|
|
}
|
|
if (row.FileSize < 1000 * 1024) {
|
|
return (row.FileSize / 1024).toFixed(2) + "KB"
|
|
}
|
|
if (row.FileSize < 1000 * 1000 * 1024) {
|
|
return (row.FileSize / 1000 / 1024).toFixed(2) + "MB"
|
|
}
|
|
if (row.FileSize < 1000 * 1000 * 1000 * 1024) {
|
|
return (row.FileSize / 1000 / 1000 / 1024).toFixed(2) + "GB"
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-dialog__header {
|
|
padding: 0;
|
|
}
|
|
|
|
::v-deep .el-dialog__body {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
::v-deep .el-tabs__nav-wrap::after {
|
|
height: 1px;
|
|
}
|
|
|
|
.auditDocumentDetail {
|
|
.header {
|
|
padding: 0 10px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f6f8ff;
|
|
|
|
.file_icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
i {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 42px;
|
|
line-height: 60px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
border-radius: 5px;
|
|
font-style: normal;
|
|
pointer-events: none;
|
|
}
|
|
.name_image{
|
|
max-width:90%;
|
|
max-height:100%;
|
|
|
|
}
|
|
.name_pdf {
|
|
background-image: url(@/assets/file_icon/pdf.png);
|
|
}
|
|
|
|
.name_docx {
|
|
background-image: url(@/assets/file_icon/docx.png);
|
|
}
|
|
|
|
.name_doc {
|
|
background-image: url(@/assets/file_icon/doc.png);
|
|
}
|
|
|
|
.name_zip {
|
|
background-image: url(@/assets/file_icon/zip.png);
|
|
}
|
|
|
|
.name_pptx {
|
|
background-image: url(@/assets/file_icon/pptx.png);
|
|
}
|
|
|
|
.name_ppt {
|
|
background-image: url(@/assets/file_icon/ppt.png);
|
|
}
|
|
|
|
.name_xlsx {
|
|
background-image: url(@/assets/file_icon/xlsx.png);
|
|
}
|
|
|
|
.name_xls {
|
|
background-image: url(@/assets/file_icon/xls.png);
|
|
}
|
|
|
|
.name_folder {
|
|
background-image: url(@/assets/file_icon/folder.png);
|
|
}
|
|
}
|
|
|
|
.file_name {
|
|
font-size: 14px;
|
|
color: #666;
|
|
word-break: break-word;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
max-height: 60px;
|
|
line-height: 18px;
|
|
margin-top: 7px;
|
|
width: calc(100% - 170px);
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.name {
|
|
max-height: 35px;
|
|
width: 100%;
|
|
line-height: 18px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
.name-text {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
font-size: 13px;
|
|
color: #aaa;
|
|
padding-top: 1px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
max-height: 500px;
|
|
|
|
.p {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
.title {
|
|
color: #999;
|
|
text-align: left;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 25px;
|
|
width: 27%;
|
|
margin-right: 1%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.content {
|
|
word-break: break-word;
|
|
color: #444;
|
|
width: 72%;
|
|
margin: 0;
|
|
padding: 5px 0 0 0;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.versions_top {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
border-bottom: 1px solid #f3f3f3;
|
|
margin-bottom: 10px;
|
|
|
|
.title {
|
|
width: 30%;
|
|
}
|
|
|
|
.btnBox {
|
|
flex: 1 0 0%;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
|
|
.versions_content {
|
|
max-height: calc(100% - 50px);
|
|
|
|
.item {
|
|
padding: 0;
|
|
border: 1px solid #eee;
|
|
margin-bottom: 4px;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all .2s;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
border-color: #91d5ff;
|
|
}
|
|
|
|
.item_line {
|
|
background: #fafafa;
|
|
padding: 5px 10px;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
transition: all .2s;
|
|
|
|
&:hover {
|
|
background: #e6f7ff;
|
|
border-color: #e6f7ff;
|
|
}
|
|
|
|
.version {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
width: auto;
|
|
|
|
span {
|
|
background: #22b66c;
|
|
border-color: #1c9458;
|
|
color: #fff;
|
|
padding: 3px 4px;
|
|
min-width: 25px;
|
|
}
|
|
}
|
|
|
|
.current_version {
|
|
span {
|
|
background: #1890ff;
|
|
border-color: #007cee;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.mtime {
|
|
color: #999;
|
|
margin-right: 0;
|
|
line-height: 22px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.size {
|
|
border-radius: 20px;
|
|
padding: 1px 1px 1px 5px;
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.add_desc {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 3px;
|
|
width: 25px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
color: #666;
|
|
background: #77777715;
|
|
border-radius: 2px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: #c3e2ff;
|
|
color: #1890ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |