csair-web/src/views/news/edit.vue

<template>
  <el-row>
    <el-row style="padding-top: 50px;width: 1500px;padding-left: 30px">
      <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-form-item label="标题" prop="newsTitle">
                <el-input v-model="form.newsTitle" placeholder="在这里输入标题" show-word-limit maxlength="40"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="简介" prop="intro" style="margin-top: 5px">
                <el-input v-model="form.intro" type="textarea" :rows="7" placeholder="在这里输入简介" show-word-limit maxlength="300"></el-input>
              </el-form-item>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-form-item label="网址">
                <el-col :span="20"><el-input v-model="form.newUrl" placeholder="在这里粘贴文章地址"></el-input></el-col>
                <el-col  :span="4"><el-button type="primary" @click="crawler">获取内容</el-button></el-col>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-row style="height: 131px">
                <el-col  :span="12">
                  <el-form-item label="缩略图" prop="imageUrl">
                    <div @click="onClick">
                    <material-dialog  v-model="form.imageUrl" sourceType="新闻资讯"></material-dialog>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col  :span="12">
                  <div style="height: 131px"><img :src="OSS_URL + form.imageUrl" style="height: 131px;width: 248px;border-radius: 4px"></div>
                </el-col>
              </el-row>
            </el-row>
            <el-row style="padding-top: 15px;height: 130px;">
              <el-col :span="24"><img @click="changeBorder('1')" class="img1" src="../../assets/news2.png" style="margin-left: 56px;border-radius: 4px;box-sizing: border-box;width: 122px;height: 82px">
              <img @click="changeBorder('2')" class="img2" src="../../assets/hangye2.png" style="margin-left: 18px;border-radius: 4px;box-sizing: border-box;width: 122px;height: 82px">
              <img @click="changeBorder('3')" class="img3" src="../../assets/hangye.png"   style="margin-left: 19px;border-radius: 4px;box-sizing: border-box;width: 122px;height: 82px">
            <img @click="changeBorder('4')" class="img4" src="../../assets/hangye.png"  style="margin-left: 19px;border-radius: 4px;box-sizing: border-box;width: 122px;height: 82px">
          </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin-top: 0px">
          <el-form-item label="内容">
            <quill-editor ref="myTextEditor" v-model="form.content" :options="editorOption" style="height: 300px;"></quill-editor>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>

    <el-row style="padding: 50px 150px;text-align: left;">
      <el-button type="primary" @click="handleSave">保存</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="toPortalDetail">预览</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="checkboxrelease">发布</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button type="primary" @click="toBack">取消</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </el-row>
  </el-row>
</template>

<script>
  import materialDialog from '@/views/material/dialog'
  import newsApi from '@/api/newsApi'
  import crawlerApi from '@/api/crawlerApi'

  export default {
    name: 'courseIntroduce',
    components: {
      'material-dialog': materialDialog
    },
    data () {
      return {
        saveMark: 0,
        form: {
          id: '',
          newsTitle: '',
          content: '',
          newUrl: '',
          intro: '',
          imageUrl: '',
          classtype: 1,
          releaseStatue: 0,
          pushIndex: 0,
          secondTop: 0
        },
        formRules: {
          newsTitle: { required: true, message: '请输入标题', trigger: 'blur' },
          intro: { required: true, message: '请输入简介', trigger: 'blur' },
          imageUrl: { required: true, message: '请选择缩略图', trigger: 'blur' }
        },
        editorOption: {
          placeholder: '请输入内容'
        }
      }
    },
    mounted () {
      this.form['id'] = this.$route.params.msgKey
      this.findById()
    },
    methods: {
      toBack () {
        this.$confirm('是否取消创建/修改文章?，并退出编辑页面?', {
          confirmButtonText: '继续退出',
          cancelButtonText: '留下',
          type: 'primary'
        }).then(() => {
          this.$router.push({name: 'News'})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已退出编辑页面'
          })
        })
      },
      onClick () {
        var d = document.getElementsByClassName('el-dialog')
        d[0].style.marginTop = '10vh'
        d[1].style.marginTop = '10vh'
      },
      crawler () {
        if (this.form.newUrl === '') {
          this.$message({
            type: 'info',
            message: '网址不能为空'
          })
        }
        crawlerApi.crawler(this.form.newUrl).then(data => {
          this.form.newsTitle = data.newsTitle
          this.form.content = data.content
          this.form.intro = data.intro
        })
      },
      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return false
          }
        this.$confirm('是否马上保存文章?', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'primary'
        }).then(() => {
            newsApi.save(this.form).then(data => {
              this.saveMark = 1
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
        })
      },
      changeBorder (temp) {
        let img1 = document.getElementsByClassName('img1')
        img1[0].style.marginLeft = '60px'
        for (var i = 1; i < 5; i++) {
          let img2 = document.getElementsByClassName('img' + i)
          img2[0].style.border = ''
        }
       let img3 = document.getElementsByClassName('img' + temp)
        img3[0].style.border = 'solid 4px #00afff'
        if (temp === '1') {
          this.form['imageUrl'] = '/vr_resource/images/news/static/news2.png'
        }
        if (temp === '2') {
          this.form['imageUrl'] = '/vr_resource/images/news/static/hangye2.png'
        }
        if (temp === '3') {
          this.form['imageUrl'] = '/vr_resource/images/news/static/news.png'
        }
        if (temp === '4') {
          this.form['imageUrl'] = '/vr_resource/images/news/static/hangye.png'
        }
      },
      toPortalDetail () {
        if (this.form['id'] !== undefined) {
          window.open(`${this.PORTAL_URL}/#/main/new/${this.form['id']}`, '_blank')
        } else {
          this.$message.error('请保存后再进行预览')
        }
      },
      findById () {
        if (this.form['id']) {
          newsApi.findById(this.form['id']).then(data => {
            this.form['id'] = data.id
            this.form['newsTitle'] = data.newsTitle
            this.form['content'] = data.content
            this.form['newUrl'] = data.newUrl
            this.form['intro'] = data.intro
            this.form['imageUrl'] = data.imageUrl
            this.form['classtype'] = data.classtype
            this.form['releaseStatue'] = data.releaseStatue
            this.form['pushIndex'] = data.pushIndex
            this.form['secondTop'] = data.secondTop
          })
        }
      },
      checkboxrelease () {
        this.$confirm('是否马上发布文章?', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'primary'
        }).then(() => {
          if (this.form['id'] !== undefined | this.saveMark === 1) {
            newsApi.checkboxrelease(this.form['id']).then(data => {
              this.list()
            })
          } else {
            this.$message.error('请保存后再进行发布')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
      }
    }
  }
</script>
<style scoped>
  .el-icon-circle-plus {
    font-size: 50px;
  }
  /deep/ .el-dialog {
    margin-top: 10vh
  }
  /deep/ .el-button--primary {
    background-color: #2493e5;
    border-color: #2493e5;
  }
  /deep/ .el-button--mini, .el-button--mini.is-round{
    padding: 9px 19px;
  }
  /deep/ .el-input--mini .el-input__inner{
    height: 32px;
  }
</style>