great_webui/src/views/officesale/mixins/selectList.js

export default {
    data() {
        return {
            /**  多选  */
            selectList: [],
            selectTabelList: [],
            multipleSelection_1: [],

            moveSelected: null,
            moveSelected1: null,
            flag: false,//是搜开启拖拽的标志
            oldLeft: 0,//鼠标按下时的left,top
            oldTop: 0,
            selectedList: [],//拖拽多选选中的块集合

            isToLeft: true,
            isToTop: true,

            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0,

            isMousemove: false,

            scrollTop: 0,
            scrollLeft: 0,
        }
    },
    mounted() {
        this.flag = false
        this.$refs.seatbox.addEventListener('mousemove', this.mousemoveFun);
        this.$refs.seatbox.addEventListener('mouseup', this.mouseupFun);
        this.moveSelected = document.getElementById('moveSelected')
        this.moveSelected1 = document.getElementById('sm-scroll-box')
    },
    methods: {
        // 鼠标按下时开启拖拽多选，将遮罩定位并展现
        mousedownFun(event) {
            console.log("鼠标按下!!!",event.target.scrollTop,event.target.scrollLeft)
            if(event.button != 0) return
            //this.selectedList = []
           // this.selectList = []
            
            this.flag=true;
            let offsetTop = this.moveSelected1.getBoundingClientRect().y
            let offsetLeft = this.moveSelected1.getBoundingClientRect().x 
            this.moveSelected.style.top=( event.pageY - offsetTop - 5 + this.screenTop )+'px';
            this.moveSelected.style.left=( event.pageX - offsetLeft - 5 + this.scrollLeft )+'px';
            this.oldLeft=event.pageX;
            this.oldTop=event.pageY;

            this.startX=event.pageX;
            this.startY=event.pageY;

           event.preventDefault(); // 阻止默认行为
           event.stopPropagation(); // 阻止事件冒泡
        },
        // 鼠标移动时计算遮罩的位置，宽 高
        mousemoveFun(event) {
            if(!this.flag) return;//只有开启了拖拽，才进行mouseover操作
            console.log("鼠标移动!!!",this.moveSelected.style.width,this.moveSelected.style.height)
            this.endX=event.pageX;
            this.endY=event.pageY;
            let offsetTop = this.moveSelected1.getBoundingClientRect().y
            let offsetLeft = this.moveSelected1.getBoundingClientRect().x 
            if(event.pageX<this.oldLeft){//向左拖
              this.isToLeft = true
              this.moveSelected.style.left=(event.pageX-offsetLeft + this.scrollLeft)+'px';
              this.moveSelected.style.width=(this.oldLeft-event.pageX)+'px';
            }else{
                this.isToLeft = false
              this.moveSelected.style.width=(event.pageX-this.oldLeft)+'px';
            }
            if(event.pageY<this.oldTop){//向上
              this.isToTop = true
              this.moveSelected.style.top=(event.pageY-offsetTop  + this.screenTop )+'px';
              this.moveSelected.style.height=(this.oldTop-event.pageY)+'px';
            }else{
                this.isToTop = false
              this.moveSelected.style.height=(event.pageY-this.oldTop)+'px';
            }
            if((this.moveSelected.style.width && Number(this.moveSelected.style.width.replace('px','')) > 10) ||
                (this.moveSelected.style.height && Number(this.moveSelected.style.height.replace('px','')) > 10)){
                this.isMousemove = true
            }
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        },
        //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
        mouseupFun(event) {
            console.log("鼠标抬起!!!")
            if(event.button != 0) return
            this.moveSelected.style.bottom=Number(this.moveSelected.style.top.split('px')[0])+Number(this.moveSelected.style.height.split('px')[0]) + 'px';
            this.moveSelected.style.right=Number(this.moveSelected.style.left.split('px')[0])+Number(this.moveSelected.style.width.split('px')[0])+'px';
            this.flag=false;
            if( this.isMousemove){
                this.getSelectItem()
            }else {
                // let id = event.srcElement.getAttribute('dragSelectId')
                // if(id){
                //     this.seatMapListKey.forEach((item1,index1)=>{
                //         this.seatMapList[item1.key].forEach((item,index)=>{
                //             if(id = item.id){
                //                 this.seatClick(this.seatMapList[item1.key][index])
                //                 this.seatMapList[item1.key][index].isSelect = !this.seatMapList[item1.key][index].isSelect
                //             }
                //         })
                //     })
                //     this.$forceUpdate()
                // }
            }
            this.isMousemove = false
            this.clearDragData();
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        },
        mouseleaveFun(event) {
            this.flag=false;
            this.moveSelected.style.width='0px';
            this.moveSelected.style.height='0px';
            this.moveSelected.style.top='0px';
            this.moveSelected.style.left='0px';
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        },

        clearDragData(){
            this.moveSelected.style.width='0px';
            this.moveSelected.style.height='0px';
            this.moveSelected.style.top='0px';
            this.moveSelected.style.left='0px';
            this.moveSelected.style.bottom='0px';
            this.moveSelected.style.right='0px';
        },

        /**  批量判断元素的位置  */
        getSelectItem(){
            let list = document.getElementsByClassName('seat-item-class')
            let listCopy = []
            let drawDialog = document.getElementById("moveSelected");
            // 获取div元素的坐标点
            let rect = drawDialog.getBoundingClientRect();
            for(let i = 0; i < list.length; i++) {
                let rect_div = list[i].getBoundingClientRect();
                //console.log("rect===",list[i].getAttribute('index'),rect_div.top,rect_div.left)
                if(rect.top < (rect_div.top + rect_div.height) && rect.bottom > (rect_div.bottom - rect_div.height) &&
                  rect.left < (rect_div.left + rect_div.width) && rect.right > (rect_div.right - rect_div.width)) {
                    listCopy.push(list[i].getAttribute("dragSelectId"));
                }
            }
            let listCopy1 = [] // 已选择的座位
            listCopy.forEach((item,index)=>{
                this.setList.forEach((item1,index1)=>{
                    if(item == item1.id ) {
                        listCopy1.push(item1)
                    }
                })
            })
            let flog = false;
            let seatTypeId = null
            let occupyStatus = listCopy1.length>0?listCopy1[0].occupyStatus:null
            for(let i = 0; i<listCopy1.length; i++) {
                let row = listCopy1[i]
                console.log("occupyStatus====",occupyStatus,row.occupyStatus)
                if(row.occupyStatus != occupyStatus) {
                    this.$message.error('不能同时选择不同状态的座位!!!');
                    flog = true
                    break;
                }
                
                occupyStatus = row.occupyStatus
                
                
                // if(row.occupyStatus == 0) {
                //     this.$message.error('不能选择已锁定的座位');
                //     flog = true
                //     break;
                // }
                if(row.isDisabled || row.status == 2) {
                    this.$message.error('不能选择已售或不可售座位!!!');
                    flog = true
                    break;
                }
            }
            if(flog){
                return
            }

            if(this.seatSelectListNo.length>0) {
                for(let i = 0; i<listCopy1.length; i++) {
                    let row = listCopy1[i]
                    if(row.occupyStatus != 0) {
                        this.$message.error('你已选择锁定座位,只能再选择被锁定的座位!!!');
                        flog = true
                        break;
                    }
                }
            }
            if(flog){
                return
            }

            if(this.seatSelectList.length>0) {
                for(let i = 0; i<listCopy1.length; i++) {
                    let row = listCopy1[i]
                    if(row.occupyStatus == 0) {
                        this.$message.error('此座已被锁定,请先解锁!!!');
                        flog = true
                        break;
                    }
                }
            }
            if(flog){
                return
            }

            listCopy1.forEach((item,index)=>{
                if(index == 0) {
                    seatTypeId = item.seatTypeId
                }else {
                    if(item.seatTypeId != seatTypeId) {
                        flog = true
                    }
                }
            })
            if(flog){
                this.$message.error('只能选同一类型的座位');
                return
            }
            listCopy1.forEach((item,index)=>{
                this.seatSelectList.forEach((item1,index1)=>{
                    if(item.seatTypeId != item1.seatTypeId) {
                        flog = true
                    }
                })
            })
            if(flog){
                this.$message.error('只能选同一类型的座位');
                return
            }

            listCopy.forEach((item,index)=>{
                this.seatMapListKey.forEach((item1,index1)=>{
                    this.seatMapList[item1.key].forEach((item,index)=>{
                        if(listCopy.includes(item.id)){
                            this.seatMapList[item1.key][index].isSelect = true
                        }
                    })
                })
            })
            let listCopy2 = []
            listCopy1.forEach((item,index)=>{
                let flag1 = false
                this.seatSelectList.forEach((item1,index1)=>{
                    if(item.id == item1.id) {
                        flag1 = true
                    }
                })
                if(!flag1){
                    listCopy2.push(item)
                }
            })

            if(occupyStatus == 0){
                this.seatSelectListNo = this.seatSelectListNo.concat(listCopy2)
            }else {
                this.seatSelectList = this.seatSelectList.concat(listCopy2)
            }
            
            this.$forceUpdate()
            console.log("listCopy===",listCopy)
            console.log("listCopy1===",listCopy1)
        },
        /**  清除全部已选 */
        clearSeatSelectListAll () {
            this.seatMapListKey.forEach((item1,index1)=>{
                this.seatMapList[item1.key].forEach((item,index)=>{
                    this.seatMapList[item1.key][index].isSelect = false
                })
            })
            this.seatSelectList = [] 
            this.seatSelectListNo = []
            this.$forceUpdate()
        },
        /** 滚动的位置  */
        scrollFun(event) {
            console.log("滚动===!!!",event.target.scrollTop,event.target.scrollLeft)
            this.screenTop = event.target.scrollTop
            this.scrollLeft = event.target.scrollLeft
        },

        /** 座位大小 拖动变化是  */
        scaleNumInput() {
            console.log("sfasdfsfd===")
            this.$refs.seatbox.removeEventListener('mousemove', this.mousemoveFun);
            this.$refs.seatbox.removeEventListener('mouseup', this.mouseupFun);
        },
        scaleNumChange() {
            console.log("sfasdfsfd11111===")
            this.$refs.seatbox.removeEventListener('mousemove', this.mousemoveFun);
            this.$refs.seatbox.removeEventListener('mouseup', this.mouseupFun);
            setTimeout(()=>{
                this.$refs.seatbox.addEventListener('mousemove', this.mousemoveFun);
                this.$refs.seatbox.addEventListener('mouseup', this.mouseupFun);
            },500)
        }
    },
    watch: {
        scaleNum(){
            this.scaleNumInput()
        }
    },
    destroyed() {
        if(this.$refs.seatbox) {
            this.$refs.seatbox.removeEventListener('mousemove', this.mousemoveFun);
            this.$refs.seatbox.removeEventListener('mouseup', this.mouseupFun);
        }
    },
}