座位优化

src/App.vue

@@ -21,8 +21,23 @@ export default {
     }
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
 #app .theme-picker {
   display: none;
 }
+// 滚动条样式
+// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+//   width: 10px !important;
+// }
+// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+//   background-color: #063570;
+// }
+// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+//   width: 10px;
+//   opacity: 0.5;
+// }
+// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+//   border-radius: 15px;
+//   background-color: #0257aa;
+// }
 </style>

src/views/venue/performanceHallMr/index.vue

@@ -132,7 +132,7 @@
 import { merchantPageList, deleteById } from '@/api/performanceHallMr/performanceHallMr'
 import addAndEdit from "./dialog/addAndEdit";
 import seatTemplateEdit from "./dialog/seatTemplateEdit";
-// import seatTemplateEdit from "./dialog/seatTemplateEditOld";
+//import seatTemplateEdit from "./dialog/seatTemplateEditOld";
 import programmeAddAndEdit from "./dialog/programmeAddAndEdit";
 
 export default {

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

@@ -161,6 +161,10 @@ export default {
                 this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
             }else{
                 let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
+                let listSelect = JSON.parse(JSON.stringify(this.multipleSelection))
+                if(this.formAll.seatPriorityPosition == 2) {
+                    listSelect.reverse()
+                }
                 let num = Number(this.formAll.setaPriorityNum)
                 for(let i=0;i<this.selectTabelList.length;i++){
                     for(let j=0;j<this.tableDataAll.length;j++){

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

@@ -15,11 +15,14 @@
                     <span :style="{backgroundColor: item.color}"></span>
                     <span :style="{color: item.color}">{{ item.name }}</span>    
                 </div>
-                <div 
-                >
+                <div>
                     <span :style="{backgroundColor: '#ccc'}"></span>
                     <span :style="{color: '#ccc'}">{{ "不可用" }}</span>    
                 </div>
+                <div>
+                    <span :style="{backgroundColor: '#fff',border: '1px solid #000',color: '#000'}"></span>
+                    <span :style="{color: '#ccc'}">{{ "未设置座位类型" }}</span>    
+                </div>
             </div>
         </div>
         <div class="sm-box">
@@ -83,14 +86,14 @@
                         <template slot-scope="scope">
                             <div class="row-item-box" :style='{display: "flex",flexWrap: "nowrap",justifyContent: item.align}'>
                                 <div 
-                                class="row-item"
+                                :class="['row-item']"
                                 v-for="(item1,index1) in scope.row[item.key]" 
                                 :key="item1.styleCss.id"
                                 dragSelectType="div"
                                 :dragSelectId="item1.styleCss.id"
                                 :style="{
-                                    backgroundColor: item1.color?item1.color: '#ccc',
-                                    border: selectList.includes(item1.styleCss.id) ? '5px solid #1890ff': 'none'
+                                    backgroundColor: item1.status == 1 ? item1.color?item1.color: '#fff': '#ccc',
+                                    border: selectList.includes(item1.styleCss.id) ? '5px solid #1890ff': '1px solid #000'
                                 }"
                                 @contextmenu="(e)=>{e.preventDefault();openFormDialogVisible('singleEdit',item1)}"
                                 >
@@ -130,6 +133,7 @@
                                         <div v-else style="display: flex;">
                                             <el-button style="height: 28px;margin-top: 7px;" size="mini" type="primary" @click="addRanks('row')">增加一排</el-button>
                                             <el-button style="height: 28px;margin-top: 7px;margin-left: 5px;" size="mini" type="primary" @click="addRanks('cols')">增加一列</el-button>
+                                            <el-button v-if="modeEdit == 'add'" style="height: 28px;margin-top: 7px;margin-left: 5px;" size="mini" type="primary" @click="initData">清除模板</el-button>
                                         </div>
                                     </el-form>
                                 </div>  
@@ -344,9 +348,9 @@
                     <el-form-item v-if="formAll.seatWay == 2" label="座位名称" prop="name">
                         <div style="display: flex;">
                             <el-input v-model="formAll.name1"></el-input>
-                            <span style="white-space: nowrap;">${row}</span>
+                            <span style="white-space: nowrap;">+行号+</span>
                             <el-input v-model="formAll.name"></el-input>
-                            <span style="white-space: nowrap;">${col}</span>
+                            <span style="white-space: nowrap;">+列号+</span>
                             <el-input v-model="formAll.name2"></el-input>
                         </div>
                         
@@ -376,6 +380,12 @@
                             <el-radio :label="3">递减</el-radio>
                         </el-radio-group>
                     </el-form-item>
+                    <el-form-item label="开始位置" prop="seatPriorityPosition">
+                        <el-radio-group v-model="formAll.seatPriorityPosition">
+                            <el-radio :label="1">列表上到下</el-radio>
+                            <el-radio :label="2">列表下到上</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
                     <el-form-item label="等级数" prop="setaPriorityNum">
                         <el-input v-model="formAll.setaPriorityNum" placeholder="等级数"></el-input>
                     </el-form-item>
@@ -383,7 +393,7 @@
                 <div v-if="['batchSetaDisable','selectBatchSetaDisable'].indexOf(formAllType) !=-1">
                     <el-form-item label="座位状态" prop="status">
                         <el-radio-group v-model="formAll.status">
-                            <el-radio :label="0">初始(该状态下不C端显示)</el-radio>
+                            <!-- <el-radio :label="0">初始(该状态下不C端显示)</el-radio> -->
                             <el-radio :label="1">可用</el-radio>
                             <el-radio :label="2">不可用</el-radio>
                         </el-radio-group>
@@ -410,7 +420,7 @@
                     </el-form-item>
                     <el-form-item label="座位状态" prop="status">
                         <el-radio-group v-model="formAll.status">
-                            <el-radio :label="0">初始(该状态下不C端显示)</el-radio>
+                            <!-- <el-radio :label="0">初始(该状态下不C端显示)</el-radio> -->
                             <el-radio :label="1">可用</el-radio>
                             <el-radio :label="2">不可用</el-radio>
                         </el-radio-group>
@@ -443,6 +453,7 @@ export default {
     components: {},
     data() {
         return {
+            modeEdit: '',
             // 页面渲染的数据
             seatList: [],
             seatTypeList: [],
@@ -530,7 +541,21 @@ export default {
                     { required: true, message: '请输入最大座位号', trigger: ['blur','change'] }
                 ],
                 name: [
+                    { required: true, message: '请输入座位名称', trigger: ['blur','change'] }
+                ],
+
+                seatTypeId: [
+                    { required: true, message: '请输入座位类型', trigger: ['blur','change'] }
+                ],
+
+                seatPriorityWay: [
                     { required: true, message: '请输入创建方式', trigger: ['blur','change'] }
+                ],
+                seatPriorityPosition: [
+                    { required: true, message: '请输入开始位置', trigger: ['blur','change'] }
+                ],
+                setaPriorityNum: [
+                    { required: true, message: '请输入等级数', trigger: ['blur','change'] }
                 ]
                 /**  修改名称 结束  */
             },
@@ -570,27 +595,10 @@ export default {
                 
             }
         },
-        //初始化排序
-        // initSortTable() {
-        //     let that = this;
-        //     this.sortable = new Sortable(document.getElementsByClassName('box-table')[0], {
-        //     animation: 150,
-        //     handle: '.drag-btn',
-        //     onEnd: (e) => {
-        //         // 获取排序之后的data数据
-        //         that.ranking_goods.splice(e.newIndex, 0, that.ranking_goods.splice(e.oldIndex, 1)[0]);
-        //         var newArray = that.ranking_goods.slice(0);
-        //         that.ranking_goods = []
-        //         that.$nextTick(function () {
-        //         that.ranking_goods = newArray
-        //         })
-        //     }
-        //     })
+        /**  重置所有的数据   */
+        resetDataAll(){
+            this.modeEdit = null
 
-        // },
-
-        /**  初始化数据  */
-        async initData(row,list,type){
             this.tableData = []
             this.tableDataAll = []
             this.rowAll = null
@@ -598,8 +606,29 @@ export default {
             this.selectList = []
             this.selectTabelList = []
             this.activeName = "second"
+
+            this.currentRow = null // 当前选择的单元格行
+            this.currentRegion = null // 当前选择的单元格列
+            this.currentLabel = null // 当前选择的单元格列 名称
+            this.currentProperty = null // 当前选择的key
+            this.currentTabelList = [] // 当前单元格的座位列表
+
+            this.batchTableList = []
+            this.multipleSelection = []  //  批量操作选中的
+            this.queryParams = {}
+
+            this.selectList = []
+            this.selectTabelList = []
+            this.multipleSelection_1 = []   
+        },
+        /**  初始化数据  */
+        async initData(row,list,type){
+            
+            this.resetDataAll()
+
             await this.getSeatTypeListFun()
             if(row.rows) {
+                this.modeEdit = 'edit'
                 this.rowAll = row.rows
                 this.colsAll = row.cols
                 let listCopy = []
@@ -621,7 +650,7 @@ export default {
                 console.log("sfasdfasdfasd====",this.tableDataAll)
                 this.dataProcess() // 数据整理
             }else {
-                
+                this.modeEdit = 'add'
             }
         },
         /**  数组组装  */
@@ -707,7 +736,7 @@ export default {
                                 color: '#E6E6FA',// 座位类型对应的颜色
                                 //delFlag: 0, // 座位是否可用
                                 priority: '', // 座位出票顺序  数字越小越优先
-                                status: 0, //0-初始(该状态下不C端显示) 1-可用 2-不可用
+                                status: 2, //0-初始(该状态下不C端显示) 1-可用 2-不可用
                             })
                         }
                     }
@@ -745,7 +774,7 @@ export default {
                         color: '#E6E6FA',// 座位类型对应的颜色
                         //delFlag: 0, // 座位是否可用
                         priority: '', // 座位出票顺序  数字越小越优先
-                        status: 0, //0-初始(该状态下不C端显示) 1-可用 2-不可用
+                        status: 2, //0-初始(该状态下不C端显示) 1-可用 2-不可用
                     })
                 }
                 this.tableDataAll = this.tableDataAll.concat(list)
@@ -771,7 +800,7 @@ export default {
                         color: '#E6E6FA',// 座位类型对应的颜色
                         //delFlag: 0, // 座位是否可用
                         priority: '', // 座位出票顺序  数字越小越优先
-                        status: 0, //0-初始(该状态下不C端显示) 1-可用 2-不可用
+                        status: 2, //0-初始(该状态下不C端显示) 1-可用 2-不可用
                     })
                 }
                 this.tableDataAll = this.tableDataAll.concat(list)
@@ -911,6 +940,7 @@ export default {
                 this.$set(this,'formAll',JSON.parse(JSON.stringify({
                     seatPriorityWay: null,
                     setaPriorityNum: null,
+                    seatPriorityPosition: null
                 })))
             }
             if(type == 'batchSetaDisable') { // 座位状态
@@ -952,6 +982,7 @@ export default {
                 this.$set(this,'formAll',JSON.parse(JSON.stringify({
                     seatPriorityWay: null,
                     setaPriorityNum: null,
+                    seatPriorityPosition: null
                 })))
             }
             if(type == 'selectBatchSetaDisable') { // 座位状态
@@ -971,6 +1002,9 @@ export default {
                    ...data
                 })))
             }
+            this.$nextTick(()=>{
+                this.$refs['formAll'].clearValidate()
+            })
         },
         //  批量操作  表单验证 
         chekeFormAll(formName){
@@ -1135,10 +1169,14 @@ export default {
                 this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
             }else{
                 let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
+                let listSelect = JSON.parse(JSON.stringify(this.multipleSelection))
+                if(this.formAll.seatPriorityPosition == 2) {
+                    listSelect.reverse()
+                }
                 let num = Number(this.formAll.setaPriorityNum)
-                for(let i=0;i<this.multipleSelection.length;i++){
+                for(let i=0;i<listSelect.length;i++){
                     for(let j=0;j<this.tableDataAll.length;j++){
-                        if(this.multipleSelection[i].styleCss.id == this.tableDataAll[j].styleCss.id){
+                        if(listSelect[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                             listTabel[j] = {
                                 ...this.tableDataAll[j],
                                 priority: num
@@ -1285,10 +1323,10 @@ export default {
             }
             this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
             console.log("this.tableDataAll=====",this.tableDataAll)
+            console.log("list======",list)
             this.formDialogVisible = false
-            this.handleQuery()
             this.dataProcess()
-            this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
+            // this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
         },
         
 
@@ -1438,6 +1476,7 @@ export default {
     } 
 
     .row-item {
+        position: relative;
         width: var(--row-w);
         height: var(--row-h);
         margin-left: 5px;
@@ -1466,6 +1505,22 @@ export default {
         margin-left: 0;
     } 
 
+    .row-item-no::after {
+        content:"";
+        display:block;
+        position:absolute;
+        top:0;
+        left:0;
+        width: 100%;
+        height: 100%;
+        background-color:rgba(255,255,255,0.1);
+        z-index:-1;
+        background-image: url('../../../../assets/nos.png');
+        background-size: 50% 50%;
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        z-index: 1;
+    }    
     .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
         border-bottom: none !important;
     }

src/views/windowTicketSales/ticketingSales.vue

@@ -90,17 +90,17 @@
                             <div
                            
                             class="seat-item-class-box" 
-                            v-for="(item1, index1) in Object.keys(seatMapList)" 
-                            :key="index1"
+                            v-for="(item1, index1) in seatMapListKey" 
+                            :key="item1.key"
                             >
                                 <div 
                                 class="seat-item-class" 
-                                :class="item.occupyStatus==0?'occupy-status': item.occupyStatus==1?'occupy-status-no':item.isDisabled || item.status == 2 ? 'disabled-class' : item.isSelect ? 'select-class' : ''"
-                                v-for="(item, index) in seatMapList[item1]" 
+                                :class="item.occupyStatus==0?'occupy-status': item.occupyStatus==1?'occupy-status-no':item.isDisabled || item.status != 1 ? 'disabled-class' : item.isSelect ? 'select-class' : ''"
+                                v-for="(item, index) in seatMapList[item1.key]" 
                                 :style="{backgroundColor: item.color ? item.color : 'none'}"
                                 @click.stop="seatClick(item)" 
                                 :key="index">
-                                    <p class="text-class">{{ item.status == 2 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
+                                    <p class="text-class">{{ item.status != 1 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
                                 </div>
                             </div>
                     </div>
@@ -202,6 +202,7 @@
         goodsPageListSAll: [], // 票务全部
         setList: [],
         seatMapList: [],
+        seatMapListKey: [], // key
         seatSelectList: [],
 
         lockOrUnLockLoading: false,
@@ -213,6 +214,7 @@
         justifyContent: false,
         activeName: 'first',
         seatTypeList: [],
+        
       };
     },
     created() {
@@ -356,11 +358,21 @@
                 })
                 let width = 0
                 let flog = 0
+                let seatMapListKey = []
                 Object.keys(listCopy).forEach((item)=>{
                     if(listCopy[item].length>flog) {
                         flog = listCopy[item].length
                     }
+                    seatMapListKey.push({
+                        key: item,
+                        sort: Number(item.replace('my',''))
+                    })
+                })
+                seatMapListKey.sort((a,b)=>{
+                    return a.sort - b.sort
                 })
+                this.seatMapListKey = seatMapListKey
+                console.log("seatMapListKey=====",seatMapListKey)
                 this.width = 70*flog
                 this.$nextTick(()=>{
                     if(this.$refs.seatbox) {