|
@@ -0,0 +1,475 @@
|
|
|
+<!--
|
|
|
+ * @Description: 新增/编辑弹框
|
|
|
+ * @Author: Sugar.
|
|
|
+ * @Date: 2023-11-24 13:55:00
|
|
|
+ * @LastEditors: Sugar.
|
|
|
+ * @LastEditTime: 2023-11-24 13:55:00
|
|
|
+ * @FilePath: \cattle_webui\src\views\performMr\dialog\AddOrEditDialog.vue
|
|
|
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="open"
|
|
|
+ width="900px"
|
|
|
+ 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
|
|
|
+ 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="选择日期" v-if="form.insertType == '2'" prop="performDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.performDate"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="选择日期" v-if="form.insertType == '1'" prop="performDate">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.performDate"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </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: "blur" }],
|
|
|
+ auditoriumId: [{ required: true, message: "请选择演出厅", trigger: "blur" }],
|
|
|
+ performId: [{ required: true, message: "请选择剧目", trigger: "blur" }],
|
|
|
+ performDate: [{ required: true, message: "请选择日期", trigger: "blur" }],
|
|
|
+ timeList: [{ required: true, message: "请添加场次", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ uploadObj: {
|
|
|
+ url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
|
|
|
+ Headers: { Authorization: "Bearer " + getToken() },
|
|
|
+ },
|
|
|
+ theatreList: [],
|
|
|
+ goodsList: [],
|
|
|
+ merchantList: [],
|
|
|
+ editType: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 打开弹框
|
|
|
+ * @date 2023-11-22
|
|
|
+ * @param {any} obj
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ openDialog(title, obj, type) {
|
|
|
+ this.open = true;
|
|
|
+ this.editType = false;
|
|
|
+ this.getList();
|
|
|
+ this.goodsPageList();
|
|
|
+ // this.merchantPageList();
|
|
|
+ if (obj){
|
|
|
+ this.title = "编辑排期";
|
|
|
+ this.form.insertType = '1';
|
|
|
+ this.editType = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$set(this.form, 'id', obj.id);
|
|
|
+ this.$set(this.form, 'performDate', obj.performDate);
|
|
|
+ this.$set(this.form, 'performId', obj.performId);
|
|
|
+ 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.form.insertType = '2';
|
|
|
+ } else {
|
|
|
+ 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;
|
|
|
+ if(name){
|
|
|
+ this.theatreList.forEach(item => {
|
|
|
+ this.$set(this.form, 'venueId', item.id)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.merchantPageList(this.form.venueId)
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ /** 场馆选择 */
|
|
|
+ changeTheatre(id) {
|
|
|
+ this.merchantPageList(id)
|
|
|
+ },
|
|
|
+ /** 剧目列表查询 */
|
|
|
+ goodsPageList() {
|
|
|
+ goodsPageList(this.addDateRange({pageNum: 1, pageSize: 100}))
|
|
|
+ .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.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.id = this.form.id
|
|
|
+ }
|
|
|
+ this.loading = true;
|
|
|
+ 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.$refs["form"].resetFields();
|
|
|
+ this.form.id = undefined;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭弹框
|
|
|
+ * @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() {
|
|
|
+ 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) {
|
|
|
+ end = row.performTimeEnd.split(":");
|
|
|
+ endTime = (end[0] * 3600) + (end[1] * 60);
|
|
|
+ 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>
|