<template>
|
<div style="height: 100%; position: relative" >
|
<el-tabs
|
v-model="activeName"
|
type="border-card"
|
@tab-click="fileHandleClick"
|
@contextmenu.prevent.native
|
style="height: 100%;"
|
>
|
<el-tab-pane name="first" label="文档属性">
|
<el-row id="nodeInfoTable" :style="tabStyle">
|
<table class="el-table one_list" style="text-align:center">
|
<tr>
|
<td>文档名称</td>
|
<td>{{baseNode.list.docName}}</td>
|
</tr>
|
<tr>
|
<td>设备编号</td>
|
<td>{{baseNode.list.docCode}}</td>
|
</tr>
|
<tr>
|
<td>代码版本</td>
|
<td>{{baseNode.list.docAlias}}</td>
|
</tr>
|
<tr>
|
<td>文档状态</td>
|
<td>{{productStatusMap[baseNode.list.docStatus]}}</td>
|
</tr>
|
<tr>
|
<td>系统指定版本</td>
|
<td>{{baseNode.list.publishVersion}}</td>
|
</tr>
|
<tr>
|
<td>描述</td>
|
<td>{{baseNode.list.description}}</td>
|
</tr>
|
</table>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane name="second" label="预览">
|
<el-row id="docPreview" :style="tabStyle">
|
<div v-if="deviceDocSuffix ==='pdf'" class="pdf">
|
<iframe :src="pdfUrl" frameborder="0" style="width: 100%;height: calc(100% - 5px)"></iframe>
|
</div>
|
<div v-else style="height: calc(100% - 10px)">
|
<textarea id="deviceFileInfo" style="width:99%; height: 100%; margin: auto" readonly></textarea>
|
</div>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane name="third" label="文件版本" >
|
<el-row>
|
<el-table
|
id="docEdition"
|
class="show_table"
|
:data="deviceFileList"
|
border
|
highlight-current-row
|
v-loading="listLoading"
|
:row-class-name="current_class"
|
@row-contextmenu="deviceFileRigClick"
|
:style="conheight"
|
:height="conheight.height"
|
style="width: 100%"
|
>
|
<el-table-column type="index" label="序号" align="center"></el-table-column>
|
<el-table-column prop="fileName" label="文件名称" class-name="left" >
|
<template slot-scope="scope" >
|
{{scope.row.fileName}} {{scope.row.docVersion==fileList_current?'(当前版本)':''}}
|
</template>
|
</el-table-column>
|
<el-table-column prop="docVersion" label="版本号"></el-table-column>
|
<el-table-column prop="fileSize" label="文件大小" class-name="right">
|
<template slot-scope="scope">{{(scope.row.fileSize/1024).toFixed(2)}}KB</template>
|
</el-table-column>
|
</el-table>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
<div class="deviceFileRightMenu">
|
<FileContextMenu @fileAssignVersion="fileAssignVersion" @showRelativeDialog="showRelativeDialog" ref="FileContextMenu"></FileContextMenu>
|
</div>
|
<el-dialog :visible.sync="relativeVisible" title="文件版本比对" :close-on-click-modal="false" @close="relativeDialogClose" width="680px">
|
<el-table
|
:data="deviceFileList"
|
border
|
ref="multipleTable"
|
@select="fileSelect"
|
@select-all="selectAll"
|
highlight-current-row
|
v-loading="listLoading"
|
height="400px"
|
style="width: 100%">
|
<el-table-column
|
type="selection"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="50" align="center">
|
</el-table-column>
|
<el-table-column prop="fileName" label="文件名称" class-name="left">
|
<template slot-scope="scope" >
|
{{scope.row.fileName}} {{scope.row.docVersion==fileList_current?'(当前版本)':''}}
|
</template>
|
</el-table-column>
|
<el-table-column prop="docVersion" label="版本号" align="center">
|
</el-table-column>
|
</el-table>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click.native="queryFileComparison" :loading="buttonLoading" type="primary" class="btn-custom">
|
<span>确 定</span>
|
</el-button>
|
<el-button @click="relativeDialogClose" class="btn-custom">
|
<span>取 消</span>
|
</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="relativeDivVisible" title="文件版本比对" :close-on-click-modal="false" @close="relativeDialogClose" width="100%">
|
<el-row :style="dialogStyle">
|
<div>
|
<code-diff :old-string="oldVal" :new-string="newVal" :outputFormat="outputFormat" style="height:100%; overflow:auto" />
|
</div>
|
</el-row>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import * as deviceApi from "../api/device";
|
import Bus from "./bus.js";
|
import CodeDiff from 'vue-code-diff'
|
import FileContextMenu from "@/module/deviceManager/components/file_context_menu.vue";
|
export default {
|
name: "doc_attribute_info",
|
props: ["baseNode"],
|
components: {
|
FileContextMenu,
|
Bus,
|
CodeDiff
|
},
|
computed:{
|
productStatusMap:function() {
|
let localeMap = JSON.parse(localStorage.getItem('productStatusMap'));
|
if(!localeMap) {
|
return {};
|
}else {
|
return localeMap;
|
}
|
},
|
|
|
},
|
data() {
|
return {
|
isreload:true,
|
listLoading: false,
|
buttonLoading:false,
|
relativeVisible:false,
|
relativeDivVisible:false,
|
deviceDocSuffix: "",
|
rightClickRow: [],
|
activeName: "first",
|
deviceFileList: [],
|
fileQueryParam: {
|
docId: ""
|
},
|
contextQueryParams: {
|
flag: 2, //查询按钮的范围 1 菜单 2 对象
|
param: "file", //查询参数，按类型而不同 1 菜单路径 2 对象权限码
|
objectId: null, //flag 为2时需要传递该参数 该参数与param对应数据id
|
relativeObjectId: null, //param 为process,document,file 时需要传该参数 该参数为关联树节点的id
|
relativeParam: null //param 为process,document,file 时需要传该参数 该参数为关联树节点的对象权限码
|
},
|
tabStyle: {
|
height: "",
|
overflow: "auto"
|
},
|
dialogStyle:{
|
height:'',
|
overflow: 'auto'
|
},
|
conheight: {
|
height: "",
|
overflow: "auto"
|
},
|
textareaStyle: {
|
height: ""
|
},
|
frameHeight: "",
|
fileList_current:'',
|
pdfUrl:'',
|
fileSelections:[],
|
oldVal: '',
|
newVal: '',
|
context: 10,
|
outputFormat: 'side-by-side'
|
};
|
},
|
methods: {
|
showRelativeDialog(){
|
this.relativeVisible = true;
|
},
|
current_class({row, rowIndex}){
|
if(row.docVersion==this.fileList_current){
|
return 'iscurrent_version'
|
}
|
},
|
fileSelect(selection, row) {
|
// 选择项大于2时
|
this.fileSelections = selection;
|
if (selection.length > 2) {
|
let del_row = selection.shift();
|
this.fileSelections = selection;
|
this.$refs.multipleTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
|
}
|
},
|
|
selectAll(selection) {
|
// 选择项大于2时
|
|
if (selection.length > 2) {
|
|
selection.length = 2;
|
|
}
|
|
},
|
queryFileList() {
|
this.fileQueryParam.docId = this.baseNode.list.docId;
|
deviceApi.query_file_list(this.fileQueryParam).then(res => {
|
if (res.success) {
|
this.deviceFileList = res.list;
|
this.fileList_current=this.baseNode.list.publishVersion;
|
}
|
});
|
},
|
queryFileComparison(){
|
if (this.fileSelections.length < 2) {
|
this.$message({
|
message: "请勾选两个版本比对",
|
type: 'warning'
|
});
|
}else {
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
this.relativeDivVisible = true;
|
this.buttonLoading = true;
|
let firstFileId = this.fileSelections[0].fileId;
|
let secondFileId = this.fileSelections[1].fileId;
|
deviceApi.file_comparison(firstFileId,secondFileId).then((res) => {
|
if (res.success) {
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
let oldValue = '';
|
res.data.first.forEach((val,k) =>{
|
oldValue += val;
|
if (k != res.data.first.length - 1) {
|
oldValue += '\n';
|
}
|
});
|
let newValue = '';
|
res.data.second.forEach((val,k) =>{
|
newValue += val;
|
if (k != res.data.second.length - 1) {
|
newValue += '\n';
|
}
|
});
|
this.oldVal = oldValue;
|
this.newVal = newValue;
|
} else if (res.message) {
|
this.buttonLoading = false;
|
this.$message({
|
message: res.message,
|
type:'error'
|
});
|
}
|
});
|
});
|
}
|
},
|
fileHandleClick(tab, event) {
|
if (tab.index == 1) {
|
this.deviceDocSuffix = this.baseNode.list.docSuffix;
|
this.previewDeviceFileInfo();
|
let h = document.getElementById("attributeTab").offsetHeight;
|
this.tabStyle.height = h - 100 + "px";
|
}
|
},
|
deviceFileRigClick(row, column, event) {
|
if (row != undefined) {
|
this.rightClickRow = row;
|
this.contextQueryParams.objectId = this.baseNode.list.attributionId;
|
this.contextQueryParams.relativeObjectId = this.baseNode.list.attributionId;
|
this.contextQueryParams.relativeParam = "device";
|
this.$refs.FileContextMenu.fileRightClick(
|
row,
|
column,
|
event,
|
this.contextQueryParams
|
)
|
Bus.$emit("queryDoc");
|
}
|
},
|
fileAssignVersion() {
|
let fileId = this.rightClickRow.fileId;
|
deviceApi.file_version(fileId).then(res => {
|
if (res.success) {
|
this.$message({
|
message: res.message,
|
type: "success"
|
});
|
this.fileList_current=this.rightClickRow.docVersion;
|
Bus.$emit("queryDoc");
|
} else {
|
this.$message({
|
message: res.message,
|
type: "error"
|
});
|
}
|
});
|
},
|
getTabHeight() {
|
let h = document.getElementById("attributeTab").offsetHeight;
|
this.conheight.height = window.innerHeight - 515 + "px";
|
this.tabStyle.height = h - 100 + "px";
|
this.frameHeight = h - 105;
|
this.textareaStyle.height = h - 110 + "px";
|
this.dialogStyle.height = window.innerHeight *0.65 + 'px';
|
},
|
previewDeviceFileInfo(){
|
let docSuffix = this.baseNode.list.docSuffix;
|
let fileId = this.baseNode.list.docId;
|
if (docSuffix === 'pdf') {
|
this.getDevicePdfInfo(fileId);
|
}else {
|
this.getDeviceFileInfo(fileId);
|
}
|
},
|
getDeviceFileInfo(fileId) {
|
deviceApi.file_preview(fileId).then(res => {
|
document.getElementById('deviceFileInfo').innerHTML = '';
|
if (res.success && res.list) {
|
let str = '';
|
res.list.forEach((val,k) =>{
|
str += val;
|
if (k != res.list.length - 1) {
|
str += '\n';
|
}
|
});
|
document.getElementById('deviceFileInfo').innerHTML = str;
|
}else{
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
},
|
getDevicePdfInfo(fileId){
|
deviceApi.file_preview_pdf(fileId).then((res) =>{
|
let url = window.URL.createObjectURL(new Blob([res],{type:"application/zip"}));
|
this.pdfUrl = './static/pdf/web/viewer.html?file='+encodeURIComponent(url);
|
})
|
},
|
relativeDialogClose(){
|
this.relativeVisible = false;
|
this.relativeDivVisible = false;
|
this.queryFileList();
|
}
|
},
|
created() {
|
window.addEventListener("resize", this.getTabHeight);
|
this.getTabHeight();
|
},
|
mounted() {
|
this.queryFileList();
|
if (this.activeName == "second") {
|
this.deviceDocSuffix = this.baseNode.list.docSuffix;
|
this.previewDeviceFileInfo();
|
}
|
},
|
//监听
|
watch: {
|
baseNode: {
|
deep: true, // 深度监听
|
handler(newValue, oldValue) {
|
this.queryFileList();
|
this.activeName = "first";
|
}
|
},
|
deviceFileList:{
|
deep: true, // 深度监听
|
handler(newValue, oldValue) {
|
if (newValue.length-oldValue.length==1&&oldValue.length>0) {
|
if(newValue[0].docId==oldValue[0].docId){
|
this.fileList_current=newValue[0].docVersion
|
}
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.deviceFileRightMenu {
|
position: absolute;
|
height: 100%;
|
top: 0;
|
}
|
.el-table tr td{
|
border-bottom: 1px dashed #cccccc;
|
}
|
</style>
|
