2025-07-22 17:20:57 +08:00
|
|
|
<template>
|
|
|
|
|
<el-dialog v-model="modelValue" center width="1000px" :destroy-on-close="true" title="报告模板" @close="close" :close-on-click-modal="false">
|
|
|
|
|
<div class="cntBox">
|
|
|
|
|
<!-- 工具栏 -->
|
|
|
|
|
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
|
|
|
|
|
<!-- 编辑器 -->
|
|
|
|
|
<Editor :style="`height: ${props.heightNumber}px; overflow-y: hidden`" v-model="textContent" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
|
|
|
|
|
</div>
|
|
|
|
|
<template #footer>
|
2025-09-03 14:43:40 +08:00
|
|
|
<el-button type="primary" @click="SaveReport">保存</el-button>
|
|
|
|
|
<!-- <el-button type="primary" @click="downloadWithStyles">历史报告</el-button> -->
|
2025-08-31 22:42:03 +08:00
|
|
|
<el-button type="primary" @click="downloadWithStyles">下载</el-button>
|
2025-07-22 18:00:05 +08:00
|
|
|
<el-button type="primary" @click="close">取消</el-button>
|
2025-07-22 17:20:57 +08:00
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { compressImage } from "@/utils/tools.js";
|
|
|
|
|
import "@wangeditor/editor/dist/css/style.css";
|
|
|
|
|
import { qcckPost } from "@/api/qcckApi.js";
|
|
|
|
|
import { ElMessage } from "element-plus";
|
2025-08-31 22:42:03 +08:00
|
|
|
import { saveAs } from 'file-saver';
|
2025-07-22 17:20:57 +08:00
|
|
|
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
|
|
|
|
import { ref, shallowRef, onBeforeUnmount, defineEmits, defineProps, watch } from "vue";
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
modelValue:{
|
|
|
|
|
type:Boolean,
|
|
|
|
|
default:false
|
|
|
|
|
},
|
|
|
|
|
// 编辑器内容
|
|
|
|
|
textContent: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: ""
|
|
|
|
|
},
|
|
|
|
|
placeholder: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "请输入内容。。。。"
|
|
|
|
|
},
|
|
|
|
|
heightNumber: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 448
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const editorRef = shallowRef();
|
|
|
|
|
const mode = "default";
|
|
|
|
|
//工具配置
|
|
|
|
|
const toolbarConfig = {
|
|
|
|
|
excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具，引用和代码块
|
|
|
|
|
};
|
2025-09-03 14:43:40 +08:00
|
|
|
const emits = defineEmits(["update:textContent", "changeFn","update:modelValue","SaveReport"]);
|
2025-07-22 17:20:57 +08:00
|
|
|
//编辑器配置
|
|
|
|
|
const editorConfig = {
|
|
|
|
|
withCredentials: true, //允许跨域
|
|
|
|
|
placeholder: props.placeholder, //提示语
|
|
|
|
|
MENU_CONF: {
|
|
|
|
|
uploadImage: {
|
|
|
|
|
// 自定义上传图片
|
|
|
|
|
async customUpload(file, insertFn) {
|
|
|
|
|
let fileBlob = await compressImage(file);
|
|
|
|
|
let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
|
|
|
|
|
if (fileData.size > 2 * 1024 * 1024) {
|
|
|
|
|
ElMessage({ message: "图片超过2MB", type: "success" });
|
|
|
|
|
} else {
|
|
|
|
|
await uploadFn(fileData, insertFn);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
uploadVideo: {
|
|
|
|
|
// 自定义上传视频
|
|
|
|
|
async customUpload(file, insertFn) {
|
|
|
|
|
await uploadFn(file, insertFn);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const uploadFn = (file, insertFn) => {
|
|
|
|
|
let param = new FormData();
|
|
|
|
|
param.append("file", file);
|
|
|
|
|
qcckPost(param, "/mosty-base/minio/image/upload").then((res) => {
|
|
|
|
|
insertFn(res);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
//编辑器创建成功
|
|
|
|
|
const handleCreated = (editor) => {
|
|
|
|
|
editorRef.value = editor;
|
|
|
|
|
};
|
|
|
|
|
//内容发生变化
|
|
|
|
|
const handChange = (editor) => {
|
|
|
|
|
// 判断是否是一个空段落，是空就传空文本
|
|
|
|
|
if (editor.isEmpty()) {
|
|
|
|
|
emits("changeFn", editor.getText());
|
|
|
|
|
} else {
|
|
|
|
|
emits("changeFn", editor.getHtml());
|
|
|
|
|
}
|
|
|
|
|
};
|
2025-08-31 22:42:03 +08:00
|
|
|
const close = () => {
|
|
|
|
|
emits("update:modelValue", false)
|
|
|
|
|
}
|
2025-07-22 17:20:57 +08:00
|
|
|
onBeforeUnmount(() => {
|
|
|
|
|
const editor = editorRef.value;
|
|
|
|
|
if (editor) editor.destroy();
|
|
|
|
|
});
|
2025-08-31 22:42:03 +08:00
|
|
|
// 带样式的下载方法
|
|
|
|
|
const downloadWithStyles = () => {
|
|
|
|
|
|
|
|
|
|
const wordDocument = `
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
|
<title>富文本导出</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
${props.textContent}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const blob = new Blob([wordDocument], {
|
|
|
|
|
type: 'application/msword'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
saveAs(blob, 'styled-document.doc');
|
|
|
|
|
};
|
2025-09-03 14:43:40 +08:00
|
|
|
const SaveReport = () => {
|
|
|
|
|
emits("SaveReport",props.textContent)
|
|
|
|
|
}
|
2025-07-22 17:20:57 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.cntBox{
|
|
|
|
|
height: 60vh;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
border: 1px dashed #e9e9e9;
|
|
|
|
|
}
|
|
|
|
|
|
2025-08-29 19:32:41 +08:00
|
|
|
</style>
|
