xinyilu/postdischarge-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
This commit is contained in:
shidongli 2024-06-13 17:34:51 +08:00
commit 6f8b41e941
3 changed files with 760 additions and 812 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/system/bank/index.vue
View File

@ -297,7 +297,11 @@ export default {
} }
}); });
}, },
cancels() { }, cancels() {
this.opens=false
this.reset();
},
// change(e) { // change(e) {
// console.log(e, "78"); // console.log(e, "78");
// // console.log(this.$refs.cascader) // // console.log(this.$refs.cascader)

490
src/views/system/components/wangEditor.vue
View File

@ -1,12 +1,10 @@
<template> <template> <div style="border: 1px solid #ccc">
<div style="border: 1px solid #ccc">
<Toolbar <Toolbar
style="border-bottom: 1px solid #ccc" style="border-bottom: 1px solid #ccc"
:editor="editor" :editor="editor"
:defaultConfig="toolbarConfig" :defaultConfig="toolbarConfig"
:mode="mode" :mode="mode"
/> />
<!-- 研究一下 如何清除这个富文本里的东西 我给加了标签不生效 他富文本自动编译class名字了 你百度一下 好 我搞杯咖啡区 困不行了好的 -->
<Editor <Editor
style="height: 500px; overflow-y: hidden" style="height: 500px; overflow-y: hidden"
v-model="html" v-model="html"
@ -69,9 +67,6 @@
}" }"
ref="cascaderAddr" ref="cascaderAddr"
> >
<!-- dengyixia 看一下api -->
<!-- :props="{ checkStrictly: true, multiple: true, emitPath: false } -->
</el-cascader-panel> </el-cascader-panel>
<div style="margin: 20px 0">结果预览:</div> <div style="margin: 20px 0">结果预览:</div>
@ -90,36 +85,36 @@
<el-button @click="fieldclick" type="primary">确定</el-button> <el-button @click="fieldclick" type="primary">确定</el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { import {
DomEditor, DomEditor,
IDomEditor, IDomEditor,
SlateElement, SlateElement,
SlateDescendant, SlateDescendant,
SlateTransforms, SlateTransforms,
SlateEditor, SlateEditor,
SlateNode, SlateNode,
} from "@wangeditor/editor"; } from "@wangeditor/editor";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Boot } from "@wangeditor/editor"; import { Boot } from "@wangeditor/editor";
import { h, VNode } from "snabbdom"; import { h, VNode } from "snabbdom";
import { import {
labelFieldList, labelFieldList,
richTextPictureUrl, richTextPictureUrl,
bankLevel, bankLevel,
} from "@/api/system/wangEditor.js"; } from "@/api/system/wangEditor.js";
// import menuConf from "./ModalMenu"; // import menuConf from "./ModalMenu";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
var that; var that;
export default { export default {
props: ["nodeContent"], props: ["nodeContent"],
components: { Editor, Toolbar }, components: { Editor, Toolbar },
name: "wangEditor", name: "wangEditor",
data() { data() {
return { return {
isResouceShow: 1, isResouceShow: 1,
searchForm: {}, searchForm: {},
@ -188,10 +183,9 @@ export default {
elist: [], elist: [],
termContent: "", termContent: "",
}; };
}, },
methods: { methods: {
// 我拿什么能知道当前选中的是不是最后一级 没有children就管吧 e里面拿不到哦哦
handleChange(e) { handleChange(e) {
console.log(e, "e"); console.log(e, "e");
this.add = []; this.add = [];
@ -205,103 +199,8 @@ export default {
this.add.push(e.label); this.add.push(e.label);
} }
// console.log(this.add, "777");
}); });
// // console.log(this.$refs["cascaderAddr"],'this.$refs["cascaderAddr"]')
// // const arr = this.$refs["cascaderAddr"].children.getCheckedNodes().termContent;
// // console.log(arr,'arr')
// this.elist.push(e);
// console.log(this.elist, "this.elist");
// if (this.fieldshow) {
// this.fieldoptions.forEach((e) => {
// // 第一层
// e.children.forEach((el) => {
// // 第二层
// el.children.forEach((f) => {
// // 第三层
// this.elist.forEach((m) => {
// // 选择的数组code
// // console.log(m, "m");
// m.forEach((r) => {
// // 最新选择的值
// if (r == f.termCode) {
// // if (this.add.indexOf(f.termContent)==-1) {
// // console.log("不存在")
// this.add=[]
// // console.log(arr, "arr")
// this.add.push(f.termContent);
// console.log(this.add, "add")
// // }
// }
// });
// });
// // console.log(f,'fffff')
// // console.log(this.add, "this.add");
// });
// });
// });
// }
// console.log(this.termContent, "this.termContent");
// el.children.forEach(f=>{
// console.log(f,'ff')
// let list=[]
// list.push(el)
// this.addnode
// console.log(list,'list')
// list = list.split(',')
// 将id相匹配的筛选出来
// const list = [{id: 1, name:2}, {id: 2, name:2}]
// const result = [1,2]
// let abbc=[]
// abbc=list.filter(item =>elist.includes(item.termCode))
// console.log(abbc,'abbc')
//这里的val.newData就是你帅选出的数据,如果你不想将他放到B数组当中,可以自己定义一个变量接收
// val.newData = A.filter(item => elist.includes(item.AId.toString()))
// let differentArr = list.filter((item) => elist.indexOf(item) != -1);
// console.log(differentArr, "differentArr");
// })
// if (el.labelFieldId == item) {
// this.addnode.fileSpan = el.fieldName;
// this.addnode.fileName = e.fieldName;
// this.addnode.fieldMark = el.fieldMark;
// }
// });
// });
// }
// let changeFlag = false;
// let nowItem = [];
// let firstItem = [];
// if (this.shareScopeEnd.length == 0) {
// this.searchForm.customerTags = val;
// } else {
// // 与原数组比对
// this.searchForm.customerTags.forEach((item) => {
// if (item[0] !== this.shareScopeEnd[0][0]) {
// // 一级标签不同
// changeFlag = true;
// firstItem.push(item);
// } else if (item[1] != this.shareScopeEnd[0][1]) {
// // 一级标签相同但是二级标签不同
// changeFlag = false;
// nowItem.push(item);
// }
// });
// }
// if (changeFlag && firstItem.length) {
// this.searchForm.customerTags = firstItem;
// } else if (!changeFlag && nowItem.length) {
// this.searchForm.customerTags = nowItem;
// }
// this.shareScopeEnd = this.searchForm.customerTags;
}, },
async handleUpload(file, insertFn) { async handleUpload(file, insertFn) {
@ -310,14 +209,11 @@ export default {
let res = await this.uploadFile(form); //此方法返回上传后的id let res = await this.uploadFile(form); //此方法返回上传后的id
console.log(res); console.log(res);
const videoUrl = URL.createObjectURL(file); const videoUrl = URL.createObjectURL(file);
// this.content += '<video poster=\"\" controls=\"true\" width=\"auto\" height=\"auto\"><source src=\"'+ res +'\" type=\"video/mp4\"/></video>'
// 这快需要注意一下，我这res返回这快，应该是后端返回一个预览服务的url，才能直接在富文本，以及后续展示的地方展示这个视频
this.html += this.html +=
'<video poster="" controls="true" width="auto" height="auto"><source src="' + '<video poster="" controls="true" width="auto" height="auto"><source src="' +
process.env.VUE_APP_BASE_API + process.env.VUE_APP_BASE_API +
+ +
'" type="video/mp4"/></video>'; '" type="video/mp4"/></video>';
// 如果没有预览服务可以让后端写一下下载接口，然后在这里直接拼，但是这个接口前缀最好使用项目中接口配置的前缀
}, },
async uploadFile(form) { async uploadFile(form) {
let res = await richTextPictureUrl(form); //此处换为自己的上传接口地址 let res = await richTextPictureUrl(form); //此处换为自己的上传接口地址
@ -371,7 +267,7 @@ export default {
}, },
fieldclick() { fieldclick() {
// 先判断 富文本里有没有这个名字叫divBox的标签 有的话用原生js给他删掉 然后继续走下面的+= // 先判断 富文本里有没有这个名字叫divBox的标签 有的话用原生js给他删掉 然后继续走下面的+=
// 如果富文本里面没有这个元素 就直接走+= ‘divBox’唯一标识符 这个能明白吗 这样就第二次选择的时候 会覆盖第一次选择的 // 如果富文本里面没有这个元素 就直接走+= ‘divBox’唯一标识符 这样就第二次选择的时候 会覆盖第一次选择的
var aaa = document.querySelectorAll('.divBox') var aaa = document.querySelectorAll('.divBox')
console.log(this.html,'this.html--before'); console.log(this.html,'this.html--before');
console.log(aaa,'打印dom') console.log(aaa,'打印dom')
@ -380,7 +276,7 @@ export default {
aaa.remove() aaa.remove()
}else{ }else{
aaa.innerHTML = '' aaa.innerHTML = ''
this.html += `<p class="divBox">${this.add}</p>` this.html += `<p >${this.add}</p>`
console.log(this.html,'this.html2222'); console.log(this.html,'this.html2222');
} }
this.fieldshow = false; this.fieldshow = false;
@ -457,123 +353,123 @@ export default {
this.fieldshow = false; this.fieldshow = false;
this.labelshow = false; this.labelshow = false;
}, },
}, },
watch: { watch: {
nodeContent(newValue, oldValue) { nodeContent(newValue, oldValue) {
console.log(newValue, oldValue); console.log(newValue, oldValue);
this.html = newValue; this.html = newValue;
}, },
}, },
mounted() { mounted() {
this.html = this.nodeContent; this.html = this.nodeContent;
}, },
beforeDestroy() { beforeDestroy() {
const editor = this.editor; const editor = this.editor;
if (editor == null) return; if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁编辑器 editor.destroy(); // 组件销毁时，及时销毁编辑器
}, },
created() { created() {
that = this; that = this;
this.info(); this.info();
}, },
}; };
class MyButtonMenu { class MyButtonMenu {
// JS 语法 // JS 语法
constructor(vueInstance) { constructor(vueInstance) {
this.vueInstance = vueInstance; this.vueInstance = vueInstance;
this.title = "添加画像标签字段"; this.title = "添加画像标签字段";
this.iconSvg = this.iconSvg =
'<svg t="1711951668796" class="icon" viewBox="0 0 1119 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4490" xmlns:xlink="http://www.w3.org/1999/xlink" width="218.5546875" height="200"><path d="M25.415082 562.922053a25.1989 25.1989 0 0 1-17.745705-43.299519L542.347456 7.392772A25.110172 25.110172 0 1 1 577.040308 43.682738L42.894601 555.9125a25.110172 25.110172 0 0 1-17.479519 7.009553z" p-id="4491"></path><path d="M1094.061411 562.922053a25.110172 25.110172 0 0 1-17.745704-7.009553L542.347456 43.682738A25.110172 25.110172 0 1 1 577.040308 7.392772l534.323165 512.229762a25.1989 25.1989 0 0 1-17.745704 43.299519zM559.738247 1023.955458a380.467906 380.467906 0 0 1-380.024264-380.112992 25.1989 25.1989 0 0 1 50.309073 0 330.070105 330.070105 0 0 0 329.715191 329.80392 25.1989 25.1989 0 1 1 0 50.309072z" p-id="4492"></path><path d="M1009.769315 799.472295H618.3878a25.1989 25.1989 0 0 1 0-50.309072h391.381515a25.1989 25.1989 0 0 1 0 50.309072z" fill="#231815" p-id="4493"></path><path d="M814.122922 996.005974a25.1989 25.1989 0 0 1-25.198901-25.198901V579.869201a25.1989 25.1989 0 1 1 50.309073 0v390.937872a25.1989 25.1989 0 0 1-25.110172 25.198901z" fill="#231815" p-id="4494"></path></svg>'; '<svg t="1711951668796" class="icon" viewBox="0 0 1119 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4490" xmlns:xlink="http://www.w3.org/1999/xlink" width="218.5546875" height="200"><path d="M25.415082 562.922053a25.1989 25.1989 0 0 1-17.745705-43.299519L542.347456 7.392772A25.110172 25.110172 0 1 1 577.040308 43.682738L42.894601 555.9125a25.110172 25.110172 0 0 1-17.479519 7.009553z" p-id="4491"></path><path d="M1094.061411 562.922053a25.110172 25.110172 0 0 1-17.745704-7.009553L542.347456 43.682738A25.110172 25.110172 0 1 1 577.040308 7.392772l534.323165 512.229762a25.1989 25.1989 0 0 1-17.745704 43.299519zM559.738247 1023.955458a380.467906 380.467906 0 0 1-380.024264-380.112992 25.1989 25.1989 0 0 1 50.309073 0 330.070105 330.070105 0 0 0 329.715191 329.80392 25.1989 25.1989 0 1 1 0 50.309072z" p-id="4492"></path><path d="M1009.769315 799.472295H618.3878a25.1989 25.1989 0 0 1 0-50.309072h391.381515a25.1989 25.1989 0 0 1 0 50.309072z" fill="#231815" p-id="4493"></path><path d="M814.122922 996.005974a25.1989 25.1989 0 0 1-25.198901-25.198901V579.869201a25.1989 25.1989 0 1 1 50.309073 0v390.937872a25.1989 25.1989 0 0 1-25.110172 25.198901z" fill="#231815" p-id="4494"></path></svg>';
this.tag = "button"; this.tag = "button";
this.showModal = true; this.showModal = true;
} }
// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
isActive(editor) { isActive(editor) {
return false; return false;
} }
// 获取菜单执行时的 value ，用不到则返回空 字符串或 false // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
getValue(editor) { getValue(editor) {
return ""; return "";
} }
// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
isDisabled(editor) { isDisabled(editor) {
return false; return false;
} }
// 点击菜单时触发的函数 // 点击菜单时触发的函数
exec(editor, value) { exec(editor, value) {
this.vueInstance.labelshow = true; this.vueInstance.labelshow = true;
} }
} }
class MyButtonMenutwo { class MyButtonMenutwo {
// JS 语法 // JS 语法
constructor(vueInstance) { constructor(vueInstance) {
this.vueInstance = vueInstance; this.vueInstance = vueInstance;
this.title = "添加知识库字段"; this.title = "添加知识库字段";
this.iconSvg = this.iconSvg =
'<svg t="1711422779479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2507" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M831.6 639.6h-63.9v127.9H639.9v63.9h127.8v127.9h63.9V831.4h127.9v-63.9H831.6z" p-id="2508"></path><path d="M564.3 925.2c0-18.5-15-33.6-33.6-33.6H287.3c-86.2 0-156.4-70.2-156.4-156.4V286.9c0-86.2 70.1-156.4 156.4-156.4h448.4c86.2 0 156.4 70.2 156.4 156.4v238.8c0 18.5 15 33.6 33.6 33.6s33.6-15 33.6-33.6V286.9C959.2 163.6 859 63.3 735.7 63.3H287.3C164 63.3 63.7 163.6 63.7 286.8v448.3c0 123.2 100.3 223.5 223.6 223.5h243.4c18.6 0.1 33.6-14.9 33.6-33.4z" p-id="2509"></path></svg>'; '<svg t="1711422779479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2507" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M831.6 639.6h-63.9v127.9H639.9v63.9h127.8v127.9h63.9V831.4h127.9v-63.9H831.6z" p-id="2508"></path><path d="M564.3 925.2c0-18.5-15-33.6-33.6-33.6H287.3c-86.2 0-156.4-70.2-156.4-156.4V286.9c0-86.2 70.1-156.4 156.4-156.4h448.4c86.2 0 156.4 70.2 156.4 156.4v238.8c0 18.5 15 33.6 33.6 33.6s33.6-15 33.6-33.6V286.9C959.2 163.6 859 63.3 735.7 63.3H287.3C164 63.3 63.7 163.6 63.7 286.8v448.3c0 123.2 100.3 223.5 223.6 223.5h243.4c18.6 0.1 33.6-14.9 33.6-33.4z" p-id="2509"></path></svg>';
this.tag = "button"; this.tag = "button";
this.showModal = true; this.showModal = true;
} }
// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
isActive(editor) { isActive(editor) {
return false; return false;
} }
// 获取菜单执行时的 value ，用不到则返回空 字符串或 false // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
getValue(editor) { getValue(editor) {
return ""; return "";
} }
// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
isDisabled(editor) { isDisabled(editor) {
return false; return false;
} }
// 点击菜单时触发的函数 // 点击菜单时触发的函数
exec(editor, value) { exec(editor, value) {
this.vueInstance.fieldshow = true; this.vueInstance.fieldshow = true;
} }
} }
const menuConf = { const menuConf = {
key: "MyButtonMenu", // 定义 menu key ：要保证唯一、不重复（重要） key: "MyButtonMenu", // 定义 menu key ：要保证唯一、不重复（重要）
factory() { factory() {
return new MyButtonMenu(that); return new MyButtonMenu(that);
}, },
}; };
const menuConftwo = { const menuConftwo = {
key: "MyButtonMenutwo", // 定义 menu key ：要保证唯一、不重复（重要） key: "MyButtonMenutwo", // 定义 menu key ：要保证唯一、不重复（重要）
factory() { factory() {
return new MyButtonMenutwo(that); return new MyButtonMenutwo(that);
}, },
}; };
const module = { const module = {
// JS 语法 // JS 语法
menus: [menuConf, menuConftwo], menus: [menuConf, menuConftwo],
// 其他功能，下文讲解... // 其他功能，下文讲解...
}; };
Boot.registerModule(module); Boot.registerModule(module);
function withAttachment(editor) { function withAttachment(editor) {
// JS 语法 // JS 语法
const { isInline, isVoid } = editor; const { isInline, isVoid } = editor;
const newEditor = editor; const newEditor = editor;
newEditor.isInline = (elem) => { newEditor.isInline = (elem) => {
const type = DomEditor.getNodeType(elem); const type = DomEditor.getNodeType(elem);
if (type === "attachment") return true; // 针对 type: attachment ，设置为 inline if (type === "attachment") return true; // 针对 type: attachment ，设置为 inline
if (type === "attachmenttwo") return true; // 针对 type: attachment ，设置为 inline if (type === "attachmenttwo") return true; // 针对 type: attachment ，设置为 inline
return isInline(elem); return isInline(elem);
}; };
newEditor.isVoid = (elem) => { newEditor.isVoid = (elem) => {
const type = DomEditor.getNodeType(elem); const type = DomEditor.getNodeType(elem);
if (type === "attachment") return true; // 针对 type: attachment ，设置为 void if (type === "attachment") return true; // 针对 type: attachment ，设置为 void
if (type === "attachmenttwo") return true; // 针对 type: attachment ，设置为 void if (type === "attachmenttwo") return true; // 针对 type: attachment ，设置为 void
return isVoid(elem); return isVoid(elem);
}; };
return newEditor; // 返回 newEditor ，重要！！！ return newEditor; // 返回 newEditor ，重要！！！
} }
Boot.registerPlugin(withAttachment); Boot.registerPlugin(withAttachment);
function renderAttachment(elem, children, editor) { function renderAttachment(elem, children, editor) {
// JS 语法 // JS 语法
// 获取“附件”的数据，参考上文 myResume 数据结构 // 获取“附件”的数据，参考上文 myResume 数据结构
const { fileName = "", link = "", fileSpan = "", fieldMark = "" } = elem; const { fileName = "", link = "", fileSpan = "", fieldMark = "" } = elem;
// 附件 icon 图标 vnode // 附件 icon 图标 vnode
const iconVnode = h( const iconVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性 // HTML 属性
@ -596,8 +492,8 @@ function renderAttachment(elem, children, editor) {
}, },
} }
// img 没有子节点，所以第三个参数不用写 // img 没有子节点，所以第三个参数不用写
); );
const nameiconVnode = h( const nameiconVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性 // HTML 属性
@ -621,8 +517,8 @@ function renderAttachment(elem, children, editor) {
}, },
} }
// img 没有子节点，所以第三个参数不用写 // img 没有子节点，所以第三个参数不用写
); );
const spanVnode = h( const spanVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性 // HTML 属性
@ -630,15 +526,15 @@ function renderAttachment(elem, children, editor) {
props: { contentEditable: false }, // HTML 属性，驼峰式写法 props: { contentEditable: false }, // HTML 属性，驼峰式写法
style: { style: {
color: "#22343C", color: "#22343C",
background: "red", background: "#E5F5F2",
padding: "5px 10px" /* 其他... */, padding: "5px 10px" /* 其他... */,
}, // style ，驼峰式写法 }, // style ，驼峰式写法
on: { click() {} /* 其他... */ }, on: { click() {} /* 其他... */ },
}, },
// img 没有子节点，所以第三个参数不用写 // img 没有子节点，所以第三个参数不用写
[fileSpan, iconVnode] [fileSpan, iconVnode]
); );
const nameVnode = h( const nameVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性 // HTML 属性
@ -653,9 +549,9 @@ function renderAttachment(elem, children, editor) {
}, },
// img 没有子节点，所以第三个参数不用写 // img 没有子节点，所以第三个参数不用写
[fileName, nameiconVnode] [fileName, nameiconVnode]
); );
// 附件元素 vnode // 附件元素 vnode
const attachVnode = h( const attachVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性、样式、事件 // HTML 属性、样式、事件
@ -668,15 +564,15 @@ function renderAttachment(elem, children, editor) {
}, },
// 子节点 // 子节点
[nameVnode, spanVnode] [nameVnode, spanVnode]
); );
return attachVnode; return attachVnode;
} }
function renderAttachmenttwo(elem, children, editor) { function renderAttachmenttwo(elem, children, editor) {
// JS 语法 // JS 语法
// 获取“附件”的数据，参考上文 myResume 数据结构 // 获取“附件”的数据，参考上文 myResume 数据结构
const { fileName = "", link = "", fileSpan = "", fieldMark = "" } = elem; const { fileName = "", link = "", fileSpan = "", fieldMark = "" } = elem;
// 附件 icon 图标 vnode // 附件 icon 图标 vnode
const iconVnode = h( const iconVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性 // HTML 属性
@ -699,8 +595,8 @@ function renderAttachmenttwo(elem, children, editor) {
}, },
} }
// img 没有子节点，所以第三个参数不用写 // img 没有子节点，所以第三个参数不用写
); );
const nameiconVnode = h( const nameiconVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性 // HTML 属性
@ -725,8 +621,8 @@ function renderAttachmenttwo(elem, children, editor) {
}, },
} }
// img 没有子节点，所以第三个参数不用写 // img 没有子节点，所以第三个参数不用写
); );
const spanVnode = h( const spanVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性 // HTML 属性
@ -734,15 +630,15 @@ function renderAttachmenttwo(elem, children, editor) {
props: { contentEditable: false }, // HTML 属性，驼峰式写法 props: { contentEditable: false }, // HTML 属性，驼峰式写法
style: { style: {
color: "#22343C", color: "#22343C",
background: "yellow", background: "#E5F5F2",
padding: "5px 10px" /* 其他... */, padding: "5px 10px" /* 其他... */,
}, // style ，驼峰式写法 }, // style ，驼峰式写法
on: { click() {} /* 其他... */ }, on: { click() {} /* 其他... */ },
}, },
// img 没有子节点，所以第三个参数不用写 // img 没有子节点，所以第三个参数不用写
[fileSpan, iconVnode] [fileSpan, iconVnode]
); );
const nameVnode = h( const nameVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性 // HTML 属性
@ -750,16 +646,16 @@ function renderAttachmenttwo(elem, children, editor) {
props: { contentEditable: false }, // HTML 属性，驼峰式写法 props: { contentEditable: false }, // HTML 属性，驼峰式写法
style: { style: {
color: "#fff", color: "#fff",
background: "orange", background: "#436AE9",
padding: "5px 10px" /* 其他... */, padding: "5px 10px" /* 其他... */,
}, // style ，驼峰式写法 }, // style ，驼峰式写法
on: { click() {} /* 其他... */ }, on: { click() {} /* 其他... */ },
}, },
// img 没有子节点，所以第三个参数不用写 // img 没有子节点，所以第三个参数不用写
[fileName, nameiconVnode] [fileName, nameiconVnode]
); );
// 附件元素 vnode // 附件元素 vnode
const attachVnode = h( const attachVnode = h(
// HTML tag // HTML tag
"span", "span",
// HTML 属性、样式、事件 // HTML 属性、样式、事件
@ -772,33 +668,33 @@ function renderAttachmenttwo(elem, children, editor) {
}, },
// 子节点 // 子节点
[nameVnode, spanVnode] [nameVnode, spanVnode]
); );
return attachVnode; return attachVnode;
} }
const renderElemConf = { const renderElemConf = {
type: "attachment", // 新元素 type ，重要！！！ type: "attachment", // 新元素 type ，重要！！！
renderElem: renderAttachment, renderElem: renderAttachment,
}; };
const renderElemConftwo = { const renderElemConftwo = {
type: "attachmenttwo", // 新元素 type ，重要！！！ type: "attachmenttwo", // 新元素 type ，重要！！！
renderElem: renderAttachmenttwo, renderElem: renderAttachmenttwo,
}; };
const rendermodule = { const rendermodule = {
// JS 语法 // JS 语法
// menus: [menu1Conf, menu2Conf, menu3Conf], // 菜单 // menus: [menu1Conf, menu2Conf, menu3Conf], // 菜单
// editorPlugin: withBreakAndDelete, // 插件 // editorPlugin: withBreakAndDelete, // 插件
renderElems: [renderElemConf, renderElemConftwo /* 其他元素... */], // renderElem renderElems: [renderElemConf, renderElemConftwo /* 其他元素... */], // renderElem
// 其他功能，下文讲解... // 其他功能，下文讲解...
}; };
Boot.registerModule(rendermodule); Boot.registerModule(rendermodule);
function attachmentToHtml(elem, childrenHtml) { function attachmentToHtml(elem, childrenHtml) {
// JS 语法 // JS 语法
// 获取附件元素的数据 // 获取附件元素的数据
const { link = "", fileName = "", fileSpan = "", fieldMark = "" } = elem; const { link = "", fileName = "", fileSpan = "", fieldMark = "" } = elem;
// 生成 HTML 代码 // 生成 HTML 代码
const html = `<span data-w-e-type="attachment" const html = `<span data-w-e-type="attachment"
data-w-e-is-void data-w-e-is-void
data-w-e-is-inline data-w-e-is-inline
data-link="${link}" data-link="${link}"
@ -810,14 +706,14 @@ function attachmentToHtml(elem, childrenHtml) {
<span>${fileSpan}</span> <span>${fileSpan}</span>
</span> </span>
</span>`; </span>`;
return html; return html;
} }
function attachmentToHtmltwo(elem, childrenHtml) { function attachmentToHtmltwo(elem, childrenHtml) {
// JS 语法 // JS 语法
// 获取附件元素的数据 // 获取附件元素的数据
const { link = "", fileName = "", fileSpan = "", fieldMark = "" } = elem; const { link = "", fileName = "", fileSpan = "", fieldMark = "" } = elem;
// 生成 HTML 代码 // 生成 HTML 代码
const html = `<span data-w-e-type="attachmenttwo" const html = `<span data-w-e-type="attachmenttwo"
data-w-e-is-void data-w-e-is-void
data-w-e-is-inline data-w-e-is-inline
data-link="${link}" data-link="${link}"
@ -829,67 +725,67 @@ function attachmentToHtmltwo(elem, childrenHtml) {
<span>${fileSpan}</span> <span>${fileSpan}</span>
</span> </span>
</span>`; </span>`;
return html; return html;
} }
const elemToHtmlConf = { const elemToHtmlConf = {
type: "attachment", // 新元素的 type ，重要！！！ type: "attachment", // 新元素的 type ，重要！！！
elemToHtml: attachmentToHtml, elemToHtml: attachmentToHtml,
}; };
const elemToHtmlConftwo = { const elemToHtmlConftwo = {
type: "attachmenttwo", // 新元素的 type ，重要！！！ type: "attachmenttwo", // 新元素的 type ，重要！！！
elemToHtml: attachmentToHtmltwo, elemToHtml: attachmentToHtmltwo,
}; };
const elemToHtmlConfmodule = { const elemToHtmlConfmodule = {
// JS 语法 // JS 语法
elemsToHtml: [elemToHtmlConf, elemToHtmlConftwo /* 其他元素... */], // elemToHtml elemsToHtml: [elemToHtmlConf, elemToHtmlConftwo /* 其他元素... */], // elemToHtml
}; };
Boot.registerModule(elemToHtmlConfmodule); Boot.registerModule(elemToHtmlConfmodule);
function parseAttachmentHtml(domElem, children, editor) { function parseAttachmentHtml(domElem, children, editor) {
// JS 语法 // JS 语法
// 从 DOM element 中获取“附件”的信息 // 从 DOM element 中获取“附件”的信息
const link = domElem.getAttribute("data-link") || ""; const link = domElem.getAttribute("data-link") || "";
const fileName = domElem.getAttribute("data-fileName") || ""; const fileName = domElem.getAttribute("data-fileName") || "";
const fileSpan = domElem.getAttribute("data-fileSpan") || ""; const fileSpan = domElem.getAttribute("data-fileSpan") || "";
const fieldMark = domElem.getAttribute("data-fieldMark") || ""; const fieldMark = domElem.getAttribute("data-fieldMark") || "";
// 生成“附件”元素（按照此前约定的数据结构） // 生成“附件”元素（按照此前约定的数据结构）
const myResume = { const myResume = {
type: "attachment", type: "attachment",
link, link,
fileName, fileName,
fileSpan, fileSpan,
fieldMark, fieldMark,
children: [{ text: "" }], // void node 必须有 children ，其中有一个空字符串，重要！！！ children: [{ text: "" }], // void node 必须有 children ，其中有一个空字符串，重要！！！
}; };
return myResume; return myResume;
} }
function parseAttachmentHtmltwo(domElem, children, editor) { function parseAttachmentHtmltwo(domElem, children, editor) {
// JS 语法 // JS 语法
// 从 DOM element 中获取“附件”的信息 // 从 DOM element 中获取“附件”的信息
const link = domElem.getAttribute("data-link") || ""; const link = domElem.getAttribute("data-link") || "";
const fileName = domElem.getAttribute("data-fileName") || ""; const fileName = domElem.getAttribute("data-fileName") || "";
const fileSpan = domElem.getAttribute("data-fileSpan") || ""; const fileSpan = domElem.getAttribute("data-fileSpan") || "";
const fieldMark = domElem.getAttribute("data-fieldMark") || ""; const fieldMark = domElem.getAttribute("data-fieldMark") || "";
// 生成“附件”元素（按照此前约定的数据结构） // 生成“附件”元素（按照此前约定的数据结构）
const myResume = { const myResume = {
type: "attachmenttwo", type: "attachmenttwo",
link, link,
fileName, fileName,
fileSpan, fileSpan,
fieldMark, fieldMark,
children: [{ text: "" }], // void node 必须有 children ，其中有一个空字符串，重要！！！ children: [{ text: "" }], // void node 必须有 children ，其中有一个空字符串，重要！！！
}; };
return myResume; return myResume;
} }
const parseHtmlConf = { const parseHtmlConf = {
selector: 'span[data-w-e-type="attachment"]', // CSS 选择器，匹配特定的 HTML 标签 selector: 'span[data-w-e-type="attachment"]', // CSS 选择器，匹配特定的 HTML 标签
parseElemHtml: parseAttachmentHtml, parseElemHtml: parseAttachmentHtml,
}; };
const parseHtmlConftwo = { const parseHtmlConftwo = {
selector: 'span[data-w-e-type="attachmenttwo"]', // CSS 选择器，匹配特定的 HTML 标签 selector: 'span[data-w-e-type="attachmenttwo"]', // CSS 选择器，匹配特定的 HTML 标签
parseElemHtml: parseAttachmentHtmltwo, parseElemHtml: parseAttachmentHtmltwo,
}; };
const parseHtmlConfmodule = { const parseHtmlConfmodule = {
parseElemsHtml: [parseHtmlConf, parseHtmlConftwo], // parseElemHtml parseElemsHtml: [parseHtmlConf, parseHtmlConftwo], // parseElemHtml
}; };
Boot.registerModule(parseHtmlConfmodule); Boot.registerModule(parseHtmlConfmodule);
</script> </script>
@ -898,17 +794,17 @@ Boot.registerModule(parseHtmlConfmodule);
<style lang="scss" > <style lang="scss" >
.category-cascader-panel { .category-cascader-panel {
.el-cascader-panel { .el-cascader-panel {
// background-color: red !important; // background-color: red !important;
li[aria-haspopup="true"] { li[aria-haspopup="true"] {
.el-checkbox { .el-checkbox {
display: none !important; display: none !important;
} }
} }
}
} }
}
</style>
// ::v-deep .el-textarea__inner { // ::v-deep .el-textarea__inner {
// color: black !important; // color: black !important;
// background-color: #fff !important; // background-color: #fff !important;
@ -931,5 +827,53 @@ Boot.registerModule(parseHtmlConfmodule);
// line-height: 32px; // line-height: 32px;
// border-radius: 5px; // border-radius: 5px;
// } // }
</style> // parseElemHtml: parseAttachmentHtml,
<style src="@wangeditor/editor/dist/css/style.css"></style> // }
// const parseHtmlConftwo = {
// selector: 'span[data-w-e-type="attachmenttwo"]', // CSS 选择器，匹配特定的 HTML 标签
// parseElemHtml: parseAttachmentHtmltwo,
// }
// const parseHtmlConfmodule = {
// parseElemsHtml: [parseHtmlConf, parseHtmlConftwo] // parseElemHtml
// }
// Boot.registerModule(parseHtmlConfmodule)
// <!-- </script> -->
<!-- <style lang="scss" scoped>
::v-deep .el-textarea__inner {
color: black !important;
background-color: #fff !important;
cursor: default !important
}
.path-tag-wrap {
font-size: 18px;
line-height: 32px;
border-radius: 5px;
}
::v-deep .el-textarea__inner {
color: black !important;
background-color: #fff !important;
cursor: default !important
}
.path-tag-wrap {
font-size: 18px;
line-height: 32px;
border-radius: 5px;
}
::v-deep .el-textarea__inner {
color: black !important;
background-color: #fff !important;
cursor: default !important
}
.path-tag-wrap {
font-size: 18px;
line-height: 32px;
border-radius: 5px;
}
</style> -->
<style src="@wangeditor/editor/dist/css/style.css"></>

2
src/views/system/specialDiseaseNode/index.vue
View File

@ -38,7 +38,7 @@
<el-option label="术前" value="PREOPERATIVE" /> <el-option label="术前" value="PREOPERATIVE" />
<el-option label="术后" value="POSTOPERATIVE" /> --> <el-option label="术后" value="POSTOPERATIVE" /> -->
</el-select> </el-select>
<el-input v-model="item.routeNodeDay" style="width: 70px" type="number"></el-input> <el-input v-model="item.routeNodeDay" style="width: 70px" type="number" :min="0"></el-input>
<span>天</span> <span>天</span>
</div> </div>
<div> <div>