|
|
|
@ -0,0 +1,173 @@
|
|
|
|
|
<template>
|
|
|
|
|
<modal-panel
|
|
|
|
|
addChildType="slot"
|
|
|
|
|
:modalTitle="title"
|
|
|
|
|
:OKButton="false"
|
|
|
|
|
:show="showPanel"
|
|
|
|
|
:mask="true"
|
|
|
|
|
modalWidth="50%"
|
|
|
|
|
modalClassName="common-info-content-style"
|
|
|
|
|
@callback="modalCallback"
|
|
|
|
|
>
|
|
|
|
|
<div class="common-info-style">
|
|
|
|
|
<div class="title-content-style">
|
|
|
|
|
<h1>{{infoTitle}}</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-content-style">
|
|
|
|
|
<span style="margin-right: 20px">上传日期:{{uploadTime}}</span>
|
|
|
|
|
<span>上传人:{{uploadPerson}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-info-style">
|
|
|
|
|
<vue-scroll :ops="listScroll" style="height: 400px" class="content-scroll-style">
|
|
|
|
|
<div v-html="contentHtml"></div>
|
|
|
|
|
</vue-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</modal-panel>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
/*
|
|
|
|
|
* 图文详情弹出页面
|
|
|
|
|
* */
|
|
|
|
|
import {Modal} from 'ant-design-vue';
|
|
|
|
|
import ModalPanel from "../../../components/common/modal/ModalPanel";
|
|
|
|
|
export default{
|
|
|
|
|
props: {
|
|
|
|
|
show: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
modalTitle: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "查看详情",
|
|
|
|
|
},
|
|
|
|
|
commonId: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: ""
|
|
|
|
|
},
|
|
|
|
|
commonQueryId: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: ""
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
infoId: this.$props.commonId,
|
|
|
|
|
title: this.modalTitle, //弹出框标题
|
|
|
|
|
showPanel: this.show, //是否显示
|
|
|
|
|
listScroll: this.StaticParams.scrollOption,
|
|
|
|
|
//业务相关属性
|
|
|
|
|
infoTitle: "",
|
|
|
|
|
uploadTime:"",
|
|
|
|
|
uploadPerson:"",
|
|
|
|
|
contentHtml:"",
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
commonId: function (newVal) {
|
|
|
|
|
this.infoId = newVal;
|
|
|
|
|
this.getDataInfo();
|
|
|
|
|
},
|
|
|
|
|
modalTitle: function (newData) {
|
|
|
|
|
this.title = newData;
|
|
|
|
|
},
|
|
|
|
|
show: function (newData) {
|
|
|
|
|
this.showPanel = newData;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
if (this.infoId && this.infoId !== "") {
|
|
|
|
|
this.getDataInfo();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//获取数据明细数据
|
|
|
|
|
getDataInfo: function () {
|
|
|
|
|
if (!this.infoId || this.infoId === "") {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let param = {
|
|
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
|
|
"query": {
|
|
|
|
|
"query_id": this.$props.commonQueryId,
|
|
|
|
|
"query_param": [
|
|
|
|
|
this.infoId + ""
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
"query_cache": 0,
|
|
|
|
|
"query_count": [],
|
|
|
|
|
"query_format": "json",
|
|
|
|
|
"query_group": []
|
|
|
|
|
}
|
|
|
|
|
this.DataexReportInterface.callInterface([{
|
|
|
|
|
params: param,
|
|
|
|
|
method: "post",
|
|
|
|
|
}], (result) => {
|
|
|
|
|
//this.spinning = false;
|
|
|
|
|
if (result[0].data.success) {
|
|
|
|
|
let dataInfo = JSON.parse(result[0].data.result);
|
|
|
|
|
if(dataInfo && dataInfo.length > 0){
|
|
|
|
|
let info = dataInfo[0];
|
|
|
|
|
this.infoTitle = info.info_title;
|
|
|
|
|
this.uploadTime = info.create_time.replace('T', ' ').replace('Z', '');
|
|
|
|
|
this.uploadPerson = info.person_name;
|
|
|
|
|
this.contentHtml = info.info_content;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
modalCallback: function (ary) {
|
|
|
|
|
if (ary[0] === "ok") {
|
|
|
|
|
//this.$emit("selectComplete", this.selectedDept);
|
|
|
|
|
} else {
|
|
|
|
|
this.infoTitle = "";
|
|
|
|
|
this.$emit("cancel", null);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
AModal: Modal,
|
|
|
|
|
ModalPanel
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
/deep/ .dialog-style {
|
|
|
|
|
.ant-modal-content {
|
|
|
|
|
padding-left: 100px;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
.ant-modal-header {
|
|
|
|
|
height: 50px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.ant-modal-body {
|
|
|
|
|
.common-info-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 500px;
|
|
|
|
|
padding-right: 50px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.title-content-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.info-content-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
.content-info-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 400px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|