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

<template>
    <div class="sm">
        <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="100"></el-slider>
                </div>
            </div>
            <div class="sm-box-top-tool-legend">
                <div 
                :key="item.id" 
                v-for="(item,index) in seatTypeList"
                >
                    <span :style="{backgroundColor: item.color,border: '1px solid #000'}"></span>
                    <span :style="{color: item.color}">{{ item.name }}</span>    
                </div>
                <div>
                    <span :style="{backgroundColor: '#ccc',border: '1px solid #000'}"></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">
            <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="((width*(whNum/100)+7.5)*item.length)+'px'"
                        align="center"
                        >
                        <!--  自定义头部  -->
                        <template slot="header" slot-scope="scope">
                            <div 
                            class="table-header" 
                            :width="((width*(whNum/100)+7.5)*item.length)+'px'"
                            >
                                <div
                                class="table-header-item"
                                :key="index"
                                v-for="(item,index) in colsAll"
                                >{{ index + 1 }}</div>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <div class="row-item-box" :style='{display: "flex",flexWrap: "nowrap",justifyContent: item.align}'>
                                <div 
                                :class="['row-item',selectList.includes(item1.styleCss.id) ? 'row-item-select': '']"
                                v-for="(item1,index1) in scope.row[item.key]" 
                                :key="item1.styleCss.id"
                                dragSelectType="div"
                                :dragSelectId="item1.styleCss.id"
                                :style="{
                                    backgroundColor: item1.status == 1 ? item1.color?item1.color: '#fff': '#ccc',
                                }"
                                @contextmenu="(e)=>{e.preventDefault();openFormDialogVisible('singleEdit',item1)}"
                                >
                                    <div>
                                        <i style="line-height: 15px;"></i>
                                        <i style="line-height: 15px;">{{ item1.name ? item1.name : '未命名' }}</i>
                                        <i style="line-height: 15px;white-space: nowrap;">{{ item1.rowNo+ '-' +item1.columnNo }} ({{ item1.priority ? item1.priority : '-'  }})</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">
                            <!--  座位管理 -->
                            <div class="qu-second-box">
                                <div class="qu-second-form">
                                    <el-form :model="ruleForm1" size="mini" :rules="rules1" ref="ruleForm1" label-width="80px" class="demo-ruleForm">
                                        <div v-if="!rowAll" style="display: flex;">
                                            <el-form-item label-width="0px" label=" ">
                                                <el-input placeholder="行数" v-model="ruleForm1.rowAll"></el-input>
                                            </el-form-item>
                                            <span style="margin-top: 10px;">—</span>
                                            <el-form-item label-width="0px" label=" ">
                                                <el-input placeholder="列数" v-model="ruleForm1.colsAll"></el-input>
                                            </el-form-item>
                                            <el-button style="height: 28px;margin-top: 7px;margin-left: 5px;" size="mini" type="primary" @click="createTemplate('ruleForm1')">创建模板</el-button>
                                        </div>
                                        <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>  
                                <div class="qu-second-info">
                                    <div class="qu-second-select">
                                        <span>当前选择的是：</span> 
                                        <span v-if="currentRow">{{ currentRow }}排</span>
                                        <span v-if="currentRow">(注：从左至右排序如下)</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-tool">
                                        <span>批量操作:</span>
                                        <i @click="seatSortingFun('rise')">修改名称</i>
                                    </div> -->
                                    <div class="qu-second-info-list">
                                        <transition-group>
                                            <div 
                                            class="qu-second-info-item"
                                            :key="index"
                                            v-for="(item,index) in currentTabelList"
                                            v-dragging="{item: item, list:currentTabelList}"
                                            >
                                                <div >
                                                    <span>名称:{{ item.name ? item.name :'未命名' }}</span>
                                                    <span>优先级:{{ item.priority ? item.priority : '-' }}</span>
                                                </div>
                                                <el-button type="primary" size="mini" @click="openFormDialogVisible('singleEdit',item)">编辑</el-button>
                                            </div>
                                        </transition-group>
                                        
                                    </div>
                                </div>                 
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="批量处理" name="batch">
                            <!-- 批量操作  -->
                            <div class="qu-batch-box">
                                <div class="qu-batch-form">
                                    <el-form :model="queryParams" ref="queryForm" size="mini" label-width="40px">
                                        <el-form-item style="margin-bottom: 5px;" label="坐标" >
                                            <div style="display: flex;">
                                                <el-input
                                                v-model="queryParams.row"
                                                placeholder="行数"
                                                clearable
                                                @keyup.enter.native="handleQuery"
                                                />
                                                <span>—</span>
                                                <el-input
                                                v-model="queryParams.cols"
                                                placeholder="列数"
                                                clearable
                                                @keyup.enter.native="handleQuery"
                                                />
                                            </div>
                                        </el-form-item>
                                        
                                        <el-form-item style="margin-bottom: 5px;" label="类型">
                                            <el-select v-model="queryParams.seatTypeId" placeholder="座位类型" clearable>
                                                <el-option 
                                                v-for="(item,index) in seatTypeList"
                                                :key="item.id"
                                                :label="item.name" 
                                                :value="item.id">
                                                </el-option>
                                                <el-option
                                                    label="未绑定"
                                                    :value="-1"
                                                />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item style="margin-bottom: 5px;" label="名称" >
                                            <div  style="display: flex;">
                                                <el-input
                                                v-model="queryParams.name"
                                                placeholder="座位名称"
                                                clearable
                                                @keyup.enter.native="handleQuery"
                                                />
                                                <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">
                                    <div>
                                        <el-button type="primary" :disabled="multipleSelection.length==0" size="mini" @click="openFormDialogVisible('batchSetaName')">座位名称</el-button>
                                        <el-button type="primary" :disabled="multipleSelection.length==0" size="mini" @click="openFormDialogVisible('batchSetaType')">座位类型</el-button>
                                    </div>
                                    <div>
                                        <el-button type="primary" :disabled="multipleSelection.length==0" size="mini" @click="openFormDialogVisible('batchSetaPriority')">优先级</el-button>
                                        <el-button type="danger" :disabled="multipleSelection.length==0" size="mini" @click="openFormDialogVisible('batchSetaDisable')">座位状态</el-button>
                                    </div>
                                </div>
                                <div class="qu-batch-table">
                                    <el-table
                                        size="mini"
                                        :data="batchTableList"
                                        @selection-change="handleSelectionChange"
                                        style="width: 100%"
                                        height="100%"
                                        row-key="styleCss.id"
                                        >
                                        <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.priority }}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="当前选择" name="select">
                            <!-- 当前选择  -->
                            <div class="qu-select-box">
                                <div class="qu-select-select">
                                    <span>提示：</span> 
                                    <span>鼠标左右键按下拖动可进行多选</span>
                                </div>
                                <div class="qu-select-tool">
                                    <div>
                                        <el-button type="primary" :disabled="selectTabelList.length==0" size="mini" @click="openFormDialogVisible('selectBatchSetaName')">座位名称</el-button>
                                        <el-button type="primary" :disabled="selectTabelList.length==0" size="mini" @click="openFormDialogVisible('selectBatchSetaType')">座位类型</el-button>
                                        <el-button type="primary" :disabled="selectTabelList.length==0" size="mini" @click="openFormDialogVisible('selectBatchSetaPriority')">优先级</el-button>
                                    </div>
                                    <div>
                                        <el-button type="danger" :disabled="selectTabelList.length==0" size="mini" @click="openFormDialogVisible('selectBatchSetaDisable')">座位状态</el-button>
                                        <el-button type="info" :disabled="selectTabelList.length==0" size="mini" @click="delSelectTabelList">清除选择</el-button>
                                    </div>
                                </div>
                                <div class="qu-select-table">
                                    <el-table
                                        size="mini"
                                        :data="selectTabelList"
                                        style="width: 100%"
                                        height="100%"
                                        row-key="styleCss.id"
                                        >
                                        <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.priority }}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </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="120px" >
                <div v-if="['batchSetaName','selectBatchSetaName'].indexOf(formAllType) !=-1">
                    <el-form-item label="创建方式" prop="seatWay">
                        <el-radio-group v-model="formAll.seatWay">
                            <el-radio :label="1">相同</el-radio>
                            <el-radio :label="2">使用行列号</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <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;">+行号+</span>
                            <el-input v-model="formAll.name"></el-input>
                            <span style="white-space: nowrap;">+列号+</span>
                            <el-input v-model="formAll.name2"></el-input>
                        </div>
                        
                    </el-form-item>
                    <el-form-item v-else label="座位名称" prop="name">
                        <el-input v-model="formAll.name"></el-input>
                    </el-form-item>
                </div>
                <div v-if="['batchSetaType','selectBatchSetaType'].indexOf(formAllType) !=-1">
                    <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>
                <div v-if="['batchSetaPriority','selectBatchSetaPriority'].indexOf(formAllType) !=-1">
                    <el-form-item label="设置方式" prop="seatPriorityWay">
                        <el-radio-group v-model="formAll.seatPriorityWay">
                            <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="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>
                </div>
                <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="1">可用</el-radio>
                            <el-radio :label="2">不可用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <!-- 单个编辑  -->
                <div v-if="['singleEdit'].indexOf(formAllType) !=-1">
                    <el-form-item label="座位名称" prop="name">
                        <el-input v-model="formAll.name" placeholder="座位名称"></el-input>
                    </el-form-item>
                    <el-form-item label="优先级" prop="priority">
                        <el-input v-model="formAll.priority" placeholder="优先级"></el-input>
                    </el-form-item>
                    <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>
                    <el-form-item label="座位状态" prop="status">
                        <el-radio-group v-model="formAll.status">
                            <!-- <el-radio :label="0">初始(该状态下不C端显示)</el-radio> -->
                            <el-radio :label="1">可用</el-radio>
                            <el-radio :label="2">不可用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- <el-form-item label="是否禁用" prop="delFlag">
                        <el-radio-group v-model="formAll.delFlag">
                            <el-radio :label="0">禁用</el-radio>
                            <el-radio :label="1">启用</el-radio>
                        </el-radio-group>
                    </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';
import { pageList as getSeatTypeList } from '@/api/seatTypeMr/seatTypeMr'
import selectListMixin from "../mixins/selectList"
export default {
    name: 'sysIndex',
    mixins: [selectListMixin],
    components: {},
    data() {
        return {
            modeEdit: '',
            // 页面渲染的数据
            seatList: [],
            seatTypeList: [],
            tableHeader: [{key: 'A',title: '舞台',length: 0,align: 'center'}],
            tableData: [], // 全部的座位 表格形式
            tableDataAll: [], // 全部的座位
            widthAll: '100%',
            heightAll: '100%',
            width: 65,
            height: 65,
            spacing: 10,
            whNum: 43,


            sortable: null,
            ranking_goods: [],

            
            // tool
            rowAll: null,
            colsAll: 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'] }
                ],
                seatParity: [
                    { 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: {
                /**  修改名称 开始  */
                seatWay: [
                    { required: true, message: '请选择创建方式', trigger: ['blur','change'] }
                ],
                seatParity: [
                    { required: true, message: '请选择座号规律', trigger: ['blur','change'] }
                ],
                seatWell: [
                    { required: true, message: '请选择座号顺序', trigger: ['blur','change'] }
                ],
                colMin: [
                    { required: true, message: '请输入最小座位号', trigger: ['blur','change'] }
                ],
                colMax: [
                    { 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'] }
                ]
                /**  修改名称 结束  */
            },
            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)))
            this.draggingSeatSort()
        });

    },
    methods: {
        /** 获取座位类型  */
        async getSeatTypeListFun(){
            try {
                let res = await getSeatTypeList({
                    pageNum: 1, pageSize: 999
                })
                this.seatTypeList = res.data.rows
            } catch (error) {
                
            }
        },
        /**  重置所有的数据   */
        resetDataAll(){
            this.modeEdit = null

            this.tableData = []
            this.tableDataAll = []
            this.rowAll = null
            this.colsAll = null
            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 = []
                list.forEach((item,index) => {
                    listCopy.push({
                        ...item,
                        styleCss: item.styleCss ? {
                            ...JSON.parse(JSON.parse(item.styleCss)),
                            id: this.tableHeader[0].key + "_"+item.rowNo+"_"+item.columnNo,
                        }: {
                            key: 'A',
                            keyLabel: '舞台',
                            id: this.tableHeader[0].key + "_"+item.rowNo+"_"+item.columnNo,
                        }
                    })
                })
                this.tableDataAll = JSON.parse(JSON.stringify(listCopy))
                console.log("sfasdfasdfasd111====",list)
                console.log("sfasdfasdfasd====",this.tableDataAll)
                this.dataProcess() // 数据整理
            }else {
                this.modeEdit = 'add'
            }
        },
        /**  数组组装  */
        dataProcess(){
            let list = JSON.parse(JSON.stringify(this.tableDataAll))
            let list1 = JSON.parse(JSON.stringify(this.tableData))
            for(let i = 0;i<this.rowAll;i++) {
                list1[i] = {
                    tableId: 'A_'+ i,
                    A: []
                }
                for(let j = 0; j<list.length;j++) {
                    if(i == (list[j].rowNo - 1) ) {
                        list1[i].A.push({
                            ...list[j],
                            styleCss: {
                                key: 'A',
                                keyLabel: '舞台',
                                id: this.tableHeader[0].key + "_"+list[j].rowNo+"_"+list[j].columnNo,
                            }
                        })
                    }
                }
            }

            //  排序
            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)
            if(this.activeName == 'batch') { // 批量操作
                // this.batchTableList = this.tableDataAll
                this.resetQuery()
            }else if(this.activeName=='select'){
                this.addSelectTabelList()
            }else if(this.activeName=='second'){
                if(this.currentRow){
                    let list = this.tableData[this.currentRow-1][this.currentProperty]
                    this.currentTabelList = list && list.length>0 ? JSON.parse(JSON.stringify(list)) : []
                }else {
                    this.currentTabelList = []
                }
                
            }
        },

        /**  创建区域  结束 */
        //  创建模板
        createTemplate(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let list = []
                    for(let i = 1; i <= this.ruleForm1.rowAll;i++){
                        for(let j = 1; j <= this.ruleForm1.colsAll;j++){
                            list.push({
                                tableId: this.tableHeader[0].key + "_"+i+"_"+j,
                                name: i + '排' + j + '座',
                                styleCss: {
                                    key: this.tableHeader[0].key, // 所属区域的key
                                    keyLabel: this.tableHeader[0].title, // 所属区域的名称
                                    sort: j,
                                    id: this.tableHeader[0].key + "_"+i+"_"+j,
                                },
                                rowNo: i,
                                columnNo: j,
                                seatTypeId: null,
                                seatLabel: null,
                                sortId: j, // 排序号码
                                color: '#E6E6FA',// 座位类型对应的颜色
                                //delFlag: 0, // 座位是否可用
                                priority: '', // 座位出票顺序  数字越小越优先
                                status: 2, //0-初始(该状态下不C端显示) 1-可用 2-不可用
                            })
                        }
                    }
                    this.tableDataAll = JSON.parse(JSON.stringify(list))
                    this.rowAll = this.ruleForm1.rowAll
                    this.colsAll = this.ruleForm1.colsAll
                    this.dataProcess() // 数据整理
                }else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        // 增加行/列
        addRanks(type){
            if(type == 'row'){
                this.rowAll = Number(this.rowAll) + 1 
                this.rowAll = this.rowAll
                let list = []
                for(let j = 1; j <= this.colsAll;j++){
                    list.push({
                        tableId: this.tableHeader[0].key + "_"+this.rowAll+"_"+j,
                        name: this.rowAll + '排' + j + '座',
                        styleCss: {
                            key: this.tableHeader[0].key, // 所属区域的key
                            keyLabel: this.tableHeader[0].title, // 所属区域的名称
                            sort: j,
                            id: this.tableHeader[0].key + "_"+this.rowAll+"_"+j,
                        },
                        rowNo: this.rowAll,
                        columnNo: j,
                        seatTypeId: null,
                        seatLabel: null,
                        sortId: j, // 排序号码
                        color: '#E6E6FA',// 座位类型对应的颜色
                        //delFlag: 0, // 座位是否可用
                        priority: '', // 座位出票顺序  数字越小越优先
                        status: 2, //0-初始(该状态下不C端显示) 1-可用 2-不可用
                    })
                }
                this.tableDataAll = this.tableDataAll.concat(list)
                console.log("list======",list)
            }else if(type == 'cols') {
                this.colsAll = Number(this.colsAll) + 1 
                let list = []
                for(let i = 1; i <= this.rowAll;i++){
                    list.push({
                        tableId: this.tableHeader[0].key + "_"+i+"_"+ this.colsAll,
                        name: i + '排' + this.colsAll + '座',
                        styleCss: {
                            key: this.tableHeader[0].key, // 所属区域的key
                            keyLabel: this.tableHeader[0].title, // 所属区域的名称
                            sort: this.colsAll,
                            id: this.tableHeader[0].key + "_"+i+"_"+this.colsAll,
                        },
                        rowNo: i,
                        columnNo: this.colsAll,
                        seatTypeId: null,
                        seatLabel: null,
                        sortId: this.colsAll, // 排序号码
                        color: '#E6E6FA',// 座位类型对应的颜色
                        //delFlag: 0, // 座位是否可用
                        priority: '', // 座位出票顺序  数字越小越优先
                        status: 2, //0-初始(该状态下不C端显示) 1-可用 2-不可用
                    })
                }
                this.tableDataAll = this.tableDataAll.concat(list)
            }
            this.dataProcess() // 数据整理
        },
        /**
        *  创建排数
        */
        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)
        },

        // 计算区域的宽度
        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){
                            list[i].length = this.tableData[j][list[i].key].length
                        }
                    }
                }
            }
            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
        },
        /**  创建座位  结束  */


        //列拖拽
        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);
                },
            });
        },
        

        /**  批量操作 */
        // 批量选择
        handleSelectionChange(val){
            console.log('this.multipleSelection====',val)
            this.multipleSelection = val;
        },
        // 批量操作  打开弹窗编辑
        openFormDialogVisible(type,data){
            if(type == 'batchSetaName') { // 座位名称
                this.formAllType = 'batchSetaName'
                this.formDialogVisibleTitle = "批量修改座位名称"
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                    seatWay: null,
                    seatLaw: null,
                    seatWell: null,
                    colMin: null,
                    colMax: null,
                    name: null,
                    name1: null,
                    name2: null,
                })))
            }
            if(type == 'batchSetaType') { // 座位类型
                this.formAllType = 'batchSetaType'
                this.formDialogVisibleTitle = "批量修改座位类型"
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                    seatTypeId: null,
                })))
            }
            if(type == 'batchSetaPriority') { // 优先级
                this.formAllType = 'batchSetaPriority'
                this.formDialogVisibleTitle = "批量修改优先级"
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                    seatPriorityWay: null,
                    setaPriorityNum: null,
                    seatPriorityPosition: null
                })))
            }
            if(type == 'batchSetaDisable') { // 座位状态
                this.formAllType = 'batchSetaDisable'
                this.formDialogVisibleTitle = "批量修改座位状态"
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                    status: null,
                })))
            }

            if(type == 'selectBatchSetaName') { // 座位名称
                this.formAllType = 'selectBatchSetaName'
                this.formDialogVisibleTitle = "批量修改座位名称"
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                    seatWay: null,
                    seatLaw: null,
                    seatWell: null,
                    colMin: null,
                    colMax: null,
                    name: null,
                    name1: null,
                    name2: null,
                })))
            }
            if(type == 'selectBatchSetaType') { // 座位类型
                this.formAllType = 'selectBatchSetaType'
                this.formDialogVisibleTitle = "批量修改座位类型"
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                    seatTypeId: null,
                })))
            }
            if(type == 'selectBatchSetaPriority') { // 优先级
                this.formAllType = 'selectBatchSetaPriority'
                this.formDialogVisibleTitle = "批量修改优先级"
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                    seatPriorityWay: null,
                    setaPriorityNum: null,
                    seatPriorityPosition: null
                })))
            }
            if(type == 'selectBatchSetaDisable') { // 座位状态
                this.formAllType = 'selectBatchSetaDisable'
                this.formDialogVisibleTitle = "批量修改座位状态"
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                    status: null,
                })))
            }
            if(type == 'singleEdit') { // 单个编辑
                console.log("data===",data)
                this.formAllType = 'singleEdit'
                this.formDialogVisibleTitle = "修改" + data.name
                this.formDialogVisible = true
                this.$set(this,'formAll',JSON.parse(JSON.stringify({
                   ...data
                })))
            }
            this.$nextTick(()=>{
                this.$refs['formAll'].clearValidate()
            })
        },
        //  批量操作  表单验证 
        chekeFormAll(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.formAllType == 'batchSetaType') {
                        this.batchSetaTypeFun()
                    }else if(this.formAllType == 'batchSetaName') {
                        this.batchSetaNameFun()
                    }else if(this.formAllType == 'batchSetaPriority') {
                        this.batchSetaPriorityFun()
                    }else if(this.formAllType == 'selectBatchSetaType') {
                        this.selectBatchSetaTypeFun()
                    }else if(this.formAllType == 'selectBatchSetaName') {
                        this.selectBatchSetaNameFun()
                    }else if(this.formAllType == 'selectBatchSetaPriority') {
                        this.selectBatchSetaPriorityFun()
                    }else if(this.formAllType == 'singleEdit') {
                        this.singleEditFun()
                    }else if(this.formAllType == 'batchSetaDisable') {
                        this.batchSetaDisableFun()
                    }else if(this.formAllType == 'selectBatchSetaDisable') {
                        this.selectBatchSetaDisableFun()
                    }  
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 修改单个
        singleEditFun(){
            let color = ''
            let seatLabel = ''
            this.seatTypeList.forEach((item,index)=>{
                if(this.formAll.seatTypeId == item.id) {
                    color = item.color
                    seatLabel = item.name 
                }
            })
            for(let j=0;j<this.tableDataAll.length;j++){
                if(this.formAll.styleCss.id == this.tableDataAll[j].styleCss.id){
                    this.tableDataAll[j] = {
                        ...this.tableDataAll[j],
                        name: this.formAll.name,
                        priority: this.formAll.priority,
                        seatTypeId: this.formAll.seatTypeId,
                        seatLabel: seatLabel,
                        color: color,// 座位类型对应的颜色
                        status: this.formAll.status,
                        //delFlag: this.formAll.delFlag,
                    }
                    break;
                }    
            }
            this.formDialogVisible = false
            this.dataProcess()
        },
        // 座位状态
        batchSetaDisableFun() {
            let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
            for(let i=0;i<this.multipleSelection.length;i++){
                for(let j=0;j<this.tableDataAll.length;j++){
                    if(this.multipleSelection[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                        listTabel[j] = {
                            ...this.tableDataAll[j],
                            status: this.formAll.status,
                        }
                        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()
        },
        //批量修改座位类型 
        batchSetaTypeFun() {
            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].styleCss.id == this.tableDataAll[j].styleCss.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()
        },  
        // 批量修改名称
        batchSetaNameFun() {
            if(this.formAll.seatWay == 1){ // 相同的
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                for(let i=0;i<this.multipleSelection.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(this.multipleSelection[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                name: this.formAll.name
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }else if(this.formAll.seatWay == 2){
                let name = (this.formAll.name1?this.formAll.name1:'') + '${row}' + (this.formAll.name?this.formAll.name:'') + '${col}' + (this.formAll.name2?this.formAll.name2:'')
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                for(let i=0;i<this.multipleSelection.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(this.multipleSelection[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                name: name.replace('${row}',this.tableDataAll[j].rowNo).replace('${col}',this.tableDataAll[j].columnNo)
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }
            this.formDialogVisible = false
            this.handleQuery()
            this.dataProcess()
        },
        // 批量修改优先级
        batchSetaPriorityFun(){
            if(this.formAll.seatPriorityWay == 1){
                let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
                for(let i=0;i<this.multipleSelection.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(this.multipleSelection[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                priority: this.formAll.setaPriorityNum
                            }
                            break;
                        }    
                    }
                }
                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<listSelect.length;i++){
                    for(let j=0;j<this.tableDataAll.length;j++){
                        if(listSelect[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                            listTabel[j] = {
                                ...this.tableDataAll[j],
                                priority: num
                            }
                            if(this.formAll.seatPriorityWay == 2){
                                num = num + 1
                            }else if(this.formAll.seatPriorityWay == 3){
                                num = num - 1
                            }
                            break;
                        }    
                    }
                }
                this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            }
            this.formDialogVisible = false
            this.handleQuery()
            this.dataProcess()
        },
        /**  批量操作  结束  */

        /** 筛选 */
        handleQuery(){
            let list = []
            list = JSON.parse(JSON.stringify(this.tableDataAll))
            if(this.queryParams.row){
                list = list.filter((item)=>{
                    return item.rowNo == this.queryParams.row
                })
            }
            if(this.queryParams.cols){
                list = list.filter((item)=>{
                    return item.columnNo == this.queryParams.cols
                })
            }
            if(this.queryParams.name){
                list = list.filter((item)=>{
                    return item.name == this.queryParams.name
                })
            }
            if(this.queryParams.seatTypeId){
                list = list.filter((item)=>{
                    if(this.queryParams.seatTypeId == -1) {
                        return !item.seatTypeId
                    }else {
                        return item.seatTypeId == this.queryParams.seatTypeId
                    }
                    
                })
            }
            this.batchTableList = list 
        },
        /**  重置  */
        resetQuery(){
            this.queryParams = {}
            this.handleQuery()
        },

        /** 点击座位排序 座位排序  */
        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()
            }

            let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
            for(let i=0;i<list.length;i++){
                for(let j=0;j<this.tableDataAll.length;j++){
                    if(list[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                        listTabel[j] = {
                            ...this.tableDataAll[j],
                            sortId: i,
                            styleCss: {
                                ...this.tableDataAll[j].styleCss,
                                sort: i,
                            }
                        }
                        break;
                    }    
                }
            }
            this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            console.log("this.tableDataAll=====",this.tableDataAll)
            this.formDialogVisible = false
            this.handleQuery()
            this.dataProcess()
            this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
        },
        // 拖动排序
        draggingSeatSort(){
            let list = JSON.parse(JSON.stringify(this.currentTabelList))
            let listTabel = JSON.parse(JSON.stringify(this.tableDataAll))
            for(let i=0;i<list.length;i++){
                for(let j=0;j<this.tableDataAll.length;j++){
                    if(list[i].styleCss.id == this.tableDataAll[j].styleCss.id){
                        listTabel[j] = {
                            ...this.tableDataAll[j],
                            sortId: i,
                            styleCss: {
                                ...this.tableDataAll[j].styleCss,
                                sort: i,
                            }
                        }
                        break;
                    }    
                }
            }
            this.tableDataAll = JSON.parse(JSON.stringify(listTabel))
            console.log("this.tableDataAll=====",this.tableDataAll)
            console.log("list======",list)
            this.formDialogVisible = false
            this.dataProcess()
            // 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))
        }
    }
};
</script>
 
<style scoped lang="scss">

.sm {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    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: 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: 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:hover {
        background-color: rgba(64, 158, 255,0.3);
    }
    .table-header {
        display: flex;
        padding: 0 20px;
        align-items: center;
        justify-content: center;
    }
    .table-header-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;
        }
    }

    .table-header-item:first-child {
        margin-left: 0;
    } 

    .row-item {
        position: relative;
        width: var(--row-w);
        height: var(--row-h);
        margin-left: 5px;
        border: 1px solid rgba(0,0,0,0.5);
        border-radius: 2px;
        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;
            padding: 5px;
        }
        i {
            color: #000;
        }
    }

    .row-item:first-child {
        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;
    }   
    .row-item-select {
        border: 5px solid #1890ff;
    }
    // .row-item-select::after {
    //     content:"";
    //     display:block;
    //     position:absolute;
    //     top:0;
    //     left:0;
    //     width: 100%;
    //     height: 100%;
    //     border: 5px solid #1890ff;
    //     z-index: 1;
    //     padding: 5px;
    // }    
 
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
        border-bottom: none !important;
    }
}




.table-tool {
    width: var(--left-tool-w);
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
.table-tool-tab {
    width: 100%;
    height: 100%;
    ::v-deep .el-tabs {
        width: 100%;
        height: 100%
    }
    ::v-deep .el-tabs__content {
        width: 100%;
        height: calc( 100% - 60px );
    }

    ::v-deep .el-tab-pane {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
}

.qu-second-box {
    width: 100%;
    height: 100%;
    

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

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

    .qu-second-info {
        width: 100%;
        height: calc( 100% - 60px );
        overflow: hidden;
        .qu-second-select{
            width: 100%;
            height: 30px;
            display: flex;
            align-items: flex-end;
            padding-bottom: 5px;
            span{
                font-size: 16px;
                font-weight: 600;
            }
            span:nth-child(3){
                font-size: 12px;
                margin-left: 10px;
                font-weight: 400;
            }
        }
        .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: 30px;
            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% - 70px );
            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;
                padding: 0 10px;
                >span {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0 20px;
                    font-weight: 600;
                }
                >div {
                    display: flex;
                    flex-direction: column;
                    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: 120px;
        box-sizing: border-box;
        padding-top: 5px;
    }
    .qu-batch-tool {
        border-top: 1px solid #ccc;
        padding-top: 5px;
        height: 80px;
        box-sizing: border-box;
        >div {
            height: 50%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }
    }
    .qu-batch-table {
        height: calc( 100% - 210px );
        box-sizing: border-box;
    }
}

.qu-select-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .qu-select-select {
        height: 30px;
        box-sizing: border-box;
        font-size: 12px;
        display: flex;
        align-items: flex-end;
    }
    .qu-select-tool {
        border-top: 1px solid #ccc;
        padding-top: 5px;
        height: 80px;
        box-sizing: border-box;
        >div {
            height: 50%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }
    }
    .qu-select-table {
        height: calc( 100% - 120px );
        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>