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

<template>
  <!-- notifyShowAll -->
  <div class="notifyShowall">
    <div
      class="v-layout sds-notify-showall-dialog layout-window-app v-window"
      :class="notifyShowAllContant.cls"
      style="position: absolute;"
      :style="{
        display: notifyShowAllContant.display,
        width: width,
        height: height,
        top: notifyShowAllContant.top,
        left: notifyShowAllContant.left,
        zIndex: notifyShowAllContant.zIndex,
      }"
      @mousedown.capture="clickNotifyShowall"
    >
      <div class="v-window-header-wrapper draggable"
      @mousedown.capture="mousedownNotifyTrayPanelDetail">
        <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.capture="maxWindow"
            v-if="!windowIsMax"
          ></div>
          <div class="tool restore" @click.capture="restoreWindow" v-else></div>
          <div class="tool close" @click.capture="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.capture="reload"
                  >
                    <span> 刷新 </span>
                  </button>
                  <button
                    type="button"
                    class="v-btn v-btn-grey"
                    @click.capture="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.capture="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>
                              </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.capture="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.capture="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.capture="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:
            notifyShowAllContant.clearAllNotifyData
              .clearAllNotifyMessageDisplay,
        }"
        @mousedown.capture="maskMousedown()"
      >
        <div
          class="v-window v-message-box-window auto-height"
          syno-id="SYNO.SDS.DSMNotify.ShowAll.Window-msgbox"
          style="
            position: relative;
            width: 480px;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          "
          :style="{
            display:
              notifyShowAllContant.clearAllNotifyData
                .clearAllNotifyMessageDisplay,
            zIndex:
              notifyShowAllContant.clearAllNotifyData
                .clearAllNotifyMessageZIndex,
          }"
          :class="
            notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageCls
          "
          @mousedown="mousedownClearAllNotifyMessage"
        >
          <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.capture="cancelDeleteAllNotifyMessage"
                      >
                        <span>取消</span>
                      </button>
                      <button
                        type="button"
                        class="v-btn v-btn-footbar v-btn-red"
                        @click.capture="confirmDeleteAllNotifyMessage"
                      >
                        <span>删除</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="v-trap-focus-indicator"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {moveWindow} from '../../../../common/common'
export default {
  props: ["defaultZIndex", "notifyShowAllData"],
  data() {
    return {
      windowFirstClick:{
        layerX:0,
        layerY:0,
        screenX:0,
        screenY:0,
      },
      notifyShowAllContant: {
        display: "none",
        zIndex: 9050,
        cls: "active-win",
        left:0,
        top:0,
        clearAllNotifyData: {
          clearAllNotifyMessageDisplay: "none",
          clearAllNotifyMessageCls: "deactive-win",
          clearAllNotifyMessageZIndex: 9050,
        },
      },
      loading: false,
      maskDisplay: "none",
      width: "840px",
      height: "480px",
      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";
      this.clickNotifyShowall();
      setTimeout(() => {
        this.maskDisplay = "none";
        this.loading = false;
        let detailMessageList1 = JSON.parse(JSON.stringify(detailMessageList));
        detailMessageList1.forEach((item) => {
          item.cls1 = "";
        });
        this.notifyShowallDetail.detailMessageList = detailMessageList1;
      }, 1000);
    },
    // 关闭本页面
    closeNotifyShowall() {
      this.notifyShowAllContant.display = "none";
      this.notifyShowAllContant.zIndex = 9050;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
    },
    // 点击本页面
    clickNotifyShowall() {
      if (
        this.notifyShowAllContant.cls === "deactive-win" && (
        this.notifyShowAllContant.clearAllNotifyData
          .clearAllNotifyMessageZIndex < this.defaultZIndex && this.notifyShowAllContant.clearAllNotifyData
          .clearAllNotifyMessageDisplay === 'block')
      ) {
        this.notifyShowAllContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }else if (
        this.notifyShowAllContant.cls === "deactive-win" &&  this.notifyShowAllContant.clearAllNotifyData
          .clearAllNotifyMessageDisplay === 'none'){
        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.notifyShowAllContant.top = '40px';
      this.notifyShowAllContant.left = 0;
      this.width = "100%";
      this.windowIsMax = true;
      let el = document.querySelector('.v-layout.sds-notify-showall-dialog')
      if(! el.className.includes(' x-window-maximized')){
        el.className = el.className + ' x-window-maximized'
      }
    },
    // 恢复页面宽度
    restoreWindow() {
      this.notifyShowAllContant.top = 0;
      this.notifyShowAllContant.left= '10px';
      this.width = "840px";
      this.windowIsMax = false;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      let el = document.querySelector('.v-layout.sds-notify-showall-dialog')
      if(el.className.includes(' x-window-maximized')){
        el.className = el.className.replace(' x-window-maximized','')
      }
    },
    // 显示清除全部信息弹出框
    showClearAllNotifyMessage() {
      if (this.notifyShowAllContant.zIndex >= this.defaultZIndex) {
        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
          this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      } else {
        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
          this.defaultZIndex + 20;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 20);
      }
      this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageDisplay =
        "block";
      this.$bus.emit("showOrHiddenNotifyShowallClearAll", true);
      this.$bus.emit("showOrHiddenNotifyShowallClearAll", true);
    },
    // 点击清除全部信息弹出框
    mousedownClearAllNotifyMessage() {
      let el = document.querySelector(
        ".notifyShowall .v-message-box-window"
      );
      if (el.className && el.className.includes(" no-shadow")) {
        el.className = el.className.replace(" no-shadow", "");
      }
    },
    //没关闭清除全部信息弹出框时鼠标按下遮罩层
    maskMousedown() {
      if (
        this.notifyShowAllContant.clearAllNotifyData
          .clearAllNotifyMessageZIndex < this.defaultZIndex &&
        this.notifyShowAllContant.zIndex < this.defaultZIndex
      ) {
        this.notifyShowAllContant.zIndex = this.defaultZIndex + 10;
        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
          this.defaultZIndex + 20;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 20);
        this.$bus.emit("showOrHiddenNotifyShowallClearAll", true);
      } else if (
        this.notifyShowAllContant.clearAllNotifyData
          .clearAllNotifyMessageZIndex < this.defaultZIndex &&
        this.notifyShowAllContant.zIndex >= this.defaultZIndex
      ) {
        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
          this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
      let el = document.querySelector(
        ".notifyShowall .v-message-box-window"
      );
      if (!el.className.includes(" no-shadow")) {
        this.$nextTick(()=>{
          el.className = el.className + " no-shadow";
        })
        setTimeout(() => {
          el.className = el.className.replace(" no-shadow", "");
        }, 500);
      }
    },
    // 取消删除
    cancelDeleteAllNotifyMessage(e) {
      e.stopPropagation();
      this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageDisplay =
        "none";
      this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex = 9050;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
      this.$bus.emit("showOrHiddenNotifyShowallClearAll", false);
    },
    // 确认删除
    confirmDeleteAllNotifyMessage(e) {
      e.stopPropagation();
      this.$bus.emit("notifyShowAllContant.clearAllNotifyMessage");
      this.notifyShowallDetail.detailMessageList = [];
      this.cancelDeleteAllNotifyMessage(e);
    },
    // 鼠标按下该页面头部
    mousedownNotifyTrayPanelDetail(e){
      // document.documentElement.click()
      if(!this.windowIsMax){
        this.windowFirstClick.layerX = e.layerX;
        this.windowFirstClick.screenX = document.documentElement.clientWidth;
        this.windowFirstClick.layerY = e.layerY;
        this.windowFirstClick.screenY = document.documentElement.clientHeight;
        document.addEventListener(
          "mousemove",
          this.moveWindowPosition
        );
        document.addEventListener(
          "mouseup",
          this.upWindowPosition
        );
      }
    },
    // 移动弹出框窗口位置
    moveWindowPosition(e) {
      let window = document.querySelector('.v-layout.sds-notify-showall-dialog')
      let obj = moveWindow(e,window,this.windowFirstClick.layerX,this.windowFirstClick.layerY,this.windowFirstClick.screenX,this.windowFirstClick.screenY)
      this.notifyShowAllContant.left = obj.moveX +'px'
      this.notifyShowAllContant.top = obj.moveY +'px'
      if (!window.className.includes(' x-panel-ghost')){
        window.className = window.className + ' x-panel-ghost'
      }
    },
    // 鼠标松开
    upWindowPosition(e){
      let window = document.querySelector('.v-layout.sds-notify-showall-dialog')
      if (window.className.includes(' x-panel-ghost')){
        window.className = window.className.replace(' x-panel-ghost','')
      }
      document.removeEventListener("mousemove", this.moveWindowPosition);
      document.removeEventListener("mouseup", this.upWindowPosition);
    },
  },
  components: {},
  name: "NotifyShowall",
};
</script>

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