yvan-window/src/component/Desktop/Shortcut/ResizablePinned/index.vue

<template>
    <!-- 菜单弹窗 -->
    <div>
        <div class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
            style="height:100%;position: absolute; visibility: visible; left: 50%; top: 0px;transform: translateX(-50%)"
            :style="{width:`${detailMessage.width}`,display:detailMessage.display,zIndex:detailMessage.zIndex}"
            :class="detailMessage.cls"
            v-for="(detailMessage, detailMessageIndex) in resizablePinnedDetail.detailMessageList" :key="detailMessage.id"
            @click.stop="changeDialogWindow(detailMessage.titleImgUrl,detailMessageIndex)">
            <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
            <div class="x-window-tl">
                <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})`}">
                            <div class="x-window-toolCt" role="listbox">
                                <div class="x-tool x-tool-close" role="option" @click.stop="closeWindow(detailMessageIndex)">
                                    &nbsp;</div>
                                <div class="x-tool x-tool-restore" role="option"
                                    :style="{display: `${detailMessage.iconRestore}`}"
                                    @click.stop= "restoreMizeWindow(detailMessageIndex)">&nbsp;
                                </div>
                                <div class="x-tool x-tool-maximize" role="option" @click.stop = "maxMizeWindow(detailMessageIndex)"
                                :style="{display: `${detailMessage.iconMaximize}`}">&nbsp;</div>
                                <div class="x-tool x-tool-minimize" role="option" @click.stop="minMizeWindow(detailMessageIndex)">&nbsp;</div>
                                <div class="x-tool x-tool-help" role="option" @click.stop="openDSMWindow()">
                                    &nbsp;</div>
                            </div><span class="x-window-header-text">{{detailMessage.title}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="x-window-bwrap">
                <div class="x-window-ml">
                    <div class="x-window-mr">
                        <div class="x-window-mc">
                            <div class="x-window-tbar" style="width: 100%">
                                <div class="x-toolbar x-small-editor synopkg-toolbar syno-ux-toolbar x-toolbar-layout-ct" style="height: 40px; width: 1230px;">
                                    <table cellspacing="0" class="x-toolbar-ct">
                                        <tbody>
                                            <tr>
                                                <td class="x-toolbar-left" align="left">
                                                    <!-- 
                                                    <table cellspacing="0">
                                                        <tbody>
                                                            <tr class="x-toolbar-left-row">
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn synopkg-toolbar-back-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
                                                                        style="margin-left: 0px; height: 28px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-back-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn synopkg-toolbar-next-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
                                                                        style="margin-left: 0px; height: 28px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-next-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-icon"
                                                                        style="margin-left: 0px; height: 26px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text synopkg-toolbar-refresh-icon synopkg-btn-icon"
                                                                                ></button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell syno-ux-textfilter">
                                                                    <div class="x-form-field-wrap x-form-field-trigger-wrap"
                                                                        style="width: 100%;">
                                                                        <input type="text" size="16"
                                                                            autocomplete="off"
                                                                            class="x-form-text x-form-field syno-ux-textfilter-text x-form-empty-field"
                                                                            placeholder="搜索"
                                                                            style="width: calc((100% - 30px) - 3px);"><button
                                                                            type="button"
                                                                            class="x-form-trigger syno-ux-textfilter-trigger"
                                                                            style="visibility: hidden;"></button>
                                                                    </div>
                                                                    <div role="presentation"
                                                                        class="x-form-hidden-error-msg"></div>
                                                                </td>
                                                                <td class="x-toolbar-cell">
                                                                    <div class="x-form-display-field"
                                                                        style="width: 16px;">
                                                                    </div>
                                                                    <div role="presentation"
                                                                        class="x-form-hidden-error-msg"></div>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-noicon"
                                                                        style="width: auto; margin-left: 0px; height: 26px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button"
                                                                                class=" x-btn-text">手动安装</button></em></span>
                                                                </td>
                                                                <td class="x-toolbar-cell"><span cellspacing="0"
                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-noicon"
                                                                        style="width: auto; margin-left: 0px; height: 26px;"><em
                                                                            class=" x-unselectable"><button
                                                                                type="button" 
                                                                                class=" x-btn-text">设置</button></em></span>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    -->
                                                </td>
                                                <td class="x-toolbar-right" align="right">
                                                    <!-- 
                                                    <table cellspacing="0" class="x-toolbar-right-ct">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <table cellspacing="0">
                                                                        <tbody>
                                                                            <tr class="x-toolbar-right-row">
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                                <td>
                                                                    <table cellspacing="0">
                                                                        <tbody>
                                                                            <tr class="x-toolbar-extras-row">
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    -->
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="x-window-body x-border-layout-ct" style="width: 100%; height: 484px;">
                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="x-window-bl x-panel-nofooter">
                    <div class="x-window-br">
                        <div class="x-window-bc"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
    data() {
        return {
            resizablePinnedDetail:{
                detailMessageList: [
                    {
                        id:'0',
                        width:'1254px',
                        title:'套件中心',
                        spacialCls:'tjCenter',
                        cls:'',
                        titleImgUrl:'../../../../public/image/index/tjCenter.png',
                        display:'none',
                        zIndex:9053,
                        iconRestore: 'none',
                        iconMaximize: 'block'
                    },
                    {
                        id:'1',
                        width:'1150px',
                        title:'控制中心',
                        spacialCls:'controlCenter',
                        cls:'11111111',
                        titleImgUrl:'../../../../public/image/index/controlCenter.png',
                        display:'none',
                        zIndex:9053,
                        iconRestore: 'none',
                        iconMaximize: 'block'
                    },
                    {
                        id:'2',
                        width:'1010px',
                        title:'File Station',
                        spacialCls:'file',
                        cls:'',
                        titleImgUrl:'../../../../public/image/index/file.png',
                        display:'none',
                        zIndex:9053,
                        iconRestore: 'none',
                        iconMaximize: 'block'
                    },
                    {
                        id:'3',
                        width:'1010px',
                        title:'DSM 说明',
                        spacialCls:'question',
                        cls:'',
                        titleImgUrl:'../../../../public/image/index/question.png',
                        display:'none',
                        zIndex:9053,
                        iconRestore: 'none',
                        iconMaximize: 'block'
                    }
                ] 
            },
            defaultZIndex:9053,
            lastCheckIndex: -1,
            openWindowNum:0,
            detailMessageWidthList:[
                {
                    width:'1254px',
                },
                {
                    width:'1150px',
                },
                {
                    width:'1010px',
                },
                {
                    width:'1010px',
                }
            ]
        }
    },
    mounted(){
        this.$bus.on('clickShortcutItem',this.clickShortcutItem)
        this.$bus.on('clickMenuItem',this.clickMenuItem)

    },
    methods: {
        // 点击大菜单图标
        clickShortcutItem(obj){
            let {detailMessageIndex} = obj
            this.openDialogWindow(detailMessageIndex)
        },
        // 点击小菜单图标
        clickMenuItem(imgUrl){
            let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item =>{
                return item.titleImgUrl == imgUrl
            })
            this.openDialogWindow(detailMessageIndex)
        },
        // 打开弹出窗口
        openDialogWindow(detailMessageIndex){
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display = 'block'
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls = 'active-win'
            this.$bus.emit("changeFixWindowZIndex")
            if(this.lastCheckIndex == detailMessageIndex){
                return
            }
            this.resizablePinnedDetail.detailMessageList.forEach(item=>{
                item.cls = ''
            })
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls= 'active-win'
            this.defaultZIndex = this.defaultZIndex + 10
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex = this.defaultZIndex
            this.lastCheckIndex = detailMessageIndex
        },
        // 切换弹出窗口
        changeDialogWindow(imgUrl,menuIndex){
            // let detailMessageList = this.resizablePinnedDetail.detailMessageList.filter(item=>{
            //     return item.display == 'block'
            // })
            // detailMessageList = JSON.parse(JSON.stringify(this.arraySort (detailMessageList,'zIndex')))
            // if(this.resizablePinnedDetail.detailMessageList[menuIndex].title == detailMessageList[detailMessageList.length-1].title){
            //     return
            // }
            this.$bus.emit("changeDialogWindow",imgUrl)
            this.openDialogWindow(menuIndex)
        },
        // 打开DSM 说明
        openDSMWindow(){
            let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item =>{
                return item.title === 'DSM 说明'
            })
            this.openDialogWindow(detailMessageIndex)
            let imgUrl = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl
            let spacialCls = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].spacialCls
            let obj ={imgUrl,spacialCls}
            this.$bus.emit("changeDialogWindow",obj) 
        },
        // 最小化弹出框口
        minMizeWindow(detailMessageIndex){
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display = 'none'
            this.countOpenWindowNum()
            // if(this.openWindowNum == 1){
            //     this.defaultZIndex = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex
            //     this.$bus.emit("changeDialogWindow",this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl) 
            // }else{
                
            // }
            // let imgUrl = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl
            //     let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
            //         return item.zIndex == (this.defaultZIndex - 10) 
            //     })
            //     if(index != -1){
            //         this.defaultZIndex = this.resizablePinnedDetail.detailMessageList[index].zIndex
            //         this.$bus.emit("changeDialogWindow",this.resizablePinnedDetail.detailMessageList[index].titleImgUrl)
            //     }
            let detailMessageList = this.resizablePinnedDetail.detailMessageList.filter(item=>{
                return item.display == 'block'
            })
            detailMessageList = JSON.parse(JSON.stringify(this.arraySort (detailMessageList,'zIndex')))
            if(detailMessageList.length){
                this.defaultZIndex = this.defaultZIndex -10
                this.$bus.emit("changeDialogWindow",detailMessageList[detailMessageList.length-1].titleImgUrl)
            }
        },
        //最大化弹出窗口
        maxMizeWindow(detailMessageIndex){
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width = '100%'
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconRestore = 'block'
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconMaximize = 'none'
        },
        //恢复弹出窗口宽度
        restoreMizeWindow(detailMessageIndex){
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width = this.detailMessageWidthList[detailMessageIndex].width
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconRestore = 'none'
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].iconMaximize = 'block'
        },
        //关闭弹出窗口
        closeWindow(detailMessageIndex){
            this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display = 'none'
            let imgUrl = this.resizablePinnedDetail.detailMessageList[detailMessageIndex].titleImgUrl
            this.$bus.emit('closeDialogWindow',imgUrl)
            let detailMessageList = this.resizablePinnedDetail.detailMessageList.filter(item=>{
                return item.display == 'block'
            })
            detailMessageList = JSON.parse(JSON.stringify(this.arraySort (detailMessageList,'zIndex')))
            if(detailMessageList.length){
                this.defaultZIndex = this.defaultZIndex -10
                this.$bus.emit("changeDialogWindow",detailMessageList[detailMessageList.length-1].titleImgUrl)
            }
        } ,
        //统计打开的弹出窗口
        countOpenWindowNum(){
            this.openWindowNum = 0
            this.resizablePinnedDetail.detailMessageList.forEach(item=>{
                if(item.display === 'block'){
                    this.openWindowNum ++
                }
            })
            if(this.openWindowNum == 0){
                this.resizablePinnedDetail.detailMessageList.forEach(item=>{
                    item.zIndex = 9053
                })
                this.defaultZIndex = 9053
            }
        },
        // 按z-index 给menuItem排序
        arraySort (array,key){
            return array.sort(function(a,b){   
                var x=a[key];//如果要从大到小,把x,y互换就好
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0));
            });
        },
        // 移动弹出框窗口位置
        moveWindowPosition(e){
            console.log(e.target,e)
            var x = e.pageX;
            var y = e.pageY;
            console.log(x,y)
        
        }
    },
    components:{
    },
    name:'ResizablePinned', 

}
</script>