platformFront/src/components/icss/MedicineInfoPg.vue

<template>
    <el-form :rules="rules" :model="data" ref="form" class="sub-form">
        <!--<el-input v-model="form.orderNo" :value="index" type="hidden"></el-input>-->
        <el-form-item label="显示位置：" prop="position" label-width="160px">
            <el-checkbox-group v-model="data.position" :disabled="data.disabled">
                <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="isReason" label-width="160px">
            <el-select v-model="data.isReason" placeholder="请选择" :disabled="data.disabled">
                <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">
            <el-input v-model="data.title" :disabled="data.disabled"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content" label-width="160px">
            <quillEditor v-model="data.content"
                         :options="editorOption"
                         class="ql-editor"
                         ref="quillEditor"></quillEditor>
        </el-form-item>
        <el-form-item label-width="130px">
            <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'],
    name:'MedicineInfoParagraph',
    components:{
      quillEditor
    },
    data(){
      return {
        editorOption: {
          modules: {
            ImageExtend: {
              loading: true,
              name: 'upfile',
              action: config.urls.promptServer,
              response: (res) => {
                return config.imgHost+res.url;
              }
            },
            toolbar: {
              container: container,
              handlers: {
                'image': function () {
                  QuillWatch.emit(this.quill.id)
                }
              }
            }
          }
        },
        form:{
          position:[],
          orderNo:0
        },
        positions:[],               //位置列表
        rules:{
          isReason: [
            { required: true, message: '请选择是否属于诊断', trigger: 'change' }
          ],
          position: [
            { required: true, message: '请选择显示位置', trigger: 'change' }
          ],
          title: [
            { required: true, message: '请输入段落标题', trigger: 'change' },
            { validator: (rule,value,callback)=>{
                if(value.length>30){
                  callback(new Error('段落标题不能超过30字'));
                }else{
                  callback();
                }}, trigger: 'change' }
          ],
          content: [
            { required: true, message: '请输入段落内容', trigger: 'change' }
          ],
        }
      }
    },
    watch:{
      'data.content':function(){
        this.data.text = this.$refs.quillEditor.quill.root.innerText;
      }
    },
    mounted(){
      //显示位置枚举列表
      const pos = localStorage.getItem("knowledgeEnumsData");
      this.positions = JSON.parse(pos)&&JSON.parse(pos).positionTypeEnum;
    },
    methods:{
      addEmit(){
        this.$emit("add");
      },
      delEmit(){
        this.$emit("del",this.index);
      },
      /*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">
    .is-error .el-form-item__error{
        top:auto;
    }
    /**富文本编辑器样式修改***/
    .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,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before,
    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before,
    .ql-snow .ql-color-picker .ql-picker-label svg,
    .ql-snow .ql-icon-picker .ql-picker-label svg{
        vertical-align: top;
    }
</style>