<template>
|
<div class="">
|
<a-row class="row" :gutter="gutter">
|
<a-col :span="6" class="label">产品名称</a-col>
|
<a-col :span="18">
|
<div class="content">{{ FkData.parentName }}</div>
|
</a-col>
|
</a-row>
|
<a-row class="row" :gutter="gutter">
|
<a-col :span="6" class="label">产品型号</a-col>
|
<a-col :span="18">
|
<div class="content">{{ FkData.parentModel }}</div>
|
</a-col>
|
</a-row>
|
<a-row class="row" :gutter="gutter">
|
<a-col :span="6" class="label">定制单号</a-col>
|
<a-col :span="18">
|
<div class="content">{{ FkData.customCode }}</div>
|
</a-col>
|
</a-row>
|
<a-row class="row" :gutter="gutter">
|
<a-col :span="6" class="label">版本时间</a-col>
|
<a-col :span="18">
|
<div class="content">{{ FkData.versionTime }}</div>
|
</a-col>
|
</a-row>
|
<a-row class="row" :gutter="gutter">
|
<a-col :span="6" class="label">问题描述</a-col>
|
<a-col :span="18">
|
<div class="content">{{ FkData.content }}</div>
|
</a-col>
|
</a-row>
|
<a-row class="row" :gutter="gutter">
|
<a-col :span="6" class="label">相关附件</a-col>
|
<a-col :span="18">
|
<div class="content">
|
<a-table
|
ref="aTable"
|
size="small"
|
:scroll="{ y: 300 }"
|
bordered
|
:columns="columns"
|
:data-source="dataSource"
|
:pagination="false"
|
rowKey="url"
|
>
|
<template slot="action" slot-scope="text, record">
|
<a v-if="viewable(record.type)" @click="view(record)">预览</a>
|
<a-divider
|
v-if="viewable(record.type)"
|
type="vertical"
|
></a-divider>
|
<a :href="record.url" :download="record.fileName">下载</a>
|
</template>
|
</a-table>
|
<!-- <a-button
|
v-if="FkData.file && viewable"
|
class="btn"
|
type="primary"
|
@click="view"
|
>预览</a-button
|
>
|
<a-button v-if="FkData.file" class="btn" @click="download"
|
>下载</a-button
|
>
|
<span v-else>无</span> -->
|
</div>
|
</a-col>
|
</a-row>
|
<a-modal
|
:width="600"
|
:visible="previewVisible"
|
:footer="null"
|
@cancel="handleCancel"
|
>
|
<img alt="example" style="width: 100%" :src="imgUrl" />
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import getWebUrl from "@/assets/js/tools/getWebUrl";
|
import { dwgReview } from "@/pages/workplace/apis";
|
import { downLoadFileByFilePath } from "@/assets/js/apis";
|
|
export default {
|
name: "",
|
props: {
|
FkData: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
},
|
data() {
|
return {
|
columns: [
|
{
|
title: "文件名称",
|
dataIndex: "fileName",
|
align: "center",
|
width: 200,
|
},
|
{
|
title: "文件后辍",
|
dataIndex: "type",
|
align: "center",
|
width: 80,
|
},
|
{
|
title: "操作",
|
dataIndex: "operation",
|
key: "operation",
|
align: "center",
|
width: 270,
|
scopedSlots: { customRender: "action" },
|
},
|
],
|
// dataSource: [],
|
gutter: 16,
|
webUrl: getWebUrl(),
|
previewVisible: false,
|
imgUrl: "",
|
};
|
},
|
components: {},
|
computed: {
|
dataSource() {
|
return this.FkData.attachFiles.map((v) => {
|
let { type, name } = this.getFileTypeAndName(v);
|
let url = this.webUrl + v;
|
return {
|
fileName: name,
|
type,
|
url,
|
url1: v,
|
};
|
});
|
},
|
// fileType() {
|
// let path = this.FkData.file;
|
// return path ? this.getFileType(path) : undefined;
|
// },
|
},
|
methods: {
|
viewable(fileType) {
|
return ["bmp", "jpg", "jpeg", "png", "pdf", "doc", "docx", "dwg"].some(
|
(v) => v == fileType
|
);
|
},
|
getFileTypeAndName(path) {
|
let reg = /(.*\\+)*(.*)$/;
|
let fileName = path.match(reg)[2];
|
let arr = fileName.split(".");
|
return {
|
type: arr.length ? arr[arr.length - 1].toLowerCase() : "",
|
name: fileName,
|
};
|
},
|
view(record) {
|
let { type, url, url1 } = record;
|
switch (type) {
|
// 图片
|
case "bmp":
|
case "jpg":
|
case "jpeg":
|
case "png":
|
this.imgUrl = url;
|
this.previewVisible = true;
|
break;
|
case "pdf":
|
window.open(url);
|
break;
|
case "doc":
|
case "docx":
|
case "dwg":
|
this.dwgReview(url1);
|
break;
|
default:
|
this.$message.warn("该类型文件暂不支持预览");
|
break;
|
}
|
},
|
dwgReview(url) {
|
let loading = this.$layer.loading();
|
dwgReview(url)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
if (code && data) {
|
window.open(this.webUrl + data);
|
} else {
|
this.$message.error(msg);
|
}
|
this.$layer.close(loading);
|
})
|
.catch((error) => {
|
console.log(error);
|
this.$layer.close(loading);
|
});
|
},
|
// download(record) {
|
// let { url, fileName } = record;
|
// // let link = document.createElement("a");
|
// // link.style.display = "none";
|
// // link.href = url;
|
// // link.download = fileName;
|
// // document.body.appendChild(link);
|
// // link.click();
|
// // document.body.removeChild(link);
|
// },
|
handleCancel() {
|
this.previewVisible = false;
|
},
|
},
|
|
mounted() {
|
// console.log("FkData", this.FkData);
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.row {
|
margin-bottom: 12px;
|
}
|
.label {
|
// display: flex;
|
// justify-content: flex-end;
|
// align-items: center;
|
color: rgba(0, 0, 0, 0.85);
|
// padding-right: 0.4em;
|
height: 32px;
|
line-height: 32px;
|
text-align: right;
|
&::after {
|
content: ":";
|
margin-left: 2px;
|
margin-right: 8px;
|
}
|
}
|
.btn + .btn {
|
margin-left: 16px;
|
}
|
.content {
|
line-height: 32px;
|
}
|
</style>
|
