platformFront/src/components/knowledgeExtra/CaseInfo.vue

<template>
  <el-form
    :rules="rules"
    :model="data"
    ref="form"
    class="sub-form"
    size="mini"
    :validate-on-rule-change="false"
  >
    <el-form-item label="段落标题：" prop="title" label-width="160px" class="is-required">
      <el-input v-model="data.title"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content" label-width="160px" ref="editor">
      <quillEditor
        v-model="data.content"
        :options="editorOption"
        class="ql-editor"
        ref="quillEditor"
      ></quillEditor>
    </el-form-item>
    <div class="move_btn">
      <div
        v-if="index !== 0"
        @mouseover="moveTopHover = true"
        @mouseout="moveTopHover = false"
        title="上升"
        @click="reOrder(1)"
      >
        <img
          :src="
            moveTopHover
              ? require('@/images/icon_hover_top.png')
              : require('@/images/icon_default_top.png')
          "
          alt
        />
      </div>
      <div
        v-if="index !== total - 1"
        @mouseover="moveBottomHover = true"
        @mouseout="moveBottomHover = false"
        title="下降"
        @click="reOrder(0)"
      >
        <img
          :src="
            moveBottomHover
              ? require('@/images/icon_hover_down.png')
              : require('@/images/icon_default_down.png')
          "
          alt
        />
      </div>
    </div>
    <el-form-item label-width="160px" class="btns">
      <div class="change_btns">
        <div @click="addEmit">添加段落</div>
        <div @click="delEmit">删除本段落</div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import api from '@api/knowledgeTree.js';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor, Quill } from 'vue-quill-editor';
import config from '@api/config';
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module';
Quill.register('modules/ImageExtend', ImageExtend);
export default {
  props: ['data', 'index', 'isEdit', 'isCopy', 'total', 'showType','positionMap','positionList'],
  name: 'CaseInfo',
  components: {
    quillEditor
  },
  data() {
    return {
      moveTopHover: false,
      moveBottomHover: false,
      toolbars: [
        [
          ['bold', 'underline', 'strike'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ script: 'sub' }, { script: 'super' }],
          [{ color: [] }, { background: [] }],
          [{ align: [] }],
          ['image']
        ]
      ],
      toolbarMode: 0,
      editorOption: {
        modules: {
          ImageExtend: {
            loading: true,
            name: 'upfile',
            size: 1,
            sizeError: () => {
              this.$message({
                showClose: true,
                message: '请上传 1M 以内的图片！',
                type: 'warning'
              });
            },
            action: config.urls.promptServer,
            response: res => {
              if (res.code == '0') {
                return config.imgHost + res.data.url;
              } else {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        }
      },
      form: {
        orderNo: 0
      },
      rules: {}
    };
  },
  
  watch: {
    'data.content': function() {
      if (this.data.content !== '') {
        this.$refs.editor && this.$refs.editor.clearValidate(); // 清除校验
      }
      if (this.data.content === '') {
        // console.log('内容为空');
        this.$refs['form'].validateField('content'); // 手动校验
      }
      this.data.text = this.$refs.quillEditor.quill.root.innerText;
    }
  },
  created() {
    this.editorOption.modules.toolbar.container = this.toolbars[
      this.toolbarMode
    ];

    if (this.isEdit || this.isCopy) {
      setTimeout(() => {
        this.rules = {
          title: [
            {
              validator: (rule, value, callback) => {
                if (!value.trim()) {
                  callback(new Error('请输入段落标题'));
                } else {
                  callback();
                }
              },
              trigger: 'change'
            },
            { max: 30, message: '标题名称不能超过30字', trigger: 'change' }
          ],
          content: [
            { required: true, message: '请输入段落内容', trigger: 'change' }
          ]
        };
      }, 100);
    } else {
      this.rules = {
        title: [
          {
            validator: (rule, value, callback) => {
              if (!value.trim()) {
                callback(new Error('请输入段落标题'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          },
          { max: 30, message: '标题名称不能超过30字', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入段落内容', trigger: 'change' }
        ]
      };
    }
  },
  mounted() {
    let quill = this.$refs.quillEditor.quill;
    quill.root.addEventListener(
      'paste',
      evt => {
        console.log('evt', evt);
        if (
          evt.clipboardData &&
          evt.clipboardData.files &&
          evt.clipboardData.files.length
        ) {
          console.log('ddadada');
          evt.preventDefault();
          [].forEach.call(evt.clipboardData.files, file => {
            console.log('file', file);
            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) return;
            if (file.size > 1024 * 1000) return;
            let formData = new FormData();
            formData.append('upfile', file);
            api.uploadFile(formData).then(res => {
              console.log('formData', res);
              if (res.data.code == '0') {
                let imgUrl = config.imgHost + res.data.data.url;
                var range = quill.getSelection();
                console.log('range', range);
                if (range) {
                  // this.uploadAttachment(res, file, null);
                  let length = quill.getSelection().index;
                  quill.insertEmbed(length, 'image', imgUrl);
                  quill.setSelection(length + 1);
                  //  将光标移动到图片后面
                  this.$refs.quillEditor.quill.setSelection(range.index + 1);
                }
              } else {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'warning'
                });
              }
            });
          });
        }
      },
      false
    );
  },
  methods: {
    reOrder(i) {
      this.$emit('reOrder', i, this.index);
    },
    addEmit() {
      this.$emit('add');
    },
    delEmit() {
      this.$emit('del', this.index);
    },
  }
};
</script>

<style lang="less" scoped>
.quill-editor.ql-editor {
  padding-left: 0 !important;
}
.is-error .el-form-item__error {
  top: auto;
}
.sub-form {
  position: relative;
}
.order-btn {
  // position: absolute;
  top: 12px;
  right: 0;
  display: flex;
  a {
    margin-bottom: 20px;
    border: 1px solid #22ccc8;
    color: #22ccc8;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
  .order-spc {
    margin-top: 28px;
  }
  .order-down {
    margin-left: 20px;
  }
}
/**富文本编辑器样式修改***/
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before,
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
it .ql-editor,
.quill-editor {
  padding-top: 0px !important;
  margin-top: -8px;
  min-height: 48px;
  p {
    padding-top: 8px;
  }
}
.ql-editor.ql-blank::before {
  padding-top: 0px;
}
.btns {
  margin-top: 20px;
}
.move_btn {
  position: absolute;
  top: 12px;
  right: 0;
  font-size: 14px;
  margin-left: 10px;
  display: flex;
  div {
    width: 12px;
    height: 16px;
    margin-right: 8px;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}
/deep/ .el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
.change_btns {
  // width: 100%;
  margin-top: 10px;
  display: flex;
  box-sizing: border-box;
  div {
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #21cbc7;
    color: #21cbc7;
    font-size: 14px;
    margin-right: 30px;
    cursor: pointer;
    &:nth-child(1) {
      &:hover {
        background: rgba(97, 218, 215, 0.1);
      }
    }
    &:nth-child(2) {
      border-color: #ff5b5b;
      color: #ff5b5b;
      &:hover {
        background: rgba(255, 91, 91, 0.1);
      }
    }
  }
}
</style>