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

<!--
 * @Description: 新增/编辑弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: gcz
 * @LastEditTime: 2024-04-22 16:20:30
 * @FilePath: \great_webui\src\views\ticket\ticketMr\dialog\addAndEdit.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="95%"
    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>
              <div v-else>

              </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>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button
        type="primary"
        @click="submitForm"
        v-loading.fullscreen.lock="loading"
        element-loading-text="提交中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <span v-if="loading">提交中...</span>
        <span v-else>保存</span>
      </el-button>
    </span>
    <!-- 添加或修改对话框 End -->
  </el-dialog>
</template>

<script>
import { saveAndEdit, getSelectById,countBySeatTyp,channelType } from '@/api/ticketMr/InventoryTemplate'
import { merchantPageList } from '@/api/performanceHallMr/performanceHallMr'
export default {
  name: "addAndEdit",
  dicts: ['system_taxrate'],
  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 {
      title: "编辑",
      model: "EDIT",
      activeName: '01',
      // 演员信息弹窗
      performerVisible: false,
      // 演员信息
      performerList: [],
      // 演员上传图片索引
      performerIndex: 0,
      open: false,
      loading: false,
      form: {
        id: undefined,
        chennelListForm: []
      },
      formStock: {
        stockType: null,
        chennelList: [],
      },
      rules: {
        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"] }],
      },
      statusList: [
        {id: 1, name: '是', value: 1},
        {id: 2, name: '否', value: 2},
      ],
      performList: [], // 演出厅
      channelTypeList: [], // 渠道
      dictValue: '', 
      chennelAtion: null,
      countBySeatTypList: [], //  座位类型

      stockFormList: []// 库存
    };
  },
  created() {
    this.getList()// 演出厅
    this.channelTypeFun() // 渠道
  },
  methods: {
    /** 查询主办方列表 */
    getList() {
      merchantPageList({pageNum: 1, pageSize: 100})
        .then(response => {
            this.performList = response.data.rows;
          }
        );
    },
    /**
     * 打开弹框
     * @date 2023-11-22
     * @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({})
        }
        console.log("list====",this.form)
        this.setDictLabel(this.form.chennelListForm[0],0)
      }
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    /** 获取详情 */
    async getSelectByIdApi(row) {
      try {
        const id = row.id
        let res = await getSelectById({id})
        if(res.code == 200) {
          let obj = res.data;
          await this.countBySeatTypFun(obj.auditoriumId,true)
          obj.chennelListForm = this.setDataTree(obj)
          this.form = obj
          this.setDictLabel(obj.chennelListForm[0],0)
        }
      } catch (error) {
        console.error("error====",error)
      }
      
    },
    setDataTree(obj){
      let list = []
      this.channelTypeList.forEach((item,index)=>{
        list.push({
          "channelType":item.dictValue,
          "channelName":item.dictLabel,
          "stockType": this.getStockType(item,obj),
          "stockNum": this.getStockAllNum(item,obj),
          "seatTypeList": [],
          "chennelSeatList": []
        })
        list[index].seatTypeList = this.getSeatTypeList(list[index],obj)
        list[index].chennelSeatList = this.getChennelSeatList(list[index],obj)
      })
      return list
    },
    getStockType(obj,data){
      let stockType = 0
      if(data.chennelList && data.chennelList.length>0) {
        for(let i = 0;i < data.chennelList.length;i++) {
          if(obj.dictValue == data.chennelList[i].channelType) {
            stockType = data.chennelList[i].stockType
            break;
          }
        }
      }
      return stockType
    },
    getStockAllNum(obj,data) {
      let num = 0
      let flog = false
      if(data.chennelList && data.chennelList.length>0) {
        data.chennelList.forEach((item,index)=>{
          if(obj.dictValue == item.channelType) {
            flog = true
            num = num + item.stockNum
          }
        })
      }
      if(flog) {
        return num
      }else {
        return ''
      }
    },
    getSeatTypeList(obj,data){
      let list1 = []
      this.countBySeatTypList.forEach((item1,index1)=>{
        list1.push({
          "seatTypeId": item1.seatTypeId,
          "seatTypeName": item1.seatTypeName,
          "stockNum": '',
          "stock": item1.stock,
        })
        if(obj.stockType == 0 && data.chennelList && data.chennelList.length>0) {
          data.chennelList.forEach((item2,index2)=>{
            if(item1.seatTypeId == item2.seatTypeId && obj.stockType == item2.stockType && obj.channelType == item2.channelType ) {
              list1[index1].stockNum = item2.stockNum
            }
          })
        }
      })
      return list1
    },
    getChennelSeatList(obj,data) {
      let list = []
      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)):[]
            break;
          }
        }
      }
      return list
    },
    
    // setChennelList() {

    // },
    /** 价格输入事件 */
    changePriceAmount(key) {
      if(this.form[key] * 1 < 0){
        this.$message.error("输入需大于或等于0!");
        this.$set(this.form, key, '');
        return false
      }
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm() {
      this.$refs["form"].validate(async (valid,object) => {
        if (valid) {
          try {
            console.log("this.form=====",this.form)
            let postMap = JSON.parse(JSON.stringify(this.form))
            postMap.chennelList = []
            for(let i = 0; i< this.form.chennelListForm.length ;i++) {
              let obj = {
                "id": null,
                "channelType": this.form.chennelListForm[i].channelType,
                "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].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) {
                      postMap.chennelList.push({
                        ...obj,
                        "seatTypeId": this.form.chennelListForm[i].seatTypeList[j].seatTypeId,
                        "stockNum": this.form.chennelListForm[i].seatTypeList[j].stockNum,
                        "chennelSeatList":null
                      })
                    }
                  }
                }
              }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
                  })
              }
            }
            delete postMap.chennelListForm
            console.log("postMap=====",postMap)
          } catch (error) {
          } finally {
            this.loading = false;
          }
        }else{
          // console.log('error submit!!',valid,object);
          if(object&&JSON.stringify(object) != '{}'){
            let str = ''
            for(let key in object){
              if(object.hasOwnProperty(key)){
                str = str + `[${object[key][0].message}]}]`
              }
            }
            this.$message.error(str);
          }
        }
      });
    },
    /**
     * 重置
     * @date 2023-11-22
     * @returns {any}
     */
    reset() {
     
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.open = false;
      this.chennelAtion = null
    },
    /** 获取座位可用数量  */
    async countBySeatTypFun(value,type) {
      console.log("vlaue===",value)
      try {
        this.$set(this.form,'seatNum','')
        this.chennelAtion = null
        if(!value) return
        let res = await countBySeatTyp({auditoriumId: value})
        let num = 0
        res.data.forEach((item,index)=>{
          num = num + item.stock
        })
        this.$set(this.form,'seatNum',num)
        this.countBySeatTypList = res.data
        if(!type) {
          this.form.chennelListForm = this.setDataTree({})
          this.setDictLabel(this.form.chennelListForm[0],0)
        }
      } catch (error) {
        console.error("error1====",error)
      }
    },
    /** 获取渠道数据  */
    async channelTypeFun() {
      try {
        let res = await channelType({pageNum: 1, pageSize: 100})
        this.channelTypeList = res.data
      } catch (error) {
        
      }
    },
    setDictLabel(obj,index){
      this.chennelAtion = index
    }
  },
};
</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;
  }
}
.el-table{
  .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;
  }
}

.area-container {
  min-height: 400px;
}

::v-deep .area-wrap-city.el-cascader {
  line-height: normal;
  .el-input {
    cursor: pointer;
    width: 100% !important;
    height: 28px !important;
    .el-input__inner {
      display: none !important;
    }
    span.el-input__suffix {
      position: inherit !important;
      i.el-input__icon {
        line-height: inherit;
        margin-left: 5px;
      }
    }

    .el-input__wrapper {
      box-shadow: none;
      input {
        display: none;
      }
    }
  }

  .el-cascader__tags {
    display: none;
  }
}

.area-city-popper {
  .el-cascader-panel {
    .el-scrollbar.el-cascader-menu {
      .el-cascader-menu__wrap.el-scrollbar__wrap {
        height: 315px;
      }
    }
  }
}

.inventory_box{
  width: 100%;
  border: 1px solid #ccc;
  min-height: 400px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  .inventory_channel {
    width: 200px;
    >div {
      width: 100%;
      box-sizing: border-box;
      >span {
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #333;
      }
      >span:nth-child(1) {
        width: 40px;
      }
      >span:nth-child(2) {
        flex: auto;
      }
      >span:nth-child(3) {
        width: 50px;
      }

    }
    .inventory_channel_header {
      width: 100%;
      height: 40px;
      display: flex;
      background-color: #ccc;
      border-bottom: 1px solid #333;
      border-top: 1px solid #333;
      border-left: 1px solid #333;
      
    }

    .inventory_channel_item {
      width: 100%;
      display: flex;
      height: 40px;
      cursor: pointer;
      border-bottom: 1px solid #333;
      border-left: 1px solid #333;
    }
    .inventory_channel_item:hover {
      background-color: rgba(135, 206, 235,0.6);
    }
    .inventory_channel_item-action {
      background-color: rgba(135, 206, 235,0.6);
    }
  }

  .inventory_seat {
    flex: auto;
    padding-left: 20px;
    box-sizing: border-box;
  }
}

</style>
<style>
.custom-class-box {
  z-index: 999999 !important;
}
</style>