xs-common-plugins 1.2.1 → 1.2.4

package/src/mixin/keepAlive.js

@@ -0,0 +1,53 @@
+export const MIX_KEEPALIVE = {
+  inject: ["reload"],
+  activated() {
+    // 切换其他选项卡后，删除当前页面选项卡
+    if (this.$route.meta && this.$route.meta.upload) {
+      delete this.$route.meta.upload;
+      this.findDataIsKeepAlive(this.$vnode)
+      this.reload();
+    } else {
+      // 切换选项卡 还原 el-table 滚动条位置
+      const t = this.$el.getAttribute("scrollTop") || 0;
+      const selectWrap = this.$el.querySelector(".el-table__body-wrapper");
+      setTimeout(() => {
+        selectWrap.scrollTo(0, t);
+      }, 0);
+    }
+  },
+  deactivated() {
+    // 当前选项卡关闭， window.nnav 标识，启动清楚当前组件缓存，并删除标识
+    console.log('deactivated');
+    if (window.nnav) {
+      delete window.nnav;
+      this.findDataIsKeepAlive(this.$vnode);
+    }
+  },
+  methods: {
+    // 关闭当前选项卡 - 清楚 keep-alive 缓存
+    findDataIsKeepAlive(el) {
+      if (el && el.data.keepAlive) {
+        var key =
+          el.key == null
+            ? el.componentOptions.Ctor.cid +
+            (el.componentOptions.tag ? `::${el.componentOptions.tag}` : "")
+            : el.key;
+        var cache = el.parent.componentInstance.cache;
+        var keys = el.parent.componentInstance.keys;
+        if (cache[key]) {
+          if (keys.length) {
+            var index = keys.indexOf(key);
+            if (index > -1) {
+              keys.splice(index, 1);
+            }
+          }
+          delete cache[key];
+        }
+
+        this.$destroy();
+      } else {
+        this.findDataIsKeepAlive(el.parent);
+      }
+    },
+  },
+}

package/src/plugins/im/components/chat/index.scss

@@ -1,164 +1,164 @@
-.rong-chat {
-  position: absolute;
-  width: 100%;
-  min-height: 100vh;
-  top: 0;
-  bottom: 0;
-  overflow: auto;
-}
-
-#rong-messages {
-  position: absolute;
-  top: 0;
-  bottom: 50px;
-  width: 100%;
-  overflow-y: auto;
-  padding: 0 10px;
-  padding-top: 45px;
-  padding-bottom: 80px;
-  box-sizing: border-box;
-}
-
-
-#rong-messages::-webkit-scrollbar {
-  width: 4px;
-}
-
-.sentTime {
-  text-align: center;
-  font-size: 10px;
-  color: #8e969f;
-}
-
-#rong-messages::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: rgba(0, 0, 0, 0.2);
-}
-
-#rong-messages::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 0;
-  background: rgba(0, 0, 0, 0.1);
-
-}
-
-.rong-message {
-  margin: 20px 0 25px 0;
-}
-
-.rong-messages-getbtn {
-  margin: 10px;
-  position: relative;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.rong-message-avatar {
-  height: 40px;
-  width: 40px;
-  border-radius: 10px;
-}
-
-.rong-message-name {
-  color: #8e969f;
-  width: 40px;
-  overflow: hidden;
-  text-align: center;
-  font-size: 12px;
-}
-
-.rong-message-avatar-receiver {
-  float: left;
-}
-
-.rong-message-avatar-sender {
-  float: right;
-}
-
-.rong-message-content {
-  max-width: 65%;
-  box-sizing: border-box;
-  display: inline-block;
-  border-radius: 5px;
-  word-wrap: break-word;
-  position: relative;
-  // top: 15px;
-  margin: 0 5px;
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  font-size: 15px;
-  font-family: 'PingFang SC';
-  color: #000000;
-}
-
-.rong-message-content-receiver::after,
-.rong-message-content-receiver::before,
-.rong-message-content-sender::after,
-.rong-message-content-sender::before {
-  content: "";
-  border: 15px solid;
-  position: absolute;
-  top: 20px;
-  border-color: transparent;
-}
-
-.rong-message-content-receiver::after {
-  // border-color: transparent #fff transparent transparent;
-  left: -23px;
-  z-index: 0;
-}
-
-.rong-message-content-receiver::before {
-  border-color: transparent transparent transparent transparent;
-  left: -26.5px;
-}
-
-.rong-message-content-receiver {
-  float: left;
-  // background-color: #CBE7FC;
-  background-color: #fff;
-}
-
-.rong-message-content-sender::after {
-  // border-color: transparent transparent transparent #fff;
-  right: -24px;
-  z-index: 0;
-}
-
-.rong-message-content-sender {
-  float: right;
-  background-color: #FFF;
-}
-
-.rong-clearfix {
-  clear: both;
-}
-
-.rong-message-content-image-sender {
-  float: right;
-  margin-right: 19px;
-  margin-top: -16px;
-}
-
-.rong-message-content-image-receiver {
-  margin-top: -16px;
-  margin-left: 16px;
-}
-
-.fixed-top {
-  position: fixed;
-  width: 100%;
-  left: 0;
-  top: 20px;
-}
-
-.fixed-bottom {
-  position: fixed;
-  left: 0;
-  bottom: 110px;
-  width: 100%;
-}
-
-.fixedWhite {
-  top: 80px!important
+.rong-chat {
+  position: absolute;
+  width: 100%;
+  min-height: 100vh;
+  top: 0;
+  bottom: 0;
+  overflow: auto;
+}
+
+#rong-messages {
+  position: absolute;
+  top: 0;
+  bottom: 50px;
+  width: 100%;
+  overflow-y: auto;
+  padding: 0 10px;
+  padding-top: 45px;
+  padding-bottom: 80px;
+  box-sizing: border-box;
+}
+
+
+#rong-messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sentTime {
+  text-align: center;
+  font-size: 10px;
+  color: #8e969f;
+}
+
+#rong-messages::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.2);
+}
+
+#rong-messages::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+
+}
+
+.rong-message {
+  margin: 20px 0 25px 0;
+}
+
+.rong-messages-getbtn {
+  margin: 10px;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.rong-message-avatar {
+  height: 40px;
+  width: 40px;
+  border-radius: 10px;
+}
+
+.rong-message-name {
+  color: #8e969f;
+  width: 40px;
+  overflow: hidden;
+  text-align: center;
+  font-size: 12px;
+}
+
+.rong-message-avatar-receiver {
+  float: left;
+}
+
+.rong-message-avatar-sender {
+  float: right;
+}
+
+.rong-message-content {
+  max-width: 65%;
+  box-sizing: border-box;
+  display: inline-block;
+  border-radius: 5px;
+  word-wrap: break-word;
+  position: relative;
+  // top: 15px;
+  margin: 0 5px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  font-size: 15px;
+  font-family: 'PingFang SC';
+  color: #000000;
+}
+
+.rong-message-content-receiver::after,
+.rong-message-content-receiver::before,
+.rong-message-content-sender::after,
+.rong-message-content-sender::before {
+  content: "";
+  border: 15px solid;
+  position: absolute;
+  top: 20px;
+  border-color: transparent;
+}
+
+.rong-message-content-receiver::after {
+  // border-color: transparent #fff transparent transparent;
+  left: -23px;
+  z-index: 0;
+}
+
+.rong-message-content-receiver::before {
+  border-color: transparent transparent transparent transparent;
+  left: -26.5px;
+}
+
+.rong-message-content-receiver {
+  float: left;
+  // background-color: #CBE7FC;
+  background-color: #fff;
+}
+
+.rong-message-content-sender::after {
+  // border-color: transparent transparent transparent #fff;
+  right: -24px;
+  z-index: 0;
+}
+
+.rong-message-content-sender {
+  float: right;
+  background-color: #FFF;
+}
+
+.rong-clearfix {
+  clear: both;
+}
+
+.rong-message-content-image-sender {
+  float: right;
+  margin-right: 19px;
+  margin-top: -16px;
+}
+
+.rong-message-content-image-receiver {
+  margin-top: -16px;
+  margin-left: 16px;
+}
+
+.fixed-top {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 20px;
+}
+
+.fixed-bottom {
+  position: fixed;
+  left: 0;
+  bottom: 110px;
+  width: 100%;
+}
+
+.fixedWhite {
+  top: 80px!important
 }

package/src/plugins/im/components/chat/index.vue

@@ -1,144 +1,144 @@
-<!--
- * @Author: your name
- * @Date: 2021-01-15 11:24:40
- * @LastEditTime: 2021-01-16 08:50:23
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \dev\src\plugins\im\components\chat\index.vue
--->
-<template>
-  <div class="rong-chat" id="rong-chat-id" :style="{ bottom: bottom + 'px' }">
-    <div id="rong-messages" ref="rongMessageWrapEl" :class="getFixClass">
-      <div id="rong-message-wrap-el" ref="rongMessageWrapMainEl">
-        <button
-          v-if="hasMore"
-          class="rong-messages-getbtn"
-          type="primary"
-          size="mini"
-          @click="getMoreMessages"
-        >
-          加载更多
-        </button>
-        <loading v-if="!isAllowScroll"></loading>
-        <withoutmessage
-          v-if="!hasMore"
-          id="message-notify-without"
-        ></withoutmessage>
-        <div
-          v-for="(message, i) in messageList"
-          v-if="message.messageType != 'RC:ReadNtf'"
-          :key="message.uId"
-          :id="'U-' + message.uId"
-          class="rong-message uni-page-wrapper"
-        >
-          <p class="sentTime" v-if="i % 3 === 0">
-            {{ getTime(message.sentTime) }}
-          </p>
-          <div :class="['rong-message-avatar-' + message.direction]" v-if="message.name!=='XS:TextMsg'">
-            <!-- <div class="rong-message-name">{{ message.sender.name }}</div> -->
-            <img
-              v-if="message.direction !== 'sender' && message.content.userInfo && message.content.userInfo.avatarUrl"
-              class="rong-avatar rong-message-avatar"
-              :src="message.content.userInfo.avatarUrl"
-            />
-            <img
-              v-else
-              class="rong-avatar rong-message-avatar"
-              :src="
-                message.direction == 'sender'
-                  ? message.sender.avatar1
-                  : message.sender.avatar2
-              "
-            />
-          </div>
-          <div
-            :class="['rong-message-content rong-message-content-' + message.direction, ]"
-          >
-            <slot name="message" :message="message"></slot>
-          </div>
-          <TemplateMessage
-            v-if="message.name == 'XS:TextMsg'"
-            :message="message"
-          />
-          <div class="rong-clearfix"></div>
-        </div>
-      </div>
-    </div>
-    <!-- 顶部插槽 -->
-    <div class="fixed-top">
-      <slot name="slot-top" :list="messageList" />
-    </div>
-    <!-- 底部插槽 -->
-    <div class="fixed-bottom">
-      <slot name="slot-bottom"></slot>
-    </div>
-    <!-- 发送消息 -->
-    <send-msg
-      @sendMsgEvent="sendMsgEvent"
-      :targetId="targetId"
-      :type="type"
-      :targetName="targetName"
-      :userName="chatObj.latestMessage.content.userInfo ? chatObj.latestMessage.content.userInfo.userName : ''"
-      :avatarUrl="chatObj.latestMessage.content.userInfo ? chatObj.latestMessage.content.userInfo.avatarUrl : ''"
-      :chatObj="chatObj"
-    >
-      <div slot="slot-tool">
-        <slot name="slot-tool"></slot>
-      </div>
-    </send-msg>
-  </div>
-</template>
-<script>
-import loading from "../loading/loading.vue";
-import withoutmessage from "../without.vue";
-import SendMsg from "../send-msg/index.vue";
-import methods from "./methods";
-import TemplateMessage from "../template-message/index.vue"
-export default {
-  name: "chatCom",
-  data() {
-    return {
-      messageList: [],
-      bottom: 0,
-      adapterHeight: 0,
-      isShowEmojiSent: false,
-      hasMore: true,
-      todiv: "",
-      isAllowScroll: true,
-      isScrollTop: false,
-      isCurrent: false,
-    };
-  },
-  components: { 
-    withoutmessage, 
-    loading, 
-    SendMsg, 
-    TemplateMessage 
-  },
-  props: {
-    targetId: [String, Number],
-    type: [String, Number],
-    targetName: [String, Number],
-    chatObj: [Object],
-  },
-  methods,
-  computed: {
-    getFixClass () {
-      const goodsList = this.messageList.filter(item => item.content && item.content.OutGoodsId)
-      return goodsList.length > 0 ? 'fixedWhite' : '';
-    }
-  },
-  mounted() {
-    const timer = setInterval(() => {
-      if (this.targetId) {
-        clearInterval(timer);
-        this.onloadEvent();
-      }
-    }, 100);
-  },
-  beforeDestroy() {
-    this.isCurrent = false;
-  }
-};
-</script>
-<style lang="scss" src='./index.scss'></style>
+<!--
+ * @Author: your name
+ * @Date: 2021-01-15 11:24:40
+ * @LastEditTime: 2021-01-16 08:50:23
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \dev\src\plugins\im\components\chat\index.vue
+-->
+<template>
+  <div class="rong-chat" id="rong-chat-id" :style="{ bottom: bottom + 'px' }">
+    <div id="rong-messages" ref="rongMessageWrapEl" :class="getFixClass">
+      <div id="rong-message-wrap-el" ref="rongMessageWrapMainEl">
+        <button
+          v-if="hasMore"
+          class="rong-messages-getbtn"
+          type="primary"
+          size="mini"
+          @click="getMoreMessages"
+        >
+          加载更多
+        </button>
+        <loading v-if="!isAllowScroll"></loading>
+        <withoutmessage
+          v-if="!hasMore"
+          id="message-notify-without"
+        ></withoutmessage>
+        <div
+          v-for="(message, i) in messageList"
+          v-if="message.messageType != 'RC:ReadNtf'"
+          :key="message.uId"
+          :id="'U-' + message.uId"
+          class="rong-message uni-page-wrapper"
+        >
+          <p class="sentTime" v-if="i % 3 === 0">
+            {{ getTime(message.sentTime) }}
+          </p>
+          <div :class="['rong-message-avatar-' + message.direction]" v-if="message.name!=='XS:TextMsg'">
+            <!-- <div class="rong-message-name">{{ message.sender.name }}</div> -->
+            <img
+              v-if="message.direction !== 'sender' && message.content.userInfo && message.content.userInfo.avatarUrl"
+              class="rong-avatar rong-message-avatar"
+              :src="message.content.userInfo.avatarUrl"
+            />
+            <img
+              v-else
+              class="rong-avatar rong-message-avatar"
+              :src="
+                message.direction == 'sender'
+                  ? message.sender.avatar1
+                  : message.sender.avatar2
+              "
+            />
+          </div>
+          <div
+            :class="['rong-message-content rong-message-content-' + message.direction, ]"
+          >
+            <slot name="message" :message="message"></slot>
+          </div>
+          <TemplateMessage
+            v-if="message.name == 'XS:TextMsg'"
+            :message="message"
+          />
+          <div class="rong-clearfix"></div>
+        </div>
+      </div>
+    </div>
+    <!-- 顶部插槽 -->
+    <div class="fixed-top">
+      <slot name="slot-top" :list="messageList" />
+    </div>
+    <!-- 底部插槽 -->
+    <div class="fixed-bottom">
+      <slot name="slot-bottom"></slot>
+    </div>
+    <!-- 发送消息 -->
+    <send-msg
+      @sendMsgEvent="sendMsgEvent"
+      :targetId="targetId"
+      :type="type"
+      :targetName="targetName"
+      :userName="chatObj.latestMessage.content.userInfo ? chatObj.latestMessage.content.userInfo.userName : ''"
+      :avatarUrl="chatObj.latestMessage.content.userInfo ? chatObj.latestMessage.content.userInfo.avatarUrl : ''"
+      :chatObj="chatObj"
+    >
+      <div slot="slot-tool">
+        <slot name="slot-tool"></slot>
+      </div>
+    </send-msg>
+  </div>
+</template>
+<script>
+import loading from "../loading/loading.vue";
+import withoutmessage from "../without.vue";
+import SendMsg from "../send-msg/index.vue";
+import methods from "./methods";
+import TemplateMessage from "../template-message/index.vue"
+export default {
+  name: "chatCom",
+  data() {
+    return {
+      messageList: [],
+      bottom: 0,
+      adapterHeight: 0,
+      isShowEmojiSent: false,
+      hasMore: true,
+      todiv: "",
+      isAllowScroll: true,
+      isScrollTop: false,
+      isCurrent: false,
+    };
+  },
+  components: { 
+    withoutmessage, 
+    loading, 
+    SendMsg, 
+    TemplateMessage 
+  },
+  props: {
+    targetId: [String, Number],
+    type: [String, Number],
+    targetName: [String, Number],
+    chatObj: [Object],
+  },
+  methods,
+  computed: {
+    getFixClass () {
+      const goodsList = this.messageList.filter(item => item.content && item.content.OutGoodsId)
+      return goodsList.length > 0 ? 'fixedWhite' : '';
+    }
+  },
+  mounted() {
+    const timer = setInterval(() => {
+      if (this.targetId) {
+        clearInterval(timer);
+        this.onloadEvent();
+      }
+    }, 100);
+  },
+  beforeDestroy() {
+    this.isCurrent = false;
+  }
+};
+</script>
+<style lang="scss" src='./index.scss'></style>