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\performanceHallMr\dialog\seatTemplateEdit.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="900px"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <el-row>
        <el-col :span="16" 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-class">
            <div class="box-top-class">
              <div class="stage-class">舞台</div>
            </div>
            <div class="box-bottom-class" ref="seatBox" v-if="seatType">
              <div v-for="row in seatMap.row" :key="row">
                <div class="seat-tag"
                     @click="setSeatTemplateMap(row, col)"
                     v-for="col in seatMap.col"
                     :key="col"
                     :style="{
                       width: seatWidth,
                       height: seatWidth,
                       backgroundColor: colSeatMap[row+'_'+col] && colSeatMap[row+'_'+col].color ? colSeatMap[row+'_'+col].color : ''}"
                ></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" style="padding-left: 15px">
          <div class="title-class">座位设置</div>
          <div class="box-class">
            <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>
    <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";
export default {
  name: "seatTemplateEdit",
  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: '',
    };
  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
    openDialog(title, obj) {
      this.open = true;
      this.seatType = false;
      this.getSeatTypeList();
      this.colSeatMap = {};
      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.rowNo + '_' + item.columnNo, item);
          })
          this.seatType = true;
          this.$nextTick(() =>{
            this.seatWidth = ((this.$refs.seatBox.offsetWidth - 10 - (this.seatMap.col * 2))/this.seatMap.col)  + 'px';
          })
        })
      });
    },
    /** 设置座位模板行列 */
    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  = {}
          for (let i = 1; i < this.seatMap.row + 1; i++) {
            for (let j = 1; j < this.seatMap.col + 1; j++) {
              let rowColMap = {
                "auditoriumId": this.auditoriumId,
                "name": "",
                "rowNo": i,
                "columnNo": j,
                "seatTypeColor": '#fdfdfd',
                "seatTypeId": "",
                "seatLabel": "",
                "priority": "",
                "status": 2
              };
              this.$set(this.colSeatMap, i + '_' + j, rowColMap);
            }
          }
          this.$nextTick(() =>{
            this.seatWidth = ((this.$refs.seatBox.offsetWidth - 10 - (this.seatMap.col * 2))/this.seatMap.col)  + 'px';
          })
        }).catch(() => {

        });
      }
    },
    /** 座位类型列表 */
    getSeatTypeList() {
      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
        .then(response => {
            this.seatList = response.data.rows;
          }
        );
    },
    /** 座位类型选择事件 */
    seatTypeChange(val) {
      this.seatList.forEach(item => {
        if(val == item.id){
          this.form.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 = '';
      }
    },

    // 点击座位放置参数
    setSeatTemplateMap(row, col) {
      let map = this.colSeatMap[row + '_' +col];
      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, row + '_' +col, map);
    },
    /**
     * 保存
     * @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: 65vh;
  overflow-y: auto;
}
.dialog {
  padding: 0 30px;

  .title-class{
    text-align: center;
    color: #6e6e6e;
    margin: 10px auto;
  }
  .box-class{
    width: 100%;
    height: 100%;
    border: 2px solid #7d7d7e;
    border-radius: 4px;
    padding: 10px;

    .box-top-class{
      .stage-class{
        margin: 10px auto;
        width: 160px;
        height: 80px;
        border: 2px solid #7d7d7e;
        text-align: center;
        line-height: 80px;
      }
    }
    .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%;

        &:hover{
          opacity: 0.8;
        }
      }
    }
  }

  .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;
  }
}
</style>