1. 优化

src/views/venue/performanceHallMr/dialog/seatTemplateEdit copy 2.vue

@@ -1,391 +0,0 @@
-<!--
- * @Description: 新增/编辑弹框
- * @Author: Sugar.
- * @Date: 2023-11-24 13:55:00
- * @LastEditors: Sugar.
- * @LastEditTime: 22023-11-24 13:55:00
- * @FilePath: \cattle_webui\src\views\venue\performanceHallMr\dialog\seatTemplateEdit.vue
- * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
--->
-<template>
-  <el-dialog
-    :title="title"
-    :visible.sync="open"
-    width="90%"
-    append-to-body
-    :close-on-click-modal="false"
-    @close="cancel"
-    :fullscreen="dialogFull"
-    class="ygh-dialog"
-  >
-    <template slot="title">
-        <div class="avue-crud__dialog__header">
-            <span class="el-dialog__title">
-            <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
-              座位配置
-            </span>
-          <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
-            <i class="el-icon-full-screen"></i>
-          </div>
-        </div>
-      </template>
-    <div class="dialog">
-      <seatManagementTable />
-    </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="cancel">取消</el-button>
-      <el-button
-        type="primary"
-        @click="submitForm"
-        v-loading.fullscreen.lock="loading"
-        element-loading-text="提交中..."
-        element-loading-spinner="el-icon-loading"
-        element-loading-background="rgba(0, 0, 0, 0.8)"
-      >
-        <span v-if="loading">提交中...</span>
-        <span v-else>保存</span>
-      </el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-import { pageList } from '@/api/seatTypeMr/seatTypeMr'
-import { seatSaveAndEdit, saveAndEdit, getSelectById } from "@/api/performanceHallMr/performanceHallMr";
-import { getToken } from "@/utils/auth";
-import seatManagementTable from "../model/seatManagementTable"
-export default {
-  name: "seatTemplateEdit",
-  that: this,
-  components: {
-    seatManagementTable
-  },
-  data() {
-    return {
-      title: "编辑",
-      model: "EDIT",
-      activeName: '01',
-      open: false,
-      seatType: false,
-      loading: false,
-      seatWidth: null,
-      seatMap: {
-        row: 0,
-        col: 0,
-      },
-      seatMapRow: '',
-      seatMapCol: '',
-      seatSetMap: {},
-      seatTemplateMap: [],
-      colSeatMap: {},
-      form: {
-        id: undefined,
-        status: "1",
-        content: "",
-      },
-      seatList: [],
-      auditoriumId: '',
-      zoom: 10,
-      boxWidth: '',
-      initWidth: '',
-      moveStatus: false,
-      mouseMap: {},
-      mousemoveMap: {},
-      scrollTop: 0,
-      scrollLeft: 0,
-      scrollEvenTop: 0,
-      scrollEvenLeft: 0,
-      dragStatus: true,
-      canNum: [],
-      unCanNum: [],
-
-      drawForm: {
-        status: '1'
-      },
-      drawDialogType: false,
-      drawRules: {
-        status: [{ required: true, message: "请选择状态", trigger: ["change","blur"] }],
-        seatTypeId: [{ required: true, message: "请选择座位类型", trigger: ["change","blur"] }]
-      },
-
-      dialogFull: false,
-    };
-  },
-  methods: {
-    /**
-     * 打开弹框
-     * @date 2023-11-22
-     * @param {any} obj
-     * @returns {any}
-     */
-    openDialog(title, obj) {
-      this.open = true;
-      this.seatType = false;
-      this.getSeatTypeList();
-      this.colSeatMap = {}
-      this.drawForm = {};
-      this.$set(this.drawForm, 'status', '1')
-      this.boxWidth = 0;
-      this.dragStatus = true;
-      this.$set(this.form, 'status', '1')
-      if (obj){ // 编辑模式
-        this.title = "座位模板";
-        this.auditoriumId = obj.id;
-        this.$set(this.seatMap, 'row', obj.rows);
-        this.$set(this.seatMap, 'col', obj.cols);
-        this.$set(this, 'seatMapRow', obj.rows);
-        this.$set(this, 'seatMapCol', obj.cols);
-
-        this.getSelectByIdApi(obj)
-      }else{ // 新增模式
-        this.seatType = true;
-        this.title = "座位模板";
-        this.$nextTick(() => {
-          this.$refs["form"].clearValidate();
-        });
-      }
-    },
-    /** 获取详情 */
-    getSelectByIdApi(row) {
-      const id = row.id
-      getSelectById(id).then(response => {
-        const dataList = response.data;
-        this.$nextTick(() =>{
-          dataList.forEach(item => {
-            if(item.status == 2){
-              item.color = '#7d7d7e';
-            }
-            this.$set(this.colSeatMap, item.sortId + '_', item);
-          })
-          this.seatType = true;
-        })
-      });
-    },
-    /** 座位类型列表 */
-    getSeatTypeList() {
-      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
-        .then(response => {
-            this.seatList = response.data.rows;
-          }
-        );
-    },
-    /**
-     * 保存
-     * @date 2023-11-22
-     * @returns {any}
-     */
-    submitForm() {
-      let that = this;
-      this.$refs["form"].validate(async (valid) => {
-        if (valid) {
-          let postList = []
-          for (const codeKey in this.colSeatMap) {
-            postList.push(this.colSeatMap[codeKey])
-          }
-          try {
-            this.loading = true;
-            const { code } = await saveAndEdit({ id: this.auditoriumId, rows: this.seatMap.row, cols: this.seatMap.col });
-            if (code === 200) {
-              let postList = []
-              for (const codeKey in this.colSeatMap) {
-                postList.push(this.colSeatMap[codeKey])
-              }
-              const { code } = await seatSaveAndEdit(postList);
-              if (code === 200) {
-                that.$message.success("操作成功!");
-                that.$emit("getList");
-                that.cancel();
-              }
-            }
-          } catch (error) {
-          } finally {
-            this.loading = false;
-          }
-        }
-      });
-    },
-    /**
-     * 重置
-     * @date 2023-11-22
-     * @returns {any}
-     */
-    reset() {
-      this.$refs["form"].resetFields();
-      this.form.id = undefined;
-    },
-    /**
-     * 关闭弹框
-     * @date 2023-11-22
-     * @returns {any}
-     */
-    cancel() {
-      this.reset();
-      this.open = false;
-    },
-    /**
-     * 上传成功
-     * @date 2023-11-22
-     * @param {any} res
-     * @returns {any}
-     */
-    handleAvatarSuccess(res) {
-      if (res.code === 200) {
-        // this.form.mainImg = res?.data?.url;
-        this.$set(this.form, 'mainImg', res?.data?.url)
-      }
-    },
-    /**
-     * 上传文件之前之前
-     * @date 2023-11-22
-     * @param {any} file
-     * @returns {any}
-     */
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === "image/jpeg" || "image/png";
-      if (!isJPG) {
-        this.$message.error("上传头像图片只能是jpg或png格式!");
-      }
-      return isJPG;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.dialog {
-  padding: 0 30px;
-  max-height: 75vh;
-  overflow-y: auto;
-}
-.draw-dialog-class{
-  border-radius: 10px;
-  height: 240px;
-  width: 220px;
-  background-color: #fff;
-  position: absolute;
-  z-index: 55;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-.dialog {
-  padding: 0 30px;
-
-  .title-class{
-    text-align: center;
-    color: #6e6e6e;
-    margin: 10px auto;
-  }
-  .box-top-class{
-    .stage-class{
-      margin: 10px auto;
-      width: 160px;
-      height: 80px;
-      border: 2px solid #7d7d7e;
-      text-align: center;
-      line-height: 80px;
-    }
-  }
-  .box-class ::-webkit-scrollbar{ /*滚动条基本样式，高度*/
-    width:10px;height:10px;
-  }
-  .box-class{
-    width: 100%;
-    height: 500px;
-    border: 2px solid #7d7d7e;
-    border-radius: 4px;
-    padding: 10px;
-
-    .box-bottom-class{
-      //border: 2px solid #5656c2;
-      //margin-top: 15px;
-      //padding-left: 4px;
-
-      .seat-tag{
-        display: inline-block;
-        border: 1px solid #7d7d7e;
-        margin-right: 2px;
-        cursor: pointer;
-        background: url("../../../../assets/images/seat-icon.png") no-repeat;
-        background-size: 100% 100%;
-        position: relative;
-
-        &:hover{
-          opacity: 0.8;
-        }
-      }
-      .seat-p-class{
-        position: absolute;
-        left: 0;
-        top: 0;
-        text-align: center;
-        font-size: 18px;
-        display: inline-block;
-        color: white;
-      }
-    }
-  }
-
-  .upload-btn {
-    width: 100px;
-    height: 100px;
-    background-color: #fbfdff;
-    border: dashed 1px #c0ccda;
-    border-radius: 5px;
-    i {
-      font-size: 30px;
-      margin-top: 20px;
-    }
-    &-text {
-      margin-top: -10px;
-    }
-  }
-  .avatar {
-    cursor: pointer;
-  }
-}
-
-//这里注意：我当前将css样式加载全局上，如果单页添加样式需要每个样式前添加 ‘/deep/’ 修饰符
-
-/*  dialog*/
-.ygh-dialog ::v-deep .el-dialog__header {
-  padding: 16px 20px 15px;
-}
-.el-dialog__headerbtn{
-  top: 15px;
-}
-
-/*dialog header*/
-.el-dialog__header{
-  background: #e3eaed;
-}
-.avue-crud__dialog__header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-.el-dialog__title {
-  color: rgba(0,0,0,.85);
-  font-weight: 500;
-  word-wrap: break-word;
-}
-.avue-crud__dialog__menu {
-  padding-right: 20px;
-  float: left;
-}
-.avue-crud__dialog__menu i {
-  color: #909399;
-  font-size: 15px;
-}
-.el-icon-full-screen{
-  cursor: pointer;
-}
-.el-icon-full-screen:before {
-  content: "\e719";
-}
-
-</style>

src/views/venue/performanceHallMr/dialog/seatTemplateEdit.vue

@@ -11,155 +11,26 @@
   <el-dialog
     :title="title"
     :visible.sync="open"
-    width="1200px"
+    width="90%"
     append-to-body
     :close-on-click-modal="false"
     @close="cancel"
+    :fullscreen="dialogFull"
+    class="ygh-dialog"
   >
-    <div class="dialog">
-      <el-row>
-        <el-col :span="18" style="padding-right: 15px">
-          <div class="title-class">
-            <el-row>
-              <el-col :span="8" style="padding-right: 15px">
-                <el-input placeholder="请输入" v-model.number="seatMapRow">
-                  <template slot="append">行</template>
-                </el-input>
-              </el-col>
-              <el-col :span="8" style="padding-left: 15px">
-                <el-input placeholder="请输入" v-model.number="seatMapCol">
-                  <template slot="append">列</template>
-                </el-input>
-              </el-col>
-              <el-col :span="8" style="padding-left: 15px">
-                <el-button @click="setRowCol(seatMapRow, seatMapCol)" style="width: 100%;" type="primary">生成模板</el-button>
-              </el-col>
-            </el-row>
-          </div>
-          <div class="box-top-class" style="position:relative;">
-            <div class="stage-class">舞台</div>
-            <el-button :type="!dragStatus ? 'danger' : 'primary'" size="mini" @click="dragEven" style="position: absolute; bottom: 0; right: 0" icon="el-icon-rank">{{dragStatus ? '开始设置' : '关闭设置'}}</el-button>
-          </div>
-          <div class="box-class scroll-container-class"
-               v-if="seatType"
-               @contextmenu.prevent.stop="contextmenuEven"
-               @wheel.prevent="wheelHandle"
-               ref="scrollContainer"
-               style="position: relative; overflow: hidden; padding: 0;"
-               >
-            <!--  画框确定  -->
-            <div class="draw-dialog-class" id="draw-dialog-type" v-show="drawDialogType">
-              <div class="box-class" style="border: none; height: 280px" @wheel.stop="wheelDrawHandle">
-                <el-form :model="drawForm" ref="drawForm" :rules="drawRules" label-width="100px" label-position="top">
-                  <el-form-item label="" prop="status">
-                    <el-radio v-model="drawForm.status" label="1">可售</el-radio>
-                    <el-radio v-model="drawForm.status" label="2">不可售</el-radio>
-                  </el-form-item>
-                  <el-form-item label="" prop="seatTypeId" v-if="drawForm.status == 1">
-                    <el-select
-                      v-model="drawForm.seatTypeId"
-                      placeholder="座位类型"
-                      clearable
-                      style="width: 100%"
-                      @change="seatTypeDrawChange"
-                    >
-                      <el-option
-                        v-for="dict in seatList"
-                        :key="dict.id"
-                        :label="dict.name"
-                        :value="dict.id"
-                      />
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item label="" v-if="drawForm.status == 1">
-                    <el-input
-                      v-model.number="drawForm.priority"
-                      placeholder="座位自动分配优先级"
-                      clearable
-                      style="width: 100%;"
-                    />
-                  </el-form-item>
-                  <el-form-item >
-                    <el-button @click="drawDialogClen">取 消</el-button>
-                    <el-button @click="drawDialogOk" style="float: right" type="primary">确 定</el-button>
-                  </el-form-item>
-                </el-form>
-              </div>
-            </div>
-            <div style="position: relative;">
-              <div class="box-bottom-class scroll-container" style="position: absolute; width: 100%; height: 100%" id="drawBox" v-drag :style="{ width: boxWidth ? boxWidth + 'px' : '100%', height: boxWidth ? boxWidth + 'px' : '100%'}" ref="seatBox" v-if="seatType">
-                <div v-for="row in seatMap.row" :key="row" style="display: inline-block">
-                  <div class="seat-tag"
-                       :id="(((row - 1) * seatMap.col) + index + '_')"
-                       @click.stop="setSeatTemplateMap((((row - 1) * seatMap.col) + index + '_'))"
-                       v-for="(col, index) in seatMap.col"
-                       :key="col"
-                       :style="{
-                       width: seatWidth + 'px',
-                       height: seatWidth + 'px',
-                       backgroundColor: colSeatMap[((row - 1) * seatMap.col) + index + '_'] && colSeatMap[((row - 1) * seatMap.col) + index + '_'].color ? colSeatMap[((row - 1) * seatMap.col) + index + '_'].color : ''}"
-                  >
-                    <div v-if="seatWidth > 160" :style="{paddingTop: (seatWidth / 4) + 'px', width: seatWidth + 'px', height: seatWidth + 'px'}" class="seat-p-class">
-                      <p style="font-size: 16px !important;"><span>{{colSeatMap[((row - 1) * seatMap.col) + index + '_'].name ? colSeatMap[((row - 1) * seatMap.col) + index + '_'].name : (colSeatMap[((row - 1) * seatMap.col) + index + '_'].rowNo + '排' + (colSeatMap[((row - 1) * seatMap.col) + index + '_'].columnNo) + '座')}}</span><span style="font-size: 14px !important;" v-if="colSeatMap[((row - 1) * seatMap.col) + index + '_'].seatLabel">({{colSeatMap[((row - 1) * seatMap.col) + index + '_'].seatLabel}})</span></p>
-                      <p style="font-size: 14px !important;" v-if="colSeatMap[((row - 1) * seatMap.col) + index + '_'].priority">自动分配优先级 <span>({{colSeatMap[((row - 1) * seatMap.col) + index + '_'].priority}})</span></p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+    <template slot="title">
+        <div class="avue-crud__dialog__header">
+            <span class="el-dialog__title">
+            <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
+              座位配置
+            </span>
+          <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
+            <i class="el-icon-full-screen"></i>
           </div>
-          <div style="margin-top: 5px">
-            总座位数：{{ seatMap.row * seatMap.col || 0}}； 可售数量：<span style="color: #67c23a">{{ canNum.length }}</span>； 不可售数量：<span style="color: #f56c6c">{{ unCanNum.length }}</span>
-          </div>
-        </el-col>
-        <el-col :span="6" style="padding-left: 15px">
-          <div class="title-class">座位设置</div>
-          <div class="box-class" style="height: 540px">
-            <el-form :model="form" ref="form" label-width="100px" label-position="top">
-              <el-form-item label="是否可售">
-                <el-radio v-model="form.status" label="1">可售</el-radio>
-                <el-radio v-model="form.status" label="2">不可售</el-radio>
-              </el-form-item>
-              <el-form-item label="座位类型">
-                <el-select
-                  v-model="form.seatTypeId"
-                  placeholder="座位类型"
-                  clearable
-                  style="width: 100%"
-                  @change="seatTypeChange"
-                >
-                  <el-option
-                    v-for="dict in seatList"
-                    :key="dict.id"
-                    :label="dict.name"
-                    :value="dict.id"
-                  />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="座位自动分配优先级">
-                <el-input
-                  v-model.number="form.priority"
-                  placeholder="优先级"
-                  clearable
-                  style="width: 100%;"
-                />
-              </el-form-item>
-              <el-form-item label="自定义座位名">
-                <el-input
-                  v-model="form.name"
-                  placeholder="自定义座位名"
-                  clearable
-                  style="width: 100%;"
-                />
-              </el-form-item>
-
-              <el-form-item >
-                <el-button @click="setSeatMap" style="width: 100%; margin-top: 20px" type="primary">确 定</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-col>
-      </el-row>
+        </div>
+      </template>
+    <div class="dialog">
+      <seatManagementTable />
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancel">取消</el-button>
@@ -182,9 +53,13 @@
 import { pageList } from '@/api/seatTypeMr/seatTypeMr'
 import { seatSaveAndEdit, saveAndEdit, getSelectById } from "@/api/performanceHallMr/performanceHallMr";
 import { getToken } from "@/utils/auth";
+import seatManagementTable from "../model/seatManagementTable"
 export default {
   name: "seatTemplateEdit",
   that: this,
+  components: {
+    seatManagementTable
+  },
   data() {
     return {
       title: "编辑",
@@ -232,96 +107,11 @@ export default {
         status: [{ required: true, message: "请选择状态", trigger: ["change","blur"] }],
         seatTypeId: [{ required: true, message: "请选择座位类型", trigger: ["change","blur"] }]
       },
+
+      dialogFull: false,
     };
   },
   methods: {
-    drawDialogClen() {
-      let drawDialog = document.getElementById("draw-dialog-type");
-      drawDialog.style.display = "none";
-      let drawDiv = document.getElementById("drawDiv");
-      drawDiv.remove();
-
-      this.$forceUpdate();
-    },
-    // 画框座位设置
-    drawDialogOk() {
-      this.$refs["drawForm"].validate(async (valid) => {
-        if (valid) {
-          let drawDialog = document.getElementById("drawDiv");
-          // 获取div元素的坐标点
-          let rect = drawDialog.getBoundingClientRect();
-          let P_div = document.getElementById("drawBox");
-
-          let P_div_list = P_div.children; // 获取行子集
-          let select_div = [];
-          // 循环判断是否在选择框里
-          for (let i = 0; i < P_div_list.length; i++) {
-            if(P_div_list[i] && P_div_list[i].childNodes) {
-              let child_div = P_div_list[i].children
-              for (let j = 0; j <child_div.length; j++) {
-                let rect_div = child_div[j].getBoundingClientRect();
-                if(rect.top < (rect_div.top + rect_div.height) && rect.bottom > (rect_div.bottom - rect_div.height) &&
-                  rect.left < (rect_div.left + rect_div.width) && rect.right > (rect_div.right - rect_div.width)) {
-                  select_div.push(child_div[j].getAttribute("id"));
-                }
-              }
-            }
-          }
-          for (let i = 0; i < select_div.length; i++) {
-            this.setSeatDrawMap(select_div[i]);
-          }
-          this.drawDialogClen()
-        }
-      });
-    },
-    // 画框座位放置参数
-    setSeatDrawMap(key) {
-      let map = this.colSeatMap[key];
-      map.status = this.drawForm.status;
-      map.color = this.drawForm.seat ? this.drawForm.seat.color : '';
-      map.seatTypeId = this.drawForm.seat ? this.drawForm.seat.id : '';
-      map.seatLabel = this.drawForm.seat ? this.drawForm.seat.name : '';
-      map.name = "";
-      map.priority = this.drawForm.priority;
-
-      if(this.drawForm.status == 2) {
-        map.color = '#7d7d7e';
-        map.seatTypeId = '';
-        map.seatLabel = '';
-      }
-      this.$set(this.colSeatMap, key, map);
-      this.countNum();
-      this.$forceUpdate()
-    },
-    // 鼠标滚动
-    wheelHandle(e) {
-      if(e.wheelDelta > 0){
-        this.seatWidth = Math.trunc(this.seatWidth + 10);
-      } else {
-        if(this.initWidth > this.seatWidth + 5){
-          // this.seatWidth = this.initWidth;
-        } else {
-          this.seatWidth = Math.trunc(this.seatWidth -10)
-        }
-      }
-      this.boxWidth = this.seatWidth * this.seatMap.col + 100;
-      // this.seatWidth = (this.seatWidth + this.zoom);
-      this.$forceUpdate();
-    },
-    wheelDrawHandle(e) {
-      if(e.preventDefault){
-        e.preventDefault()
-      } else {
-        e.returnValue = false
-      }
-      return false
-    },
-    contextmenuEven(e) {
-      return false;
-    },
-    dragEven(){
-      this.dragStatus = !this.dragStatus;
-    },
     /**
      * 打开弹框
      * @date 2023-11-22
@@ -338,7 +128,7 @@ export default {
       this.boxWidth = 0;
       this.dragStatus = true;
       this.$set(this.form, 'status', '1')
-      if (obj){
+      if (obj){ // 编辑模式
         this.title = "座位模板";
         this.auditoriumId = obj.id;
         this.$set(this.seatMap, 'row', obj.rows);
@@ -347,7 +137,7 @@ export default {
         this.$set(this, 'seatMapCol', obj.cols);
 
         this.getSelectByIdApi(obj)
-      }else{
+      }else{ // 新增模式
         this.seatType = true;
         this.title = "座位模板";
         this.$nextTick(() => {
@@ -368,66 +158,9 @@ export default {
             this.$set(this.colSeatMap, item.sortId + '_', item);
           })
           this.seatType = true;
-          this.$nextTick(() =>{
-            this.boxWidth = this.$refs.seatBox.offsetWidth;
-            this.seatWidth = ((this.$refs.seatBox.offsetWidth - 10 - (this.seatMap.col * 2))/this.seatMap.col);
-            this.initWidth = Math.trunc((this.$refs.seatBox.offsetWidth - 10 - (this.seatMap.col * 2))/this.seatMap.col);
-          })
-          this.countNum();
         })
       });
     },
-    /** 设置座位模板行列 */
-    setRowCol(row, col) {
-      if(!row || !col){
-        this.$message.error("请输入行和列!");
-        return false;
-      }
-      if(row <= 0 || col <= 0){
-        this.$message.error("请输入大于0的行和列!");
-        return false;
-      }
-      if(this.colSeatMap) {
-        this.$confirm('此操作将重置座位模板, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.seatMap.row = row;
-          this.seatMap.col = col;
-          this.seatType = false;
-          this.seatType = true;
-          this.colSeatMap  = {}
-          let index = 0;
-          for (let i = 1; i < this.seatMap.row + 1; i++) {
-            for (let j = this.seatMap.col; j > 0; j--) {
-              let rowColMap = {
-                "auditoriumId": this.auditoriumId,
-                "name": "",
-                "rowNo": i,
-                "sortId": index,
-                "columnNo": j,
-                "seatTypeColor": '#fdfdfd',
-                "seatTypeId": "",
-                "seatLabel": "",
-                "priority": "",
-                "status": 2
-              };
-              this.$set(this.colSeatMap, index + '_', rowColMap);
-              index ++;
-            }
-          }
-          this.$nextTick(() =>{
-            this.boxWidth = this.$refs.seatBox.offsetWidth;
-            this.seatWidth = ((this.$refs.seatBox.offsetWidth - 10 - (this.seatMap.col * 2))/this.seatMap.col);
-            this.initWidth = Math.trunc((this.$refs.seatBox.offsetWidth - 10 - (this.seatMap.col * 2))/this.seatMap.col);
-          })
-          this.countNum();
-        }).catch(() => {
-
-        });
-      }
-    },
     /** 座位类型列表 */
     getSeatTypeList() {
       pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
@@ -436,76 +169,6 @@ export default {
           }
         );
     },
-    /** 座位类型选择事件 */
-    seatTypeChange(val) {
-      this.$set(this.form, 'priority', '');
-      this.$set(this.form, 'name', '');
-      this.seatList.forEach(item => {
-        if(val == item.id){
-          this.form.seat = item
-        }
-      })
-    },
-    /** 画框座位类型选择事件 */
-    seatTypeDrawChange(val) {
-      this.$set(this.drawForm, 'priority', '');
-      this.seatList.forEach(item => {
-        if(val == item.id){
-          this.drawForm.seat = item
-        }
-      })
-    },
-    /** 座位设置确认事件 */
-    setSeatMap() {
-      this.seatSetMap = {};
-      this.seatSetMap.status = this.form.status;
-      this.seatSetMap.color = this.form.seat.color;
-      this.seatSetMap.seatTypeId = this.form.seat.id;
-      this.seatSetMap.seatLabel = this.form.seat.name;
-      this.seatSetMap.name = this.form.name;
-      this.seatSetMap.priority = this.form.priority;
-
-      if(this.seatSetMap.status == 2) {
-        this.seatSetMap.color = '#7d7d7e';
-        this.seatSetMap.seatTypeId = '';
-        this.seatSetMap.seatLabel = '';
-      }
-    },
-
-    // 计算可售和不可售数量
-    countNum() {
-      this.canNum = [];
-      this.unCanNum = [];
-      if(this.colSeatMap) {
-        for (const key in this.colSeatMap) {
-          if(this.colSeatMap[key].status == 2 || !this.colSeatMap[key].status){
-            this.unCanNum.push(key)
-          } else if (this.colSeatMap[key].status == 1) {
-            this.canNum.push(key)
-          }
-        }
-      }
-    },
-
-    // 点击座位放置参数
-    setSeatTemplateMap(key) {
-      if(this.dragStatus){
-        return false
-      }
-      if(!this.seatSetMap.status){
-        this.seatSetMap.color = '#7d7d7e';
-      }
-      let map = this.colSeatMap[key];
-      map.status = this.seatSetMap.status;
-      map.color = this.seatSetMap.color;
-      map.seatTypeId = this.seatSetMap.seatTypeId;
-      map.seatLabel = this.seatSetMap.seatLabel;
-      map.name = this.seatSetMap.name;
-      map.priority = this.seatSetMap.priority;
-      this.$set(this.colSeatMap, key, map);
-      this.countNum();
-      this.$forceUpdate()
-    },
     /**
      * 保存
      * @date 2023-11-22
@@ -679,4 +342,50 @@ export default {
     cursor: pointer;
   }
 }
+
+//这里注意：我当前将css样式加载全局上，如果单页添加样式需要每个样式前添加 ‘/deep/’ 修饰符
+
+/*  dialog*/
+.ygh-dialog ::v-deep .el-dialog__header {
+  padding: 16px 20px 15px;
+}
+.el-dialog__headerbtn{
+  top: 15px;
+}
+
+/*dialog header*/
+.el-dialog__header{
+  background: #e3eaed;
+}
+.avue-crud__dialog__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.el-dialog__title {
+  color: rgba(0,0,0,.85);
+  font-weight: 500;
+  word-wrap: break-word;
+}
+.avue-crud__dialog__menu {
+  padding-right: 20px;
+  float: left;
+}
+.avue-crud__dialog__menu i {
+  color: #909399;
+  font-size: 15px;
+}
+.el-icon-full-screen{
+  cursor: pointer;
+}
+.el-icon-full-screen:before {
+  content: "\e719";
+}
+
 </style>

src/views/venue/performanceHallMr/index.vue

@@ -131,7 +131,8 @@
 
 import { merchantPageList, deleteById } from '@/api/performanceHallMr/performanceHallMr'
 import addAndEdit from "./dialog/addAndEdit.vue";
-import seatTemplateEdit from "./dialog/seatTemplateEdit.vue";
+//import seatTemplateEdit from "./dialog/seatTemplateEdit.vue";
+import seatTemplateEdit from "./dialog/seatTemplateEditOld.vue";
 import programmeAddAndEdit from "./dialog/programmeAddAndEdit.vue";
 
 export default {

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

@@ -61,6 +61,7 @@
                                 :key="item1.id"
                                 dragSelectType="div"
                                 :dragSelectId="item1.id"
+                                :style="{backgroundColor: item1.delFlag !=0?'#ccc':item1.color}"
                                 >
                                     <i style="line-height: 15px;">{{ item1.colNo }}</i>
                                     <i style="line-height: 15px;">{{ item1.seatNo }}</i>
@@ -79,9 +80,10 @@
                     @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-tab-pane label="批量处理" name="batch"></el-tab-pane>
                     </el-tabs>
                 </div>
+                <!--  创建区域  -->
                 <div 
                 v-if="activeName == 'first'"
                 class="qu-first-box">
@@ -95,7 +97,7 @@
                             <el-form-item label="区域名称" prop="name">
                                 <el-input v-model="ruleForm.name"></el-input>
                             </el-form-item>
-                            <el-form-item label="座位排练" prop="region">
+                            <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>
@@ -123,8 +125,8 @@
                                 >
                                     <span>{{ item.title }}</span>
                                     <div>
-                                        <span>编辑</span>
-                                        <span>删除</span>
+                                        <span @click="editTableHeader(item,index)">编辑</span>
+                                        <span @click="delTableHeader(item,index)">删除</span>
                                     </div>
                                 </div>
                             </transition-group>
@@ -132,7 +134,7 @@
                         </div>
                     </div>
                 </div>
-                
+                <!--  座位管理 -->
                 <div v-if="activeName == 'second'" class="qu-second-box">
                     <div class="qu-second-select">
                         <span>当前选择的是：</span> 
@@ -148,11 +150,15 @@
                                     <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-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">
@@ -181,6 +187,12 @@
                             <span>该区已创建的座位</span>
                             <span>(注：从左至右排序如下)</span>
                         </div> 
+                        <div class="qu-second-info-tool">
+                            <span>快速排序:</span>
+                            <span>升序</span>
+                            <span>降序</span>
+                            <span>奇偶对称</span>
+                        </div> 
                         <div class="qu-second-info-list">
                             <div 
                             class="qu-second-info-item"
@@ -190,8 +202,108 @@
                         </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="handleQuery">绑定区域</el-button>
+                        <el-button type="danger" size="mini" @click="handleQuery">批量禁用</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="seatNo"
+                            align="center"
+                            label="名称">
+                            </el-table-column>
+                            <el-table-column
+                            align="center"
+                            label="区域">
+                                <template slot-scope="scope">
+                                    <span>{{ scope.row.style && scope.row.style.key }}</span>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                </div>
+
             </div>
         </div>
+
+        <!--  编辑区域   -->
+        <el-dialog
+            title="编辑区域"
+            :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>
+            </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>
  
@@ -216,6 +328,88 @@ export default {
                     sort: '0'
                 }
             ],
+            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' },
@@ -228,7 +422,33 @@ export default {
                 // { title: '右8',key: 'you',align: 'flex-start' },
                 // { title: '右9',key: 'you',align: 'flex-start' },
             ],
-            tableData: [],
+            tableData: [
+                // {
+                //     id: this.currentRow+"_"+this.currentProperty+"_"+i,
+                //     seatNo: 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,
@@ -266,7 +486,7 @@ export default {
                 name: [
                     { required: true, message: '请选择座位名称', trigger: ['blur','change'] }
                 ],
-                region: [
+                seatTypeId: [
                     { required: true, message: '请输入座位类型', trigger: ['blur','change'] }
                 ],
             },
@@ -275,6 +495,18 @@ export default {
             currentLabel: null, // 当前选择的单元格列 名称
             currentProperty: null, // 当前选择的key
             currentTabelList: [], // 当前单元格的座位列表
+
+            /** 批量操作   */
+            batchTableList: [],
+            multipleSelection: [],  //  批量操作选中的
+            queryParams: {},
+
+            /** 编辑区域 开始  */
+            formDialogVisible: false, // 弹窗
+            formAll: {},
+            formRules: {},
+            formAllType: '', // region 区域
+            /** 编辑区域 结束  */
         };
     },
     mounted() {
@@ -490,9 +722,12 @@ export default {
             return src
         },
 
-        /**  右侧工具 */
-        handleClick(){
-
+        /** tab 切换 右侧工具 */
+        handleClick(item){
+            console.log("item====",item,this.activeName)
+            if(this.activeName == 'batch') { // 批量操作
+                this.batchTableList = this.tableDataAll
+            }
         },
         /**  创建区域  开始 */
         submitForm(formName) {
@@ -519,6 +754,69 @@ export default {
         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.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 {
+                    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
+        },
+        /**  创建区域  结束 */
 
         /**
         *  创建排数
@@ -555,6 +853,7 @@ export default {
             row.index=rowIndex;
             column.index=columnIndex;
         },
+        /**  点击某个单元格   */
         cellDblclick(row, column, cell, event){
             this.currentRow = row.index + 1
             this.currentRegion = column.index
@@ -567,38 +866,61 @@ export default {
             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) {
+                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)
+                    
                     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,
+                            status: this.ruleForm1.seatTypeId,
                             rowNo: this.currentRow,
                             colNo: i,
                             sort: i,
-                            style: {key: this.currentProperty}
+                           
+                            style: {
+                                key: this.currentProperty,
+                                keyLabel: this.currentLabel
+                            },
+                            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,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({
+                    let obj = {
                         id: this.currentRow+"_"+this.currentProperty+"_"+(index+1),
                         seatNo: this.ruleForm1.name,
-                        status: this.ruleForm1.region,
+                        status: this.ruleForm1.seatTypeId,
                         rowNo: this.currentRow,
                         colNo: index+1,
                         sort: index+1
-                    })
+                    }
+                    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()
@@ -609,6 +931,7 @@ export default {
             }
             });
         },
+        /**  清除创建座位的表单 */
         resetForm1(formName) {
             this.$refs[formName].resetFields();
         },
@@ -659,6 +982,38 @@ export default {
         dragLostItemChange(){},
         reSelect() {
 
+        },
+
+        /**  批量操作 */
+        handleSelectionChange(val){
+            this.multipleSelection = val;
+        },
+        /** 删选 */
+        handleQuery(){
+            let list = []
+            if(!this.queryParams.menuName&&this.queryParams.status){
+                this.batchTableList = this.tableDataAll
+            }else {
+                this.tableDataAll.forEach((item,index)=>{
+                    if(this.queryParams.menuName&&this.queryParams.status) {
+                        if(item.rowNo==this.queryParams.menuName && item.key == this.queryParams.status) {
+                            list.push(item)
+                        }
+                    }else if(this.queryParams.menuName){
+                        if(item.rowNo==this.queryParams.menuName) {
+                            list.push(item)
+                        }
+                    }else {
+                        if(item.key == this.queryParams.status) {
+                            list.push(item)
+                        }
+                    }
+                })
+            }   
+        },
+        resetQuery(){
+            this.queryParams = {}
+
         }
     }
 };
@@ -703,7 +1058,7 @@ export default {
 }
 
 .row-item-box:hover {
-    background-color: #409eff;
+    background-color: rgba(64, 158, 255,0.3);
 }
 
 .row-item {
@@ -719,6 +1074,9 @@ export default {
     box-sizing: border-box;
     justify-content: center;
     overflow: hidden;
+    i {
+        color: #fff;
+    }
 }
 
 .row-item:first-child {
@@ -875,17 +1233,47 @@ export default {
             align-items: flex-end;
             padding-bottom: 5px;
             span:first-child{
-                font-size: 16px;
+                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;
+            }
+            
+            span:nth-child(2){
+                font-size: 12px;
+                margin-left: 10px;
+                background-color: #1890FF;
+                color: #fff;
+            }
+            span:nth-child(3){
+                font-size: 12px;
+                margin-left: 10px;
+                background-color: #1890FF;
+                color: #fff;
+            }
+            span:nth-child(4){
+                font-size: 12px;
+                margin-left: 10px;
+                background-color: #1890FF;
+                color: #fff;
+            }
+        }
         .qu-second-info-list {
             width: 100%;
-            height: calc( 100% - 30px );
+            height: calc( 100% - 60px );
             box-sizing: border-box;
             padding-right: 5px;
             overflow: hidden;
@@ -937,6 +1325,27 @@ export default {
     }
 }
 
+
+.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;

src/views/windowTicketSales/ticketingCollection.vue

@@ -104,6 +104,7 @@
           <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>
         </template>
       </el-table-column>
+      <el-table-column label="打印次数" align="center" prop="printNum" />
         <el-table-column label="操作" align="center" fixed="right" width="80" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button