FE_occupationlab_server/src/pages/match/manage/matchDetail.vue

<template>
    <!-- 大赛详情 -->
    <div style="padding: 24px"  @click="test">
        <div class="page-content">
            <el-form label-width="170px" label-suffix=":" size="small">
                <el-form-item label="竞赛封面（选填）">
                    <el-upload
                        class="avatar-uploader"
                        accept=".jpg,.png,.jpeg,.gif"
                        :on-remove="handleRemove"
                        :on-error="uploadError"
                        :on-success="uploadSuccess"
                        :before-remove="beforeRemove"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :action="this.api.fileupload"
                        :headers="headers"
                        name="file"
                    >
                        <img v-if="coverUrl" :src="coverUrl" class="avatar">
                        <div class="uploader-default" v-else>
                            <i class="el-icon-plus"></i>
                            <p>上传封面</p>
                        </div>
                        <div slot="tip" class="el-upload__tip">
                            <p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="竞赛封面长图（选填）">
                    <el-upload
                        class="avatar-uploader avatar-uploader-lg"
                        accept=".jpg,.png,.jpeg,.gif"
                        :on-remove="handleLgRemove"
                        :on-error="uploadError"
                        :on-success="uploadLgSuccess"
                        :before-remove="beforeRemove"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :action="this.api.fileupload"
                        :headers="headers"
                        name="file"
                    >
                        <img v-if="carouselUrl" :src="carouselUrl" class="avatar-lg">
                        <div class="uploader-default" v-else>
                            <i class="el-icon-plus"></i>
                            <p>上传封面</p>
                        </div>
                        <div slot="tip" class="el-upload__tip">
                            <p>展示宽度为1920，高度300，JPG/PNG/GIF，3MB以内</p>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="竞赛名称">
                    <div class="d-inline-block">
                        <el-input placeholder="请输入竞赛名称" v-model="name" clearable></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="主办方">
                    <div class="inline-input">
                        <div class="input-wrap" v-for="(item,index) in sponsorList" :key="index">
                            <el-input placeholder="主办方名称" v-model="sponsorList[index]"></el-input>
                            <i v-if="sponsorList.length > 1" class="remove" @click="delSponsor(index)"></i>
                            <button v-if="index == 0" class="add-btn" @click="addSponsor">
                                <i class="el-icon-plus"></i>
                                <span>添加</span>
                            </button>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="承办方（选填）">
                    <div class="inline-input">
                        <div class="input-wrap" v-for="(item,index) in undertakerList" :key="index">
                            <el-input placeholder="承办方名称" v-model="undertakerList[index]"></el-input>
                            <i v-if="undertakerList.length > 1" class="remove" @click="delOrganizer(index)"></i>
                            <button v-if="index == 0" class="add-btn" @click="addOrganizer">
                                <i class="el-icon-plus"></i>
                                <span>添加</span>
                            </button>
                        </div>
                    </div>
                    <button v-if="!undertakerList.length" class="add-btn" @click="addOrganizer">
                        <i class="el-icon-plus"></i>
                        <span>添加</span>
                    </button>
                </el-form-item>
                <el-form-item label="报名时间">
                    <el-date-picker v-model="signupTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="竞赛时间">
                    <el-date-picker v-model="playTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="竞赛详情">
                    <quill :border="true" v-model="description" :height="400" />
                </el-form-item>
                <el-form-item>
                    <el-button v-throttle @click="save(1)">保存</el-button>
                    <el-button type="primary" v-if="publishStatus == 1" v-throttle @click="save(0)">发布</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import quill from "@/components/quill";
import util from "@/libs/util";
import Setting from "@/setting";
import { mapActions } from "vuex";
import EventBus from "@/libs/bus.js";

export default {
    name: "matchDetail",
    data() {
        return {
            headers: {
                token: util.local.get(Setting.tokenKey)
            },
            id: this.$route.query.id,
            coverUrl: "",
            carouselUrl: "",
            publishStatus: 0,
            uploadList: [],
            uploadDataList: [],
            name: "",
            sponsor: "",
            sponsorList: [""],
            undertaker: "",
            undertakerList: [],
            signUpStartTime: "",
            signUpEndTime: "",
            signupTime: "",
            playTime: "",
            playStartTime: "",
            playEndTime: "",
            description: "",
            touchTime:0,
        };
    },
    created() {
    },
    components: {
        quill
    },
    watch: {
        signupTime: function(val) {
            if (val) {
                this.signUpStartTime = val[0];
                this.signUpEndTime = val[1];
            } else {
                this.signUpStartTime = "";
                this.signUpEndTime = "";
            }
        },
        playTime: function(val) {
            if (val) {
                this.playStartTime = val[0];
                this.playEndTime = val[1];
            } else {
                this.playStartTime = "";
                this.playEndTime = "";
            }
        }
    },
    mounted() {
        this.getData();
        this.commitId();
        EventBus.$on("tabClickWait0", () => this.waitSave());
    },
    methods: {
        test() {
            this.$store.commit("match/setWait", 0);
            // console.log(this.$store.state.match.waitIndex)
            console.log('testClick')
        },
        ...mapActions("match", [
            "setMatchId"
        ]),
        waitSave() {
            this.$confirm('暂未保存，是否保存本次编辑?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.save(1)
                EventBus.$emit('tabChangeWait', this.$store.state.match.waitIndex)
            }).catch(() => {
                this.$message({
                    type: 'success',
                    message: '已取消保存'
                });
                EventBus.$emit('tabChangeWait', this.$store.state.match.waitIndex)
            });
            
        },
        save(status) {
            this.touchTime = 0
            this.sponsor = this.sponsorList.filter(d => d).join();
            this.undertaker = this.undertakerList.filter(d => d).join();
            if (!this.name) return util.warningMsg("请填写竞赛名称");
            if (status == 0) {
                if (!this.sponsor) return util.warningMsg("请填写主办方");
                if (!this.signUpStartTime) return util.warningMsg("请选择报名时间");
            }
            let now = new Date().getTime();
            let signUpStartTime = new Date(this.signUpStartTime).getTime();
            let signUpEndTime = new Date(this.signUpEndTime).getTime();
            let playStartTime = new Date(this.playStartTime).getTime();
            // if(signUpStartTime && now > signUpStartTime) return this.$$message.warning('报名时间不能早于当前时间')
            if (!this.playStartTime && status == 0) return util.warningMsg("请选择竞赛时间");
            if (playStartTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间");
            if (!this.description && status == 0) return util.warningMsg("请填写竞赛详情");
            let data = {
                id: this.id,
                coverUrl: this.coverUrl,
                carouselUrl: this.carouselUrl,
                description: this.description,
                founderId: 1,
                name: this.name,
                playEndTime: this.playEndTime,
                playStartTime: this.playStartTime,
                publishStatus: status ? this.publishStatus : 0,
                signUpEndTime: this.signUpEndTime,
                signUpStartTime: this.signUpStartTime,
                sponsor: this.sponsor,
                undertaker: this.undertaker
            };
            if (this.id) {
                this.$put(this.api.editContest, data).then(res => {
                    util.successMsg("修改成功");
                    this.$router.back();
                }).catch(err => {
                });
            } else {
                this.$post(this.api.addContest, data).then(res => {
                    util.successMsg("创建成功");
                    this.$router.back();
                }).catch(err => {
                });
            }
        },
        getData() {
            this.$get(this.api.getContest + "/" + this.id).then(res => {
                let data = res.contest;
                this.coverUrl = data.coverUrl;
                this.carouselUrl = data.carouselUrl;
                this.description = data.description;
                this.name = data.name;
                this.playEndTime = data.playEndTime;
                this.playStartTime = data.playStartTime;
                this.publishStatus = data.publishStatus;
                this.signUpEndTime = data.signUpEndTime;
                this.signUpStartTime = data.signUpStartTime;
                this.sponsor = data.sponsor;
                this.undertaker = data.undertaker;
                this.signupTime = [data.signUpStartTime, data.signUpEndTime];
                this.playTime = [data.playStartTime, data.playEndTime];
                this.sponsorList = data.sponsor.split(",");
                this.undertakerList = data.undertaker.split(",");
            }).catch(err => {
            });
        },
        commitId() {
            this.setMatchId(this.id);
            // this.$store.commit("setMatchId", { matchId: this.id });
        },
        handleExceed(files, fileList) {
            this.touchTime = this.touchTime+1
            util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
        },
        uploadSuccess(res, file, fileList) {
            this.touchTime = this.touchTime+1
            if (this.coverUrl) {
                let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", "");
                this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
                }).catch(res => {
                });
            }
            this.coverUrl = res.data.filesResult.fileUrl;
        },
        uploadLgSuccess(res, file, fileList) {
            this.touchTime = this.touchTime+1
            if (this.carouselUrl) {
                let fileName = this.carouselUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", "");
                this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
                }).catch(res => {
                });
            }
            this.carouselUrl = res.data.filesResult.fileUrl;
        },
        uploadError(err, file, fileList) {
            this.touchTime = this.touchTime+1
            this.$message({
                message: "上传出错，请重试！",
                type: "error",
                center: true
            });
        },
        beforeRemove(file, fileList) {
            this.touchTime = this.touchTime+1
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleRemove(file, fileList) {
            this.touchTime = this.touchTime+1
            let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", "");
            this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
                this.coverUrl = "";
            }).catch(res => {
            });
        },
        handleLgRemove(file, fileList) {
            this.touchTime = this.touchTime+1
            let fileName = this.carouselUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", "");
            this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
                this.carouselUrl = "";
            }).catch(res => {
            });
        },
        uploadSure() {
            this.touchTime = this.touchTime+1
            this.BatchUpload = false;
            this.pageNo = 1;
            this.keyword = "";
            this.getData();
        },
        goback() {
            this.$confirm("确定返回？未更新的信息将不会保存。", "提示", {
                type: "warning"
            }).then(() => {
                this.$router.push("/match");
            }).catch(() => {
            });
        },
        addSponsor() {
            this.touchTime = this.touchTime+1
            this.sponsorList.push("");
        },
        delSponsor(index) {
            this.touchTime = this.touchTime+1
            this.sponsorList.splice(index, 1);
        },
        addOrganizer() {
            this.touchTime = this.touchTime+1
            this.undertakerList.push("");
        },
        delOrganizer(index) {
            this.touchTime = this.touchTime+1
            this.undertakerList.splice(index, 1);
        }
    },
    beforeDestroy() {
        if (this.touchTime>0){
            this.$confirm('暂未保存，是否保存本次编辑?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.sponsor = this.sponsorList.filter(d => d).join();
                this.undertaker = this.undertakerList.filter(d => d).join();
                if (!this.name) return util.warningMsg("请填写竞赛名称");
                if (status == 0) {
                    if (!this.sponsor) return util.warningMsg("请填写主办方");
                    if (!this.signUpStartTime) return util.warningMsg("请选择报名时间");
                }
                let now = new Date().getTime();
                let signUpStartTime = new Date(this.signUpStartTime).getTime();
                let signUpEndTime = new Date(this.signUpEndTime).getTime();
                let playStartTime = new Date(this.playStartTime).getTime();
                // if(signUpStartTime && now > signUpStartTime) return this.$$message.warning('报名时间不能早于当前时间')
                if (!this.playStartTime && status == 0) return util.warningMsg("请选择竞赛时间");
                if (playStartTime && playStartTime < signUpEndTime) return util.warningMsg("竞赛时间不能早于报名结束时间");
                if (!this.description && status == 0) return util.warningMsg("请填写竞赛详情");
                let data = {
                    id: this.id,
                    coverUrl: this.coverUrl,
                    carouselUrl: this.carouselUrl,
                    description: this.description,
                    founderId: 1,
                    name: this.name,
                    playEndTime: this.playEndTime,
                    playStartTime: this.playStartTime,
                    publishStatus: status ? this.publishStatus : 0,
                    signUpEndTime: this.signUpEndTime,
                    signUpStartTime: this.signUpStartTime,
                    sponsor: this.sponsor,
                    undertaker: this.undertaker
                };
                if (this.id) {
                    this.$put(this.api.editContest, data).then(res => {
                        util.successMsg("修改成功");
                        this.$router.back();
                    }).catch(err => {
                    });
                } else {
                    this.$post(this.api.addContest, data).then(res => {
                        util.successMsg("创建成功");
                        this.$router.back();
                    }).catch(err => {
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消保存'
                });
            });
        }
    },
};
</script>

<style scoped lang="scss">
$upload-width: 220px;
$upload-height: 140px;
$upload-lg-height: 150px;
/deep/ .avatar-uploader {
    .el-upload {
        position: relative;
        width: $upload-width;
        height: $upload-height;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        overflow: hidden;

        &:hover {
            border-color: #cb221c;
        }

        .uploader-default {
            display: flex;
            height: $upload-height;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            background: rgba(0, 0, 0, 0.04);

            i {
                font-size: 20px;
                font-weight: bold;
                color: #8c939d;
            }

            p {
                margin-top: 10px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
                line-height: 1;
            }
        }
    }

    &.avatar-uploader-lg {
        .el-upload {
            width: 100%;
            max-width: 960px;
            height: $upload-lg-height;

            .uploader-default {
                height: $upload-lg-height;
            }
        }
    }

    .avatar {
        display: block;
        width: $upload-width;
        height: $upload-height;
    }

    .avatar-lg {
        display: block;
        width: 100%;
        height: $upload-lg-height;
    }

    .el-upload__tip {
        margin-top: 0;

        p {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
            line-height: 1;

            &:first-child {
                margin-bottom: 5px;
            }
        }
    }
}

/deep/ .d-inline-block {
    width: 216px;

    .el-select, .el-input {
        width: 100%;
    }
}

.inline-input {
    .input-wrap {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .el-input {
            display: inline-block;
            width: 216px;
            margin-right: 8px;
        }

        .remove {
            width: 16px;
            height: 16px;
            background: url("../../../assets/img/close.png") 0 0/cover no-repeat;
            cursor: pointer;
        }
    }

    .add-btn {
        margin-left: 32px;
    }
}

.add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 216px;
    line-height: 32px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    background-color: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    cursor: pointer;

    i {
        margin-right: 8px;
        font-size: 14px;
        font-weight: bold;
    }
}
</style>