1. 完成库存管理

src/api/ticketMr/InventoryTemplate.js

@@ -38,11 +38,11 @@ export const deleteById = (params) => {
 
 
 /**  发布  */
-export function releaseById(params) {
+export function releaseById(data) {
   return request({
     url: '/merchant/stockTmp/updateStatus',
-    method: 'get',
-    params
+    method: 'post',
+    data
   })
 }
 

src/components/seatBox/index.vue

@@ -0,0 +1,758 @@
+<template>
+    <div class="app-container-seat">
+        <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',
+                                    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' : ''
+                                ]" 
+                                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 { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
+ import selectListMixin from "./mixins/selectList"
+ export default {
+    name: "TicketingSales1",
+    mixins: [selectListMixin],
+    props: {
+        isOccupyStatus: {
+            type: [Boolean],
+            default: true
+        }
+    },
+    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){
+            try {
+                this.loading = true
+                this.performId = ''
+                this.screenTop = 0
+                this.scrollLeft = 0
+                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)
+            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(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(){
+
+        },
+        /** 获取座位类型 说明 */
+        getSeatTypeList() {
+            getSeatType({
+                pageNum: 1,
+                pageSize: 999,
+            })
+            .then(response => {
+                this.seatTypeList = response.data.rows;
+                }
+            );
+        },
+        /**   显示座位类型  */
+        setSeatTypeShow(value){
+            let srt = ''
+            this.seatTypeList.forEach((item,index)=>{
+                if(value == item.id) {
+                    srt = item.name
+                }
+            })
+
+            return srt
+        },
+    }   
+  };
+  </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%;
+        height: calc( 100vh - 120px );
+        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;
+      .disabled-class{
+        background-color: #ffffff;
+        border: none !important;
+        user-select: none;
+        // pointer-events: none;
+        cursor: not-allowed !important;
+        .text-class {
+            color: #fff !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>

src/components/seatBox/mixins/selectList.js

@@ -0,0 +1,316 @@
+export default {
+    data() {
+        return {
+            /**  多选  */
+            selectList: [],
+            selectTabelList: [],
+            multipleSelection_1: [],
+
+            moveSelected: null,
+            moveSelected1: null,
+            flag: false,//是搜开启拖拽的标志
+            oldLeft: 0,//鼠标按下时的left,top
+            oldTop: 0,
+            selectedList: [],//拖拽多选选中的块集合
+
+            isToLeft: true,
+            isToTop: true,
+
+            startX: 0,
+            startY: 0,
+            endX: 0,
+            endY: 0,
+
+            isMousemove: false,
+
+            scrollTop: 0,
+            scrollLeft: 0,
+        }
+    },
+    mounted() {
+        this.flag = false
+        this.$refs.seatbox.addEventListener('mousemove', this.mousemoveFun);
+        this.$refs.seatbox.addEventListener('mouseup', this.mouseupFun);
+        this.moveSelected = document.getElementById('moveSelected')
+        this.moveSelected1 = document.getElementById('sm-scroll-box')
+    },
+    methods: {
+        // 鼠标按下时开启拖拽多选，将遮罩定位并展现
+        mousedownFun(event) {
+            console.log("鼠标按下!!!",event.target.scrollTop,event.target.scrollLeft)
+            if(event.button != 0) return
+            //this.selectedList = []
+           // this.selectList = []
+            
+            this.flag=true;
+            let offsetTop = this.moveSelected1.getBoundingClientRect().y
+            let offsetLeft = this.moveSelected1.getBoundingClientRect().x 
+            this.moveSelected.style.top=( event.pageY - offsetTop - 5 + this.screenTop )+'px';
+            this.moveSelected.style.left=( event.pageX - offsetLeft - 5 + this.scrollLeft )+'px';
+            this.oldLeft=event.pageX;
+            this.oldTop=event.pageY;
+
+            this.startX=event.pageX;
+            this.startY=event.pageY;
+
+           event.preventDefault(); // 阻止默认行为
+           event.stopPropagation(); // 阻止事件冒泡
+        },
+        // 鼠标移动时计算遮罩的位置，宽 高
+        mousemoveFun(event) {
+            if(!this.flag) return;//只有开启了拖拽，才进行mouseover操作
+            console.log("鼠标移动!!!",this.moveSelected.style.width,this.moveSelected.style.height)
+            this.endX=event.pageX;
+            this.endY=event.pageY;
+            let offsetTop = this.moveSelected1.getBoundingClientRect().y
+            let offsetLeft = this.moveSelected1.getBoundingClientRect().x 
+            if(event.pageX<this.oldLeft){//向左拖
+              this.isToLeft = true
+              this.moveSelected.style.left=(event.pageX-offsetLeft + this.scrollLeft)+'px';
+              this.moveSelected.style.width=(this.oldLeft-event.pageX)+'px';
+            }else{
+                this.isToLeft = false
+              this.moveSelected.style.width=(event.pageX-this.oldLeft)+'px';
+            }
+            if(event.pageY<this.oldTop){//向上
+              this.isToTop = true
+              this.moveSelected.style.top=(event.pageY-offsetTop  + this.screenTop )+'px';
+              this.moveSelected.style.height=(this.oldTop-event.pageY)+'px';
+            }else{
+                this.isToTop = false
+              this.moveSelected.style.height=(event.pageY-this.oldTop)+'px';
+            }
+            if((this.moveSelected.style.width && Number(this.moveSelected.style.width.replace('px','')) > 10) ||
+                (this.moveSelected.style.height && Number(this.moveSelected.style.height.replace('px','')) > 10)){
+                this.isMousemove = true
+            }
+            event.preventDefault(); // 阻止默认行为
+            event.stopPropagation(); // 阻止事件冒泡
+        },
+        //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
+        mouseupFun(event) {
+            console.log("鼠标抬起!!!")
+            if(event.button != 0) return
+            this.moveSelected.style.bottom=Number(this.moveSelected.style.top.split('px')[0])+Number(this.moveSelected.style.height.split('px')[0]) + 'px';
+            this.moveSelected.style.right=Number(this.moveSelected.style.left.split('px')[0])+Number(this.moveSelected.style.width.split('px')[0])+'px';
+            this.flag=false;
+            if( this.isMousemove){
+                this.getSelectItem()
+            }else {
+                // let id = event.srcElement.getAttribute('dragSelectId')
+                // if(id){
+                //     this.seatMapListKey.forEach((item1,index1)=>{
+                //         this.seatMapList[item1.key].forEach((item,index)=>{
+                //             if(id = item.id){
+                //                 this.seatClick(this.seatMapList[item1.key][index])
+                //                 this.seatMapList[item1.key][index].isSelect = !this.seatMapList[item1.key][index].isSelect
+                //             }
+                //         })
+                //     })
+                //     this.$forceUpdate()
+                // }
+            }
+            this.isMousemove = false
+            this.clearDragData();
+            event.preventDefault(); // 阻止默认行为
+            event.stopPropagation(); // 阻止事件冒泡
+        },
+        mouseleaveFun(event) {
+            this.flag=false;
+            this.moveSelected.style.width='0px';
+            this.moveSelected.style.height='0px';
+            this.moveSelected.style.top='0px';
+            this.moveSelected.style.left='0px';
+            event.preventDefault(); // 阻止默认行为
+            event.stopPropagation(); // 阻止事件冒泡
+        },
+
+        clearDragData(){
+            this.moveSelected.style.width='0px';
+            this.moveSelected.style.height='0px';
+            this.moveSelected.style.top='0px';
+            this.moveSelected.style.left='0px';
+            this.moveSelected.style.bottom='0px';
+            this.moveSelected.style.right='0px';
+        },
+
+        /**  批量判断元素的位置  */
+        getSelectItem(){
+            let list = document.getElementsByClassName('seat-item-class')
+            let listCopy = []
+            let drawDialog = document.getElementById("moveSelected");
+            // 获取div元素的坐标点
+            let rect = drawDialog.getBoundingClientRect();
+            for(let i = 0; i < list.length; i++) {
+                let rect_div = list[i].getBoundingClientRect();
+                //console.log("rect===",list[i].getAttribute('index'),rect_div.top,rect_div.left)
+                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)) {
+                    listCopy.push(list[i].getAttribute("dragSelectId"));
+                }
+            }
+            let listCopy1 = [] // 已选择的座位
+            listCopy.forEach((item,index)=>{
+                this.setList.forEach((item1,index1)=>{
+                    if(item == item1.id ) {
+                        listCopy1.push(item1)
+                    }
+                })
+            })
+            let flog = false;
+            let seatTypeId = null
+            let occupyStatus = listCopy1.length>0?listCopy1[0].occupyStatus:null
+            /** 框选的时候  判断不能选择不同类型的座位 和 不可售座位   */
+            for(let i = 0; i<listCopy1.length; i++) {
+                let row = listCopy1[i]
+                if(row.occupyStatus != occupyStatus && this.isOccupyStatus) {
+                    this.$message.error('不能同时选择不同类型的座位!!!');
+                    flog = true
+                    break;
+                }
+                
+                occupyStatus = row.occupyStatus
+                
+                if(row.isDisabled || row.status == 2) {
+                    this.$message.error('不能选择已售或不可售座位!!!');
+                    flog = true
+                    break;
+                }
+            }
+            if(flog){
+                return
+            }
+
+            if(this.seatSelectListNo.length>0) {
+                for(let i = 0; i<listCopy1.length; i++) {
+                    let row = listCopy1[i]
+                    if(row.occupyStatus != 0) {
+                        this.$message.error('你已选择锁定座位,只能再选择被锁定的座位!!!');
+                        flog = true
+                        break;
+                    }
+                }
+            }
+            if(flog){
+                return
+            }
+
+            if(this.seatSelectList.length>0) {
+                for(let i = 0; i<listCopy1.length; i++) {
+                    let row = listCopy1[i]
+                    if(row.occupyStatus == 0) {
+                        this.$message.error('此座已被锁定,请先解锁!!!');
+                        flog = true
+                        break;
+                    }
+                }
+            }
+            if(flog){
+                return
+            }
+
+            listCopy1.forEach((item,index)=>{
+                if(index == 0) {
+                    seatTypeId = item.seatTypeId
+                }else {
+                    if(item.seatTypeId != seatTypeId) {
+                        flog = true
+                    }
+                }
+            })
+            if(flog && this.isOccupyStatus){
+                this.$message.error('只能选同一类型的座位');
+                return
+            }
+            listCopy1.forEach((item,index)=>{
+                this.seatSelectList.forEach((item1,index1)=>{
+                    if(item.seatTypeId != item1.seatTypeId) {
+                        flog = true
+                    }
+                })
+            })
+            if(flog && this.isOccupyStatus){
+                this.$message.error('只能选同一类型的座位');
+                return
+            }
+
+            listCopy.forEach((item,index)=>{
+                this.seatMapListKey.forEach((item1,index1)=>{
+                    this.seatMapList[item1.key].forEach((item,index)=>{
+                        if(listCopy.includes(item.id)){
+                            this.seatMapList[item1.key][index].isSelect = true
+                        }
+                    })
+                })
+            })
+            let listCopy2 = []
+            listCopy1.forEach((item,index)=>{
+                let flag1 = false
+                this.seatSelectList.forEach((item1,index1)=>{
+                    if(item.id == item1.id) {
+                        flag1 = true
+                    }
+                })
+                if(!flag1){
+                    listCopy2.push(item)
+                }
+            })
+
+            if(occupyStatus == 0){
+                this.seatSelectListNo = this.seatSelectListNo.concat(listCopy2)
+            }else {
+                this.seatSelectList = this.seatSelectList.concat(listCopy2)
+            }
+            
+            this.$forceUpdate()
+            this.$emit('selectSeat',this.seatSelectList)
+            console.log("listCopy===",listCopy)
+            console.log("listCopy1===",listCopy1)
+        },
+        /**  清除全部已选 */
+        clearSeatSelectListAll () {
+            this.seatMapListKey.forEach((item1,index1)=>{
+                this.seatMapList[item1.key].forEach((item,index)=>{
+                    this.seatMapList[item1.key][index].isSelect = false
+                })
+            })
+            this.seatSelectList = [] 
+            this.seatSelectListNo = []
+            this.$forceUpdate()
+            this.$emit('selectSeat',this.seatSelectList)
+        },
+        /** 滚动的位置  */
+        scrollFun(event) {
+            console.log("滚动===!!!",event.target.scrollTop,event.target.scrollLeft)
+            this.screenTop = event.target.scrollTop
+            this.scrollLeft = event.target.scrollLeft
+        },
+
+        /** 座位大小 拖动变化是  */
+        scaleNumInput() {
+            console.log("sfasdfsfd===")
+            this.$refs.seatbox.removeEventListener('mousemove', this.mousemoveFun);
+            this.$refs.seatbox.removeEventListener('mouseup', this.mouseupFun);
+        },
+        scaleNumChange() {
+            console.log("sfasdfsfd11111===")
+            this.$refs.seatbox.removeEventListener('mousemove', this.mousemoveFun);
+            this.$refs.seatbox.removeEventListener('mouseup', this.mouseupFun);
+            setTimeout(()=>{
+                this.$refs.seatbox.addEventListener('mousemove', this.mousemoveFun);
+                this.$refs.seatbox.addEventListener('mouseup', this.mouseupFun);
+            },500)
+        }
+    },
+    watch: {
+        scaleNum(){
+            this.scaleNumInput()
+        }
+    },
+    destroyed() {
+        if(this.$refs.seatbox) {
+            this.$refs.seatbox.removeEventListener('mousemove', this.mousemoveFun);
+            this.$refs.seatbox.removeEventListener('mouseup', this.mouseupFun);
+        }
+    },
+}

src/views/ticket/InventoryTemplate/dialog/FreightMgrIndexMi.js

@@ -1,267 +0,0 @@
-import { basePositionApi } from '@/api/ticketMr/ticketMr'
-export default {
-    data() {
-        return {
-            selectDeliveryAreaDialogList:[], // 全部数据
-            selectDeliveryAreaDialogOpen: false, // 是否显示弹窗
-            selectDeliveryAreaDialogTitle: '可售区域',
-
-            selectCityListLoading: false,
-
-            provinceIndex: -1,
-            initSelectData: {} // 回显载体
-        }
-    },
-    created() {
-        
-    },
-    methods: {
-        handleChangeProvince(){
-            
-        },
-        /**
-         * 打开 可售区域配置
-         */
-        deliverableAreaDialogCancel(data) {
-            let obj = {}
-            
-            this.selectCityListLoading = false
-
-            this.provinceIndex = -1
-            this.initSelectData = {}
-
-            if(data && data.length>0) {
-                data.forEach((item,index)=>{
-                    let list = item.split('-')
-                    if(obj[list[0]] && list[1]){
-                        obj[list[0]].push([list[1]])
-                    }else {
-                        obj[list[0]] = []
-                        if(list[1]){
-                            obj[list[0]].push([list[1]])
-                        }
-                    }
-                })
-            }
-            console.log('obj====',data,obj)
-            this.initSelectData = obj
-            this.selectDeliveryAreaDialogOpen = true;
-            this.basePositionFun("#")
-        },
-        /** 关闭弹窗  */
-        selectDeliveryAreaDialogCancel(){
-            this.selectDeliveryAreaDialogOpen = false;
-        },
-        /**  确认弹窗  */
-        selectDeliveryAreaDialogSubmitForm(){
-            let list = []
-            this.selectDeliveryAreaDialogList.forEach((item)=>{
-                if(item.selected){
-                    list.push(item.name)
-                }else if(item.selectCityList && item.selectCityList.length>0) {
-                    item.selectCityList.forEach((item1,index1)=>{
-                        console.log("item1===",item1)
-                        list.push(item.name+'-'+item1.join('-'))
-                    })
-                    
-                }
-            })
-            this.form.saleArea = list
-            this.selectDeliveryAreaDialogOpen = false
-            console.log("list====",list)
-        },
-        /**  初次获取行政区划  */
-        async basePositionFun(upCode) {
-            try {
-                this.selectCityListLoading = true
-                let res = await basePositionApi({
-                    upCode,
-                })
-                if(res.code == 200) {
-                    let list = []
-                    let listApi = []
-                    res.data.forEach((item,index) => {
-                        if(item.code!='#') {
-                            list.push({
-                                ...item,
-                                countyList: [],
-                                selected: this.initChekeSelectAll(item),
-                                selectCityList: this.initSelectData[item.name] ?this.initSelectData[item.name] : [] ,
-                                cityList: []
-                            })
-                            listApi.push(basePositionApi({
-                                upCode: item.code?item.code : '#',
-                            }))
-                        }
-                        
-                    });
-                    let res1 = await Promise.all(listApi)
-                    if(res1) {
-                        res1.forEach((item,index)=>{
-                            let list1 = []
-                            item.data.forEach((item1,index1)=>{
-                                list1.push({
-                                    ...item1,
-                                    //countyList: [],
-                                    //leaf: true,
-                                })
-                            })
-                            list[index].cityList = [].concat(list1)
-                        })
-                    }
-                    
-                    this.selectDeliveryAreaDialogList = [].concat(list)
-                    console.log("res1=====",res1,this.selectDeliveryAreaDialogList)
-                }
-                this.selectCityListLoading = false
-            } catch (error) {
-                console.error("error====",error)
-                this.selectCityListLoading = false
-            }
-        },
-         /**  懒加载 配置   */
-        areaCascaderProps(areaItem, areaIndex) {
-            return {
-              lazy: false,
-              lazyLoad: (node, resolve) => this.areaLazyLoad(node, resolve, areaItem, areaIndex),
-              multiple: true,
-              children: 'countyList',
-              label: 'name',
-              value: 'name',
-              expandTrigger: 'hover',
-              // emitPath: false,
-            };
-        },
-        /**  懒加载 函数   */
-        areaLazyLoad(node, resolve, areaItem, provinceIndex) {
-            const { level } = node;
-            // console.log(node, resolve, areaItem, provinceIndex)
-            if (level === 0) {
-              resolve([])
-            } else if(level == 1 ) {
-                console.log(node, resolve, areaItem, provinceIndex)
-                if(node.data && node.data.code){
-                    if(node.data.countyList) {
-                        let list = []
-                        node.data.countyList.forEach((item,index)=>{
-                            list.push({
-                                ...item,
-                                leaf: true,
-                            })
-                        })
-                        resolve(list)
-                    }
-                    // basePositionApi({
-                    //     upCode: node.data.code,
-                    // }).then((res)=>{
-                    //     let list = []
-                    //     res.data.forEach((item,index)=>{
-                    //         list.push({
-                    //             ...item,
-                    //             leaf: true,
-                    //         })
-                    //     })
-                    //     resolve(list)
-                    // })
-                }else {
-                    resolve([])
-                }   
-            }else {
-                resolve([])
-            }
-        },
-        // 当选中节点变化时触发
-        changeCascader(data){
-            console.log("data===",data)
-           // console.log('selectDeliveryAreaDialogList====',this.selectDeliveryAreaDialogList)
-            this.chekeSelectAll(this.provinceIndex)
-        },
-        // 下拉框出现/隐藏时触发
-        async handleCascaderVisibleChangeCity(isVisible, areaItem, provinceIndex){
-            this.provinceIndex = provinceIndex
-            if (isVisible) {
-                const loading = this.$loading({
-                    lock: true,
-                    text: 'Loading',
-                    spinner: 'el-icon-loading',
-                    background: 'rgba(0, 0, 0, 0.7)',
-                    customClass: 'custom-class-box'
-                });
-                try {
-                    console.log('this.selectDeliveryAreaDialogList1111====',this.selectDeliveryAreaDialogList)
-                    if(false && isVisible && this.selectDeliveryAreaDialogList[provinceIndex].cityList[0].countyList.length==0){
-                        
-                        console.log(isVisible, areaItem, provinceIndex)
-    
-                        let listApi = []
-                        areaItem.cityList.forEach((item,index)=>{
-                            listApi.push(basePositionApi({
-                                upCode: item.code?item.code : '#',
-                            }))
-                        })
-                        let res1 = await Promise.all(listApi)
-                        console.log("res1====",res1)
-                        if(res1) {
-                            res1.forEach((item,index)=>{
-                                this.$set(this.selectDeliveryAreaDialogList[provinceIndex].cityList[index],'countyList',item.data)
-                            })
-                        }
-                    }
-                    loading.close();
-                    if(isVisible && areaItem.selected){
-                        this.$nextTick(()=>{
-                            // let list = [['市辖区']]
-                            // this.$set(this.selectDeliveryAreaDialogList[provinceIndex],'selectCityList',list)
-                            // console.log('this.selectDeliveryAreaDialogList1111====',this.selectDeliveryAreaDialogList)
-                            this.setSelectAll(isVisible, areaItem, provinceIndex)
-                        })
-                        
-                    }
-                } catch (error) {
-                    loading.close();
-                    console.error("error=====",error)
-                }
-            }
-           
-            
-        },
-        /**  全选状态  */
-        setSelectAll(isVisible, areaItem, provinceIndex){
-            this.$nextTick(()=>{
-                let list = []
-                this.selectDeliveryAreaDialogList[provinceIndex].cityList.forEach((item,index)=>{
-                    if(item.countyList && item.countyList.length > 0) {
-                        item.countyList.forEach((item1,index1)=>{
-                            list.push([item.name,item1.name])
-                        })
-                    }else {
-                        list.push([item.name])
-                    }
-                })
-                this.$set(this.selectDeliveryAreaDialogList[provinceIndex],'selectCityList',list)
-                //console.log('this.selectDeliveryAreaDialogList1111====',this.selectDeliveryAreaDialogList)
-            })
-        },
-        /** 点击选中时 判断是否全选  */
-        chekeSelectAll(provinceIndex){
-            let flog = true
-            this.selectDeliveryAreaDialogList[provinceIndex].cityList.forEach((item,index)=>{
-                if(this.selectDeliveryAreaDialogList[provinceIndex].selectCityList.every((currentValue)=> !currentValue.includes(item.name)) ) {
-                    flog = false
-                }
-            })
-            this.selectDeliveryAreaDialogList[provinceIndex].selected = flog
-            console.log("provinceIndex====",provinceIndex)
-            console.log("flog====",flog)
-            console.log('this.selectDeliveryAreaDialogList1111====',this.selectDeliveryAreaDialogList)
-        },
-        /** 点击选中时 判断是否全选  */
-        initChekeSelectAll(item){
-            if(this.initSelectData[item.name] && this.initSelectData[item.name].length == 0) {
-                return true
-            }else {
-                return false
-            }
-        },
-    }
-}

src/views/ticket/InventoryTemplate/dialog/addAndEdit.vue

@@ -15,127 +15,144 @@
     append-to-body
     :close-on-click-modal="false"
     @close="cancel"
-  >
-    <div class="dialog">
-      <el-form :model="form" ref="form" size="mini" :rules="rules" label-width="120px">
-        <el-form-item label="模板名称:" prop="name">
-          <el-input
-            v-model="form.name"
-            placeholder="模板名称"
-            clearable
-          />
-        </el-form-item>
-        <div style="display: flex;">
-          <el-form-item label="演出厅:" prop="auditoriumId">
-            <el-select v-model="form.auditoriumId" @change="countBySeatTypFun" placeholder="请选择演出厅">
-              <el-option
-                v-for="item in performList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="可配置数量:" prop="seatNum">
-            {{ form.seatNum }}
-          </el-form-item>
-        </div>
-        <el-form-item label="库存模式:" prop="chennelList">
-          <div class="inventory_box">
-            <div class="inventory_channel" style="width: 200px;">
-              <div class="inventory_channel_header">
-                <span>序号</span>
-                <span>渠道名称</span>
-                <span>数量</span>
-              </div>
-              <div 
-              :class="['inventory_channel_item',index == chennelAtion ?'inventory_channel_item-action':'']"
-              v-for="(item,index) in form.chennelListForm"
-              :key="index"
-              @click="setDictLabel(item,index)"
-              >
-                <span>{{ index+1 }}</span>
-                <span>{{ item.channelName }}</span>
-                <span>{{ item.stockNum }}</span>
-              </div>
-            </div>
-
-            <div class="inventory_seat" v-if="chennelAtion !== null">
-              <el-form-item label="选择模式:" label-width="75px">
-                <el-radio-group v-model="form.chennelListForm[chennelAtion].stockType">
-                  <el-radio :label="0">根据数量</el-radio>
-                  <el-radio :label="1">根据座位</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <div v-if="!form.chennelListForm[chennelAtion].stockType">
-                <el-table ref="tables" v-loading="loading" :data="form.chennelListForm[chennelAtion].seatTypeList" border>
-                  <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
-                  <el-table-column label="座位类型" align="center" prop="seatTypeName" />
-                  <el-table-column label="可配置数量" align="center" prop="stock"></el-table-column>
-                  <el-table-column label="配置数量" align="center">
-                    <template slot-scope="scope">
-                      <el-input v-model="form.chennelListForm[chennelAtion].seatTypeList[scope.$index].stockNum" type="number" clearable placeholder="请输入数量"></el-input>
-                    </template>
-                  </el-table-column>
-                </el-table>
+  > 
+    <div class="dialog-box">
+      <div class="dialog">
+        <el-form :model="form" ref="form" size="mini" :rules="rules" label-width="120px">
+          <div style="display: flex;">
+            <el-form-item label="模板名称:" prop="name">
+              <el-input
+                style="width: 350px;"
+                v-model="form.name"
+                placeholder="模板名称"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="演出厅:" prop="auditoriumId">
+              <el-select v-model="form.auditoriumId" @change="countBySeatTypFun" placeholder="请选择演出厅">
+                <el-option
+                  v-for="item in performList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="可配置数量:">
+              {{ seatNum }}
+            </el-form-item>
+          </div>
+          <el-form-item label="库存模式:" class="is-required">
+            <div class="inventory_box">
+              <div class="inventory_channel" style="width: 200px;">
+                <div class="inventory_channel_header">
+                  <span>序号</span>
+                  <span>渠道名称</span>
+                  <span>数量</span>
+                </div>
+                <div 
+                :class="['inventory_channel_item',index == chennelAtion ?'inventory_channel_item-action':'']"
+                v-for="(item,index) in form.chennelListForm"
+                :key="index"
+                @click="setDictLabel(item,index)"
+                >
+                  <span>{{ index+1 }}</span>
+                  <span>{{ item.channelName }}</span>
+                  <span>{{ item.stockNum }}</span>
+                </div>
               </div>
-              <div v-else>
 
+              <div class="inventory_seat" v-if="chennelAtion !== null">
+                <el-form-item label="选择模式:" label-width="85px" class="is-required">
+                  <el-radio-group 
+                  v-model="form.chennelListForm[chennelAtion].stockType"
+                  @change="setStockType"
+                  >
+                    <el-radio :label="0">根据数量</el-radio>
+                    <el-radio :label="1">根据座位</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <div v-if="!form.chennelListForm[chennelAtion].stockType">
+                  <el-table ref="tables" v-loading="loading" :data="form.chennelListForm[chennelAtion].seatTypeList" border>
+                    <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
+                    <el-table-column label="座位类型" align="center" prop="seatTypeName" />
+                    <el-table-column label="可配置数量" align="center" prop="stock"></el-table-column>
+                    <el-table-column label="配置数量" align="center">
+                      <template slot-scope="scope">
+                        <el-input v-model="form.chennelListForm[chennelAtion].seatTypeList[scope.$index].stockNum" type="number" clearable placeholder="请输入数量"></el-input>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                </div>
+                <div v-else>
+                  <seatBox 
+                  ref="seatBox" 
+                  :isOccupyStatus="false"
+                  @selectSeat="selectSeat"
+                  />
+                </div>
               </div>
             </div>
-          </div>
-        </el-form-item>
-        <el-form-item label="备注:" prop="remark">
-          <el-input
-            v-model="form.remark"
-            type="textarea"
-            placeholder="请输入备注"
-            clearable
-          />
-        </el-form-item>
-      </el-form>
+          </el-form-item>
+          <el-form-item label="备注:" prop="remark">
+            <el-input
+              v-model="form.remark"
+              type="textarea"
+              placeholder="请输入备注"
+              clearable
+            />
+          </el-form-item>
+        </el-form>
+
+        
+      </div>
+      <div 
+      v-if="loading"
+      class="dialog-loading"
+      v-loading="loading" 
+      :element-loading-text="loadingText"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      ></div>
     </div>
+    
     <span slot="footer" class="dialog-footer">
-      <el-button @click="cancel">取消</el-button>
+      <el-button @click="cancel">关闭</el-button>
       <el-button
+        v-if="model !== 'DETAILS'"
         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)"
+        :loading="loading"
+        
       >
         <span v-if="loading">提交中...</span>
         <span v-else>保存</span>
       </el-button>
     </span>
     <!-- 添加或修改对话框 End -->
+    <!-- -->
+    
   </el-dialog>
 </template>
 
 <script>
 import { saveAndEdit, getSelectById,countBySeatTyp,channelType } from '@/api/ticketMr/InventoryTemplate'
+import { getSelectById as getSeatSelectByIdApi } from "@/api/performanceHallMr/performanceHallMr";
 import { merchantPageList } from '@/api/performanceHallMr/performanceHallMr'
+import seatBox from '@/components/seatBox/index.vue';
 export default {
   name: "addAndEdit",
   dicts: ['system_taxrate'],
+  components: {
+    seatBox
+  },
   data() {
-    let validateNumber = (rule, value, callback) => {
-      let regNumber=/^(([1-9]\d*)|([0][.]{1}[0-9]{0,2}[0-9]+)|([1-9]\d*[.]{1}[0-9]+))$/g;
-      if (value === '') {
-        callback(new Error('请输入大于等于0的数值!!!'));
-      } else if(value==0){
-        callback();
-      }
-      else if (!regNumber.test(value)) {
-        callback(new Error('只能大于等于0的数值!!!'));
-      } else{
-        callback();
-      }
-    };
     return {
+      open: false,
       title: "编辑",
       model: "EDIT",
+      loading: false,
+      loadingText: '获取数据中...',
       activeName: '01',
       // 演员信息弹窗
       performerVisible: false,
@@ -143,8 +160,8 @@ export default {
       performerList: [],
       // 演员上传图片索引
       performerIndex: 0,
-      open: false,
-      loading: false,
+      
+      
       form: {
         id: undefined,
         chennelListForm: []
@@ -157,7 +174,7 @@ export default {
         name: [{ required: true, message: "请输入模板名称", trigger: ["change","blur"] }],
         auditoriumId: [{ required: true, message: "请选择演出厅", trigger: ["change","blur"] }],
         chennelList: [{ required: true, message: "请输入库存模式", trigger: ["change","blur"] }],
-        remark: [{ required: true, message: "请输入备注", trigger: ["change","blur"] }],
+        remark: [{ required: false, message: "请输入备注", trigger: ["change","blur"] }],
       },
       statusList: [
         {id: 1, name: '是', value: 1},
@@ -169,7 +186,11 @@ export default {
       chennelAtion: null,
       countBySeatTypList: [], //  座位类型
 
-      stockFormList: []// 库存
+      stockFormList: [],// 库存
+
+      dataList: [], // 座位
+
+      seatNum: '',
     };
   },
   created() {
@@ -177,7 +198,7 @@ export default {
     this.channelTypeFun() // 渠道
   },
   methods: {
-    /** 查询主办方列表 */
+    /** 演出厅列表 */
     getList() {
       merchantPageList({pageNum: 1, pageSize: 100})
         .then(response => {
@@ -191,28 +212,36 @@ export default {
      * @param {any} obj
      * @returns {any}
      */
-    async openDialog(title, obj) {
-      this.chennelAtion = null
-      this.open = true
-      this.activeName = '01';
-      
-      if(this.channelTypeList.length<0) {
-        await this.channelTypeFun()
-      }
-      if (obj){
-        this.title = "编辑库存模板";
-        await this.getSelectByIdApi(obj)
-      }else{
-        this.title = "添加库存模板";
-        this.form = {
-          chennelListForm: this.setDataTree({})
+    async openDialog(title, obj, mode) {
+      try {
+        this.model = mode
+        this.loading = true
+        this.loadingText = '获取数据中...'
+        this.chennelAtion = null
+        this.open = true
+        this.activeName = '01';
+        
+        if(this.channelTypeList.length<0) {
+          await this.channelTypeFun()
         }
-        console.log("list====",this.form)
-        this.setDictLabel(this.form.chennelListForm[0],0)
+        if (obj){
+          this.title = "编辑库存模板";
+          await this.getSelectByIdApi(obj)
+        }else{
+          this.title = "添加库存模板";
+          this.form = {
+            chennelListForm: this.setDataTree({})
+          }
+          console.log("list1====",this.form)
+          this.setDictLabel(this.form.chennelListForm[0],0)
+        }
+        this.$nextTick(() => {
+          this.$refs["form"].clearValidate();
+        });
+      } catch (error) {
+        console.error("dfsdfdsf",error)
       }
-      this.$nextTick(() => {
-        this.$refs["form"].clearValidate();
-      });
+      this.loading = false
     },
     /** 获取详情 */
     async getSelectByIdApi(row) {
@@ -225,8 +254,10 @@ export default {
           obj.chennelListForm = this.setDataTree(obj)
           this.form = obj
           this.setDictLabel(obj.chennelListForm[0],0)
+          console.log("list2====",this.form)
         }
       } catch (error) {
+        console.log("error====",error)
         console.error("error====",error)
       }
       
@@ -247,6 +278,7 @@ export default {
       })
       return list
     },
+    /**  获取模式  */
     getStockType(obj,data){
       let stockType = 0
       if(data.chennelList && data.chennelList.length>0) {
@@ -259,6 +291,7 @@ export default {
       }
       return stockType
     },
+    /**  获取总数  */
     getStockAllNum(obj,data) {
       let num = 0
       let flog = false
@@ -276,6 +309,7 @@ export default {
         return ''
       }
     },
+    /**  获取座位类型对应的数量  */
     getSeatTypeList(obj,data){
       let list1 = []
       this.countBySeatTypList.forEach((item1,index1)=>{
@@ -295,17 +329,25 @@ export default {
       })
       return list1
     },
+    /**  获取座位 */
     getChennelSeatList(obj,data) {
       let list = []
+      let seat = {}
       if(data.chennelList && data.chennelList.length>0) {
         for(let i = 0;i<data.chennelList.length;i++) {
           if(obj.channelType == data.chennelList[i].channelType) {
-            list = data.chennelList[i].chennelSeatList ? JSON.parse(JSON.stringify(data.chennelList[i].chennelSeatList)):[]
+            if(data.chennelList[i].chennelSeatList) {
+              let srt = 'seat_'+ data.chennelList[i].seatTypeId
+              seat[srt] ? seat[srt].push(...data.chennelList[i].chennelSeatList): seat[srt] = [...data.chennelList[i].chennelSeatList]
+              console.log("seat_",seat,data.chennelList[i].chennelSeatList)
+            }
+            //list = data.chennelList[i].chennelSeatList ? JSON.parse(JSON.stringify(data.chennelList[i].chennelSeatList)):[]
             break;
           }
         }
       }
-      return list
+
+      return JSON.stringify(seat) == '{}' ? null : seat
     },
     
     // setChennelList() {
@@ -328,6 +370,8 @@ export default {
       this.$refs["form"].validate(async (valid,object) => {
         if (valid) {
           try {
+            this.loading = true
+            this.loadingText = '提交中...'
             console.log("this.form=====",this.form)
             let postMap = JSON.parse(JSON.stringify(this.form))
             postMap.chennelList = []
@@ -338,7 +382,7 @@ export default {
                 "channelName": this.form.chennelListForm[i].channelName,
                 "stockType": this.form.chennelListForm[i].stockType,
               }
-              if(this.form.chennelListForm[i].stockType == 0 && this.form.chennelListForm[i].stockNum) {
+              if(this.form.chennelListForm[i].stockType == 0) {
                 if(this.form.chennelListForm[i].seatTypeList && this.form.chennelListForm[i].seatTypeList.length>0) {
                   for(let j = 0;j< this.form.chennelListForm[i].seatTypeList.length;j++) {
                     if(this.form.chennelListForm[i].seatTypeList[j].stockNum) {
@@ -351,21 +395,39 @@ export default {
                     }
                   }
                 }
-              }else if(this.form.chennelListForm[i].stockType == 1 && this.form.chennelListForm[i].stockNum){
-                postMap.chennelList.push({
-                    "id": null,
-                    "channelType": this.form.chennelListForm[i].channelType,
-                    "channelName": this.form.chennelListForm[i].channelName,
-                    "stockType": this.form.chennelListForm[i].stockType,
-                    "seatTypeId": null,
-                    "stockNum": this.form.chennelListForm[i].stockNum,
-                    "chennelSeatList": this.form.chennelListForm[i].chennelSeatList
+              }else if(this.form.chennelListForm[i].stockType == 1 ){
+                if(this.form.chennelListForm[i].chennelSeatList) {
+                  Object.keys(this.form.chennelListForm[i].chennelSeatList).forEach((item)=>{
+                    postMap.chennelList.push({
+                      "id": null,
+                      "channelType": this.form.chennelListForm[i].channelType,
+                      "channelName": this.form.chennelListForm[i].channelName,
+                      "stockType": this.form.chennelListForm[i].stockType,
+                      "seatTypeId": item.replace("seat_", ""),
+                      "stockNum": this.form.chennelListForm[i].chennelSeatList[item].length,
+                      "chennelSeatList": this.form.chennelListForm[i].chennelSeatList[item]
+                    })
                   })
+                 
+                }
+                
               }
             }
             delete postMap.chennelListForm
             console.log("postMap=====",postMap)
+            let res = await saveAndEdit(postMap)
+            this.loading = false
+            if(res.code) {
+              this.$message.success(res.msg || res.message|| "操作成功");
+              this.$emit('getList')
+              this.cancel()
+            }else {
+              this.$message.error(error.msg || error.message|| "操作失败!");
+            }
+            
           } catch (error) {
+            this.loading = false
+            this.$message.error(error.msg || error.message|| "操作失败!");
           } finally {
             this.loading = false;
           }
@@ -404,7 +466,7 @@ export default {
     async countBySeatTypFun(value,type) {
       console.log("vlaue===",value)
       try {
-        this.$set(this.form,'seatNum','')
+        this.seatNum = ''
         this.chennelAtion = null
         if(!value) return
         let res = await countBySeatTyp({auditoriumId: value})
@@ -412,7 +474,7 @@ export default {
         res.data.forEach((item,index)=>{
           num = num + item.stock
         })
-        this.$set(this.form,'seatNum',num)
+        this.seatNum = num
         this.countBySeatTypList = res.data
         if(!type) {
           this.form.chennelListForm = this.setDataTree({})
@@ -428,24 +490,77 @@ export default {
         let res = await channelType({pageNum: 1, pageSize: 100})
         this.channelTypeList = res.data
       } catch (error) {
-        
+        console.error("dfsdfdsfsd====",error)
       }
     },
     setDictLabel(obj,index){
       this.chennelAtion = index
+      if(obj.stockType == 1) {
+        console.log('fsdfsdfsdfsdfsdfsdfsdfsfdsf')
+        this.getSeatSelectById()
+      }
+    },
+    setStockType(value) {
+      console.log('fsdfsdfsdfsdfsdfsdfsdfsfdsf======',value)
+      if(value == 1) {
+        this.getSeatSelectById()
+      }
+    },
+    /**  获取座位  */
+    async getSeatSelectById() {
+      if(!this.form.auditoriumId){  return }
+      if(!this.dataList || this.dataList.length == 0 || this.dataList[0].auditoriumId !== this.form.auditoriumId) {
+        let res = await getSeatSelectByIdApi(this.form.auditoriumId)
+        this.dataList = res.data;
+      }
+      let list = []
+      let list1 = []
+      if(this.form.chennelListForm[this.chennelAtion].chennelSeatList) {
+        Object.keys(this.form.chennelListForm[this.chennelAtion].chennelSeatList).forEach((item)=>{
+          list1.push(...this.form.chennelListForm[this.chennelAtion].chennelSeatList[item])
+        })
+        list = this.dataList.filter((item,index)=>{
+          if(list1.includes(item.id)){
+            return item
+          }
+          
+        })
+      }
+      console.log("dfsdfdsfdsf====",list,this.form.chennelListForm[this.chennelAtion].chennelSeatList)
+      this.$nextTick(() =>{
+        this.$refs.seatBox.querySeatListFun(true,this.dataList,list)
+      })
+    },
+    /** 选择座位  */
+    selectSeat(list) {
+      let obj = {}
+      list.forEach((item)=>{ 
+        let srt = 'seat_'+ item.seatTypeId
+         Array.isArray(obj[srt]) ? obj[srt].push(item.id): obj[srt] = [item.id]
+      })
+      this.form.chennelListForm[this.chennelAtion].chennelSeatList = JSON.stringify(obj) == '{}'?null:obj
+      console.log("已选择的====",list,this.form.chennelListForm[this.chennelAtion].chennelSeatList)
     }
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.dialog {
-  padding: 0 30px;
-  max-height: 65vh;
-  overflow-y: auto;
+
+.dialog-box {
+  width: 100%;
+  position: relative;
+  .dialog-loading {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }
 .dialog {
-  padding: 0 30px;
+  max-height: 70vh;
+  overflow-y: auto;
   .upload-btn {
     width: 100px;
     height: 100px;

src/views/ticket/InventoryTemplate/dialog/details.vue

@@ -1,223 +0,0 @@
-<!--
- * @Description: 详情弹框
- * @Author: Sugar.
- * @Date: 2023-11-24 13:55:00
- * @LastEditors: Sugar.
- * @LastEditTime: 2023-11-24 13:55:00
- * @FilePath: \cattle_webui\src\views\ticket\ticketMr\dialog\details.vue
- * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
--->
-<template>
-  <el-dialog
-    title="票务详情"
-    :visible.sync="open"
-    width="700px"
-    append-to-body
-    :close-on-click-modal="false"
-    @close="cancel"
-  >
-    <div class="dialog" v-if="form">
-      <!--   基础信息   -->
-      <div class="title-class" style="margin-top: 0">基础信息</div>
-      <el-row>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">票务名称: <span>{{ form.goodsName }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">散客是否实名: <span>{{ form.goodsPerform && (form.goodsPerform.ifRealUser==1?'是':form.goodsPerform.ifRealUser==0?'否':'-') }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">团购是否实名: <span>{{ form.goodsPerform && (form.goodsPerform.ifRealTeam==1?'是':form.goodsPerform.ifRealTeam==0?'否':'-') }}</span></div>
-        </el-col>
-        <!-- <el-col :span="12" v-if="form.goodsPerform && (form.goodsPerform.ifRealTeam == 1 || form.goodsPerform.ifRealUser == 1)">
-          <div class="grid-content bg-purple item-class">实名要求: <span>{{ form.goodsPerform && (form.goodsPerform.oneMany==1?'一证一人':form.goodsPerform.oneMany==2?'一证多人':'-') }}</span></div>
-        </el-col>
-        <el-col :span="12" v-if="form.goodsPerform && (form.goodsPerform.ifRealTeam == 1 || form.goodsPerform.ifRealUser == 1)">
-          <div class="grid-content bg-purple item-class">包含人数(人): <span>{{ form.goodsPerform && form.goodsPerform.personnelNum }}</span></div>
-        </el-col> -->
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">证件要求: <span>{{ form.goodsPerform && (form.goodsPerform.oneMany==1?'一证一人':form.goodsPerform.oneMany==2?'一证多人':'-') }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">包含人数(人): <span>{{ form.goodsPerform && form.goodsPerform.personnelNum }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">停止售卖时间: <span>开演前{{ form.goodsPerform && form.goodsPerform.stopSaleTime }}分钟内</span></div>
-        </el-col>
-        <el-col :span="12" v-if="form.goodsPerform">
-          <div class="grid-content bg-purple item-class">票务说明: <span>{{ form.goodsPerform.detail || '' }}</span></div>
-        </el-col>
-      </el-row>
-
-      <!--   演出信息   -->
-      <div class="title-class">销售信息</div>
-      <el-row>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">销售价: <span>{{ form.salePrice + '元' || '' }}</span></div>
-        </el-col>
-        <!-- <el-col :span="24">
-          <div class="grid-content bg-purple item-class">销售有效期: <span>{{ 
-            form.goodsPerform && form.goodsPerform.saleBeginTime && form.goodsPerform.saleEndTime ? 
-            form.goodsPerform.saleBeginTime +'--'+ form.goodsPerform.saleEndTime :
-            '-'
-          }}</span></div>
-        </el-col> -->
-        <el-col :span="12" v-if="form.goodsPerform">
-          <div class="grid-content bg-purple item-class">
-            是否限购:
-            <span>{{ form.goodsPerform.buyAstrict == -1 ? '不限制' : '限售数量' }}</span>
-            <span v-if="form.goodsPerform.buyAstrict > -1">每个账号在每个场次限购{{ form.goodsPerform.buyAstrict }}</span>
-          </div>
-        </el-col>
-        <el-col :span="24" v-if="form.goodsPerform">
-          <div class="grid-content bg-purple item-class">售票渠道: <span>{{ 
-          (form.goodsPerform.channelWx == 0 ? '小程序,' : '')
-           + ' ' + 
-           (form.goodsPerform.channelWindow == 0 ? '窗口,' : '')
-           + ' ' + 
-           (form.goodsPerform.channelAutoSale == 0 ? '自助售/取票机,' : '')
-           + ' ' + 
-           (form.goodsPerform.channelPersonSale == 0 ? '小程序-分销' : '')
-           }}</span></div>
-        </el-col>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">税率: <span>{{ form.taxRate }}</span></div>
-        </el-col>
-        <el-col :span="24" v-if="form.goodsPerform">
-          <div style="width: 100%;height: 100px;overflow: hidden;overflow-y: auto;background-color: rgba(204, 204, 204,0.3);padding: 5px;box-sizing: border-box;border-radius: 10px;">
-            <div style="padding: 0 10px;" class="grid-content bg-purple item-class">可售渠道: </div>
-            <div v-if="form.saleArea">
-              <el-tag :key="index" style="margin-left: 5px;margin-bottom: 5px;" v-for="(item,index) in form.saleArea" >{{ item }}</el-tag>
-            </div>  
-          </div>
-        </el-col>
-      </el-row>
-
-      <!--   观影须知   -->
-      <div class="title-class">退票信息</div>
-      <el-row>
-        <el-col :span="24" v-if="form.goodsPerform">
-          <div class="grid-content bg-purple item-class">
-            是否支持退票:
-            <span>{{ form.goodsPerform.backStatus == 1 ? '不可退' : '可退' }}</span>
-            <span v-if="form.goodsPerform.backStatus == 0">(按购买日期结算, 提前{{ form.performRefundRule.days }}天{{ form.performRefundRule.hour }}时可退)</span>
-          </div>
-        </el-col>
-      </el-row>
-
-      <!--   核销信息   -->
-      <div class="title-class">核销信息</div>
-      <el-row>
-        <el-col :span="12">
-          <div class="grid-content bg-purple item-class">核销时间: <span>开演前{{ form.goodsPerform && form.goodsPerform.beforeTime }}分钟内</span></div>
-        </el-col>
-        <el-col :span="12" v-if="form.goodsPerform">
-          <div class="grid-content bg-purple item-class">核销播报次数: <span>{{ form.goodsPerform.verificationSpeaker + '次' || '' }}</span></div>
-        </el-col>
-        <el-col :span="12" v-if="form.goodsPerform">
-          <div class="grid-content bg-purple item-class">核销凭证: 
-            <el-tag v-if="form.goodsPerform.verificationQrcode == 0">电子核销码</el-tag>
-            <el-tag style="margin-left: 10px;" v-if="form.goodsPerform.verificationIdcard == 0">身份证</el-tag>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
-
-
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="cancel">确定</el-button>
-    </span>
-
-  </el-dialog>
-</template>
-
-<script>
-import { getSelectById } from "@/api/ticketMr/ticketMr";
-import Editor from "@/components/Editor";
-export default {
-  name: "detailsDia",
-  components: {
-    Editor,
-  },
-  data() {
-    return {
-      title: "编辑",
-      model: "EDIT",
-      open: false,
-      loading: false,
-      form: {
-        id: undefined,
-      },
-      performerVisible: false,
-      performerList: []
-    };
-  },
-  methods: {
-    /**
-     * 打开弹框
-     * @date 2023-11-22
-     * @param {any} obj
-     * @returns {any}
-     */
-    openDialog(title, obj) {
-      this.open = true;
-      if (obj){
-        this.getSelectByIdApi(obj)
-      }
-    },
-    /** 获取详情 */
-    getSelectByIdApi(row) {
-      const id = row.id
-      getSelectById(id).then(response => {
-        this.form = response.data;
-      });
-    },
-    /**
-     * 关闭弹框
-     * @date 2023-11-22
-     * @returns {any}
-     */
-    cancel() {
-      this.open = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.dialog {
-  padding: 0 30px;
-  max-height: 65vh;
-  overflow-y: auto;
-}
-.dialog {
-  padding: 0 30px;
-  .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;
-  }
-}
-</style>

src/views/ticket/InventoryTemplate/index.vue

@@ -66,7 +66,7 @@
           >详情</el-button>
           <el-button
               size="mini"
-              type="text"
+              :type="scope.row.status != 1 ? 'text':'text'"
               style="margin-left: 10px;"
               @click="handleRelease(scope.row)"
               v-if="checkPermi(['ticketMr:InventoryTemplate:release'])"
@@ -103,9 +103,6 @@
       @getList="getList"
     />
 
-    <!-- 详情 -->
-    <details-dia ref="detailsDia"></details-dia>
-
   </div>
 </template>
 
@@ -113,12 +110,11 @@
 
 import { pageList, deleteById, releaseById } from '@/api/ticketMr/InventoryTemplate'
 import addAndEdit from "./dialog/addAndEdit";
-import detailsDia from "./dialog/details.vue";
 import { checkPermi } from "@/utils/permission"
 export default {
   name: "agreement",
-  dicts: ['agreement_type'],
-  components: { addAndEdit, detailsDia },
+  dicts: [],
+  components: { addAndEdit },
   data() {
     return {
       // 遮罩层
@@ -146,9 +142,6 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        type: undefined,
-        goodsType: 2,
-        classifyId: 1
       },
       statusList: [
         {id: 1, name: '未发布', value: 0},
@@ -190,22 +183,23 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRange = [];
-      this.$set(this.queryParams, 'goodsName', '');
-      this.queryParams.pageNum = 1;
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+      };
       this.handleQuery();
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.$refs["addAndEdit"].openDialog("新增数据", null);
+      this.$refs["addAndEdit"].openDialog("新增数据", null, "ADD");
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.$refs["addAndEdit"].openDialog("修改数据", row);
+      this.$refs["addAndEdit"].openDialog("修改数据", row, "EDIT");
     },
     /** 详情按钮操作 */
     openDetails(row) {
-      this.$refs["detailsDia"].openDialog("详情", row);
+      this.$refs["addAndEdit"].openDialog("详情", row, "DETAILS");
     },
 
     // 修改是否启用
@@ -226,7 +220,7 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除"' + row.goodsName + '"？').then(function() {
+      this.$modal.confirm('是否确认删除"' + row.name + '"？').then(function() {
         return deleteById({id:row.id});
       }).then(() => {
         this.getList();