|
@@ -7,13 +7,9 @@
|
|
|
>
|
|
|
<div
|
|
|
class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
|
|
|
- style="
|
|
|
- position: absolute;
|
|
|
- visibility: visible;
|
|
|
- "
|
|
|
+ style="position: absolute; visibility: visible"
|
|
|
:style="{
|
|
|
width: detailMessage.width,
|
|
|
- height: detailMessage.height,
|
|
|
minHeight: detailMessage.minHeight,
|
|
|
display: detailMessage.display,
|
|
|
zIndex: detailMessage.zIndex,
|
|
@@ -21,15 +17,20 @@
|
|
|
top: detailMessage.top,
|
|
|
}"
|
|
|
:class="detailMessage.cls"
|
|
|
+ :data-id="detailMessage.id"
|
|
|
v-for="(
|
|
|
detailMessage, detailMessageIndex
|
|
|
) in resizablePinnedDetail.detailMessageList"
|
|
|
:key="detailMessage.id"
|
|
|
- @click.capture="changeDialogMenuWindow(detailMessage.id)"
|
|
|
+ @mousedown.capture="changeDialogMenuWindow(detailMessage.id)"
|
|
|
>
|
|
|
<div></div>
|
|
|
- <div class="x-window-tl"
|
|
|
- @mousedown.stop="mousedownWindowHeader($event, detailMessageIndex)">
|
|
|
+ <div
|
|
|
+ class="x-window-tl"
|
|
|
+ @mousedown.capture="
|
|
|
+ mousedownWindowHeader($event, detailMessageIndex, detailMessage.id)
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="x-window-tr">
|
|
|
<div class="x-window-tc">
|
|
|
<div
|
|
@@ -277,17 +278,18 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {moveWindow} from '../../../../common/common'
|
|
|
+import { moveWindow } from "../../../../common/common";
|
|
|
export default {
|
|
|
props: ["defaultZIndex", "detailMessageList"],
|
|
|
data() {
|
|
|
return {
|
|
|
display: "block",
|
|
|
- windowFirstClick:{
|
|
|
- layerX:0,
|
|
|
- layerY:0,
|
|
|
- screenX:0,
|
|
|
- screenY:0,
|
|
|
+ moveWindowId: 0,
|
|
|
+ windowFirstClick: {
|
|
|
+ layerX: 0,
|
|
|
+ layerY: 0,
|
|
|
+ screenX: 0,
|
|
|
+ screenY: 0,
|
|
|
},
|
|
|
resizablePinnedDetail: {
|
|
|
detailMessageList: [],
|
|
@@ -309,11 +311,72 @@ export default {
|
|
|
this.$bus.on("clickMenuItem", this.clickMenuItem);
|
|
|
this.$bus.on("hiddenOrShowOtherWindow", this.hiddenDialogWindow);
|
|
|
this.resizablePinnedDetail.detailMessageList = this.detailMessageList;
|
|
|
- this.resizablePinnedDetail.detailMessageList.forEach(
|
|
|
- (item, index) => {
|
|
|
- this.detailMessageWidthList[index] = item.width;
|
|
|
- }
|
|
|
- );
|
|
|
+ this.resizablePinnedDetail.detailMessageList.forEach((item, index) => {
|
|
|
+ this.detailMessageWidthList[index] = item.width;
|
|
|
+ });
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ let windowList = document.querySelectorAll(
|
|
|
+ ".sds-window-v5.x-resizable-pinned"
|
|
|
+ );
|
|
|
+ windowList.forEach((item) => {
|
|
|
+ let index = this.resizablePinnedDetail.detailMessageList.findIndex(
|
|
|
+ (item1) => {
|
|
|
+ return item1.id == item.dataset.id;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ if (item.style.display === "block") {
|
|
|
+ if (
|
|
|
+ document.documentElement.scrollHeight <
|
|
|
+ item.offsetHeight + item.offsetTop &&
|
|
|
+ document.documentElement.scrollHeight > item.offsetHeight
|
|
|
+ ) {
|
|
|
+ let top = document.documentElement.scrollHeight - item.offsetHeight;
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].top =
|
|
|
+ top + "px";
|
|
|
+ if (top < 0) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].top = 0;
|
|
|
+ }
|
|
|
+ } else if (
|
|
|
+ document.documentElement.scrollHeight >
|
|
|
+ item.offsetHeight
|
|
|
+ ) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].top =
|
|
|
+ (document.documentElement.scrollHeight - item.offsetHeight) / 2 +'px'
|
|
|
+ } else if (
|
|
|
+ document.documentElement.scrollHeight < item.offsetHeight
|
|
|
+ ) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].top = 0;
|
|
|
+ }
|
|
|
+ console.log(
|
|
|
+ document.documentElement.scrollWidth,
|
|
|
+ document.documentElement.scrollHeight,
|
|
|
+ item.offsetHeight,
|
|
|
+ item.offsetWidth
|
|
|
+ );
|
|
|
+ if (
|
|
|
+ document.documentElement.scrollWidth <
|
|
|
+ item.offsetWidth + item.offsetLeft &&
|
|
|
+ document.documentElement.scrollWidth > item.offsetWidth
|
|
|
+ ) {
|
|
|
+ let left = document.documentElement.scrollWidth - item.offsetWidth;
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].left =
|
|
|
+ left + "px";
|
|
|
+ console.log(left);
|
|
|
+ if (left < 0) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].left = 0;
|
|
|
+ }
|
|
|
+ } else if (
|
|
|
+ document.documentElement.scrollWidth >
|
|
|
+ item.offsetWidth
|
|
|
+ ) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].left = (document.documentElement.scrollWidth-
|
|
|
+ item.offsetWidth)/2 +'px'
|
|
|
+ } else if (document.documentElement.scrollWidth < item.offsetWidth) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].left = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
// 显示本页面
|
|
@@ -366,6 +429,7 @@ export default {
|
|
|
});
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
|
|
|
"active-win";
|
|
|
+
|
|
|
let defaultZIndex = this.defaultZIndex + 10;
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
|
|
|
defaultZIndex;
|
|
@@ -373,10 +437,119 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
|
|
|
defaultZIndex;
|
|
|
this.lastCheckIndex = detailMessageIndex;
|
|
|
- if(this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width !== '100%'){
|
|
|
- let left = (document.documentElement.clientWidth - parseInt(this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width.replace('px',''))) / 2
|
|
|
- this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left = left + 'px'
|
|
|
+ let left, top;
|
|
|
+ if (
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
|
|
|
+ .width !== "100%"
|
|
|
+ ) {
|
|
|
+ left =
|
|
|
+ (document.documentElement.clientWidth -
|
|
|
+ parseInt(
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].width.replace("px", "")
|
|
|
+ )) /
|
|
|
+ 2;
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left =
|
|
|
+ left + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ typeof this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
|
|
|
+ .left === "string"
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ parseFloat(
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].left.replace("px", "")
|
|
|
+ ) < 0
|
|
|
+ ) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].left = 0;
|
|
|
+ }
|
|
|
}
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let windowList = document.querySelectorAll(
|
|
|
+ ".sds-window-v5.x-resizable-pinned"
|
|
|
+ );
|
|
|
+ windowList.forEach((item) => {
|
|
|
+ if (
|
|
|
+ item.dataset.id ==
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].id
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ document.documentElement.scrollHeight >
|
|
|
+ item.offsetHeight + item.offsetTop &&
|
|
|
+ document.documentElement.scrollHeight > item.offsetHeight
|
|
|
+ ) {
|
|
|
+ top =
|
|
|
+ (document.documentElement.clientHeight - item.offsetHeight) / 2;
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].top = top + "px";
|
|
|
+ } else if (
|
|
|
+ document.documentElement.scrollHeight <
|
|
|
+ item.offsetHeight + item.offsetTop &&
|
|
|
+ document.documentElement.scrollHeight > item.offsetHeight
|
|
|
+ ) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].top =
|
|
|
+ document.documentElement.scrollHeight -
|
|
|
+ item.offsetHeight +
|
|
|
+ "px";
|
|
|
+ } else if (
|
|
|
+ document.documentElement.scrollHeight < item.offsetHeight
|
|
|
+ ) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].top = 0;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ typeof this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].top === "string"
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ parseFloat(
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].top.replace("px", "")
|
|
|
+ ) < 0
|
|
|
+ ) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].top = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if (
|
|
|
+ // document.documentElement.scrollHeight <
|
|
|
+ // item.offsetHeight + item.offsetTop &&
|
|
|
+ // document.documentElement.scrollHeight > item.offsetHeight
|
|
|
+ // ) {
|
|
|
+ // this.resizablePinnedDetail.detailMessageList[
|
|
|
+ // detailMessageIndex
|
|
|
+ // ].top =
|
|
|
+ // document.documentElement.scrollHeight -
|
|
|
+ // item.offsetHeight +
|
|
|
+ // "px";
|
|
|
+ // if (
|
|
|
+ // document.documentElement.scrollHeight - item.offsetHeight <
|
|
|
+ // 0
|
|
|
+ // ) {
|
|
|
+ // this.resizablePinnedDetail.detailMessageList[
|
|
|
+ // detailMessageIndex
|
|
|
+ // ].top = 0;
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // this.resizablePinnedDetail.detailMessageList[
|
|
|
+ // detailMessageIndex
|
|
|
+ // ].top = "40px";
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
// 切换弹出的menu窗口
|
|
|
changeDialogMenuWindow(id) {
|
|
@@ -429,7 +602,6 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
|
|
|
this.defaultZIndex - 10;
|
|
|
this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
|
|
|
- this.countOpenWindowNum();
|
|
|
},
|
|
|
//最大化弹出窗口
|
|
|
maxiSizeWindow(id) {
|
|
@@ -437,7 +609,8 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
return item.id === id;
|
|
|
});
|
|
|
- this.resizablePinnedDetail.detailMessageList[detailMessageIndex].top = '40px'
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].top =
|
|
|
+ "40px";
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
|
|
|
"100%";
|
|
|
this.resizablePinnedDetail.detailMessageList[
|
|
@@ -446,11 +619,14 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList[
|
|
|
detailMessageIndex
|
|
|
].iconMaximize = "none";
|
|
|
- this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left = 0
|
|
|
- this.resizablePinnedDetail.detailMessageList[detailMessageIndex].top = '40px'
|
|
|
- let window = document.querySelector('.sds-window-v5.x-resizable-pinned.active-win')
|
|
|
- if(! window.className.includes(' x-window-maximized')){
|
|
|
- window.className = window.className + ' x-window-maximized'
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left = 0;
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].top =
|
|
|
+ "40px";
|
|
|
+ let window = document.querySelector(
|
|
|
+ ".sds-window-v5.x-resizable-pinned.active-win"
|
|
|
+ );
|
|
|
+ if (!window.className.includes(" x-window-maximized")) {
|
|
|
+ window.className = window.className + " x-window-maximized";
|
|
|
}
|
|
|
},
|
|
|
//恢复弹出窗口宽度
|
|
@@ -459,7 +635,21 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
return item.id === id;
|
|
|
});
|
|
|
- this.resizablePinnedDetail.detailMessageList[detailMessageIndex].top = 0
|
|
|
+ if (
|
|
|
+ typeof ( this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
|
|
|
+ .top) === 'string'
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ parseFloat(
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].top.replace("px", "")
|
|
|
+ ) < 0
|
|
|
+ )
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].top = 0;
|
|
|
+ }
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
|
|
|
this.detailMessageWidthList[detailMessageIndex];
|
|
|
this.resizablePinnedDetail.detailMessageList[
|
|
@@ -468,11 +658,21 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList[
|
|
|
detailMessageIndex
|
|
|
].iconMaximize = "block";
|
|
|
- let left = (document.documentElement.clientWidth - parseInt(this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width.replace('px',''))) / 2
|
|
|
- this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left = left + 'px'
|
|
|
- let window = document.querySelector('.sds-window-v5.x-resizable-pinned.active-win')
|
|
|
- if(window.className.includes(' x-window-maximized')){
|
|
|
- window.className = window.className.replace(' x-window-maximized','')
|
|
|
+ let left =
|
|
|
+ (document.documentElement.clientWidth -
|
|
|
+ parseInt(
|
|
|
+ this.resizablePinnedDetail.detailMessageList[
|
|
|
+ detailMessageIndex
|
|
|
+ ].width.replace("px", "")
|
|
|
+ )) /
|
|
|
+ 2;
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left =
|
|
|
+ left + "px";
|
|
|
+ let window = document.querySelector(
|
|
|
+ ".sds-window-v5.x-resizable-pinned.active-win"
|
|
|
+ );
|
|
|
+ if (window.className.includes(" x-window-maximized")) {
|
|
|
+ window.className = window.className.replace(" x-window-maximized", "");
|
|
|
}
|
|
|
},
|
|
|
//关闭弹出窗口
|
|
@@ -487,23 +687,6 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
|
|
|
this.defaultZIndex - 10;
|
|
|
this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
|
|
|
- // }
|
|
|
- this.countOpenWindowNum();
|
|
|
- },
|
|
|
- //统计打开的弹出窗口
|
|
|
- countOpenWindowNum() {
|
|
|
- this.openWindowNum = 0;
|
|
|
- this.resizablePinnedDetail.detailMessageList.forEach((item) => {
|
|
|
- if (item.display === "block") {
|
|
|
- this.openWindowNum++;
|
|
|
- }
|
|
|
- });
|
|
|
- if (!this.openWindowNum) {
|
|
|
- this.resizablePinnedDetail.detailMessageList.forEach((item) => {
|
|
|
- item.zIndex = 9050;
|
|
|
- item.cls = "deactive-win";
|
|
|
- });
|
|
|
- }
|
|
|
},
|
|
|
// 按z-index 给menuItem排序
|
|
|
arraySort(array, key) {
|
|
@@ -514,46 +697,73 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 鼠标按下弹出框窗口头部
|
|
|
- mousedownWindowHeader(e, index) {
|
|
|
- document.documentElement.click()
|
|
|
- this.openDialogWindow(index)
|
|
|
- if(this.resizablePinnedDetail.detailMessageList[
|
|
|
- index
|
|
|
- ].iconMaximize === "block"){
|
|
|
+ mousedownWindowHeader(e, index, id) {
|
|
|
+ this.moveWindowId = id;
|
|
|
+ document.documentElement.click();
|
|
|
+ if (
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].iconMaximize ===
|
|
|
+ "block"
|
|
|
+ ) {
|
|
|
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
|
|
|
- );
|
|
|
+ document.addEventListener("mousemove", this.moveWindowPosition);
|
|
|
+ document.addEventListener("mouseup", this.upWindowPosition);
|
|
|
}
|
|
|
},
|
|
|
// 移动弹出框窗口位置
|
|
|
moveWindowPosition(e) {
|
|
|
- let window = document.querySelector('.sds-window-v5.x-resizable-pinned.active-win')
|
|
|
- let obj = moveWindow(e,window,this.windowFirstClick.layerX,this.windowFirstClick.layerY,this.windowFirstClick.screenX,this.windowFirstClick.screenY)
|
|
|
- window.style.left = obj.moveX +'px'
|
|
|
- window.style.top = obj.moveY +'px'
|
|
|
- if (!window.className.includes(' x-panel-ghost')){
|
|
|
- window.className = window.className + ' x-panel-ghost'
|
|
|
+ let windowList = document.querySelectorAll(
|
|
|
+ ".sds-window-v5.x-resizable-pinned"
|
|
|
+ );
|
|
|
+
|
|
|
+ let index = this.resizablePinnedDetail.detailMessageList.findIndex(
|
|
|
+ (item) => {
|
|
|
+ return item.id == this.moveWindowId;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ let index1 = Array.from(windowList).findIndex((item) => {
|
|
|
+ console.dir(item);
|
|
|
+ return item.dataset.id == this.moveWindowId;
|
|
|
+ });
|
|
|
+ if (index1 !== -1 && index1 !== undefined) {
|
|
|
+ let window = windowList[index1];
|
|
|
+ let obj = moveWindow(
|
|
|
+ e,
|
|
|
+ window,
|
|
|
+ this.windowFirstClick.layerX,
|
|
|
+ this.windowFirstClick.layerY,
|
|
|
+ this.windowFirstClick.screenX,
|
|
|
+ this.windowFirstClick.screenY
|
|
|
+ );
|
|
|
+ if (!window.className.includes(" x-panel-ghost")) {
|
|
|
+ window.className = window.className + " x-panel-ghost";
|
|
|
+ }
|
|
|
+ if (index1 !== -1 && index !== undefined) {
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].left =
|
|
|
+ obj.moveX + "px";
|
|
|
+ this.resizablePinnedDetail.detailMessageList[index].top =
|
|
|
+ obj.moveY + "px";
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
// 鼠标松开
|
|
|
- upWindowPosition(e){
|
|
|
- let window = document.querySelector('.sds-window-v5.x-resizable-pinned.active-win')
|
|
|
- if (window.className.includes(' x-panel-ghost')){
|
|
|
- window.className = window.className.replace(' x-panel-ghost','')
|
|
|
+ upWindowPosition(e) {
|
|
|
+ let windowList = document.querySelectorAll(
|
|
|
+ ".sds-window-v5.x-resizable-pinned"
|
|
|
+ );
|
|
|
+ let index1 = Array.from(windowList).findIndex((item) => {
|
|
|
+ return item.dataset.id == this.moveWindowId;
|
|
|
+ });
|
|
|
+ if (index1 !== -1 && index1 !== undefined) {
|
|
|
+ let window = windowList[index1];
|
|
|
+ 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);
|
|
|
}
|
|
|
- let index = -1
|
|
|
- // document.removeEventListener("mousemove", this.moveWindowPosition.bind(this,e,index));
|
|
|
- document.removeEventListener("mousemove", this.moveWindowPosition);
|
|
|
- document.removeEventListener("mouseup", this.upWindowPosition);
|
|
|
},
|
|
|
// 小图标被改变了
|
|
|
menuItemChanged(menuList) {
|