great_webui/src/components/seatBox/index.vue

<template>
    <div class="app-container-seat" :style="{height: height}">
        <div class="app-container-seat-tool">
            <!--  座位类型  -->
            <slot name="info">
                <div class="seat-tool-box-seat_info">
                    <div class="seat-tool-box-seat_type" v-if="seatMapList&&JSON.stringify(seatMapList) != '{}'">
                        <div style="flex-shrink: 0;">各类型座位的剩余数量：</div>
                        <div class="seat-tool-box-seat_type-list">
                            <div
                            class="seat-tool-box-seat_type-item"
                            :key="index" 
                            v-for="(item,index) in seatTypeList"
                            style="margin-left: 10px;align-items: center;"
                            >
                                <span :style="{color: item.color?item.color:'none'}">{{item.name ? (item.name+'('+ (item.num||0) +')') : '暂未命名'}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </slot>
            
            <div class="seat-tool-box">
                <div class="seat-tool-box-slider-box">
                    <span class="demonstration">座位大小:</span>
                    <div class="seat-tool-box-slider">
                        <el-slider 
                        v-model="scaleNum" 
                        :min="30" 
                        :max="100"
                        @change="scaleNumChange"
                        ></el-slider>
                    </div>
                
                </div>
                <div>
                    <el-button size="mini" @click="clearSeatSelectListAll" type="danger">清空已选({{ seatSelectList.length }})</el-button>
                </div>
            </div>
        </div>
        
      <div class="seat-box" :style="{'--scaleNum': scaleNum/100}">
        <!-- 选择座位  -->
        <div 
        class="seat-list-box" 
        v-loading="loading">
            <!--  座位排版  -->
            <div  
            id="sm-scroll-box" 
            ref="seatbox" 
            class="dialog"
            @mousedown="mousedownFun"
            @mouseleave="mouseleaveFun"
            @scroll="scrollFun"
            >
                <div 
                class="dialog-box" 
                :style="{width: width*(scaleNum/100) + 'px', margin: justifyContent ? 'auto' : 'unset'}"
                >
                    <div 
                    style="width: 100%;position: absolute;"
                    class="seat-box-class clearfix" 
                    v-if="seatMapList"
                    >
                            <div
                           
                            class="seat-item-class-box" 
                            v-for="(item1, index1) in seatMapListKey" 
                            :key="item1.key"
                            >
                                <div class="seat-item-class seat-box-class-row" style="">{{ index1 != 0 ?((index1) + '排') :'' }}</div>
                                
                                <div 
                                :class="[
                                    'seat-item-class',
                                    setShowStatus(item1,item)
                                ]" 
                                v-for="(item, index) in seatMapList[item1.key]" 
                                :style="{backgroundColor: item.color && !(item.isDisabled || item.status != 1) ? item.color : 'none'}"
                                @click.stop="seatClick(item)" 
                                :dragSelectId="item.id"
                                :index="item1.key +'_'+ index"
                                :key="index">
                                    <p 
                                    v-if="item1.key != 'my_column'"
                                    class="text-class"
                                    >{{ item.status != 1 ? '不可售':(item.name ? item.name : '暂未命名') }}</p>
                                    <p v-else>{{ (index+1) + '号' }}</p>
                                </div>
                            </div>
                    </div>
                </div>
                <!-- 鼠标拖拽出的遮罩 （定位为 position:absolute）-->
                <!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
                <div id="moveSelected"></div>
            </div>
        </div>
      </div>
      <!-- 提示信息  -->
      <div :style="lockStyle" v-if="isLcokShow" class="lock-style-box">
        <div><span>锁定人：</span><span>{{ lockObj.auth }}</span></div> 
        <div><span>锁定原因：</span><span>{{ lockObj.remark }}</span></div> 
      </div>
    </div>
  </template>
  
  <script>
  
 import moment from "moment"
 import selectListMixin from "./mixins/selectList"
 export default {
    name: "TicketingSales1",
    mixins: [selectListMixin],
    props: {
        // 是否限制只能选择同一种类型
        isOccupyStatus: {
            type: [Boolean],
            default: true
        },
        /**
         * 限制座位类型选择数量
         * 
         */
        seatTypeLimit: {
            type: [Object],
            default: ()=>{
                return {}
            }
        },
        height: {
            type: [String],
            default: 'calc( 100vh - 120px )'
        }
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        rules: {
            
        },
        merchantTheatreAuditoriumListS: [], // 演出厅
        merchantPerformTimeListS: [], // 场次
        querySeatListS: [], // 座位
        goodsPageListS: [], // 票务
        goodsPageListSAll: [], // 票务全部
        setList: [],
        seatMapList: {},
        seatMapListKey: [], // key
        seatSelectList: [],
        seatSelectListNo: [], // 锁定的座位

        lockOrUnLockLoading: false,

        performId: '',// 剧目ID
        scaleNum: 30,

        width: 0,
        justifyContent: false,
        activeName: 'first',
        seatTypeList: [], 
        
        // 限购条件
        ifRealUser: 0,// 散客是否实名:0-否 1-是
        ifRealTeam: 0,// 团购是否实名:0否 1-是
        oneMany: 0,// 证件要求: 1一证一票，2一证多票
        personnelNum: 0,// 人员要求:0-表示不限制 其他数字表示限制人数

        isLcokShow: false,
        lckTime: null,
        seatId: null,
        lockStyle: {
            
        },
        lockObj: {
            auth: '',
            remark: ''
        }
      };
    },
    created() {
        //this.getSeatTypeList()
    },
    mounted() {
    
    },
    methods: {
        moment,
        /**  获取座位  */
        async querySeatListFun(type,list,list1,seatTypeList){
            try {
                this.loading = true
                this.performId = ''
                this.screenTop = 0
                this.scrollLeft = 0

                this.seatTypeList = seatTypeList

                if(type) { // 是否清除已选
                    this.seatSelectList = []
                    this.seatSelectListNo = []
                }
                this.seatSelectList = list1
                this.seatMapList = {}
                this.seatList = []
                this.querySeatListS = list;
                this.setList = list;
                if(this.setList && this.setList.length > 0) {
                    this.setSeatMapList(this.setList);
                }
                // let res = await querySeatList({
                //     ...this.queryParams
                // })
                this.loading = false
            } catch (error) {
                this.loading = false
                console.error("error===",error)
            }
        },
        // 设置座位集合
        setSeatMapList(list) {
            if(list && list.length > 0) {
                let listCopy = {}
                let lisyCopy1 = {}
                let listNum = JSON.parse(JSON.stringify(this.seatTypeList))
                listNum.forEach((item,index)=>{
                    listNum[index]['num'] = 0 
                })
                list.forEach(item => {
                    item.isDisabled = item.occupyStatus == 1 || (item.occupyStatus==0 && item.occupyOrderId) ? true : false //(item.occupyStatus != null && (item.occupyStatus == 0 || item.occupyStatus == 1) ? true : false); // 座位是否已被选择
                    item.isSelect = this.setIsSelect(item);
                    if(item.rowNo){
                        listNum.forEach((item1,index)=>{
                            if(item1.id == item.seatTypeId && item.status ==1 && !item.occupyStatus && item.occupyStatus !=0 ) {
                                listNum[index]['num'] = listNum[index]['num'] + 1 
                            }
                        })
                        if(listCopy['my'+item.rowNo]){
                            listCopy['my'+item.rowNo].push(item)
                        }else {
                            listCopy['my'+item.rowNo] = [item] 
                        }
                    }
                })
                this.seatTypeList = JSON.parse(JSON.stringify(listNum))
                let width = 0
                let flog = 0
                let seatMapListKey = []
                Object.keys(listCopy).forEach((item)=>{
                    if(listCopy[item].length>flog) {
                        flog = listCopy[item].length
                    }
                    seatMapListKey.push({
                        key: item,
                        sort: Number(item.replace('my',''))
                    })
                })
                seatMapListKey.sort((a,b)=>{
                    return a.sort - b.sort
                })
                this.seatMapListKey = seatMapListKey
                console.log("seatMapListKey=====",seatMapListKey)
                this.width = 70*(flog + 1)
                this.$nextTick(()=>{
                    if(this.$refs.seatbox) {
                        var ele = this.$refs.seatbox
                        console.log(ele.getBoundingClientRect().width); // 100
                        if(this.width<ele.getBoundingClientRect().width) {
                            this.justifyContent = true
                        }else {
                            //this.justifyContent = false
                            this.justifyContent = true
                        }
                        //this.$refs.seatbox.scrollTo(this.width/4,0)
                    }
                })
                
                console.log("list====",listCopy)
                
                let columnList = []
                listCopy[seatMapListKey[0].key].forEach((item,index)=>{
                    columnList.push({
                        ...item,
                        occupyStatus: 2,
                        isDisabled: true,
                        status: 0
                    })
                })
                this.seatMapListKey.unshift({
                    key: "my_column",
                    sort: -99
                })
                listCopy['my_column'] = columnList
                this.seatMapList = JSON.parse(JSON.stringify(listCopy))
            }
        },
        setIsSelect(item){
            if(!this.seatSelectList||this.seatSelectList.length==0){
                return false
            }
            let flog = false
            this.seatSelectList.forEach((item1,index1)=>{
                if(item.id == item1.id){
                    flog = true
                }
            })
            return flog
        },
        // 座位点击事件
        seatClick(row) {
            console.log("是的发给我大是个的风格====",row,this.seatTypeLimit)
            if(row.isDisabled || row.status == 2){
                return false
            }
            if(this.seatSelectListNo.length>0 && row.occupyStatus != 0) {
                this.$message.error('你已选择锁定座位,只能再选择被锁定的座位!!!');
                return
            }
            if(this.seatSelectList.length > 0 && row.occupyStatus == 0){
                this.$message.error('此座已被锁定,请先解锁!!!');
                return
            }
            if(this.seatTypeLimit['seatNum_'+row.seatTypeId].isNoSelect){
                this.$message.error('该座位类型不可选!!!');
                return
            }
            if(!row.isSelect){
                let seatTypeNum = 0
                this.seatSelectList.forEach((item,index)=>{
                    if(item.seatTypeId == row.seatTypeId) {
                        seatTypeNum++
                    }
                })
                if( seatTypeNum >= this.seatTypeLimit['seatNum_'+row.seatTypeId].stockTotal-this.seatTypeLimit['seatNum_'+row.seatTypeId].stockYes ) {
                    this.$message.error('选择的座位类型已超过库存!!!');
                    return
                }
            }
            
            if(row.occupyStatus == 0){
                // console.log("weqwrwerewrer")
                // this.$confirm('此座已被锁定,请先解锁', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(() => {
                //     this.lockOrUnLockFun([row],1)
                // }).catch((error) => {
                //     console.log("error====",error)
                // });
                row.isSelect = !row.isSelect
                if(row.isSelect){
                    this.seatSelectListNo.push(JSON.parse(JSON.stringify(row)))
                }else {
                    let list = JSON.parse(JSON.stringify(this.seatSelectListNo))
                    list.forEach((item,index)=>{
                        if(item.id == row.id) {
                            this.seatSelectListNo.splice(index, 1)
                        }
                    })
                }
            }else if(row.isDisabled || row.status == 2){
                return false
            }else {
                let flog = false;
                this.seatSelectList.forEach((item,index)=>{
                    if(item.seatTypeId != row.seatTypeId ) {
                        flog = true
                    }
                })
                if(flog && this.isOccupyStatus){
                    this.$message.error('只能选同一类型的座位');
                    return
                }
                row.isSelect = !row.isSelect
                if(row.isSelect){
                    this.seatSelectList.push(JSON.parse(JSON.stringify(row)))
                }else {
                    let list = JSON.parse(JSON.stringify(this.seatSelectList))
                    list.forEach((item,index)=>{
                        if(item.id == row.id) {
                            this.seatSelectList.splice(index, 1)
                        }
                    })
                }
                this.$emit('selectSeat',this.seatSelectList)
                //this.$forceUpdate()
            }
            
        },
        /** 删除已选座位  */
        delSeatSelect(row){
            let list = JSON.parse(JSON.stringify(this.seatSelectList))
            list.forEach((item,index)=>{
                if(item.id == row.id) {
                    this.seatSelectList.splice(index, 1)
                }
            })
            Object.keys(this.seatMapList).forEach((item1,index)=>{
                this.seatMapList[item1].forEach((item,index)=>{
                    if(item.id == row.id) {
                        item.isSelect = !item.isSelect
                    }
                })
                
            })
            this.$forceUpdate()
        },
        increaseViewersFun(){
        },
        /**  选择tab */
        handleClickTab(){

        },
        /**   显示座位类型  */
        setSeatTypeShow(value){
            let srt = ''
            this.seatTypeList.forEach((item,index)=>{
                if(value == item.id) {
                    srt = item.name
                }
            })

            return srt
        },

        /**  设置显示状态  */
        setShowStatus(item1,item) {
            if(item.isSame) {
                return 'seat_is_same'
            }

            if(item.channelType && item.channelType != 'window') {
                return 'seat_channel_type'
            }
            /**
             * key == my_column 序号位置
             * 
             * occupyStatus 0 
             * 
             * occupyOrderId  // 订单待支付锁定 
             * 
             */
            return  item1.key == 'my_column'?'seat-item-class-column':
                    item.occupyStatus===0?item.occupyOrderId?'order-occupy-status':
                    item.occupyStatus===0&&item.isSelect?'occupy-status-select occupy-status':
                    'occupy-status': item.occupyStatus==1?'occupy-status-no':
                    item.isDisabled || item.status != 1 ? 'disabled-class' :
                    item.isSelect ? 'select-class' : ''
        }
    }   
  };
  </script>
  <style>
  .lock-style-box {
    padding: 10px;
    border-radius: 10px;
    position: fixed;
    z-index: 99999;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 12px;
  }
</style>
  <style lang="scss" scoped>
    .app-container-seat {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .app-container-seat-tool {
        width: 100%;
        .seat-tool-box-seat_type {
            display: flex;
            padding-bottom: 10px;
            .seat-tool-box-seat_type-list {
                width: 100%;
                display: flex;
                overflow-x: auto;
                flex-wrap: nowrap;
            }
            .seat-tool-box-seat_type-item {
                
                span {
                    white-space: nowrap;
                }
            }
        }

        .seat-tool-box {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .seat-tool-box-slider-box {
                height: 100%;
                display: flex;
                align-items: center;
                span{
                    flex-shrink: 0;
                    font-size: 12px;
                }
                .seat-tool-box-slider {
                    width: 100px;
                    margin-left: 10px;
                }
            }
            
        }
    }
  
  .seat-box {
    width: 100%;
    flex: auto;
    box-sizing: border-box;
    display: flex;
    position: relative;
    .seat-list-box {
        width: 100%;//calc(100% - 210px);
        //width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
    }
    .seat-select-box {
        width: 200px;
        height: 100%;
        flex-shrink: 0;
        box-sizing: border-box;
        padding: 0 5px;
        margin-left: 10px;
        border: 1px solid #ccc;
        border-radius: 10px;
        .seat-select-info {
            width: 100%;
            height: calc( 100% - 60px );
            overflow: hidden;
            overflow-y: auto;
            .seat-select-item {
                border: 1px solid #ccc;
                margin-bottom: 5px;
                padding: 5px;
                border-radius: 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 12px;
                >div:first-child {
                    display: flex;
                    flex-direction: column;
                    span:first-child {
                        font-weight: 600;
                    }
                }
                >div:last-child {
                    span:first-child {
                        color: #f56c6c;
                        cursor: pointer;
                    }
                }
            }

            .seat-select-color-item {
                display: flex;
                align-items: center;
                margin-bottom: 5px;
                >span:first-child {
                    width: 20px;
                    height: 20px;
                    flex-shrink: 0;
                }
                >span:last-child {
                    font-size: 16px;
                    font-weight: 600;
                    margin-left: 10px;
                }
            }
        }
    }
  }

  .seat-list-box::before {
    content: "舞台";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 30px;
    background-color: rgb(204, 204, 204,0.5);
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 20px 20px;
    z-index: 99;
  }
  .dialog {
    padding: 30px 10px 10px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    border-radius: 10px;
    border: 1px  solid #323333;
    position: relative;
    .dialog-box {
        position: relative;
    }
    .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;
    }
    .title-class{
      font-size: 16px;
      font-weight: bold;
      color: black;
      margin-bottom: 20px;
      margin-top: 20px;
    }
    .item-class{
      margin-bottom: 20px;
    }
    .seat-box-class{
      padding: 5px;
      transform-origin: 50% 0;
      transform: scale(var(--scaleNum));
      box-sizing: border-box;

         /**  是否属于windown座位  */
       .seat_is_same {
        user-select: none;
      }
      .seat_is_same:after {
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.3);
        z-index:-1;
        background-image: url('../../assets/jinxuan_1.png');
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 99;
      }

       /**  是否属于windown座位  */
       .seat_channel_type {
        user-select: none;
      }
      .seat_channel_type:after {
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.3);
        z-index:-1;
        background-image: url('../../assets/jinxuan_1.png');
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 99;
      }


      /**  不可售 座位  */
      .disabled-class{
        background-color: #ffffff;
        border: none !important;
        user-select: none;
        // pointer-events: none;
        //cursor: not-allowed !important;
        cursor: default !important;
        .text-class {
            color: #fff !important;
        }
      }
      .no_select-class{
        user-select: none;
        cursor: not-allowed !important;
      }
      .select-class{
        //background-color: #e85353 !important;
        border: 5px solid #1890ff !important;
       // color: #eceaea !important;
       position: relative;
      }

      /** 手动锁定  */
      .occupy-status:after{
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.3);
        z-index:-1;
        background-image: url('../../assets/jinzhi_1.png');
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 99;
    }
      .occupy-status {
        //pointer-events: none;
      }
      /**  锁定被选择  */
      .occupy-status-select {
        border: 5px solid #ff182f !important;
      }
      /** 订单待支付锁定 */
      .order-occupy-status {

      }
      .order-occupy-status:after{
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.3);
        z-index:-1;
        background-image: url('../../assets/jinzhi.png');
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 99;
    }
      .occupy-status-no {
        background-color: #f56c6c !important;
        user-select: none;
        // pointer-events: none;
        cursor: not-allowed !important;
        position: relative;
      }
        .occupy-status-no:after{
            content:"";
            display:block;
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:rgba(0,0,0,0.3);
            z-index:-1;
            background-image: url('../../assets/jinzhi_1.png');
            background-size: 50% 50%;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            z-index: 99;
        }
      .seat-item-class-box {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        margin: auto 0;
        text-align: center;
      }
      .seat-item-class{
        flex-shrink: 0;
        display: block;
        float: left;
        width: 60px;
        height: 60px;
        margin: 5px;
        border: 1px solid #4c4d4d;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        user-select: none;
        // transform-origin: 50% 50%;
        // transform: scale(var(--scaleNum));
        z-index: 999;
        &:hover{
          opacity: 0.6;
        }
  
        .text-class{
          font-size: 12px;
          padding: 5px;
          line-height: 16px;
          margin: 0;
          color: #000;
        }
      }
    }

    .seat-box-class-row {
        display: flex !important;
        align-items: center;
        user-select: none;
        cursor: not-allowed !important;
        border: none !important;
        font-weight: 600;
        font-size: 24px;
    }
    .seat-item-class-column {
        display: flex !important;
        align-items: center;
        justify-content: center;
        user-select: none;
        cursor: not-allowed !important;
        border: none !important;
        font-weight: 600;
        font-size: 24px;
    }
  }
  .dialog::-webkit-scrollbar {
            width: 10x !important;
            height: 10px !important;
    }
    .dialog::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        opacity: 0.5;
    }
    .dialog::-webkit-scrollbar-thumb {
        border-radius: 15px;
        //background-color: #0257aa;
    }
  #moveSelected{
    position:absolute;
    background-color: blue;
    opacity:0.3;
    border:1px dashed #d9d9d9;
    top:0;
    left:0;
}
  </style>