|
|
@@ -0,0 +1,1720 @@
|
|
|
+<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}"></span>
|
|
|
+ <span :style="{color: item.color}">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ >
|
|
|
+ <span :style="{backgroundColor: '#ccc'}"></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"
|
|
|
+ v-for="(item1,index1) in scope.row[item.key]"
|
|
|
+ :key="item1.styleCss.id"
|
|
|
+ dragSelectType="div"
|
|
|
+ :dragSelectId="item1.styleCss.id"
|
|
|
+ :style="{
|
|
|
+ backgroundColor: item1.color?item1.color: '#ccc',
|
|
|
+ border: selectList.includes(item1.styleCss.id) ? '5px solid #1890ff': 'none'
|
|
|
+ }"
|
|
|
+ @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;">${row}</span>
|
|
|
+ <el-input v-model="formAll.name"></el-input>
|
|
|
+ <span style="white-space: nowrap;">${col}</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="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: 60,
|
|
|
+ height: 60,
|
|
|
+ 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'] }
|
|
|
+ ]
|
|
|
+ /** 修改名称 结束 */
|
|
|
+ },
|
|
|
+ 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: 0, //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: 0, //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: 0, //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,
|
|
|
+ })))
|
|
|
+ }
|
|
|
+ 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,
|
|
|
+ })))
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ })))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 批量操作 表单验证
|
|
|
+ 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 num = Number(this.formAll.setaPriorityNum)
|
|
|
+ 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: 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 {
|
|
|
+ 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: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 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>
|
MONSTER-ygh
