hfysite/pages/manger/news/add.vue

<script>


// import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
// Vue.use( CKEditor );
import RoundedTitle from "../../../components/public/roundedTitle.vue";
import PopCard from "../../../components/public/popCard.vue";
import ImageTable from "../../../components/public/imageTable.vue";
import Pop from "../../../components/public/pop.vue";
import TableSelect from "../../../components/public/tableSelect.vue";
import dbField_esm from "../../../map/dbField_esm";
import {checkFormItem, initForm} from "../../../until/formTool";
import InputRow from "../../../components/public/form/inputRow.vue";
import ImageViewer from "../../../components/public/imageViewer.vue";
import {handle} from "../../../until/handle";
import {apiMap} from "../../../map/apiMap";
import {rCode} from "../../../map/rcodeMap_esm";

import {fieldCheck} from "../../../until/form/fieldVerify";

import {FormVerify} from "kind-form-verify";
import {escapeHtml, unescapeHtml} from "@/until/unescapeHtml";
import {isEmpty} from "../../../until/typeTool";
let ClassicEditor;
// let MyCustomPlugin;
if (process.client) {
  ClassicEditor = require('../../../model/ckeditor/ckeditor');
  // ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
    console.log(ClassicEditor);
  // MyCustomPlugin = require('../../../until/customCkeditorPlugin');
}

let formVerify = null;
export default {
  name: "add",
  components: {
    ImageViewer,
    InputRow,
    TableSelect,
    Pop,
    ImageTable,
    PopCard,
    RoundedTitle
    // Use the <ckeditor> component in this view.
  },
  props: ['article'],
  watch: {
    article(val){
      // 更新文章数据
      this.editModel()
    }
  },
  computed: {
    // 产品类型数据
    newsTypes(){
      let arr = [];
      if (this.form.pType.val === dbField_esm.db_base.newsType.all){
        arr = this.$store.getters.allNewsTypes;
      }else if (this.form.pType.val === dbField_esm.db_base.newsType.news){
        arr = this.$store.getters.newsTypes;
      }else if (this.form.pType.val === dbField_esm.db_base.newsType.solution){
        arr = this.$store.getters.solutionTypes;
      }
      if (arr[0].key !== 'all'){
        // 添加 all
        arr.unshift(
          {
            text: '全部',
            key: 'all',
            value: 'all',
          }
        );
      }
      return arr;
    },
  },
  mounted() {
    formVerify = new FormVerify(
      this.form,
      fieldCheck,
    )
    // fieldCheck.checkField('type',this.form.type.val)
    // formVerify.checkForm(this.form, true);
    console.log(formVerify);
    formVerify.onLog = (msg) => {
      console.log(msg);
    };


    // 判断是否为编辑文章
    if(isEmpty(this.article)){
      this.isEdit = true;

      console.log(this.article);
      console.log(this.form);
    }
    this.initForm();

  },
  beforeDestroy() {
    formVerify = null;
  },
  data(){
    return {
      isEdit: false,
      editId: null,
      editor: ClassicEditor,
      editorData: '<p>在此输入文章内容</p>',
      editorConfig: {
        language: 'zh',
        customText: "插入图片",
      },
      imagePopShow: false,
      imagePopLoading: false,
      isCoverSelect: false,
      form: {
        pType: {
          val: dbField_esm.db_base.newsType.all,
          oldVal: dbField_esm.db_base.newsType.all,
          init: dbField_esm.db_base.newsType.all,
          msg: '',
          state: 0,
          options: [
            {text: '全部', key: dbField_esm.db_base.newsType.all, value: dbField_esm.db_base.newsType.all},
            {text: '新闻', key: dbField_esm.db_base.newsType.news, value: dbField_esm.db_base.newsType.news},
            {text: '解决方案', key: dbField_esm.db_base.newsType.solution, value: dbField_esm.db_base.newsType.solution},
          ]
        },
        type: {
          val: 'all',
          init: '',
          msg: '',
          state: 0,
          options: this.$store.getters.allNewsTypes,
          disables: ['all'],
        },
        title: {
          val: '',
          init: '',
          msg: '',
          reCheckField: 'id',
          state: 0
        },
        author: {
          val: '',
          init: '',
          msg: '',
          state: 0
        },
        source: {
          val: '',
          init: '',
          msg: '',
          state: 0
        },
        cover: {
          val: '',
          init: '',
          msg: '',
          reCheckField: 'fileData',
          state: 0
        },
        remark: {
          val: '',
          init: '',
          msg: '',
          state: 0
        },
      }
    }
  },
  beforeMount() {
    // 插入toolbar
    this.editorConfig.customFunction = () => {
      console.log('自定义插入图片按钮');
      this.openImageSelect();
    };


  },
  methods:{
    initForm(){
      this.form.pType.val = dbField_esm.db_base.newsType.all;
      this.form.type.options = this.newsTypes;
      // 判断是否为编辑文章
      initForm(this.form);
      this.form.cover.showText = this.form.cover.init;
      // 强制更新页面
      this.$forceUpdate()
    },
    editModel(){
      this.isEdit = true;


      this.editId = this.article.id;
      // 查找对应的 类型
      this.form.title.init = this.article.title;
      this.form.author.init = this.article.author;
      this.form.source.init = this.article.source;
      this.form.cover.init = this.article.image;
      console.log(this.article.image)
      this.form.remark.init = this.article.remark;
      this.editorData = this.article.htmlContent;
      this.initForm();
      let type = this.form.type.options.find((item) =>  item.type_id === this.article.type_id)
      if(type){
        console.log(`find the article type`)
        this.form.type.init = type.key;
        this.form.type.val = type.key;
        this.form.pType.init = type.parent_type;
        this.form.pType.val = type.parent_type;
      }

    },
    openCoverSelect(){
      console.log('打开文章封面选择窗口');
      this.isCoverSelect = true;
      this.imagePopShow = true;
    },
    openImageSelect(){
      console.log('尝试打开图片选择窗口');
      this.isCoverSelect = false;
      this.imagePopShow = true;
    },
    selectImageHandle(fileData){
      console.log('okHandle');
      console.log(fileData);
      this.imagePopShow = false;
      if(this.isCoverSelect){
        // 选择封面图片
        this.form.cover.val = fileData.filePath;
        this.form.cover.init = fileData.filePath;
        this.form.cover.msg = '';
        this.form.cover.state = 0;
        this.form.cover.showText = fileData.filePath;
        return;
      }
      // 将图片新增至编辑器中,允许调整图片大小
      this.editorData += `<img src="${fileData.filePath}" alt="${fileData.fileName}">`;
      console.log(this.editorData);
    },
    onPTypeChange(){
      console.log('文章主类型改变');
      console.log(this.newsTypes);
      this.form.type.val = this.newsTypes[0].key;
      this.form.type.oldVal = this.newsTypes[0].key;
      this.form.type.init = this.newsTypes[0].key;
      this.form.type.options = this.newsTypes;
    },
    async onSubmitHandle(){
      // 提交文章
      console.log('提交文章');
      // console.log(this.editorData);
      // console.log(this.form);
      let isPass = formVerify.checkForm(this.form, true);
      if(!isPass){
        console.log(this.form);
        return console.log('数据验证不通过');
      }

      let formData = formVerify.getFormData();
      console.log('------');
      console.log(formData);
      console.log('------');
      // 将content的内容转换为安全字符

      formData.content = escapeHtml(this.editorData);
      console.log(formData);
      console.log(unescapeHtml(formData.content));
      // 发送请求至后台
      let queryPath = this.isEdit? apiMap.newsEdit : apiMap.newsAdd;
      let actionText = this.isEdit? '修改文章': '新增文章';
      if(this.isEdit){
        formData.id = this.editId;
      }
      let [err,res] = await handle(this.$axios.post(
        queryPath.path,
        formData
      ));
      if(err){
        console.log(err);
        return this.$message.error(`${actionText}失败`);
      }
      let  result = res.data;
      if (result.code === rCode.OK){
        this.$message.success(`${actionText}成功`);
      }else{
        this.$message.error(`${actionText}失败,${result.msg}`);
      }

    }
  }
}
</script>

<template>
<div class="w-full p-2">
  <rounded-title class="text-xl">
    <span>{{ isEdit? "修改文章": "新增文章" }}</span>
    <a href="/manger/news"
       class="px-10 h-full ml-5 rounded bg-blue-400 text-white cursor-pointer
        hover:text-orange-500 ">文章中心</a>
  </rounded-title>
  <div class="page-content-box w-full mt-2 p-0.5  rounded bg-white">
    <div class="flex pb-1 border-b border-gray-300 border-dashed">
      <a-radio-group class="flex flex-shrink-0  items-center" v-model="form.pType.val" @change="onPTypeChange">
        <a-radio-button class="" :value="item.key" v-for="item in form.pType.options" :key="item.key">{{item.text}}</a-radio-button>
      </a-radio-group>

      <table-select
        class="w-48 !mx-3 flex-shrink-0"
        :options="form.type.options"
        v-model="form.type.val"
      />
      <div v-if="form.type.msg" class="flex items-center pl-2 text-red-500 font-bold border-l border-b-orange-700">
        {{form.type.msg}}
      </div>
    </div>

    <input-row class="mt-2" :msg="form.author.msg"
               label="作者">
      <a-input v-model="form.author.val" placeholder="请输入作者"></a-input>
    </input-row>

    <input-row class="mt-2" :msg="form.source.msg"
               label="来源">
      <a-input v-model="form.source.val" placeholder="请输入来源"></a-input>
    </input-row>

    <input-row class="mt-2" :msg="form.title.msg"
               label="标题">
      <a-input v-model="form.title.val" placeholder="请输入标题"></a-input>
    </input-row>

    <input-row class="mt-2" :msg="form.remark.msg"
               remark="文章的简介摘要部分,用于外部展示"
               label="摘要" >
      <a-input v-model="form.remark.val" placeholder="请输入摘要"></a-input>
    </input-row>

    <input-row class="my-2" :msg="form.cover.msg"
               label="文章封面">
      <div class="rounded relative" style="width: 524px;height: 360px" >
        <image-viewer class="" :src="form.cover.showText?form.cover.showText.charAt(0) == '/'? form.cover.showText : '/public/'+form.cover.showText : '' " :alt="form.cover.showText" ></image-viewer>
        <div class="absolute w-full h-full left-0 top-0
              justify-center text-white bg-gray-400
              items-center text-2xl flex opacity-0 hover:opacity-70"
              @click="openCoverSelect"
        >
          点击选择封面图片
        </div>
      </div>
    </input-row>

    <ckeditor class="mt-2" ref="ckeditor" :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

    <div class="mt-2">
      <a-button type="primary" @click="onSubmitHandle">
        {{isEdit?"保存修改":"新增文章"}}
      </a-button>
    </div>
  </div>


<!--  图片选择弹窗 -->
  <pop :show="imagePopShow" :loading="imagePopLoading">
    <pop-card>
      <template slot="header">
        <span>选择需要插入的图片</span>
      </template>
      <image-table
        class="w-full h-full"
        @cancel="imagePopShow = false"
        @ok="selectImageHandle">

      </image-table>
    </pop-card>

  </pop>
</div>
</template>

<style scoped>
.page-content-box{
  min-height: 500px;
}
</style>