FE_middlePlatform_server/src/views/system/addLog.vue

<template>
    <div class="wrap">
       <el-card shadow="hover" class="mgb20">
            <div class="flex-between">
                <div class="per_title" v-preventReClick @click="$router.back()">
                    <i class="el-icon-arrow-left"></i>
                    <span class="per_back">返回</span>
                    <span class="per_school" v-text="id ? '编辑更新日志' : '新增更新日志'"></span>
                </div>
                <div v-if="!isDetail">
                    <el-button type="primary" round v-preventReClick @click="submit(0)">发布</el-button>
                    <el-button v-if="!postStatus" type="primary" round v-preventReClick @click="submit(1)">草稿</el-button>
                </div>
            </div>              
        </el-card>
        
        <el-card shadow="hover">
            <el-form ref="form" label-width="120px" :disabled="isDetail">
                <el-form-item label="版本标题">
                    <el-input placeholder="请输入版本标题" v-model="form.versionName" maxlength="30" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="封面图片">
                    <el-upload
                        class="avatar-uploader"
                        accept=".jpg,.png,.jpeg"
                        :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="form.coverUrl" :src="form.coverUrl" class="avatar">
                        <div class="uploader-default" v-else>
                            <i class="el-icon-plus"></i>
                            <p>上传封面</p>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="更新内容">
                    <ul class="contents">
                        <li v-for="(item, i) in form.content" :key="i">
                            <div class="action">
                                <el-select v-model="value" size="small" placeholder="请选择版本">
                                    <el-option
                                        v-for="item in vers"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <div class="btns">
                                    <i v-if="i === form.content.length - 1" class="el-icon-circle-plus-outline" @click="add"></i>
                                    <i class="el-icon-delete" @click="del"></i>
                                </div>
                            </div>
                            <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="请输入"
                                v-model="textarea">
                            </el-input>
                        </li>
                    </ul>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id : this.$route.query.id,
            form: {
                versionName: '',
                coverUrl: '',
                content: [{}]
            }
        };
    },
    mounted() {
        this.id && this.getData()
    },
    methods: {
        // 获取详情
        getData() {
            this.$get(`${this.api.logGet}?logId=${this.id}`).then(res => {
                const { log } = res
                this.form.versionName = log.versionName
                this.form.coverUrl = log.coverUrl
            }).catch(res => {})
        },
        // 新增内容
        add() {
            this.form.content.push({})
        },
        // 删除内容
        del() {

        },
        // 保存
        submit(draft){
            const { versionName, coverUrl } = this.form
            const id = this.id
            if (!versionName) return this.$message.error('请输入版本标题')
            if (!coverUrl) return this.$message.error('请输入更新内容')
            const data = {
                versionName,
                coverUrl,
                draft
            }
            if (id) {
                data.logId = id
                this.$post(this.api.listUpdate, data).then(res => {
                    this.$message.success('编辑成功')
                    this.$router.back()
                }).catch(res => {})
            } else {
                this.$post(this.api.logAdd, data).then(res => {
                    this.$message.success('新增成功')
                    this.$router.back()
                }).catch(res => {})
            }
        },
    }
};
</script>

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

        &:hover {
            border-color: #409EFF;
        }

        .uploader-default {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: $avatar-width !important;
            height: $avatar-width;
            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 {
            width: $avatar-width;
            height: $avatar-width;
            display: block;
        }
    }

    .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;
            }
        }
    }
}
.contents {
    width: 700px;
    li {
        padding: 15px;
        margin-bottom: 20px;
        border: 1px dashed #e9e9e9;
        border-radius: 8px;
    }
    .action {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    .btns {
        i {
            margin-left: 10px;
            color: #9076FF;
            cursor: pointer;
            &:hover {
                opacity: .9;
            }
        }
    }
}
</style>