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

<template>
  <!-- notifyShowAll -->
  <div class="notify-showall-window">
    <div
      class="v-layout sds-notify-showall-dialog layout-window-app v-window"
      :class="notifyShowAllContant.cls"
      style="position: absolute; left: 10px"
      :style="{
        display: notifyShowAllContant.display,
        width: width,
        height: height,
        top: top,
        zIndex: notifyShowAllContant.zIndex,
      }"
      @click.stop="clickNotifyShowall"
    >
      <div class="v-window-header-wrapper draggable">
        <div class="app-icon"></div>
        <div class="v-window-header-text">
          <div class="v-window-header-title">消息</div>
        </div>

        <div class="window-header-tool-wrapper light">
          <div
            class="tool maximize"
            @click.stop="maxWindow"
            v-if="!windowIsMax"
          ></div>
          <div class="tool restore" @click.stop="minWindow" v-else></div>
          <div class="tool close" @click.stop="closeNotifyShowall"></div>
        </div>
      </div>
      <div class="v-window-body">
        <div class="v-trap-focus-indicator"></div>
        <div class="v-trap-focus-body">
          <div class="v-trap-focus-indicator"></div>
          <div
            class="v-layout show-all-panel layout-panel-content v-panel"
            style="--svc-layout-height: 100%"
          >
            <div class="v-spin-wrapper circle v-panel-wrapper">
              <div class="v-spin-wrapper-masking" style="display: none"></div>
              <div
                class="v-layout layout-body-wrapper layout-panel-body"
                style="
                  --panel-in-tabs-padding-top: 8px;
                  --svc-layout-padding: 16px 20px 6px 20px;
                  --svc-layout-margin: 0 0 0 0;
                "
              >
                <div class="v-toolbar tbar-wrapper default-tbar">
                  <button
                    type="button"
                    class="v-btn v-btn-grey"
                    @click.stop="reload"
                  >
                    <span> 刷新 </span>
                  </button>
                  <button
                    type="button"
                    class="v-btn v-btn-grey"
                    @click.stop="showClearAllNotifyMessage"
                  >
                    <span> 清除全部 </span>
                  </button>
                  <button type="button" class="v-btn v-btn-grey v-btn-disabled">
                    <span> 查看 </span>
                  </button>
                  <button
                    type="button"
                    class="i-filter v-btn v-btn-grey v-btn-dropdown"
                  >
                    <div class="v-btn-dropdown-btn"></div>
                  </button>
                  <div class="right-wrapper"></div>
                </div>
                <div class="body-wrapper">
                  <div class="all-notification-table-wrapper">
                    <div
                      class="
                        all-notification-table
                        v-spin-wrapper
                        circle
                        v-table-wrapper
                      "
                    >
                      <div
                        class="v-spin-wrapper-masking"
                        :style="{ display: maskDisplay }"
                      ></div>

                      <div class="v-table">
                        <div class="v-table-header">
                          <table>
                            <colgroup>
                              <col
                                name="51d8198d-fd9d-4986-9532-b8a0a3962c1f"
                                width="100"
                              />
                              <col
                                name="5b742784-0a51-436e-89d0-1a0b2f31fed0"
                                width="160"
                              />
                              <col
                                name="e034d4a6-59d9-4fda-b9d6-e7cbd2293991"
                                width="380"
                              />
                              <col
                                name="3b0b169b-2410-4f64-b3f9-790f94f9c6db"
                                width="160"
                              />
                            </colgroup>
                            <thead class="v-table-thead">
                              <tr class="row">
                                <th
                                  colspan="1"
                                  rowspan="1"
                                  class="cell-first"
                                  :class="thContant.cls"
                                  v-for="(
                                    thContant, thContantIndex
                                  ) in thContantArray"
                                  :key="thContant.id"
                                  @click.stop="sort(thContantIndex)"
                                >
                                  <div class="inner-cell">
                                    <div class="head-cell cell">
                                      <span class="cell-title">{{
                                        thContant.text
                                      }}</span>
                                      <span
                                        class="v-table-column-sorter"
                                        :class="thContant.cls1"
                                      ></span>
                                    </div>
                                  </div>
                                </th>
                                <!-- <th
                                colspan="1"
                                rowspan="1"
                                class=""
                                @click.stop="sort"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">类别</span>
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                class=""
                                @click.stop="sort"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">主题</span>
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                class="last-th-cell"
                                @click.stop="sort"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">时间</span>
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th> -->
                              </tr>
                            </thead>
                          </table>
                          <div class="hd-menu-btn-wrapper"></div>
                        </div>
                        <div class="v-ps ps">
                          <div class="v-table-content">
                            <div class="v-table-body">
                              <table>
                                <colgroup>
                                  <col width="100" />
                                  <col width="160" />
                                  <col width="380" />
                                  <col width="160" />
                                </colgroup>
                                <tbody class="v-table-tbody">
                                  <tr
                                    class="row"
                                    @click.stop="clickTr(detailMessageIndex)"
                                    @mouseenter="
                                      mouseenterTr(detailMessageIndex)
                                    "
                                    @mouseleave="
                                      mouseleaveTr(detailMessageIndex)
                                    "
                                    v-for="(
                                      detailMessage, detailMessageIndex
                                    ) in notifyShowallDetail.detailMessageList"
                                    :key="detailMessage.id"
                                    :class="detailMessage.cls1"
                                  >
                                    <td class="cell-first">
                                      <div class="inner-cell">
                                        <div class="cell content-cell">
                                          <div class="level-info">信息</div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="">
                                      <div class="inner-cell">
                                        <div class="cell content-cell">
                                          <div>{{ detailMessage.title }}</div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="">
                                      <div class="inner-cell">
                                        <div class="cell content-cell">
                                          <div>
                                            {{ detailMessage.showMessage }}
                                          </div>
                                        </div>
                                      </div>
                                    </td>
                                    <td class="last-td-cell">
                                      <div class="inner-cell">
                                        <div class="cell content-cell">
                                          <div>{{ detailMessage.time1 }}</div>
                                        </div>
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                          </div>
                          <div
                            class="ps__rail-x"
                            style="left: 0px; bottom: 0px"
                          >
                            <div
                              class="ps__thumb-x"
                              style="left: 0px; width: 0px"
                            ></div>
                          </div>
                          <div class="ps__rail-y" style="top: 0px; right: 0px">
                            <div
                              class="ps__thumb-y"
                              style="top: 0px; height: 0px"
                            ></div>
                          </div>
                        </div>
                        <div
                          class="
                            col-resizable-indicator
                            col-resizable-indicator--hidden
                          "
                        ></div>
                        <div
                          class="
                            col-resizable-indicator
                            col-resizable-indicator--hidden
                          "
                        ></div>
                        <div
                          class="
                            col-resizable-indicator
                            col-resizable-indicator--hidden
                          "
                        ></div>
                      </div>
                      <div class="v-pagination">
                        <div class="v-pagination-left">
                          <ul class="left-paging">
                            <li class="v-pagination-first disabled"></li>
                            <li class="v-pagination-prev disabled"></li>
                            <li
                              class="
                                v-pagination-item
                                v-pagination-item-1
                                v-pagination-item-active
                              "
                              v-if="
                                notifyShowallDetail.detailMessageList.length
                              "
                            >
                              1
                            </li>
                            <li class="v-pagination-next disabled"></li>
                            <li class="v-pagination-last disabled"></li>
                          </ul>
                        </div>
                        <div class="v-pagination-right">
                          <div class="v-pagination-total">
                            {{ notifyShowallDetail.detailMessageList.length }}
                            个项目
                          </div>
                          <div
                            class="v-pagination-refresh"
                            @click.stop="reload"
                          ></div>
                        </div>
                      </div>
                      <div
                        class="v-spin"
                        :style="{ display: loading ? 'block' : 'none' }"
                      >
                        <div class="v-spin-text has-icon">加载中...</div>
                        <div class="v-spin-icon">
                          <i>
                            <i></i>
                          </i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="
                  v-layout
                  layout-panel-fbar
                  fbar-wrapper fbar-wrapper--fluid
                "
              >
                <div class="pull-right">
                  <button
                    type="button"
                    class="v-btn v-btn-footbar v-btn-grey"
                    @click.stop="closeNotifyShowall"
                  >
                    <span> 关闭 </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="v-trap-focus-indicator"></div>
      </div>
      <div class="v-window-resizable">
        <div class="handler v-window-resizable-nw"></div>
        <div class="handler v-window-resizable-ne"></div>
        <div class="handler v-window-resizable-sw"></div>
        <div class="handler v-window-resizable-se"></div>
        <div class="handler v-window-resizable-n"></div>
        <div class="handler v-window-resizable-s"></div>
        <div class="handler v-window-resizable-w"></div>
        <div class="handler v-window-resizable-e"></div>
      </div>
      <div
      class="v-window-mask"
      :style="{ display: clearAllNotifyMessage.clearAllNotifyMessageDisplay}"
      @click.stop="WindowClick()"
    ></div>
    </div>
    
    <div
      class="v-window v-message-box-window auto-height"
      syno-id="SYNO.SDS.DSMNotify.ShowAll.Window-msgbox"
      style="
        position: absolute;
        width: 480px;
        height: auto;
        top: 180px;
        left: 190px;
      "
      :style="{
        display: clearAllNotifyMessage.clearAllNotifyMessageDisplay,
        zIndex: clearAllNotifyMessage.clearAllNotifyMessageZIndex,
      }"
      :class="clearAllNotifyMessage.clearAllNotifyMessageCls"
      @click.stop="clickClearAllNotifyMessage"
    >
      <div>
        <div class="v-trap-focus-indicator"></div>
        <div class="v-trap-focus-body">
          <div class="v-trap-focus-indicator"></div>
          <div class="v-layout layout-panel-content v-panel message-box">
            <div class="v-spin-wrapper circle v-panel-wrapper">
              <div class="v-spin-wrapper-masking" style="display: none"></div>
              <div
                class="v-layout layout-body-wrapper layout-panel-body"
                style="--panel-in-tabs-padding-top: 0"
              >
                <div class="body-wrapper">
                  <div class="message-box-body has-icon">
                    <div class="dialog-icon-wrapper alarm">
                      <div class="dialog-icon alarm"></div>
                    </div>
                    <div class="dialog-content">
                      所有桌面通知都会被清除。是否确定要继续？
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="
                  v-layout
                  layout-panel-fbar
                  fbar-wrapper fbar-wrapper--fluid
                "
              >
                <div class="v-status-bar loading" style="display: none">
                  <div class="status-text">
                    <div class="v-spin-icon">
                      <i><i></i></i>
                    </div>
                    加载中...
                  </div>
                </div>
                <div class="default pull-right">
                  <button
                    type="button"
                    class="v-btn v-btn-footbar v-btn-cancel"
                    @click.stop="cancelDeleteAllNotifyMessage"
                  >
                    <span>取消</span>
                  </button>
                  <button
                    type="button"
                    class="v-btn v-btn-footbar v-btn-red"
                    @click.stop="confirmDeleteAllNotifyMessage"
                  >
                    <span>删除</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="v-trap-focus-indicator"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["defaultZIndex", "notifyShowAllData"],
  data() {
    return {
      notifyShowAllContant: {
        display: "none",
        zIndex: 9050,
        cls: "active-win",
      },
      loading: false,
      maskDisplay: "none",
      width: "840px",
      height: "480px",
      top: "10px",
      clearAllNotifyMessage: {
        clearAllNotifyMessageDisplay: "none",
        clearAllNotifyMessageCls: "",
        clearAllNotifyMessageZIndex: 905,
      },
      thContantArray: [
        {
          id: 0,
          text: "层级",
          cls: "",
          cls1: "down",
        },
        {
          id: 1,
          text: "类别",
          cls: "",
          cls1: "down",
        },
        {
          id: 1,
          text: "主题",
          cls: "",
          cls1: "down",
        },
        {
          id: 1,
          text: "时间",
          cls: "",
          cls1: "down",
        },
      ],
      notifyShowallDetail: {
        detailMessageList: [],
      },
      windowIsMax: false,
    };
  },
  mounted() {
    this.$bus.on("openNotifyShowall", this.openNotifyShowall);
    this.$bus.on("closeNotifyShowall", this.closeNotifyShowall);
    this.notifyShowAllContant = this.notifyShowAllData;
  },
  methods: {
    // 打开本页面
    openNotifyShowall(detailMessageList) {
      this.maskDisplay = "block";
      this.loading = true;
      this.notifyShowAllContant.display = "block";
      setTimeout(() => {
        this.maskDisplay = "none";
        this.loading = false;
        let detailMessageList1 = JSON.parse(JSON.stringify(detailMessageList));
        detailMessageList1.forEach((item) => {
          item.cls1 = "";
        });
        this.notifyShowallDetail.detailMessageList = detailMessageList1;
        this.clickNotifyShowall();
      }, 1000);
    },
    // 关闭本页面
    closeNotifyShowall() {
      this.notifyShowAllContant.display = "none";
      this.notifyShowAllContant.zIndex = this.defaultZIndex - 10;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
    },
    // 点击本页面
    clickNotifyShowall() {
      if (this.notifyShowAllContant.cls === "deactive-win") {
        this.notifyShowAllContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
    },
    // 重新加载数据
    reload() {
      this.maskDisplay = "block";
      this.loading = true;
      setTimeout(() => {
        this.maskDisplay = "none";
        this.loading = false;
      }, 1000);
    },
    // 点击每一行
    clickTr(detailMessageIndex) {
      this.notifyShowallDetail.detailMessageList.forEach((item) => {
        item.cls1 = "";
      });
      this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
        "row-selected";
    },
    // 鼠标移入表格每一行
    mouseenterTr(detailMessageIndex) {
      if (
        !this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1
      ) {
        this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
          "row-hover";
      }
    },
    // 鼠标移出表格每一行
    mouseleaveTr(detailMessageIndex) {
      if (
        this.notifyShowallDetail.detailMessageList[
          detailMessageIndex
        ].cls1.includes("row-hover")
      ) {
        this.notifyShowallDetail.detailMessageList[detailMessageIndex].cls1 =
          "";
      }
    },
    // 排序
    sort(thContantIndex) {
      this.thContantArray.forEach((item) => {
        item.cls = "";
      });
      if (this.thContantArray[thContantIndex].cls === "") {
        this.thContantArray[thContantIndex].cls = "sorting";
      }
      if (this.thContantArray[thContantIndex].cls1 === "down") {
        this.thContantArray[thContantIndex].cls1 = "up";
      } else {
        this.thContantArray[thContantIndex].cls1 = "down";
      }
      this.maskDisplay = "block";
      this.loading = true;
      setTimeout(() => {
        this.maskDisplay = "none";
        this.loading = false;
      }, 1000);
    },
    // 页面最大化
    maxWindow() {
      this.top = "40px";
      this.width = "100%";
      this.height = "calc(100vh - 40px)";
      this.windowIsMax = true;
    },
    // 页面最小化
    minWindow() {
      this.top = "10px";
      this.width = "840px";
      this.height = "480px";
      this.windowIsMax = false;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
    },
    // 显示清除全部信息弹出框
    showClearAllNotifyMessage() {
      console.log(111);
      // this.$bus.emit("clearAllNotifyMessage")
      this.clearAllNotifyMessage.clearAllNotifyMessageDisplay = "block";
      console.log(
        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex,
        this.defaultZIndex
      );
      if (
        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
        this.defaultZIndex
      ) {
        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex =
          this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
      this.$bus.emit("maskShowOrHidden", true);
      window.addEventListener("click", this.WindowClick, false);
    },
    // 点击清除全部信息弹出框
    clickClearAllNotifyMessage() {
      console.log(
        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex,
        this.defaultZIndex
      );
      if (
        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
        this.defaultZIndex
      ) {
        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex =
          this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
      this.$bus.emit("maskShowOrHidden", true);
    },
    // 没关闭清除全部信息弹出框时点击页面
    WindowClick() {
      let el = document.querySelector(
        ".notify-showall-window .v-message-box-window active-win"
      );
      window.removeEventListener("click", this.WindowClick, false);
    },
    // 取消删除
    cancelDeleteAllNotifyMessage(e) {
      e.stopPropagation();
      console.log("cancel");
      this.clearAllNotifyMessage.clearAllNotifyMessageDisplay = "none";
      this.clearAllNotifyMessage.clearAllNotifyMessageZIndex = 9050;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      this.$bus.emit("maskShowOrHidden", false);
    },
    // 确认删除
    confirmDeleteAllNotifyMessage(e) {
      e.stopPropagation();
      this.$bus.emit("clearAllNotifyMessage")
      this.notifyShowallDetail.detailMessageList = [];
      this.cancelDeleteAllNotifyMessage(e);
    },
  },
  watch: {
    defaultZIndex() {
      if (
        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
        this.defaultZIndex
      ) {
        this.clearAllNotifyMessage.clearAllNotifyMessageCls = "deactive-win";
      } else {
        this.clearAllNotifyMessage.clearAllNotifyMessageCls = "active-win";
      }
    },
    notifyShowAllData() {
      this.notifyShowAllContant = this.notifyShowAllData;
    },
  },
  components: {},
  name: "NotifyShowall",
};
</script>

<style lang="css" scoped>
.v-window .v-window-body {
  height: calc(100% - 40px);
}
</style>