wangluohuoyun-htqd/src/views/officialWebsiteManagement/publicityEdit.vue

<template>
  <div class="center">
    <div class="main_css">
      <div class="formData">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="资讯标题">
            <el-input v-model="form.title" clearable placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="资讯日期">
            <el-date-picker v-model="form.issuingDate" type="date" value-format="yyyy-MM-dd" style='width: 100%;'
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发布机构">
            <el-input v-model="form.issuingAgency" clearable placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="封面图片">
            <el-upload class="avatar-uploader1" :action="uploadPath"
              :show-file-list="false" :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <div class="quill-editor">
            <!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
            <el-upload class="avatar-uploader" :action="uploadPath" :show-file-list="false" :on-success="uploadSuccess">
            </el-upload>
            <!--富文本编辑器组件-->
            <quill-editor v-model="form.releaseContent" :content="form.releaseContent" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
              ref="QuillEditor">
            </quill-editor>
            <div v-html="form.releaseContent" />
          </div>
          <!--            <quill-editor v-model="form.releaseContent" res="myQuillEditor" :options="editorOption" id="editor">
            </quill-editor> -->
        </el-form>
      </div>
      <div class="btn">
        <el-button @click="submit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    seeData,
    editFormData,
    uploadPath
  } from '@/api/officialWebsiteManagement'
  import quillEditor from 'vue-quill-editor';
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
    ['blockquote', 'code-block'], //引用，代码块
    [{
      'header': 1
    }, {
      'header': 2
    }], // 几级标题
    [{
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }], // 有序列表，无序列表
    [{
      'script': 'sub'
    }, {
      'script': 'super'
    }], // 下角标，上角标
    [{
      'indent': '-1'
    }, {
      'indent': '+1'
    }], // 缩进
    [{
      'direction': 'rtl'
    }], // 文字输入方向
    [{
      'size': ['small', false, 'large', 'huge']
    }], // 字体大小
    [{
      'header': [1, 2, 3, 4, 5, 6, false]
    }], // 标题
    [{
      'color': []
    }, {
      'background': []
    }], // 颜色选择
    [{
      'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
    }], // 字体
    [{
      'align': []
    }], // 居中
    ['clean'], // 清除样式,
    ['link', 'image'], // 上传图片、上传视频
  ]
  export default {
    data() {
      return {
         imageUrl: '',
        uploadPath,
        editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions,
              handlers: {
                image: function(value) {
                  if (value) {
                    // 调用element的图片上传组件
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false)
                  }
                }
              }
            }
          }
        },
        form: {
          issuingAgency: ''
        },
        regulations: {},
        version: [],
        count: ''
      }
    },
    created() {
      this.form.makeUser = JSON.parse(localStorage.getItem('UserInfo')).deptName
    },
    mounted() {
      this.id = this.$route.query.id
      this.getList()
    },
    methods: {
         handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.cover =  res.data.url
    },
      getList() {
        this.listLoading = true
        var _obj = {}
        _obj.id = this.id
        seeData(_obj).then(response => {
            this.form = response.data
            this.imageUrl =  response.data.cover
            console.log(this.form)
            this.listLoading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      // 失去焦点
      onEditorBlur(editor) {},
      // 获得焦点
      onEditorFocus(editor) {},
      // 开始
      onEditorReady(editor) {},
      // 值发生变化
      onEditorChange(editor) {
        this.form.releaseContent = editor.html;
        console.log(editor);
      },
      beforeUpload(file) {
        const isIMAGE = ''
        file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
        const isLt1M = file.size / 1024 / 1024 < 1

        if (!isIMAGE) {
          this.$message.error('上传文件只能是图片格式!')
        }
        if (!isLt1M) {
          this.$message.error('上传文件大小不能超过 1MB!')
        }
        return isIMAGE && isLt1M
      },
      uploadSuccess(res) {
        // 获取富文本组件实例
        let quill = this.$refs.QuillEditor.quill
        // 如果上传成功
        if (res.data.errno = 200 && res.data.url) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片，res为服务器返回的图片链接地址
          quill.insertEmbed(length, 'image', res.data.url)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          // 提示信息，需引入Message
          this.$message.error('图片插入失败！')
        }
      },

      submit() {
        this.listLoading = true
        this.form.contentType = '资讯'
        this.form.id = this.id
        delete this.form.createDate
        delete this.form.createUserId
        delete this.form.updateDate
        delete this.form.deleteFlag
        delete this.form.number
        editFormData(this.form).then(response => {
            this.$notify({
              title: '成功',
              message: '添加成功！',
              type: 'success'
            });
            this.listLoading = false
            this.$router.go(-1)
          })
          .catch(() => {
            this.loading = false
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .center {
    background: #F5F6F7;
    min-height: calc(100vh - 50px);
    padding-top: 20px;

  }

  .main_css {
    width: 96%;
    height: 90vh;
    overflow-y: scroll;
    background: #FFFFFF;
    margin: 20px auto;
    padding-top: 20px;
  }

  .formData {
    width: 50%;
    margin: 20px 0 0 140px;
  }

  .btn {
    text-align: right;
    position: absolute;
    right: 200px;
    bottom: 100px;
  }

  .ql-editor {
    height: 400px !important;
  }
    .avatar-uploader1 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader1 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>