<template>
|
<div style="height: 100%;position: relative">
|
<el-tabs type="border-card" style="height: 100%;"
|
v-model="activeName"
|
@tab-click="othFileHandleClick"
|
@contextmenu.prevent.native="">
|
<el-tab-pane name="first" label="文档属性">
|
<el-row id="nodeInfoTable" :style="tabStyle">
|
<table class="el-table one_list">
|
<tr>
|
<td >文档名称：</td>
|
<td >{{nodeList.list.docName}}</td>
|
</tr>
|
<tr>
|
<td>代码版本：</td>
|
<td>{{nodeList.list.docAlias}}</td>
|
</tr>
|
<tr>
|
<td>设备编号：</td>
|
<td>{{nodeList.list.docCode}}</td>
|
</tr>
|
<tr>
|
<td>文档后缀：</td>
|
<td>{{nodeList.list.docSuffix}}</td>
|
</tr>
|
<tr>
|
<td>文档状态：</td>
|
<td>{{productStatusMap[nodeList.list.docStatus]}}</td>
|
</tr>
|
<tr>
|
<td>系统指定版本：</td>
|
<td>{{nodeList.list.publishVersion}}</td>
|
</tr>
|
<tr>
|
<td>出库状态：</td>
|
<td>{{pullStatusMap[nodeList.list.pullStatus]}}</td>
|
</tr>
|
<tr>
|
<td>出 库 人：</td>
|
<td>{{nodeList.list.pullUser}}</td>
|
</tr>
|
<tr>
|
<td>描 述：</td>
|
<td>{{nodeList.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="othDocSuffix ==='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 = "othFileInfo" style="width:99%; height: 100%; margin: auto" readonly></textarea>
|
</div>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane name="third" label="文档版本">
|
<el-table
|
id="docEdition"
|
:data="fileList"
|
border
|
highlight-current-row
|
:row-class-name="current_class"
|
v-loading="listLoading"
|
@row-contextmenu="otherFileRightClick"
|
:style="conheight"
|
class="show_table"
|
:height="conheight.height"
|
style="width: 100%">
|
<el-table-column
|
type="index"
|
width="50">
|
</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-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-tab-pane>
|
</el-tabs>
|
<div class="otherFileRightMenu">
|
<OFileContextMenu
|
@showRelativeDialog="showRelativeDialog"
|
@fileAssignVersion="fileAssignVersion"
|
ref="OFileContextMenu"
|
></OFileContextMenu>
|
</div>
|
<el-dialog :visible.sync="relativeVisible" title="文件版本比对" :close-on-click-modal="false" @close="relativeDialogClose" width="680px">
|
<el-table
|
:data="fileList"
|
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 OFileContextMenu from '@/module/productManager/components/otherFileContextMenu.vue'
|
import Bus from './bus.js'
|
import * as productApi from '../api/product'
|
import CodeDiff from 'vue-code-diff'
|
export default {
|
name: "other_file_attribute_info",
|
props:['nodeList'],
|
components:{
|
OFileContextMenu,
|
Bus,
|
CodeDiff
|
},
|
computed:{
|
pullStatusMap: function() {
|
let localeMap = JSON.parse(localStorage.getItem('pullStatusMap'));
|
if(!localeMap) {
|
return {};
|
}else {
|
return localeMap;
|
}
|
},
|
productStatusMap:function() {
|
let localeMap = JSON.parse(localStorage.getItem('productStatusMap'));
|
if(!localeMap) {
|
return {};
|
}else {
|
return localeMap;
|
}
|
},
|
},
|
data(){
|
return{
|
listLoading:false,
|
buttonLoading:false,
|
relativeVisible:false,
|
relativeDivVisible:false,
|
activeName: 'first',
|
othDocSuffix:'',
|
fileList:[],
|
pdfUrl:'',
|
rightClickRow:'',
|
conheight:{
|
height:''
|
},
|
tabStyle:{
|
height:'',
|
overflow:'auto'
|
},
|
textareaStyle:{
|
height:''
|
},
|
dialogStyle:{
|
height:'',
|
overflow: 'auto'
|
},
|
frameHeight:'',
|
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 时需要传该参数 该参数为关联树节点的对象权限码
|
},
|
fileSelections:[],
|
oldVal: '',
|
newVal: '',
|
context: 10,
|
fileList_current:'',
|
outputFormat: 'side-by-side'
|
}
|
},
|
methods:{
|
current_class({row, rowIndex}){
|
|
if(row.docVersion==this.fileList_current){
|
return 'iscurrent_version'
|
}
|
},
|
showRelativeDialog(){
|
this.relativeVisible = true;
|
},
|
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;
|
|
}
|
|
},
|
queryOtherFileList(){
|
this.fileQueryParam.docId = this.nodeList.list.docId;
|
productApi.query_file_list( this.fileQueryParam).then((res)=>{
|
if (res.success) {
|
this.fileList = res.list;
|
this.fileList_current=this.nodeList.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;
|
productApi.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'
|
});
|
}
|
});
|
});
|
}
|
},
|
othFileHandleClick(tab, event) {
|
if (tab.name == 'second') {
|
this.othDocSuffix = this.nodeList.list.docSuffix;
|
this.previewOthFileInfo();
|
}
|
},
|
getHeight(){
|
this.conheight.height=window.innerHeight-515+'px';
|
this.dialogStyle.height = window.innerHeight *0.65 + 'px';
|
},
|
getTabHeight(){
|
let h = document.getElementById('attributeTab').offsetHeight;
|
this.tabStyle.height = h-100+'px';
|
this.frameHeight = h-105;
|
this.textareaStyle.height = h-110+'px';
|
},
|
otherFileRightClick(row, column, event){
|
if (row != undefined) {
|
this.rightClickRow = row;
|
this.contextQueryParams.objectId = this.nodeList.nodeObjId;
|
this.contextQueryParams.relativeObjectId = this.nodeList.nodeObjId;
|
if (this.nodeList.nodeObjType == 1) {
|
this.contextQueryParams.relativeParam ='product';
|
}else if (this.nodeList.nodeObjType== 2) {
|
this.contextQueryParams.relativeParam ='component';
|
}else if (this.nodeList.nodeObjType == 3) {
|
this.contextQueryParams.relativeParam ='parts';
|
}
|
this.$refs.OFileContextMenu.othFileRightClick(row, column, event,this.contextQueryParams);
|
}
|
},
|
fileAssignVersion(){
|
let fileId = this.rightClickRow.fileId;
|
productApi.file_version(fileId).then((res) =>{
|
if(res.success){
|
this.$message({
|
message: res.message,
|
type: 'success'
|
});
|
this.fileList_current=this.rightClickRow.docVersion;
|
Bus.$emit('queryOtherDoc');
|
}else if(res.message){
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
})
|
},
|
previewOthFileInfo(){
|
let docSuffix = this.nodeList.list.docSuffix;
|
let fileId = this.nodeList.list.docId;
|
if (docSuffix == 'pdf') {
|
this.getPdfFileInfo(fileId);
|
}else {
|
this.getOthFileInfo(fileId);
|
}
|
},
|
getOthFileInfo(fileId){
|
productApi.file_preview(fileId).then((res) =>{
|
document.getElementById('othFileInfo').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('othFileInfo').innerHTML = str;
|
}else{
|
this.$message({
|
message: res.message,
|
type: 'error'
|
});
|
/*if (docSuffix == 'txt') {
|
let url = window.URL.createObjectURL(new Blob([res]));
|
document.getElementById('ncFileInfo').innerHTML = '读取中...';
|
let xmlHttpReq = null;
|
if(window.ActiveXObject){
|
xmlHttpReq = new ActiveXObject('Microsoft.XMLHTTP');
|
}else if(window.XMLHttpRequest){
|
xmlHttpReq = new XMLHttpRequest();
|
}
|
xmlHttpReq.open('GET',url,true);
|
xmlHttpReq.overrideMimeType("text/html;charset= gb2312");//设定以gb2312编码识别数据
|
xmlHttpReq.onreadystatechange = RequestCallBack;
|
xmlHttpReq.send();
|
function RequestCallBack() {
|
if(xmlHttpReq.readyState ===4){
|
if(xmlHttpReq.status === 200){
|
document.getElementById('ncFileInfo').innerHTML = xmlHttpReq.responseText;
|
}
|
}
|
}
|
}*/
|
}
|
})
|
},
|
getPdfFileInfo(fileId){
|
productApi.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.queryOtherFileList();
|
}
|
},
|
created(){
|
window.addEventListener('resize', this.getHeight);
|
this.getHeight();
|
window.addEventListener('resize', this.getTabHeight);
|
this.getTabHeight();
|
if (this.nodeList) {
|
if (this.activeName == 'second') {
|
this.previewOthFileInfo();
|
}
|
}
|
Bus.$off('queryOtherFileList');
|
Bus.$on("queryOtherFileList",()=>{
|
this.queryOtherFileList()
|
});
|
|
},
|
mounted() {
|
//默认查询页面
|
if (this.nodeList) {
|
this.queryOtherFileList();
|
}
|
window.addEventListener('resize', this.getTabHeight);
|
this.getTabHeight();
|
},
|
//监听
|
watch:{
|
nodeList:{
|
deep: true, // 深度监听
|
handler(newValue, oldValue) {
|
this.queryOtherFileList();
|
this.activeName = 'first';
|
}
|
},
|
fileList:{
|
deep: true, // 深度监听
|
handler:function(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>
|
.otherFileRightMenu{
|
position: absolute;
|
top: 0;
|
height: 100%;
|
}
|
.el-tabs__content{
|
overflow: inherit;
|
}
|
.el-table tr td{
|
border-bottom: 1px dashed #cccccc;
|
}
|
</style>
|
