<template>
|
<a-card :bordered="false">
|
<a-col :span="18">
|
<a-spin
|
tip="Loading..."
|
:spinning="spinning"
|
>
|
<div>
|
<a-row>
|
<!-- 预览区域 -->
|
<a-col :span="24">
|
<template>
|
<!-- <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;">
|
<div style="width: 100%;height: 100%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;"> -->
|
<img
|
style="width: 100%;"
|
:src="src"
|
:preview="preview"
|
>
|
<!-- :src="dataSource[0].upload.src"
|
:preview="dataSource[0].id" -->
|
<!-- </div>
|
</div> -->
|
</template>
|
</a-col>
|
</a-row>
|
</div>
|
</a-spin>
|
<p></p>
|
</a-col>
|
</a-card>
|
</template>
|
|
<script>
|
|
import ARow from 'ant-design-vue/es/grid/Row'
|
import { getAction } from '@/api/manage'
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
import Vue from 'vue'
|
import { getFileAccessHttpUrl } from '@/api/manage';
|
|
export default {
|
name: 'PhotoPreview',
|
components: {
|
ARow
|
},
|
props: {
|
specialtyInspectionPlanId: {
|
type: String,
|
default: '',
|
required: false
|
}
|
},
|
watch: {
|
specialtyInspectionPlanId: {
|
immediate: true,
|
handler(val) {
|
if (!this.specialtyInspectionPlanId) {
|
this.clearList()
|
} else {
|
getAction(this.url.list, { pageNo: 1, pageSize: 10, id: val, delFlag: 0 }).then((res) => {
|
if (res.success) {
|
for (let i = 0; i < res.result.records.length; i++) {
|
let r = res.result.records[i].upload;
|
r.src = this.getSrc(res.result.records[i].upload);
|
}
|
this.dataSource = res.result.records || res.result;
|
this.src = res.result.records[0].upload.src
|
this.preview = res.result.records[0].id
|
} else {
|
this.$message.warning(res.message)
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
}
|
}
|
}
|
},
|
data() {
|
return {
|
description: '图片预览页面',
|
spinning: false,
|
dataSource: [],
|
src: "",
|
preview: "",
|
url: {
|
list: "/eam/specialtyInspectionPlan/getSpecialtyInspectionPlanList",
|
},
|
}
|
},
|
created() {
|
},
|
methods: {
|
clearList() {
|
this.dataSource = [],
|
this.src = "",
|
this.preview = ""
|
},
|
|
getSrc(record) {
|
|
if (!record.path) {
|
return '';
|
}
|
//本地：local\Minio：minio\阿里云：alioss
|
if (record.uploadType == 'local') {
|
|
let ssoLoginFlag = Vue.ls.get("ssoLoginFlag");
|
let deployMode = Vue.ls.get("deployMode");
|
|
if (ssoLoginFlag && deployMode == "container") {
|
var baseProject = Vue.ls.get("baseProject");
|
console.log("baseProject==>" + baseProject)
|
|
var hostname = window.location.protocol + "//" + window.location.host;
|
var url = hostname + '/' + baseProject + '/sys/common/static';
|
return getFileAccessHttpUrl(record.path + record.encodeName, url, window._CONFIG['hyperTextTransfer'])
|
} else {
|
//根据发布状态修改https 或 http
|
return getFileAccessHttpUrl(record.path + record.encodeName, this.url.urlDownload, window._CONFIG['hyperTextTransfer'])
|
}
|
|
} else if (record.uploadType == 'alioss') {
|
|
const OSS = require('ali-oss')
|
const client = new OSS({
|
// region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
|
region: window._CONFIG['region'],
|
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
|
accessKeyId: window._CONFIG['accessKeyId'],
|
accessKeySecret: window._CONFIG['accessKeySecret'],
|
bucket: window._CONFIG['bucket'],
|
})
|
// object-key表示从OSS下载文件时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
|
return client.signatureUrl(record.path)
|
}
|
},
|
}
|
}
|
</script>
|
<style scoped>
|
.table-operator {
|
margin-bottom: 10px;
|
}
|
|
.clName .ant-tree li span.ant-tree-switcher,
|
.ant-tree li span.ant-tree-iconEle {
|
width: 10px !important;
|
}
|
|
.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
|
background-color: #1890ff !important;
|
}
|
</style>
|
