dy-admin-manager/src/layout/components/AppMain.vue

<template>
  <section class="app-main">
    <!--   -->
    <transition name="fade-transform" mode="out-in">
      <div>
        <router-view v-slot="{ Component }">
          <!-- <keep-alive>
            <component v-if="!keep" :is="Component" />
          </keep-alive>  v-if="keep"-->
          <component :is="Component" />
        </router-view>

        <!-- <keep-alive exclude="nocatch">
          <router-view :key="key" v-if="needKeep" />
        </keep-alive>
        <router-view v-if="!needKeep" :key="key" /> -->
      </div>
    </transition>
    <serviceRemind />
    <div style="z-index: 5000">
      <el-dialog
        :visible.sync="guideVisible"
        width="680px"
        :modal="false"
        v-if="guideList.length > 0"
        append-to-body
        class="dialogGuide"
      >
        <template #title>
          <div class="dialogHead">
            <h2 class="guideH2">您需要完成以下设置</h2>
            <el-divider class="guideLine"></el-divider>
          </div>
        </template>
        <div class="guideWrap">
          <div class="guideItem" v-for="guide in guideList" :key="guide.name">
            <p>
              <span class="guideTitle">{{ guide.name }}</span>
              <el-button
                class="guideSet"
                type="text"
                @click="gotoSet(guide)"
                v-if="permission(guide.permission)"
                >立即设置 >></el-button
              >
              <span v-else>您暂无此设置权限,请联系机构管理员</span>
            </p>
            <p class="guideDesc">{{ guide.desc }}</p>
          </div>
          <!-- <el-button
            type="primary"
            style="width: 100%"
            @click="guideVisible = false"
            >暂不设置</el-button
          > -->
        </div>
      </el-dialog>
    </div>
    <div
      class="optionBtn"
      v-if="!outOptionvisible && isShowBtn"
      @click="openOptionMual"
    >
      操作手册
    </div>

    <div class="chart-join">
      <el-badge
        :value="noReadNum"
        class="item"
        :max="99"
        :hidden="noReadNum <= 0"
      >
        <!-- <el-button size="small">评论</el-button> -->
        <svg
          t="1659606821949"
          class="icon optionMessage"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3078"
          width="48"
          height="48"
          @click="
            () => {
              chatVisible = true;
              this.$bus.$emit('scrollToBottom');
            }
          "
        >
          <path
            d="M512 796a456.672 456.672 0 0 1-74.768-6.4L262 896V718.976C170.64 654.832 112 556.48 112 446 112 252.704 291.088 96 512 96s400 156.704 400 350S732.912 796 512 796z m0-650c-193.296 0-350 134.32-350 300 0 101.664 59.2 191.344 149.376 245.6l-1.6 115.968 117.68-70.736a404.8 404.8 0 0 0 84.544 9.168c193.296 0 350-134.304 350-300S705.296 146 512 146zM336 400a48 48 0 1 1-48 48 48 48 0 0 1 48-48z m176 0a48 48 0 1 1-48 48 48 48 0 0 1 48-48z m176 0a48 48 0 1 1-48 48 48 48 0 0 1 48-48z"
            p-id="3079"
          ></path>
        </svg>
      </el-badge>
    </div>

    <el-drawer
      title="操作手册"
      :visible.sync="outOptionvisible"
      size="410px"
      :append-to-body="true"
    >
      <el-divider class="outOptionLine"></el-divider>
      <div class="drawerWrap">
        <el-form :model="form" :inline="true">
          <el-form-item>
            <el-input
              style="width: 265px !important"
              v-model="form.search"
              placeholder="请输入菜单名"
              clearable
              @clear="getMUal()"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getMUal()" type="danger">搜索</el-button>
          </el-form-item>
          <br />
          <!-- <div class="topline"></div> -->
          <div
            v-for="(item, index) in optionList"
            :key="index"
            class="line"
            @click="openDetail(item)"
          >
            <el-row>
              <el-col :span="23">{{ item.name }}</el-col>
              <el-col :span="1"><i class="el-icon-arrow-right"></i></el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </el-drawer>
    <el-drawer
      :title="activeRow.name"
      :append-to-body="true"
      v-if="activeRow"
      :visible.sync="innerDrawer"
      size="410px"
      custom-class="innerDrawer"
    >
      <p class="submitTitle">更新时间: {{ activeRow.updateTime }}</p>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="操作流程" name="first">
          <div class="optionWrap">
            <el-image
              ref="previewImg"
              class="previewImg"
              :src="activeImg"
              :preview-src-list="[activeImg]"
              style="display: none"
            ></el-image>
            <div class="ql-editor" v-html="activeRow.opFlow"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="功能规则" name="second">
          <div class="optionWrap">
            <div class="ql-editor" v-html="activeRow.funRule"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>

    <el-drawer
      :append-to-body="true"
      :visible.sync="chatVisible"
      size="910px"
      :class="loadChatDom ? '' : 'drawer-container'"
      custom-class="innerDrawer"
      :withHeader="false"
    >
      <chat-model ref="chatModel" @close="chatVisible = false" />
    </el-drawer>
  </section>
</template>

<script>
import notKeepAliveList from "@/router/notKeepAliveList";
import serviceRemind from "@/components/serviceRemind"; // 续费弹窗
import { permission } from "@/utils/directivePage";
import { guideList } from "@/constant/guide";
import chatModel from "./modal/chat-model";
import {
  getSysManualList,
  getSysManualMenuIds
} from "@/views/operationManual/api";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { core, CoreEvent } from "./imkit";
import * as RongIMLib from "@rongcloud/imlib-next";
import { custom_service } from "./modal/chat.js";
// 接入时需要将 '请更换您应用的 appkey' 替换为您的应用的 appkey
let libOption = { appkey: "c9kqb3rdc451j" };
// 初始化 SDK
core.init({
  service: custom_service,
  libOption: libOption,
  conversationPullCount: 20
});

export default {
  name: "AppMain",
  data() {
    return {
      guideVisible: false,
      guideList: [],
      outOptionvisible: false,
      optionList: [],
      form: {},
      activeRow: null,
      innerDrawer: false,
      activeName: "first",
      allIdList: [],
      isShow: false,
      activeImg: null,
      loadChatDom: false,
      chatVisible: true,
      noReadNum: 0 // 消息未读数
    };
  },
  components: { serviceRemind, chatModel },
  computed: {
    key() {
      return this.$route.path;
    },
    needKeep() {
      return !notKeepAliveList.includes(this.$route.path);
    },
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
    },
    keep() {
      return this.$route.meta.noCache * 1; // 0是缓存 1是不缓存
    },
    isShowBtn() {
      return this.allIdList.indexOf(this.$route.meta.id + "") != -1;
    }
  },
  async mounted() {
    console.log(this.$store.state.user, "userInfo");
    this.chatVisible = false;
    setTimeout(() => {
      this.loadChatDom = true;
    }, 1000);
    // console.log(this.$ref.chatModel);
    this.$bus.$on("showguide", obj => {
      this.guideList = [];
      obj.forEach(element => {
        if (guideList[element]) {
          this.guideList.push(guideList[element]);
        }
      });
      this.guideVisible = true;
    });
    try {
      const res = await getSysManualMenuIds();
      this.allIdList = res.data.split(",");
    } catch (e) {}

    this.init();

    this.$bus.$on("getNoReadNum", this.getNoReadMessage);
  },
  beforeDestroy() {
    this.$bus.$off("showguide", () => {});
    this.$bus.$off("getNoReadNum", this.getNoReadMessage);
    // core.off(CoreEvent.MESSAGES, this.handleMessages);
    const Events = RongIMLib.Events;
    RongIMLib.removeEventListener(Events.MESSAGES, this.handleMessages);
  },
  methods: {
    init() {
      core.connect(this.$store.state.user.imToken).then(res => {
        if (res.code === RongIMLib.ErrorCode.SUCCESS) {
          console.log("链接成功, 链接用户 id 为: ", res.data.userId);
          // this.isConnect = true;
          this.getNoReadMessage();
        } else {
          console.warn("链接失败, code:", res.code);
        }
      });

      // const Events = RongIMLib.Events;
      // RongIMLib.addEventListener(Events.MESSAGES, this.getNoReadMessage);
      // RongIMLib.addEventListener(Events.MESSAGE_RECEIPT_RESPONSE, message => {
      //   console.log("121212", message);
      // });
    },
    handleMessages(newMessage) {
      console.log(newMessage, "newMessage");
      this.getNoReadMessage();
    },
    getNoReadMessage() {
      RongIMLib.getTotalUnreadCount().then(res => {
        if (res.code === 0) {
          console.log(res.code, res);
          this.noReadNum = res.data || 0;
        } else {
          console.log(res.code, res.msg, res);
        }
      });
    },
    showInstructions() {
      this.isShow = !this.isShow;
    },
    // openIns() {
    //   this.$refs.instructions.showInstructions();
    // },
    gotoSet(guide) {
      // console.log();
      this.$router.push({ path: guide.path });
      this.guideVisible = false;
    },
    permission(str) {
      return permission(str);
    },
    async openOptionMual() {
      // this.outOptionvisible = true;
      await this.getMUal();
      this.outOptionvisible = true;
    },
    async getMUal() {
      let menuId = this.$route.meta.id;
      try {
        const res = await getSysManualList({
          menuId,
          page: 1,
          rows: 9999,
          search: this.form.search
        });
        this.optionList = res.data.rows;

        console.log(this.$route);
      } catch (e) {
        console.log(e);
      }
    },
    openDetail(row) {
      // console.log(row);
      this.activeRow = row;
      this.innerDrawer = true;
      this.$nextTick(res => {
        Array.from(document.querySelectorAll("img")).forEach(img => {
          img.addEventListener("click", this.previewImg, true);
        });
      });
    },
    handleClick(val) {
      this.activeName = val.name;
    },
    previewImg(data) {
      let imgSrc = data.target.getAttribute("src");
      this.activeImg = imgSrc;
      this.$refs.previewImg.clickHandler();
    }
  },
  watch: {
    innerDrawer(val) {
      if (!val) {
        this.activeName = "first";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.drawer-container {
  display: none !important;
}

.previewImg {
}
::v-deep .el-drawer__header {
  font-size: 20px;
  margin-bottom: 0px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: bold;
}
.outOptionLine {
  margin: 20px 0 0 0;
  background-color: #e5e5e5;
}
.innerDrawer {
  .submitTitle {
    margin: 10px 0;
    font-size: 12px;
    padding: 0 20px;
    color: #999;
  }

  .optionWrap {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 8px;
    ::v-deep img {
      width: 100%;
      cursor: pointer;
    }
    ::v-deep p {
      line-height: 28px;
      font-size: 14px !important;
    }
    ::v-deep .ql-video {
      width: 100%;
    }
  }
}

.optionBtn {
  width: 35px;
  background-color: var(--color-primary);
  color: #fff;
  position: fixed;
  right: 0;
  top: 250px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 3999;
}

.chart-join {
  position: fixed;
  right: 36px;
  bottom: 36px;
  z-index: 99;

  ::v-deep .el-badge__content {
    display: flex;
    align-items: center;
  }
}

.optionMessage {
  cursor: pointer;
  padding: 6px;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  z-index: 99;
}
::v-deep .line {
  height: 40px;
  line-height: 40px;
  color: rgba(#666, 0.9);
  padding: 0 17px;
  overflow: hidden;
  // background-color: #f9f9f9;
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
  border-radius: 4px;
  &:hover {
    background-color: transparent;
    color: var(--color-primary);
    font-weight: 600;
    &::after {
      content: "";
      width: 100%;
      height: 100%;
      background-color: var(--color-primary);
      opacity: 0.05;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.drawerWrap {
  padding: 20px;
  .topline {
    border-top: 1px solid #dcdfe6;
  }
}
.guideLine {
  margin: 18px 0 0px;
}
.guideWrap {
  .guideH2 {
    font-size: 20px;
    font-weight: 600;
    color: #212121;
    line-height: 28px;
  }

  .guideItem {
    margin-bottom: 30px;
    .guideTitle {
      width: 160px;
      text-align: left;
      font-weight: bold;
      display: inline-block;
      font-size: 16px;
      font-weight: 600;
      color: #212121;
      line-height: 22px;
      margin-bottom: 10px;
    }
    .guideDesc {
      color: #666666;
      line-height: 20px;
      font-size: 14px;
    }
    .guideSet {
      font-size: 16px;
    }
  }
}
.dialogGuide {
  border-radius: 6px;
  ::v-deep .el-dialog__header {
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 0;
    .el-dialog__headerbtn {
      top: 28px;
      .el-icon {
        color: #999;
        font-size: 20px;
        // font-weight: bold;
      }
    }
  }
  .dialogHead {
    background-color: #fff;
    padding-top: 10px;
  }
}

/*设置字体的大小*/
</style>
<style scoped>
.app-main {
  /*50 = navbar  */
  /* height: calc(100vh - 80px); */
  /* height: 100vh; */
  padding-top: 90px;
  /* min-width: 1440px; */
  position: relative;
  /* overflow: auto; */
  box-sizing: border-box;
  margin-left: 20px;
  margin-top: 20px;
}
.fixed-header + .app-main {
  padding-top: 90px;
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    // padding-right: 15px;
  }
}
.el-image-viewer__close {
  display: none !important;
}
</style>