|
|
@@ -0,0 +1,961 @@
|
|
|
+<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.id"
|
|
|
+ dragSelectType="div"
|
|
|
+ :dragSelectId="item1.id"
|
|
|
+ >
|
|
|
+ <i style="line-height: 15px;">{{ item1.colNo }}</i>
|
|
|
+ <i style="line-height: 15px;">{{ item1.seatNo }}</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="handleClick">
|
|
|
+ <el-tab-pane label="创建区域" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="座位管理" name="second"></el-tab-pane>
|
|
|
+ <el-tab-pane label="批量处理" name="second"></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>编辑</span>
|
|
|
+ <span>删除</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="region">
|
|
|
+ <el-select v-model="ruleForm1.region" placeholder="请选择座位排练">
|
|
|
+ <el-option label="普通坐" value="qutong"></el-option>
|
|
|
+ <el-option label="VIP坐" value="VIP"></el-option>
|
|
|
+ <el-option label="老人坐" value="old"></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="submitForm1('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-list">
|
|
|
+ <div
|
|
|
+ class="qu-second-info-item"
|
|
|
+ v-for="(item,index) in currentTabelList">
|
|
|
+ <span>{{ item.seatNo }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Sortable from "sortablejs";
|
|
|
+import dragSelect from 'ty-drag-select';
|
|
|
+export default {
|
|
|
+ name: 'sysIndex',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 页面渲染的数据
|
|
|
+ seatList: [],
|
|
|
+ // 后端返回的数据
|
|
|
+ arrList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ seatNo: '1排1座',
|
|
|
+ status: 'N',
|
|
|
+ rowNo: '1',
|
|
|
+ colNo: '1',
|
|
|
+ sort: '0'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ 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: [],
|
|
|
+ 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'] }
|
|
|
+ ],
|
|
|
+ region: [
|
|
|
+ { required: true, message: '请输入座位类型', trigger: ['blur','change'] }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ currentRow: null, // 当前选择的单元格行
|
|
|
+ currentRegion: null, // 当前选择的单元格列
|
|
|
+ currentLabel: null, // 当前选择的单元格列 名称
|
|
|
+ currentProperty: null, // 当前选择的key
|
|
|
+ currentTabelList: [], // 当前单元格的座位列表
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 生成座位 */
|
|
|
+ initDataCopy() {
|
|
|
+ let row = 20
|
|
|
+ let col = 46
|
|
|
+ let list = []
|
|
|
+ let listCopy = []
|
|
|
+
|
|
|
+ this.widthAll = this.spacing * col + this.width * col
|
|
|
+ this.height = this.spacing * row + this.height * row
|
|
|
+ for(let i = 1;i <= row;i++) {
|
|
|
+ if(i==1){
|
|
|
+ col = 19
|
|
|
+ }else if(i==10){
|
|
|
+ col = 30
|
|
|
+ }else {
|
|
|
+ col = 46
|
|
|
+ }
|
|
|
+ for(let j = 1;j <= col;j++) {
|
|
|
+ let key = ''
|
|
|
+ if(j<=10){
|
|
|
+ key = this.tableHeader[0].key
|
|
|
+ }else if(j>10&&j<=40) {
|
|
|
+ key = this.tableHeader[2].key
|
|
|
+ }else{
|
|
|
+ key = this.tableHeader[4].key
|
|
|
+ }
|
|
|
+ list.push({
|
|
|
+ id: i+'_'+j,
|
|
|
+ seatNo: `${i}排${j}座`,
|
|
|
+ status: 'Y',
|
|
|
+ rowNo: i,
|
|
|
+ colNo: j,
|
|
|
+ key,
|
|
|
+ sort: j,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.seatList = [].concat(list)
|
|
|
+
|
|
|
+ console.log("this.seatList ==",this.seatList)
|
|
|
+
|
|
|
+ this.dateSet()
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 设置数据 -- 为自己想要的数据 */
|
|
|
+ dateSet(){
|
|
|
+ let tableList = []
|
|
|
+ let list = []
|
|
|
+
|
|
|
+ // 归类
|
|
|
+ let row = 20
|
|
|
+ let list_1 = []
|
|
|
+ let list_1_1 = []
|
|
|
+ for(let i = 1; i<=row;i++) {
|
|
|
+ list_1_1 = []
|
|
|
+ for(let j = 0;j < this.seatList.length;j++) {
|
|
|
+ if(i == this.seatList[j].rowNo){
|
|
|
+ list_1_1.push(JSON.parse(JSON.stringify(this.seatList[j])))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ list_1.push([].concat(list_1_1))
|
|
|
+ }
|
|
|
+ console.log("归类===",list_1)
|
|
|
+
|
|
|
+ // 每排分区归类
|
|
|
+ let list_2 = []
|
|
|
+ let list_2_1 = {} // 每一排
|
|
|
+ let list_2_2= []
|
|
|
+ let tableheader = JSON.parse(JSON.stringify(this.tableHeader))
|
|
|
+ for(let k = 0;k < row;k++) {
|
|
|
+ list_2_1 = {}
|
|
|
+ for(let i = 0; i < tableheader.length;i++) {
|
|
|
+ tableheader[i]['width'] = 1
|
|
|
+ list_2_2 = []
|
|
|
+ for(let j = 0;j < list_1[k].length;j++) {
|
|
|
+ if(tableheader[i].key == list_1[k][j].key){
|
|
|
+ list_2_2.push(JSON.parse(JSON.stringify(list_1[k][j])))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(list_2_2.length>tableheader[i]['width']) {
|
|
|
+ tableheader[i]['width'] = list_2_2.length
|
|
|
+ }
|
|
|
+ list_2_1[tableheader[i].key] = [].concat(list_2_2)
|
|
|
+ }
|
|
|
+ list_2.push(JSON.parse(JSON.stringify(list_2_1)))
|
|
|
+ }
|
|
|
+ console.log("每排分区归类===",list_2)
|
|
|
+ console.log("表头1===",tableheader)
|
|
|
+ //this.$set(this,"tableHeader",JSON.parse(JSON.stringify(tableheader)))
|
|
|
+ this.tableHeader = [].concat(JSON.parse(JSON.stringify(tableheader)))
|
|
|
+ console.log("表头===",this.tableHeader)
|
|
|
+ this.tableData = [].concat(list_2)
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ initData(){
|
|
|
+ // 找到行的最大值
|
|
|
+ const rowMax = this.findObjInArrMax(this.arrList, 'rowNo', true);
|
|
|
+ // 找到列的最大值
|
|
|
+ const colMax = this.findObjInArrMax(this.arrList, 'colNo', true);
|
|
|
+ const rowNoMax = parseInt(rowMax.rowNo) + 1;
|
|
|
+ const colNoMax = parseInt(colMax.colNo) + 1;
|
|
|
+ // 将一维数组装成二维数组
|
|
|
+ let list = [];
|
|
|
+ for (var index = 0; index < rowNoMax; index++) {
|
|
|
+ list[index] = [];
|
|
|
+ for (var index1 = 0; index1 < colNoMax; index1++) {
|
|
|
+ list[index][index1] = {};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 后端返回的数据组合到二维数组里面
|
|
|
+ list.forEach((item1, index1) => {
|
|
|
+ item1.forEach((item2, index2) => {
|
|
|
+ this.arrList.forEach((item, index) => {
|
|
|
+ item.isCheck = false;
|
|
|
+ list[item.rowNo][item.colNo] = item;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log('list', list);
|
|
|
+ this.seatList = list;
|
|
|
+ },
|
|
|
+ // 点击座位表
|
|
|
+ seatClk(item) {
|
|
|
+ // 如果是可以选择，而且没有选中状态
|
|
|
+ if (item.status === 'Y' && !item.isCheck) {
|
|
|
+ item.isCheck = true;
|
|
|
+ } else if (item.status === 'Y' && item.isCheck) {
|
|
|
+ item.isCheck = false;
|
|
|
+ }
|
|
|
+ console.log(item);
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ // 找到数组对象中的最大值
|
|
|
+ findObjInArrMax(list, atr, returnVal) {
|
|
|
+ let res = Math.max.apply(
|
|
|
+ Math,
|
|
|
+ list.map((item) => {
|
|
|
+ return item[atr];
|
|
|
+ })
|
|
|
+ );
|
|
|
+ if (returnVal) {
|
|
|
+ return list.filter((item) => {
|
|
|
+ return item[atr] == res;
|
|
|
+ })[0];
|
|
|
+ } else {
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 找到数组对象中的最小值
|
|
|
+ findObjInArrMin(list, atr, returnVal) {
|
|
|
+ let res = Math.min.apply(
|
|
|
+ Math,
|
|
|
+ list.map((item) => {
|
|
|
+ return item[atr];
|
|
|
+ })
|
|
|
+ );
|
|
|
+ if (returnVal) {
|
|
|
+ return list.filter((item) => {
|
|
|
+ return item[atr] == res;
|
|
|
+ })[0];
|
|
|
+ } else {
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showImage(item){
|
|
|
+ let src = ''
|
|
|
+ if(item.status === 'N'){
|
|
|
+ src = 'https://hijinka.oss-cn-shanghai.aliyuncs.com/uploads/mall1/20220307/669dde5d9fe28a377c151cadecb8dd65.png'
|
|
|
+ }else if(item.status === 'Y' && !item.isCheck){
|
|
|
+ src = 'https://hijinka.oss-cn-shanghai.aliyuncs.com/uploads/mall1/20220307/123044531581e70133020f0265bcabb2.png'
|
|
|
+ }else if(item.status === 'Y' && item.isCheck) {
|
|
|
+ src = 'https://hijinka.oss-cn-shanghai.aliyuncs.com/uploads/mall1/20220307/899c7f9e0365ce6d97f9d5fe89ffe878.png'
|
|
|
+ }
|
|
|
+ return src
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 右侧工具 */
|
|
|
+ handleClick(){
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 创建区域 开始 */
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建排数
|
|
|
+ */
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ submitForm1(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if(this.ruleForm1.resource == 2){ // 批量
|
|
|
+ let list = []
|
|
|
+ let min = Number(this.ruleForm1.colMin)
|
|
|
+ let max = Number(this.ruleForm1.colMax)
|
|
|
+ for(let i = min;i<=max;i++) {
|
|
|
+ list.push({
|
|
|
+ id: this.currentRow+"_"+this.currentProperty+"_"+i,
|
|
|
+ seatNo: this.ruleForm1.name.replace('${row}',this.currentRow).replace('${col}',i),
|
|
|
+ status: this.ruleForm1.region,
|
|
|
+ rowNo: this.currentRow,
|
|
|
+ colNo: i,
|
|
|
+ sort: i,
|
|
|
+ style: {key: this.currentProperty}
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$set(this.tableData[this.currentRow-1],this.currentProperty,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
|
|
|
+ this.tableData[this.currentRow-1][this.currentProperty].push({
|
|
|
+ id: this.currentRow+"_"+this.currentProperty+"_"+(index+1),
|
|
|
+ seatNo: this.ruleForm1.name,
|
|
|
+ status: this.ruleForm1.region,
|
|
|
+ rowNo: this.currentRow,
|
|
|
+ colNo: index+1,
|
|
|
+ sort: index+1
|
|
|
+ })
|
|
|
+ this.currentTabelList = JSON.parse(JSON.stringify(this.tableData[this.currentRow-1][this.currentProperty]))
|
|
|
+ }
|
|
|
+ this.countRegionW()
|
|
|
+
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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(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() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</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: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.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: 16px;
|
|
|
+ }
|
|
|
+ span:last-child{
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qu-second-info-list {
|
|
|
+ width: 100%;
|
|
|
+ height: calc( 100% - 30px );
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::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