python_93040206/ClientPlatform/src 2/pages/admin/children/blog/blog.vue

<template>
  <div class="blog-page">
    <div class="title">撰写博客</div>
    <div class="edit-box">
      <div class="nav">
        <div class="nav-item">
          <div class="label">选择分类</div>
          <div class="value">
            <el-select
              size="mini"
              v-model="typeValue"
              multiple
              class="dom"
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="nav-item">
          <div class="label">添加标签</div>
          <div class="value">
            <el-select
              class="dom"
              size="mini"
              v-model="tagValue"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in tags"
                :key="item.name"
                :label="item.name"
                :value="item.id"
                >{{ item.name }}
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="edit">
        <vue2-tinymce-editor
          :options="options"
          ref="tinymce"
          v-model="content"
        ></vue2-tinymce-editor>
        <div class="btn">
          <el-button class="push-blog" type="primary" @click="pushBlog"
            >发布</el-button
          >
        </div>
      </div>
      <div class="upload-box">
        <el-upload
          class="upload-demo"
          ref="upload"
          action="string"
          :before-upload="onBeforeUploadImage"
          :http-request="UploadImage"
          :on-change="fileChange"
          :on-remove="removeFile"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
    </div>
  </div>
</template>
<script>
import { Vue2TinymceEditor } from "vue2-tinymce-editor";
import {
  getBlogDetail,
  getTags,
  getTypes,
  putBlogDetail,
  getFiles,
  uploadFile,
} from "@/api";
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      typeValue: [],
      typeList: [],
      tagValue: [],
      tags: [],
      content: "",

      options: {
        language_url: "./tinymce/lang/zh-Hans.js",
        language: "zh-Hans", // 注意大小写
      },
      tinymceKey: "12131",
      // 记录旧的博文信息
      blogDetail: {},
      fileList: [], // 上传文件
    };
  },
  components: { Vue2TinymceEditor },
  mounted() {
    this.pageInit();
  },
  methods: {
    async pageInit() {
      const tags = await getTags({
        type: "all",
        userId: this.userInfo.id,
        token: window.localStorage.getItem("token"),
      });
      console.log(858585, tags);
      this.tags = tags.data;
      const typeList = await getTypes();
      this.typeList = typeList.data;
      if (this.$route.query?.id) {
        const res = await getBlogDetail(this.$route.query);
        console.log(93, res);
        this.blogDetail = res.data;
        this.content = res.data.content;
        this.typeValue = res.data.types;
        this.tagValue = res.data.tags;
        this.getFiles();
      }
    },
    async getFiles() {
      if (this.$route.query?.id) {
        const res = await getFiles({
          blogId: this.$route.query?.id,
        });
        // res.
        this.fileList = res.data;
      }
    },
    async pushBlog() {
      if (!this.userInfo?.id) return;
      const params = {
        ...this.blogDetail,
        types: this.typeValue,
        tags: this.tagValue,
        content: this.content,
        userId: this.userInfo.id,
        token: window.localStorage.getItem("token"),
        fileList: this.fileList,
      };
      console.log(110, params);
      const res = await putBlogDetail(params);
      console.log(res);
      this.$message({
        message: "发布成功",
        type: "success",
      });
    },
    onBeforeUploadImage(file) {
      const isIMAGE = file.type === "image/jpeg" || "image/jpg" || "image/png";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isIMAGE) {
        this.$message.error("上传文件只能是图片格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 1MB!");
      }
      return isIMAGE && isLt1M;
    },
    UploadImage(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      formData.append("userId", this.userInfo?.id);
      uploadFile(formData)
        .then((response) => {
          console.log(response);
          console.log("上传图片成功");
          this.fileList.push(response.data);
          param.onSuccess(); // 上传成功的图片会显示绿色的对勾
          // 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
        })
        .catch((response) => {
          console.log("图片上传失败");
          param.onError();
        });
    },
    fileChange(file) {
      // console.log(194, file);
      // this.$refs.upload.clearFiles(); // 清除文件对象
      // this.logo = file.raw; // 取出上传文件的对象，在其它地方也可以使用
      // this.fileList = [{ name: file.name, url: file.url }]; // 重新手动赋值filstList， 免得自定义上传成功了, 而fileList并没有动态改变， 这样每次都是上传一个对象
    },
    removeFile(file, fileList) {
      this.fileList = fileList;
    },
  },
};
</script>
<style lang="less" scoped>
.blog-page {
  //margin-left: 0;
  //width: 100vw;
  background-color: #f8f9fb;
  padding: 24px;
  //background-color: #fff;
  //margin-top: 350px;
  .title {
    text-align: left;
  }
  .edit-box {
    .nav {
      display: flex;
      margin-bottom: 24px;
      .nav-item {
        display: flex;
        font-size: 14px;
        margin-right: 10px;
        .label {
          margin-right: 5px;
        }
        .value {
          width: 300px;
          .dom {
            width: 100%;
          }
        }
      }
    }
    .edit {
      .btn {
        text-align: right;
        margin-top: 5px;
      }
    }
  }
}
</style>