修改

package.json

@@ -53,6 +53,7 @@
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
+    "snabbdom": "^3.6.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",

src/api/system/specialDiseaseNode.js

@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+
+// /system/partition/taskPartitionList 任务细分
+export function taskPartitionList(taskTypeId) {
+    return request({
+        url: `/system/partition/taskPartitionList?taskTypeId=${taskTypeId}`,
+        method: 'get',
+    })
+}
+///system/taskType/selectTaskTypeList 任务类型
+export function selectTaskTypeList() {
+    return request({
+        url: '/system/taskType/selectTaskTypeList',
+        method: 'get',
+    })
+}
+// /system/taskStatus/taskStatusDictList 任务状态
+export function taskStatusDictList() {
+    return request({
+        url: '/system/taskStatus/taskStatusDictList',
+        method: 'get',
+    })
+}

src/views/system/components/wangEditor.vue

@@ -11,10 +11,12 @@
 </template>
 
 <script>
-import Vue from 'vue'
+import { DomEditor, IDomEditor, SlateElement } from '@wangeditor/editor'
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import { Boot } from '@wangeditor/editor'
+import { h, VNode } from 'snabbdom'
 // import menuConf from "./ModalMenu";
+
 export default ({
     components: { Editor, Toolbar },
     data() {
@@ -234,7 +236,14 @@ export default ({
             this.editor.focus()
             this.timer = setInterval(() => {
                 if (this.editor.isFocused()) {
-                    this.editor.insertText('Hello Vue!')
+                    const resume = {                    // JS 语法
+                        type: 'attachment',
+                        fileName: '用药',
+                        fileSpan: '药品名称',
+                        link: 'https://xxx.com/files/resume.pdf',
+                        children: [{ text: '123' }]  // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
+                    }
+                    this.editor.insertNode(resume)
                     clearInterval(this.timer)
                 }
             }, 200);
@@ -251,6 +260,7 @@ export default ({
         },
     },
     mounted() {
+
     },
     beforeDestroy() {
         const editor = this.editor
@@ -266,8 +276,71 @@ export default ({
             },
         };
         Boot.registerMenu(menuConf)
+        Boot.registerPlugin(withAttachment)
+        const renderElemConf = {
+            type: 'attachment', // 新元素 type ，重要！！！
+            renderElem: renderAttachment,
+        }
+        Boot.registerRenderElem(renderElemConf)
     }
 })
+function withAttachment(editor) {                        // JS 语法
+    const { isInline, isVoid } = editor
+    const newEditor = editor
+    newEditor.isInline = elem => {
+        const type = DomEditor.getNodeType(elem)
+        if (type === 'attachment') return true // 针对 type: attachment ，设置为 inline
+        return isInline(elem)
+    }
+    newEditor.isVoid = elem => {
+        const type = DomEditor.getNodeType(elem)
+        if (type === 'attachment') return true // 针对 type: attachment ，设置为 void
+        return isVoid(elem)
+    }
+    return newEditor // 返回 newEditor ，重要！！！
+}
+function renderAttachment(elem, children, editor) {                                                // JS 语法
+    console.log(h)
+    // 获取“附件”的数据，参考上文 myResume 数据结构
+    const { fileName = '', link = '', fileSpan = '' } = elem
+    // 附件 icon 图标 vnode
+    const iconVnode = h(
+        // HTML tag
+        'img',
+        // HTML 属性
+        {
+            props: { src: 'https://hekou-nurse-api.xinyilu.cn/profile/weChatPicture/dygmainPage.png' }, // HTML 属性，驼峰式写法
+            style: { width: '1em', marginRight: '0.1em', transform: 'translateY(15%)'  /* 其他... */ } // HTML style ，驼峰式写法
+        }
+        // img 没有子节点，所以第三个参数不用写
+    )
+    const spanVnode = h(
+        // HTML tag
+        'span',
+        // HTML 属性
+        {
+            props: { contentEditable: false }, // HTML 属性，驼峰式写法
+            style: { display: 'inline-block', marginLeft: '3px', color: '#22343C', background: '#E5F5F2', /* 其他... */ }, // style ，驼峰式写法
+            on: { click() { console.log('clicked', link, elem) }, /* 其他... */ }
+        },
+        // img 没有子节点，所以第三个参数不用写
+        [iconVnode, fileSpan]
+    )
+    // 附件元素 vnode
+    const attachVnode = h(
+        // HTML tag
+        'span',
+        // HTML 属性、样式、事件
+        {
+            props: { contentEditable: false }, // HTML 属性，驼峰式写法
+            style: { display: 'inline-block', marginLeft: '3px', color: '#fff', background: '#009A82', /* 其他... */ }, // style ，驼峰式写法
+            on: { click() { console.log('clicked', link, elem), elem.fileName = '123' } /* 其他... */ }
+        },
+        // 子节点
+        [iconVnode, fileName, spanVnode]
+    )
+    return attachVnode
+}
 
 class MyButtonMenu {                       // JS 语法
     constructor(vueInstance) {

src/views/system/specialDiseaseNode/index.vue

@@ -40,7 +40,7 @@
                             </div>
                         </div>
                         <el-card v-for="(uitem, uindex) in item.list" :key="uitem.id"
-                            @click.native='bottomclickevent(index, uindex)'
+                            @click.native='bottomclickevent(uitem, index, uindex)'
                             :class="listindex == index && itemindex == uindex ? 'cards' : ''">
                             <h4>{{ uitem.title }}</h4>
                             <p>{{ uitem.text }}</p>
@@ -52,20 +52,23 @@
                 <div class="topform">
                     <el-form ref="form" :inline="true" :model="form" label-width="60px" class="form">
                         <el-form-item label="任务类型" prop="name">
-                            <el-select v-model="value" style="width:100px">
+                            <el-select v-model="value" style="width:100px" @change="changeTaskType">
-                                <el-option label="出院后" value="item.value">
+                                <el-option v-for="item in selectTaskTypeList" :key="item.id" :label="item.taskTypeName"
+                                    :value="item.id">
                                 </el-option>
                             </el-select>
                         </el-form-item>
                         <el-form-item label="任务细分" prop="name">
                             <el-select v-model="value" style="width:100px">
-                                <el-option label="出院后" value="item.value">
+                                <el-option v-for="item in taskPartitionList" :key="item.id" :label="item.taskTypeName"
+                                    :value="item.id">
                                 </el-option>
                             </el-select>
                         </el-form-item>
                         <el-form-item label="任务状态" prop="name">
                             <el-select v-model="value" style="width:100px">
-                                <el-option label="出院后" value="item.value">
+                                <el-option v-for="item in taskStatusDictList" :key="item.id"
+                                    :label="item.taskStatusName" :value="item.id">
                                 </el-option>
                             </el-select>
                         </el-form-item>
@@ -80,7 +83,7 @@
                         </el-form-item>
                     </el-form>
                 </div>
-                <!-- <wangeditor style="height:300px;width:100%;" ref="editor" /> -->
+                <wangeditor style="height:300px;width:100%;" ref="editor" />
             </div>
         </div>
     </div>
@@ -88,6 +91,9 @@
 
 <script>
 import wangeditor from '../components/wangEditor.vue'
+import {
+    selectTaskTypeList, taskPartitionList, taskStatusDictList
+} from '@/api/system/specialDiseaseNode'
 export default {
     components: { wangeditor },
     name: "specialDiseaseNode",
@@ -150,9 +156,16 @@ export default {
             }],
             value: '',
             input: '',
+            //任务类型
+            selectTaskTypeList: [],
+            //任务状态
+            taskStatusDictList: [],
+            //任务细分
+            taskPartitionList: [],
         };
     },
     created() {
+        this.taskinfo();
     },
     watch: {
     },
@@ -164,13 +177,29 @@ export default {
             this.listindex = index
             this.itemindex = 0
         },
-        bottomclickevent(index, uindex) {
+        bottomclickevent(uitem, index, uindex) {
+            this.uitem = uitem
             this.listindex = index
             this.itemindex = uindex
         },
         handleStep() {
             this.active = 2
         },
+        //任务类型 任务状态
+        taskinfo() {
+            selectTaskTypeList().then(res => {
+                this.selectTaskTypeList = res.data
+            })
+            taskStatusDictList().then(res => {
+                this.taskStatusDictList = res.data
+            })
+        },
+        //任务细分
+        changeTaskType(id) {
+            taskPartitionList(id).then(res => {
+                this.taskPartitionList = res.data
+            })
+        },
     }
 };
 </script>