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

<!--
 * @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\AddOrEditDialog.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="isAuth">
              <el-radio v-model="form.isAuth" label="1">全部观影人员均实名</el-radio>
            </el-form-item>
            <el-form-item label="停止售卖时间:" prop="stopSaleTime">
              <span style="margin-right: 5px">开演前</span>
              <el-input
                v-model="form.stopSaleTime"
                type="number"
                placeholder="停止售卖时间"
                clearable
                style="width: 180px;"
              >
              </el-input>
              <span style="margin-left: 5px">分钟内<i style="font-size: 12px;margin-left: 5px;">注：必须大于核销时间至少30秒</i></span>
            </el-form-item>
            <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="票务说明:">
              <el-input
                type="textarea"
                :rows="3"
                maxlength="40"
                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="是否限购:" 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-form-item>
            <el-form-item label="可售区域:" label-width="100px">
              <span @click="deliverableAreaDialogCancel(form.saleArea)" style="cursor: pointer;color: #1890ff;">请选择</span>
              <div style="width: 100%;height: 100px;overflow: hidden;overflow-y: auto;background-color: #ccc;padding: 5px;box-sizing: border-box;border-radius: 10px;">
                <div v-if="form.saleArea">
                  <el-tag :key="index" 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-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 } 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],
  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: {}
      },
      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"] }],

        backStatus: [{ required: true, message: "请选择是否支持退票", trigger: ["change","blur"] }],
        days: [{ 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: []
    };
  },
  created() {
    this.getList()
  },
  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} obj
     * @returns {any}
     */
    openDialog(title, obj) {
      this.open = true;
      this.reset();
      this.activeName = '01';
      if (obj){
        this.title = "编辑票务管理";
        this.getSelectByIdApi(obj)
      }else{
        this.title = "添加票务管理";
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      }
    },
    /** 获取详情 */
    getSelectByIdApi(row) {
      const id = row.id
      getSelectById(id).then(response => {
        const obj = response.data;
        this.$nextTick(() => {
          this.$set(this.form, 'id', obj.id);
          this.$set(this.form, 'goodsName', obj.goodsName);
          this.$set(this.form, 'isAuth', '1');
          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, 'backStatus', obj.goodsPerform.backStatus);
          this.$set(this.form, 'backTime', '1');
          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);
          }
        });
      });
    },
    /** 价格输入事件 */
    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) => {
        if (valid) {
          try {
            let postMap = {
              goodsPerform: {},
              performRefundRule: {}
            }
            if(this.form.id){
              postMap.id = this.form.id;
            }
            postMap.goodsName = this.form.goodsName;
            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';
            if(!(this.form.channelWx || this.form.channelWindow || this.form.channelAutoSale)){
              this.$message.error("请选择销售渠道!");
              return false;
            }
            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.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
            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;
          }
        }
      });
    },
    /**
     * 重置
     * @date 2023-11-22
     * @returns {any}
     */
    reset() {
      this.$set(this.form, 'id', '');
      this.$set(this.form, 'goodsName', '');
      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', '');
      this.$set(this.form, 'channelWindow', '');

      this.$set(this.form, 'backStatus', '');
      this.$set(this.form, 'backTime', '1');
      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', '');

    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      // this.reset();
      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;
  }
}
.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>