cdssHospital/src/components/icss/MedicineInfoPg.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="position" label-width="160px">
      <el-checkbox-group v-model="data.position">
        <el-checkbox v-for="it in positions" :key="it.val" :label="it.val">{{
          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>
    <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() {
    // console.log("MedicineInfoPgData", this.data);
  },
  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>