peisweb/src/components/common/AcceptTemplate.vue

<template>
  <div style="display: flex;">
    <!-- :editor-toolbar="customToolbar"  overflow-y: scroll;-->
    <div>
      <div :style="`width:${window.pageWidth - 520}px;`">
        <vue-editor v-model="form.informedConsentTemplateFileContent" :style="`height: ${divHeight}px;`" />
      </div>
      <div style="margin: 60px 10px 10px 0; display: flex;justify-content: space-between;">
        <div style="color: red;">注：${signMan} ${signDate} 为预设参数，由具体值代替。</div>
        <div style="display: flex;">
          <el-button type="primary" @click="btnInit" class="commonbutton" size="small">预置模版</el-button>
          <el-button type="primary" @click="btnPreview" class="commonbutton" size="small">预览</el-button>
          <el-button type="primary" @click="btnDesign" class="commonbutton" size="small">{{ designAble ?
            '设计' : '应用' }}</el-button>
          <el-button type="primary" @click="btnOk" class="commonbutton" size="small">确定</el-button>
        </div>
      </div>
    </div>
    <div style="width:500px;border: 1px #DCDFE6; ">
      <div style="display: flex;">
        <span style="width: 70px;margin-top: 6px;">模板名称</span>
        <el-input v-model="form.displayName" placeholder="模板名称" size="small"></el-input>
      </div>
      <el-input v-model="contentDesign" type="textarea" :autosize="autosize" :disabled="designAble" placeholder="源码"
        size="small"></el-input>
    </div>

    <!-- 模板预览 -->
    <el-dialog title="模板预览" :visible.sync="acceptTemplateShow" :append-to-body="true" :close-on-click-modal="false"
      width="900px">
      <div style="height: 500px;overflow:auto;" v-html="contentShow"></div>
    </el-dialog>
  </div>
</template>

<script>

import { VueEditor, Quill } from "vue2-editor";
import { mapState } from "vuex";
import moment from "moment";
import { postapi } from "@/api/api";

const Size = Quill.import("attributors/style/size");
Size.whitelist = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
Quill.register(Size, true);

// 定义你需要的字体列表
const fontList = [
  'Microsoft-YaHei',  // 微软雅黑
  'SimSun',           // 宋体
  'SimHei',           // 黑体
  'KaiTi',            // 楷体
  'Arial',
  'Times-New-Roman'
]

// 获取 Quill 的字体模块，并将自定义列表设置为白名单
const Font = Quill.import('formats/font')
Font.whitelist = fontList

// 重要：将修改后的字体模块重新注册回去
Quill.register(Font, true)


export default {
  components: { VueEditor },
  props: ['refParams', 'refFun'],
  data() {
    return {
      form: {
        id: '',
        displayName: "",
        informedConsentTemplateFileContent: ""
      },
      contentInit: '<h2 style="text-align:center;"><strong>CT检查知情同意书</strong></h2><p>尊敬的客户：</p><p>　　欢迎您来到长城体检中心进行CT检查，在检查之前，您需要知晓以下事宜：辐射有害健康，请远离电离辐射</p><p>　　1、人体受到放射线照射后，可能产生潜在的危害，产生有害的躯体效应和遗传效应，其中最敏感的器官或组织为：甲状腺、性腺、及胚胎组织。</p><p>　　2、孕妇原则上禁止CT检查，如果您是孕妇，在CT检查前，请告知工作人员。</p><p>　　3、如果您正处在备孕阶段，原则上我们不建议进行CT检查，请您提前告知工作人员。</p><p>　　4、CT检查时只允许一名受检者进入机房，无关人员不得在机房内停留。</p><p>　　5、建议受检者佩戴门诊部提供的防护用品，遮盖敏感部位。 家屋到扫描室外等候。</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p style="font-size:24px;text-align:right;"><strong>受检人签名：</strong>${signMan}</p><p><br></p><p style="font-size:20px;text-align:right;padding-right:40px;">${signDate}</p>',
      // 自定义工具栏配置
      customToolbar: [
        // 字体大小控制（关键配置）
        //[{ size: ["small", false, "large", "huge"] }],  // false 代表默认大小
        [{ size: ["12px", "14px", "16px", "18px", "24px", "32px", "48px"] }],
        // 字体控制（可选）
        //[{ font: [] }],
        [{ font: fontList }],

        // 标题控制
        //[{ header: [false, 1, 2, 3, 4, 5, 6] }],

        // 基础格式
        ["bold", "italic", "underline", "strike"],

        // 文本颜色和背景色
        [{ color: [] }, { background: [] }],

        // 文本对齐
        [{ align: ["", "center", "right", "justify"] }],

        // 列表
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],

        // 缩进
        [{ indent: "-1" }, { indent: "+1" }],

        // 引用和代码块
        ["blockquote", "code-block"],

        // 链接、图片、视频
        ["link", "image", "video"],

        // 清除格式
        ["clean"]
      ],
      designAble: true,
      contentDesign: '',
      acceptTemplateShow: false, // 预览
      contentShow: '', // 预览
    };
  },

  //创建组件后
  created() {
    this.form.informedConsentTemplateFileContent = this.contentInit
  },

  //挂载组件完成
  mounted() {
    this.getAcceptTempPalte(this.refParams.id)
  },

  computed: {
    ...mapState(["window", "dict", "dialogWin"]),
    divHeight() {
      return this.window.pageHeight - 120
    },
    autosize() {
      let rows = Math.floor((this.window.pageHeight - 105 - 6) / 20)
      return { minRows: rows, maxRows: rows }
    }
  },
  // 方法
  methods: {

    getAcceptTempPalte(informedConsentTemplateId) {
      if (informedConsentTemplateId) {
        postapi('/api/app/InformedConsentTemplate/Get', { informedConsentTemplateId })
          .then(res => {
            if (res.code > -1) {
              this.form = res.data
            }
          })
          .finally(() => {
            this.contentDesign = this.form.informedConsentTemplateFileContent
            this.designAble = true
          })
      } else {
        this.form.id = ''
        this.form.displayName = ''
        this.btnInit()
      }
    },

    btnOk() {      
      if (!this.form.displayName){
        this.$message.warning({ showClose: true, message: '模板名称不能为空' })
        return
      }else if(!this.form.informedConsentTemplateFileContent) {
        this.$message.warning({ showClose: true, message: '模板内容不能为空' })
        return
      }

      let url = '/api/app/InformedConsentTemplate/Create'
      if (this.form.id) {
        url = '/api/app/InformedConsentTemplate/Update'
      }

      // 保存时，刷新列表
      postapi(url, this.form)
        .then(res => {
          if (res.code > -1) {
            this.$message.success({showClose:true,message:'操作成功！'})
            if (!this.form.id && res.data?.id) this.form.id = res.data.id
          }
        })
        .finally(() => {
          // 刷新父主件
          try {
            this.refFun(this.form.id)
          } catch (error) {
            console.error('知情同意书模板 refFun', error)
          }
        })

    },

    btnInit() {
      this.form.informedConsentTemplateFileContent = this.contentInit
      this.contentDesign = this.contentInit
      this.designAble = true
    },

    // 查看效果
    btnPreview() {
      this.acceptTemplateShow = true
      let signMan = '<img width="100" height="50" src="/pic/egSignMan.png">'
      let signDate = moment(new Date()).format('yyyy 年 MM 月 DD 日')
      this.contentShow = this.form.informedConsentTemplateFileContent.replace('${signMan}', signMan).replace('${signDate}', signDate)
    },

    btnDesign() {
      if (this.designAble) {
        this.contentDesign = this.form.informedConsentTemplateFileContent
      } else {
        this.form.informedConsentTemplateFileContent = this.contentDesign
      }
      this.designAble = !this.designAble
    }
  },

  // 监听
  watch: {
    "refParams.brushTimes": {
      // immediate:true,
      handler(newVal, oldVal) {
        console.log(`watch 模板 newVal: ${newVal}, oldVal: ${oldVal} `, this.refParams);
        if (newVal != oldVal) this.getAcceptTempPalte(this.refParams.id)
      }
    },
  },
};
</script>