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.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,
      updateTime: 0,
    };
  },
  computed: {
    ...mapState("user", [
      "userName", "customerName"
    ])
  },
  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.customerName || this.userName
            this.$post(this.api.addArticle, form).then(res => {
              this.submiting = false;
              util.successMsg("创建成功");
              this.updateTime = 0
              cb ? cb() : this.$router.back()
            })
              .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>