bianyaqi
2 years ago
8 changed files with 393 additions and 11 deletions
@ -0,0 +1,323 @@ |
|||||
|
<template> |
||||
|
<div class="electroInfo"> |
||||
|
<!-- 文件上传 --> |
||||
|
<el-upload |
||||
|
class="upload-demo" |
||||
|
drag |
||||
|
:action="uploadUrl" |
||||
|
multiple |
||||
|
:headers="headers" |
||||
|
:show-file-list="false" |
||||
|
:data="uploadData" |
||||
|
:on-success="successFile" |
||||
|
:before-upload="beforeUpload" |
||||
|
> |
||||
|
<i class="el-icon-upload" /> |
||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
||||
|
<div slot="tip" class="el-upload__tip">只能上传PDF文件</div> |
||||
|
</el-upload> |
||||
|
<!-- 节点 --> |
||||
|
<div class="collect_context"> |
||||
|
<el-button v-if="!collectData.length" size="mini" @click="dialogFormVisible = true">新增节点</el-button> |
||||
|
<el-tree |
||||
|
v-else |
||||
|
accordion |
||||
|
:data="collectData" |
||||
|
node-key="id" |
||||
|
highlight-current |
||||
|
:props="defaultProps" |
||||
|
:default-expanded-keys="defaultExpandIds" |
||||
|
@node-expand="handleNodeExpand" |
||||
|
> |
||||
|
<span slot-scope="{ node, data }" class="custom-tree-node" @click="levelClick(data)"> |
||||
|
<span class="treeDefault"> |
||||
|
<span>{{ node.label }}</span> |
||||
|
</span> |
||||
|
<span> |
||||
|
<el-dropdown v-if="!data.patientId" trigger="click" @command="(command)=>addNode(command,node,data)"> |
||||
|
<span :class="{'active':curNode.id===data.id}"> |
||||
|
<i class="el-icon-plus" /> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item command="same">新增同级节点</el-dropdown-item> |
||||
|
<el-dropdown-item command="child">新增子级节点</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
<el-dropdown trigger="click" style="margin-left: 10px" @command="(command)=>handleNode(command,node,data)"> |
||||
|
<span :class="{'active':curNode.id===data.id}">···</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item command="rename">编辑</el-dropdown-item> |
||||
|
<el-dropdown-item command="delete">删除</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</span> |
||||
|
</span> |
||||
|
</el-tree> |
||||
|
<el-dialog :modal-append-to-body="false" width="30%" title="节点名称" :visible.sync="dialogFormVisible"> |
||||
|
<el-input ref="renameRef" v-model="editName" /> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="dialogFormVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" :disabled="disabled" @click="confirmNode()">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
<!-- 文件列表 --> |
||||
|
<el-table center :data="tableData"> |
||||
|
<el-table-column label="文件名" prop="fileName"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.fileName">{{ scope.row.fileName.split('-')[0] }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" align="center" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div> |
||||
|
<span style="color: #ff0000;cursor: pointer" @click="deleteFile(scope.row)">删除</span> |
||||
|
<span style="color: #1890ff;cursor: pointer;margin-left: 8px" @click="goDetail(scope.row)">预览</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ElectronInfo', |
||||
|
data() { |
||||
|
return { |
||||
|
uploadUrl: window.SITE_CONFIG['apiURL'] + '/bd/knowledgeTree/uploadFiles', |
||||
|
uploadData: { |
||||
|
treeId: '' |
||||
|
}, |
||||
|
headers: { |
||||
|
token: window.sessionStorage.getItem('xa-token') |
||||
|
}, |
||||
|
collectData: [], |
||||
|
tableData: [], |
||||
|
dialogFormVisible: false, |
||||
|
defaultProps: { |
||||
|
children: 'childList', |
||||
|
label: 'content' |
||||
|
}, |
||||
|
addParam: { |
||||
|
}, |
||||
|
curNode: '', |
||||
|
editName: '', |
||||
|
changeType: '', |
||||
|
disabled: false, // 用防止多次添加或多次重命名 |
||||
|
defaultExpandIds: [] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
dialogFormVisible(newValue) { |
||||
|
if (newValue) { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.renameRef.focus() |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
collectData(val) { |
||||
|
if (!val.length) { |
||||
|
this.disabled = false |
||||
|
this.addParam.id = '' |
||||
|
this.addParam.pid = 0 |
||||
|
this.editName = '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getTree() |
||||
|
}, |
||||
|
methods: { |
||||
|
getTree() { |
||||
|
this.$http.get('/bd/knowledgeTree/getTree').then(res => { |
||||
|
this.collectData = res.data.data |
||||
|
}) |
||||
|
}, |
||||
|
// 删除文件 |
||||
|
deleteFile(scopeRow) { |
||||
|
this.$confirmFun('你确定要删除吗？') |
||||
|
.then(() => { |
||||
|
this.$http.get('/bd/knowledgeTree/deleteFile', { |
||||
|
params: { |
||||
|
id: scopeRow.id |
||||
|
} |
||||
|
}).then(() => { |
||||
|
this.$message({ |
||||
|
message: '删除成功！', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.queryCurKnowledge(this.curNode.id) |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
// 预览文件 |
||||
|
goDetail(scopeRow) { |
||||
|
window.open(scopeRow.fileUrl, '_blank') |
||||
|
}, |
||||
|
// 上传前做文件格式校验 |
||||
|
beforeUpload(file) { |
||||
|
const extension = file.name.split('.').slice(-1)[0] === 'pdf' |
||||
|
const isLt100M = file.size / 1024 / 1024 > 100 |
||||
|
if (!extension) { |
||||
|
this.$message.warning('上传文件只能是pdf格式!') |
||||
|
} |
||||
|
if (isLt100M) { |
||||
|
this.$message.warning('上传文件大小不能超过 100MB!') |
||||
|
} |
||||
|
return extension && !isLt100M |
||||
|
}, |
||||
|
// 上传成功 |
||||
|
successFile(data) { |
||||
|
if (data.code === 500) { |
||||
|
this.$message.error(data.msg) |
||||
|
} |
||||
|
if (data.code === 0) { |
||||
|
this.$message.success('上传成功!') |
||||
|
this.queryCurKnowledge(this.curNode.id) |
||||
|
} |
||||
|
}, |
||||
|
levelClick(data) { |
||||
|
this.curNode = data |
||||
|
this.remark = data.remark || '' |
||||
|
this.uploadData.treeId = data.id |
||||
|
this.queryCurKnowledge(data.id) |
||||
|
}, |
||||
|
// 获取子节点下的全部文件 |
||||
|
queryCurKnowledge(treeId) { |
||||
|
this.$http.get('/bd/knowledgeTree/getFileListByTreeId', { |
||||
|
params: { |
||||
|
treeId |
||||
|
} |
||||
|
}).then(res => { |
||||
|
this.tableData = res.data.data |
||||
|
}) |
||||
|
}, |
||||
|
// 新增节点 |
||||
|
addNode(command, node, data) { |
||||
|
this.changeType = '新增' |
||||
|
this.editMessage = '添加成功！' |
||||
|
this.disabled = false |
||||
|
switch (command) { |
||||
|
// 新建同级节点 |
||||
|
case 'same': |
||||
|
this.dialogFormVisible = true |
||||
|
this.addParam.pid = data.pid |
||||
|
this.editName = node.name |
||||
|
break |
||||
|
// 新建子级节点 |
||||
|
case 'child': |
||||
|
this.dialogFormVisible = true |
||||
|
this.addParam.pid = data.id |
||||
|
this.editName = node.name |
||||
|
break |
||||
|
// 初始新增 |
||||
|
default: |
||||
|
this.addParam.id = '' |
||||
|
this.addParam.pid = 0 |
||||
|
this.editName = '' |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
// 更多 |
||||
|
handleNode(command, node, data) { |
||||
|
switch (command) { |
||||
|
case 'rename': |
||||
|
this.disabled = false |
||||
|
this.editNode(node, data) |
||||
|
break |
||||
|
case 'delete': |
||||
|
this.deleteNode(data) |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
// 编辑节点 |
||||
|
editNode(node, data) { |
||||
|
this.dialogFormVisible = true |
||||
|
this.editName = node.label |
||||
|
this.editMessage = '重命名成功！' |
||||
|
this.changeType = '修改' |
||||
|
this.addParam.id = data.id |
||||
|
}, |
||||
|
// 节点删除 |
||||
|
deleteNode(data) { |
||||
|
this.$confirmFun('你确定要删除吗？') |
||||
|
.then(() => { |
||||
|
this.$http.get('/bd/knowledgeTree/deleteTree', { |
||||
|
params: { |
||||
|
id: data.id |
||||
|
} |
||||
|
}).then(() => { |
||||
|
this.$message({ |
||||
|
message: '删除成功！', |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.getTree() |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
// 确定新增节点/重命名 |
||||
|
async confirmNode() { |
||||
|
const params = { |
||||
|
doctorId: this.doctorId, |
||||
|
content: this.editName, |
||||
|
...this.addParam |
||||
|
} |
||||
|
this.disabled = true |
||||
|
let url = '' |
||||
|
if (this.changeType === '修改') { |
||||
|
url = 'bd/knowledgeTree/updateTree' |
||||
|
} else { |
||||
|
url = '/bd/knowledgeTree/addTree' |
||||
|
} |
||||
|
await this.$http.post(url, params) |
||||
|
this.$message({ |
||||
|
message: this.editMessage, |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.dialogFormVisible = false |
||||
|
await this.getTree() |
||||
|
}, |
||||
|
// 树节点展开 |
||||
|
handleNodeExpand() { |
||||
|
if (this.defaultExpandIds.indexOf(this.curNode.id) === -1) { |
||||
|
this.defaultExpandIds.push(this.curNode.id) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.el-upload__tip{ |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
.collect_context{ |
||||
|
margin: 10px 0; |
||||
|
font-size: 16px; |
||||
|
color: #000; |
||||
|
} |
||||
|
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ |
||||
|
background-color: #409EFF; |
||||
|
color: #FFFFFF; |
||||
|
span{ |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
.electroInfo{ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.treeDefault{ |
||||
|
display: inline-block; |
||||
|
min-width: 200px; |
||||
|
max-width:500px; |
||||
|
font-size: 16px; |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
::v-deep .custom-tree-node{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,42 @@ |
|||||
|
<template> |
||||
|
<div class="content"> |
||||
|
<el-tabs v-model="activeName"> |
||||
|
<el-tab-pane label="疾病标签" name="first">疾病标签</el-tab-pane> |
||||
|
<el-tab-pane label="电子资料" name="second"> |
||||
|
<electron-info v-if="activeName==='second'" /> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ElectronInfo from '@/components/360View/knowledge/electronInfo.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: 'KnowledgeBase', |
||||
|
components: { ElectronInfo }, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: 'second' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.content{ |
||||
|
width: 650px; |
||||
|
padding: 12px 8px; |
||||
|
} |
||||
|
::v-deep .el-tabs{ |
||||
|
height: 100%; |
||||
|
} |
||||
|
::v-deep .el-tabs__content{ |
||||
|
padding: 10px 0 0 0; |
||||
|
overflow: hidden; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
::v-deep .el-tabs__header{ |
||||
|
margin: 0; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue