@cmstops/pro-compo/lib/messageBox/component.js

[物料平台文档中心](https://arco.design/docs/material/guide)

"use strict";
var vue = require("vue");
var webVue = require("@arco-design/web-vue");
var list = require("./list.js");
var api = require("./script/api.js");
var config = require("../config.js");
const _hoisted_1 = { class: "message-boxs-container" };
const _hoisted_2 = {
  key: 1,
  class: "reference-btn"
};
const _hoisted_3 = { class: "message-boxs-popover" };
const _sfc_main = vue.defineComponent({
  ...{ name: "messageBox" },
  __name: "component",
  props: {
    BASE_API: {}
  },
  setup(__props) {
    const props = __props;
    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
    const slotTest = !!vue.useSlots().reference;
    const readMessagesCount = vue.ref(0);
    const unreadMessagesCount = vue.ref(0);
    const isLoadingMore = vue.ref(false);
    const unreadMessages = vue.ref([]);
    const readMessages = vue.ref([]);
    const isNoMore = vue.ref(false);
    const page = vue.ref({ limit: 20, offset: 0 });
    const handlePopupVisibleChange = (visible) => {
      if (!visible) {
        setAllMsgToRead();
      }
    };
    const setAllMsgToRead = async () => {
      try {
        const res = await api.setAllMsgRead(BASE_API);
        if (res.code === 0) {
          setData();
        }
      } catch (error) {
      }
    };
    const setData = async () => {
      isLoadingMore.value = true;
      const res = await api.getNoticeList(BASE_API, {}).catch(() => {
        isLoadingMore.value = false;
      });
      if ((res == null ? void 0 : res.code) === 0 && (res == null ? void 0 : res.message)) {
        const data = res.message;
        if (data.notice_state) {
          unreadMessages.value = data.notice_state[0] && data.notice_state[0].notices || [];
          readMessages.value = data.notice_state[1] && data.notice_state[1].notices || [];
        }
        readMessagesCount.value = data.readed || 0;
        unreadMessagesCount.value = data.unread || 0;
        isLoadingMore.value = false;
      }
    };
    const loadMore = async () => {
      if (unreadMessages.value.length !== 0)
        return;
      isLoadingMore.value = true;
      try {
        page.value.offset = readMessages.value.length;
        const res = await api.getNoticeList(BASE_API, {
          state: 1,
          ...page.value
        }).catch(() => {
          isLoadingMore.value = false;
        });
        if (res.code === 0 && res.message) {
          const { notice_state } = res.message;
          notice_state[1].notices.length < page.value.limit && (isNoMore.value = true);
          readMessages.value = readMessages.value.concat(
            notice_state[1] && notice_state[1].notices || []
          );
        }
        isLoadingMore.value = false;
      } catch (error) {
      }
    };
    vue.onMounted(() => {
      setData();
    });
    return (_ctx, _cache) => {
      const _directive_loading = vue.resolveDirective("loading");
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(vue.unref(webVue.Popover), {
          trigger: "hover",
          position: "bottom",
          "arrow-style": { display: "none" },
          "content-style": { padding: 0, minWidth: "400px" },
          "popup-visible-change": handlePopupVisibleChange
        }, {
          content: vue.withCtx(() => [
            vue.createElementVNode("div", _hoisted_3, [
              vue.createVNode(vue.unref(webVue.Tabs), null, {
                default: vue.withCtx(() => [
                  vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(webVue.TabPane), { key: "1" }, {
                    title: vue.withCtx(() => _cache[2] || (_cache[2] = [
                      vue.createTextVNode("\u6D88\u606F")
                    ])),
                    default: vue.withCtx(() => [
                      unreadMessages.value.length === 0 ? (vue.openBlock(), vue.createBlock(list, {
                        key: 0,
                        list: readMessages.value,
                        "onUpdate:list": _cache[0] || (_cache[0] = ($event) => readMessages.value = $event),
                        "list-type": "unread",
                        "is-loading-more": isLoadingMore.value,
                        "is-no-more": isNoMore.value,
                        onLoadMoreMsg: loadMore
                      }, null, 8, ["list", "is-loading-more", "is-no-more"])) : (vue.openBlock(), vue.createBlock(list, {
                        key: 1,
                        list: unreadMessages.value,
                        "onUpdate:list": _cache[1] || (_cache[1] = ($event) => unreadMessages.value = $event),
                        "list-type": "unread",
                        "is-loading-more": isLoadingMore.value,
                        "is-no-more": isNoMore.value,
                        onLoadMoreMsg: loadMore
                      }, null, 8, ["list", "is-loading-more", "is-no-more"]))
                    ]),
                    _: 1
                  })), [
                    [_directive_loading, isLoadingMore.value]
                  ])
                ]),
                _: 1
              })
            ])
          ]),
          default: vue.withCtx(() => [
            vue.createVNode(vue.unref(webVue.Badge), { count: unreadMessagesCount.value }, {
              default: vue.withCtx(() => [
                slotTest ? vue.renderSlot(_ctx.$slots, "reference", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("button", _hoisted_2, "\u6D88\u606F\u5217\u8868"))
              ]),
              _: 3
            }, 8, ["count"])
          ]),
          _: 3
        })
      ]);
    };
  }
});
module.exports = _sfc_main;