scrm-vue/src/scrm_pages/article/createArticle.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
    </div>
  <div>
    <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="文章">
        <el-form label-width="80px" class="clearfix" :model="form" ref="form"  :element-loading-text="loadingText">
          <el-row>
            <el-col :span="23">
                <el-form-item label="文章标题:">
                    <el-input v-model="form.act_name"  placeholder="文章标题"></el-input>
                </el-form-item>
              <el-form-item label="文章内容:">
                <keep-alive>
                  <neditor ref="neditor"
                           id="editor"
                           v-bind:r_content="form.act_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 prop="org_log">
                <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="imageUrl" :src="imageUrl" 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="guploading"
                      :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="所属分类:">
                 <el-select v-model="value" placeholder="请先选择文章所属分类" prop="act_type">
                   <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="submitForm" :disabled="formsubmit">发布</el-button>
                      <el-button size="small" style="width: 100px">预览</el-button>
                      <el-button size="small" style="width: 100px">保存草稿</el-button>
                  <el-button size="small" style="width: 100px">取消</el-button>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="视频">
        <el-form label-width="80px" class="clearfix">
           <el-row>
             <el-col :span="24">
                 <div style="margin-bottom: 100px">
                 <el-form-item>
                 <div class="video-select">
                   <el-upload
                   class="upload-demo"
                   action="https://upload.qiniup.com"
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :before-remove="beforeRemove"
                   multiple
                   :limit="3"
                   :on-exceed="handleExceed"
                   :file-list="fileList"
                   :before-upload="beforeUpload">
                   <el-button size="small" type="primary">点击上传</el-button>
                   <div slot="tip" class="el-upload__tip">只能上传jpg/exe文件，且不超过2G</div>
                   </el-upload>
                   </div>
                   <div class="progressbar probar" style="text-align: center">
                   <span class="videotitle"></span>
                   <input type="hidden" name="videoUrl" id="videopath">
                   <div class="barpic"></div>
                   <span class="chaimg"></span>
                   <span class="videoupload"></span>
                   </div>
                 </el-form-item>
                  </div>
                 <el-form-item label="视频标题:">
                   <el-input placeholder="视频标题"></el-input>
                 </el-form-item>
                 <el-form-item label="视频封面:"></el-form-item>
                 <el-form-item>
                   <el-upload  class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                     <img v-if="imageUrl" :src="imageUrl" class="avatar">
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                   </el-upload>
                 </el-form-item>
                  <el-form-item label="所属分类:">
                    <el-select v-model="form.act_type" placeholder="请选择">
                      <el-option
                         v-for="item in options"
                         :key="item.value"
                        :label="item.label"
                         :value="item.value">
                      </el-option>
                      </el-select>
                  </el-form-item>
                   <el-row :span="24">
                     <el-col :span="24">
                       <el-form-item>
                         <el-button size="small" type="primary" style="width: 100px">发布</el-button>
                         <el-button size="small" style="width: 100px">保存草稿</el-button>
                         <el-button size="small" style="width: 100px">取消</el-button>
                       </el-form-item>
                     </el-col>
                   </el-row>
             </el-col>
           </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
     </div>
    </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 {submitForm,getArticleType} from '@/api/act/submitinfo'
  import { getToken } from '@/api/qiniu'
  import { getFileExtension} from '@/utils/tools'
  export default {
    name: 'createArticle',
    components:{
     BreadCrumb,
      Neditor,
   },
    data(){
      return {
        crumbs: [
          { path: false, name: '文章管理' },
          { path: '/articles/createArticle', name: '发布文章' }
        ],
         radio:'1',
        options: [],
        value: '',
        show:false,
        content: '',
        editorOption: {},
        uploadUrl:"",//你要上传视频到你后台的地址
        videoFlag:false , //是否显示进度条
        videoUploadPercent:"", //进度条的进度，
        isShowUploadVideo:false, //显示上传按钮
        company:"",
        fileList: [{name: '123', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        form:{
          act_name:'',
          act_content:'',
          act_picture:'',
          act_category:'',
          org_logo:'',
          act_type:'',
        },
         acttypes:[],
         imageUrl:'',
         imageUrlSecond:'',
         imageUrlLast:'',
         formloading:false,
         formsubmit:false,
         qiniuDomain: 'https://images.shengws.com/',
         uploading:false,
         loadingText:'',
         uploadData: { token: '', key: '' },
         myConfig: {
                // 如果需要上传功能,找后端小伙伴要服务器接口地址
                serverUrl: '/api/web/upload/ueditor',
                // 你的UEditor资源存放的路径,相对于打包后的index.html
                UEDITOR_HOME_URL: '/NEditor/',
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 240,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 关闭自动保存
                enableAutoSave: false
            },
      }
    },
    created(){
        this.getArticleType()
    },
    methods: {
      //第一个图片
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        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;
                })
            })

          //return isJPG && isLt2M;
      },
      //第二个图片
      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;
                })
            })

          //return isJPG && isLt2M;
      },

      //第三张图片
      //第二个图片
      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.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;
                })
            })

          //return isJPG && isLt2M;
      },

      beforeUpload(file) {
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
        const extension = testmsg === 'mp4'
        const extension2 = testmsg === 'exe'
        const isLt2M = file.size / 1024 / 1024 < 2048     //这里做文件大小限制
        if(!extension && !extension2) {
          this.$message({
            message: '上传文件只能是 mp4、exe格式!',
            type: 'warning'
          });
        }
        if(!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过 2G!',
            type: 'warning'
          });
        }
        return extension || extension2 && isLt2M
      },
      select(){
        this.show = false
      },
      clickitem(){
        this.show = true
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      submitForm(){
        var params  = new Object()
        params.act_name = this.form.act_name
        params.act_content = this.$refs.neditor.content
        params.org_logo = this.form.org_logo
        this.formloading=true
        this.submitForm =true
        console.log("文章标题",params.act_name)
        console.log("文章内容",params.act_content)
        console.log("富文本编辑器的内容",params.act_content)
        console.log("图片",params.org_logo)
        submitForm(params).then(response => {
           if(response.data.state === 1){
             this.$message({
               type: 'success',
               message: '成功!'
             })
           }
        })
      },
      getArticleType(){
        getArticleType().then(response =>{
            console.log("好嗨我")
            if(response.data.state === 1){
            var category = response.data.data.category
            this.options = response.data.data.category
             console.log("文章内容:",category)
             console.log("文章",this.options)
            }
        })
      }
    },
  }
</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;
  }
  /*视频*/
  .video-select {
    padding: 150px 0 30px;
    background: url("/static/images/video_load.png") no-repeat;
    background-position: center 0;
    background-size: 192px 132px;
    text-align: center;
    width: 200px;
    height: 200px;
    position: relative;
    left: 500px;
  }

</style>