1. 新增可多选

src/views/officesale/mixins/selectList.js

@@ -0,0 +1,273 @@
+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
+            for(let i = 0; i<listCopy1.length; i++) {
+                let row = listCopy1[i]
+                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
+            }
+            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)
+                }
+            })
+            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.$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);
+        }
+    },
+}

src/views/officesale/ticketingSales.vue

@@ -73,7 +73,12 @@
       <div class="seat-tool-box">
         <span class="demonstration">座位大小</span>
         <div class="seat-tool-box-slider">
-            <el-slider v-model="scaleNum" :min="30" :max="100"></el-slider>
+            <el-slider 
+            v-model="scaleNum" 
+            :min="30" 
+            :max="100"
+            @change="scaleNumChange"
+            ></el-slider>
         </div>
         <div style="display: flex;margin-left: 20px;" v-if="seatMapList&&JSON.stringify(seatMapList) != '{}'">
             <div>各类型座位的剩余数量：</div>
@@ -88,13 +93,27 @@
       </div>
       <div class="seat-box" :style="{'--scaleNum': scaleNum/100}">
         <!-- 选择座位  -->
-        <div class="seat-list-box" v-loading="loading">
+        <div 
+        class="seat-list-box" 
+        
+        v-loading="loading">
             <!--  座位排版  -->
-            <div  id="seatbox-me" ref="seatbox" class="dialog">
-                <div class="dialog-box" :style="{width: width*(scaleNum/100) + 'px', margin: justifyContent ? 'auto' : 'unset'}">
+            <div  
+            id="sm-scroll-box" 
+            ref="seatbox" 
+            class="dialog"
+            @mousedown="mousedownFun"
+            @mouseleave="mouseleaveFun"
+            @scroll="scrollFun"
+            >
+                <div 
+                class="dialog-box" 
+                :style="{width: width*(scaleNum/100) + 'px', margin: justifyContent ? 'auto' : 'unset'}"
+                >
                     <div 
                     style="width: 100%;position: absolute;"
-                    class="seat-box-class clearfix" v-if="seatMapList"
+                    class="seat-box-class clearfix" 
+                    v-if="seatMapList"
                     >
                             <div
                            
@@ -108,23 +127,33 @@
                                 v-for="(item, index) in seatMapList[item1.key]" 
                                 :style="{backgroundColor: item.color ? item.color : 'none'}"
                                 @click.stop="seatClick(item)" 
+                                :dragSelectId="item.id"
+                                :index="item1.key +'_'+ index"
                                 :key="index">
-                                    <p class="text-class">{{ item.status != 1 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
+                                    <p 
+                                    class="text-class"
+                                    >{{ item.status != 1 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
                                 </div>
                             </div>
                     </div>
                 </div>
                 
+
+                <!-- 鼠标拖拽出的遮罩 （定位为 position:absolute）-->
+                <!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
+                <div id="moveSelected"></div>
             </div>
             <div style="margin-top: 5px; margin-left: 30px;display: flex;">
                 <div style="flex-shrink: 0;">
                     已勾选：{{ seatSelectList.length }}个座位
+                    <el-button size="mini" type="warning"  @click="clearSeatSelectListAll">清空已选座位</el-button>
                 </div>
                 <div style="width: 100%;display: flex;justify-content: center;height: 30px;">
                     <el-button size="mini" type="warning" :loading="lockOrUnLockLoading" @click="lockOrUnLockFun(seatSelectList,0)">锁定</el-button>
                     <el-button size="mini" type="primary" @click="increaseViewersFun">预约</el-button>
                 </div>
             </div>
+            
         </div>
         <div class="seat-select-box">
             <div class="seat-select-box-top">
@@ -174,11 +203,13 @@
  import increaseViewers from "./model/increaseViewers"
  import moment from "moment"
  import { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
-  export default {
+ import selectListMixin from "./mixins/selectList"
+ export default {
     name: "TicketingSales1",
     components: {
         increaseViewers
     },
+    mixins: [selectListMixin],
     data() {
       return {
         // 遮罩层
@@ -192,7 +223,7 @@
         },
         rules: {
             auditoriumId: [
-                { required: true, message: '请选择选择演出厅', trigger: ['blur','change'] }
+                { required: true, message: '请选择演出厅', trigger: ['blur','change'] }
             ],
             performDate: [
                 { required: true, message: '请选择时间', trigger: ['blur','change'] }
@@ -210,7 +241,7 @@
         goodsPageListS: [], // 票务
         goodsPageListSAll: [], // 票务全部
         setList: [],
-        seatMapList: [],
+        seatMapList: {},
         seatMapListKey: [], // key
         seatSelectList: [],
 
@@ -284,6 +315,7 @@
                 param.status  = 1;
                 let res = await merchantPerformTimeList(param)
                 if(res.code == 200){
+                    console.log('merchantPerformTimeListS',res.data.rows);
                     this.merchantPerformTimeListS = res.data.rows
                 }
             } catch (error) {
@@ -332,6 +364,8 @@
             try {
                 this.loading = true
                 this.performId = ''
+                this.screenTop = 0
+                this.scrollLeft = 0
                 if(type) { // 是否清除已选
                     this.seatSelectList = []
                 }
@@ -399,7 +433,7 @@
                 this.width = 70*flog
                 this.$nextTick(()=>{
                     if(this.$refs.seatbox) {
-                        var ele = document.getElementById('seatbox-me');
+                        var ele = this.$refs.seatbox
                         console.log(ele.getBoundingClientRect().width); // 100
                         if(this.width<ele.getBoundingClientRect().width) {
                             this.justifyContent = true
@@ -500,7 +534,7 @@
         handleQuery() {
             this.$refs.queryForm.validate((valid) => {
             if (valid) {
-                this.querySeatListFun();
+                this.querySeatListFun(true);
             } else {
                 console.log('error submit!!');
                 return false;
@@ -516,11 +550,12 @@
             this.seatMapList = {}
             this.seatList = []
             this.handleQuery();
+
         },
 
         // 座位点击事件
         seatClick(row) {
-            console.log(row)
+            console.log("是的发给我大是个的风格====",row)
             if(row.occupyStatus == 0){
                 console.log("weqwrwerewrer")
                 this.$confirm('此座已被锁定,请先解锁', '提示', {
@@ -556,23 +591,29 @@
                         }
                     })
                 }
-                this.$forceUpdate()
+                //this.$forceUpdate()
             }
             
         },
         /** 删除已选座位  */
         delSeatSelect(row){
-            row.isSelect = !row.isSelect
-            if(row.isSelect){
-                this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
-            }else {
-                let list = JSON.parse(JSON.stringify(this.seatSelectList))
-                list.forEach((item,index)=>{
-                    if(item.id == row.id) {
-                        this.seatSelectList.splice(index, 1)
-                    }
-                })
-            }
+            // row.isSelect = !row.isSelect
+            // if(row.isSelect){
+            //     this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
+            // }else {
+            //     let list = JSON.parse(JSON.stringify(this.seatSelectList))
+            //     list.forEach((item,index)=>{
+            //         if(item.id == row.id) {
+            //             this.seatSelectList.splice(index, 1)
+            //         }
+            //     })
+            // }
+            let list = JSON.parse(JSON.stringify(this.seatSelectList))
+            list.forEach((item,index)=>{
+                if(item.id == row.id) {
+                    this.seatSelectList.splice(index, 1)
+                }
+            })
             Object.keys(this.seatMapList).forEach((item1,index)=>{
                 this.seatMapList[item1].forEach((item,index)=>{
                     if(item.id == row.id) {
@@ -747,7 +788,7 @@
     overflow: auto;
     border-radius: 10px;
     border: 1px  solid #323333;
-
+    position: relative;
     .dialog-box {
         position: relative;
     }
@@ -842,6 +883,7 @@
         user-select: none;
         // transform-origin: 50% 50%;
         // transform: scale(var(--scaleNum));
+        z-index: 999;
         &:hover{
           opacity: 0.6;
         }
@@ -856,4 +898,13 @@
       }
     }
   }
+
+  #moveSelected{
+    position:absolute;
+    background-color: blue;
+    opacity:0.3;
+    border:1px dashed #d9d9d9;
+    top:0;
+    left:0;
+}
   </style>