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

<!--
 * @Description: 新增/编辑弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: gcz
 * @LastEditTime: 2025-02-19 09:44:32
 * @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="800px"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <el-form v-if="open" :model="form" ref="form" :rules="rules" label-width="120px">
        <el-tabs v-model="activeName">
          <!--    基础信息     -->
          <el-tab-pane label="基础信息" name="01">
            <el-form-item label="票务名称:" prop="goodsName" style="margin-top: 20px">
              <el-input
                v-model="form.goodsName"
                placeholder="票务名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="票档类型:" prop="seatType">
              <el-select 
                v-model="form.seatType"
                placeholder="请选择票档类型"
                multiple
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in seatTypeListArr"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="包含人数:" prop="personnelNum" v-if="channelType!=='group'">
              <el-input-number v-model="form.personnelNum" :step="1" step-strictly :min="0" :controls="false" controls-position="right" placeholder="请输入包含人数"></el-input-number>
                <p>0-表示不限制 其他数字表示限制人数</p>
              <!-- <span v-if="form.oneMany == 1">0-表示不限制 其他数字表示限制人数</span>
              <span v-if="form.oneMany == 2">限制人数最少为1人</span> -->
            </el-form-item>
            <el-form-item label="是否实名:" prop="isAuth">
              <el-radio-group v-model="form.isAuth">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="证件要求:" prop="oneMany" v-if="form.isAuth == 1">
              <el-radio-group v-model="form.oneMany">
                <el-radio :label="1">一证一人</el-radio>
                <el-radio :label="2">一证多人</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="停止售卖时间:" prop="stopSaleTime">
              <span style="margin-right: 5px">开演前</span>
              <el-input-number v-model="form.stopSaleTime" :controls="false" controls-position="right" placeholder="停止售卖时间"></el-input-number>
              <span style="margin-left: 5px">分钟内
              </span>
            </el-form-item>
            <el-form-item label="票务说明:">
              <el-input
                type="textarea"
                :rows="3"
                maxlength="400"
                show-word-limit
                placeholder="请输入内容"
                v-model="form.detail">
              </el-input>
            </el-form-item>
          </el-tab-pane>

          <!--    销售信息     -->
          <el-tab-pane label="销售信息" name="02">
            <!-- <el-form-item label="销售价:" label-width="100px" prop="salePrice">
              <el-input
                v-model="form.salePrice"
                placeholder="销售价"
                type="number"
                clearable
                @change="changePriceAmount('salePrice')"
                style="width: 100%;"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item> -->
            <!-- <el-form-item label="销售有效期:" label-width="100px" prop="saleTimeAll">
              <el-date-picker
              v-model="form.saleTimeAll"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            </el-form-item> -->
            <el-form-item label="是否限购:" prop="buyAstrictType" label-width="100px" style="margin-bottom: 10px">
              <el-radio v-model="form.buyAstrictType" label="1">是</el-radio>
              <el-radio v-model="form.buyAstrictType" label="2">否</el-radio>
            </el-form-item>
            <el-form-item label="" prop="buyAstrict" label-width="100px" v-if="form.buyAstrictType == 1">
              <span><span style="color: red">*</span>每个账号在每个场次限购</span>
              <el-input
                v-model.number="form.buyAstrict"
                placeholder=""
                clearable
                style="width: 140px;margin-left: 5px"
              >
                <template slot="append">张</template>
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="售票渠道:" required label-width="100px">
              <el-checkbox v-model="form.channelWx">小程序</el-checkbox>
              <el-checkbox v-model="form.channelWindow">窗口</el-checkbox>
              <el-checkbox v-model="form.channelAutoSale">自助售/取票机</el-checkbox>
              <el-checkbox v-model="form.channelPersonSale">小程序(分销)</el-checkbox>
            </el-form-item> -->
            <el-form-item label="税率:" prop="taxRate" label-width="100px">
              <el-select
                v-model="form.taxRate"
                placeholder="请选择税率"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.system_taxrate"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="可售区域:" label-width="100px">
              <span @click="deliverableAreaDialogCancel(form.saleArea)" style="cursor: pointer;color: #1890ff;">请选择(点击这里进行选择)</span>
              <span style="margin-left: 10px;color: red;cursor: pointer;" @click="form.saleArea=''">全部清除</span>
              <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 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-form-item>
          </el-tab-pane>

          <!--    退改信息     -->
          <el-tab-pane label="退改信息" name="03">
            <el-form-item label="是否支持退票:" prop="backStatus" label-width="120px">
              <el-radio v-model="form.backStatus" label="0">是</el-radio>
              <el-radio v-model="form.backStatus" label="1">否</el-radio>
            </el-form-item>
            <el-form-item v-if="form.backStatus == '0'" label="退票时间:" prop="backTime" label-width="120px" style="margin-bottom: 10px">
              <el-radio v-model="form.backTime" label="1">按购买日期结算</el-radio>
            </el-form-item>
            <el-form-item label="" v-if="form.backStatus == '0'" prop="days" label-width="120px">
              <span>提前</span>
              <el-input
                v-model="form.days"
                type="number"
                placeholder=""
                clearable
                @change="changePriceAmount('days')"
                style="width: 140px;margin-left: 5px"
              />
              <span style="padding: 0 10px">天</span>
              <el-time-select
                v-model="form.hour"
                :picker-options="{ start: '00:00', step: '00:01', end: '23:59'}"
                placeholder="选择时间">
              </el-time-select>
              <span style="padding-left: 10px">可退</span>
            </el-form-item>
            <el-form-item label="是否允许改签:" prop="allowReSubmit" label-width="120px">
              <el-radio v-model="form.allowReSubmit" :label="1">是</el-radio>
              <el-radio v-model="form.allowReSubmit" :label="0">否</el-radio>
            </el-form-item>
          </el-tab-pane>

          <!--    核销信息 -->
          <el-tab-pane label="核销信息" name="04">
            <el-form-item label="核销时间:" prop="beforeTime">
              <span style="margin-right: 5px">开演前</span>
              <el-input
                v-model="form.beforeTime"
                @change="changePriceAmount('beforeTime')"
                type="number"
                placeholder="核销时间"
                clearable
                style="width: 120px;"
              >
              </el-input>
              <span style="margin-left: 5px">分钟内</span>
            </el-form-item>
            <el-form-item label="核销播报次数:" prop="verificationSpeaker">
              <el-input
                v-model="form.verificationSpeaker"
                @change="changePriceAmount('verificationSpeaker')"
                type="number"
                placeholder="核销播报次数"
                clearable
                style="width: 100%;"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="核销凭证:" prop="checkList">
              <el-checkbox-group v-model="form.checkList">
                <el-checkbox label="A">电子核销码</el-checkbox>
                <el-checkbox label="B">身份证</el-checkbox>
              </el-checkbox-group>
              <span>说明：未勾选核销凭证时，观影人员需到票务中心取票入场</span>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </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>
    <!-- 选择配送区域对话框 Start -->
    <el-dialog
        :visible.sync="selectDeliveryAreaDialogOpen"
        :title="selectDeliveryAreaDialogTitle"
        width="60%"
        append-to-body
        class="delivery-area-dialog"
        @close="selectDeliveryAreaDialogCancel"
      >
        <div class="area-container" 
        v-loading="selectCityListLoading"
        element-loading-text="加载数据中..."
        >
          <el-row>
            <el-col
              v-for="(areaItem, areaIndex) in selectDeliveryAreaDialogList"
              :key="areaItem.areaCode"
              class="area-wrap"
              :span="8"
            >
              <el-checkbox
                v-model="areaItem.selected"
                :label="areaItem.name"
                class="area-wrap-province"
                @change="handleChangeProvince(areaIndex, areaItem)"
              >
                <template #default>
                  <span
                    slot="reference"
                      :class="areaItem.hasChildrenSelect ? 'area-province-label' : ''"
                    >{{ areaItem.name }}</span>
                  
                </template>
              </el-checkbox>
              <el-cascader
                v-model="areaItem.selectCityList"
                :options="areaItem.cityList"
                :props="areaCascaderProps(areaItem, areaIndex)"
                :clearable="false"
                collapse-tags
                class="area-wrap-city"
                popper-class="area-city-popper"
                @visible-change="(isVisible)=>handleCascaderVisibleChangeCity(isVisible, areaItem, areaIndex)"
                @change="changeCascader"
              />
            </el-col>
          </el-row>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="selectDeliveryAreaDialogCancel">取 消</el-button>
            <el-button type="primary" @click="selectDeliveryAreaDialogSubmitForm">确 定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 选择配送区域对话框 End -->
    <!-- 添加或修改对话框 End -->
  </el-dialog>
</template>

<script>
// import { updateNoticeMgr } from "@/api/system/noticeMgr";
import { saveAndEdit, getSelectById,seatTypeList } from '@/api/ticketMr/ticketMr'
import { getToken } from "@/utils/auth";
import { pageList } from '@/api/performMr/performMr'
import FreightMgrIndexMi from "./FreightMgrIndexMi"
export default {
  name: "addAndEdit",
  mixins: [FreightMgrIndexMi],
  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 {
      channelList: [
        {id: 1, name: '小程序', value: 1},
        {id: 2, name: '窗口', value: 2},
      ],
      title: "编辑",
      model: "EDIT",
      activeName: '01',
      // 演员信息弹窗
      performerVisible: false,
      // 演员信息
      performerList: [],
      // 演员上传图片索引
      performerIndex: 0,
      open: false,
      loading: false,
      form: {
        id: undefined,
        type: "",
        content: "",
        isAuth: 1,
        backTime: '1',
        goodsPerform: {},
        seatType: [],
        seatTypeList: [],
        allowReSubmit: 1,
      },
      rules: {
        goodsName: [{ required: true, message: "请输入票务名称", trigger: ["change","blur"] }],
        stopSaleTime: [
          { required: true, message: "请输入停止售卖时间", trigger: ["change","blur"] },
          // { validator: validateNumber, trigger: ["blur","change"]},
        ],
        beforeTime: [{ required: true, message: "请输入核销时间", trigger: ["change","blur"] }],
        verificationSpeaker: [{ required: true, message: "请输入核销播报次数", trigger: ["change","blur"] }],
        detail: [{ required: true, message: "请输入票务说明", trigger: ["change","blur"] }],
        salePrice: [{ required: true, message: "请输入销售价", trigger: ["change","blur"] }],

        buyAstrictType: [{ required: true, message: "请选择是否限购", trigger: ["change","blur"] }],
        buyAstrict: [{ required: true, message: "请输入每个账号在每个场次限购张数", trigger: ["change","blur"] }],

        taxRate: [{ required: true, message: "请输入税率", trigger: ["change","blur"] }],

        backStatus: [{ required: true, message: "请选择是否支持退票", trigger: ["change","blur"] }],
        days: [{ required: true, message: "请输入日期", trigger: ["change","blur"] }],
        saleTimeAll: [{required: true, message: "请选择销售有效期", trigger: ["change","blur"]}],

        seatType: [
          { required: true, message: "请选择票档类型", trigger: ["change","blur"] }
        ],
        oneMany: [{required: true, message: "请选择实名要求", trigger: ["change","blur"]}],
        personnelNum: [{required: true, message: "请输入包含人数", trigger: ["change","blur"]}],
        
        checkList: [{required: false, message: "请选择核销凭证", trigger: ["change","blur"]}],
        allowReSubmit: [
          { required: true, message: "请选择是否允许改签", trigger: ["change","blur"] }
        ],
      },
      uploadObj: {
        url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
        Headers: { Authorization: "Bearer " + getToken() },
      },
      statusList: [
        {id: 1, name: '是', value: 1},
        {id: 2, name: '否', value: 2},
      ],
      performList: [],
      seatTypeListArr: [],
      channelType: '',
    };
  },
  created() {
    this.getList()
    this.getSeatTypeList()
  },
  methods: {
    /** 查询主办方列表 */
    getList() {
      pageList({pageNum: 1, pageSize: 100})
        .then(response => {
            this.performList = response.data.rows;
          }
        );
    },
    /** 主办方选择事件 */
    changePerform(val) {
      this.performList.forEach(item => {
        if(item.id == val){
          this.form.sponsorName = item.name
        }
      })
    },
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} title 标题
     * @param {any} obj 编辑对象
     * @param {string} channelType 销售渠道
     * @returns {any}
     */
    openDialog(title, obj, channelType) {
      this.open = true;
      this.reset();
      this.activeName = '01';
      this.channelType = channelType;
      
      if (obj) {
        this.title = "编辑票务管理";
        this.getSelectByIdApi(obj)
      } else {
        this.title = "添加票务管理";
        this.setDefaultChannelValues();
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      }
    },
    /** 获取详情 */
    getSelectByIdApi(row) {
      const id = row.id
      getSelectById(id).then(response => {
        const obj = response.data;
        this.$nextTick(() => {
          this.form = {}
          this.$set(this.form, 'id', obj.id);
          this.$set(this.form, 'goodsName', obj.goodsName);
          this.$set(this.form, 'seatType', obj.seatTypeList ? obj.seatTypeList.map(item => item.seatTypeId) : []);
          this.$set(this.form, 'isAuth', obj.isAuth);
          this.$set(this.form, 'verificationSpeaker', obj.goodsPerform.verificationSpeaker);
          this.$set(this.form, 'beforeTime', obj.goodsPerform.beforeTime);
          this.$set(this.form, 'stopSaleTime', obj.goodsPerform.stopSaleTime);
          this.$set(this.form, 'detail', obj.goodsPerform.detail);


          this.$set(this.form, 'salePrice', obj.salePrice);
          if(obj.goodsPerform.buyAstrict > -1){
            this.$set(this.form, 'buyAstrictType', '1');
            this.$set(this.form, 'buyAstrict', obj.goodsPerform.buyAstrict);
          } else {
            this.$set(this.form, 'buyAstrictType', '2');
            this.$set(this.form, 'buyAstrict', '');
          }
          this.$set(this.form, 'channelWx', obj.goodsPerform.channelWx == 0);
          this.$set(this.form, 'channelWindow', obj.goodsPerform.channelWindow == 0);
          this.$set(this.form, 'channelAutoSale', obj.goodsPerform.channelAutoSale == 0);
          this.$set(this.form, 'channelPersonSale', obj.goodsPerform.channelPersonSale == 0);
          
          this.$set(this.form, 'backStatus', obj.goodsPerform.backStatus);
          this.$set(this.form, 'backTime', '1');
          this.$set(this.form, 'taxRate', obj.taxRate);
          this.$set(this.form, 'backStatus', obj.goodsPerform.backStatus.toString());
          
          this.$set(this.form, 'saleArea', obj.saleArea);
          this.$set(this.form, 'stopSaleTime', obj.goodsPerform.stopSaleTime);

          if(obj.goodsPerform.backStatus == '0') {
            this.$set(this.form, 'days', obj.performRefundRule.days);
            this.$set(this.form, 'hour', obj.performRefundRule.hour);
          }

          if(obj.goodsPerform.saleBeginTime && obj.goodsPerform.saleEndTime){
            this.$set(this.form, 'saleTimeAll', [obj.goodsPerform.saleBeginTime,obj.goodsPerform.saleEndTime]);
          }

          this.$set(this.form, 'oneMany', obj.goodsPerform.oneMany);  
          this.$set(this.form, 'personnelNum', obj.goodsPerform.personnelNum); 
          this.$set(this.form,'checkList',[])
          if(obj.goodsPerform.verificationQrcode == 0) {
            this.form.checkList.push('A')
          }
          if(obj.goodsPerform.verificationIdcard == 0) {
            this.form.checkList.push('B')
          }
          this.$set(this.form, 'seatTypeList', obj.seatTypeList || []);
          this.$set(this.form, 'allowReSubmit', obj.allowReSubmit);
        });
      });
    },
    /** 价格输入事件 */
    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 {
            let postMap = {
              goodsPerform: {},
              performRefundRule: {}
            }
            if(this.form.id){
              postMap.id = this.form.id;
            }
            postMap.goodsName = this.form.goodsName;
            postMap.seatType = this.form.seatType;
            postMap.isAuth = this.form.isAuth;
            postMap.goodsPerform.verificationSpeaker = this.form.verificationSpeaker;
            postMap.goodsPerform.beforeTime = this.form.beforeTime;
            postMap.goodsPerform.detail = this.form.detail;


            postMap.salePrice = this.form.salePrice;
            postMap.goodsPerform.buyAstrict = this.form.buyAstrictType == '1' ? this.form.buyAstrict : '-1';
            postMap.taxRate = this.form.taxRate
            postMap.goodsPerform.channelWx = this.form.channelWx ? 0 : 1;
            postMap.goodsPerform.channelWindow = this.form.channelWindow  ? 0 : 1;
            postMap.goodsPerform.channelAutoSale = this.form.channelAutoSale  ? 0 : 1;
            postMap.goodsPerform.channelPersonSale = this.form.channelPersonSale  ? 0 : 1;
            postMap.goodsPerform.backStatus = this.form.backStatus;
            if(this.form.backStatus == '0') {
              postMap.performRefundRule.days = this.form.days;
              postMap.performRefundRule.hour = this.form.hour;
            }
            postMap.goodsType = 2;
            postMap.classifyId = 1;
            postMap.classifyName = "门票类";
            postMap.saleArea = this.form.saleArea&&this.form.saleArea.length>0?this.form.saleArea:[]
            postMap.goodsPerform.stopSaleTime = this.form.stopSaleTime
            if(this.form.saleTimeAll && this.form.saleTimeAll.length > 0) {
              postMap.goodsPerform.saleBeginTime = this.form.saleTimeAll[0];
              postMap.goodsPerform.saleEndTime = this.form.saleTimeAll[1];
            }

            postMap.goodsPerform.oneMany = this.form.oneMany
            postMap.goodsPerform.personnelNum = this.form.personnelNum
            // 团购渠道设置包含人数为1
            if(this.channelType=='group'){
              postMap.goodsPerform.personnelNum = 1
            }

            if(this.form.checkList.indexOf('A') != -1) {
              postMap.goodsPerform.verificationQrcode = 0
            }else {
              postMap.goodsPerform.verificationQrcode = 1
            }
            if(this.form.checkList.indexOf('B') != -1) {
              postMap.goodsPerform.verificationIdcard = 0
            }else {
              postMap.goodsPerform.verificationIdcard = 1
            }
            
            postMap.seatTypeList = this.form.seatType.map(id => ({
              seatTypeId: id
            }));
            
            postMap.channelType = this.channelType;
            postMap.allowReSubmit = this.form.allowReSubmit;
            
            this.loading = true;
            const { code } = await saveAndEdit({ ...postMap });
            if (code === 200) {
              this.$message.success("操作成功!");
              this.$emit("getList");
              this.cancel();
            }
          } 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() {
      this.$set(this.form, 'id', '');
      this.$set(this.form, 'goodsName', '');
      this.$set(this.form, 'seatType', []);
      this.$set(this.form, 'isAuth', 1);
      this.$set(this.form, 'verificationSpeaker', '');
      this.$set(this.form, 'detail', '');
      this.$set(this.form, 'goodsPerform', {});
      this.$set(this.form, 'salePrice', '');
      this.$set(this.form, 'buyAstrictType', '1');
      this.$set(this.form, 'buyAstrict', '');
      this.$set(this.form, 'channelWx', false);
      this.$set(this.form, 'channelWindow', false);
      this.$set(this.form, 'beforeTime', '');

      this.$set(this.form, 'backStatus', '');
      this.$set(this.form, 'backTime', '1');
      this.$set(this.form, 'taxRate', '');
      this.$set(this.form, 'backStatus', '');
      this.$set(this.form, 'days', '');
      this.$set(this.form, 'hour', '');
      this.$set(this.form, 'saleArea', '');
      this.$set(this.form, 'stopSaleTime', '');
      this.$set(this.form, 'saleTimeAll', '');
      
      this.$set(this.form, 'oneMany', '');
      this.$set(this.form, 'personnelNum', undefined);

      this.$set(this.form, 'checkList', ['A','B'])
      this.$set(this.form, 'seatTypeList', []);
      this.$set(this.form, 'allowReSubmit', 1);
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      // this.reset();
      this.open = false;
    },
    getSeatTypeList() {
      seatTypeList().then(response => {
        this.seatTypeListArr = Array.isArray(response.data.list) ? response.data.list : [];
      });
    },
    // 新增方法 - 根据销售渠道设置默认值
    setDefaultChannelValues() {
      // 重置所有渠道为 false
      this.$set(this.form, 'channelWx', false);
      this.$set(this.form, 'channelWindow', false);
      this.$set(this.form, 'channelAutoSale', false);
      this.$set(this.form, 'channelPersonSale', false);

      // 根据选择的渠道设置对应值为 true
      switch(this.channelType) {
        case '1': // 小程序
          this.$set(this.form, 'channelWx', true);
          break;
        case '2': // 窗口
          this.$set(this.form, 'channelWindow', true);
          break;
        case '3': // 自助售/取票机
          this.$set(this.form, 'channelAutoSale', true);
          break;
        case '4': // 小程序(分销)
          this.$set(this.form, 'channelPersonSale', true);
          break;
        default:
          break;
      }
    },
  },
};
</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;
      }
    }
  }
}
</style>
<style>
.custom-class-box {
  z-index: 999999 !important;
}
</style>