platformFront/src/components/icss/InfoParagraph.vue

<template>
    <el-form :rules="rules" :model="data" ref="form" class="sub-form">
            <p class="line"></p>
            <!--<el-input v-model="form.orderNo" :value="index" type="hidden"></el-input>-->
            <el-form-item label="是否属于诊断：" prop="isReason">
                <el-select v-model="data.isReason" placeholder="请选择" :disabled="isEdit&&index<len">
                    <el-option label="否" :value="0"></el-option>
                    <el-option label="是" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="显示位置：" prop="position" label-width="130px">
                <el-checkbox-group v-model="data.position" :disabled="isEdit&&index<len">
                    <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="title" label-width="130px">
                <el-input v-model="data.title" maxlength="120"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content" label-width="130px">
                <quillEditor v-model="data.content" :options="editorOption"></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','len'],
    name:'InfoParagraph',
    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' }
            ],
            content: [
              { required: true, message: '请输入段落内容', trigger: 'change' }
            ],
          }
        }
    },
    mounted(){
      //显示位置枚举列表
      const pos = localStorage.getItem("icssEnumsData");
      this.positions = JSON.parse(pos)&&JSON.parse(pos).introducePositionEnum;
    },
    methods:{
      addEmit(){
        this.$emit("add");
      },
      delEmit(){
        this.$emit("del",this.index);
      },
      /*emitVal(){
        let data = this.form;
        let pst=this.form.position;
        pst = typeof pst=='string'?pst:pst.join(',');
        data =   Object.assign({},data,{position:this.form.position?pst:'',orderNo:this.index,text:''});
        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>