|
|
@@ -1,15 +1,16 @@
|
|
|
<template>
|
|
|
<!-- 菜单弹窗 -->
|
|
|
- <div v-if="resizablePinnedDetail.detailMessageList.length" :style="{display:display}">
|
|
|
+ <div
|
|
|
+ v-if="resizablePinnedDetail.detailMessageList.length"
|
|
|
+ :style="{ display: display, height: '100vh' }"
|
|
|
+ class="menuWindow"
|
|
|
+ >
|
|
|
<div
|
|
|
class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
|
|
|
style="
|
|
|
position: absolute;
|
|
|
visibility: visible;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
- background: #fff;
|
|
|
"
|
|
|
:style="{
|
|
|
width: detailMessage.width,
|
|
|
@@ -17,31 +18,34 @@
|
|
|
minHeight: detailMessage.minHeight,
|
|
|
display: detailMessage.display,
|
|
|
zIndex: detailMessage.zIndex,
|
|
|
+ left: detailMessage.left,
|
|
|
+ top: detailMessage.top,
|
|
|
}"
|
|
|
:class="detailMessage.cls"
|
|
|
- v-for="detailMessage in resizablePinnedDetail.detailMessageList"
|
|
|
+ v-for="(
|
|
|
+ detailMessage, detailMessageIndex
|
|
|
+ ) in resizablePinnedDetail.detailMessageList"
|
|
|
:key="detailMessage.id"
|
|
|
@click.capture="changeDialogMenuWindow(detailMessage.id)"
|
|
|
>
|
|
|
- <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
|
|
|
+ <div></div>
|
|
|
<div class="x-window-tl" @click.capture="moveWindowPosition">
|
|
|
<div class="x-window-tr">
|
|
|
<div class="x-window-tc">
|
|
|
<div
|
|
|
class="x-window-header x-panel-icon x-window-draggable"
|
|
|
:style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
|
|
|
+ @mousedown="mousedownWindowHeader($event, detailMessageIndex)"
|
|
|
>
|
|
|
- <div class="x-window-toolCt" role="listbox">
|
|
|
+ <div class="x-window-toolCt">
|
|
|
<div
|
|
|
class="x-tool x-tool-close"
|
|
|
- role="option"
|
|
|
@click.capture="closeWindow(detailMessage.id)"
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
<div
|
|
|
class="x-tool x-tool-restore"
|
|
|
- role="option"
|
|
|
:style="{ display: `${detailMessage.iconRestore}` }"
|
|
|
@click.capture="restoreMizeWindow(detailMessage.id)"
|
|
|
>
|
|
|
@@ -49,7 +53,6 @@
|
|
|
</div>
|
|
|
<div
|
|
|
class="x-tool x-tool-maximize"
|
|
|
- role="option"
|
|
|
@click.capture="maxiSizeWindow(detailMessage.id)"
|
|
|
:style="{ display: `${detailMessage.iconMaximize}` }"
|
|
|
>
|
|
|
@@ -57,14 +60,12 @@
|
|
|
</div>
|
|
|
<div
|
|
|
class="x-tool x-tool-minimize"
|
|
|
- role="option"
|
|
|
@click.capture="miniMizeWindow(detailMessage.id)"
|
|
|
>
|
|
|
|
|
|
</div>
|
|
|
<div
|
|
|
class="x-tool x-tool-help"
|
|
|
- role="option"
|
|
|
@click.capture="openDSMWindow()"
|
|
|
>
|
|
|
|
|
|
@@ -208,14 +209,70 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="x-resizable-handle x-resizable-handle-north x-unselectable x-window-handle"></div>
|
|
|
- <div class="x-resizable-handle x-resizable-handle-south x-unselectable x-window-handle"></div>
|
|
|
- <div class="x-resizable-handle x-resizable-handle-east x-unselectable x-window-handle"></div>
|
|
|
- <div class="x-resizable-handle x-resizable-handle-west x-unselectable x-window-handle"></div>
|
|
|
- <div class="x-resizable-handle x-resizable-handle-northeast x-unselectable x-window-handle"></div>
|
|
|
- <div class="x-resizable-handle x-resizable-handle-northwest x-unselectable x-window-handle"></div>
|
|
|
- <div class="x-resizable-handle x-resizable-handle-southeast x-unselectable x-window-handle"></div>
|
|
|
- <div class="x-resizable-handle x-resizable-handle-southwest x-unselectable x-window-handle"></div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ x-resizable-handle
|
|
|
+ x-resizable-handle-north
|
|
|
+ x-unselectable
|
|
|
+ x-window-handle
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ x-resizable-handle
|
|
|
+ x-resizable-handle-south
|
|
|
+ x-unselectable
|
|
|
+ x-window-handle
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ x-resizable-handle
|
|
|
+ x-resizable-handle-east
|
|
|
+ x-unselectable
|
|
|
+ x-window-handle
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ x-resizable-handle
|
|
|
+ x-resizable-handle-west
|
|
|
+ x-unselectable
|
|
|
+ x-window-handle
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ x-resizable-handle
|
|
|
+ x-resizable-handle-northeast
|
|
|
+ x-unselectable
|
|
|
+ x-window-handle
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ x-resizable-handle
|
|
|
+ x-resizable-handle-northwest
|
|
|
+ x-unselectable
|
|
|
+ x-window-handle
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ x-resizable-handle
|
|
|
+ x-resizable-handle-southeast
|
|
|
+ x-unselectable
|
|
|
+ x-window-handle
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ x-resizable-handle
|
|
|
+ x-resizable-handle-southwest
|
|
|
+ x-unselectable
|
|
|
+ x-window-handle
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -225,7 +282,7 @@ export default {
|
|
|
props: ["defaultZIndex", "detailMessageList"],
|
|
|
data() {
|
|
|
return {
|
|
|
- display:'block',
|
|
|
+ display: "block",
|
|
|
resizablePinnedDetail: {
|
|
|
detailMessageList: [],
|
|
|
},
|
|
|
@@ -244,7 +301,7 @@ export default {
|
|
|
this.$bus.on("changeDialogMenuWindow", this.changeDialogMenuWindow);
|
|
|
this.$bus.on("menuItemChanged", this.menuItemChanged);
|
|
|
this.$bus.on("clickMenuItem", this.clickMenuItem);
|
|
|
- this.$bus.on('hiddenOrShowOtherWindow',this.hiddenDialogWindow)
|
|
|
+ this.$bus.on("hiddenOrShowOtherWindow", this.hiddenDialogWindow);
|
|
|
// this.$bus.on("fixWindowZIndexchange", this.fixWindowZIndexchange);
|
|
|
this.resizablePinnedDetail.detailMessageList = JSON.parse(
|
|
|
JSON.stringify(this.detailMessageList)
|
|
|
@@ -257,21 +314,27 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
// 显示本页面
|
|
|
- showDialogWindow(){
|
|
|
- if(this.display === 'none'){
|
|
|
- this.display = 'block'
|
|
|
+ showDialogWindow() {
|
|
|
+ if (this.display === "none") {
|
|
|
+ this.display = "block";
|
|
|
}
|
|
|
},
|
|
|
// 隐藏本页面
|
|
|
- hiddenDialogWindow(){
|
|
|
- if(this.display === 'block'){
|
|
|
- this.display = 'none'
|
|
|
+ hiddenDialogWindow() {
|
|
|
+ if (this.display === "block") {
|
|
|
+ this.display = "none";
|
|
|
}
|
|
|
},
|
|
|
// 点击大菜单图标
|
|
|
clickAppViewItem(id) {
|
|
|
- this.showDialogWindow()
|
|
|
- this.changeDialogMenuWindow(id)
|
|
|
+ this.resizablePinnedDetail.detailMessageList.forEach((item) => {
|
|
|
+ if (item.id === id && item.unReadyMessage.length) {
|
|
|
+ item.unReadyMessage = [];
|
|
|
+ this.$bus.emit("clickAppViewItemClearUnReady", id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.showDialogWindow();
|
|
|
+ this.changeDialogMenuWindow(id);
|
|
|
},
|
|
|
// 点击小菜单图标
|
|
|
clickMenuItem(id) {
|
|
|
@@ -279,7 +342,7 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
return item.id === id;
|
|
|
});
|
|
|
- if (detailMessageIndex != -1) {
|
|
|
+ if (detailMessageIndex !== -1) {
|
|
|
this.openDialogWindow(detailMessageIndex);
|
|
|
}
|
|
|
},
|
|
|
@@ -288,8 +351,8 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
|
|
|
"block";
|
|
|
if (
|
|
|
- (!detailMessageIndex && detailMessageIndex != 0) ||
|
|
|
- detailMessageIndex == -1 ||
|
|
|
+ (!detailMessageIndex && detailMessageIndex !== 0) ||
|
|
|
+ detailMessageIndex === -1 ||
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls ===
|
|
|
"active-win"
|
|
|
) {
|
|
|
@@ -320,7 +383,7 @@ export default {
|
|
|
if ((menuIndex || menuIndex == 0) && menuIndex != -1) {
|
|
|
this.openDialogWindow(menuIndex);
|
|
|
}
|
|
|
- // this.$bus.emit('dialogWindowZIndexIsMax',true)
|
|
|
+ // this.$bus.emit('dialogWindowZIndexIsMax',true)
|
|
|
},
|
|
|
// 打开DSM 说明
|
|
|
openDSMWindow() {
|
|
|
@@ -328,7 +391,10 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
return item.id === 1;
|
|
|
});
|
|
|
- if (detailMessageIndex || detailMessageIndex === 0 && detailMessageIndex !== -1) {
|
|
|
+ if (
|
|
|
+ detailMessageIndex ||
|
|
|
+ (detailMessageIndex === 0 && detailMessageIndex !== -1)
|
|
|
+ ) {
|
|
|
this.openDialogWindow(detailMessageIndex);
|
|
|
}
|
|
|
let obj = {
|
|
|
@@ -344,39 +410,29 @@ export default {
|
|
|
zIndex:
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
|
|
|
.zIndex,
|
|
|
- id:this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
|
|
|
- .id,
|
|
|
+ id: this.resizablePinnedDetail.detailMessageList[detailMessageIndex].id,
|
|
|
};
|
|
|
this.$bus.emit("changeDialogWindow", obj);
|
|
|
},
|
|
|
// 最小化弹出框口
|
|
|
miniMizeWindow(id) {
|
|
|
- let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
|
|
|
- return item.id === id
|
|
|
- })
|
|
|
+ let detailMessageIndex =
|
|
|
+ this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
+ return item.id === id;
|
|
|
+ });
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
|
|
|
"none";
|
|
|
- // let detailMessageList =
|
|
|
- // this.resizablePinnedDetail.detailMessageList.filter((item) => {
|
|
|
- // return item.display == "block";
|
|
|
- // });
|
|
|
- // if (detailMessageList.length) {
|
|
|
- // detailMessageList = JSON.parse(
|
|
|
- // JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
|
|
|
- // );
|
|
|
- this.resizablePinnedDetail.detailMessageList[
|
|
|
- detailMessageIndex
|
|
|
- ].zIndex = this.defaultZIndex - 10;
|
|
|
- this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
|
|
|
-
|
|
|
- // }
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
|
|
|
+ this.defaultZIndex - 10;
|
|
|
+ this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
|
|
|
this.countOpenWindowNum();
|
|
|
},
|
|
|
//最大化弹出窗口
|
|
|
maxiSizeWindow(id) {
|
|
|
- let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
|
|
|
- return item.id === id
|
|
|
- })
|
|
|
+ let detailMessageIndex =
|
|
|
+ this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
+ return item.id === id;
|
|
|
+ });
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
|
|
|
"100%";
|
|
|
this.resizablePinnedDetail.detailMessageList[
|
|
|
@@ -385,15 +441,19 @@ export default {
|
|
|
this.resizablePinnedDetail.detailMessageList[
|
|
|
detailMessageIndex
|
|
|
].iconMaximize = "none";
|
|
|
- if (detailMessageIndex || detailMessageIndex === 0 && detailMessageIndex !== -1) {
|
|
|
+ if (
|
|
|
+ detailMessageIndex ||
|
|
|
+ (detailMessageIndex === 0 && detailMessageIndex !== -1)
|
|
|
+ ) {
|
|
|
this.openDialogWindow(detailMessageIndex);
|
|
|
}
|
|
|
},
|
|
|
//恢复弹出窗口宽度
|
|
|
restoreMizeWindow(id) {
|
|
|
- let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
|
|
|
- return item.id === id
|
|
|
- })
|
|
|
+ let detailMessageIndex =
|
|
|
+ this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
+ return item.id === id;
|
|
|
+ });
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
|
|
|
this.detailMessageWidthList[detailMessageIndex];
|
|
|
this.resizablePinnedDetail.detailMessageList[
|
|
|
@@ -409,9 +469,10 @@ export default {
|
|
|
},
|
|
|
//关闭弹出窗口
|
|
|
closeWindow(id) {
|
|
|
- let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
|
|
|
- return item.id === id
|
|
|
- })
|
|
|
+ let detailMessageIndex =
|
|
|
+ this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
+ return item.id === id;
|
|
|
+ });
|
|
|
this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
|
|
|
"none";
|
|
|
this.$bus.emit("closeDialogWindow", id);
|
|
|
@@ -423,10 +484,9 @@ export default {
|
|
|
// detailMessageList = JSON.parse(
|
|
|
// JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
|
|
|
// );
|
|
|
- this.resizablePinnedDetail.detailMessageList[
|
|
|
- detailMessageIndex
|
|
|
- ].zIndex = this.defaultZIndex - 10;
|
|
|
- this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
|
|
|
+ this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
|
|
|
+ this.defaultZIndex - 10;
|
|
|
+ this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
|
|
|
// }
|
|
|
this.countOpenWindowNum();
|
|
|
},
|
|
|
@@ -438,10 +498,10 @@ export default {
|
|
|
this.openWindowNum++;
|
|
|
}
|
|
|
});
|
|
|
- if (! this.openWindowNum) {
|
|
|
+ if (!this.openWindowNum) {
|
|
|
this.resizablePinnedDetail.detailMessageList.forEach((item) => {
|
|
|
item.zIndex = 9050;
|
|
|
- item.cls = 'deactive-win'
|
|
|
+ item.cls = "deactive-win";
|
|
|
});
|
|
|
// this.$bus.emit("changeDefaultZIndex", 9050);
|
|
|
}
|
|
|
@@ -455,54 +515,55 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
// 当固定窗口的zIndex改变时
|
|
|
- fixWindowZIndexchange(){},
|
|
|
+ fixWindowZIndexchange() {},
|
|
|
+
|
|
|
+ // 鼠标按下弹出框窗口头部
|
|
|
+ mousedownWindowHeader(e, index) {
|
|
|
+ let el = console.log();
|
|
|
+ // index.left =
|
|
|
+ // let el = document.querySelector(
|
|
|
+ // ".v-widget-window .v-window-header-wrapper"
|
|
|
+ // // );
|
|
|
+ // this.widgetFirstClick.layerX = e.layerX;
|
|
|
+ // this.widgetFirstClick.screenX = document.documentElement.clientWidth;
|
|
|
+ // this.widgetFirstClick.layerY = e.layerY;
|
|
|
+ // this.widgetFirstClick.screenY = document.documentElement.clientHeight;
|
|
|
+ document.addEventListener(
|
|
|
+ "mousemove",
|
|
|
+ this.moveWindowPosition
|
|
|
+ );
|
|
|
+ document.addEventListener(
|
|
|
+ "mouseup",
|
|
|
+ this.upWindowPosition
|
|
|
+ );
|
|
|
+
|
|
|
+ },
|
|
|
// 移动弹出框窗口位置
|
|
|
- moveWindowPosition(e) {},
|
|
|
+ moveWindowPosition(e) {
|
|
|
+ console.log(e);
|
|
|
+ // console.log(this.resizablePinnedDetail.detailMessageList[index].left);
|
|
|
+
|
|
|
+ // document.addEventListener("mouseup", () => {
|
|
|
+ // console.log(1111)
|
|
|
+ //
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ // 鼠标松开
|
|
|
+ upWindowPosition(e){
|
|
|
+ document.removeEventListener(
|
|
|
+ "mousemove",
|
|
|
+ this.moveWindowPosition
|
|
|
+ );
|
|
|
+ },
|
|
|
// 小图标被改变了
|
|
|
menuItemChanged(menuList) {
|
|
|
this.openedmenuList = menuList;
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
watch: {
|
|
|
-
|
|
|
- defaultZIndex() {
|
|
|
- // this.dialogZIndexMaxIndex =
|
|
|
- // this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
|
|
|
- // return item.zIndex >= this.defaultZIndex && item.display === "block";
|
|
|
- // });
|
|
|
- // if (
|
|
|
- // this.dialogZIndexMaxIndex != -1 &&
|
|
|
- // this.dialogZIndexMaxIndex != undefined
|
|
|
- // ) {
|
|
|
- // let obj = {
|
|
|
- // imgUrl:
|
|
|
- // this.resizablePinnedDetail.detailMessageList[
|
|
|
- // this.dialogZIndexMaxIndex
|
|
|
- // ].titleImgUrl,
|
|
|
- // zIndex:
|
|
|
- // this.resizablePinnedDetail.detailMessageList[
|
|
|
- // this.dialogZIndexMaxIndex
|
|
|
- // ].zIndex,
|
|
|
- // spacialCls:
|
|
|
- // this.resizablePinnedDetail.detailMessageList[
|
|
|
- // this.dialogZIndexMaxIndex
|
|
|
- // ].spacialCls,
|
|
|
- // title:
|
|
|
- // this.resizablePinnedDetail.detailMessageList[
|
|
|
- // this.dialogZIndexMaxIndex
|
|
|
- // ].title,
|
|
|
- // id:
|
|
|
- // this.resizablePinnedDetail.detailMessageList[
|
|
|
- // this.dialogZIndexMaxIndex
|
|
|
- // ].id,
|
|
|
- // };
|
|
|
- // this.$bus.emit("changeDialogWindow", obj);
|
|
|
- // }
|
|
|
+ detailMessageList() {
|
|
|
+ this.resizablePinnedDetail.detailMessageList = this.detailMessageList;
|
|
|
},
|
|
|
- detailMessageList(){
|
|
|
- this.resizablePinnedDetail.detailMessageList =this.detailMessageList
|
|
|
- }
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
this.$bus.off("clickShortcutItem", this.clickShortcutItem);
|
liupeng