|
@@ -1,14 +1,20 @@
|
|
|
<template>
|
|
|
<div class="sm">
|
|
|
- <div style="width: 1300px;">
|
|
|
+ <div class="sm-box-top-tool">
|
|
|
<div style="display: flex;align-items: center;">
|
|
|
<span style="margin-right: 5px;font-size: 14px;">放大/缩小:</span>
|
|
|
<div style="width: 100px;">
|
|
|
- <el-slider input-size="mini" v-model="whNum" :min="16" :max="60"></el-slider>
|
|
|
+ <el-slider input-size="mini" v-model="whNum" :min="16" :max="100"></el-slider>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
-
|
|
|
+ <div class="sm-box-top-tool-legend">
|
|
|
+ <div
|
|
|
+ :key="item.id"
|
|
|
+ v-for="(item,index) in seatTypeList"
|
|
|
+ >
|
|
|
+ <span :style="{backgroundColor: item.color}"></span>
|
|
|
+ <span :style="{color: item.color}">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="sm-box">
|
|
@@ -27,8 +33,11 @@
|
|
|
row-key="id"
|
|
|
class="exchange_table"
|
|
|
:style="{
|
|
|
- '--row-w': whNum+'px',
|
|
|
- '--row-h': whNum+'px',
|
|
|
+ '--row-scale': whNum/100,
|
|
|
+ '--row-w': (width*(whNum/100))+'px',
|
|
|
+ '--row-h': (width*(whNum/100))+'px',
|
|
|
+ '--row-w-i': width+'px',
|
|
|
+ '--row-h-i': height+'px',
|
|
|
}"
|
|
|
:data-source="ranking_goods"
|
|
|
:cell-class-name="tableCellClassName"
|
|
@@ -50,7 +59,7 @@
|
|
|
v-for="(item,index) in tableHeader"
|
|
|
:prop="item.key"
|
|
|
:label="item.title"
|
|
|
- :width="((whNum+7.5)*item.length)+'px'"
|
|
|
+ :width="((width*(whNum/100)+7.5)*item.length)+'px'"
|
|
|
align="center"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
@@ -58,14 +67,16 @@
|
|
|
<div
|
|
|
class="row-item"
|
|
|
v-for="(item1,index1) in scope.row[item.key]"
|
|
|
- :key="item1.style.id"
|
|
|
+ :key="item1.styleCss.id"
|
|
|
dragSelectType="div"
|
|
|
- :dragSelectId="item1.style.id"
|
|
|
+ :dragSelectId="item1.styleCss.id"
|
|
|
:style="{backgroundColor: item1.delFlag !=0?'#ccc':item1.color}"
|
|
|
>
|
|
|
- <i style="line-height: 15px;">{{ item1.columnNo }}</i>
|
|
|
- <i style="line-height: 15px;">{{ item1.name }}</i>
|
|
|
- <i style="line-height: 15px;">vip</i>
|
|
|
+ <div>
|
|
|
+ <i style="line-height: 15px;">{{ item1.columnNo }}</i>
|
|
|
+ <i style="line-height: 15px;">{{ item1.name }}</i>
|
|
|
+ <i style="line-height: 15px;white-space: nowrap;">{{ item1.styleCss && item1.styleCss.sort }}</i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -88,11 +99,13 @@
|
|
|
v-if="activeName == 'first'"
|
|
|
class="qu-first-box">
|
|
|
<div class="qu-first-form">
|
|
|
- <el-form :model="ruleForm" size="mini" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
|
+ <el-form :model="ruleForm" size="mini" :rules="rules" ref="ruleFormRegion" label-width="110px" class="demo-ruleForm">
|
|
|
<el-form-item label="座位总排数">
|
|
|
<el-input v-model="rowAll">
|
|
|
<el-button slot="append" @click="createTableList">创建排数</el-button>
|
|
|
</el-input>
|
|
|
+ </el-form-item><el-form-item label="单排最大座位数">
|
|
|
+ <span>{{ colsAll }}</span>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="区域名称" prop="name">
|
|
|
<el-input v-model="ruleForm.name"></el-input>
|
|
@@ -105,8 +118,8 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button size="mini" type="primary" @click="submitForm('ruleForm')">创建区域</el-button>
|
|
|
- <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="submitForm('ruleFormRegion')">创建区域</el-button>
|
|
|
+ <el-button size="mini" @click="resetForm('ruleFormRegion')">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
@@ -150,10 +163,17 @@
|
|
|
<el-radio :label="2">批量</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="座位号" prop="seatParity">
|
|
|
+ <el-radio-group v-model="ruleForm1.seatParity">
|
|
|
+ <el-radio :label="1">奇偶列</el-radio>
|
|
|
+ <el-radio :label="2">奇数列</el-radio>
|
|
|
+ <el-radio :label="3">偶数列</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="座位类型" prop="seatTypeId">
|
|
|
<el-select
|
|
|
v-model="ruleForm1.seatTypeId"
|
|
|
- placeholder="请选择座位排练">
|
|
|
+ placeholder="请选择座位类型">
|
|
|
<el-option
|
|
|
v-for="(item,index) in seatTypeList"
|
|
|
:key="item.id"
|
|
@@ -239,6 +259,7 @@
|
|
|
</div>
|
|
|
<div class="qu-batch-tool">
|
|
|
<el-button type="primary" size="mini" @click="openFormDialogVisible">修改区域</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="openBatchSetaType">座位类型</el-button>
|
|
|
<el-button type="danger" size="mini" @click="batchDisable">批量禁用</el-button>
|
|
|
|
|
|
</div>
|
|
@@ -259,12 +280,18 @@
|
|
|
prop="name"
|
|
|
align="center"
|
|
|
label="名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <span>{{ scope.row.name ? scope.row.name : '暂未命名' }}</span>
|
|
|
+ <span>({{ scope.row.rowNo}}-{{ scope.row.columnNo}})</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
label="区域">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ scope.row.style && scope.row.style.keyLabel }}</span>
|
|
|
+ <span>{{ scope.row.styleCss && scope.row.styleCss.keyLabel ? scope.row.styleCss.keyLabel : '暂未分区' }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -301,7 +328,7 @@
|
|
|
<div v-if="formAllType=='bindingregion'">
|
|
|
<el-form-item label="区域" prop="status">
|
|
|
<div style="display: flex;">
|
|
|
- <el-select v-model="queryParams.status" placeholder="区域" clearable>
|
|
|
+ <el-select v-model="formAll.status" placeholder="区域" clearable>
|
|
|
<el-option
|
|
|
v-for="item in tableHeader"
|
|
|
:key="item.key"
|
|
@@ -309,11 +336,22 @@
|
|
|
:value="item.key"
|
|
|
/>
|
|
|
</el-select>
|
|
|
- <el-button style="margin-left: 5px;" type="primary" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button size="mini" @click="resetQuery">重置</el-button>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
+ <div v-if="formAllType=='batchSetaType'">
|
|
|
+ <el-form-item label="座位类型" prop="seatTypeId">
|
|
|
+ <el-select
|
|
|
+ v-model="formAll.seatTypeId"
|
|
|
+ placeholder="请选择座位类型">
|
|
|
+ <el-option
|
|
|
+ v-for="(item,index) in seatTypeList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
</el-form>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="formDialogVisible = false">取 消</el-button>
|
|
@@ -327,6 +365,7 @@
|
|
|
<script>
|
|
|
import Sortable from "sortablejs";
|
|
|
import dragSelect from 'ty-drag-select';
|
|
|
+import { pageList as getSeatTypeList } from '@/api/seatTypeMr/seatTypeMr'
|
|
|
export default {
|
|
|
name: 'sysIndex',
|
|
|
components: {},
|
|
@@ -334,133 +373,16 @@ export default {
|
|
|
return {
|
|
|
// 页面渲染的数据
|
|
|
seatList: [],
|
|
|
- seatTypeList: [
|
|
|
- {
|
|
|
- "id": "899466154989936640",
|
|
|
- "createBy": "admin",
|
|
|
- "createTime": "2023-12-26 11:24:13",
|
|
|
- "updateBy": "admin",
|
|
|
- "updateTime": "2023-12-26 11:24:13",
|
|
|
- "delFlag": 0,
|
|
|
- "name": "贵宾席-OTA测试",
|
|
|
- "color": "#EB3286"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "899466065307328512",
|
|
|
- "createBy": "admin",
|
|
|
- "createTime": "2023-12-26 11:23:51",
|
|
|
- "updateBy": "admin",
|
|
|
- "updateTime": "2023-12-26 11:23:51",
|
|
|
- "delFlag": 0,
|
|
|
- "name": "普通席-OTA测试",
|
|
|
- "color": "#AE3BE7"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "898175951457316864",
|
|
|
- "createBy": "admin",
|
|
|
- "createTime": "2023-12-22 21:57:24",
|
|
|
- "updateBy": "admin",
|
|
|
- "updateTime": "2023-12-22 21:57:24",
|
|
|
- "delFlag": 0,
|
|
|
- "name": "VIP票",
|
|
|
- "color": "#FF0000"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "898175913469505536",
|
|
|
- "createBy": "admin",
|
|
|
- "createTime": "2023-12-22 21:57:15",
|
|
|
- "updateBy": "admin",
|
|
|
- "updateTime": "2023-12-22 21:57:15",
|
|
|
- "delFlag": 0,
|
|
|
- "name": "贵宾票",
|
|
|
- "color": "#FFD000"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "898175825946963968",
|
|
|
- "createBy": "admin",
|
|
|
- "createTime": "2023-12-22 21:56:54",
|
|
|
- "updateBy": "admin",
|
|
|
- "updateTime": "2023-12-22 21:56:54",
|
|
|
- "delFlag": 0,
|
|
|
- "name": "普通票",
|
|
|
- "color": "#0BB8B8"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "898175718375649280",
|
|
|
- "createBy": "admin",
|
|
|
- "createTime": "2023-12-22 21:56:29",
|
|
|
- "updateBy": "admin",
|
|
|
- "updateTime": "2023-12-26 11:23:02",
|
|
|
- "delFlag": 0,
|
|
|
- "name": "普通座位-测试",
|
|
|
- "color": "#DE5421"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "898175647802290176",
|
|
|
- "createBy": "admin",
|
|
|
- "createTime": "2023-12-22 21:56:12",
|
|
|
- "updateBy": "admin",
|
|
|
- "updateTime": "2023-12-22 21:56:35",
|
|
|
- "delFlag": 0,
|
|
|
- "name": "贵宾座位-测试",
|
|
|
- "color": "#2FBB60"
|
|
|
- },
|
|
|
- {
|
|
|
- "id": "898175609768341504",
|
|
|
- "createBy": "admin",
|
|
|
- "createTime": "2023-12-22 21:56:03",
|
|
|
- "updateBy": "admin",
|
|
|
- "updateTime": "2023-12-24 20:17:00",
|
|
|
- "delFlag": 0,
|
|
|
- "name": "VIP座位-测试",
|
|
|
- "color": "#002FFF"
|
|
|
- }
|
|
|
- ],
|
|
|
- tableHeader: [
|
|
|
- // { title: '左1',key: 'zuo',align: 'flex-end' },
|
|
|
- // { title: '过道2',key: 'zuo11',align: 'center' },
|
|
|
- // { title: '中3',key: 'zhong',align: 'center' },
|
|
|
- // { title: '过道4',key: 'zuo22',align: 'center' },
|
|
|
- // { title: '右5',key: 'you',align: 'flex-start' },
|
|
|
- // { title: '右6',key: 'you',align: 'flex-start' },
|
|
|
- // { title: '右7',key: 'you',align: 'flex-start' },
|
|
|
-
|
|
|
- // { title: '右8',key: 'you',align: 'flex-start' },
|
|
|
- // { title: '右9',key: 'you',align: 'flex-start' },
|
|
|
- ],
|
|
|
- tableData: [
|
|
|
- // {
|
|
|
- // id: this.currentRow+"_"+this.currentProperty+"_"+i,
|
|
|
- // name: this.ruleForm1.name.replace('${row}',this.currentRow).replace('${col}',i),
|
|
|
- // status: this.ruleForm1.seatTypeId,
|
|
|
- // rowNo: this.currentRow,
|
|
|
- // colNo: i,
|
|
|
- // sort: i,
|
|
|
- // style: {key: this.currentProperty}
|
|
|
- // }
|
|
|
- ], // 全部的座位 表格形式
|
|
|
- tableDataAll: [
|
|
|
- // {
|
|
|
- // "id": "899524164202352651",
|
|
|
- // "delFlag": 0,
|
|
|
- // "auditoriumId": "899466305364123648",
|
|
|
- // "name": "",
|
|
|
- // "rowNo": 2,
|
|
|
- // "columnNo": 9,
|
|
|
- // "seatTypeId": "899466154989936640",
|
|
|
- // "seatLabel": "贵宾席-OTA测试",
|
|
|
- // "priority": 1,
|
|
|
- // "status": 1,
|
|
|
- // "sortId": 11,
|
|
|
- // "color": "#EB3286"
|
|
|
- // }
|
|
|
- ], // 全部的座位
|
|
|
+ seatTypeList: [],
|
|
|
+ tableHeader: [],
|
|
|
+ tableData: [], // 全部的座位 表格形式
|
|
|
+ tableDataAll: [], // 全部的座位
|
|
|
widthAll: '100%',
|
|
|
heightAll: '100%',
|
|
|
- width: 26,
|
|
|
- height: 26,
|
|
|
+ width: 60,
|
|
|
+ height: 60,
|
|
|
spacing: 10,
|
|
|
- whNum: 26,
|
|
|
+ whNum: 100,
|
|
|
|
|
|
|
|
|
sortable: null,
|
|
@@ -469,6 +391,7 @@ export default {
|
|
|
|
|
|
// tool
|
|
|
rowAll: null,
|
|
|
+ colsAll: null,
|
|
|
activeName: 'second',
|
|
|
|
|
|
// 创建区域
|
|
@@ -494,8 +417,11 @@ export default {
|
|
|
name: [
|
|
|
{ required: true, message: '请选择座位名称', trigger: ['blur','change'] }
|
|
|
],
|
|
|
+ seatParity: [
|
|
|
+ { required: true, message: '请选择座位号', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
seatTypeId: [
|
|
|
- { required: true, message: '请输入座位类型', trigger: ['blur','change'] }
|
|
|
+ { required: true, message: '请选择座位类型', trigger: ['blur','change'] }
|
|
|
],
|
|
|
},
|
|
|
currentRow: null, // 当前选择的单元格行
|
|
@@ -537,6 +463,17 @@ export default {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ /** 获取座位类型 */
|
|
|
+ async getSeatTypeListFun(){
|
|
|
+ try {
|
|
|
+ let res = await getSeatTypeList({
|
|
|
+ pageNum: 1, pageSize: 999
|
|
|
+ })
|
|
|
+ this.seatTypeList = res.data.rows
|
|
|
+ } catch (error) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
//初始化排序
|
|
|
initSortTable() {
|
|
|
let that = this;
|
|
@@ -557,9 +494,86 @@ export default {
|
|
|
},
|
|
|
|
|
|
/** 初始化数据 */
|
|
|
- initData(){
|
|
|
+ async initData(row,list,type){
|
|
|
+ this.tableHeader = []
|
|
|
+ this.tableData = []
|
|
|
+ this.tableDataAll = []
|
|
|
+ this.rowAll = null
|
|
|
+ this.colsAll = null
|
|
|
+ await this.getSeatTypeListFun()
|
|
|
+ if(row.rows) {
|
|
|
+ if(row.styleCss) {
|
|
|
+ this.tableHeader = JSON.parse(row.styleCss).tableHeader
|
|
|
+ }
|
|
|
+ this.rowAll = row.rows
|
|
|
+ let listCopy = []
|
|
|
+ list.forEach((item,index) => {
|
|
|
+ // if(item.styleCss) {
|
|
|
+ // item.styleCss = JSON.parse(item.styleCss)
|
|
|
+ // }
|
|
|
+ listCopy.push({
|
|
|
+ ...item,
|
|
|
+ styleCss: item.styleCss ? JSON.parse(JSON.parse(item.styleCss)): {}
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.tableDataAll = JSON.parse(JSON.stringify(listCopy))
|
|
|
+ console.log("sfasdfasdfasd====",this.tableDataAll)
|
|
|
+ this.dataProcess() // 数据整理
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 数组组装 */
|
|
|
+ dataProcess(){
|
|
|
+ let list = JSON.parse(JSON.stringify(this.tableDataAll))
|
|
|
+ let list1 = JSON.parse(JSON.stringify(this.tableData))
|
|
|
+ let obj = {}
|
|
|
+ for(let i = 0;i<this.rowAll;i++) {
|
|
|
+ if(this.tableHeader && this.tableHeader.length){
|
|
|
+ let obj = {
|
|
|
+ tableId: "row_"+i
|
|
|
+ }
|
|
|
+ this.tableHeader.forEach((item,index)=>{
|
|
|
+ obj[item.key] = []
|
|
|
+ })
|
|
|
+ if(list1[i] && JSON.stringify(list1[i]) != '{}') {
|
|
|
+ list1[i] = obj
|
|
|
+ }else {
|
|
|
+ list1.push(obj)
|
|
|
+ }
|
|
|
+ }else if(!list1[i]){
|
|
|
+ list1.push({})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //this.tableData = JSON.parse(JSON.stringify(list1))
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ if(item.styleCss) {
|
|
|
+ obj = typeof item.styleCss == 'string' ? JSON.parse(item.styleCss) : item.styleCss
|
|
|
+ if(obj.key && list1[item.rowNo-1][obj.key]) {
|
|
|
+
|
|
|
+ list1[item.rowNo-1][obj.key].push({
|
|
|
+ ...item,
|
|
|
+ styleCss: obj
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ // 排序
|
|
|
+ for(let j = 0; j < list1.length ; j++) {
|
|
|
+ for(let i = 0;i<this.tableHeader.length;i++) {
|
|
|
+ list1[j][this.tableHeader[i].key].sort(this.sortFun)
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ this.tableData = JSON.parse(JSON.stringify(list1))
|
|
|
+ console.log("this.tableData===",this.tableData)
|
|
|
+ this.countRegionW()
|
|
|
+ },
|
|
|
+ /** sort 排序函数 */
|
|
|
+ sortFun(a,b){
|
|
|
+ return a.sortId - b.sortId;
|
|
|
},
|
|
|
+
|
|
|
/** tab 切换 右侧工具 */
|
|
|
handleClickTab(item){
|
|
|
console.log("item====",item,this.activeName)
|
|
@@ -579,7 +593,7 @@ export default {
|
|
|
length: 0,
|
|
|
width:0,
|
|
|
})
|
|
|
- this.resetForm('ruleForm')
|
|
|
+ this.resetForm(formName)
|
|
|
if(this.rowAll) {
|
|
|
this.createTableList()
|
|
|
}
|
|
@@ -596,7 +610,7 @@ export default {
|
|
|
delTableHeader(params,index){
|
|
|
let flog = false
|
|
|
this.tableDataAll.forEach((item,index)=>{
|
|
|
- if(item.style && item.style.key == params.key) {
|
|
|
+ if(item.styleCss && item.styleCss.key == params.key) {
|
|
|
flog = true
|
|
|
}
|
|
|
})
|
|
@@ -629,7 +643,10 @@ export default {
|
|
|
if(this.formAllType == 'region'){
|
|
|
this.submitFormAll()
|
|
|
}else if(this.formAllType == 'bindingregion'){
|
|
|
+ console.log("sdfsdfsdfsdfds",this.formAll)
|
|
|
this.batchBindingArea()
|
|
|
+ }else if(this.formAllType == 'batchSetaType') {
|
|
|
+ this.batchSetaType()
|
|
|
}
|
|
|
} else {
|
|
|
console.log('error submit!!');
|
|
@@ -724,7 +741,7 @@ export default {
|
|
|
this.seatTypeList.forEach((item,index)=>{
|
|
|
if(this.ruleForm1.seatTypeId == item.id) {
|
|
|
color = item.color
|
|
|
- seatLabel = item.seatLabel
|
|
|
+ seatLabel = item.name
|
|
|
}
|
|
|
})
|
|
|
if(this.ruleForm1.resource == 2){ // 批量
|
|
@@ -748,11 +765,17 @@ export default {
|
|
|
return
|
|
|
}
|
|
|
for(let i = min;i<=max;i++) {
|
|
|
+ if(this.ruleForm1.seatParity == 2 && i%2 == 0) { // 排除偶数
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ if(this.ruleForm1.seatParity == 3 && i%2 > 0) { // 排除奇数数
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+
|
|
|
list.push({
|
|
|
- id: this.currentRow+"_"+this.currentProperty+"_"+i,
|
|
|
+ tableId: this.currentRow+"_"+this.currentProperty+"_"+i,
|
|
|
name: this.ruleForm1.name.replace('${row}',this.currentRow).replace('${col}',i),
|
|
|
- status: this.ruleForm1.seatTypeId,
|
|
|
- style: {
|
|
|
+ styleCss: {
|
|
|
key: this.currentProperty, // 所属区域的key
|
|
|
keyLabel: this.currentLabel, // 所属区域的名称
|
|
|
sort: 0,
|
|
@@ -761,9 +784,12 @@ export default {
|
|
|
rowNo: this.currentRow,
|
|
|
columnNo: i,
|
|
|
seatTypeId: this.ruleForm1.seatTypeId,
|
|
|
+ sortId: i, // 排序号码
|
|
|
seatLabel: seatLabel,
|
|
|
color: color,// 座位类型对应的颜色
|
|
|
- delFlag: 0,
|
|
|
+ delFlag: 0, // 座位是否可用
|
|
|
+ priority: 9999, // 座位出票顺序 数字越小越优先
|
|
|
+ status: 0, //0-初始(该状态下不C端显示) 1-可用 2-不可用
|
|
|
})
|
|
|
}
|
|
|
this.tableDataAll = this.tableDataAll.concat(JSON.parse(JSON.stringify(list)))
|
|
@@ -774,13 +800,9 @@ export default {
|
|
|
console.log("this.tableData111=====",this.currentRow,this.currentProperty,this.tableData[this.currentRow-1][this.currentProperty])
|
|
|
let index = this.tableData[this.currentRow-1][this.currentProperty].length
|
|
|
let obj = {
|
|
|
- id: this.currentRow+"_"+this.currentProperty+"_"+(index+1),
|
|
|
+ tableId: this.currentRow+"_"+this.currentProperty+"_"+(index+1),
|
|
|
name: this.ruleForm1.name,
|
|
|
- status: this.ruleForm1.seatTypeId,
|
|
|
- rowNo: this.currentRow,
|
|
|
- sort: index+1,
|
|
|
-
|
|
|
- style: {
|
|
|
+ styleCss: {
|
|
|
key: this.currentProperty, // 所属区域的key
|
|
|
keyLabel: this.currentLabel, // 所属区域的名称
|
|
|
sort: 0,
|
|
@@ -788,10 +810,13 @@ export default {
|
|
|
},
|
|
|
rowNo: this.currentRow,
|
|
|
columnNo: index+1,
|
|
|
+ sortId: i, // 排序号码
|
|
|
seatTypeId: this.ruleForm1.seatTypeId,
|
|
|
seatLabel: seatLabel,
|
|
|
color: color,// 座位类型对应的颜色
|
|
|
- delFlag: 0,
|
|
|
+ delFlag: 0, // 座位是否可用
|
|
|
+ priority: 9999, // 座位出票顺序 数字越小越优先
|
|
|
+ status: 0, //0-初始(该状态下不C端显示) 1-可用 2-不可用
|
|
|
}
|
|
|
this.tableData[this.currentRow-1][this.currentProperty].push(obj)
|
|
|
this.tableDataAll.push(JSON.parse(JSON.stringify(obj)))
|
|
@@ -826,6 +851,7 @@ export default {
|
|
|
countRegionW(){
|
|
|
let list = JSON.parse(JSON.stringify(this.tableHeader))
|
|
|
for(let i = 0; i < list.length; i++) {
|
|
|
+ list[i].length = 0
|
|
|
for(let j = 0;j < this.tableData.length; j++) {
|
|
|
if(this.tableData[j][list[i].key] && this.tableData[j][list[i].key].length){
|
|
|
if(list[i].length<this.tableData[j][list[i].key].length){
|
|
@@ -836,6 +862,13 @@ export default {
|
|
|
}
|
|
|
console.log("list=====111",list)
|
|
|
this.tableHeader = [].concat(list)
|
|
|
+ let colsAll = 0
|
|
|
+ this.tableHeader.forEach((item,index) => {
|
|
|
+ if(item.length) {
|
|
|
+ colsAll = colsAll + item.length
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.colsAll = colsAll
|
|
|
},
|
|
|
/** 创建座位 结束 */
|
|
|
|
|
@@ -876,6 +909,7 @@ export default {
|
|
|
|
|
|
// 批量选择
|
|
|
handleSelectionChange(val){
|
|
|
+ console.log('this.multipleSelection====',val)
|
|
|
this.multipleSelection = val;
|
|
|
},
|
|
|
// 编辑区域
|
|
@@ -891,43 +925,89 @@ export default {
|
|
|
batchBindingArea() {
|
|
|
let list = []
|
|
|
let currentLabel = ''
|
|
|
-
|
|
|
+ let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
|
|
|
this.tableHeader.forEach((item)=>{
|
|
|
if(item.key == this.formAll.status) {
|
|
|
currentLabel = item.title
|
|
|
}
|
|
|
})
|
|
|
- let listId = []
|
|
|
- this.multipleSelection.forEach((item)=>{
|
|
|
- listId.push(item.id)
|
|
|
- })
|
|
|
- this.multipleSelection.forEach((item)=>{
|
|
|
- list.push({
|
|
|
- ...item,
|
|
|
- style: {
|
|
|
- ...item.style,
|
|
|
- key: this.formAll.status, // 所属区域的key
|
|
|
- keyLabel: currentLabel, // 所属区域的名称
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
+ for(let i=0;i<this.multipleSelection.length;i++){
|
|
|
+ for(let j=0;j<this.tableDataAll.length;j++){
|
|
|
+ if(this.multipleSelection[i].id == this.tableDataAll[j].id){
|
|
|
+ listTabel[j] = {
|
|
|
+ ...this.tableDataAll[j],
|
|
|
+ styleCss: {
|
|
|
+ ...this.tableDataAll[j].styleCss,
|
|
|
+ key: this.formAll.status, // 所属区域的key
|
|
|
+ keyLabel: currentLabel, // 所属区域的名称
|
|
|
+ }
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
|
|
|
+ console.log("this.tableDataAll=====",this.tableDataAll)
|
|
|
+ // this.batchTableList = JSON.parse(JSON.stringify(this.tableDataAll))
|
|
|
+ this.formDialogVisible = false
|
|
|
+ this.handleQuery()
|
|
|
+ this.dataProcess()
|
|
|
},
|
|
|
// 批量禁用
|
|
|
batchDisable() {
|
|
|
|
|
|
},
|
|
|
-
|
|
|
+ /** 打开 批量修改座位类型 弹窗 */
|
|
|
+ openBatchSetaType() {
|
|
|
+ this.formAllType = 'batchSetaType'
|
|
|
+ this.formDialogVisibleTitle = "批量修改座位类型"
|
|
|
+ this.formDialogVisible = true
|
|
|
+ this.$set(this,'formAll',JSON.parse(JSON.stringify({
|
|
|
+ seatTypeId: null,
|
|
|
+ })))
|
|
|
+ },
|
|
|
+ /** 批量修改座位类型 */
|
|
|
+ batchSetaType() {
|
|
|
+ let color = ''
|
|
|
+ let seatLabel = ''
|
|
|
+ let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
|
|
|
+ this.seatTypeList.forEach((item,index)=>{
|
|
|
+ if(this.formAll.seatTypeId == item.id) {
|
|
|
+ color = item.color
|
|
|
+ seatLabel = item.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+ for(let i=0;i<this.multipleSelection.length;i++){
|
|
|
+ for(let j=0;j<this.tableDataAll.length;j++){
|
|
|
+ if(this.multipleSelection[i].id == this.tableDataAll[j].id){
|
|
|
+ listTabel[j] = {
|
|
|
+ ...this.tableDataAll[j],
|
|
|
+ seatLabel: seatLabel,
|
|
|
+ color: color,// 座位类型对应的颜色
|
|
|
+ seatTypeId: this.formAll.seatTypeId,
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
|
|
|
+ console.log("this.tableDataAll=====",this.tableDataAll)
|
|
|
+ // this.batchTableList = JSON.parse(JSON.stringify(this.tableDataAll))
|
|
|
+ this.formDialogVisible = false
|
|
|
+ this.handleQuery()
|
|
|
+ this.dataProcess()
|
|
|
+ },
|
|
|
/** 删选 */
|
|
|
handleQuery(){
|
|
|
|
|
|
if(!this.queryParams.menuName&&!this.queryParams.status){
|
|
|
this.batchTableList = this.tableDataAll
|
|
|
- console.log("list====",this.queryParams)
|
|
|
+ console.log("list====",this.queryParams,this.tableDataAll)
|
|
|
}else {
|
|
|
let list = []
|
|
|
this.tableDataAll.forEach((item,index)=>{
|
|
|
if(this.queryParams.menuName&&this.queryParams.status) {
|
|
|
- if(item.rowNo==this.queryParams.menuName && item.style.key == this.queryParams.status) {
|
|
|
+ if(item.rowNo==this.queryParams.menuName && item.styleCss.key == this.queryParams.status) {
|
|
|
list.push(item)
|
|
|
}
|
|
|
}else if(this.queryParams.menuName){
|
|
@@ -935,7 +1015,7 @@ export default {
|
|
|
list.push(item)
|
|
|
}
|
|
|
}else {
|
|
|
- if(item.style.key == this.queryParams.status) {
|
|
|
+ if(item.styleCss.key == this.queryParams.status) {
|
|
|
list.push(item)
|
|
|
}
|
|
|
}
|
|
@@ -950,7 +1030,7 @@ export default {
|
|
|
|
|
|
},
|
|
|
|
|
|
- /** 座位排序 */
|
|
|
+ /** 点击座位排序 座位排序 */
|
|
|
seatSortingFun(type){
|
|
|
let list = JSON.parse(JSON.stringify(this.currentTabelList))
|
|
|
if(type=='rise') { // 升序
|
|
@@ -995,6 +1075,46 @@ export default {
|
|
|
}
|
|
|
this.$set(this.tableData[this.currentRow-1],this.currentProperty,list)
|
|
|
this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
|
|
|
+ },
|
|
|
+ /** 座位升序 赋值 */
|
|
|
+ setSetaSote(){
|
|
|
+ let list = []
|
|
|
+ for(let j = 0;j<this.tableData.length;j++) {
|
|
|
+ list[j] = []
|
|
|
+ for(let i = 0;i<this.tableHeader.length;i++) {
|
|
|
+ list[j] = list[j].concat(this.tableData[j][this.tableHeader[i].key])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let listCopy = []
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ item.forEach((item1,index1)=>{
|
|
|
+ list[index][index1].sortId = index1+1
|
|
|
+ list[index][index1].styleCss.sort = index1+1
|
|
|
+ listCopy.push(list[index][index1])
|
|
|
+ })
|
|
|
+ })
|
|
|
+ console.log("list======",list)
|
|
|
+ this.tableDataAll = JSON.parse(JSON.stringify(listCopy))
|
|
|
+ },
|
|
|
+ /** 保存座位 */
|
|
|
+ saveSeat() {
|
|
|
+ this.setSetaSote()
|
|
|
+ console.log('this.tableDataAll',this.tableDataAll)
|
|
|
+ let list = JSON.parse(JSON.stringify(this.tableDataAll))
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ if(item.styleCss) {
|
|
|
+ list[index].styleCss = JSON.stringify(item.styleCss)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let styleCss = {
|
|
|
+ tableHeader: this.tableHeader
|
|
|
+ }
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ if(item.styleCss) {
|
|
|
+ list[index].styleCss = JSON.stringify(item.styleCss)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$emit('saveSeat',this.rowAll,this.colsAll,list,JSON.stringify(styleCss))
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -1006,71 +1126,106 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
- padding-top: 20px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ --top-tool-h: 60px;
|
|
|
+ --left-tool-w: 300px
|
|
|
+}
|
|
|
+.sm-box-top-tool {
|
|
|
+ width: 100%;
|
|
|
+ height: var(--top-tool-h);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ .sm-box-top-tool-legend {
|
|
|
+ width: 400px;
|
|
|
+ display: flex;
|
|
|
+ >div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px;
|
|
|
+ >span:first-child {
|
|
|
+ display: block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ >span:last-child {
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-left: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
.sm-box {
|
|
|
- width: 1300px;
|
|
|
- height: 600px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100% - var(--top-tool-h) );
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
--row-w: 26px;
|
|
|
--row-h: 26px;
|
|
|
+ --row-scale: 1;
|
|
|
}
|
|
|
.sm-scroll-box {
|
|
|
- width: 1000px;
|
|
|
+ width: calc( 100% - var(--left-tool-w) );
|
|
|
height: 100%;
|
|
|
border: 1px solid #ccc;
|
|
|
box-sizing: border-box;
|
|
|
background-color: aqua;
|
|
|
-}
|
|
|
+ .row-item-box {
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
|
|
|
-.row-item-box {
|
|
|
- border: 1px dashed #ccc;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- align-items: center;
|
|
|
- padding: 5px;
|
|
|
-}
|
|
|
+ .row-item-box:hover {
|
|
|
+ background-color: rgba(64, 158, 255,0.3);
|
|
|
+ }
|
|
|
|
|
|
-.row-item-box:hover {
|
|
|
- background-color: rgba(64, 158, 255,0.3);
|
|
|
-}
|
|
|
+ .row-item {
|
|
|
+ width: var(--row-w);
|
|
|
+ height: var(--row-h);
|
|
|
+ margin-left: 5px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ > div {
|
|
|
+ width: var(--row-w-i);
|
|
|
+ height: var(--row-h-i);
|
|
|
+ transform: scale(var(--row-scale));
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.row-item {
|
|
|
- width: var(--row-w);
|
|
|
- height: var(--row-h);
|
|
|
- margin-left: 5px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- flex-shrink: 0;
|
|
|
- font-size: 12px;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- justify-content: center;
|
|
|
- overflow: hidden;
|
|
|
- i {
|
|
|
- color: #fff;
|
|
|
+ .row-item:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
|
|
+ border-bottom: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.row-item:first-child {
|
|
|
- margin-left: 0;
|
|
|
-}
|
|
|
|
|
|
-.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
|
|
- border-bottom: none !important;
|
|
|
-}
|
|
|
|
|
|
|
|
|
.table-tool {
|
|
|
- width: calc( 100% - 1000px );
|
|
|
+ width: var(--left-tool-w);
|
|
|
height: 100%;
|
|
|
padding: 0 10px;
|
|
|
box-sizing: border-box;
|
|
@@ -1090,7 +1245,7 @@ export default {
|
|
|
|
|
|
.qu-first-form {
|
|
|
width: 100%;
|
|
|
- height: 200px;
|
|
|
+ height: 250px;
|
|
|
overflow: hidden;
|
|
|
padding-top: 10px;
|
|
|
box-sizing: border-box;
|
|
@@ -1099,7 +1254,7 @@ export default {
|
|
|
|
|
|
.qu-first-info {
|
|
|
width: 100%;
|
|
|
- height: calc( 100% - 200px );
|
|
|
+ height: calc( 100% - 250px );
|
|
|
overflow: hidden;
|
|
|
.qu-first-info-title {
|
|
|
width: 100%;
|
|
@@ -1196,7 +1351,7 @@ export default {
|
|
|
|
|
|
.qu-second-form {
|
|
|
width: 100%;
|
|
|
- height: 240px;
|
|
|
+ height: 300px;
|
|
|
overflow: hidden;
|
|
|
padding-top: 10px;
|
|
|
box-sizing: border-box;
|
|
@@ -1205,7 +1360,7 @@ export default {
|
|
|
|
|
|
.qu-second-info {
|
|
|
width: 100%;
|
|
|
- height: calc( 100% - 320px );
|
|
|
+ height: calc( 100% - 400px );
|
|
|
overflow: hidden;
|
|
|
.qu-second-info-title {
|
|
|
width: 100%;
|