super-fusion-platform/src/views/screenAdaptation/common/commonInfo.vue

<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 v-for="item in infoArr">
                    <span style="margin-right: 20px">{{item.title}}：{{item.value}}</span>
                </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>
            <!--<img src="../assets/images/modalLogo.png" alt="">-->
        </div>
    </modal-panel>
</template>
<script>
    /*
     * 图文详情弹出页面
     *
     * infoObj:{
     *  infoTitle:"",
     *  infoArr:[{'title':'发布人','value':'费利明'},{'title':'发布时间','value':'2022-06-30 16：00'}]
     *  content:""
     * }
     *
     *
     * */
    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: ""
            },
            infoObj: {
                type: Object,
                default: () => {
                }
            },
            commonQueryId: {
                type: String,
                default: ""
            },
        },
        data(){
            return {
                infoId: this.$props.commonId,
                title: this.modalTitle, //弹出框标题
                showPanel: this.show, //是否显示
                listScroll: this.StaticParams.scrollOption,
                //业务相关属性
                infoTitle: this.$props.infoObj && this.$props.infoObj.title ? this.$props.infoObj.title : "",
                infoArr: this.$props.infoObj && this.$props.infoObj.infoArr ? this.$props.infoObj.infoArr : [],
                contentHtml: this.$props.infoObj && this.$props.infoObj.content ? this.$props.infoObj.content : "",
//                uploadPerson:"",
//                contentHtml:"",
            }
        },
        watch: {
            commonId: function (newVal) {
                this.infoId = newVal;
                this.getDataInfo();
            },
            modalTitle: function (newData) {
                this.title = newData;
            },
            show: function (newData) {
                this.showPanel = newData;
            },
            infoObj: function (newData) {
                this.infoTitle = newData.title;
                this.infoArr = newData.infoArr;
                this.contentHtml = newData.content;
            }
        },
        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;
            }
            /deep/ .ant-modal-body {
                width: 680px !important;
                height: 410px !important;
                .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;
                        h1 {
                            color: #fff;
                        }
                    }
                    .info-content-style {
                        width: 100%;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        color: #000 !important;
                    }
                    .content-info-style {
                        width: 100%;
                        height: 400px;
                        color: #000 !important;
                        .content-scroll-style {
                            display: flex;
                            flex-wrap: wrap;
                        }
                    }
                    /*.content-info-style > div > div {*/
                    /*overflow: hidden !important;*/
                    /*}*/
                }
            }
        }
    }
</style>