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