cdssHospital/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="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="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">
      <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', 'total', 'showType'],
  name: 'MedicineInfoParagraph',
  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: {
        // 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;
    }
  },
  created() {
    console.log(this.showType, 'showType');
    this.editorOption.modules.toolbar.container = this.toolbars[
      this.toolbarMode
    ];
  },
  mounted() {
    //显示位置枚举列表
    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.positions = positions.filter(item => {
        return item.key <= 2
      });
    } else if (this.showType == 2 || this.showType == 6) {
      // 药品/手术
      this.positions = positions.filter(item => item.key === 1);
    } else {
      this.positions = positions;
    }
  },
  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">
.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;
  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,
.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;
}

.btns{
  margin-top: 24px;
}
</style>