<template>
|
<div class="main">
|
<a-layout class="main">
|
<a-layout-sider width="260">
|
<list class="list" :list="versionList" @select="selectChanged"></list>
|
</a-layout-sider>
|
<a-layout>
|
<a-layout-header>
|
<a-card>
|
<a-descriptions title="详情" bordered>
|
<a-descriptions-item label="文件名称">{{
|
currentVersion.fileName
|
}}</a-descriptions-item>
|
<a-descriptions-item label="版本号">{{
|
currentVersion.fileVersion
|
}}</a-descriptions-item>
|
<a-descriptions-item label="上传时间">{{
|
currentVersion.createTime
|
}}</a-descriptions-item>
|
<a-descriptions-item label="负责人">{{
|
currentVersion.editor
|
}}</a-descriptions-item>
|
<a-descriptions-item label="审核">{{
|
currentVersion.auditor
|
}}</a-descriptions-item>
|
<a-descriptions-item label="文件类型">{{
|
currentVersion.fileType
|
}}</a-descriptions-item>
|
<a-descriptions-item label="发布时间">{{
|
currentVersion.releaseDate
|
}}</a-descriptions-item>
|
<a-descriptions-item label="发布说明">{{
|
currentVersion.releaseNotes
|
}}</a-descriptions-item>
|
</a-descriptions>
|
</a-card>
|
</a-layout-header>
|
<a-layout-content>
|
<div class="wraper" ref="wraper">
|
<div class="inner">
|
<div class="title">适用产品</div>
|
<a-table
|
v-if="currentVersion.currentFlag == 0"
|
ref="aTable"
|
size="small"
|
:scroll="{ y: 300 }"
|
bordered
|
:columns="columns"
|
:data-source="dataSource"
|
:pagination="false"
|
rowKey="id"
|
>
|
</a-table>
|
<div v-else>
|
<a-tag color="#f50" class="all">适用全部</a-tag>
|
</div>
|
</div>
|
</div>
|
</a-layout-content>
|
<a-layout-footer>
|
<a-card>
|
<template>
|
<a-button v-if="canDownload && currentVersion.status" type="primary" @click="downloadFile"
|
>下载</a-button
|
>
|
<a-button v-if="canUpload" type="primary" @click="lock">{{
|
currentVersion.status == 0 ? "解锁" : "锁定"
|
}}</a-button>
|
<a-button type="primary" @click="viewLog">锁定日志</a-button>
|
</template>
|
</a-card>
|
</a-layout-footer>
|
</a-layout>
|
</a-layout>
|
<!-- 操作原因 -->
|
<a-modal
|
:visible="reasonVisible"
|
:width="460"
|
title="操作原因"
|
:destroyOnClose="true"
|
:maskClosable="false"
|
@cancel="reasonCancel"
|
@ok="reasonOk"
|
>
|
<a-form-model-item ref="name" label="操作原因">
|
<a-input
|
type="textarea"
|
v-model="reason"
|
placeHolder="请输入操作原因"
|
/>
|
</a-form-model-item>
|
</a-modal>
|
<!-- 日志 -->
|
<a-modal
|
:visible="logVisible"
|
:footer="null"
|
:width="800"
|
title="操作日志"
|
:destroyOnClose="true"
|
@cancel="logCancel"
|
>
|
<div class="log-content">
|
<a-timeline v-if="logList.length">
|
<a-timeline-item
|
v-for="(item, idx) in logList"
|
:key="'log_' + idx"
|
:color="item.status == 0 ? 'red' : 'green'"
|
>
|
<div>
|
<span class="user">{{ item.userName }}</span> 在
|
<span class="time">{{ item.createTime }}</span>
|
{{ item.status == 0 ? "锁定" : "解锁" }}了版本
|
<span class="version">{{ item.fileVersion }}</span>
|
</div>
|
<div>操作原因: {{ item.reason ? item.reason : "无" }}</div>
|
</a-timeline-item>
|
</a-timeline>
|
<a-empty v-else />
|
</div>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import List from "./versionList";
|
import getWebUrl from "@/assets/js/tools/getWebUrl";
|
import { sopLock, getSopHis, getLogList } from "./apis";
|
import checkPermit from "@/assets/js/tools/checkPermit";
|
import PERMITS from "@/assets/js/const/const_permits";
|
import { mapGetters } from 'vuex';
|
export default {
|
name: "",
|
|
data() {
|
return {
|
logList: [],
|
logVisible: false,
|
reasonVisible: false,
|
reason: "",
|
fileName: this.$route.query.fileName,
|
versionList: [],
|
webUrl: getWebUrl(),
|
currentVersion: {},
|
columns: [
|
{
|
title: "物料编码",
|
dataIndex: "code",
|
align: "center",
|
},
|
{
|
title: "型/板号",
|
dataIndex: "model",
|
align: "center",
|
},
|
],
|
dataSource: [],
|
};
|
},
|
components: {
|
List,
|
},
|
computed: {
|
...mapGetters("account", ["permits"]),
|
canUpload() {
|
return checkPermit(PERMITS.uploadSoftware, this.permits);
|
},
|
canDownload() {
|
return checkPermit(PERMITS.downloadSoftware, this.permits);
|
},
|
},
|
watch: {},
|
methods: {
|
viewLog() {
|
// console.log(obj);
|
const { id, fileVersion } = this.currentVersion;
|
getLogList(id).then((res) => {
|
const { code, data, data2 } = res.data;
|
if (code) {
|
this.logList = data2.map((v) => ({ ...v, fileVersion }));
|
this.logVisible = true;
|
} else {
|
this.$message.error("日志查询失败");
|
}
|
});
|
},
|
logCancel() {
|
this.logVisible = false;
|
},
|
downloadFile() {
|
// console.log(record);
|
let record = this.currentVersion;
|
let loading = this.$layer.loading();
|
let link = document.createElement("a");
|
link.style.display = "none";
|
let url = this.webUrl + record.fileUrl;
|
let fileName = record.fileUrl.split("/").pop();
|
link.href = url;
|
link.download = fileName;
|
document.body.appendChild(link);
|
link.click();
|
this.$layer.close(loading);
|
document.body.removeChild(link);
|
},
|
getVersions() {
|
getSopHis(this.fileName).then((res) => {
|
const { code, data, data2 } = res.data;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
this.versionList = list;
|
});
|
},
|
selectChanged(obj) {
|
// console.log(obj, "--==");
|
this.currentVersion = obj;
|
this.dataSource = obj.sopProductList;
|
},
|
reasonCancel() {
|
this.reasonVisible = false;
|
},
|
reasonOk() {
|
let { id, status } = this.currentVersion;
|
let reason = this.reason;
|
status = status == 0 ? 1 : 0;
|
sopLock(id, status, reason).then((res) => {
|
const { code } = res.data;
|
if (code) {
|
this.$message.success("操作成功");
|
this.reasonVisible = false;
|
this.currentVersion.status = status;
|
} else {
|
this.$message.error("操作失败");
|
}
|
});
|
},
|
lock() {
|
this.reason = "";
|
this.reasonVisible = true;
|
},
|
},
|
mounted() {
|
this.getVersions();
|
},
|
beforeDestroy() {},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.main {
|
height: 100%;
|
.ant-layout-header,
|
.ant-layout-sider {
|
background: transparent;
|
}
|
.ant-layout-header {
|
height: auto;
|
}
|
.list {
|
height: 100%;
|
}
|
.wraper {
|
height: 100%;
|
position: relative;
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
/deep/.ant-layout {
|
margin-left: 10px;
|
}
|
.ant-layout-header {
|
padding: 0;
|
line-height: inherit;
|
margin-bottom: 10px;
|
}
|
.ant-btn + .ant-btn {
|
margin-left: 1em;
|
}
|
.ant-layout-content {
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
margin: 0;
|
padding: 0;
|
color: rgba(0, 0, 0, 0.65);
|
font-size: 14px;
|
font-variant: tabular-nums;
|
line-height: 1.5;
|
list-style: none;
|
-webkit-font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
position: relative;
|
background: #fff;
|
border-radius: 2px;
|
-webkit-transition: all 0.3s;
|
transition: all 0.3s;
|
padding: 24px;
|
zoom: 1;
|
/deep/.ant-descriptions-item-label {
|
width: 12rem;
|
text-align: right;
|
}
|
}
|
.ant-layout-footer {
|
padding: 0;
|
}
|
.img-wraper {
|
width: 80px;
|
height: 50px;
|
display: inline-block;
|
.image-view {
|
width: 100%;
|
height: 100%;
|
/deep/img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
}
|
/deep/.is-replace > td {
|
background: #00eaff;
|
}
|
/deep/.is-replace.is-replace.ant-table-row-hover > td,
|
/deep/.is-replace.is-replace:hover > td {
|
background: #affaff;
|
}
|
/deep/.ant-table-row-level-1 > td {
|
background: #ff8ea2;
|
}
|
/deep/.ant-table-row-level-1.ant-table-row-level-1.ant-table-row-hover > td,
|
/deep/.ant-table-row-level-1.ant-table-row-level-1:hover > td {
|
background: #ffbcc9;
|
}
|
.title {
|
margin-bottom: 20px;
|
color: rgba(0, 0, 0, 0.85);
|
font-weight: bold;
|
font-size: 16px;
|
line-height: 1.5;
|
}
|
}
|
.diff-content {
|
display: flex;
|
flex-direction: column;
|
height: 400px;
|
.footer {
|
text-align: right;
|
.btn {
|
padding: 6px;
|
display: inline-block;
|
background: #00eaff;
|
border-radius: 4px;
|
color: #fff;
|
}
|
}
|
.img-wrap {
|
flex: 1;
|
}
|
&.full {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
height: auto;
|
}
|
}
|
.img-wrap {
|
width: 100%;
|
position: relative;
|
.img-wrap-inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
}
|
.all {
|
padding: 10px 20px;
|
font-size: 22px;
|
}
|
</style>
|
