所有功能实现

明梦爽

2022-03-02 1861d195f7f3a7364c1099356858c94a6c0741e2

 src/components/Administrator/Edit.vue

@@ -1,19 +1,29 @@
<template>
  <div class="box">
    <el-row><h3 style="margin-top: 0px">{{ $route.query.title }}</h3></el-row>
    新闻标题：<el-input v-model="title" placeholder="请输入新闻标题"></el-input><br/><br/>
    发布日期：<el-date-picker v-model="releaseTime" placeholder="请选择新闻发布日期"></el-date-picker><br/><br/>
    发布日期：<el-date-picker  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="releaseTime" placeholder="请选择新闻发布日期"></el-date-picker><br/><br/>
    新闻内容：<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
    <div class="btn">
    <el-row style="margin-top:50px;">
      <el-button  type="success" @click="submit">发布</el-button>
    </div>
      <!-- <input type="file" @change="chooseFile"/><br/><br/>
      <el-button  type="success" @click="tijiao">提交</el-button><br/><br/>
      <img :src="'http://localhost:7070/'+this.photo" style="width: 400px"> -->
    </el-row>
  </div>
</template>
<script>
import { add } from '../../api/api'
import { quillEditor } from 'vue-quill-editor'
import axios from 'axios'

import { add,fileUpload, login } from '../../api/api'
import {quillEditor,Quill} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { container, ImageExtend,QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
axios.defaults.withCredentials = true;

export default {
  components:{ quillEditor },
  data(){
@@ -21,24 +31,85 @@
      title:'', //标题内容
      releaseTime:'', //发布日期
      content: '',  //新闻内容
      picture:null,
      photo:'',
      newsCategoryId:2,
      editorOption: {
        placeholder: "请输入正文",
        // editorOption里是放图片上传配置参数用的，例如：
        action:  '/api/product/richtext_img_upload.do',  // 必填参数 图片上传地址
        methods: 'POST',  // 必填参数 图片上传方式
        token: '',  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
        name: 'upload_file',  // 必填参数 文件的参数名
        size: 10000000,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
        accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'  // 可选 可上传的图片格式
        modules: {
            ImageExtend: {  // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入 
                name: 'file',  // 图片参数名
                loading: true,
                size: 10,  // 可选参数 图片大小，单位为M，1M = 1024kb
                action:'http://localhost:7070/uploading',
                response: (res) => {
                  console.log(res);
                    return 'http://localhost:7070/'+res.data
                },
                headers: (xhr) => {
                  // axios.defaults.withCredentials = true;
                  // xhr.setRequestHeader('Cookie','NMTID=00OVM6QOJcTDVhqDUtvgSnd-5FBxLcAAAF9nTiDHg; JSESSIONID=5ACC52D29A2434E09450CB975E08C288')
                },  // 可选参数 设置请求头部
                sizeError: () => {},  // 图片超过大小的回调
                start: () => {},  // 可选参数 自定义开始上传触发事件
                end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
                error: () => {},  // 可选参数 上传失败触发的事件
                success: () => {},  // 可选参数  上传成功触发的事件
                change: (xhr, formData) => {
                // formData.append('token', 'myToken')
                } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
            },
            toolbar:{
                container:[
                    ['bold', 'italic', 'underline', 'strike'],        //加粗，斜体，下划线，删除线
                    ['blockquote', 'code-block'],         //引用，代码块
                    [{ 'header': 1 }, { 'header': 2 }],               // 标题，键值对的形式；1、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': [] }],         //字体
                    [{ 'align': [] }],        //对齐方式
                    ['clean'],        //清除字体样式
                    ['image']        //上传图片、上传视频
                ],
                handlers: {
                    'image': function () {  // 劫持原来的图片点击按钮事件
                        QuillWatch.emit(this.quill.id)
                    }
                }
            },
        },
      } ,  //编辑器新闻对象
      fileList:[],
    }
  },
  created(){
    // console.log('>>>>>>>',this.$route.query.id);
    this.newsCategoryId = this.$route.query.id
  },
  mounted(){
  },
  methods:{
    // chooseFile(file){
    //   this.picture = file.target.files[0];
    //   console.log(this.picture)
    //   return false;
    // },
    // tijiao(){
    //   const fd = new FormData()
    //   fd.append('file',this.picture)
    //   fileUpload(fd).then(res => {
    //     console.log(res)
    //     if(res.code == 200){
    //       this.photo = res.data
    //       console.log(this.photo);
    //     }
    //   })
    // },
    submit(){
      const data = {
        newsCategoryId:this.newsCategoryId,
@@ -46,6 +117,8 @@
        title:this.title,
        releaseTime:this.releaseTime
      }
      console.log(this.content);
      // console.log(this.newsCategoryId);
      add(data).then(res => {
        console.log(res);
        if(res.code !== 200){
@@ -56,7 +129,7 @@
          this.$router.go(-1)
        }
      })
    }
    },
  }
}
</script>
@@ -74,4 +147,8 @@
  bottom: 20px;
  left: 168px;
}
.ql-editor img{
  width: 100px !important;
  height: 100px !important;
}
</style>