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

修改

Browse Source
This commit is contained in:
辉 2024-03-27 15:57:52 +08:00
parent 06f027d57b
commit 372405267e
4 changed files with 135 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

23
src/api/system/specialDiseaseNode.js Normal file
View File

@ -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',
})
}

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

@ -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) {

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

@ -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-option label="出院后" value="item.value">
<el-select v-model="value" style="width:100px" @change="changeTaskType">
<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>