1. 新增和优化

src/layout/components/AppMain.vue

@@ -42,7 +42,7 @@ export default {
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - 110px);
   }
 
   .fixed-header + .app-main {

src/views/officesale/ticketingSales.vue

@@ -542,7 +542,7 @@
                     }
                 })
                 if(flog){
-                    this.$message.error('只能选同一类型得座位');
+                    this.$message.error('只能选同一类型的座位');
                     return
                 }
                 row.isSelect = !row.isSelect

src/views/order/groupBuyingMr/index.vue

@@ -55,7 +55,7 @@
           <el-option
             v-for="dict in dict.type.order_status_type"
             :key="dict.value"
-            :label="dict.name"
+            :label="dict.label"
             :value="dict.value"
           />
         </el-select>

src/views/order/viewers/dialog/details.vue

@@ -105,6 +105,7 @@
             </el-table-column>
             <el-table-column label="核销时间" align="center" prop="qrcodeUseTime" />
             <el-table-column label="座位信息" align="center" prop="seatName" />
+            <el-table-column label="座位类型" align="center" prop="seatTypeName" />
             <el-table-column label="人员类别" align="center">
               <template slot-scope="scope">
                 <dict-tag :options="dict.type.personnel_type" :value="scope.row.identity"/>

src/views/team/accountDetails/index.vue

@@ -125,7 +125,10 @@
       /** 查询列表 */
       getList() {
         this.loading = true;
-        pageList(this.addDateRange(this.queryParams, this.dateRange))
+        pageList(this.addDateRange({
+          ...this.queryParams,
+          balanceType: 1,
+        }, this.dateRange))
         .then(response => {
             this.dataList = response.data.rows;
             this.dataList.forEach(item =>{

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

@@ -79,7 +79,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>
@@ -94,13 +99,21 @@
         </div>
         <div class="seat-box" :style="{'--scaleNum': scaleNum/100}">
           <!-- 选择座位  -->
-          <div class="seat-list-box">
+          <div 
+          class="seat-list-box">
               <!--  座位排版  -->
-              <div  id="seatbox-me" ref="seatbox" class="dialogss">
+              <div  
+              id="sm-scroll-box_1" 
+              ref="seatbox" 
+              class="dialogss"
+              @mousedown="mousedownFun"
+              @mouseleave="mouseleaveFun"
+              >
                   <div class="dialogss-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,25 +121,39 @@
                               v-for="(item1, index1) in seatMapListKey" 
                               :key="item1.key"
                               >
+                                  <!-- @click.stop="seatClick(item)"   -->
                                   <div 
-                                  class="seat-item-class" 
+                                  class="seat-item-class seat-item-class_1" 
                                   :class="setSeatClass(item)"
                                   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"
+                                      :dragSelectId="item.id"
+                                      :index="item1.key +'_'+ index"
+                                      >{{ item.status != 1 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
                                   </div>
                               </div>
                       </div>
                   </div>
                   
+
+                  <!-- 鼠标拖拽出的遮罩 （定位为 position:absolute）-->
+                <!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
+                <div id="moveSelected_1"></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>
+
+              
           </div>
         </div>
       </div>
@@ -201,7 +228,7 @@
       <!--  座位排版  -->
       <div class="dialog">
         <div class="seat-box-class1 clearfix" v-if="seatMapList && seatMapList.length > 0">
-          <div class="seat-item-class" :class="item.isDisabled ? 'disabled-class' : item.isSelect ? 'select-class' : ''" v-for="(item, index) in seatMapList" @click.stop="seatClick(item)" :key="index">
+          <div class="seat-item-class" :class="item.isDisabled ? 'disabled-class' : item.isSelect ? 'select-class' : ''" v-for="(item, index) in seatMapList" @click="seatClick(item)" :key="index">
             <p class="text-class">{{item.name ? item.name : (item.rowNo + '排' + item.columnNo + '座')}}</p>
           </div>
         </div>
@@ -230,6 +257,7 @@
 import { getSelectById, teamApplyAudit, querySeatList } from '@/api/team/applicationMr'
 import { updateStatus } from '@/api/team/ticketMr'
 import { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
+import selectListMixin from "../mixins/selectList"
 export default {
   name: "applicationDetails",
   props: {
@@ -238,6 +266,7 @@ export default {
       default: () => [],
     },
   },
+  mixins: [selectListMixin],
   data() {
     return {
       title: "编辑",
@@ -310,13 +339,17 @@ export default {
       this.querySeatListS = [];
       this.setList = [];
       this.seatSelectList = [];
+      this.flag = false
+      this.isMousemovs = false
       if(type) {
         this.detailsType = true
         this.title = '审核'
+        
       } else {
         this.detailsType = false
         this.title = '详情'
       }
+      
       this.getSelectByIdApi(obj);
     },
     /** 获取详情 */
@@ -326,15 +359,20 @@ export default {
         let res = await getSelectById(id)
         this.details = {}
         this.details = res.data;
-        let res1 = await querySeatList({
-          auditoriumId: this.applyMap.auditoriumId,
-          //seatTypeId: this.applyMap.seatTypeId,
-          timeId: this.applyMap.performTimeId,
-        })
-        this.querySeatListS = res1.data;
-        this.setList = res1.data;
-        if(this.setList && this.setList.length > 0) {
-          this.setSeatMapListCopy(this.setList);
+        if(this.detailsType){
+          let res1 = await querySeatList({
+            auditoriumId: this.applyMap.auditoriumId,
+            //seatTypeId: this.applyMap.seatTypeId,
+            timeId: this.applyMap.performTimeId,
+          })
+          this.querySeatListS = res1.data;
+          this.setList = res1.data;
+          if(this.setList && this.setList.length > 0) {
+            this.setSeatMapListCopy(this.setList);
+          }
+          this.$nextTick(()=>{
+            this.scaleNumChange()
+          })
         }
         this.initLoading = false
       } catch (error) {
@@ -390,35 +428,55 @@ export default {
       }
     },
     // 座位点击事件
-    seatClickCopy(row) {
-      if(row.isDisabled){
-        return false
-      }
-      if(this.seatSelectList.length >= this.details.viewersList.length ){
-        if(row.isSelect) {
-          let indexs = null;
-          this.seatSelectList.forEach((item, index) =>{
-            if(item.id == row.id){
-              indexs = index;
+    seatClickCopy(rowCopy) {
+      let row = JSON.parse(JSON.stringify(rowCopy))
+      console.log("row111===",row)
+            if(row.occupyStatus == 0){
+                console.log("weqwrwerewrer")
+                this.$confirm('此座已被锁定,请先解锁', '提示', {
+                    confirmButtonText: '关闭',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    //this.lockOrUnLockFun([row],1)
+                }).catch((error) => {
+                    console.log("error====",error)
+                });
+            }else if(row.isDisabled || row.status == 2){
+                return false
+            }else {
+                if(this.applyMap.seatTypeId != row.seatTypeId){
+                    this.$message.error('只能选同一类型的座位');
+                    return false
+                }
+                row.isSelect = !row.isSelect
+                if(row.isSelect){
+                  if(this.seatSelectList.length >= this.details.viewersList.length ){
+                    this.$message.error("观影人数限制" + this.details.viewersList.length + "人!");
+                    return false
+                  }
+                  this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
+                }else {
+                  let indexs = null;
+                    this.seatSelectList.forEach((item, index) =>{
+                      if(item.id == row.id){
+                        indexs = index;
+                      }
+                    })
+                    if(indexs != null) {
+                      this.seatSelectList.splice(indexs, 1)
+                    }
+                }
+                
+                //this.seatSelectList = this.setList.filter(item => item.isSelect);
+                console.log("this.seatSelectList===",this.seatSelectList)
+                //this.$forceUpdate()
+                return true
             }
-          })
-          if(indexs != null) {
-            row.isSelect = !row.isSelect;
-            this.seatSelectList.splice(indexs, 1)
-          }
-        } else {
-          this.$message.error("观影人数限制" + this.details.viewersList.length + "人!");
-        }
-        return false
-      }
-      row.isSelect = !row.isSelect
-      this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
-      //this.seatSelectList = this.setList.filter(item => item.isSelect);
-      console.log("this.seatSelectList===",this.seatSelectList)
-      this.$forceUpdate()
+            
     },
     seatClick(row) {
-            console.log(row)
+            console.log("row===",row)
             if(row.occupyStatus == 0){
                 console.log("weqwrwerewrer")
                 this.$confirm('此座已被锁定,请先解锁', '提示', {
@@ -434,7 +492,7 @@ export default {
                 return false
             }else {
                 if(this.applyMap.seatTypeId != row.seatTypeId){
-                    this.$message.error('只能选同一类型得座位');
+                    this.$message.error('只能选同一类型的座位');
                     return
                 }
                 if(this.seatSelectList.length >= this.details.viewersList.length ){
@@ -455,7 +513,19 @@ export default {
                   return false
                 }
                 row.isSelect = !row.isSelect
-                this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
+                if(row.isSelect){
+                  this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
+                }else {
+                  let indexs = null;
+                    this.seatSelectList.forEach((item, index) =>{
+                      if(item.id == row.id){
+                        indexs = index;
+                      }
+                    })
+                    if(indexs != null) {
+                      this.seatSelectList.splice(indexs, 1)
+                    }
+                }
                 //this.seatSelectList = this.setList.filter(item => item.isSelect);
                 console.log("this.seatSelectList===",this.seatSelectList)
                 this.$forceUpdate()
@@ -591,7 +661,7 @@ export default {
                 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
@@ -632,12 +702,11 @@ export default {
      /** 座位状态 展示  */
      setSeatClass(item){
       let srt =
-      item.seatTypeId != this.applyMap.seatTypeId?'disabled-class':
       item.occupyStatus == 0 ? 'occupy-status' : 
       item.occupyStatus == 1 ? 'occupy-status-no' : 
       item.isDisabled || item.status != 1 ? 'disabled-class' : 
-      item.isSelect ? 'select-class' : ''
-      console.log("srt=====",srt)
+      item.isSelect ? 'select-class' : 
+      item.seatTypeId != this.applyMap.seatTypeId?'disabled-class':''
       return srt
     }
   },
@@ -844,7 +913,7 @@ export default {
     overflow: auto;
     border-radius: 10px;
     border: 1px  solid #323333;
-
+    position: relative;
     .dialogss-box {
         position: relative;
     }
@@ -955,5 +1024,12 @@ export default {
   }
 }
 
-  
+#moveSelected_1{
+    position:absolute;
+    background-color: blue;
+    opacity:0.3;
+    border:1px dashed #d9d9d9;
+    top:0;
+    left:0;
+}
 </style>

src/views/team/applicationMr/index.vue

@@ -1,144 +1,147 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
-      <el-form-item label="团队名称" label-width="70px">
-        <el-input
-          v-model="queryParams.teamName"
-          placeholder="请输入团队名称"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="票务名称:" prop="goodsId">
-        <el-select
-          v-model="queryParams.goodsId"
-          placeholder="票务名称"
-          clearable
-          style="width: 100%;"
-        >
-          <el-option
-            v-for="dict in ticketList"
-            :key="dict.id"
-            :label="dict.goodsName"
-            :value="dict.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="审核状态">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="审核状态"
-          clearable
-          style="width: 100%"
-        >
-          <el-option
-            v-for="dict in statusList"
-            :key="dict.value"
-            :label="dict.name"
-            :value="dict.value"
+    <div class="app-container-box">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
+        <el-form-item label="团队名称" label-width="70px">
+          <el-input
+            v-model="queryParams.teamName"
+            placeholder="请输入团队名称"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-              type="primary"
-              plain
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['applicationMr:applicationMr:add']"
-            >新增报名</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+        </el-form-item>
+        <el-form-item label="票务名称:" prop="goodsId">
+          <el-select
+            v-model="queryParams.goodsId"
+            placeholder="票务名称"
+            clearable
+            style="width: 100%;"
+          >
+            <el-option
+              v-for="dict in ticketList"
+              :key="dict.id"
+              :label="dict.goodsName"
+              :value="dict.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="审核状态">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="审核状态"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in statusList"
+              :key="dict.value"
+              :label="dict.name"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
 
-    <el-table ref="tables" v-loading="loading" :data="dataList" border>
-      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
-      <el-table-column label="团队名称" align="center" prop="teamName" />
-      <el-table-column label="预约场馆" align="center" prop="theatreName" />
-      <el-table-column label="预约演出厅" align="center" prop="auditoriumName" />
-      <el-table-column label="预约剧目" align="center" prop="performName" />
-      <el-table-column label="票务名称" align="center" prop="goodsName" />
-      <el-table-column label="座位类型" align="center" prop="seatTypeName" />
-      <el-table-column label="团购单价" align="center" prop="price">
-        <template slot-scope="scope">
-          <span v-if="scope.row.price">￥{{ scope.row.price }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="预约时间" align="center" width="160">
-        <template slot-scope="scope">
-          <span>{{ scope.row.performDate }}日 <br /> {{ scope.row.performTimeStart }}-{{ scope.row.performTimeEnd }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="观影人数" align="center" prop="viewerNum" />
-      <el-table-column label="合计" align="center" prop="priceTotal" />
-      <el-table-column label="报名时间" align="center" prop="createTime" width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="审核状态" align="center">
-        <template slot-scope="scope">
-          <el-tag type="info" v-if="scope.row.status == 0">待审核</el-tag>
-          <el-tag type="success" v-if="scope.row.status == 1">审核成功</el-tag>
-          <el-tag type="danger" v-if="scope.row.status == 2">审核失败</el-tag>
-          <el-tag type="info" v-if="scope.row.status == 3">关闭</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="审核时间" align="center" prop="createTime" width="160">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="审核人" align="center" prop="checkorName" />
-      <el-table-column label="操作" align="center" fixed="right" width="150" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-         <el-button
-            size="mini"
-            type="text"
-            @click="handleUpdate(scope.row)"
-            v-if="name==scope.row.createBy && scope.row.status == 2"
-            v-hasPermi="['applicationMr:applicationMr:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            v-if="scope.row.status == 0"
-            @click="handleDetails(scope.row, 'examine')"
-            v-hasPermi="['applicationMr:applicationMr:examine']"
-          >审核</el-button>
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
           <el-button
-            size="mini"
-            type="text"
-            @click="handleDetails(scope.row)"
-            v-hasPermi="['applicationMr:applicationMr:details']"
-          >详情</el-button>
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['applicationMr:applicationMr:add']"
+              >新增报名</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table  ref="tables" v-loading="loading" :data="dataList" border>
+        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+        <el-table-column label="团队名称" align="center" prop="teamName" />
+        <el-table-column label="预约场馆" align="center" prop="theatreName" />
+        <el-table-column label="预约演出厅" align="center" prop="auditoriumName" />
+        <el-table-column label="预约剧目" align="center" prop="performName" />
+        <el-table-column label="票务名称" align="center" prop="goodsName" />
+        <el-table-column label="座位类型" align="center" prop="seatTypeName" />
+        <el-table-column label="团购单价" align="center" prop="price">
+          <template slot-scope="scope">
+            <span v-if="scope.row.price">￥{{ scope.row.price }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="预约时间" align="center" width="160">
+          <template slot-scope="scope">
+            <span>{{ scope.row.performDate }}日 <br /> {{ scope.row.performTimeStart }}-{{ scope.row.performTimeEnd }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="观影人数" align="center" prop="viewerNum" />
+        <el-table-column label="合计" align="center" prop="priceTotal" />
+        <el-table-column label="报名时间" align="center" prop="createTime" width="160">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审核状态" align="center">
+          <template slot-scope="scope">
+            <el-tag type="info" v-if="scope.row.status == 0">待审核</el-tag>
+            <el-tag type="success" v-if="scope.row.status == 1">审核成功</el-tag>
+            <el-tag type="danger" v-if="scope.row.status == 2">审核失败</el-tag>
+            <el-tag type="info" v-if="scope.row.status == 3">关闭</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="审核时间" align="center" prop="createTime" width="160">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审核人" align="center" prop="checkorName" />
+        <el-table-column label="操作" align="center" fixed="right" width="150" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
           <el-button
-            size="mini"
-            type="text"
-            v-if="scope.row.status == 1"
-            @click="handleOrderDetails(scope.row)"
-            v-hasPermi="['applicationMr:applicationMr:order']"
-          >查看订单</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+              size="mini"
+              type="text"
+              @click="handleUpdate(scope.row)"
+              v-if="name==scope.row.createBy && scope.row.status == 2"
+              v-hasPermi="['applicationMr:applicationMr:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              v-if="scope.row.status == 0"
+              @click="handleDetails(scope.row, 'examine')"
+              v-hasPermi="['applicationMr:applicationMr:examine']"
+            >审核</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleDetails(scope.row)"
+              v-hasPermi="['applicationMr:applicationMr:details']"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              v-if="scope.row.status == 1"
+              @click="handleOrderDetails(scope.row)"
+              v-hasPermi="['applicationMr:applicationMr:order']"
+            >查看订单</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+    
 
     <!-- 新增/编辑弹框 -->
     <add-and-edit
@@ -354,3 +357,14 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped> 
+.app-container {
+  width: 100%;
+  .app-container-box {
+    width: 100%;
+    height: calc( 100vh - 150px );
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/team/applicationMr/mixins/selectList.js

@@ -0,0 +1,288 @@
+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,
+            isMousemovs: false,
+            xNum: 1,
+            yNum: 1,
+
+            scrollTop: 0,
+            scrollLeft: 0,
+            scrollTopAll: 0,
+            scrollLeftAll: 0,
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        // 鼠标按下时开启拖拽多选，将遮罩定位并展现
+        mousedownFun(event) {
+           
+            this.screenTop = this.$refs.seatbox.scrollTop
+            this.scrollLeft = this.$refs.seatbox.scrollLeft
+
+            this.moveSelected = document.getElementById('moveSelected_1')
+            this.moveSelected1 = document.getElementById('sm-scroll-box_1')
+            console.log("鼠标按下!!!====",window.scrollX,window.scrollY)
+            if(event.button != 0) return
+            //this.selectedList = []
+           // this.selectList = []
+            
+            this.flag=true;
+            let offsetTop = this.moveSelected1.getBoundingClientRect().y
+            let offsetLeft = this.moveSelected1.getBoundingClientRect().x 
+            console.log("鼠标按下!!!",offsetTop,offsetLeft)
+            this.moveSelected.style.top=(event.pageY-offsetTop - 10 + this.screenTop)+'px';
+            this.moveSelected.style.left=(event.pageX-offsetLeft - 10 + 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.endX=event.pageX;
+            this.endY=event.pageY;
+            
+            
+            if( Math.abs(this.startX - this.endX) > 10 || Math.abs(this.startY - this.endY) > 10){
+                this.isMousemovs = true
+                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.xNum  + 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.yNum + 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';
+                }
+            }
+            event.preventDefault(); // 阻止默认行为
+            event.stopPropagation(); // 阻止事件冒泡
+        },
+        //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
+        mouseupFun(event) {
+            console.log("鼠标抬起!!!",this.isMousemovs)
+            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.isMousemovs){
+                this.getSelectItem()
+            }else {
+                let id = event.srcElement.getAttribute('dragSelectId')
+                console.log("id===",id,event.srcElement)
+                if(id){
+                    this.seatMapListKey.forEach((item1,index1)=>{
+                        this.seatMapList[item1.key].forEach((item,index)=>{
+                            if(id == item.id){
+                               
+                                let aaa = this.seatClickCopy(this.seatMapList[item1.key][index])
+                                console.log("id===",id,item.id,aaa)
+                                if(!aaa) {
+                                    this.seatMapList[item1.key][index].isSelect = false
+                                }else {
+                                    this.seatMapList[item1.key][index].isSelect = !this.seatMapList[item1.key][index].isSelect
+                                }
+                                
+                                
+                            }
+                        })
+                    })
+                    this.$forceUpdate()
+                }
+            }
+            this.isMousemovs = false
+            this.clearDragData();
+            event.preventDefault(); // 阻止默认行为
+            event.stopPropagation(); // 阻止事件冒泡
+        },
+        mouseleaveFun(event) {
+            this.moveSelected = document.getElementById('moveSelected_1')
+            this.moveSelected1 = document.getElementById('sm-scroll-box_1')
+            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_1')
+            let listCopy = []
+            let drawDialog = document.getElementById("moveSelected_1");
+            // 获取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 || this.applyMap.seatTypeId != item.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
+            }
+            if((this.seatSelectList.length + listCopy1.length) > this.details.viewersList.length||this.seatSelectList.length==this.details.viewersList.length) {
+                this.$message.error("观影人数限制" + this.details.viewersList.length + "人!");
+                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()
+        },
+
+        /** 座位大小 拖动变化是  */
+        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/team/teamMr/dialog/creditGrantingBox.vue

@@ -24,13 +24,13 @@
         <el-form-item label="授信欠款:" prop="grantUsed">
           <span>{{ form.grantUsed }}元</span>
         </el-form-item>
-        <el-form-item label="重置授信欠款:" prop="balanceValue">
+        <el-form-item label="还款金额:" prop="balanceValue">
           <div style="display: flex;">
-            <el-input-number v-model="form.balanceValue" controls-position="right" placeholder="请输入重置授信欠款"></el-input-number>
+            <el-input-number v-model="form.balanceValue" controls-position="right" placeholder="请输入还款金额"></el-input-number>
             <span>元</span> 
           </div>
         </el-form-item>
-        <el-form-item label="重置凭证" prop="voucherUrl">
+        <el-form-item label="还款凭证" prop="voucherUrl">
             <div style="display: flex;">
               <div 
               v-for="(item,index) in form.voucherUrl" 
@@ -112,8 +112,8 @@ export default {
         type: "",
       },
       rules: {
-        balanceValue: [{ required: true, message: "请输入重置授信欠款", trigger: ["change","blur"] }],
-        voucherUrl: [{ required: true, message: "请输入重置凭证图片", trigger: ["change","blur"] }],
+        balanceValue: [{ required: true, message: "请输入还款金额", trigger: ["change","blur"] }],
+        voucherUrl: [{ required: true, message: "请输入还款凭证图片", trigger: ["change","blur"] }],
       },
       uploadObj: {
         url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",

src/views/team/teamMr/index.vue

@@ -122,13 +122,13 @@
             size="mini"
             type="text"
             @click="handleAudit(scope.row,'details')"
-            v-hasPermi="['teamMr:teamMr:edit']"
+            v-hasPermi="['teamMr:teamMr:details']"
           >详情</el-button>
           <el-button
             size="mini"
             type="text"
             @click="handleAudit(scope.row,'Audit')"
-            v-hasPermi="['teamMr:teamMr:edit']"
+            v-hasPermi="['teamMr:teamMr:audit']"
             v-if="scope.row.checkStatus == 0 && name!=scope.row.createBy"
           >审核</el-button>
           <el-button
@@ -159,12 +159,15 @@
                 v-hasPermi="['teamMr:teamMr:resetting']">重置密码</el-dropdown-item>
               <el-dropdown-item command="rechargeBox" icon="el-icon-key"
               v-if="scope.row.checkStatus == 1 && name!=scope.row.createBy" 
+              v-hasPermi="['teamMr:teamMr:rechargeBox']"
                 >账户充值</el-dropdown-item>
               <el-dropdown-item command="creditGranting" icon="el-icon-circle-check"
               v-if="scope.row.checkStatus == 1 && name!=scope.row.createBy" 
+              v-hasPermi="['teamMr:teamMr:creditGranting']"
               >账户授信余额</el-dropdown-item>
               <el-dropdown-item command="creditGrantingBox" icon="el-icon-circle-check"
-              v-if="scope.row.checkStatus == 1 && name!=scope.row.createBy" 
+              v-if="scope.row.checkStatus == 1 && name!=scope.row.createBy"
+              v-hasPermi="['teamMr:teamMr:creditGrantingBox']" 
               >账户授信欠款</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>

src/views/windowTicketSales/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/windowTicketSales/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'] }
@@ -333,6 +364,8 @@
             try {
                 this.loading = true
                 this.performId = ''
+                this.screenTop = 0
+                this.scrollLeft = 0
                 if(type) { // 是否清除已选
                     this.seatSelectList = []
                 }
@@ -400,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
@@ -501,7 +534,7 @@
         handleQuery() {
             this.$refs.queryForm.validate((valid) => {
             if (valid) {
-                this.querySeatListFun();
+                this.querySeatListFun(true);
             } else {
                 console.log('error submit!!');
                 return false;
@@ -522,7 +555,7 @@
 
         // 座位点击事件
         seatClick(row) {
-            console.log(row)
+            console.log("是的发给我大是个的风格====",row)
             if(row.occupyStatus == 0){
                 console.log("weqwrwerewrer")
                 this.$confirm('此座已被锁定,请先解锁', '提示', {
@@ -544,7 +577,7 @@
                     }
                 })
                 if(flog){
-                    this.$message.error('只能选同一类型得座位');
+                    this.$message.error('只能选同一类型的座位');
                     return
                 }
                 row.isSelect = !row.isSelect
@@ -558,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) {
@@ -749,7 +788,7 @@
     overflow: auto;
     border-radius: 10px;
     border: 1px  solid #323333;
-
+    position: relative;
     .dialog-box {
         position: relative;
     }
@@ -844,6 +883,7 @@
         user-select: none;
         // transform-origin: 50% 50%;
         // transform: scale(var(--scaleNum));
+        z-index: 999;
         &:hover{
           opacity: 0.6;
         }
@@ -858,4 +898,13 @@
       }
     }
   }
+
+  #moveSelected{
+    position:absolute;
+    background-color: blue;
+    opacity:0.3;
+    border:1px dashed #d9d9d9;
+    top:0;
+    left:0;
+}
   </style>