FE_occupationlab_server/src/pages/information/addarticle/index.vue

<template>
    <div>
        <el-card shadow="hover" class="m-b-20">
            <div class="flex-between">
                <el-page-header @back="goBack" :content="'新增文章'"></el-page-header>
            </div>
        </el-card>
        <el-card shadow="hover" class="m-b-20">
            <el-form label-width="90px" label-suffix=":" size="small">
                <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="coverUrl" :src="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="作者">
                    <div class="d-inline-block">
                        <el-input placeholder="请输入作者" v-model="author" clearable></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="日期">
                    <div class="d-inline-block">
                        <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="文章标题">
                    <el-input placeholder="请输入文章标题" v-model="title" clearable></el-input>
                </el-form-item>
                <el-form-item label="文章内容">
                    <quill :border="true" v-model="content" :uploading.sync="uploading" :height="400" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-throttle @click="saveData">确定</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { mapState } from "vuex";
import quill from "@/components/quill";
import util from "@/libs/util";
import Setting from "@/setting";

export default {
    name: "addarticle",
    data() {
        return {
            headers: {
                token: util.local.get(Setting.tokenKey)
            },
            columnId: +this.$route.query.columnId,
            sort: +this.$route.query.sort,
            id: "",
            coverUrl: "",
            uploadList: [],
            uploadDataList: [],
            author: "",
            date: "",
            title: "",
            content: "",
            submiting: false,
            uploading: false
        };
    },
    components: {
        quill
    },
    computed: {
        ...mapState("user", [
          "userName", "customerName"
        ])
    },
    mounted() {
        this.id = this.$route.query.id;
        this.id && this.getData();
    },
    methods: {
        // 返回
        goBack() {
            this.$router.back();
        },
        getData() {
            this.$get(`${this.api.getArticle}/${this.id}`)
                .then(res => {
                    let data = res.article;
                    this.coverUrl = data.coverUrl;
                    this.author = data.author;
                    this.date = data.date;
                    this.title = data.title;
                    this.content = data.content;
                })
                .catch(err => {

                });
        },
        saveData() {
            if (this.submiting) return false;
            if (!this.coverUrl) return util.warningMsg("请上传封面图");
            if (!this.author) return util.warningMsg("请填写作者");
            if (!this.date) return util.warningMsg("请选择日期");
            if (!this.title) return util.warningMsg("请填写文章标题");
            if (!this.content) return util.warningMsg("请填写文章内容");
            if (this.uploading) return util.warningMsg("图片正在上传中，请稍等");
            this.submiting = true;

            let data = {
                id: this.id,
                columnId: this.columnId,
                author: this.author,
                coverUrl: this.coverUrl,
                date: this.date,
                title: this.title,
                content: this.content,
                sort: this.sort,
                createUser: this.customerName || this.userName
            };
            if (this.id) {
                this.$put(this.api.editArticle, data).then(res => {
                    this.submiting = false;
                    util.successMsg("修改成功");
                    this.back();
                })
                    .catch(err => {
                        this.submiting = false;
                    });
            } else {
                this.$post(this.api.addArticle, data).then(res => {
                    this.submiting = false;
                    util.successMsg("创建成功");
                    this.back();
                })
                    .catch(err => {
                        this.submiting = false;
                    });
            }
        },
        handleCurrentChange(val) {
            this.currPage = val;
        },
        handleExceed(files, fileList) {
            util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
        },
        uploadSuccess(res, file, fileList) {
            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;
        },
        uploadError(err, file, fileList) {
            this.$message({
                message: "上传出错，请重试！",
                type: "error",
                center: true
            });
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleRemove(file, fileList) {
            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 => {
            });
        },
        uploadSure() {
            this.BatchUpload = false;
            this.pageNo = 1;
            this.keyword = "";
            this.getData();
        },
        back() {
            // this.$router.push(`/content?id=${this.columnId}`)
            this.$router.back();
        },
        goback() {
            this.$confirm("确定返回？未更新的信息将不会保存。", "提示", {
                type: "warning"
            })
                .then(() => {
                    this.back();
                })
                .catch(() => {
                });
        },
        addSponsor() {
            this.sponsorList.push("");
        },
        delSponsor(index) {
            this.sponsorList.splice(index, 1);
        },
        addOrganizer() {
            this.organzinerList.push("");
        },
        delOrganizer(index) {
            this.organzinerList.splice(index, 1);
        }
    }
};
</script>

<style lang="scss" scoped>
$avatar-width: 104px;
/deep/ .avatar-uploader {
    .el-upload {
        position: relative;
        width: $avatar-width;
        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;
            }
        }
    }
}

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

    .el-select, .el-input {
        width: 100%;
    }
}
</style>