platformFront/src/components/knowledgeExtra/DevInfo.vue

<template>
  <el-form
    :rules="rules"
    :model="data"
    ref="form"
    class="sub-form"
    :validate-on-rule-change="false"
  >
    <!--<el-input v-model="form.orderNo" :value="index" type="hidden"></el-input>-->
    <!-- <el-form-item label="是否属于诊断依据：" prop="isReason" label-width="160px">
            <el-select v-model="data.isReason" placeholder="请选择">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
            </el-select>
    </el-form-item>-->
    <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="position" label-width="160px">
      <el-checkbox-group v-model="data.position">
        <el-checkbox v-for="it in positions" :key="it.key" :label="it.key">{{it.name}}</el-checkbox>
      </el-checkbox-group>
    </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="order-btn">
      <a v-if="index!==0" :class="index===total-1?'order-spc':'order-up'" @click="reOrder(1)">上升</a>
      <a v-if="index!==total-1" :class="index===0?'order-spc':'order-down'" @click="reOrder(0)">下降</a>
    </div>
    <el-form-item label-width="160px" class="btns">
      <el-button @click="addEmit">添加段落</el-button>
      <el-button @click="delEmit" type="info">删除本段落</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
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'],
  name: 'DevInfo',
  components: {
    quillEditor
  },
  data() {
    return {
      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: {
        position: [],
        orderNo: 0
      },
      positions: [], //位置列表
      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() {
    // console.log(this.showType, 'showType','需要显示的类型');
    this.editorOption.modules.toolbar.container = this.toolbars[
      this.toolbarMode
    ];
    this.renderPositions();
    if (this.isEdit||this.isCopy) {
      setTimeout(() => {
        this.rules = {
          position: [
            { required: true, message: '请选择内容类型', trigger: 'change' }
          ],
          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 = {
        position: [
          { required: true, message: '请选择内容类型', trigger: 'change' }
        ],
        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' }
        ]
      };
    }
      setTimeout(()=>{
          this.filterHiddenPosition();
      },200)
  },
  mounted() {
  },
  methods: {
    reOrder(i) {
      this.$emit('reOrder', i, this.index);
    },
    addEmit() {
      this.$emit('add');
    },
    delEmit() {
      this.$emit('del', this.index);
    },
    filterHiddenPosition(){
        const pos = this.data.position;
        const pArr = this.positions.map((it)=>{return it.key});
        const pStr = pArr.join(",");
        const arr=pos.filter((it)=>{
            return pStr.indexOf(it)>-1;
        });
        this.data.position=arr;
    },
    // 渲染内容类型
    renderPositions() {
      //显示位置枚举列表
      const pos = localStorage.getItem('knowledgeEnumsData');
      let positions = config.contentTypes;
      if (this.showType == 1) {
        // 诊断
        this.positions = positions.filter(item => item.key !== 2);
      } else if (
        this.showType == 3 ||
        this.showType == 4 ||
        this.showType == 5 ||
        this.showType == 6
      ) {
        // 检验/检查
        this.positions = positions.filter(item => {
          return item.key <= 2;
        });
      } else if (this.showType == 2 || this.showType == 7 || this.showType == 8 || this.showType == 9) {
        // 药品/手术
        this.positions = positions.filter(item => item.key === 1);
      } else {
        this.positions = positions;
      }
    }

    /*emitVal(){
        let data = this.form;
        let pst=this.form.position;
        const content =  this.form.content.replace(config.imgHost,'{imageUrlPrefix}');
        const text = this.$refs.quillEditor;console.log(text)
        pst = typeof pst=='string'?pst:pst.join(',');
        data =   Object.assign({},data,{
                                        position:this.form.position?pst:'',
                                        orderNo:this.index,
                                        text:'',
                                        content:content});
        this.$emit("change",this.index,data);
      }*/
  }
};
</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;
}
</style>