Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
shidongli
commit
6f8b41e941
@ -297,7 +297,11 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
cancels() { },
|
||||
cancels() {
|
||||
this.opens=false
|
||||
this.reset();
|
||||
|
||||
},
|
||||
// change(e) {
|
||||
// console.log(e, "78");
|
||||
// // console.log(this.$refs.cascader)
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<div style="border: 1px solid #ccc">
|
||||
<template> <div style="border: 1px solid #ccc">
|
||||
<Toolbar
|
||||
style="border-bottom: 1px solid #ccc"
|
||||
:editor="editor"
|
||||
:defaultConfig="toolbarConfig"
|
||||
:mode="mode"
|
||||
/>
|
||||
<!-- 研究一下 如何清除这个富文本里的东西 我给加了标签不生效 他富文本自动编译class名字了 你百度一下 好 我搞杯咖啡区 困不行了好的 -->
|
||||
<Editor
|
||||
style="height: 500px; overflow-y: hidden"
|
||||
v-model="html"
|
||||
@ -69,9 +67,6 @@
|
||||
}"
|
||||
ref="cascaderAddr"
|
||||
>
|
||||
|
||||
<!-- dengyixia 看一下api -->
|
||||
<!-- :props="{ checkStrictly: true, multiple: true, emitPath: false } -->
|
||||
</el-cascader-panel>
|
||||
|
||||
<div style="margin: 20px 0">结果预览:</div>
|
||||
@ -90,36 +85,36 @@
|
||||
<el-button @click="fieldclick" type="primary">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DomEditor,
|
||||
IDomEditor,
|
||||
SlateElement,
|
||||
SlateDescendant,
|
||||
SlateTransforms,
|
||||
SlateEditor,
|
||||
SlateNode,
|
||||
DomEditor,
|
||||
IDomEditor,
|
||||
SlateElement,
|
||||
SlateDescendant,
|
||||
SlateTransforms,
|
||||
SlateEditor,
|
||||
SlateNode,
|
||||
} from "@wangeditor/editor";
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
import { Boot } from "@wangeditor/editor";
|
||||
import { h, VNode } from "snabbdom";
|
||||
import {
|
||||
labelFieldList,
|
||||
richTextPictureUrl,
|
||||
bankLevel,
|
||||
labelFieldList,
|
||||
richTextPictureUrl,
|
||||
bankLevel,
|
||||
} from "@/api/system/wangEditor.js";
|
||||
// import menuConf from "./ModalMenu";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
var that;
|
||||
export default {
|
||||
props: ["nodeContent"],
|
||||
components: { Editor, Toolbar },
|
||||
name: "wangEditor",
|
||||
data() {
|
||||
props: ["nodeContent"],
|
||||
components: { Editor, Toolbar },
|
||||
name: "wangEditor",
|
||||
data() {
|
||||
return {
|
||||
isResouceShow: 1,
|
||||
searchForm: {},
|
||||
@ -188,10 +183,9 @@ export default {
|
||||
elist: [],
|
||||
termContent: "",
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 我拿什么能知道当前选中的是不是最后一级 没有children就管吧 e里面拿不到哦哦
|
||||
methods: {
|
||||
handleChange(e) {
|
||||
console.log(e, "e");
|
||||
this.add = [];
|
||||
@ -205,103 +199,8 @@ export default {
|
||||
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) {
|
||||
@ -310,14 +209,11 @@ export default {
|
||||
let res = await this.uploadFile(form); //此方法返回上传后的id
|
||||
console.log(res);
|
||||
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 +=
|
||||
'<video poster="" controls="true" width="auto" height="auto"><source src="' +
|
||||
process.env.VUE_APP_BASE_API +
|
||||
+
|
||||
'" type="video/mp4"/></video>';
|
||||
// 如果没有预览服务可以让后端写一下下载接口，然后在这里直接拼，但是这个接口前缀最好使用项目中接口配置的前缀
|
||||
},
|
||||
async uploadFile(form) {
|
||||
let res = await richTextPictureUrl(form); //此处换为自己的上传接口地址
|
||||
@ -371,7 +267,7 @@ export default {
|
||||
},
|
||||
fieldclick() {
|
||||
// 先判断 富文本里有没有这个名字叫divBox的标签 有的话用原生js给他删掉 然后继续走下面的+=
|
||||
// 如果富文本里面没有这个元素 就直接走+= ‘divBox’唯一标识符 这个能明白吗 这样就第二次选择的时候 会覆盖第一次选择的
|
||||
// 如果富文本里面没有这个元素 就直接走+= ‘divBox’唯一标识符 这样就第二次选择的时候 会覆盖第一次选择的
|
||||
var aaa = document.querySelectorAll('.divBox')
|
||||
console.log(this.html,'this.html--before');
|
||||
console.log(aaa,'打印dom')
|
||||
@ -380,7 +276,7 @@ export default {
|
||||
aaa.remove()
|
||||
}else{
|
||||
aaa.innerHTML = ''
|
||||
this.html += `<p class="divBox">${this.add}</p>`
|
||||
this.html += `<p >${this.add}</p>`
|
||||
console.log(this.html,'this.html2222');
|
||||
}
|
||||
this.fieldshow = false;
|
||||
@ -457,123 +353,123 @@ export default {
|
||||
this.fieldshow = false;
|
||||
this.labelshow = false;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
watch: {
|
||||
nodeContent(newValue, oldValue) {
|
||||
console.log(newValue, oldValue);
|
||||
this.html = newValue;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
mounted() {
|
||||
this.html = this.nodeContent;
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
const editor = this.editor;
|
||||
if (editor == null) return;
|
||||
editor.destroy(); // 组件销毁时，及时销毁编辑器
|
||||
},
|
||||
created() {
|
||||
},
|
||||
created() {
|
||||
that = this;
|
||||
this.info();
|
||||
},
|
||||
},
|
||||
};
|
||||
class MyButtonMenu {
|
||||
// JS 语法
|
||||
constructor(vueInstance) {
|
||||
// JS 语法
|
||||
constructor(vueInstance) {
|
||||
this.vueInstance = vueInstance;
|
||||
this.title = "添加画像标签字段";
|
||||
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>';
|
||||
this.tag = "button";
|
||||
this.showModal = true;
|
||||
}
|
||||
// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
|
||||
isActive(editor) {
|
||||
}
|
||||
// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
|
||||
isActive(editor) {
|
||||
return false;
|
||||
}
|
||||
// 获取菜单执行时的 value ，用不到则返回空 字符串或 false
|
||||
getValue(editor) {
|
||||
}
|
||||
// 获取菜单执行时的 value ，用不到则返回空 字符串或 false
|
||||
getValue(editor) {
|
||||
return "";
|
||||
}
|
||||
// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
|
||||
isDisabled(editor) {
|
||||
}
|
||||
// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
|
||||
isDisabled(editor) {
|
||||
return false;
|
||||
}
|
||||
// 点击菜单时触发的函数
|
||||
exec(editor, value) {
|
||||
}
|
||||
// 点击菜单时触发的函数
|
||||
exec(editor, value) {
|
||||
this.vueInstance.labelshow = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
class MyButtonMenutwo {
|
||||
// JS 语法
|
||||
constructor(vueInstance) {
|
||||
// JS 语法
|
||||
constructor(vueInstance) {
|
||||
this.vueInstance = vueInstance;
|
||||
this.title = "添加知识库字段";
|
||||
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>';
|
||||
this.tag = "button";
|
||||
this.showModal = true;
|
||||
}
|
||||
// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
|
||||
isActive(editor) {
|
||||
}
|
||||
// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
|
||||
isActive(editor) {
|
||||
return false;
|
||||
}
|
||||
// 获取菜单执行时的 value ，用不到则返回空 字符串或 false
|
||||
getValue(editor) {
|
||||
}
|
||||
// 获取菜单执行时的 value ，用不到则返回空 字符串或 false
|
||||
getValue(editor) {
|
||||
return "";
|
||||
}
|
||||
// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
|
||||
isDisabled(editor) {
|
||||
}
|
||||
// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
|
||||
isDisabled(editor) {
|
||||
return false;
|
||||
}
|
||||
// 点击菜单时触发的函数
|
||||
exec(editor, value) {
|
||||
}
|
||||
// 点击菜单时触发的函数
|
||||
exec(editor, value) {
|
||||
this.vueInstance.fieldshow = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
const menuConf = {
|
||||
key: "MyButtonMenu", // 定义 menu key ：要保证唯一、不重复（重要）
|
||||
factory() {
|
||||
key: "MyButtonMenu", // 定义 menu key ：要保证唯一、不重复（重要）
|
||||
factory() {
|
||||
return new MyButtonMenu(that);
|
||||
},
|
||||
},
|
||||
};
|
||||
const menuConftwo = {
|
||||
key: "MyButtonMenutwo", // 定义 menu key ：要保证唯一、不重复（重要）
|
||||
factory() {
|
||||
key: "MyButtonMenutwo", // 定义 menu key ：要保证唯一、不重复（重要）
|
||||
factory() {
|
||||
return new MyButtonMenutwo(that);
|
||||
},
|
||||
},
|
||||
};
|
||||
const module = {
|
||||
// JS 语法
|
||||
menus: [menuConf, menuConftwo],
|
||||
// 其他功能，下文讲解...
|
||||
// JS 语法
|
||||
menus: [menuConf, menuConftwo],
|
||||
// 其他功能，下文讲解...
|
||||
};
|
||||
Boot.registerModule(module);
|
||||
function withAttachment(editor) {
|
||||
// JS 语法
|
||||
const { isInline, isVoid } = editor;
|
||||
const newEditor = editor;
|
||||
newEditor.isInline = (elem) => {
|
||||
// JS 语法
|
||||
const { isInline, isVoid } = editor;
|
||||
const newEditor = editor;
|
||||
newEditor.isInline = (elem) => {
|
||||
const type = DomEditor.getNodeType(elem);
|
||||
if (type === "attachment") return true; // 针对 type: attachment ，设置为 inline
|
||||
if (type === "attachmenttwo") return true; // 针对 type: attachment ，设置为 inline
|
||||
return isInline(elem);
|
||||
};
|
||||
newEditor.isVoid = (elem) => {
|
||||
};
|
||||
newEditor.isVoid = (elem) => {
|
||||
const type = DomEditor.getNodeType(elem);
|
||||
if (type === "attachment") return true; // 针对 type: attachment ，设置为 void
|
||||
if (type === "attachmenttwo") return true; // 针对 type: attachment ，设置为 void
|
||||
return isVoid(elem);
|
||||
};
|
||||
return newEditor; // 返回 newEditor ，重要！！！
|
||||
};
|
||||
return newEditor; // 返回 newEditor ，重要！！！
|
||||
}
|
||||
Boot.registerPlugin(withAttachment);
|
||||
function renderAttachment(elem, children, editor) {
|
||||
// JS 语法
|
||||
// 获取“附件”的数据，参考上文 myResume 数据结构
|
||||
const { fileName = "", link = "", fileSpan = "", fieldMark = "" } = elem;
|
||||
// 附件 icon 图标 vnode
|
||||
const iconVnode = h(
|
||||
// JS 语法
|
||||
// 获取“附件”的数据，参考上文 myResume 数据结构
|
||||
const { fileName = "", link = "", fileSpan = "", fieldMark = "" } = elem;
|
||||
// 附件 icon 图标 vnode
|
||||
const iconVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性
|
||||
@ -596,8 +492,8 @@ function renderAttachment(elem, children, editor) {
|
||||
},
|
||||
}
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
);
|
||||
const nameiconVnode = h(
|
||||
);
|
||||
const nameiconVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性
|
||||
@ -621,8 +517,8 @@ function renderAttachment(elem, children, editor) {
|
||||
},
|
||||
}
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
);
|
||||
const spanVnode = h(
|
||||
);
|
||||
const spanVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性
|
||||
@ -630,15 +526,15 @@ function renderAttachment(elem, children, editor) {
|
||||
props: { contentEditable: false }, // HTML 属性，驼峰式写法
|
||||
style: {
|
||||
color: "#22343C",
|
||||
background: "red",
|
||||
background: "#E5F5F2",
|
||||
padding: "5px 10px" /* 其他... */,
|
||||
}, // style ，驼峰式写法
|
||||
on: { click() {} /* 其他... */ },
|
||||
},
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
[fileSpan, iconVnode]
|
||||
);
|
||||
const nameVnode = h(
|
||||
);
|
||||
const nameVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性
|
||||
@ -653,9 +549,9 @@ function renderAttachment(elem, children, editor) {
|
||||
},
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
[fileName, nameiconVnode]
|
||||
);
|
||||
// 附件元素 vnode
|
||||
const attachVnode = h(
|
||||
);
|
||||
// 附件元素 vnode
|
||||
const attachVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性、样式、事件
|
||||
@ -668,15 +564,15 @@ function renderAttachment(elem, children, editor) {
|
||||
},
|
||||
// 子节点
|
||||
[nameVnode, spanVnode]
|
||||
);
|
||||
return attachVnode;
|
||||
);
|
||||
return attachVnode;
|
||||
}
|
||||
function renderAttachmenttwo(elem, children, editor) {
|
||||
// JS 语法
|
||||
// 获取“附件”的数据，参考上文 myResume 数据结构
|
||||
const { fileName = "", link = "", fileSpan = "", fieldMark = "" } = elem;
|
||||
// 附件 icon 图标 vnode
|
||||
const iconVnode = h(
|
||||
// JS 语法
|
||||
// 获取“附件”的数据，参考上文 myResume 数据结构
|
||||
const { fileName = "", link = "", fileSpan = "", fieldMark = "" } = elem;
|
||||
// 附件 icon 图标 vnode
|
||||
const iconVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性
|
||||
@ -699,8 +595,8 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
},
|
||||
}
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
);
|
||||
const nameiconVnode = h(
|
||||
);
|
||||
const nameiconVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性
|
||||
@ -725,8 +621,8 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
},
|
||||
}
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
);
|
||||
const spanVnode = h(
|
||||
);
|
||||
const spanVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性
|
||||
@ -734,15 +630,15 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
props: { contentEditable: false }, // HTML 属性，驼峰式写法
|
||||
style: {
|
||||
color: "#22343C",
|
||||
background: "yellow",
|
||||
background: "#E5F5F2",
|
||||
padding: "5px 10px" /* 其他... */,
|
||||
}, // style ，驼峰式写法
|
||||
on: { click() {} /* 其他... */ },
|
||||
},
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
[fileSpan, iconVnode]
|
||||
);
|
||||
const nameVnode = h(
|
||||
);
|
||||
const nameVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性
|
||||
@ -750,16 +646,16 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
props: { contentEditable: false }, // HTML 属性，驼峰式写法
|
||||
style: {
|
||||
color: "#fff",
|
||||
background: "orange",
|
||||
background: "#436AE9",
|
||||
padding: "5px 10px" /* 其他... */,
|
||||
}, // style ，驼峰式写法
|
||||
on: { click() {} /* 其他... */ },
|
||||
},
|
||||
// img 没有子节点，所以第三个参数不用写
|
||||
[fileName, nameiconVnode]
|
||||
);
|
||||
// 附件元素 vnode
|
||||
const attachVnode = h(
|
||||
);
|
||||
// 附件元素 vnode
|
||||
const attachVnode = h(
|
||||
// HTML tag
|
||||
"span",
|
||||
// HTML 属性、样式、事件
|
||||
@ -772,33 +668,33 @@ function renderAttachmenttwo(elem, children, editor) {
|
||||
},
|
||||
// 子节点
|
||||
[nameVnode, spanVnode]
|
||||
);
|
||||
return attachVnode;
|
||||
);
|
||||
return attachVnode;
|
||||
}
|
||||
const renderElemConf = {
|
||||
type: "attachment", // 新元素 type ，重要！！！
|
||||
renderElem: renderAttachment,
|
||||
type: "attachment", // 新元素 type ，重要！！！
|
||||
renderElem: renderAttachment,
|
||||
};
|
||||
const renderElemConftwo = {
|
||||
type: "attachmenttwo", // 新元素 type ，重要！！！
|
||||
renderElem: renderAttachmenttwo,
|
||||
type: "attachmenttwo", // 新元素 type ，重要！！！
|
||||
renderElem: renderAttachmenttwo,
|
||||
};
|
||||
|
||||
const rendermodule = {
|
||||
// JS 语法
|
||||
// menus: [menu1Conf, menu2Conf, menu3Conf], // 菜单
|
||||
// editorPlugin: withBreakAndDelete, // 插件
|
||||
renderElems: [renderElemConf, renderElemConftwo /* 其他元素... */], // renderElem
|
||||
// JS 语法
|
||||
// menus: [menu1Conf, menu2Conf, menu3Conf], // 菜单
|
||||
// editorPlugin: withBreakAndDelete, // 插件
|
||||
renderElems: [renderElemConf, renderElemConftwo /* 其他元素... */], // renderElem
|
||||
|
||||
// 其他功能，下文讲解...
|
||||
// 其他功能，下文讲解...
|
||||
};
|
||||
Boot.registerModule(rendermodule);
|
||||
function attachmentToHtml(elem, childrenHtml) {
|
||||
// JS 语法
|
||||
// 获取附件元素的数据
|
||||
const { link = "", fileName = "", fileSpan = "", fieldMark = "" } = elem;
|
||||
// 生成 HTML 代码
|
||||
const html = `<span data-w-e-type="attachment"
|
||||
// JS 语法
|
||||
// 获取附件元素的数据
|
||||
const { link = "", fileName = "", fileSpan = "", fieldMark = "" } = elem;
|
||||
// 生成 HTML 代码
|
||||
const html = `<span data-w-e-type="attachment"
|
||||
data-w-e-is-void
|
||||
data-w-e-is-inline
|
||||
data-link="${link}"
|
||||
@ -810,14 +706,14 @@ function attachmentToHtml(elem, childrenHtml) {
|
||||
<span>${fileSpan}</span>
|
||||
</span>
|
||||
</span>`;
|
||||
return html;
|
||||
return html;
|
||||
}
|
||||
function attachmentToHtmltwo(elem, childrenHtml) {
|
||||
// JS 语法
|
||||
// 获取附件元素的数据
|
||||
const { link = "", fileName = "", fileSpan = "", fieldMark = "" } = elem;
|
||||
// 生成 HTML 代码
|
||||
const html = `<span data-w-e-type="attachmenttwo"
|
||||
// JS 语法
|
||||
// 获取附件元素的数据
|
||||
const { link = "", fileName = "", fileSpan = "", fieldMark = "" } = elem;
|
||||
// 生成 HTML 代码
|
||||
const html = `<span data-w-e-type="attachmenttwo"
|
||||
data-w-e-is-void
|
||||
data-w-e-is-inline
|
||||
data-link="${link}"
|
||||
@ -829,67 +725,67 @@ function attachmentToHtmltwo(elem, childrenHtml) {
|
||||
<span>${fileSpan}</span>
|
||||
</span>
|
||||
</span>`;
|
||||
return html;
|
||||
return html;
|
||||
}
|
||||
const elemToHtmlConf = {
|
||||
type: "attachment", // 新元素的 type ，重要！！！
|
||||
elemToHtml: attachmentToHtml,
|
||||
type: "attachment", // 新元素的 type ，重要！！！
|
||||
elemToHtml: attachmentToHtml,
|
||||
};
|
||||
const elemToHtmlConftwo = {
|
||||
type: "attachmenttwo", // 新元素的 type ，重要！！！
|
||||
elemToHtml: attachmentToHtmltwo,
|
||||
type: "attachmenttwo", // 新元素的 type ，重要！！！
|
||||
elemToHtml: attachmentToHtmltwo,
|
||||
};
|
||||
const elemToHtmlConfmodule = {
|
||||
// JS 语法
|
||||
elemsToHtml: [elemToHtmlConf, elemToHtmlConftwo /* 其他元素... */], // elemToHtml
|
||||
// JS 语法
|
||||
elemsToHtml: [elemToHtmlConf, elemToHtmlConftwo /* 其他元素... */], // elemToHtml
|
||||
};
|
||||
Boot.registerModule(elemToHtmlConfmodule);
|
||||
function parseAttachmentHtml(domElem, children, editor) {
|
||||
// JS 语法
|
||||
// 从 DOM element 中获取“附件”的信息
|
||||
const link = domElem.getAttribute("data-link") || "";
|
||||
const fileName = domElem.getAttribute("data-fileName") || "";
|
||||
const fileSpan = domElem.getAttribute("data-fileSpan") || "";
|
||||
const fieldMark = domElem.getAttribute("data-fieldMark") || "";
|
||||
// 生成“附件”元素（按照此前约定的数据结构）
|
||||
const myResume = {
|
||||
// JS 语法
|
||||
// 从 DOM element 中获取“附件”的信息
|
||||
const link = domElem.getAttribute("data-link") || "";
|
||||
const fileName = domElem.getAttribute("data-fileName") || "";
|
||||
const fileSpan = domElem.getAttribute("data-fileSpan") || "";
|
||||
const fieldMark = domElem.getAttribute("data-fieldMark") || "";
|
||||
// 生成“附件”元素（按照此前约定的数据结构）
|
||||
const myResume = {
|
||||
type: "attachment",
|
||||
link,
|
||||
fileName,
|
||||
fileSpan,
|
||||
fieldMark,
|
||||
children: [{ text: "" }], // void node 必须有 children ，其中有一个空字符串，重要！！！
|
||||
};
|
||||
return myResume;
|
||||
};
|
||||
return myResume;
|
||||
}
|
||||
function parseAttachmentHtmltwo(domElem, children, editor) {
|
||||
// JS 语法
|
||||
// 从 DOM element 中获取“附件”的信息
|
||||
const link = domElem.getAttribute("data-link") || "";
|
||||
const fileName = domElem.getAttribute("data-fileName") || "";
|
||||
const fileSpan = domElem.getAttribute("data-fileSpan") || "";
|
||||
const fieldMark = domElem.getAttribute("data-fieldMark") || "";
|
||||
// 生成“附件”元素（按照此前约定的数据结构）
|
||||
const myResume = {
|
||||
// JS 语法
|
||||
// 从 DOM element 中获取“附件”的信息
|
||||
const link = domElem.getAttribute("data-link") || "";
|
||||
const fileName = domElem.getAttribute("data-fileName") || "";
|
||||
const fileSpan = domElem.getAttribute("data-fileSpan") || "";
|
||||
const fieldMark = domElem.getAttribute("data-fieldMark") || "";
|
||||
// 生成“附件”元素（按照此前约定的数据结构）
|
||||
const myResume = {
|
||||
type: "attachmenttwo",
|
||||
link,
|
||||
fileName,
|
||||
fileSpan,
|
||||
fieldMark,
|
||||
children: [{ text: "" }], // void node 必须有 children ，其中有一个空字符串，重要！！！
|
||||
};
|
||||
return myResume;
|
||||
};
|
||||
return myResume;
|
||||
}
|
||||
const parseHtmlConf = {
|
||||
selector: 'span[data-w-e-type="attachment"]', // CSS 选择器，匹配特定的 HTML 标签
|
||||
parseElemHtml: parseAttachmentHtml,
|
||||
selector: 'span[data-w-e-type="attachment"]', // CSS 选择器，匹配特定的 HTML 标签
|
||||
parseElemHtml: parseAttachmentHtml,
|
||||
};
|
||||
const parseHtmlConftwo = {
|
||||
selector: 'span[data-w-e-type="attachmenttwo"]', // CSS 选择器，匹配特定的 HTML 标签
|
||||
parseElemHtml: parseAttachmentHtmltwo,
|
||||
selector: 'span[data-w-e-type="attachmenttwo"]', // CSS 选择器，匹配特定的 HTML 标签
|
||||
parseElemHtml: parseAttachmentHtmltwo,
|
||||
};
|
||||
const parseHtmlConfmodule = {
|
||||
parseElemsHtml: [parseHtmlConf, parseHtmlConftwo], // parseElemHtml
|
||||
parseElemsHtml: [parseHtmlConf, parseHtmlConftwo], // parseElemHtml
|
||||
};
|
||||
Boot.registerModule(parseHtmlConfmodule);
|
||||
</script>
|
||||
@ -898,17 +794,17 @@ Boot.registerModule(parseHtmlConfmodule);
|
||||
|
||||
<style lang="scss" >
|
||||
.category-cascader-panel {
|
||||
.el-cascader-panel {
|
||||
// background-color: red !important;
|
||||
.el-cascader-panel {
|
||||
// background-color: red !important;
|
||||
|
||||
li[aria-haspopup="true"] {
|
||||
.el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
// ::v-deep .el-textarea__inner {
|
||||
// color: black !important;
|
||||
// background-color: #fff !important;
|
||||
@ -931,5 +827,53 @@ Boot.registerModule(parseHtmlConfmodule);
|
||||
// line-height: 32px;
|
||||
// border-radius: 5px;
|
||||
// }
|
||||
</style>
|
||||
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
||||
// parseElemHtml: parseAttachmentHtml,
|
||||
// }
|
||||
// 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"></>
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
<el-option label="术前" value="PREOPERATIVE" />
|
||||
<el-option label="术后" value="POSTOPERATIVE" /> -->
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user