yvan-window/src/component/Container/Desktop/Shortcut/index.vue

<template>
  <!-- 菜单区-->
  <div>
    <ul
      id="sds-desktop-shortcut"
      class="sds-desktop-shortcut"
      @contextmenu.prevent=""
    >
      <div class="sds-desktop-layout">
        <li
          class="launch-icon icon-item"
          :class="detailMessage.spacialCls"
          tabindex="0"
          v-for="(
            detailMessage, detailMessageIndex
          ) in shortcutDetail.detailMessageList"
          :key="detailMessage.id"
          @click="clickShortcutItem(detailMessage.id, detailMessageIndex)"
          @contextmenu.prevent="
            contextmenuAppViewItem(
              $event,
              detailMessage,
              detailMessage.selectList
            )
          "
        >
          <div
            class="image"
            :style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
          >
            <div class="sds-application-notify-badge-num-wrap">
              <div
                class="sds-application-notify-badge-num"
                :class="detailMessage.unReadyMessageCls"
                v-if="detailMessage.unReadyMessage.length && dataLoaded"
              ></div>
            </div>
          </div>
          <div class="text">{{ detailMessage.title }}</div>
        </li>
      </div>
      <PortalTarget></PortalTarget>
    </ul>
  </div>
</template>

<script>
import PortalTarget from "../../DesktopAppView/PortalTarget";
export default {
  props: ["defaultZIndex"],
  mounted() {
    this.$bus.on(
      "clickAppViewItemClearUnReady",
      this.clickAppViewItemClearUnReady
    );
    this.$bus.on("pushShortcutList", this.pushShortcutList);
    this.$bus.on("spliceShortcutList", this.spliceShortcutList);

    setTimeout(() => {
      this.shortcutDetail.detailMessageList.forEach((item) => {
        if (item.unReadyMessage.length) {
          item.unReadyMessageCls = "bounce-effect";
        }
      });
      this.dataLoaded = true;
    }, 800);

    setTimeout(() => {
      this.shortcutDetail.detailMessageList.forEach((item) => {
        if (item.unReadyMessageCls === "bounce-effect") {
          item.unReadyMessageCls = "";
        }
      });
    }, 1400);
  },
  data() {
    return {
      dataLoaded: false,
      shortcutDetail: {
        detailMessageList: [
          {
            id: 2,
            width: "1254px",
            height: "calc(100vh - 80px)",
            minHeight: "560px",
            title: "套件中心",
            spacialCls: "tjCenter",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/tjCenter.png",
            display: "none",
            zIndex: 9050,
            iconRestore: "none",
            iconMaximize: "block",
            unReadyMessage: [],
            unReadyMessageCls: "",
            selectList: [
              {
                id: 10,
                text: "删除快捷方式",
              },
              {
                id: 11,
                text: "111",
              },
            ],
          },
          {
            id: 0,
            width: "1150px",
            height: "calc(100vh - 120px)",
            minHeight: "520px",
            title: "控制中心",
            spacialCls: "controlCenter",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/controlCenter.png",
            display: "none",
            zIndex: 9050,
            iconRestore: "none",
            iconMaximize: "block",
            unReadyMessage: [1],
            unReadyMessageCls: "",
            selectList: [
              {
                id: 10,
                text: "删除快捷方式",
              },
              {
                id: 11,
                text: "222",
              },
            ],
          },
          {
            id: 12,
            width: "1010px",
            height: "calc(100vh - 200px)",
            minHeight: "440px",
            title: "File Station",
            spacialCls: "file",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/file.png",
            display: "none",
            zIndex: 9050,
            iconRestore: "none",
            iconMaximize: "block",
            unReadyMessage: [],
            unReadyMessageCls: "",
            selectList: [
              {
                id: 10,
                text: "删除快捷方式",
              },
              {
                id: 11,
                text: "333",
              },
            ],
          },
          {
            id: 1,
            width: "1010px",
            height: "calc(100vh - 220px)",
            minHeight: "420px",
            title: "DSM 说明",
            spacialCls: "question",
            cls: "deactive-win",
            titleImgUrl: "../../../../public/image/index/question.png",
            display: "none",
            zIndex: 9050,
            iconRestore: "none",
            iconMaximize: "block",
            unReadyMessage: [1],
            unReadyMessageCls: "",
            selectList: [
              {
                id: 10,
                text: "删除快捷方式",
              },
              {
                id: 11,
                text: "444",
              },
              {
                id: 11,
                text: "555",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    // 点击图标
    clickShortcutItem(id, detailMessageIndex) {
      this.shortcutDetail.detailMessageList[detailMessageIndex].unReadyMessage =
        [];
      this.$bus.emit("clickAppViewItem", id);
    },
    // 点击菜单页的图标
    clickAppViewItemClearUnReady(id) {
      this.shortcutDetail.detailMessageList.forEach((item) => {
        if (item.id === id && item.unReadyMessage.length) {
          item.unReadyMessage = [];
        }
      });
    },
    // 新添加的快捷方式
    pushShortcutList(selectedItem) {
      let bol = this.shortcutDetail.detailMessageList.some((item) => {
        return item.id === selectedItem.id;
      });
      if (!bol) {
        this.shortcutDetail.detailMessageList.push(selectedItem);
      } else {
        let obj = {
          cls: "",
          icon: "",
          title: "",
          text: "该页面已存在!",
          buttonList: [
            {
              id: 0,
              text: "确认",
              cls:'v-btn-main',
              event: () => {
                this.$bus.emit("closeMessage");
                this.$bus.emit("closeMask");
              },
            },
          ],
        };
        this.$bus.emit("openMessage", obj);
        this.$bus.emit("openMask");
      }
    },
    // 鼠标点击右键
    contextmenuAppViewItem(e, item, selectList) {
      let obj = { left: e.pageX - 120, top: e.pageY - 40, item, selectList };
      this.$bus.emit("showPortalTarget", obj);
    },
    // 删除快捷方式
    spliceShortcutList(selectedItem) {
      let index = this.shortcutDetail.detailMessageList.findIndex((item) => {
        return item.id === selectedItem.id;
      });
      if (index !== -1) {
        this.shortcutDetail.detailMessageList.splice(index, 1);
      }
      this.$bus.emit("hiddenPortalTarget");
    },
  },
  components: {
    PortalTarget,
  },
  name: "Shortcut",
};
</script>