great_service/src/views/venue/performanceHallMr/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,
        }
    },
    mounted() {
        this.moveSelected = document.getElementById('moveSelected')
        this.moveSelected1 = document.getElementById('sm-scroll-box')
    },
    methods: {
        // 鼠标按下时开启拖拽多选，将遮罩定位并展现
        mousedownFun(event) {
            if(event.button != 0) return
            this.selectedList = []
            this.selectList = []
            if(event.srcElement.getAttribute('dragSelectId')){
                console.log("鼠标开始的的元素=====",event.srcElement)
                let obj = {
                    Id: event.srcElement.getAttribute('dragSelectId'),
                    index: event.srcElement.getAttribute('dragSelectIndex'),
                    key: event.srcElement.getAttribute('dragSelectKey'),
                    current: event.srcElement.getAttribute('dragSelectCurrent'),
                }
                this.selectedList.push(obj)
            }
            this.flag=true;
            let offsetTop = this.moveSelected1.getBoundingClientRect().y
            let offsetLeft = this.moveSelected1.getBoundingClientRect().x 
            this.moveSelected.style.top=(event.pageY-offsetTop)+'px';
            this.moveSelected.style.left=(event.pageX-offsetLeft)+'px';
            this.oldLeft=event.pageX;
            this.oldTop=event.pageY;
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        },
        // 鼠标移动时计算遮罩的位置，宽 高
        mousemoveFun(event) {
            if(!this.flag) return;//只有开启了拖拽，才进行mouseover操作
            //console.log("经过的元素=====",event.srcElement)
            if(event.srcElement.getAttribute('dragSelectId')){
                let obj = {
                    Id: event.srcElement.getAttribute('dragSelectId'),
                    index: event.srcElement.getAttribute('dragSelectIndex'),
                    key: event.srcElement.getAttribute('dragSelectKey'),
                    current: event.srcElement.getAttribute('dragSelectCurrent'),
                }
                this.selectedList.push(obj)
            }
            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)+'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)+'px';
              this.moveSelected.style.height=(this.oldTop-event.pageY)+'px';
            }else{
                this.isToTop = false
              this.moveSelected.style.height=(event.pageY-this.oldTop)+'px';
            }
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        },
        //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
        mouseupFun(event) {
            if(event.button != 0) return
            if(event.srcElement.getAttribute('dragSelectId')){
                console.log("鼠标结束的的元素=====",event,event.srcElement)
                let obj = {
                    Id: event.srcElement.getAttribute('dragSelectId'),
                    index: event.srcElement.getAttribute('dragSelectIndex'),
                    key: event.srcElement.getAttribute('dragSelectKey'),
                    current: event.srcElement.getAttribute('dragSelectCurrent'),
                }
                this.selectedList.push(obj)
            }
            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.findSelected();
            this.flag=false;
            this.clearDragData();
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        },
        mouseleaveFun(event) {
            this.flag=false;
            this.moveSelected.style.width=0;
            this.moveSelected.style.height=0;
            this.moveSelected.style.top=0;
            this.moveSelected.style.left=0;
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        },
        findSelected(){
            let list = []
            if(this.selectedList && this.selectedList.length >= 2) {
                let firstObj = this.selectedList[0]
                let lastObj = this.selectedList[this.selectedList.length-1]
                this.tableData.forEach((item,index)=>{
                    if(!this.isToLeft&&!this.isToTop){ // 向右下
                        if(index>=firstObj.index && index<=lastObj.index) {
                            item[firstObj.key].forEach((item1,index1)=>{
                                if(index1>=firstObj.current && index1<=lastObj.current) {
                                    list.push(item1.tableId)
                                }
                            })
                        }
                    }else if(this.isToLeft&&!this.isToTop){ // 向左下
                        if(index>=firstObj.index && index<=lastObj.index) {
                            item[firstObj.key].forEach((item1,index1)=>{
                                if(index1<=firstObj.current && index1>=lastObj.current) {
                                    list.push(item1.tableId)
                                }
                            })
                        }
                    }else if(this.isToLeft&&this.isToTop){ // 向左上
                        if(index<=firstObj.index && index>=lastObj.index) {
                            item[firstObj.key].forEach((item1,index1)=>{
                                if(index1<=firstObj.current && index1>=lastObj.current) {
                                    list.push(item1.tableId)
                                }
                            })
                        }
                    }else if(!this.isToLeft&&this.isToTop){ // 向右上
                        if(index<=firstObj.index && index>=lastObj.index) {
                            item[firstObj.key].forEach((item1,index1)=>{
                                if(index1>=firstObj.current && index1<=lastObj.current) {
                                    list.push(item1.tableId)
                                }
                            })
                        }
                    }
                    
                })
            }else if(this.selectedList && this.selectedList.length == 1){
                list = this.selectedList[0].id
            }
            this.selectList = [...new Set(list)]
            console.log("e===",this.selectList)
            if(this.activeName=='select'){
                this.addSelectTabelList()
            }
        },
        findSelectedCopy(){
            return
            let blockList= document.getElementsByClassName('row-item');
            let selectedList = []
            for(let i=0;i<blockList.length;i++){
              //计算每个块的定位信息
            //   let left=blockList[i].offsetLeft;
            //   let right=blockList[i].style.width+left;
            //   let top=blockList[i].offsetTop;
            //   let bottom=blockList[i].style.height()+top;
            let left=$(blockList[i]).offset().left;
            let right=$(blockList[i]).width()+left;
            let top=$(blockList[i]).offset().top;
            let bottom=$(blockList[i]).height()+top;
              
              //判断每个块是否被遮罩盖住（即选中）
              let leftFlag=this.moveSelected.style.left.split('px')[0]<=left && left<=this.moveSelected.style.right.split('px')[0];
              let rightFlag=this.moveSelected.style.left.split('px')[0]<=right && right<=this.moveSelected.style.right.split('px')[0];
              let topFlag=this.moveSelected.style.top.split('px')[0]<=top && top<=this.moveSelected.style.bottom.split('px')[0];
              let bottomFlag=this.moveSelected.style.top.split('px')[0]<=bottom && bottom<=this.moveSelected.style.bottom.split('px')[0];
              if((leftFlag || rightFlag) && (topFlag || bottomFlag)){
                console.log("位置===",left,right,top,bottom)
                selectedList.push(blockList[i]);
              }
            }
            let list = []
            for(let i=0; i < selectedList.length; i++) {
                list.push(selectedList[i].getAttribute('dragSelectId'))
            }
            this.selectList = [...new Set(list)]
            console.log("e===",this.selectList)
            if(this.activeName=='select'){
                this.addSelectTabelList()
            }
            console.log("selectedList====",selectedList);
            console.log("list====",list);
        },
        clearDragData(){
            this.moveSelected.style.width=0;
            this.moveSelected.style.height=0;
            this.moveSelected.style.top=0;
            this.moveSelected.style.left=0;
            this.moveSelected.style.bottom=0;
            this.moveSelected.style.right=0;
        },
        /**  当前选择  开始   */
        /**  多选  */
        dragSelectChange(e){
            console.log("e===",e)
            if(e && e.div) {
                let  list = JSON.parse(JSON.stringify(e.div))
                this.selectList = [...new Set(list)]
                console.log("e===",this.selectList)
                if(this.activeName=='select'){
                    this.addSelectTabelList()
                }
            }
            
        },
        dragLostItemChange(e){
            console.log("最后一个===",e)
        },
        reSelect(e) {
            console.log("reSelect===",e)
        },
        addSelectTabelList(){
            if(this.selectList && this.selectList.length > 0) {
                let listTabel = []
                for(let i=0;i<this.selectList.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){

                        if(this.selectList[i] == this.tableDataAll[j].styleCss.id){
                            listTabel.push({
                                ...this.tableDataAll[j],
                            })
                            break;
                        }    
                    }
                }
                console.log("listTabel=====",listTabel)
                this.selectTabelList = JSON.parse(JSON.stringify(listTabel))
            }else { 
                this.selectTabelList = []
            }
        },
        //  清除已选
        delSelectTabelList(){
            this.selectList = []
            this.selectTabelList = []
        },
        /**  当前选择  结束   */

        /**  批量修改   */

        // 座位状态
        selectBatchSetaDisableFun() {
            let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
            for(let i=0;i<this.selectTabelList.length;i++){
                for(let j=0;j<this.tableDataAll.length;j++){
                    if(this.selectTabelList[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                        listTabel[j] = {
                            ...this.tableDataAll[j],
                            status: this.formAll.status,
                        }
                        break;
                    }    
                }
            }
            this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            console.log("this.tableDataAll=====",this.tableDataAll)
            // this.batchTableList = JSON.parse(JSON.stringify(this.tableDataAll))
            this.formDialogVisible = false
            this.handleQuery()
            this.dataProcess()
        },
        //批量修改座位类型 
        selectBatchSetaTypeFun() {
            let color = ''
            let seatLabel = ''
            let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
            this.seatTypeList.forEach((item,index)=>{
                if(this.formAll.seatTypeId == item.id) {
                    color = item.color
                    seatLabel = item.name 
                }
            })
            for(let i=0;i<this.selectTabelList.length;i++){
                for(let j=0;j<this.tableDataAll.length;j++){
                    if(this.selectTabelList[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                        listTabel[j] = {
                            ...this.tableDataAll[j],
                            seatLabel: seatLabel,
                            color: color,// 座位类型对应的颜色
                            seatTypeId: this.formAll.seatTypeId,
                        }
                        break;
                    }    
                }
            }
            this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            console.log("this.tableDataAll=====",this.tableDataAll)
            // this.batchTableList = JSON.parse(JSON.stringify(this.tableDataAll))
            this.formDialogVisible = false
            this.dataProcess()
            this.addSelectTabelList()
        },  
        // 批量修改名称
        selectBatchSetaNameFun() {
            if(this.formAll.seatWay == 1){ // 相同的
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                for(let i=0;i<this.selectTabelList.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(this.selectTabelList[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                name: this.formAll.name
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }else if(this.formAll.seatWay == 2){
                let name = (this.formAll.name1?this.formAll.name1:'') + '${row}' + (this.formAll.name?this.formAll.name:'') + '${col}' + (this.formAll.name2?this.formAll.name2:'')
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                for(let i=0;i<this.selectTabelList.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(this.selectTabelList[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                name: name.replace('${row}',this.tableDataAll[j].rowNo).replace('${col}',this.tableDataAll[j].columnNo)
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }
            this.formDialogVisible = false
            this.dataProcess()
            this.addSelectTabelList()
        },
        // 批量修改优先级
        selectBatchSetaPriorityFun(){
            if(this.formAll.seatPriorityWay == 1){
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                for(let i=0;i<this.selectTabelList.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(this.selectTabelList[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                priority: this.formAll.setaPriorityNum
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }else{
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                let listSelect = JSON.parse(JSON.stringify(this.selectTabelList))
                if(this.formAll.seatPriorityPosition == 2) {
                    listSelect.reverse()
                }
                console.log("fsafsdfa=====",listSelect)
                let num = Number(this.formAll.setaPriorityNum)
                for(let i=0;i<listSelect.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(listSelect[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                priority: num
                            }
                            if(this.formAll.seatPriorityWay == 2){
                                num = num + 1
                            }else if(this.formAll.seatPriorityWay == 3){
                                num = num - 1
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }
            this.formDialogVisible = false
            this.dataProcess()
            this.addSelectTabelList()
        },
        // 批量修改出票顺序
        selectTicketingSequenceFun(){
            console.log("this.formAll=====",this.formAll)
            if(this.formAll.printSortIdType == 1) {
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                for(let i=0;i<this.selectTabelList.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(this.selectTabelList[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                printSortId: '按优先级出票'
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }else if(this.formAll.seatPriorityWay == 1){
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                for(let i=0;i<this.selectTabelList.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(this.selectTabelList[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                printSortId: this.formAll.setaPriorityNum
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }else{
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                let listSelect = JSON.parse(JSON.stringify(this.selectTabelList))
                if(this.formAll.seatPriorityPosition == 2) {
                    listSelect.reverse()
                }
                console.log("fsafsdfa=====",listSelect)
                let num = Number(this.formAll.setaPriorityNum)
                for(let i=0;i<listSelect.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(listSelect[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                printSortId: num
                            }
                            if(this.formAll.seatPriorityWay == 2){
                                num = num + 1
                            }else if(this.formAll.seatPriorityWay == 3){
                                num = num - 1
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }
            this.formDialogVisible = false
            this.dataProcess()
            this.addSelectTabelList()
        },
    },
}