洋浦学校八大中心 德育管理前端

src/views/screenAdaptation/common/commonInfo.vue

@@ -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>

src/views/screenAdaptation/pages/partyCenter/brandCreation.vue

@@ -38,7 +38,7 @@
             <div class="brandList">
                 <vue-scroll :ops="listScroll" :style="showPage?'height:35rem':'height:35rem'" class="score-list-div">
                     <a-list item-layout="horizontal" :data-source="dataList">
-                        <a-list-item slot="renderItem" slot-scope="item" class="listItem">
+                        <a-list-item slot="renderItem" slot-scope="item" class="listItem" @click="showInfo(item)">
                             <a-avatar :src="getImgURL(item.imgObj)"/>
                             <p class="p1">
                                 <span style="width: 7px;height: 7px;border-radius: 50%;background: #fff;margin-left: -5px;display: inline-block;"></span>
@@ -50,25 +50,26 @@
                 </vue-scroll>
             </div>
         </a-spin>
-        <preview-box ref="previewBox" />
+        <CommonInfo commonQueryId="query_dangjian_xiangxi" :commonId="infoId" :show="visible" @cancel="closeInfo"/>
     </CommonBox>
 </template>
 <script>
     /*
      * 品牌创建
      * */
-    import {List, Icon, Avatar, Row, Col, Modal,Spin} from 'ant-design-vue';
+    import {List, Icon, Avatar, Row, Col, Modal, Spin} from 'ant-design-vue';
     import CommonBox from '../secondPages/commonBox.vue';
     import Upload from '../../../../components/common/uploader/Upload.vue';
     import ImgPreview from '../../common/imgPreview.vue';
+    import CommonInfo from '../../common/commonInfo.vue';
     export default{
         data(){
             return {
-                spinning:false,
+                spinning: false,
                 listScroll: this.StaticParams.scrollOption,
                 showPage: true,
                 imgList: [],
-                dataList:[],
+                dataList: [],
                 brandList: [
                     {
                         avatar: require("./images/listPic1.png"),
@@ -122,6 +123,7 @@
                 ],
                 visible: false,
                 modalTitle: '查看详情',
+                infoId: "",
             }
         },
         mounted(){
@@ -152,13 +154,13 @@
                         this.dataList = [];
                         this.imgList = [];
                         let dataList = JSON.parse(result[0].data.result);
-                        //console.log("dataList:", dataList)
                         for (let i = 0, len = dataList.length; i < len; i++) {
                             let item = dataList[i];
                             let coverJson = JSON.parse(item.cover_json);
                             let info = {
-                                info_title:item.info_title,
-                                create_time:item.create_time.replace('T',' ').replace('Z',''),
+                                info_id: item.info_id,
+                                info_title: item.info_title,
+                                create_time: item.create_time.replace('T', ' ').replace('Z', ''),
                             }
                             if (coverJson && coverJson.length > 0) {
                                 info.imgObj = coverJson[0];
@@ -177,11 +179,20 @@
                     }
                 })
             },
-            getImgURL:function (img) {
-                if(img){
+            getImgURL: function (img) {
+                if (img) {
                     return this.BaseConfig.url_path_down + img.key;
                 }
             },
+            showInfo: function (item) {
+                this.infoId = item.info_id + "";
+                this.visible = true;
+            },
+            closeInfo:function () {
+                console.log("关闭panel");
+                this.infoId = "";
+                this.visible = false;
+            }
         },
         components: {
             CommonBox,
@@ -192,9 +203,10 @@
             AAvatar: Avatar,
             AIcon: Icon,
             AModal: Modal,
-            ASpin:Spin,
+            ASpin: Spin,
             Upload,
-            ImgPreview
+            ImgPreview,
+            CommonInfo
         },
     }
 </script>

src/views/screenAdaptation/pages/partyCenter/teamBuildingStyle.vue

@@ -1,6 +1,6 @@
 <template>
     <CommonBox title="队建风采" class="party-center-team-building-style">
-        <div class="teamBuild">
+        <a-spin class="teamBuild" :spinning="spinning">
             <div class="topPic">
                 <!--<div class="swiperBox">-->
                     <!--<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i" alt="">-->
@@ -25,7 +25,7 @@
                     </a-list>
                 </vue-scroll>
             </div>
-        </div>
+        </a-spin>
     </CommonBox>
 </template>
 <script>
@@ -33,11 +33,12 @@
      * 品牌创建
      * */
     import CommonBox from '../secondPages/commonBox.vue';
-    import {List, Icon, Avatar, Row, Col} from 'ant-design-vue';
+    import {List, Icon, Avatar, Row, Col,Spin} from 'ant-design-vue';
     import ImgPreview from '../../common/imgPreview.vue';
     export default{
         data(){
             return {
+                spinning:false,
                 dataList:[],
                 imgList:[],
                 //轮播图图片
@@ -79,7 +80,8 @@
             AList: List,
             AListItem: List.Item,
             AAvatar: Avatar,
-            ImgPreview
+            ImgPreview,
+            ASpin:Spin
         },
         methods: {
             getDataexReport: function () {
@@ -117,6 +119,12 @@
                                 }
                             }
                         }
+                        let imgLen = this.imgList.length;
+                        if(imgLen < 3){
+                            for(let i = 0;i < 3 - imgLen;i ++){
+                                this.imgList.push(null)
+                            }
+                        }
                     }
                 })
             },
@@ -130,63 +138,67 @@
         .teamBuild {
             width: 100%;
             height: 100%;
-            /*图片*/
-            .topPic {
-                height: 30%;
-                display: flex;
-                justify-content: space-between;
-                overflow: hidden;
-                @keyframes mySwiper {
-                    0% {
-                        transform: translateX(0)
-                    }
-                    100% {
-                        transform: translateX(-104%);
+            /deep/ .ant-spin-container{
+                width: 100%;
+                height: 100%;
+                /*图片*/
+                .topPic {
+                    height: 30%;
+                    display: flex;
+                    justify-content: space-between;
+                    overflow: hidden;
+                    @keyframes mySwiper {
+                        0% {
+                            transform: translateX(0)
+                        }
+                        100% {
+                            transform: translateX(-104%);
+                        }
                     }
-                }
-                .swiperBox {
-                    display: inherit;
-                    width: 100%;
-                    height: 100%;
-                    animation: mySwiper 6s ease infinite;
-                    .swiperImg {
+                    .swiperBox {
+                        display: inherit;
+                        width: 100%;
                         height: 100%;
-                        width: 30%;
-                        margin-right: 38px;
+                        animation: mySwiper 6s ease infinite;
+                        .swiperImg {
+                            height: 100%;
+                            width: 30%;
+                            margin-right: 38px;
+                        }
                     }
-                }
-                .img-no-swiper-box {
-                    display: inherit;
-                    width: 100%;
-                    height: 100%;
-                    .swiperImg {
+                    .img-no-swiper-box {
+                        display: inherit;
+                        width: 100%;
                         height: 100%;
-                        width: 30%;
-                        margin-right: 38px;
+                        .swiperImg {
+                            height: 100%;
+                            width: 30%;
+                            margin-right: 38px;
+                        }
                     }
                 }
-            }
-            /*文字*/
-            .botText {
-                height: 60%;
-                .ant-list-split .ant-list-item {
-                    border-bottom: none;
-                    padding: 0;
-                    margin-left: 5px !important;
-                    color: #fff;
-                    cursor: pointer;
-                    > > > p {
-                        font-size: 16px;
-                        margin-bottom: 18px !important;
+                /*文字*/
+                .botText {
+                    height: 60%;
+                    .ant-list-split .ant-list-item {
+                        border-bottom: none;
+                        padding: 0;
+                        margin-left: 5px !important;
+                        color: #fff;
+                        cursor: pointer;
+                        > > > p {
+                            font-size: 16px;
+                            margin-bottom: 18px !important;
+                        }
+                    }
+                    .score-list-div {
+                        width: 100%;
+                        height: 23rem;
+                        display: flex;
+                        flex-direction: column;
+                        margin-top: 15px;
+                        overflow: hidden;
                     }
-                }
-                .score-list-div {
-                    width: 100%;
-                    height: 23rem;
-                    display: flex;
-                    flex-direction: column;
-                    margin-top: 15px;
-                    overflow: hidden;
                 }
             }
         }

src/views/screenAdaptation/pages/partyCenter/teamHelp.vue

@@ -1,6 +1,6 @@
 <template>
     <CommonBox title="团队推助" class="party-center-team-help-style">
-        <div class="teamBoost">
+        <a-spin class="teamBoost" :spinning="spinning">
             <div class="leftList">
                 <vue-scroll :ops="listScroll" :style="showPage?'height:21rem':'height:22rem'"
                             class="score-list-div">
@@ -22,19 +22,20 @@
                     <img-preview class="swiperImg" v-for="(item,i) in imgList" :key="'team-help-'+i" :imgObj="item" />
                 </div>
             </div>
-        </div>
+        </a-spin>
     </CommonBox>
 </template>
 <script>
     /*
      * 品牌创建
      * */
-    import {Carousel, List, Icon, Avatar, Row, Col} from 'ant-design-vue';
+    import {Carousel, List, Icon, Avatar, Row, Col,Spin} from 'ant-design-vue';
     import CommonBox from '../secondPages/commonBox.vue';
     import ImgPreview from '../../common/imgPreview.vue';
     export default{
         data(){
             return {
+                spinning:false,
                 //轮播图图片
                 imgArr: [
                     {src: require("./images/listPic1.png")},
@@ -78,7 +79,8 @@
             AList: List,
             AListItem: List.Item,
             AAvatar: Avatar,
-            ImgPreview
+            ImgPreview,
+            ASpin:Spin
         },
         methods: {
             getDataexReport: function () {
@@ -105,7 +107,6 @@
                         this.dataList = [];
                         this.imgList = [];
                         let dataList = JSON.parse(result[0].data.result);
-                        console.log(dataList);
                         this.dataList.push(...dataList);
                         for (let i = 0, len = dataList.length; i < len; i++) {
                             let item = dataList[i];
@@ -116,6 +117,12 @@
                                 }
                             }
                         }
+                        let imgLen = this.imgList.length;
+                        if(imgLen < 3){
+                            for(let i = 0;i < 3 - imgLen;i ++){
+                                this.imgList.push(null)
+                            }
+                        }
                     }
                 })
             },
@@ -131,6 +138,12 @@
             height: 100%;
             display: flex;
             justify-content: space-between;
+            /deep/ .ant-spin-container{
+                width: 100%;
+                height: 100%;
+                display: flex;
+                justify-content: space-between;
+            }
             .leftList {
                 /*margin-right: 23px;*/
                 width: calc(70% - 5px);
@@ -189,6 +202,5 @@
                 }
             }
         }
-
     }
 </style>

src/views/screenAdaptation/pages/secondPages/secondPageBox.vue

@@ -32,7 +32,9 @@
             document.addEventListener('click',function(e){
                 let menuDiv = document.getElementById("navigationMenuId");
                 if (!e.path.includes(menuDiv)) {
-                    _this.$refs.navigationMenu.hiddenMenuFlag();
+                    if(_this.$refs.navigationMenu){
+                        _this.$refs.navigationMenu.hiddenMenuFlag();
+                    }
                 }
             });
             this.cancelLoading();