micro_vue/src/scrm_pages/article/editArticle.vue

<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
             <el-form label-width="100px" class="clearfix" :model="form" ref="arctileform"  :element-loading-text="loadingText" :rules="artilcrules">
          <el-row>
            <el-col :span="23">
                <el-form-item label="文章标题:" required prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
              <el-form-item label="文章内容:" required prop="content">
                <keep-alive>
                  <neditor ref="neditor"
                           id="editor"
                           v-bind:r_content="form.content">
                  </neditor>
                </keep-alive>
              </el-form-item>
              <el-form-item label="封面图片:">
                  <el-radio v-model="radio" label="1" @click.native.prevent="select()" >单图</el-radio>
                  <el-radio v-model="radio" label="2" @click.native.prevent="clickitem()" >三图</el-radio>
              </el-form-item>
              <el-form-item>
                <el-col :span="3">
                  <div>
                    <el-upload
                      v-loading="uploading"
                      :element-loading-text="loadingText"
                      class="avatar-uploader"
                      :data="uploadData"
                      action="https://upload.qiniup.com"
                      :show-file-list="false"
                      :on-error="handleAvatarError"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="form.imgs" :src="form.imgs" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div v-if="show">
                    <el-upload
                      v-loading="uploading"
                      :element-loading-text="loadingText"
                      class="avatar-uploader"
                      :data="uploadData"
                      action="https://upload.qiniup.com"
                      :show-file-list="false"
                      :on-error="handleAvatartwoError"
                      :on-success="handleAvatartwoSuccess"
                      :before-upload="beforeAvatartwoUpload">
                      <img v-if="imageUrlSecond" :src="imageUrlSecond" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div v-if="show">
                    <el-upload
                      v-loading="uploading"
                      :element-loading-text="loadingText"
                      class="avatar-uploader"
                      :data="uploadData"
                      action="https://upload.qiniup.com"
                      :show-file-list="false"
                      :on-error="handleAvatarlastError"
                      :on-success="handleAvatarlastSuccess"
                      :before-upload="beforeAvatarlastUpload">
                      <img v-if="imageUrlLast" :src="imageUrlLast" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                </el-col>
              </el-form-item>
               <el-form-item label="所属分类:" prop="class_id">
                 <el-select v-model="form.class_id" placeholder="请先选择文章所属分类"  @change="changeActtype()">
                   <el-option
                     v-for="item in options"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
                   </el-option>
                 </el-select>
               </el-form-item>
            </el-col>
          </el-row>

          <el-row :span="24">
            <el-col :span="24">
                <el-form-item>
                      <el-button size="small" type="primary" style="width: 100px"  @click="UpdataArticleInfo('arctileform');">发布</el-button>
                      <el-button size="small" style="width: 100px" @click="preview('arctileform')">预览</el-button>
                      <el-button size="small" style="width: 100px" @click="save('arctileform');centerdraftVisible = false">保存草稿</el-button>
                  <el-button size="small" style="width: 100px" @click="centercancelVisible = true">取消</el-button>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-dialog
           title="发表成功"
           :visible.sync="dialogVisible"
            width="30%"
            center>
           <span>这是一段信息</span>
           <span slot="footer" class="dialog-footer">
           <el-button @click="gobackList()">返回文章列表</el-button>
           </span>
         </el-dialog>

        <el-dialog
           title="发表成功"
           :visible.sync="dialogVisible"
            width="30%"
            center>
           <span>这是一段信息</span>
           <span slot="footer" class="dialog-footer">
           <el-button @click="gobackList()">返回文章列表</el-button>
           </span>
         </el-dialog>
         
       <el-dialog
         title="提示"
         :visible.sync = "centercancelVisible"
         width="30%"
         center>
         <span style="center">是否确定取消编辑此文章/视频</span>
         <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="centercancelVisible = false" >确认</el-button>
         <el-button @click="centercancelVisible = false">取消</el-button>   
        </span>   
       </el-dialog>
        </div>
    </div>
</template>

<script>
    import BreadCrumb from '../components/bread-crumb'
    import { quillEditor } from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import Neditor from '@/components/Neditor'
    import { getToken } from '@/api/qiniu'
    import { getFileExtension} from '@/utils/tools'
    import {getEditArticle,getMenus,UpdataArticleInfo,previewEditArticle} from '@/api/act/submitinfo'
    export default {
        name: "editArticle",
         components:{
            BreadCrumb,
            Neditor,
         },
         data(){
            return {
             crumbs: [
              { path: false, name: '文章管理' },
              { path: '/articles/editArticle/:id', name: '编辑文章' }
              ],
               radio:'1',
        options: [],
        value: '',
        show:false,
        content: '',
        editorOption: {},
        company:"",
        fileList: [],
        form:{
          class_id:'', 
          content:'',                        
          imgs:'',                
          title:'',                 
          file:'',
        },
         acttypes:[],
         imageUrl:'',
         imageUrlSecond:'',
         imageUrlLast:'',
         formloading:false,
         formsubmit:false,
         qiniuDomain: 'https://images.shengws.com/',
         uploading:false,
         loadingText:'',
         uploadData: { token: '', key: '' },
         uploadFileData:{token:'',key:''},
         uploadvidoData:{token:'',key:''},
         centerDialogVisible: false,
         centerdraftVisible:false,
         centercancelVisible:false,
         formLabelAlign:true,
         modlevidel:'',
         filsListArray:[],
         show:true,
         shows:false,
         rules: {
            vid_name: [{required: true, message: "视频标题不能为空"},],
            vio_upload: [{required: true,message:"请上传视频"}],
            vid_type: [{required: true,message:"所属分类不能为空"}]
          },
        artilcrules:{
            title: [{required: true, message: "文章标题不能为空"},],
            content: [{required: true,message:"文章内容不能为空"}],
            class_id: [{required: true,message:"所属分类不能为空"}]
        },
        vidoform:[],
        dialogVisible:false,
        }
    },
         methods:{
             //第一个图片
      handleAvatarSuccess(res, file) {
       this.form.org_logo = this.qiniuDomain + res.url;
        this.uploading = false
      },
       handleAvatarError(err, file, fileList) {
            this.$message.error(err);
            this.uploading = false;
            return false
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }

            var date = new Date()
            var ext = getFileExtension(file.name)
            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
            this.uploading = true;
            this.loadingText = '封面图片上传中'

            const _self = this
            return new Promise((resolve, reject) => {
                getToken().then(response => {
                    const token = response.data.data.uptoken
                    console.log("token是什么?",token)
                    _self._data.uploadData.token = token
                    _self._data.uploadData.key = key
                    resolve(true)
                }).catch(err => {
                    reject(false)
                    this.uploading = false;
                })
            })
      },
      //第二个图片
      handleAvatartwoSuccess(res, file) {
        this.imageUrlSecond = URL.createObjectURL(file.raw);
        this.form.org_logo = this.qiniuDomain + res.url;
        this.uploading = false
      },
       handleAvatartwoError(err, file, fileList) {
            this.$message.error(err);
            this.uploading = false;
            return false
      },
      beforeAvatartwoUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }

            var date = new Date()
            var ext = getFileExtension(file.name)
            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
            this.uploading = true;
            this.loadingText = '封面图片上传中'

            const _self = this
            return new Promise((resolve, reject) => {
                getToken().then(response => {
                    const token = response.data.data.uptoken
                    console.log("token是什么?",token)
                    _self._data.uploadData.token = token
                    _self._data.uploadData.key = key
                    resolve(true)
                }).catch(err => {
                    reject(false)
                    this.uploading = false;
                })
            })
      },

      //第三张图片
      handleAvatarlastSuccess(res, file) {
        this.imageUrlLast = URL.createObjectURL(file.raw);
        this.form.org_logo = this.qiniuDomain + res.url;
        this.uploading = false
      },
       handleAvatarlastError(err, file, fileList) {
            this.$message.error(err);
            this.uploading = false;
            return false
      },
      beforeAvatarlastUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }

            var date = new Date()
            var ext = getFileExtension(file.name)
            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
            this.loadingText = '封面图片上传中'

            const _self = this
            return new Promise((resolve, reject) => {
                getToken().then(response => {
                    const token = response.data.data.uptoken
                    console.log("token是什么?",token)
                    _self._data.uploadData.token = token
                    _self._data.uploadData.key = key
                    resolve(true)
                }).catch(err => {
                    reject(false)
                })
            }) 
        },
        getEditArticle(id){
           getEditArticle(id,this.form).then(response=>{
                 if(response.data.state == 1){
                     var articles = response.data.data.articles;
                     this.form.title = articles.title;
                     this.form.content = articles.content;
                     this.form.imgs = articles.imgs;
                     this.form.class_id = articles.class_id;
                     console.log(articles.title)
                     console.log("文章内容",articles)
                 }
           });
        }, 
        getMenus(){
            getMenus().then(response =>{
                if(response.data.state == 1){
                   var categorys = response.data.data.categorys;
                   this.options = categorys;
                   console.log("分类号",categorys)
                   
                }
            })
        },
        
        UpdataArticleInfo(forName){
              this.form.act_content = this.$refs.neditor.content;
              const id = this.$route.params && this.$route.params.id;
             console.log("文章内容",this.$refs.neditor.content);
             console.log("id是多少?",id)
             this.$refs[forName].validate((valid)=>{
                 if(valid){
                    UpdataArticleInfo(id,this.form).then(response=>{
                         if(response.data.state == 1){
                             this.dialogVisible = true;      
                         }
                    }); 
                 }
             })
        },
        gobackList(){
           this.$router.push({path:'/articles/articleList'})
        },
        preview(forName){
            this.form.act_content = this.$refs.neditor.content;
            const id = this.$route.params && this.$route.params.id; 
            this.$refs[forName].validate((valid)=>{
              if(valid){
                 previewEditArticle(id,this.form).then(response=>{
                   if(response.data.state == 1){
                       this.$router.push("/articles/articleEditPreview")
                   }
                 })
              }
            })
        }
      },
      created(){
         const id = this.$route.params && this.$route.params.id;
         console.log("id是什么?",id)
          this.getEditArticle(id)
          this.getMenus()
      },
    }
</script>

<style scoped>
     .avatar-uploader{
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    width: 140px;
    height: 140px;
  }
  .avatar-uploader{
    border-color: #f0f2f5;
  }
  .avatar-uploader-icon {
    font-size: 25px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>