great_webui/src/views/venue/schedulingMr/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\venue\schedulingMr\dialog\AddOrEditDialog.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="900px"
    class="text-dia-log-class"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <el-form-item label="选择场馆" prop="venueId">
          <el-select
            v-model="form.venueId"
            placeholder="选择场馆"
            clearable
            @change="changeTheatre"
            style="width: 100%"
          >
            <el-option
              v-for="dict in theatreList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择演出厅" prop="auditoriumId">
          <el-select
            v-model="form.auditoriumId"
            placeholder="选择演出厅"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="dict in merchantList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择剧目" prop="performId">
          <el-select
            v-model="form.performId"
            placeholder="选择剧目"
            clearable
            @change="changePerform"
            style="width: 100%"
          >
            <el-option
              v-for="dict in goodsList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期"  prop="performDate">
          <el-date-picker
            v-model="form.performDate"
            v-if="form.insertType == '2'"
            type="daterange"
            range-separator="至"
            @change="performDateEven('list')"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-date-picker
            v-if="form.insertType == '1'"
            v-model="form.performDate"
            type="date"
            @change="performDateEven"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
<!--        <el-form-item label="选择日期" v-if="form.insertType == '1'" prop="performDate">-->
<!--          -->
<!--        </el-form-item>-->
        <el-form-item label="场次排期" prop="timeList" v-if="!editType">
          <el-button type="primary" size="small" @click="addTable">添加</el-button>
        </el-form-item>

        <el-form-item label="" v-if="form.timeList && form.timeList.length > 0">
          <el-table ref="tables" v-loading="loading" :data="form.timeList" border>
            <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
            <el-table-column label="场次名称" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="开始时间" align="center">
              <template slot-scope="scope">
                <el-time-select
                  v-model="scope.row.performTimeStart"
                  style="width: 100%"
                  @change="changValue(scope.row, 'start', scope.$index)"
                  :picker-options="{ start: '08:00', step: '00:15', end: '23:30'}"
                  placeholder="选择时间">
                </el-time-select>
              </template>
            </el-table-column>
            <el-table-column label="结束时间" align="center">
              <template slot-scope="scope">
                <el-time-select
                  v-model="scope.row.performTimeEnd"
                  style="width: 100%"
                  @change="changValue(scope.row, 'end', scope.$index)"
                  :picker-options="{ start: '08:00', step: '00:15', end: '23:30'}"
                  placeholder="选择时间">
                </el-time-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row,scope.$index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </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>
  </el-dialog>
</template>

<script>
import { saveAndEdit, addSave } from "@/api/schedulingMr/schedulingMr";
import { pageList } from "@/api/venueMr/venueMr";
import { goodsPageList } from '@/api/programmeMr/programmeMr'
import { merchantPageList } from '@/api/performanceHallMr/performanceHallMr'
import Editor from "@/components/Editor";
import { getToken } from "@/utils/auth";
export default {
  name: "addAndEdit",
  props: {
    dict: {
      type: Object,
      default: () => [],
    },
  },
  components: {
    Editor,
  },
  data() {
    return {
      title: "编辑",
      model: "EDIT",
      open: false,
      loading: false,
      tableType: false,
      form: {
        id: undefined,
        timeList: [],
        insertType: '1'
      },
      rules: {
        venueId: [{ required: true, message: "请选择场馆", trigger: ["change","blur"] }],
        auditoriumId: [{ required: true, message: "请选择演出厅", trigger: ["change","blur"] }],
        performId: [{ required: true, message: "请选择剧目", trigger: ["change","blur"] }],
        performDate: [{ required: true, message: "请选择日期", trigger: ["change","blur"] }],
        timeList: [{ required: true, message: "请添加场次", trigger: ["change","blur"] }],
      },
      uploadObj: {
        url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
        Headers: { Authorization: "Bearer " + getToken() },
      },
      theatreList: [],
      goodsList: [],
      merchantList: [],
      editType: false,
      selectPerform: {}
    };
  },
  methods: {
    /**
     * 打开弹框
     * @date 2023-11-22
     * @param {any} obj
     * @returns {any}
     */
    openDialog(title, obj, type) {
      this.open = true;
      this.editType = false;
      this.reset();
      this.getList();
      this.goodsPageList();
      // this.merchantPageList();
      if (obj){
        this.title = "编辑排期";
        this.$set(this.form, 'insertType', '1');
        this.editType = true;
        this.$nextTick(() => {
          this.$set(this.form, 'id', obj.id);
          this.$set(this.form, 'performId', obj.performId);
          this.$set(this.form, 'performDate', obj.performDate);
          this.$set(this.form, 'auditoriumId', obj.auditoriumId);
          this.$set(this.form, 'theatreName', obj.theatreName);
          this.getList(obj.theatreName);
          let map = {
            name: obj.timeSnapshot,
            performTimeStart: obj.performTimeStart,
            performTimeEnd: obj.performTimeEnd,
          }
          this.form.timeList = []
          this.$set(this.form.timeList, 0, map);
        });
      }else{
        this.title = "新增排期";
        this.form = {
            id: undefined,
            timeList: []
        };
        if(type){
          this.$set(this.form, 'insertType', '2');
        } else {
          this.$set(this.form, 'insertType', '1');
        }
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      }
    },
    /** 场馆列表查询 */
    getList(name) {
      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
        .then(response => {
            this.theatreList = response.data.rows;
            this.theatreList.forEach(item => {
              if(name == item.name){
                this.$set(this.form, 'venueId', item.id)
              }
            })
            this.merchantPageList(this.form.venueId)
          }
        );
    },
    /** 场馆选择 */
    changeTheatre(id) {
      this.merchantPageList(id)
    },
    /** 剧目选择 */
    changePerform(id) {
      this.goodsList.forEach(item => {
        if(id == item.id){
          this.selectPerform = item;
        }
      })
      this.$set(this.form, 'performDate' , '')
    },
    // yyyy-mm-dd 转时时间戳
    dateToTimestamp(year, month, day) {
      const date = new Date(year, month - 1, day);
      return date.getTime();
    },
    // 时间选择
    performDateEven(key) {
      if(!this.form.performId){
        this.$message.error("请选择剧目!");
        this.$set(this.form, 'performDate', '');
        return false;
      }
      let newTime = ''
      if(key == 'list'){
        newTime = this.form.performDate[0]
      } else {
        newTime = this.form.performDate;
      }
      let newTimeArr = newTime.split('-');
      let letTiemArr = this.selectPerform.releaseDate.split('-');
      if(this.dateToTimestamp(newTimeArr[0], newTimeArr[1], newTimeArr[2]) < this.dateToTimestamp(letTiemArr[0], letTiemArr[1], letTiemArr[2])){
        this.$message.error("开始时间不能小于剧目上映时间" + this.selectPerform.releaseDate);
        this.$set(this.form, 'performDate' , '')
        return false
      }
    },
    /** 剧目列表查询 */
    goodsPageList() {
      goodsPageList(this.addDateRange({pageNum: 1, pageSize: 100, status: 1}))
        .then(response => {
            this.goodsList = response.data.rows;
        });
    },
    /** 演出厅列表查询 */
    merchantPageList(id) {
      merchantPageList(this.addDateRange({theatreId: id, pageNum: 1, pageSize: 100}))
        .then(response => {
            this.merchantList = response.data.rows;
        });
    },

    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          try {
            if(this.form.insertType == '2') {
              this.form.performStartDate = this.form.performDate[0];
              this.form.performEndDate = this.form.performDate[1];
            }
            let postEdit = {}
            if(this.editType) {
              postEdit.id = this.form.id
            }

            postEdit.performTimeStart = this.form.timeList[0].performTimeStart
            postEdit.performTimeEnd = this.form.timeList[0].performTimeEnd
            postEdit.timeSnapshot = this.form.timeList[0].name
            postEdit.performId = this.form.performId
            postEdit.auditoriumId = this.form.auditoriumId
            postEdit.performDate = this.form.performDate
            postEdit.timeList = this.form.timeList

            this.loading = true;
            // const { code } = this.form.insertType == '2' ? await addSave({ ...this.form }) : this.form.id ? await saveAndEdit({ ...postEdit }) : await addSave({ ...this.form });
            const { code } = this.form.insertType == '2' ? await addSave({ ...this.form }) :  await saveAndEdit({ ...postEdit });
            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, 'performId', '');
      this.$set(this.form, 'performDate', '');
      this.$set(this.form, 'auditoriumId', '');
      this.$set(this.form, 'theatreName', '');
      this.$set(this.form, 'timeList', []);
    },
    /**
     * 关闭弹框
     * @date 2023-11-22
     * @returns {any}
     */
    cancel() {
      this.reset();
      this.open = false;
    },
    /**
     * 上传成功
     * @date 2023-11-22
     * @param {any} res
     * @returns {any}
     */
    handleAvatarSuccess(res) {
      if (res.code === 200) {
        // this.form.mainImg = res?.data?.url;
        this.$set(this.form, 'mainImg', res?.data?.url)
      }
    },
    /**
     * 上传文件之前之前
     * @date 2023-11-22
     * @param {any} file
     * @returns {any}
     */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      if (!isJPG) {
        this.$message.error("上传头像图片只能是jpg或png格式!");
      }
      return isJPG;
    },

    /** 点击添加排期 */
    addTable() {
      if(!this.form.performId){
        this.$message.error("请选择剧目!");
        return false;
      }
      if(this.form.insertType == '1' && this.form.timeList && this.form.timeList.length >= 1) {
        this.$message.error("只能添加单场次!");
        return false;
      }
      let map = {
        name: '',
        performTimeStart: '',
        startM: '',
        performTimeEnd: '',
        endM: '',
        err: false,
      }
      this.form.timeList.push(map)
    },

    /** 开始时间和结束时间大小判断 */
    changValue(row, key, $index) {
      let start = '', startTime = '',  end = '', endTime;
      if(row.performTimeStart && row.performTimeStart.length > 0) {
        start = row.performTimeStart.split(":");
        startTime = (start[0] * 3600) + (start[1] * 60);
        row.startM = startTime;
      }
      if(row.performTimeEnd && row.performTimeEnd.length > 0) {
        // if(this.selectPerform)
        end = row.performTimeEnd.split(":");
        endTime = (end[0] * 3600) + (end[1] * 60);
        let showDuration = this.selectPerform.showDuration * 60;
        if(endTime - row.startM < showDuration) {
          this.$message.error("选择时间不能小于剧目时长，" + this.selectPerform.showDuration + "分钟!");
          row.performTimeEnd = ""
          return false
        }
        row.endM = endTime;
      }

      // 判断场次时间段是否存在冲突
      let status = false;
      this.form.timeList.forEach((item, index) => {
        if($index != index) {
          if(key == 'start') {
            if(item.startM <= startTime && startTime <= item.endM) {
              status = true;
            }
          }
          if (key == 'end') {
            if(item.startM <= endTime && endTime <= item.endM) {
              status = true;
            }
          }
        }
      })

      if(status) {
        this.$message.error("该场次的时间和其它场次时间段冲突!");
        if(key == 'start') {
          row.performTimeStart = ""
          row.startM = ""
        } else if (key == 'end') {
          row.performTimeEnd = ""
          row.endM = ""
        }
        return false;
      }

      if(key == 'start') {
        if(endTime && startTime >= endTime) {
          row.startTime = ""
          row.startM = ""
        }
      } else if (key == 'end') {
        if(startTime && startTime >= endTime) {
          row.endTime = ""
          row.endM = ""
        }
      }
    },

    /** 删除按钮操作 */
    handleDelete(row, index) {
      if(this.form.timeList && this.form.timeList.length == 1){
        this.$message.error("只剩一场次， 不能删除!");
        return false;
      }
      this.$confirm('是否确认删除数据场次名称为"' + row.name + '"的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.timeList.splice(index, 1)
      }).catch(() => {

      });
    },
  },
};
</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;
  }
}
</style>