TelpoUserManageAdmin/src/views/message-manage/main/add-articles/index.vue

<!--
 * @Date: 2022-08-08 10:09:45
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-08-09 16:44:50
 * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\add-articles\index.vue
 * @description: 添加文章
-->

<template>
    <div class="home-container">
      <!-- 顶部内容 -->
      <div class="top-container">
        <TopMenu :buttonList="buttonList"/>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-form-item label="文章标题:">
          <el-input v-model="form.articleTitle" ></el-input>
        </el-form-item>
        <el-form-item label="文章类型:">
          <el-select v-model="form.articleType" placeholder="请选择文章类型">
            <el-option :label="item.label" :value="item.label" v-for="(item, index) in articleTypes" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="分享标题:">
          <el-input v-model="form.shareTitle"></el-input>
        </el-form-item>
        <el-form-item label="分享简介:">
          <el-input v-model="form.shareAbout"></el-input>
        </el-form-item>
        <el-form-item label="分享图片:">
          <el-button  v-show="fileList.length > 0" disabled type="warning">请删除图片后再上传</el-button>
          <el-upload
            class="upload-img"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="onPreview"
            :on-remove="onRemove"
            :on-progress="onProgress"
            :before-remove="beforeRemove"
            :before-upload="beforeUpload"
            :on-error="onError"
            :on-success="onSuccess"
            :on-change="onUploadChange"
            :auto-upload="false"
            :limit="1"
            list-type="picture"
            :file-list="fileList">
            <el-button size="small" type="primary" v-show="fileList.length <= 0">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              <p>最多上传一张，尺寸750X300</p>
            </div>
          </el-upload>
        </el-form-item>


        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容:">
          <tinymce v-model="form.articleContent" :height="5" menubar="false" />
         <!--  <p>文章内容：{{form.articleContent}}</p> -->
        </el-form-item>

        <!-- 保存 -->
        <el-form-item class="footer-btn">
            <el-button type="primary" @click="onSave">保存</el-button>
            <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import TopMenu from "@/components/TopMenu/index";
import Tinymce from '@/components/Tinymce'
export default {
  name: 'wechat-fans',
  components: { TopMenu, Tinymce },
  data(){
   return {
     buttonList: [], // 头部按钮，例子：  {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
    //  表单数据
     form: {
       articleTitle: '', //文章标题
       articleType: '普通文章', //文章类型
       shareTitle: '', //分享标题
       shareAbout: '', //分享简介
       shareImage: '', //分享图片
       articleContent: '', //文章内容

     },
    //  文章类型
     articleTypes: [
       { label: '普通文章', value: '普通文章' },
       { label: '特别文章', value: '特别文章' },
       { label: '其它文章', value: '其它文章' },
     ],
    //  图片列表
    fileList: [],

   }
  },
  mounted() {},
  created() {
    this.clearFiles();
    console.log("本地的上传图片列表", this.fileList);
  },
  methods: {
    // 清空本地上传的图片列表
    clearFiles() {},
    // 删除上传的图片
    onRemove() {
      this.fileList = []
    },
    // 点击文件列表中已上传的文件时的钩子
    onPreview(file) {
      console.log("点击了上传图片", file);
    },
    // 删除上传图片
    beforeRemove(file) {
      return this.$confirm(`确定删除 ${ file.name }？`);
    },
    // 上传图片前
    beforeUpload(file) {
      console.log("上传图片前::", file);
    },
    // 上传失败
    onError(err) {
      return this.$confirm(`上传失败,请联系管理人`);
    },
    // 上传成功
    onSuccess(file) {
      console.log("上传成功", file);
    },
    // 文件上传时
    onProgress(fileList) {
      console.log("fileList", fileList);
    },
    // 上传文件发生变化时
    onUploadChange(file) {
      console.log('传文件发生变化时', file);
      if(this.fileList.length > 0) {
        this.fileList.length = 0
      } else {
        this.fileList.push(file);
      }
    },
    // 保存
    onSave() {
      console.log("保存的内容::", this.form);
    }
  }
}
</script>

<style scoped lang="scss">
  .home-container {
    position: relative;
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 20px;
    p {
      padding: 5px;
    }
  }
  .upload-img {
    width: 400px;
    .el-button {
      margin-left: 0;
    }
  }
</style>