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

<!--
 * @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
    :visible.sync="open"
    width="90%"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
    :fullscreen="dialogFull"
    :show-close="false"
    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>
              {{ title }}
            </span>
          <div class="avue-crud__dialog__menu">
            <span class="dialog-footer">
              <el-button @click="cancel">关闭</el-button>
              <el-button
                type="primary"
                @click="submitFormCopy"
                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>
            <span style="margin-left: 40px;" @click="dialogFull? dialogFull=false: dialogFull=true">
              <i size="" class="el-icon-full-screen"></i>
            </span>
            <span style="margin-left: 10px;" @click="cancel">
              <i class="el-icon-close"></i>
            </span>
          </div>
        </div>
      </template>
    <div class="dialog-ygh">
      <!--  座位管理器  -->
      <seatManagementTable
      ref="seatManagementTable"
      @saveSeat="submitForm"
       />
    </div>
    
  </el-dialog>
</template>

<script>
import { seatSaveAndEdit, saveAndEdit, getSelectById } from "@/api/performanceHallMr/performanceHallMr";
import seatManagementTable from "../model/seatManagementTable"
export default {
  name: "seatTemplateEdit",
  that: this,
  components: {
    seatManagementTable
  },
  data() {
    return {
      title: "座位配置",
      open: false, // 打开弹窗
      loading: false,
      seatWidth: null,
      seatMap: {
        row: 0,
        col: 0,
      },
      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'
      },

      dialogFull: false, // 全屏状态
    };
  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
    openDialog(title, obj) {
      console.log('obj====',obj)
      this.open = true;
      this.colSeatMap = {}
      this.boxWidth = 0;
      this.dragStatus = true;
      this.$set(this.form, 'status', '1')
      if (obj){ // 编辑模式
        this.title = "座位模板";
        this.auditoriumId = obj.id; //  演出厅 ID
        this.getSelectByIdApi(obj) // 获取座位
      }else{ // 新增模式
        this.title = "座位模板";
      }
    },
    /** 获取详情 */
    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.$refs.seatManagementTable.initData(row,dataList,'edit')
        })
      });
    },
    /**  调用 座位保存功能   */
    submitFormCopy(){
      this.$refs.seatManagementTable.saveSeat()
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    async submitForm(rowAll,colsAll,list,style) {
      console.log('rowAll,colsAll,list,style===',rowAll,colsAll,list,style)
      try {
            this.loading = true;
            /**  保存行号  */
            const { code } = await saveAndEdit({ 
              id: this.auditoriumId, 
              rows: rowAll, 
              cols: colsAll,
              styleCss: style
            });
            if (code === 200) {
              let listCopy = []
              list.forEach((item,index)=>{
                listCopy.push({
                  ...item,
                  auditoriumId: this.auditoriumId
                })
              })
              /**  保存座位  */
              const { code } = await seatSaveAndEdit(listCopy);
              if (code === 200) {
                this.$message.success("操作成功!");
                this.$emit("getList");
                this.cancel();
              }
            }
          } catch (error) {
            console.error("error===",error)
          } finally {
            this.loading = false;
          }
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-ygh {
  // padding: 0 30px;
  height: calc( 100vh - 20vh );
  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-ygh {
  //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;
  
}
.ygh-dialog ::v-deep .el-dialog__body {
    padding:0 10px 10px !important;
  }
.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;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: center;
}
.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;
  display: flex;
  align-items: center;
}
.avue-crud__dialog__menu i {
  color: #909399;
  font-size: 30px;
}
.el-icon-full-screen{
  cursor: pointer;
}
.el-icon-full-screen:before {
  content: "\e719";
}

</style>