1. 修复

src/views/team/applicationMr/dialog/applicationDetails.vue

@@ -252,7 +252,7 @@ export default {
       if(list && list.length > 0) {
         let listCopy = {}
         list.forEach(item => {
-          item.isDisabled = (item.occupyStatus != null && (item.occupyStatus == 0 || item.occupyStatus == 1) ? true : false); // 座位是否已被选择
+          item.isDisabled = item.status!=1||((item.occupyStatus != null && (item.occupyStatus == 0 || item.occupyStatus == 1)) ? true : false); // 座位是否已被选择
           item.isSelect = false;
           if(!listCopy['key_'+item.rowNo]) {
             listCopy['key_'+item.rowNo] = [item]

src/views/venue/performanceHallMr/mixins/selectList.js

@@ -1,57 +1,211 @@
-import { cos } from "mathjs";
-
- //定义变量储存div的宽高
- var obj_w, obj_h;
- //定义一个变量判断是否执行移动函数
- var mouseDown = false;
 export default {
     data() {
         return {
             /**  多选  */
             selectList: [],
             selectTabelList: [],
-            multipleSelection_1: []
+            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: {
-        //鼠标按下函数
-        downDiv(obj) {
-            //获取div的宽高
-            obj_w = obj.offsetWidth;
-            obj_h = obj.offsetHeight;
-            //鼠标
-            var e = event || window.event;
-            //e.clientX/Y 是获取鼠标相对浏览器的位置；将div中心自动居中到鼠标
-           
-            let left = (e.clientX - obj_w / 2) + "px";
-            let top = (e.clientY - obj_h / 2) + "px";
-            console.log('鼠标按下===',mouseDown,left, top)
-            //按下时为ture,松开时为false，以判断是否执行执行mouveDiv
-            mouseDown = true;
-        
+        // 鼠标按下时开启拖拽多选，将遮罩定位并展现
+        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(); // 阻止事件冒泡
         },
-        
-        //鼠标移动函数
-        moveDiv(obj) {
-            obj_w = obj.offsetWidth;
-            obj_h = obj.offsetHeight;
-            var e = event || window.event;
-            // console.log(e.clientX, e.clientY);
-            // console.log(obj_w, obj_h);
-            if (mouseDown) {
-                obj.style.left = (e.clientX - obj_w / 2) + "px";
-                obj.style.top = (e.clientY - obj_h / 2) + "px";
-                console.log('鼠标移动===',obj.style.left, obj.style.top)
-            }
-        
+        // 鼠标移动时计算遮罩的位置，宽 高
+        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(); // 阻止事件冒泡
         },
-        
-        //鼠标松开函数
-        upDiv(obj) {
-            mouseDown = false;
-            console.log('鼠标鼠标所开===',mouseDown)
+        //鼠标抬起时计算遮罩的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){

src/views/venue/performanceHallMr/model/seatManagementTable.vue

@@ -25,20 +25,29 @@
                 </div>
             </div>
         </div>
-        <div class="sm-box">
-            <!-- v-dragSelect="dragSelectObj" -->
-            <div class="sm-scroll-box"
-            @mousedown="downDiv" 
-            @mousemove="moveDiv" 
-            @mouseup="upDiv"
-            >
-                <el-table
-                    v-dragSelect="{
+        <div class="sm-box"
+        >
+            <!-- 
+                v-dragSelect="{
                         selectClass: ['.row-item'],
                         change: dragSelectChange,
                         lostItem: dragLostItemChange,
                         reSelect: reSelect,
-                    }"
+                }"
+             -->
+             <!-- @mousedown="mousedownFun"
+            @mousemove="mousemoveFun"
+            @mouseup="mouseupFun"
+            @mouseleave="mouseleaveFun" -->
+            <div 
+            class="sm-scroll-box"
+            id="sm-scroll-box"
+            @mousedown="mousedownFun"
+            @mousemove="mousemoveFun"
+            @mouseup="mouseupFun"
+            @mouseleave="mouseleaveFun"
+            >
+                <el-table
                     :data="tableData"
                     width="100%"
                     height="100%"
@@ -65,7 +74,7 @@
                         v-if="tableHeader.length!=0"
                         :width="50">
                             <template slot-scope="scope">
-                                <span style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">{{ scope.$index + 1 }}#</span>
+                                <span style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;cursor: pointer;">{{ scope.$index + 1 }}#</span>
                             </template>
                         </el-table-column>
                         <el-table-column
@@ -98,21 +107,51 @@
                                 :key="item1.styleCss.id"
                                 dragSelectType="div"
                                 :dragSelectId="item1.styleCss.id"
+                                :dragSelectIndex="scope.$index"
+                                :dragSelectKey="item.key"
+                                :dragSelectCurrent="index1"
                                 :style="{
                                     backgroundColor: item1.status == 1 ? item1.color?item1.color: '#fff': '#ccc',
                                 }"
                                 @contextmenu="(e)=>{e.preventDefault();openFormDialogVisible('singleEdit',item1)}"
                                 >
-                                    <div>
-                                        <i style="line-height: 15px;"></i>
-                                        <i style="line-height: 15px;">{{ item1.name ? item1.name : '未命名' }}</i>
-                                        <i style="line-height: 15px;white-space: nowrap;">{{ item1.rowNo+ '-' +item1.columnNo }} ({{ item1.priority ? item1.priority : '-'  }})</i>
+                                    <div
+                                    style="user-select: none;"
+                                    :dragSelectId="item1.styleCss.id"
+                                    :dragSelectIndex="scope.$index"
+                                    :dragSelectKey="item.key"
+                                    :dragSelectCurrent="index1"
+                                    >
+                                        <i 
+                                        style="line-height: 15px;"
+                                        :dragSelectId="item1.styleCss.id"
+                                        :dragSelectIndex="scope.$index"
+                                        :dragSelectKey="item.key"
+                                        :dragSelectCurrent="index1"
+                                        ></i>
+                                        <i 
+                                        style="line-height: 15px;"
+                                        :dragSelectId="item1.styleCss.id"
+                                        :dragSelectIndex="scope.$index"
+                                        :dragSelectKey="item.key"
+                                        :dragSelectCurrent="index1"
+                                        >{{ item1.name ? item1.name : '未命名' }}</i>
+                                        <i 
+                                        style="line-height: 15px;white-space: nowrap;"
+                                        :dragSelectId="item1.styleCss.id"
+                                        :dragSelectIndex="scope.$index"
+                                        :dragSelectKey="item.key"
+                                        :dragSelectCurrent="index1"
+                                        >{{ item1.rowNo+ '-' +item1.columnNo }} ({{ item1.priority ? item1.priority : '-'  }})</i>
                                     </div>   
                                 </div>
                             </div>
                         </template>
                         </el-table-column>
                 </el-table>
+                <!-- 鼠标拖拽出的遮罩 （定位为 position:absolute）-->
+                <!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
+                <div id="moveSelected"></div>
             </div>
             <!--  编辑页  -->
             <div class="table-tool">
@@ -630,6 +669,15 @@ export default {
             this.multipleSelection_1 = []   
 
             this.availableSeat = 0
+
+            this.flag = false//是搜开启拖拽的标志
+            this.oldLeft = 0//鼠标按下时的lefttop
+            this.oldTop = 0
+            this.selectedList = []//拖拽多选选中的块集合
+
+            this.isToLeft = true
+            this.isToTop = true
+
         },
         /**  初始化数据  */
         async initData(row,list,type){
@@ -670,7 +718,7 @@ export default {
             let list1 = JSON.parse(JSON.stringify(this.tableData))
             for(let i = 0;i<this.rowAll;i++) {
                 list1[i] = {
-                    tableId: 'A_'+ i, // this.tableHeader[0].key + "_"+i+"_"+j
+                    tableId: 'A_'+(i+1), // this.tableHeader[0].key + "_"+i+"_"+j
                     A: []
                 }
                 for(let j = 0; j<list.length;j++) {
@@ -863,10 +911,11 @@ export default {
         },
         /**  点击某个单元格   */
         cellDblclick(row, column, cell, event){
+            console.log("row, column, cell, event===",row, column, cell, event)
             this.currentRow = row.index + 1
             this.currentRegion = column.index
-            this.currentLabel = column.label
-            this.currentProperty = column.property
+            this.currentLabel = this.tableHeader[0].title //column.label
+            this.currentProperty = this.tableHeader[0].key //column.property
             console.log('this.tableData===', this.tableData)
             console.log("this.tableData111=====",this.currentRow,this.currentProperty,this.tableData[this.currentRow-1][this.currentProperty])
 
@@ -1452,6 +1501,7 @@ export default {
     border: 1px solid #ccc;
     box-sizing: border-box;
     background-color: aqua;
+    position: relative;
     .row-item-box {
         border: 1px dashed #ccc;
         width: 100%;
@@ -1806,5 +1856,12 @@ export default {
     }
 }
 
-
+#moveSelected{
+    position:absolute;
+    background-color: blue;
+    opacity:0.3;
+    border:1px dashed #d9d9d9;
+    top:0;
+    left:0;
+}
 </style>

src/views/venue/venueMr/dialog/addAndEdit.vue

@@ -81,14 +81,14 @@
           />
         </el-form-item>
         <el-form-item label="容纳人数" prop="capacityNum">
-          <el-input-number 
+          <el-input 
+          type="number"
           v-model="form.capacityNum"  
           placeholder="容纳人数" 
-          style="width: 100%;text-align: left;" 
           clearable 
           :disabled="openType == 'see'" 
-          :controls="false" :min="-10000000" :max="10000000">
-          </el-input-number>
+          :controls="false">
+          </el-input>
         </el-form-item>
         <el-form-item label="场馆位置" prop="address">
           <span>{{form.address}}</span>
@@ -161,6 +161,15 @@ export default {
         callback();
       }
     };
+    var capacityNumFun = (rule, value, callback) => {
+      console.log("value====",value,value && value.toString().length)
+      let reg = /^1[23456789]\d{9}$/;
+      if (value && value.toString().length>10) {
+        callback(new Error('输入长度不能大于10'));
+      } else {
+        callback();
+      }
+    };
     return {
       amapVisible: false,
       title: "编辑",
@@ -185,7 +194,10 @@ export default {
           { validator: isPhoneService, trigger: 'blur' }
         ],
         address: [{ required: true, message: "请选择场馆位置", trigger: ["change","blur"] }],
-        capacityNum: [{ required: false, message: "请输入容纳人数", trigger: ["change","blur"] }],
+        capacityNum: [
+          { required: false, message: "请输入容纳人数", trigger: ["change","blur"] },
+          { validator: capacityNumFun, trigger: ["change","blur"] }
+        ],
       },
       uploadObj: {
         url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",