页面修改

src/api/course/index.js

@@ -778,3 +778,14 @@ export function queryChapterList(data) {
     data
   })
 }
+
+/**
+ *  获取日志列表
+ */
+export function GetMsgLogPage(data) {
+  return request({
+    url: "/Public/GetMsgLogPage",
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file

src/layouts/MainLayout.vue

 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr lFf">
+    <!-- 头部 -->
     <q-header bordered reveal height-hint="98" class="head-bg text-dark">
-      <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
-        <q-avatar style="width:38px" square>
-          <img :src="logo" />
-        </q-avatar>
-        <q-toolbar-title style="font-family:perfectFont;margin-right:50px">
-          {{ name }}
+      <q-toolbar style="height: 60px; width: 100vw" class="q-pr-lg q-pl-lg">
+        <q-toolbar-title
+          style="font-family: perfectFont; margin-right: 50px"
+          v-if="$q.platform.is.desktop"
+        >
+          {{ getLocalStorage().GroupName }}
         </q-toolbar-title>
         <q-tabs
           v-model="tab"
           @input="changeNavs"
           inline-label
-          style="margin:0 auto;height:60px;flex:1;justify-content: left;font-weight:bold;"
+          style="
+            margin: 0 auto;
+            height: 60px;
+            flex: 1;
+            justify-content: left;
+            font-weight: bold;
+          "
           shrink
           stretch
-          v-if="userInfo"
+          v-if="userInfo && $q.platform.is.desktop"
           active-color="primary"
         >
           <q-tab
@@ -28,10 +35,17 @@
             :icon="x.MenuIcon"
           />
         </q-tabs>
+        <div v-if="userInfo && $q.platform.is.mobile" class="col">
+          <q-btn
+            flat
+            dense
+            color="primary"
+            icon="iconfont icon-menu"
+            @click="drawerLeft = !drawerLeft"
+          />
+        </div>
         <div class="q-pl-lg flex items-center">
           <div class="wave_wrapper" @click="showNotify">
-            <!-- <span class="dona wave_scale">
-            </span> -->
             <span
               :class="{
                 dona: socektArr.length > 0,
@@ -44,7 +58,7 @@
               src="icons/svg/Code/Compiling.svg"
             ></inline-svg>
           </div>
-          <q-btn flat color="text-black" style="height:50px" @click="showInfo">
+          <q-btn flat color="text-black" style="height: 50px" @click="showInfo">
             <span class="text-grey q-mr-xs">Hi</span>
             <span class="text-dark q-mr-md"
               >{{
@@ -54,7 +68,7 @@
             <q-avatar
               size="35px"
               rounded
-              style="background:#C9F7F5"
+              style="background: #c9f7f5"
               text-color="white"
             >
               <img
@@ -71,17 +85,20 @@
         </div>
       </q-toolbar>
     </q-header>
+    <!-- 除去头部以外的页面 -->
     <q-page-container class="window-height">
       <div class="row items-stretch full-height">
         <div
-          style="box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);background-color:#f5f6f7"
+          style="
+            box-shadow: 2px 0 10px 0 rgba(237, 238, 240, 0.5);
+            background-color: #f5f6f7;
+          "
           class="text-subtitle2 second-menu-bg"
           :style="{ width: IsShowLeft ? '0' : '180px' }"
-          v-if="secondNavs && secondNavs.length > 0"
+          v-if="secondNavs && secondNavs.length > 0 && $q.platform.is.desktop"
         >
           <div class="full-width left-menu-box q-pt-md">
             <div class="is-show-menu-2" @click="changeLeft">
-              <!-- <a v-if="!IsShowLeft" title="收起"><<</a> -->
               <i
                 v-if="!IsShowLeft"
                 class="iconfont icon-shouqi"
@@ -92,9 +109,8 @@
                 class="iconfont icon-zhankai is_Show_menu_3"
                 title="展开"
               ></i>
-              <!-- <a v-else class="is_Show_menu_3" title="展开">>></a> -->
             </div>
-            <q-list style="width:180px;overflow:hidden">
+            <q-list style="width: 180px; overflow: hidden">
               <template v-for="(x, i) in secondNavs">
                 <q-item
                   :to="x.MenuUrl"
@@ -104,7 +120,7 @@
                   v-if="x.SubList && x.SubList.length == 0"
                   :key="i"
                 >
-                  <q-item-section avatar style="min-width:30px;">
+                  <q-item-section avatar style="min-width: 30px">
                     <q-icon :name="x.MenuIcon" size="20px" />
                   </q-item-section>
                   <q-item-section>{{ x.MenuName }}</q-item-section>
@@ -120,7 +136,7 @@
                   >
                     <q-item-section
                       avatar
-                      style="padding-right:0;min-width:30px;"
+                      style="padding-right: 0; min-width: 30px"
                     >
                       <q-icon :name="y.MenuIcon" size="20px" />
                     </q-item-section>
@@ -131,7 +147,9 @@
             </q-list>
           </div>
         </div>
-        <div class="col" style="background: #f2f4f7;">
+        <div v-if="$q.platform.is.mobile"></div>
+        <!-- 页面主体区域 -->
+        <div class="col" style="background: #f2f4f7">
           <q-scroll-area
             :thumb-style="thumbStyle"
             :bar-style="barStyle"
@@ -143,17 +161,23 @@
         </div>
       </div>
     </q-page-container>
+    <!-- 个人中心组件 -->
     <user-info-box
       v-if="persistent"
       :show-obj="userInfo"
       @close="closeSaveForm"
     ></user-info-box>
+    <!-- 消息提示组件 -->
     <notify
       v-if="persistentNotify"
       :show-obj="userInfo"
       :socekt-obj="socektArr"
+      :logMsg="logMsg"
+      :logCount="logCount"
       @close="closeSaveForm"
+      @addLogList="getLogList"
     ></notify>
+    <!-- 学生信息组件 -->
     <studentRight-form
       v-if="callInStu"
       :isJudgeTrans="1"
@@ -162,6 +186,79 @@
       @close="closeStuForm"
     >
     </studentRight-form>
+
+    <q-drawer
+      v-model="drawerLeft"
+      show-if-above
+      :width="350"
+      overlay
+      side="left"
+      bordered
+      class="bg-primary text-dark"
+      v-if="userInfo && $q.platform.is.mobile"
+    >
+      <q-scroll-area class="fit">
+        <div class="q-pa-sm">
+          <q-list>
+            <template v-for="(x, i) in userInfo.MenuList">
+              <q-item
+                :to="x.MenuUrl"
+                clickable
+                v-ripple
+                :active="currentPath == x.MenuUrl"
+                v-if="x.SubList && x.SubList.length == 0"
+                :key="i"
+              >
+                <q-item-section avatar style="min-width: 30px">
+                  <q-icon :name="x.MenuIcon" size="20px" />
+                </q-item-section>
+                <q-item-section>{{ x.MenuName }}</q-item-section>
+              </q-item>
+              <q-expansion-item v-else :label="x.MenuName">
+                <template v-for="(y, yi) in x.SubList">
+                  <q-item
+                    :to="y.MenuUrl"
+                    clickable
+                    v-ripple
+                    :active="currentPath == y.MenuUrl"
+                    :key="yi"
+                    class="q-ml-md"
+                    v-if="!y.SubList || y.SubList.length == 0"
+                  >
+                    <q-item-section
+                      avatar
+                      style="padding-right: 0; min-width: 30px"
+                    >
+                      <q-icon :name="y.MenuIcon" size="20px" />
+                    </q-item-section>
+                    <q-item-section>{{ y.MenuName }}</q-item-section>
+                  </q-item>
+                  <q-expansion-item v-else :label="y.MenuName" class="q-ml-md">
+                    <q-item
+                      :to="z.MenuUrl"
+                      clickable
+                      v-ripple
+                      :active="currentPath == z.MenuUrl"
+                      :key="zi"
+                      v-for="(z, zi) in y.SubList"
+                      class="q-ml-md"
+                    >
+                      <q-item-section
+                        avatar
+                        style="padding-right: 0; min-width: 30px"
+                      >
+                        <q-icon :name="z.MenuIcon" size="20px" />
+                      </q-item-section>
+                      <q-item-section>{{ z.MenuName }}</q-item-section>
+                    </q-item>
+                  </q-expansion-item>
+                </template>
+              </q-expansion-item>
+            </template>
+          </q-list>
+        </div>
+      </q-scroll-area>
+    </q-drawer>
   </q-layout>
 </template>
 
@@ -170,7 +267,7 @@ import { mapGetters } from "vuex";
 import userInfoBox from "../components/global/user-right-box";
 import notify from "../components/global/notify";
 
-import { GetMsgLogList } from "../api/course/index";
+import {GetMsgLogPage } from "../api/course/index";
 
 import { sendSock } from "../api/common/socket";
 import { queryStudentByTel } from "../api/users/user";
@@ -204,7 +301,15 @@ export default {
       IsShowLeft: true,
       userCenterMenuList: [], //用户中心菜单
       socektArr: [], //消息数组
-      callInStu: null
+      callInStu: null,
+      logMsg: {
+        PageIndex: 1,
+        PageSize: 14,
+        LoadPrompt: ""
+      },
+      logCount: 0,
+      logPageCount: 0,
+      drawerLeft: false
     };
   },
   components: {
@@ -273,6 +378,8 @@ export default {
     this.$root.$on("goworkobj", data => {
       this.secondNavs = [];
     });
+    this.socektArr = [];
+    this.logMsg.PageIndex = 1;
     this.getLogList();
     this.getMsg();
     if (this.userInfo && this.userInfo.IsTenCccUser == 1) {
@@ -296,10 +403,8 @@ export default {
       //定制是否需要在登录后展示 坐席工作台。默认为true,这里可以通过设为false关闭
       scriptDom.dataset.showWorkBenchAtFirstLogin = false;
       scriptDom.src = sdkUrl;
-
       scriptDom.onload = () => {
         tccc.on("ready", () => {
-          //tccc.UI.hide();
           let that = this;
           let accepted = false;
           tccc.on(tccc.events.calloutAccepted, data => {
@@ -319,7 +424,6 @@ export default {
 
           tccc.on(tccc.events.sessionEnded, function(data) {
             //也可以通过tccc.events枚举避免字符串typo
-            console.log("会话结束", data);
             var msg = "";
             this.callInStu = null;
             queryStudentByTel({
@@ -375,7 +479,6 @@ export default {
                     }<span>`;
                   }
                 }
-
                 saveStudentFollow({
                   StuId: stu.StuId,
                   Remark: msg
@@ -395,7 +498,6 @@ export default {
               }
             });
           });
-
           this.$q.notify({
             type: "dark",
             message: `电话服务已连接`,
@@ -433,9 +535,21 @@ export default {
     },
     //获取日志列表
     getLogList() {
-      GetMsgLogList().then(res => {
+      GetMsgLogPage(this.logMsg).then(res => {
         if (res.Code == 1) {
-          this.socektArr = res.Data;
+          this.logCount = res.Data.Count;
+          this.logPageCount = res.Data.PageCount;
+          if (this.socektArr.length < 1) {
+            this.socektArr = res.Data.PageData;
+            return;
+          }
+          if (this.logMsg.PageIndex < res.Data.PageCount) {
+            this.logMsg.PageIndex++;
+            this.socektArr = [...this.socektArr, ...res.Data.PageData];
+            this.logMsg.LoadPrompt = "";
+          } else {
+            this.logMsg.LoadPrompt = "没有更多了";
+          }
         }
       });
     },
@@ -445,7 +559,7 @@ export default {
         AppId: "JiaHeJiaoYu",
         ClientId: userinfo.Id
       };
-      sendSock(SendData, this.getDataFunc);
+      //sendSock(SendData, this.getDataFunc);
     },
     getDataFunc(e) {
       if (e.data) {
@@ -546,10 +660,6 @@ export default {
 }
 
 .head-bg {
-  /*background-image: url('~assets/images/page/top.png');
-    background-position: right;
-    background-repeat: no-repeat;
-    background-size: auto 100%;*/
   background-color: #fff;
 }
 
@@ -669,6 +779,7 @@ export default {
   border-radius: 50%;
   z-index: 2;
 }
+
 .MuiBadge-root {
   display: none !important;
 }
@@ -676,6 +787,7 @@ export default {
 .wave_wrapper span.wave_scale {
   animation: wave_scale 2s both infinite;
 }
+
 #tcccSdkDomRoot {
   z-index: 5000;
 }