platformFront/src/components/knowledgeExtra/DevInfo.vue

<template>
  <el-form
    :rules="rules"
    :model="data"
    ref="form"
    class="sub-form"
    size="mini"
    :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"
      class="is-required"
    >
      <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" 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> -->
    <div class="move_btn">
      <div
        v-if="index !== 0"
        @mouseover="moveTopHover = true"
        @mouseout="moveTopHover = false"
        title="上升"
        @click="reOrder(1)"
      >
        <img
          :src="
            moveTopHover
              ? require('@/images/icon_hover_top.png')
              : require('@/images/icon_default_top.png')
          "
          alt=""
        />
      </div>
      <div
        v-if="index !== total - 1"
        @mouseover="moveBottomHover = true"
        @mouseout="moveBottomHover = false"
        title="下降"
        @click="reOrder(0)"
      >
        <img
          :src="
            moveBottomHover
              ? require('@/images/icon_hover_down.png')
              : require('@/images/icon_default_down.png')
          "
          alt=""
        />
      </div>
    </div>
    <el-form-item label-width="160px" class="btns">
      <!-- <el-button size="small" @click="addEmit">添加段落</el-button>
      <el-button size="small" @click="delEmit" type="info"
        >删除本段落</el-button
      > -->
      <div class="change_btns">
        <div @click="addEmit">新增标题</div>
        <div @click="delEmit">删除标题</div>
      </div>
    </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", "isCopy", "total", "showType"],
  name: "DevInfo",
  components: {
    quillEditor
  },
  data() {
    return {
      moveTopHover: false,
      moveBottomHover: false,
      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.renderPositions();
    if (this.isEdit || this.isCopy) {
      setTimeout(() => {
        this.rules = {
          position: [
            { required: true, message: "请选择内容类型", trigger: "change" }
          ],
          title: [
            {
              validator: (rule, value, callback) => {
                if (!value.trim()) {
                  callback(new Error("请输入段落标题"));
                } else {
                  callback();
                }
              },
              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: [
          {
            validator: (rule, value, callback) => {
              if (!value.trim()) {
                callback(new Error("请输入段落标题"));
              } else {
                callback();
              }
            },
            trigger: "change"
          },
          { max: 30, message: "标题名称不能超过30字", trigger: "change" }
        ],
        content: [
          { required: true, message: "请输入段落内容", trigger: "change" }
        ]
      };
    }
    setTimeout(() => {
      this.filterHiddenPosition();
    }, 200);
  },
  mounted() {},
  methods: {
    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.key;
      });
      const pStr = pArr.join(",");
      const arr = pos.filter((it) => {
        return pStr.indexOf(it) > -1;
      });
      this.data.position = arr;
    },
    // 渲染内容类型
    renderPositions() {
      //显示位置枚举列表
      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.showType == 6
      ) {
        // 检验/检查
        this.positions = positions.filter((item) => {
          return item.key <= 2;
        });
      } else if (
        this.showType == 2 ||
        this.showType == 7 ||
        this.showType == 8 ||
        this.showType == 9
      ) {
        // 药品/手术
        this.positions = positions.filter((item) => item.key === 1);
      } else {
        this.positions = positions;
      }
    }

    /*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" scoped>
.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;
  display: flex;
  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;
}
.move_btn {
  position: absolute;
  top: 12px;
  right: 0;
  font-size: 14px;
  margin-left: 10px;
  display: flex;
  div {
    width: 12px;
    height: 16px;
    margin-right: 8px;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}
/deep/ .el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
/deep/ .el-form-item.is-success .el-textarea__inner {
  border-color: #c9c9c9 !important;
}
.change_btns {
  // width: 100%;
  margin-top: 10px;
  display: flex;
  box-sizing: border-box;
  div {
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #21cbc7;
    color: #21cbc7;
    font-size: 14px;
    margin-right: 30px;
    cursor: pointer;
    &:nth-child(1) {
      &:hover {
        background: rgba(97, 218, 215, 0.1);
      }
    }
    &:nth-child(2) {
      border-color: #ff5b5b;
      color: #ff5b5b;
      &:hover {
        background: rgba(255, 91, 91, 0.1);
      }
    }
  }
}
</style>