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="back" :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"
            :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" action="" :http-request="handleRequest">
            <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="save(0)">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Oss from '@/components/upload/upload.js'
import { mapState } from "vuex";
import quill from "@/components/quill";
import util from "@/libs/util";
import Setting from '@/setting'
export default {
  name: "addarticle",
  data () {
    return {
      id: this.$route.query.id,
      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.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,
      updateTime: 0,
    };
  },
  computed: {
    ...mapState("user", [
      "userName"
    ])
  },
  components: {
    quill
  },
  watch: {
    // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
    form: {
      handler (val) {
        this.updateTime++
      },
      deep: true
    }
  },
  // 离开的时候判断是否有保存更改的信息,没有则拦截并提示
  beforeRouteLeave (to, from, next) {
    if (this.updateTime) {
      this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', {
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        this.save(next)
      }).catch(() => {
        next()
      })
    } else {
      next()
    }
  },
  mounted () {
    this.id && this.getData();
  },
  methods: {
    getData () {
      this.$get(`${this.api.getArticle}?articleId=${this.id}`).then(({ article }) => {
        this.form = article
        this.$nextTick(() => {
          this.updateTime = 0
        })
      }).catch(err => { })
    },
    handleCurrentChange (val) {
      this.currPage = val;
    },
    handleExceed (files, fileList) {
      util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
    },
    // 封面自定义上传
    async handleRequest ({ file }) {
      this.form.coverUrl && Oss.del(this.form.coverUrl)
      Oss.upload(file).then(res => {
        this.form.coverUrl = res.url
      })
    },
    uploadError (err, file, fileList) {
      this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true
      });
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove (file, fileList) {
      Oss.del(this.form.coverUrl)
      this.form.coverUrl = ''
    },
    uploadSure () {
      this.BatchUpload = false;
      this.pageNo = 1;
      this.keyword = "";
      this.getData();
    },
    addSponsor () {
      this.sponsorList.push("");
    },
    delSponsor (index) {
      this.sponsorList.splice(index, 1);
    },
    addOrganizer () {
      this.organzinerList.push("");
    },
    delOrganizer (index) {
      this.organzinerList.splice(index, 1);
    },
    save (cb) {
      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.updateTime = 0
              cb ? cb() : this.$router.back()
            })
              .catch(err => {
                this.submiting = false;
              });
          } else {
            this.createUser = this.userName
            this.$post(this.api.addArticle, form).then(res => {
              this.submiting = false;
              util.successMsg("创建成功");
              this.updateTime = 0
              cb ? cb() : this.$router.push('list')
            })
              .catch(err => {
                this.submiting = false;
              });
          }
        }
      })
    },
    back () {
      // 更改了信息才需要提示
      if (this.updateTime) {
        this.$confirm(`编辑的内容未保存，是否保存？`, '提示', {
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.save()
        }).catch(() => {
          this.updateTime = 0
          this.$router.back()
        })
      } else {
        this.updateTime = 0
        this.$router.back()
      }
    }
  }
};
</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>