|
|
@@ -0,0 +1,1343 @@
|
|
|
+<template>
|
|
|
+ <div class="sm">
|
|
|
+ <div style="width: 1300px;">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <span style="margin-right: 5px;font-size: 14px;">放大/缩小:</span>
|
|
|
+ <div style="width: 100px;">
|
|
|
+ <el-slider input-size="mini" v-model="whNum" :min="16" :max="60"></el-slider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sm-box">
|
|
|
+ <div class="sm-scroll-box">
|
|
|
+ <el-table
|
|
|
+ v-dragSelect="{
|
|
|
+ selectClass: ['.row-item'],
|
|
|
+ change: dragSelectChange,
|
|
|
+ lostItem: dragLostItemChange,
|
|
|
+ reSelect: reSelect
|
|
|
+ }"
|
|
|
+ :data="tableData"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ ref="table"
|
|
|
+ row-key="id"
|
|
|
+ class="exchange_table"
|
|
|
+ :style="{
|
|
|
+ '--row-w': whNum+'px',
|
|
|
+ '--row-h': whNum+'px',
|
|
|
+ }"
|
|
|
+ :data-source="ranking_goods"
|
|
|
+ :cell-class-name="tableCellClassName"
|
|
|
+ @cell-dblclick="cellDblclick"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ fixed=left
|
|
|
+ label="#"
|
|
|
+ align="center"
|
|
|
+ v-if="tableHeader.length!=0"
|
|
|
+ :width="50">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.$index + 1 }}#</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item,index) in tableHeader"
|
|
|
+ :prop="item.key"
|
|
|
+ :label="item.title"
|
|
|
+ :width="((whNum+7.5)*item.length)+'px'"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="row-item-box" :style='{display: "flex",flexWrap: "nowrap",justifyContent: item.align}'>
|
|
|
+ <div
|
|
|
+ class="row-item"
|
|
|
+ v-for="(item1,index1) in scope.row[item.key]"
|
|
|
+ :key="item1.style.id"
|
|
|
+ dragSelectType="div"
|
|
|
+ :dragSelectId="item1.style.id"
|
|
|
+ :style="{backgroundColor: item1.delFlag !=0?'#ccc':item1.color}"
|
|
|
+ >
|
|
|
+ <i style="line-height: 15px;">{{ item1.columnNo }}</i>
|
|
|
+ <i style="line-height: 15px;">{{ item1.name }}</i>
|
|
|
+ <i style="line-height: 15px;">vip</i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 编辑页 -->
|
|
|
+ <div class="table-tool">
|
|
|
+ <div class="table-tool-tab">
|
|
|
+ <el-tabs
|
|
|
+ v-model="activeName"
|
|
|
+ @tab-click="handleClickTab">
|
|
|
+ <el-tab-pane label="创建区域" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="座位管理" name="second"></el-tab-pane>
|
|
|
+ <el-tab-pane label="批量处理" name="batch"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <!-- 创建区域 -->
|
|
|
+ <div
|
|
|
+ v-if="activeName == 'first'"
|
|
|
+ class="qu-first-box">
|
|
|
+ <div class="qu-first-form">
|
|
|
+ <el-form :model="ruleForm" size="mini" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
|
+ <el-form-item label="座位总排数">
|
|
|
+ <el-input v-model="rowAll">
|
|
|
+ <el-button slot="append" @click="createTableList">创建排数</el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="区域名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="座位排列" prop="region">
|
|
|
+ <el-select v-model="ruleForm.region" placeholder="请选择座位排练">
|
|
|
+ <el-option label="靠左" value="flex-start"></el-option>
|
|
|
+ <el-option label="居中" value="center"></el-option>
|
|
|
+ <el-option label="靠右" value="flex-end"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="mini" type="primary" @click="submitForm('ruleForm')">创建区域</el-button>
|
|
|
+ <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="qu-first-info">
|
|
|
+ <div class="qu-first-info-title">
|
|
|
+ <span>已创建的区域</span>
|
|
|
+ <span>(注：从左至右排序如下)</span>
|
|
|
+ </div>
|
|
|
+ <div class="qu-first-info-list">
|
|
|
+ <transition-group>
|
|
|
+ <div
|
|
|
+ class="qu-first-info-item"
|
|
|
+ v-for="(item,index) in tableHeader"
|
|
|
+ :key="index"
|
|
|
+ v-dragging="{item: item, list:tableHeader}"
|
|
|
+ >
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <div>
|
|
|
+ <span @click="editTableHeader(item,index)">编辑</span>
|
|
|
+ <span @click="delTableHeader(item,index)">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition-group>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 座位管理 -->
|
|
|
+ <div v-if="activeName == 'second'" class="qu-second-box">
|
|
|
+ <div class="qu-second-select">
|
|
|
+ <span>当前选择的是：</span>
|
|
|
+ <span v-if="currentRow">{{ currentRow }}排</span>
|
|
|
+ <span v-if="currentRow">--</span>
|
|
|
+ <span v-if="currentLabel">{{ currentLabel }}区</span>
|
|
|
+ </div>
|
|
|
+ <div class="qu-second-form">
|
|
|
+ <el-form :model="ruleForm1" size="mini" :rules="rules1" ref="ruleForm1" label-width="80px" class="demo-ruleForm">
|
|
|
+ <el-form-item label="创建方式" prop="resource">
|
|
|
+ <el-radio-group v-model="ruleForm1.resource">
|
|
|
+ <el-radio :label="1">单个</el-radio>
|
|
|
+ <el-radio :label="2">批量</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="座位类型" prop="seatTypeId">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm1.seatTypeId"
|
|
|
+ placeholder="请选择座位排练">
|
|
|
+ <el-option
|
|
|
+ v-for="(item,index) in seatTypeList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="座位名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm1.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-bottom: 0px" v-if="ruleForm1.resource == 2 " label="座位区间" prop="name">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item label="" label-width="0" prop="name">
|
|
|
+ <el-input v-model="ruleForm1.colMin" placeholder="最小座位号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <span style="white-space: nowrap;">--</span>
|
|
|
+ <el-form-item label="" prop="name">
|
|
|
+ <el-input v-model="ruleForm1.colMax" placeholder="最大座位号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="mini" type="primary" @click="addSeat('ruleForm1')">创建座位</el-button>
|
|
|
+ <el-button size="mini" @click="resetForm1('ruleForm1')">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="qu-second-info">
|
|
|
+ <div class="qu-second-info-title">
|
|
|
+ <span>该区已创建的座位</span>
|
|
|
+ <span>(注：从左至右排序如下)</span>
|
|
|
+ </div>
|
|
|
+ <div class="qu-second-info-tool">
|
|
|
+ <span>快速排序:</span>
|
|
|
+ <i @click="seatSortingFun('rise')">升序</i>
|
|
|
+ <i @click="seatSortingFun('fall')">降序</i>
|
|
|
+ <i @click="seatSortingFun('symmetry')">奇偶对称</i>
|
|
|
+ <i @click="seatSortingFun('reversal')">反转</i>
|
|
|
+ </div>
|
|
|
+ <div class="qu-second-info-list">
|
|
|
+ <div
|
|
|
+ class="qu-second-info-item"
|
|
|
+ v-for="(item,index) in currentTabelList">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 批量操作 -->
|
|
|
+ <div v-if="activeName == 'batch'" class="qu-batch-box">
|
|
|
+ <div class="qu-batch-form">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="mini" label-width="50px">
|
|
|
+ <el-form-item label="排号" prop="menuName" >
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.menuName"
|
|
|
+ placeholder="排号"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="区域" prop="status">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="区域" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in tableHeader"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.title"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ <el-option
|
|
|
+ label="未绑定"
|
|
|
+ :value="-1"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-button style="margin-left: 5px;" type="primary" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="qu-batch-tool">
|
|
|
+ <el-button type="primary" size="mini" @click="openFormDialogVisible">修改区域</el-button>
|
|
|
+ <el-button type="danger" size="mini" @click="batchDisable">批量禁用</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="qu-batch-table">
|
|
|
+ <el-table
|
|
|
+ size="mini"
|
|
|
+ :data="batchTableList"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ style="width: 100%"
|
|
|
+ height="100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ align="center"
|
|
|
+ width="40">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ align="center"
|
|
|
+ label="名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="区域">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.style && scope.row.style.keyLabel }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 编辑区域 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="formDialogVisibleTitle"
|
|
|
+ :visible.sync="formDialogVisible"
|
|
|
+ width="30%"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :model="formAll"
|
|
|
+ :rules="formRules"
|
|
|
+ ref="formAll"
|
|
|
+ label-width="100px" >
|
|
|
+ <div v-if="formAllType=='region'">
|
|
|
+ <el-form-item label="区域名称" prop="title">
|
|
|
+ <el-input v-model="formAll.title"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="座位排练" prop="align">
|
|
|
+ <el-select v-model="formAll.align" placeholder="请选择座位排练">
|
|
|
+ <el-option label="靠左" value="flex-start"></el-option>
|
|
|
+ <el-option label="居中" value="center"></el-option>
|
|
|
+ <el-option label="靠右" value="flex-end"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-if="formAllType=='bindingregion'">
|
|
|
+ <el-form-item label="区域" prop="status">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="区域" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in tableHeader"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.title"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-button style="margin-left: 5px;" type="primary" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="formDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="chekeFormAll('formAll')">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Sortable from "sortablejs";
|
|
|
+import dragSelect from 'ty-drag-select';
|
|
|
+export default {
|
|
|
+ name: 'sysIndex',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 页面渲染的数据
|
|
|
+ seatList: [],
|
|
|
+ seatTypeList: [
|
|
|
+ {
|
|
|
+ "id": "899466154989936640",
|
|
|
+ "createBy": "admin",
|
|
|
+ "createTime": "2023-12-26 11:24:13",
|
|
|
+ "updateBy": "admin",
|
|
|
+ "updateTime": "2023-12-26 11:24:13",
|
|
|
+ "delFlag": 0,
|
|
|
+ "name": "贵宾席-OTA测试",
|
|
|
+ "color": "#EB3286"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "899466065307328512",
|
|
|
+ "createBy": "admin",
|
|
|
+ "createTime": "2023-12-26 11:23:51",
|
|
|
+ "updateBy": "admin",
|
|
|
+ "updateTime": "2023-12-26 11:23:51",
|
|
|
+ "delFlag": 0,
|
|
|
+ "name": "普通席-OTA测试",
|
|
|
+ "color": "#AE3BE7"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "898175951457316864",
|
|
|
+ "createBy": "admin",
|
|
|
+ "createTime": "2023-12-22 21:57:24",
|
|
|
+ "updateBy": "admin",
|
|
|
+ "updateTime": "2023-12-22 21:57:24",
|
|
|
+ "delFlag": 0,
|
|
|
+ "name": "VIP票",
|
|
|
+ "color": "#FF0000"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "898175913469505536",
|
|
|
+ "createBy": "admin",
|
|
|
+ "createTime": "2023-12-22 21:57:15",
|
|
|
+ "updateBy": "admin",
|
|
|
+ "updateTime": "2023-12-22 21:57:15",
|
|
|
+ "delFlag": 0,
|
|
|
+ "name": "贵宾票",
|
|
|
+ "color": "#FFD000"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "898175825946963968",
|
|
|
+ "createBy": "admin",
|
|
|
+ "createTime": "2023-12-22 21:56:54",
|
|
|
+ "updateBy": "admin",
|
|
|
+ "updateTime": "2023-12-22 21:56:54",
|
|
|
+ "delFlag": 0,
|
|
|
+ "name": "普通票",
|
|
|
+ "color": "#0BB8B8"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "898175718375649280",
|
|
|
+ "createBy": "admin",
|
|
|
+ "createTime": "2023-12-22 21:56:29",
|
|
|
+ "updateBy": "admin",
|
|
|
+ "updateTime": "2023-12-26 11:23:02",
|
|
|
+ "delFlag": 0,
|
|
|
+ "name": "普通座位-测试",
|
|
|
+ "color": "#DE5421"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "898175647802290176",
|
|
|
+ "createBy": "admin",
|
|
|
+ "createTime": "2023-12-22 21:56:12",
|
|
|
+ "updateBy": "admin",
|
|
|
+ "updateTime": "2023-12-22 21:56:35",
|
|
|
+ "delFlag": 0,
|
|
|
+ "name": "贵宾座位-测试",
|
|
|
+ "color": "#2FBB60"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": "898175609768341504",
|
|
|
+ "createBy": "admin",
|
|
|
+ "createTime": "2023-12-22 21:56:03",
|
|
|
+ "updateBy": "admin",
|
|
|
+ "updateTime": "2023-12-24 20:17:00",
|
|
|
+ "delFlag": 0,
|
|
|
+ "name": "VIP座位-测试",
|
|
|
+ "color": "#002FFF"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableHeader: [
|
|
|
+ // { title: '左1',key: 'zuo',align: 'flex-end' },
|
|
|
+ // { title: '过道2',key: 'zuo11',align: 'center' },
|
|
|
+ // { title: '中3',key: 'zhong',align: 'center' },
|
|
|
+ // { title: '过道4',key: 'zuo22',align: 'center' },
|
|
|
+ // { title: '右5',key: 'you',align: 'flex-start' },
|
|
|
+ // { title: '右6',key: 'you',align: 'flex-start' },
|
|
|
+ // { title: '右7',key: 'you',align: 'flex-start' },
|
|
|
+
|
|
|
+ // { title: '右8',key: 'you',align: 'flex-start' },
|
|
|
+ // { title: '右9',key: 'you',align: 'flex-start' },
|
|
|
+ ],
|
|
|
+ tableData: [
|
|
|
+ // {
|
|
|
+ // id: this.currentRow+"_"+this.currentProperty+"_"+i,
|
|
|
+ // name: this.ruleForm1.name.replace('${row}',this.currentRow).replace('${col}',i),
|
|
|
+ // status: this.ruleForm1.seatTypeId,
|
|
|
+ // rowNo: this.currentRow,
|
|
|
+ // colNo: i,
|
|
|
+ // sort: i,
|
|
|
+ // style: {key: this.currentProperty}
|
|
|
+ // }
|
|
|
+ ], // 全部的座位 表格形式
|
|
|
+ tableDataAll: [
|
|
|
+ // {
|
|
|
+ // "id": "899524164202352651",
|
|
|
+ // "delFlag": 0,
|
|
|
+ // "auditoriumId": "899466305364123648",
|
|
|
+ // "name": "",
|
|
|
+ // "rowNo": 2,
|
|
|
+ // "columnNo": 9,
|
|
|
+ // "seatTypeId": "899466154989936640",
|
|
|
+ // "seatLabel": "贵宾席-OTA测试",
|
|
|
+ // "priority": 1,
|
|
|
+ // "status": 1,
|
|
|
+ // "sortId": 11,
|
|
|
+ // "color": "#EB3286"
|
|
|
+ // }
|
|
|
+ ], // 全部的座位
|
|
|
+ widthAll: '100%',
|
|
|
+ heightAll: '100%',
|
|
|
+ width: 26,
|
|
|
+ height: 26,
|
|
|
+ spacing: 10,
|
|
|
+ whNum: 26,
|
|
|
+
|
|
|
+
|
|
|
+ sortable: null,
|
|
|
+ ranking_goods: [],
|
|
|
+
|
|
|
+
|
|
|
+ // tool
|
|
|
+ rowAll: null,
|
|
|
+ activeName: 'second',
|
|
|
+
|
|
|
+ // 创建区域
|
|
|
+ ruleForm: {},
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入活动名称', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ region: [
|
|
|
+ { required: true, message: '请选择活动区域', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 创建座位 开始 */
|
|
|
+ // 创建座位
|
|
|
+ ruleForm1: {
|
|
|
+ name: '${row}排${col}座'
|
|
|
+ },
|
|
|
+ rules1: {
|
|
|
+ resource: [
|
|
|
+ { required: true, message: '请选择创建方式', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请选择座位名称', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ seatTypeId: [
|
|
|
+ { required: true, message: '请输入座位类型', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ currentRow: null, // 当前选择的单元格行
|
|
|
+ currentRegion: null, // 当前选择的单元格列
|
|
|
+ currentLabel: null, // 当前选择的单元格列 名称
|
|
|
+ currentProperty: null, // 当前选择的key
|
|
|
+ currentTabelList: [], // 当前单元格的座位列表
|
|
|
+ /** 创建座位 结束 */
|
|
|
+
|
|
|
+ /** 批量操作 */
|
|
|
+ batchTableList: [],
|
|
|
+ multipleSelection: [], // 批量操作选中的
|
|
|
+ queryParams: {},
|
|
|
+
|
|
|
+ /** 编辑区域 开始 */
|
|
|
+ formDialogVisibleTitle: '',
|
|
|
+ formDialogVisible: false, // 弹窗
|
|
|
+ formAll: {},
|
|
|
+ formRules: {},
|
|
|
+ formAllType: '', // region 区域
|
|
|
+ /** 编辑区域 结束 */
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //this.initData()
|
|
|
+ // this.initDataCopy()
|
|
|
+ // setTimeout(() => {
|
|
|
+ // let tbody = document.getElementsByClassName('exchange_table')[0].getElementsByTagName('tbody');
|
|
|
+ // tbody[0] && (tbody[0].className += ' box-table');
|
|
|
+ // this.initSortTable();
|
|
|
+ // }, 1000)
|
|
|
+ // 拖拽事件
|
|
|
+ this.columnDrop()
|
|
|
+
|
|
|
+ this.$dragging.$on("dragged", (result) => {
|
|
|
+ // 将排序后的结果重新赋值
|
|
|
+ this.tableHeader = [].concat(JSON.parse(JSON.stringify(result.value.list)))
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //初始化排序
|
|
|
+ initSortTable() {
|
|
|
+ let that = this;
|
|
|
+ this.sortable = new Sortable(document.getElementsByClassName('box-table')[0], {
|
|
|
+ animation: 150,
|
|
|
+ handle: '.drag-btn',
|
|
|
+ onEnd: (e) => {
|
|
|
+ // 获取排序之后的data数据
|
|
|
+ that.ranking_goods.splice(e.newIndex, 0, that.ranking_goods.splice(e.oldIndex, 1)[0]);
|
|
|
+ var newArray = that.ranking_goods.slice(0);
|
|
|
+ that.ranking_goods = []
|
|
|
+ that.$nextTick(function () {
|
|
|
+ that.ranking_goods = newArray
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 初始化数据 */
|
|
|
+ initData(){
|
|
|
+
|
|
|
+ },
|
|
|
+ /** tab 切换 右侧工具 */
|
|
|
+ handleClickTab(item){
|
|
|
+ console.log("item====",item,this.activeName)
|
|
|
+ if(this.activeName == 'batch') { // 批量操作
|
|
|
+ this.batchTableList = this.tableDataAll
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 创建区域 开始 */
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let key = 'zuo_'+this.tableHeader.length
|
|
|
+ this.tableHeader.push({
|
|
|
+ title: this.ruleForm.name,
|
|
|
+ key,
|
|
|
+ align: this.ruleForm.region,
|
|
|
+ length: 0,
|
|
|
+ width:0,
|
|
|
+ })
|
|
|
+ this.resetForm('ruleForm')
|
|
|
+ if(this.rowAll) {
|
|
|
+ this.createTableList()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ // 删除区域
|
|
|
+ delTableHeader(params,index){
|
|
|
+ let flog = false
|
|
|
+ this.tableDataAll.forEach((item,index)=>{
|
|
|
+ if(item.style && item.style.key == params.key) {
|
|
|
+ flog = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(flog){
|
|
|
+ this.$message.error('区域存在座位，请将座位移到别的区域再删除!');
|
|
|
+ }else{
|
|
|
+ this.$confirm(`确定删除${params.title}区域`, '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ callback: action => {
|
|
|
+ this.tableHeader.splice(index,1)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 编辑区域
|
|
|
+ editTableHeader(item,index){
|
|
|
+ this.formAllType = 'region'
|
|
|
+ this.formDialogVisibleTitle = "编辑区域"
|
|
|
+ this.formDialogVisible = true
|
|
|
+ this.$set(this,'formAll',JSON.parse(JSON.stringify({
|
|
|
+ index: index,
|
|
|
+ ...item
|
|
|
+ })))
|
|
|
+ },
|
|
|
+ // 验证表单
|
|
|
+ chekeFormAll(formName){
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if(this.formAllType == 'region'){
|
|
|
+ this.submitFormAll()
|
|
|
+ }else if(this.formAllType == 'bindingregion'){
|
|
|
+ this.batchBindingArea()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //
|
|
|
+ submitFormAll(){
|
|
|
+ let index = this.formAll.index
|
|
|
+ this.$set(this.tableHeader[index],'title',this.formAll.title)
|
|
|
+ this.$set(this.tableHeader[index],'align',this.formAll.align)
|
|
|
+ // let list = []
|
|
|
+ // this.tableDataAll.forEach((item,index)=>{
|
|
|
+ // if(item.style.key == this.formAll.key) {
|
|
|
+ // list.push({
|
|
|
+ // ...item,
|
|
|
+ // style: {
|
|
|
+ // item.sty
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }else {
|
|
|
+
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ this.formDialogVisible = false
|
|
|
+ },
|
|
|
+ /** 创建区域 结束 */
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建排数
|
|
|
+ */
|
|
|
+ createTableList(){
|
|
|
+ let list = JSON.parse(JSON.stringify(this.tableData))
|
|
|
+ for(let i = 0;i<this.rowAll;i++) {
|
|
|
+ if(this.tableHeader && this.tableHeader.length){
|
|
|
+ let obj = {
|
|
|
+ id: "row_"+i
|
|
|
+ }
|
|
|
+ this.tableHeader.forEach((item,index)=>{
|
|
|
+ obj[item.key] = []
|
|
|
+ })
|
|
|
+ if(list[i] && JSON.stringify(list[i]) != '{}') {
|
|
|
+ list[i] = Object.assign(obj,list[i])
|
|
|
+ }else {
|
|
|
+ list.push(obj)
|
|
|
+ }
|
|
|
+ }else if(!list[i]){
|
|
|
+ list.push({})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableData = JSON.parse(JSON.stringify(list))
|
|
|
+ console.log("this.tableData===",this.tableData)
|
|
|
+ },
|
|
|
+ /** 创建区域 结束 */
|
|
|
+
|
|
|
+
|
|
|
+ /** 创建座位 开始 */
|
|
|
+ tableCellClassName({row, column, rowIndex, columnIndex}){
|
|
|
+ //注意这里是解构
|
|
|
+ //利用单元格的 className 的回调方法，给行列索引赋值
|
|
|
+ row.index=rowIndex;
|
|
|
+ column.index=columnIndex;
|
|
|
+ },
|
|
|
+ /** 点击某个单元格 */
|
|
|
+ cellDblclick(row, column, cell, event){
|
|
|
+ this.currentRow = row.index + 1
|
|
|
+ this.currentRegion = column.index
|
|
|
+ this.currentLabel = column.label
|
|
|
+ this.currentProperty = column.property
|
|
|
+ console.log('this.tableData===', this.tableData)
|
|
|
+ console.log("this.tableData111=====",this.currentRow,this.currentProperty,this.tableData[this.currentRow-1][this.currentProperty])
|
|
|
+
|
|
|
+ let list = this.tableData[this.currentRow-1][this.currentProperty]
|
|
|
+ this.currentTabelList = list && list.length>0 ? JSON.parse(JSON.stringify(list)) : []
|
|
|
+ console.log("row, column, cell, event===",row, column, cell, event)
|
|
|
+ },
|
|
|
+ /** 点击 创建座位 */
|
|
|
+ addSeat(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if(!this.currentRow){
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '请先选择某个区域，左键双击选择!!!',
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let color = ''
|
|
|
+ let seatLabel = ''
|
|
|
+ this.seatTypeList.forEach((item,index)=>{
|
|
|
+ if(this.ruleForm1.seatTypeId == item.id) {
|
|
|
+ color = item.color
|
|
|
+ seatLabel = item.seatLabel
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(this.ruleForm1.resource == 2){ // 批量
|
|
|
+ let list = []
|
|
|
+ let min = Number(this.ruleForm1.colMin)
|
|
|
+ let max = Number(this.ruleForm1.colMax)
|
|
|
+ if(min>max){
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '座位区间输入错误,应该前数小于后数!!!',
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.checkRepeatSeat(min,max)){
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: '座位区间出现重复!!!',
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ for(let i = min;i<=max;i++) {
|
|
|
+ list.push({
|
|
|
+ id: this.currentRow+"_"+this.currentProperty+"_"+i,
|
|
|
+ name: this.ruleForm1.name.replace('${row}',this.currentRow).replace('${col}',i),
|
|
|
+ status: this.ruleForm1.seatTypeId,
|
|
|
+ style: {
|
|
|
+ key: this.currentProperty, // 所属区域的key
|
|
|
+ keyLabel: this.currentLabel, // 所属区域的名称
|
|
|
+ sort: 0,
|
|
|
+ id: this.currentRow+"_"+this.currentProperty+"_"+i,
|
|
|
+ },
|
|
|
+ rowNo: this.currentRow,
|
|
|
+ columnNo: i,
|
|
|
+ seatTypeId: this.ruleForm1.seatTypeId,
|
|
|
+ seatLabel: seatLabel,
|
|
|
+ color: color,// 座位类型对应的颜色
|
|
|
+ delFlag: 0,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.tableDataAll = this.tableDataAll.concat(JSON.parse(JSON.stringify(list)))
|
|
|
+ this.$set(this.tableData[this.currentRow-1],this.currentProperty,this.tableData[this.currentRow-1][this.currentProperty].concat(list))
|
|
|
+ this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
|
|
|
+ }else { // 单个
|
|
|
+ console.log("this.tableData=====",this.tableData)
|
|
|
+ console.log("this.tableData111=====",this.currentRow,this.currentProperty,this.tableData[this.currentRow-1][this.currentProperty])
|
|
|
+ let index = this.tableData[this.currentRow-1][this.currentProperty].length
|
|
|
+ let obj = {
|
|
|
+ id: this.currentRow+"_"+this.currentProperty+"_"+(index+1),
|
|
|
+ name: this.ruleForm1.name,
|
|
|
+ status: this.ruleForm1.seatTypeId,
|
|
|
+ rowNo: this.currentRow,
|
|
|
+ sort: index+1,
|
|
|
+
|
|
|
+ style: {
|
|
|
+ key: this.currentProperty, // 所属区域的key
|
|
|
+ keyLabel: this.currentLabel, // 所属区域的名称
|
|
|
+ sort: 0,
|
|
|
+ id: this.currentRow+"_"+this.currentProperty+"_"+(index+1),
|
|
|
+ },
|
|
|
+ rowNo: this.currentRow,
|
|
|
+ columnNo: index+1,
|
|
|
+ seatTypeId: this.ruleForm1.seatTypeId,
|
|
|
+ seatLabel: seatLabel,
|
|
|
+ color: color,// 座位类型对应的颜色
|
|
|
+ delFlag: 0,
|
|
|
+ }
|
|
|
+ this.tableData[this.currentRow-1][this.currentProperty].push(obj)
|
|
|
+ this.tableDataAll.push(JSON.parse(JSON.stringify(obj)))
|
|
|
+ this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
|
|
|
+ }
|
|
|
+ this.countRegionW()
|
|
|
+
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 检测座位 是否存在重复 */
|
|
|
+ checkRepeatSeat(min,max){
|
|
|
+ let list = this.tableData[this.currentRow-1][this.currentProperty]
|
|
|
+ if(!list||list.length<=0){ return true }
|
|
|
+ let flog = true
|
|
|
+ list.forEach((item)=>{
|
|
|
+ if(item.columnNo<=max&&item.columnNo>=min) {
|
|
|
+ flog = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return flog
|
|
|
+ },
|
|
|
+ /** 清除创建座位的表单 */
|
|
|
+ resetForm1(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 计算区域的宽度
|
|
|
+ countRegionW(){
|
|
|
+ let list = JSON.parse(JSON.stringify(this.tableHeader))
|
|
|
+ for(let i = 0; i < list.length; i++) {
|
|
|
+ for(let j = 0;j < this.tableData.length; j++) {
|
|
|
+ if(this.tableData[j][list[i].key] && this.tableData[j][list[i].key].length){
|
|
|
+ if(list[i].length<this.tableData[j][list[i].key].length){
|
|
|
+ list[i].length = this.tableData[j][list[i].key].length
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log("list=====111",list)
|
|
|
+ this.tableHeader = [].concat(list)
|
|
|
+ },
|
|
|
+ /** 创建座位 结束 */
|
|
|
+
|
|
|
+
|
|
|
+ //列拖拽
|
|
|
+ columnDrop() {
|
|
|
+ // 阻止默认行为
|
|
|
+ document.body.addEventListener("drop", (event) => {
|
|
|
+ event.preventDefault();
|
|
|
+ event.stopPropagation();
|
|
|
+ });
|
|
|
+ const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
|
|
|
+ this.sortable = Sortable.create(wrapperTr, {
|
|
|
+ animation: 180,
|
|
|
+ delay: 0,
|
|
|
+ onEnd: (evt) => {
|
|
|
+ const oldItem = this.dropCol[evt.oldIndex];
|
|
|
+ this.dropCol.splice(evt.oldIndex, 1);
|
|
|
+ this.dropCol.splice(evt.newIndex, 0, oldItem);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ dragSelectChange(e){
|
|
|
+ console.log("e===",e)
|
|
|
+ if(e && e.div) {
|
|
|
+ let list = JSON.parse(JSON.stringify(e.div))
|
|
|
+ console.log("e===",new Set(list))
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ dragLostItemChange(){},
|
|
|
+ reSelect() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 批量操作 */
|
|
|
+
|
|
|
+ // 批量选择
|
|
|
+ handleSelectionChange(val){
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+ // 编辑区域
|
|
|
+ openFormDialogVisible(){
|
|
|
+ this.formAllType = 'bindingregion'
|
|
|
+ this.formDialogVisibleTitle = "批量修改区域"
|
|
|
+ this.formDialogVisible = true
|
|
|
+ this.$set(this,'formAll',JSON.parse(JSON.stringify({
|
|
|
+ status: null,
|
|
|
+ })))
|
|
|
+ },
|
|
|
+ // 批量绑定区域
|
|
|
+ batchBindingArea() {
|
|
|
+ let list = []
|
|
|
+ let currentLabel = ''
|
|
|
+
|
|
|
+ this.tableHeader.forEach((item)=>{
|
|
|
+ if(item.key == this.formAll.status) {
|
|
|
+ currentLabel = item.title
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let listId = []
|
|
|
+ this.multipleSelection.forEach((item)=>{
|
|
|
+ listId.push(item.id)
|
|
|
+ })
|
|
|
+ this.multipleSelection.forEach((item)=>{
|
|
|
+ list.push({
|
|
|
+ ...item,
|
|
|
+ style: {
|
|
|
+ ...item.style,
|
|
|
+ key: this.formAll.status, // 所属区域的key
|
|
|
+ keyLabel: currentLabel, // 所属区域的名称
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 批量禁用
|
|
|
+ batchDisable() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 删选 */
|
|
|
+ handleQuery(){
|
|
|
+
|
|
|
+ if(!this.queryParams.menuName&&!this.queryParams.status){
|
|
|
+ this.batchTableList = this.tableDataAll
|
|
|
+ console.log("list====",this.queryParams)
|
|
|
+ }else {
|
|
|
+ let list = []
|
|
|
+ this.tableDataAll.forEach((item,index)=>{
|
|
|
+ if(this.queryParams.menuName&&this.queryParams.status) {
|
|
|
+ if(item.rowNo==this.queryParams.menuName && item.style.key == this.queryParams.status) {
|
|
|
+ list.push(item)
|
|
|
+ }
|
|
|
+ }else if(this.queryParams.menuName){
|
|
|
+ if(item.rowNo==this.queryParams.menuName) {
|
|
|
+ list.push(item)
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ if(item.style.key == this.queryParams.status) {
|
|
|
+ list.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log("list====",list,this.queryParams)
|
|
|
+ this.batchTableList = list
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ resetQuery(){
|
|
|
+ this.queryParams = {}
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 座位排序 */
|
|
|
+ seatSortingFun(type){
|
|
|
+ let list = JSON.parse(JSON.stringify(this.currentTabelList))
|
|
|
+ if(type=='rise') { // 升序
|
|
|
+ list.sort(function(x,y){
|
|
|
+ let num1 = x.columnNo
|
|
|
+ let num2 = y.columnNo
|
|
|
+ return num1 - num2
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(type=='fall') { // 降序
|
|
|
+ list.sort(function(x,y){
|
|
|
+ let num1 = x.columnNo
|
|
|
+ let num2 = y.columnNo
|
|
|
+ return num2 - num1
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(type=='symmetry') { // 奇偶对称
|
|
|
+ let odd = []
|
|
|
+ let even = []
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ if(item.columnNo%2==0){
|
|
|
+ even.push(item)
|
|
|
+ }else {
|
|
|
+ odd.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ odd.sort(function(x,y){
|
|
|
+ let num1 = x.columnNo
|
|
|
+ let num2 = y.columnNo
|
|
|
+ return num2 - num1
|
|
|
+ })
|
|
|
+ even.sort(function(x,y){
|
|
|
+ let num1 = x.columnNo
|
|
|
+ let num2 = y.columnNo
|
|
|
+ return num1 - num2
|
|
|
+ })
|
|
|
+ list = odd.concat(even)
|
|
|
+ }
|
|
|
+ if(type=='reversal'){
|
|
|
+ list.reverse()
|
|
|
+ }
|
|
|
+ this.$set(this.tableData[this.currentRow-1],this.currentProperty,list)
|
|
|
+ this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+.sm {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.sm-box {
|
|
|
+ width: 1300px;
|
|
|
+ height: 600px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ --row-w: 26px;
|
|
|
+ --row-h: 26px;
|
|
|
+}
|
|
|
+.sm-scroll-box {
|
|
|
+ width: 1000px;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: aqua;
|
|
|
+}
|
|
|
+
|
|
|
+.row-item-box {
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.row-item-box:hover {
|
|
|
+ background-color: rgba(64, 158, 255,0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.row-item {
|
|
|
+ width: var(--row-w);
|
|
|
+ height: var(--row-h);
|
|
|
+ margin-left: 5px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ i {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.row-item:first-child {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
|
|
+ border-bottom: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.table-tool {
|
|
|
+ width: calc( 100% - 1000px );
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+}
|
|
|
+.table-tool-tab {
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.qu-first-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .qu-first-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qu-first-form {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-top: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qu-first-info {
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100% - 200px );
|
|
|
+ overflow: hidden;
|
|
|
+ .qu-first-info-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ span:first-child{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ span:last-child{
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qu-first-info-list {
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100% - 30px );
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .qu-first-info-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 10px;
|
|
|
+ >span {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ >div {
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ display: flex;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ span:first-child {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ span:last-child {
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .qu-first-info-list::-webkit-scrollbar {
|
|
|
+ width: 2px;
|
|
|
+ }
|
|
|
+ .qu-first-info-list::-webkit-scrollbar-track {
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.qu-second-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .qu-second-select{
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ span:nth-child(1){
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ span:not(:first-child){
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qu-second-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qu-second-form {
|
|
|
+ width: 100%;
|
|
|
+ height: 240px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-top: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qu-second-info {
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100% - 320px );
|
|
|
+ overflow: hidden;
|
|
|
+ .qu-second-info-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ span:first-child{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ span:last-child{
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .qu-second-info-tool {
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ span:first-child{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: #1890FF;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ transform: scale(0.9);
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .qu-second-info-list {
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100% - 60px );
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .qu-second-info-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 10px;
|
|
|
+ >span {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ >div {
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ display: flex;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ span:first-child {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ span:last-child {
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .qu-second-info-list::-webkit-scrollbar {
|
|
|
+ width: 2px;
|
|
|
+ }
|
|
|
+ .qu-second-info-list::-webkit-scrollbar-track {
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.qu-batch-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .qu-batch-form {
|
|
|
+ height: 90px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .qu-batch-tool {
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .qu-batch-table {
|
|
|
+ height: calc( 100% - 180px );
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+::v-deep .exchange_table {
|
|
|
+ th {
|
|
|
+ padding: 0 !important;
|
|
|
+ height: 10px;
|
|
|
+ line-height: 10px;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ padding: 0 !important;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .cell {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ td.el-table__cell, th.el-table__cell.is-leaf {
|
|
|
+ border-bottom: none !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
MONSTER-ygh
