<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
@close="close(true)"
|
width="400px"
|
@cancel="close(false)"
|
top="0vh"
|
left="30vh"
|
>
|
<el-tabs
|
v-model="activeName"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane
|
label="属性"
|
name="first"
|
>
|
<el-form
|
ref="form"
|
:model="formInline"
|
label-width="80px"
|
>
|
<el-form-item :label="$t('common.name')">
|
{{formInline.name}}
|
</el-form-item>
|
<el-form-item :label="$t('common.type')">
|
|
{{formInline.type}}
|
</el-form-item>
|
|
<el-form-item :label="$t('common.bak')">
|
|
{{formInline.bak}}
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
<!-- <el-tab-pane
|
label="附件"
|
name="second"
|
>
|
|
<el-table
|
:data="tableData"
|
ref="filterTable"
|
height="calc(100% - 130px)"
|
border
|
style="width: 100%"
|
@selection-change="handleAttatchChange"
|
>
|
<el-table-column
|
type="selection"
|
width="70"
|
/>
|
<el-table-column
|
width="60"
|
type="index"
|
:label="$t('common.index')"
|
/>
|
<el-table-column
|
prop="name"
|
:label="$t('common.name')"
|
/>
|
|
<el-table-column
|
prop="sizes"
|
:label="$t('common.size')"
|
:formatter="statSizeChange"
|
/>
|
<el-table-column
|
align="center"
|
:label="$t('common.operate')"
|
min-width="100"
|
>
|
<template slot-scope="scope">
|
<el-link
|
v-if="matchState(scope, /[]/)"
|
@click="setAttatchDetail(scope.$index, scope.row)"
|
class="elLink"
|
>{{ $t('common.see') }}</el-link>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</el-tab-pane> -->
|
|
</el-tabs>
|
<el-dialog
|
title="预览"
|
:append-to-body="false"
|
:visible.sync="dialog.dialogVisible"
|
width="70%"
|
:modal="false"
|
:close-on-click-modal="false"
|
>
|
<div
|
v-if="dialog.isPdf"
|
class="pdfClass"
|
>
|
<iframe
|
:src="dialog.src"
|
type="application/x-google-chrome-pdf"
|
width="100%"
|
height="100%"
|
>
|
</iframe>
|
</div>
|
<div
|
v-if="dialog.isJpg"
|
class="pdfClass"
|
>
|
|
<el-image
|
style="width:100%; height:100%"
|
:src="dialog.src"
|
:preview-src-list="[dialog.src]"
|
>
|
</el-image>
|
|
</div>
|
</el-dialog>
|
</Popup>
|
</template>
|
|
<script>
|
|
import Popup from "./Popup";
|
import { comprehensive_selectFiles, comprehensive_selectModelByGuid } from '../../api/api.js'
|
import { getToken } from "@/utils/auth";
|
|
export default {
|
name: "ModelProperty",
|
components: {
|
Popup,
|
},
|
mixins: [],
|
data() {
|
return {
|
title: "在线地图",
|
left: undefined,
|
tokne: "",
|
data: {
|
|
},
|
mapCollection: undefined,
|
formInline: {
|
title: '',
|
file: '',
|
name: '',
|
type: '',
|
info: '',
|
icon: '',
|
bak: ''
|
},
|
activeName: 'first',
|
tableData: [],
|
dialog: {
|
dialogVisible: false,
|
isPdf: false,
|
isJpg: false,
|
src: ''
|
},
|
attacgSelection: []
|
};
|
},
|
computed: {
|
|
},
|
methods: {
|
|
// 关闭弹窗
|
close(isCloseBtn, removeLayer = true) {
|
// removeLayer && this.removeImageLayer();
|
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
// 打开弹窗
|
async open() {
|
|
this.close(true);
|
|
this.$refs.pop.open();
|
this.title = this.$store.state.catModelInfo.name;
|
|
this.formInline = this.$store.state.catModelInfo;
|
|
},
|
|
// changeToken(token) {
|
// this.mapCollection.tokne = token;
|
// },
|
// 附件=>表格选择
|
handleAttatchChange(val) {
|
this.attacgSelection = val;
|
},
|
statSizeChange(row, column) {
|
return this.stateFormatSizes(row.sizes)
|
},
|
stateFormatSizes(res) {
|
if (res >= 1024) {
|
const val = parseFloat(res / 1024).toFixed(3);
|
return val + ' GB';
|
} else {
|
return res + ' MB';
|
}
|
},
|
matchState(state = "", reg) {
|
var row = state.row;
|
var name = row.name;
|
if (
|
name.indexOf('.pdf') != -1
|
|| name.indexOf('.jpg') != -1
|
|| name.indexOf('.gif') != -1
|
|| name.indexOf('.png') != -1
|
|| name.indexOf('.jpeg') != -1
|
|| name.indexOf('.PDF') != -1
|
|| name.indexOf('.JPG') != -1
|
|| name.indexOf('.GIF') != -1
|
|| name.indexOf('.PNG') != -1
|
|| name.indexOf('.JPEG') != -1
|
|| name.indexOf('.BMP') != -1
|
|| name.indexOf('.bmp') != -1
|
) {
|
return true;
|
}
|
return false;
|
},
|
handleClick(tab, event) {
|
if (tab.name == "second") {
|
this.getAttacthFlieList();
|
}
|
},
|
|
//附件列表查询
|
async getAttacthFlieList() {
|
var obj = {
|
eventid: this.$store.state.catModelInfo.id,
|
tabName: "lf.sys_style"
|
};
|
const res = await comprehensive_selectFiles(obj);
|
if (res.code != 200) {
|
this.$message.error('列表调用失败');
|
return
|
}
|
this.tableData = res.result;
|
},
|
|
//附件查看
|
setAttatchDetail(index, row) {
|
this.refreshAttatchDetail()
|
var name = row.name;
|
if (name.indexOf('.pdf') != -1 || name.indexOf('.PDF') != -1) {
|
this.dialog.dialogVisible = true;
|
this.dialog.isPdf = true;
|
var url = BASE_URL + "/comprehensive/downloadForView?guid=" + row.guid + "&token=" + getToken();
|
this.dialog.src = url
|
} else if (
|
name.indexOf('.jpg') != -1
|
|| name.indexOf('.gif') != -1
|
|| name.indexOf('.png') != -1
|
|| name.indexOf('.jpeg') != -1
|
|| name.indexOf('.JPG') != -1
|
|| name.indexOf('.GIF') != -1
|
|| name.indexOf('.PNG') != -1
|
|| name.indexOf('.JPEG') != -1
|
|| name.indexOf('.BMP') != -1
|
|| name.indexOf('.bmp') != -1) {
|
this.dialog.dialogVisible = true;
|
this.dialog.isJpg = true;
|
var url = BASE_URL + "/comprehensive/downloadForView?guid=" + row.guid + "&token=" + getToken();
|
this.dialog.src = url
|
}
|
},
|
refreshAttatchDetail() {
|
this.dialog.src = "";
|
this.dialog.dialogVisible = false;
|
this.dialog.isPdf = false;
|
this.dialog.isJpg = false;
|
},
|
},
|
mounted() {
|
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.pdfClass {
|
height: 63vh;
|
width: 100%;
|
}
|
</style>
|
