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

<template>
  <!-- notifyTrayPanelDetail -->
  <div
    class="v-layout sds-notify-detail-dialog layout-window-app v-window"
    style="position: absolute; width: 680px; height: 420px"
    :style="{
      display: notifyTrayPanelDetailContant.display,
      zIndex: notifyTrayPanelDetailContant.zIndex,
      left: notifyTrayPanelDetailContant.left,
      top: notifyTrayPanelDetailContant.top,
    }"
    :class="notifyTrayPanelDetailContant.cls"
    @mousedown.capture="openNotifyDetail"
  >
    <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 close" @click.capture="closeNotifyDetail"></div>
      </div>
    </div>
    <div class="v-window-body" v-if="notifyTrayPanelDetail.detailMessage.title">
      <div class="v-trap-focus-indicator"></div>
      <div class="v-trap-focus-body">
        <div role="application" class="v-trap-focus-indicator"></div>
        <div
          class="v-layout detail-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: 0;
                --svc-layout-padding: 16px 20px 6px 20px;
                --svc-layout-margin: 0 0 0 0;
              "
            >
              <div class="body-wrapper">
                <div class="v-ps ps">
                  <form
                    class="v-layout layout-form v-form v-form-horizontal"
                    style=""
                  >
                    <div class="v-form-item">
                      <div class="v-form-item-label">
                        <label for="">类别：</label>
                      </div>
                      <div class="v-form-item-input">
                        <div class="v-form-item-control v-form-displayfield">
                          <div>
                            {{ notifyTrayPanelDetail.detailMessage.title }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-label">
                        <label for="">主题：</label>
                      </div>
                      <div class="v-form-item-input">
                        <div class="v-form-item-control v-form-displayfield">
                          <div>
                            <div
                              v-html="notifyTrayPanelDetail.detailMessage.text"
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-label">
                        <label for="">时间：</label>
                      </div>
                      <div class="v-form-item-input">
                        <div class="v-form-item-control v-form-displayfield">
                          <div>
                            {{ notifyTrayPanelDetail.detailMessage.time1 }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-input">
                        <div class="v-form-item-control v-form-displayfield">
                          <div>
                            <div
                              class="detail-mail-content"
                              v-html="
                                notifyTrayPanelDetail.detailMessage.message
                              "
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                  <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>
            </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="closeNotifyDetail"
                >
                  <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>
</template>

<script>
import { moveWindow } from "../../../../common/common";
export default {
  props: ["defaultZIndex", "notifyTrayPanelDetailData"],
  mounted() {
    this.$bus.on("openNotifyDetail", this.openNotifyDetail);
    this.$bus.on("closeNotifyDetail", this.closeNotifyDetail);
    this.notifyTrayPanelDetailContant = this.notifyTrayPanelDetailData;
  },
  data() {
    return {
      windowFirstClick: {
        layerX: 0,
        layerY: 0,
        screenX: 0,
        screenY: 0,
      },
      notifyTrayPanelDetail: {
        detailMessage: [],
      },
      notifyTrayPanelDetailContant: {
        zIndex: 9050,
        cls: "deactive-win",
        display: "none",
        top: 0,
        left: 0,
      },
    };
  },
  components: {},
  methods: {
    // 打开/点击本页面
    openNotifyDetail(detailMessage) {
      if (this.notifyTrayPanelDetailContant.display === "none") {
        this.notifyTrayPanelDetailContant.display = "block";
        this.notifyTrayPanelDetailContant.top = "10px";
        this.notifyTrayPanelDetailContant.left = "10px";
      }
      if (this.notifyTrayPanelDetailContant.cls === "deactive-win") {
        this.notifyTrayPanelDetailContant.zIndex = this.defaultZIndex + 10;
        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
      }
      if (detailMessage && detailMessage.title) {
        this.notifyTrayPanelDetail.detailMessage = detailMessage;
      }
    },
    // 关闭本页面
    closeNotifyDetail() {
      this.notifyTrayPanelDetailContant.display = "none";
      this.notifyTrayPanelDetailContant.zIndex = this.defaultZIndex - 10;
      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
    },
    // 鼠标按下该页面头部
    mousedownNotifyTrayPanelDetail(e) {
      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-detail-dialog");
      let obj = moveWindow(
        e,
        window,
        this.windowFirstClick.layerX,
        this.windowFirstClick.layerY,
        this.windowFirstClick.screenX,
        this.windowFirstClick.screenY
      );
      this.notifyTrayPanelDetailContant.left = obj.moveX + "px";
      this.notifyTrayPanelDetailContant.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-detail-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);
    },
  },
};
</script>
<style lang="css" scoped>
.v-window .v-window-body {
  height: 380px;
}
</style>