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">
                <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="请选择">
                <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"></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>
        <div class="order-btn">
            <a v-if="index!==0" class="order-up" @click="reOrder(1)">上升</a>
            <a v-if="index!==total-1" class="order-down" @click="reOrder(0)">下降</a>
        </div>
        <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','total'],
    name:'MedicineInfoParagraph',
    components:{
      quillEditor
    },
    data(){
      return {
        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:{
          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:{
      reOrder(i){
        this.$emit("reOrder",i,this.index);
      },
      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;
    }
    .sub-form{
        position: relative;
    }
    .order-btn{
        position:absolute;
        top:40px;
        right:50px;
        a{
            display: block;
            margin-bottom: 20px;
            border: 1px solid #22ccc8;
            color: #22ccc8;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        .order-up{

        }
    }
    /**富文本编辑器样式修改***/
    .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>