|
|
<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>
|
