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

<template>
    <div class="sm">
        <div style="width: 1300px;">
            <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="100"></el-slider>
                </div>
            </div>
            <div>

            </div>
        </div>
        <div class="sm-box">
            <div class="sm-scroll-box">
                <el-table
                    v-dragSelect="{
                        selectClass: ['.row-item'],
                        change: dragSelectChange,
                        lostItem: dragLostItemChange,
                        reSelect: reSelect
                    }"
                    :data="tableData"
                    width="100%"
                    height="100%"
                    ref="table" 
                    row-key="id"
                    class="exchange_table"
                    :style="{
                        '--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"
                    @cell-dblclick="cellDblclick"
                    
                    >
                        <el-table-column 
                        type="index"
                        fixed=left
                        label="#"
                        align="center"
                        v-if="tableHeader.length!=0"
                        :width="50">
                            <template slot-scope="scope">
                                <span>{{ scope.$index + 1 }}#</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                        v-for="(item,index) in tableHeader"
                        :prop="item.key"
                        :label="item.title"
                        :width="((whNum+7.5)*item.length)+'px'"
                        align="center"
                        >
                        <template slot-scope="scope">
                            <div class="row-item-box" :style='{display: "flex",flexWrap: "nowrap",justifyContent: item.align}'>
                                <div 
                                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.delFlag !=0?'#ccc':item1.color}"
                                >
                                    <div>
                                        <i style="line-height: 15px;">{{ item1.columnNo }}</i>
                                        <i style="line-height: 15px;">{{ item1.name }}</i>
                                        <i style="line-height: 15px;">vip</i>
                                    </div>   
                                </div>
                            </div>
                        </template>
                        </el-table-column>
                </el-table>
            </div>
            <!--  编辑页  -->
            <div class="table-tool">
                <div class="table-tool-tab">
                    <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-tab-pane label="批量处理" name="batch"></el-tab-pane>
                    </el-tabs>
                </div>
                <!--  创建区域  -->
                <div 
                v-if="activeName == 'first'"
                class="qu-first-box">
                    <div class="qu-first-form">
                        <el-form :model="ruleForm" size="mini" :rules="rules" ref="ruleFormRegion" label-width="100px" 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="区域名称" prop="name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="座位排列" prop="region">
                                <el-select v-model="ruleForm.region" placeholder="请选择座位排练">
                                    <el-option label="靠左" value="flex-start"></el-option>
                                    <el-option label="居中" value="center"></el-option>
                                    <el-option label="靠右" value="flex-end"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <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>
                    <div class="qu-first-info">
                        <div class="qu-first-info-title">
                            <span>已创建的区域</span>
                            <span>(注：从左至右排序如下)</span>
                        </div> 
                        <div class="qu-first-info-list">
                            <transition-group>
                                <div 
                                class="qu-first-info-item"
                                v-for="(item,index) in tableHeader"
                                :key="index"
                                v-dragging="{item: item, list:tableHeader}"
                                >
                                    <span>{{ item.title }}</span>
                                    <div>
                                        <span @click="editTableHeader(item,index)">编辑</span>
                                        <span @click="delTableHeader(item,index)">删除</span>
                                    </div>
                                </div>
                            </transition-group>
                            
                        </div>
                    </div>
                </div>
                <!--  座位管理 -->
                <div v-if="activeName == 'second'" class="qu-second-box">
                    <div class="qu-second-select">
                        <span>当前选择的是：</span> 
                        <span v-if="currentRow">{{ currentRow }}排</span>
                        <span v-if="currentRow">--</span>  
                        <span v-if="currentLabel">{{ currentLabel }}区</span>  
                    </div>
                    <div class="qu-second-form">
                        <el-form :model="ruleForm1" size="mini" :rules="rules1" ref="ruleForm1" label-width="80px" class="demo-ruleForm">
                            <el-form-item label="创建方式" prop="resource">
                                <el-radio-group v-model="ruleForm1.resource">
                                    <el-radio :label="1">单个</el-radio>
                                    <el-radio :label="2">批量</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="座位类型" prop="seatTypeId">
                                <el-select 
                                v-model="ruleForm1.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>
                            <el-form-item label="座位名称" prop="name">
                                <el-input v-model="ruleForm1.name"></el-input>
                            </el-form-item>
                            <el-form-item style="margin-bottom: 0px"  v-if="ruleForm1.resource == 2 " label="座位区间" prop="name">
                                <div style="display: flex;">
                                    <el-form-item label="" label-width="0" prop="name">
                                        <el-input v-model="ruleForm1.colMin" placeholder="最小座位号"></el-input>
                                    </el-form-item>
                                    <span style="white-space: nowrap;">--</span>
                                    <el-form-item label="" prop="name">
                                        <el-input v-model="ruleForm1.colMax"  placeholder="最大座位号"></el-input>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                            
                            <el-form-item>
                                <el-button size="mini" type="primary" @click="addSeat('ruleForm1')">创建座位</el-button>
                                <el-button size="mini" @click="resetForm1('ruleForm1')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>  
                    <div class="qu-second-info">
                        <div class="qu-second-info-title">
                            <span>该区已创建的座位</span>
                            <span>(注：从左至右排序如下)</span>
                        </div> 
                        <div class="qu-second-info-tool">
                            <span>快速排序:</span>
                            <i @click="seatSortingFun('rise')">升序</i>
                            <i @click="seatSortingFun('fall')">降序</i>
                            <i @click="seatSortingFun('symmetry')">奇偶对称</i>
                            <i @click="seatSortingFun('reversal')">反转</i>
                        </div> 
                        <div class="qu-second-info-list">
                            <div 
                            class="qu-second-info-item"
                            v-for="(item,index) in currentTabelList">
                                <span>{{ item.name }}</span>
                            </div>
                        </div>
                    </div>                 
                </div>

                <!-- 批量操作  -->
                <div v-if="activeName == 'batch'" class="qu-batch-box">
                    <div class="qu-batch-form">
                        <el-form :model="queryParams" ref="queryForm" size="mini" label-width="50px">
                            <el-form-item label="排号" prop="menuName" >
                                <el-input
                                v-model="queryParams.menuName"
                                placeholder="排号"
                                clearable
                                @keyup.enter.native="handleQuery"
                                />
                            </el-form-item>
                            <el-form-item label="区域" prop="status">
                                <div style="display: flex;">
                                    <el-select v-model="queryParams.status" placeholder="区域" clearable>
                                    <el-option
                                        v-for="item in tableHeader"
                                        :key="item.key"
                                        :label="item.title"
                                        :value="item.key"
                                    />
                                    <el-option
                                        label="未绑定"
                                        :value="-1"
                                    />
                                    </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>
                        </el-form>
                    </div>
                    <div class="qu-batch-tool">
                        <el-button type="primary" size="mini" @click="openFormDialogVisible">修改区域</el-button>
                        <el-button type="danger" size="mini" @click="batchDisable">批量禁用</el-button>
                        
                    </div>
                    <div class="qu-batch-table">
                        <el-table
                            size="mini"
                            :data="batchTableList"
                            @selection-change="handleSelectionChange"
                            style="width: 100%"
                            height="100%"
                            >
                            <el-table-column
                            type="selection"
                            align="center"
                            width="40">
                            </el-table-column>
                            <el-table-column
                            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.styleCss && scope.row.styleCss.keyLabel ? scope.row.styleCss.keyLabel : '暂未分区' }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

            </div>
        </div>

        <!--  编辑区域   -->
        <el-dialog
            :title="formDialogVisibleTitle"
            :visible.sync="formDialogVisible"
            width="30%"
            append-to-body
            >
            <el-form 
            :model="formAll" 
            :rules="formRules" 
            ref="formAll" 
            label-width="100px" >
                <div v-if="formAllType=='region'">
                    <el-form-item label="区域名称" prop="title">
                        <el-input v-model="formAll.title"></el-input>
                    </el-form-item>
                    <el-form-item label="座位排练" prop="align">
                        <el-select v-model="formAll.align" placeholder="请选择座位排练">
                            <el-option label="靠左" value="flex-start"></el-option>
                            <el-option label="居中" value="center"></el-option>
                            <el-option label="靠右" value="flex-end"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div v-if="formAllType=='bindingregion'">
                    <el-form-item label="区域" prop="status">
                        <div style="display: flex;">
                            <el-select v-model="formAll.status" placeholder="区域" clearable>
                                <el-option
                                    v-for="item in tableHeader"
                                    :key="item.key"
                                    :label="item.title"
                                    :value="item.key"
                                />
                            </el-select>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="formDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="chekeFormAll('formAll')">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
 
<script>
import Sortable from "sortablejs";
import dragSelect from 'ty-drag-select';
export default {
    name: 'sysIndex',
    components: {},
    data() {
        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"
                // }
            ], // 全部的座位
            widthAll: '100%',
            heightAll: '100%',
            width: 60,
            height: 60,
            spacing: 10,
            whNum: 100,


            sortable: null,
            ranking_goods: [],

            
            // tool
            rowAll: null,
            activeName: 'second',
            
            // 创建区域
            ruleForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: ['blur','change'] }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: ['blur','change'] }
                ],
            },

            /**   创建座位  开始 */
            // 创建座位
            ruleForm1: {
                name: '${row}排${col}座'
            },
            rules1: {
                resource: [
                    { required: true, message: '请选择创建方式', trigger: ['blur','change'] }
                ],
                name: [
                    { required: true, message: '请选择座位名称', trigger: ['blur','change'] }
                ],
                seatTypeId: [
                    { required: true, message: '请输入座位类型', trigger: ['blur','change'] }
                ],
            },
            currentRow: null, // 当前选择的单元格行
            currentRegion: null, // 当前选择的单元格列
            currentLabel: null, // 当前选择的单元格列 名称
            currentProperty: null, // 当前选择的key
            currentTabelList: [], // 当前单元格的座位列表
            /**   创建座位  结束 */

            /** 批量操作   */
            batchTableList: [],
            multipleSelection: [],  //  批量操作选中的
            queryParams: {},

            /** 编辑区域 开始  */
            formDialogVisibleTitle: '',
            formDialogVisible: false, // 弹窗
            formAll: {},
            formRules: {},
            formAllType: '', // region 区域
            /** 编辑区域 结束  */
        };
    },
    mounted() {
        //this.initData()
        // this.initDataCopy()
        // setTimeout(() => {
        //   let tbody = document.getElementsByClassName('exchange_table')[0].getElementsByTagName('tbody');
        //   tbody[0] && (tbody[0].className += ' box-table');
        //   this.initSortTable();
        // }, 1000)
        // 拖拽事件
        this.columnDrop() 

        this.$dragging.$on("dragged", (result) => {
            // 将排序后的结果重新赋值
            this.tableHeader = [].concat(JSON.parse(JSON.stringify(result.value.list)))
        });

    },
    methods: {
        //初始化排序
        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
                })
            }
            })

        },

        /**  初始化数据  */
        initData(row,list,type){
            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)
            })
            this.tableDataAll = JSON.parse(JSON.stringify(listCopy))
            //this.createTableList()
            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 = {
                        id: "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
                        })
                    }
                }
               
            })
            console.log("this.tableData===",this.tableData)
            this.tableData = JSON.parse(JSON.stringify(list1))
            this.countRegionW()
        },
        /** tab 切换 右侧工具 */
        handleClickTab(item){
            console.log("item====",item,this.activeName)
            if(this.activeName == 'batch') { // 批量操作
                this.batchTableList = this.tableDataAll
            }
        },
        /**  创建区域  开始 */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let key = 'zuo_'+this.tableHeader.length
                this.tableHeader.push({
                    title: this.ruleForm.name,
                    key,
                    align: this.ruleForm.region,
                    length: 0,
                    width:0,
                })
                this.resetForm(formName)
                if(this.rowAll) {
                    this.createTableList()
                }
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 删除区域
        delTableHeader(params,index){
            let flog = false
            this.tableDataAll.forEach((item,index)=>{
                if(item.styleCss && item.styleCss.key == params.key) {
                    flog = true
                }
            })
            if(flog){
                this.$message.error('区域存在座位，请将座位移到别的区域再删除!');
            }else{
                this.$confirm(`确定删除${params.title}区域`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    callback: action => {
                        this.tableHeader.splice(index,1)
                    }
                });
            }
        },
        // 编辑区域
        editTableHeader(item,index){
            this.formAllType = 'region'
            this.formDialogVisibleTitle = "编辑区域"
            this.formDialogVisible = true
            this.$set(this,'formAll',JSON.parse(JSON.stringify({
                index: index,
                ...item
            })))
        },
        // 验证表单
        chekeFormAll(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.formAllType == 'region'){
                        this.submitFormAll()
                    }else if(this.formAllType == 'bindingregion'){
                        console.log("sdfsdfsdfsdfds",this.formAll)
                        this.batchBindingArea()
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 
        submitFormAll(){
            let index = this.formAll.index
            this.$set(this.tableHeader[index],'title',this.formAll.title)
            this.$set(this.tableHeader[index],'align',this.formAll.align)
            // let list = []
            // this.tableDataAll.forEach((item,index)=>{
            //     if(item.style.key == this.formAll.key) {
            //         list.push({
            //             ...item,
            //             style: {
            //                 item.sty
            //             }
            //         })
            //     }else {

            //     }
            // })
            this.formDialogVisible = false
        },
        /**  创建区域  结束 */

        /**
        *  创建排数
        */
        createTableList(){
            let list = JSON.parse(JSON.stringify(this.tableData))
            for(let i = 0;i<this.rowAll;i++) {
                if(this.tableHeader && this.tableHeader.length){
                    let obj = {
                        id: "row_"+i
                    }
                    this.tableHeader.forEach((item,index)=>{
                        obj[item.key] = []
                    })
                    if(list[i] && JSON.stringify(list[i]) != '{}') {
                        list[i] = Object.assign(obj,list[i])
                    }else {
                        list.push(obj)
                    }
                }else if(!list[i]){
                    list.push({})
                }
            }
            this.tableData = JSON.parse(JSON.stringify(list))
            console.log("this.tableData===",this.tableData)
        },
        /**  创建区域  结束 */


        /**  创建座位  开始  */
        tableCellClassName({row, column, rowIndex, columnIndex}){
            //注意这里是解构
            //利用单元格的 className 的回调方法，给行列索引赋值
            row.index=rowIndex;
            column.index=columnIndex;
        },
        /**  点击某个单元格   */
        cellDblclick(row, column, cell, event){
            this.currentRow = row.index + 1
            this.currentRegion = column.index
            this.currentLabel = column.label
            this.currentProperty = column.property
            console.log('this.tableData===', this.tableData)
            console.log("this.tableData111=====",this.currentRow,this.currentProperty,this.tableData[this.currentRow-1][this.currentProperty])

            let list = this.tableData[this.currentRow-1][this.currentProperty]
            this.currentTabelList = list && list.length>0 ? JSON.parse(JSON.stringify(list)) : []
            console.log("row, column, cell, event===",row, column, cell, event)
        },
        /**  点击  创建座位   */
        addSeat(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                if(!this.currentRow){
                    this.$message({
                        showClose: true,
                        message: '请先选择某个区域，左键双击选择!!!',
                        type: 'error'
                    });
                    return
                }
                let color = ''
                let seatLabel = ''
                this.seatTypeList.forEach((item,index)=>{
                    if(this.ruleForm1.seatTypeId == item.id) {
                        color = item.color
                        seatLabel = item.seatLabel
                    }
                })
                if(this.ruleForm1.resource == 2){ // 批量
                    let list = []
                    let min = Number(this.ruleForm1.colMin)
                    let max = Number(this.ruleForm1.colMax)
                    if(min>max){
                        this.$message({
                            showClose: true,
                            message: '座位区间输入错误,应该前数小于后数!!!',
                            type: 'error'
                        });
                        return
                    }
                    if(!this.checkRepeatSeat(min,max)){
                        this.$message({
                            showClose: true,
                            message: '座位区间出现重复!!!',
                            type: 'error'
                        });
                        return
                    }
                    for(let i = min;i<=max;i++) {
                        list.push({
                            id: this.currentRow+"_"+this.currentProperty+"_"+i,
                            name: this.ruleForm1.name.replace('${row}',this.currentRow).replace('${col}',i),
                            status: this.ruleForm1.seatTypeId,
                            styleCss: {
                                key: this.currentProperty, // 所属区域的key
                                keyLabel: this.currentLabel, // 所属区域的名称
                                sort: 0,
                                id: this.currentRow+"_"+this.currentProperty+"_"+i,
                            },
                            rowNo: this.currentRow,
                            columnNo: i,
                            seatTypeId: this.ruleForm1.seatTypeId,
                            seatLabel: seatLabel,
                            color: color,// 座位类型对应的颜色
                            delFlag: 0,
                        })
                    }
                    this.tableDataAll = this.tableDataAll.concat(JSON.parse(JSON.stringify(list)))
                    this.$set(this.tableData[this.currentRow-1],this.currentProperty,this.tableData[this.currentRow-1][this.currentProperty].concat(list))
                    this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
                }else { // 单个
                    console.log("this.tableData=====",this.tableData)
                    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),
                        name: this.ruleForm1.name,
                        status: this.ruleForm1.seatTypeId,
                        rowNo: this.currentRow,
                        sort: index+1,

                        styleCss: {
                            key: this.currentProperty, // 所属区域的key
                            keyLabel: this.currentLabel, // 所属区域的名称
                            sort: 0,
                            id: this.currentRow+"_"+this.currentProperty+"_"+(index+1),
                        },
                        rowNo: this.currentRow,
                        columnNo: index+1,
                        seatTypeId: this.ruleForm1.seatTypeId,
                        seatLabel: seatLabel,
                        color: color,// 座位类型对应的颜色
                        delFlag: 0,
                    }
                    this.tableData[this.currentRow-1][this.currentProperty].push(obj)
                    this.tableDataAll.push(JSON.parse(JSON.stringify(obj)))
                    this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
                }
                this.countRegionW()
                
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        /**  检测座位 是否存在重复 */
        checkRepeatSeat(min,max){
            let list = this.tableData[this.currentRow-1][this.currentProperty]
            if(!list||list.length<=0){ return true }
            let flog = true
            list.forEach((item)=>{
                if(item.columnNo<=max&&item.columnNo>=min) {
                    flog = false
                }
            })
            return flog
        },
        /**  清除创建座位的表单 */
        resetForm1(formName) {
            this.$refs[formName].resetFields();
        },

        // 计算区域的宽度
        countRegionW(){
            let list = JSON.parse(JSON.stringify(this.tableHeader))
            for(let i = 0; i < list.length; i++) {
                for(let j = 0;j < this.tableData.length; j++) {
                    if(this.tableData[j][list[i].key] && this.tableData[j][list[i].key].length){
                        if(j==0) {
                            list[i].length = this.tableData[j][list[i].key].length
                        }else if(list[i].length<this.tableData[j][list[i].key].length){
                            list[i].length = this.tableData[j][list[i].key].length
                        }
                    }
                }
            }
            console.log("list=====111",list)
            this.tableHeader = [].concat(list)
        },
        /**  创建座位  结束  */


        //列拖拽
        columnDrop() {
            // 阻止默认行为
            document.body.addEventListener("drop", (event) => {
                event.preventDefault();
                event.stopPropagation();
            });
            const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
            this.sortable = Sortable.create(wrapperTr, {
                animation: 180,
                delay: 0,
                onEnd: (evt) => {
                    const oldItem = this.dropCol[evt.oldIndex];
                    this.dropCol.splice(evt.oldIndex, 1);
                    this.dropCol.splice(evt.newIndex, 0, oldItem);
                },
            });
        },

        dragSelectChange(e){
            console.log("e===",e)
            if(e && e.div) {
                let  list = JSON.parse(JSON.stringify(e.div))
                console.log("e===",new Set(list))
            }
            
        },
        dragLostItemChange(){},
        reSelect() {

        },

        /**  批量操作 */

        // 批量选择
        handleSelectionChange(val){
            console.log('this.multipleSelection====',val)
            this.multipleSelection = val;
        },
        // 编辑区域
        openFormDialogVisible(){
            this.formAllType = 'bindingregion'
            this.formDialogVisibleTitle = "批量修改区域"
            this.formDialogVisible = true
            this.$set(this,'formAll',JSON.parse(JSON.stringify({
                status: null,
            })))
        },
        // 批量绑定区域
        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
                }
            })
            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() {

        },

        /** 删选 */
        handleQuery(){
           
            if(!this.queryParams.menuName&&!this.queryParams.status){
                this.batchTableList = this.tableDataAll
                console.log("list====",this.queryParams)
            }else {
                let list = []
                this.tableDataAll.forEach((item,index)=>{
                    if(this.queryParams.menuName&&this.queryParams.status) {
                        if(item.rowNo==this.queryParams.menuName && item.styleCss.key == this.queryParams.status) {
                            list.push(item)
                        }
                    }else if(this.queryParams.menuName){
                        if(item.rowNo==this.queryParams.menuName) {
                            list.push(item)
                        }
                    }else {
                        if(item.styleCss.key == this.queryParams.status) {
                            list.push(item)
                        }
                    }
                })
                console.log("list====",list,this.queryParams)
                this.batchTableList = list
            }  
             
        },
        resetQuery(){
            this.queryParams = {}

        },

        /** 座位排序  */
        seatSortingFun(type){
            let list = JSON.parse(JSON.stringify(this.currentTabelList))
            if(type=='rise') { // 升序
                list.sort(function(x,y){
                    let num1 = x.columnNo
                    let num2 = y.columnNo
                    return num1 - num2
                })
            }
            if(type=='fall') { // 降序
                list.sort(function(x,y){
                    let num1 = x.columnNo
                    let num2 = y.columnNo
                    return num2 - num1
                })
            }
            if(type=='symmetry') { // 奇偶对称
                let odd = []
                let even = []
                list.forEach((item,index)=>{
                    if(item.columnNo%2==0){
                        even.push(item)
                    }else {
                       odd.push(item)
                    }
                })

                odd.sort(function(x,y){
                    let num1 = x.columnNo
                    let num2 = y.columnNo
                    return num2 - num1
                })
                even.sort(function(x,y){
                    let num1 = x.columnNo
                    let num2 = y.columnNo
                    return num1 - num2
                })
                list = odd.concat(even)
            }
            if(type=='reversal'){
                list.reverse()
            }
            this.$set(this.tableData[this.currentRow-1],this.currentProperty,list)
            this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
        },

        /**   保存座位   */
        saveSeat() {
            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
            }
            this.$emit('saveSeat',list,JSON.stringify(styleCss))
        }
    }
};
</script>
 
<style scoped lang="scss">

.sm {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sm-box {
    width: 1300px;
    height: 600px; 
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    --row-w: 26px;
    --row-h: 26px;
    --row-scale: 1;
}
.sm-scroll-box {
    width: 1000px;
    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: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: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 );
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
.table-tool-tab {
    height: 40px;
}

.qu-first-box {
    width: 100%;
    height: 100%;
    .qu-first-row {
        display: flex;
        align-items: center;
    }

    .qu-first-form {
        width: 100%;
        height: 200px;
        overflow: hidden;
        padding-top: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
    }

    .qu-first-info {
        width: 100%;
        height: calc( 100% - 200px );
        overflow: hidden;
        .qu-first-info-title {
            width: 100%;
            height: 25px;
            display: flex;
            align-items: flex-end;
            padding-bottom: 5px;
            span:first-child{
                font-size: 16px;
            }
            span:last-child{
                font-size: 12px;
                margin-left: 10px;
            }
        }

        .qu-first-info-list {
            width: 100%;
            height: calc( 100% - 30px );
            box-sizing: border-box;
            padding-right: 5px;
            overflow: hidden;
            overflow-y: auto;
            .qu-first-info-item {
                width: 100%;
                height: 40px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                margin-bottom: 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                border-radius: 10px;
                >span {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0 20px;
                    font-weight: 600;
                }
                >div {
                    display: flex;
                    span {
                        display: flex;
                        padding: 0 10px;
                        height: 100%;
                        align-items: center;
                        font-size: 12px;
                        white-space: nowrap;
                    }
                    span:first-child {
                        color: #409eff;
                    }
                    span:last-child {
                        color: #f56c6c;
                    }
                }
            }
        }
        .qu-first-info-list::-webkit-scrollbar {
            width: 2px;
        }
        .qu-first-info-list::-webkit-scrollbar-track {
            background-color: #ccc;
        }
    }
}

.qu-second-box {
    width: 100%;
    height: 100%;
    .qu-second-select{
        width: 100%;
        height: 25px;
        display: flex;
        align-items: flex-end;
        padding-bottom: 5px;
        span:nth-child(1){
            font-size: 16px;
        }
        span:not(:first-child){
            font-size: 18px;
            margin-left: 10px;
            font-weight: 600;
        }
    }

    .qu-second-row {
        display: flex;
        align-items: center;
    }

    .qu-second-form {
        width: 100%;
        height: 240px;
        overflow: hidden;
        padding-top: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
    }

    .qu-second-info {
        width: 100%;
        height: calc( 100% - 320px );
        overflow: hidden;
        .qu-second-info-title {
            width: 100%;
            height: 25px;
            display: flex;
            align-items: flex-end;
            padding-bottom: 5px;
            span:first-child{
                font-size: 14px;
                font-weight: 600;
            }
            span:last-child{
                font-size: 12px;
                margin-left: 10px;
            }
        }
        .qu-second-info-tool {
            width: 100%;
            height: 25px;
            display: flex;
            align-items: center;
            padding-bottom: 5px;
            span:first-child{
                font-size: 14px;
                font-weight: 600;
            }
            i {
                font-size: 12px;
                margin-left: 10px;
                background-color: #1890FF;
                color: #fff;
                padding: 5px;
                transform: scale(0.9);
                border-radius: 5px;
                cursor: pointer;
            }
            
        }
        .qu-second-info-list {
            width: 100%;
            height: calc( 100% - 60px );
            box-sizing: border-box;
            padding-right: 5px;
            overflow: hidden;
            overflow-y: auto;
            .qu-second-info-item {
                width: 100%;
                height: 40px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                margin-bottom: 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                border-radius: 10px;
                >span {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0 20px;
                    font-weight: 600;
                }
                >div {
                    display: flex;
                    span {
                        display: flex;
                        padding: 0 10px;
                        height: 100%;
                        align-items: center;
                        font-size: 12px;
                        white-space: nowrap;
                    }
                    span:first-child {
                        color: #409eff;
                    }
                    span:last-child {
                        color: #f56c6c;
                    }
                }
            }
        }
        .qu-second-info-list::-webkit-scrollbar {
            width: 2px;
        }
        .qu-second-info-list::-webkit-scrollbar-track {
            background-color: #ccc;
        }
    }
}


.qu-batch-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    .qu-batch-form {
        height: 90px;
        box-sizing: border-box;
    }
    .qu-batch-tool {
        height: 40px;
        box-sizing: border-box;
    }
    .qu-batch-table {
        height: calc( 100% - 180px );
        box-sizing: border-box;
    }
}


::v-deep .exchange_table {
  th {
    padding: 0 !important;
    height: 10px;
    line-height: 10px;
  }
  td {
    padding: 0 !important;
    height: 30px;
    line-height: 30px;
  }
  .cell {
    height: 100%;
  }

  td.el-table__cell, th.el-table__cell.is-leaf {
        border-bottom: none !important;
    }
}


</style>