cdssHospital/src/components/icss/case/CaseInfo.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">
      <el-input v-model="data.title"></el-input>
    </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 api from '@api/knowledgeLib.js';
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: {}
    };
  },
  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.zskgetDict();
    if (this.isEdit) {
      setTimeout(() => {
        this.rules = {
          position: [
            { required: true, message: '请选择内容类型', trigger: 'change' }
          ],
          title: [
            { required: true, message: '请输入段落标题', 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: [
          { required: true, message: '请输入段落标题', trigger: 'change' },
          { max: 30, message: '标题名称不能超过30字', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入段落内容', trigger: 'change' }
        ]
      };
    }
    setTimeout(() => {
      this.filterHiddenPosition();
    }, 200);
  },
  mounted() {},
  methods: {
    zskgetDict() {
      api
        .zskgetDict()
        .then(res => {
          if (res.data.code == '0') {
            const data = res.data.data;
            this.positions = data['50'];
            this.renderPositions(data['50'], data['51']);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    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.val;
      });
      const pStr = pArr.join(',');
      const arr = pos.filter(it => {
        return pStr.indexOf(it) > -1;
      });
      this.data.position = arr;
    },
    // 渲染内容类型
    renderPositions(data1,data2) {
      //显示位置枚举列表
      if (this.showType>0) {
        data2 = data2.filter(item => item.name == this.showType);
        let val = data2[0].val.split(',');
        this.positions = data1.filter(it => {
          let arr = val.map(v => v);
          return arr.includes(it.val);
        });
      }
    }
  }
};
</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,
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>