1. 优化

src/views/officesale/ticketingSales.vue

@@ -113,20 +113,41 @@
                 </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>
+                    <el-button size="mini" type="primary" @click="increaseViewersFun">购票</el-button>
                 </div>
             </div>
         </div>
-        <!-- <div class="seat-select-box">
-            <div class="seat-select-info">
+        <div class="seat-select-box">
+            <div class="seat-select-box-top">
+                <el-tabs v-model="activeName" @tab-click="handleClickTab">
+                    <el-tab-pane label="已选座位" name="first"></el-tab-pane>
+                    <el-tab-pane label="座位图例" name="second"></el-tab-pane>
+                </el-tabs>
+            </div>
+            <div class="seat-select-info" v-if="activeName=='first'">
                 <div 
                 class="seat-select-item"
                 :key="index" 
                 v-for="(item,index) in seatSelectList">
+                    <div>
+                        <span>{{item.name ? item.name : '暂未命名'}}</span>
+                        <span>{{ setSeatTypeShow(item.seatTypeId) }}</span>
+                    </div>
+                    <div>
+                        <span @click="delSeatSelect(item)">删除</span>
+                    </div>
+                </div>
+            </div>
+            <div class="seat-select-info" v-if="activeName=='second'">
+                <div 
+                class="seat-select-color-item"
+                :key="index" 
+                v-for="(item,index) in seatTypeList">
+                    <span :style="{backgroundColor: item.color?item.color:'none'}"></span>
                     <span>{{item.name ? item.name : '暂未命名'}}</span>
                 </div>
             </div>
-        </div> -->
+        </div>
       </div>
       <!--  添加观影人  -->
       <increaseViewers ref="increaseViewers" @clearDialogVisible="clearDialogVisible" />
@@ -143,6 +164,7 @@
  } from '@/api/windowTicketSales/ticketingSales'
  import increaseViewers from "./model/increaseViewers"
  import moment from "moment"
+ import { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
   export default {
     name: "distributionapplication",
     components: {
@@ -187,12 +209,15 @@
         scaleNum: 30,
 
         width: 0,
-        justifyContent: false
+        justifyContent: false,
+        activeName: 'first',
+        seatTypeList: [],
       };
     },
     created() {
         this.merchantTheatreAuditoriumListFun()
         this.goodsPageListFun()
+        this.getSeatTypeList()
     },
     mounted() {
         this.$set(this.queryParams,'performDate',moment().format("yyyy-MM-DD"))
@@ -463,6 +488,29 @@
             }
             
         },
+        /** 删除已选座位  */
+        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)
+                    }
+                })
+            }
+            Object.keys(this.seatMapList).forEach((item1,index)=>{
+                this.seatMapList[item1].forEach((item,index)=>{
+                    if(item.id == row.id) {
+                        item.isSelect = !item.isSelect
+                    }
+                })
+                
+            })
+            this.$forceUpdate()
+        },
         increaseViewersFun(){
             if(this.seatSelectList.length>0){
                 this.changePerformId(this.queryParams.timeId)
@@ -484,7 +532,33 @@
         clearDialogVisible(){
             //this.
             this.querySeatListFun(true)
-        }
+        },
+        /**  选择tab */
+        handleClickTab(){
+
+        },
+        /** 获取座位类型 说明 */
+        getSeatTypeList() {
+            getSeatType({
+                pageNum: 1,
+                pageSize: 999,
+            })
+            .then(response => {
+                this.seatTypeList = response.data.rows;
+                }
+            );
+        },
+        /**   显示座位类型  */
+        setSeatTypeShow(value){
+            let srt = ''
+            this.seatTypeList.forEach((item,index)=>{
+                if(value == item.id) {
+                    srt = item.name
+                }
+            })
+
+            return srt
+        },
     }   
   };
   </script>
@@ -514,8 +588,8 @@
     display: flex;
     position: relative;
     .seat-list-box {
-        //width: calc(100% - 200px);
-        width: 100%;
+        width: calc(100% - 210px);
+        //width: 100%;
         height: 100%;
         box-sizing: border-box;
         position: relative;
@@ -525,12 +599,54 @@
         height: 100%;
         flex-shrink: 0;
         box-sizing: border-box;
+        padding: 0 5px;
+        margin-left: 10px;
+        border: 1px solid #ccc;
+        border-radius: 10px;
         .seat-select-info {
             width: 100%;
-            height: 100%;
+            height: calc( 100% - 60px );
             overflow: hidden;
             overflow-y: auto;
-            .seat-select-item {}
+            .seat-select-item {
+                border: 1px solid #ccc;
+                margin-bottom: 5px;
+                padding: 5px;
+                border-radius: 5px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 12px;
+                >div:first-child {
+                    display: flex;
+                    flex-direction: column;
+                    span:first-child {
+                        font-weight: 600;
+                    }
+                }
+                >div:last-child {
+                    span:first-child {
+                        color: #f56c6c;
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .seat-select-color-item {
+                display: flex;
+                align-items: center;
+                margin-bottom: 5px;
+                >span:first-child {
+                    width: 20px;
+                    height: 20px;
+                    flex-shrink: 0;
+                }
+                >span:last-child {
+                    font-size: 16px;
+                    font-weight: 600;
+                    margin-left: 10px;
+                }
+            }
         }
     }
   }

src/views/windowTicketSales/ticketingSales.vue

@@ -129,8 +129,13 @@
                 class="seat-select-item"
                 :key="index" 
                 v-for="(item,index) in seatSelectList">
-                    <span>{{item.name ? item.name : '暂未命名'}}</span>
-                    <span></span>
+                    <div>
+                        <span>{{item.name ? item.name : '暂未命名'}}</span>
+                        <span>{{ setSeatTypeShow(item.seatTypeId) }}</span>
+                    </div>
+                    <div>
+                        <span @click="delSeatSelect(item)">删除</span>
+                    </div>
                 </div>
             </div>
             <div class="seat-select-info" v-if="activeName=='second'">
@@ -483,6 +488,29 @@
             }
             
         },
+        /** 删除已选座位  */
+        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)
+                    }
+                })
+            }
+            Object.keys(this.seatMapList).forEach((item1,index)=>{
+                this.seatMapList[item1].forEach((item,index)=>{
+                    if(item.id == row.id) {
+                        item.isSelect = !item.isSelect
+                    }
+                })
+                
+            })
+            this.$forceUpdate()
+        },
         increaseViewersFun(){
             if(this.seatSelectList.length>0){
                 this.changePerformId(this.queryParams.timeId)
@@ -520,6 +548,17 @@
                 }
             );
         },
+        /**   显示座位类型  */
+        setSeatTypeShow(value){
+            let srt = ''
+            this.seatTypeList.forEach((item,index)=>{
+                if(value == item.id) {
+                    srt = item.name
+                }
+            })
+
+            return srt
+        },
     }   
   };
   </script>
@@ -572,6 +611,25 @@
             .seat-select-item {
                 border: 1px solid #ccc;
                 margin-bottom: 5px;
+                padding: 5px;
+                border-radius: 5px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 12px;
+                >div:first-child {
+                    display: flex;
+                    flex-direction: column;
+                    span:first-child {
+                        font-weight: 600;
+                    }
+                }
+                >div:last-child {
+                    span:first-child {
+                        color: #f56c6c;
+                        cursor: pointer;
+                    }
+                }
             }
 
             .seat-select-color-item {