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 :model="form" :rules="rules" ref="form" label-width="90px" label-suffix=":" size="small">
                <el-form-item prop="coverUrl" 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 prop="author" label="作者">
                    <div class="d-inline-block">
                        <el-input placeholder="请输入作者" v-model="form.author" clearable></el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="date" label="日期">
                    <div class="d-inline-block">
                        <el-date-picker v-model="form.date" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item prop="title" label="文章标题">
                    <el-input placeholder="请输入文章标题" v-model="form.title" clearable></el-input>
                </el-form-item>
                <el-form-item prop="content" label="文章内容">
                    <quill :border="true" v-model="form.content" :uploading.sync="uploading" :height="400" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @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)
            },
            form: {
              columnId: +this.$route.query.columnId,
              sort: +this.$route.query.sort,
              id: '',
              coverUrl: '',
              author: '',
              date: '',
              title: '',
              content: '',
              createUser: this.customerName || this.userName
            },
            rules: {
              coverUrl: [
                { required: true, message: '请上传封面', trigger: 'change' }
              ],
              author: [
                { required: true, message: '请输入作者', trigger: 'blur' }
              ],
              date: [
                { required: true, message: '请选择日期', trigger: 'change' }
              ],
              title: [
                { required: true, message: '请输入文章标题', trigger: 'blur' }
              ],
              content: [
                { required: true, message: '请输入文章内容', trigger: 'blur' }
              ],
            },
            uploadList: [],
            uploadDataList: [],
            submiting: false,
            uploading: false
        };
    },
    computed: {
        ...mapState("user", [
          "userName", "customerName"
        ])
    },
    components: {
        quill
    },
    mounted() {
        this.id = this.$route.query.id;
        this.id && this.getData();
    },
    methods: {
        // 返回
        goBack() {
            this.$router.back();
        },
        getData() {
          this.$get(`${this.api.getArticle}?articleId=${this.id}`).then(({ article }) => {
            this.form = article
          }).catch(err => {})
        },
        saveData() {
          this.$refs.form.validate((valid) => {
            if (valid) {
              if (this.submiting) return false
              const { form } = this
              if (this.uploading) return util.warningMsg("图片正在上传中，请稍等");
              this.submiting = true
              if (form.id) {
                  this.$put(this.api.editArticle, form).then(res => {
                      this.submiting = false;
                      util.successMsg("修改成功");
                      this.back();
                  })
                      .catch(err => {
                          this.submiting = false;
                      });
              } else {
                  this.createUser = this.customerName || this.userName
                  this.$post(this.api.addArticle, form).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.form.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.form.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.form.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", "");
            this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
                this.form.coverUrl = "";
            }).catch(res => {
            });
        },
        uploadSure() {
            this.BatchUpload = false;
            this.pageNo = 1;
            this.keyword = "";
            this.getData();
        },
        back() {
            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>