You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

823 lines
23 KiB

<template>
<div class="afterBox">
<div v-if="!onlyRead" class="moveIcon">
<p @click="moveAll(1)"><i style="font-size: 20px" class="el-icon-back" /></p>
<p style="margin-top: 5px" @click="moveAll(2)"><i class="el-icon-back" style="transform: rotateY(180deg);font-size: 20px" /></p>
</div>
<div style="display: flex;margin-top: 32px">
<div style="width: 200px;padding-right: 8px;text-align: left;overflow-x: auto">
<p style="font-weight: bold;margin-bottom: 12px;text-align: left">描述项模板</p>
<el-button v-if="!treeCaseList.length && !onlyRead" type="primary" size="small" @click="append(1)">+新增</el-button>
<el-tree
ref="tree"
:data="treeCaseList"
:props="treeProps"
:default-expand-all="true"
:expand-on-click-node="false"
node-key="id"
highlight-current
@node-click="templateData"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span style="display: inline-block;min-width: 80px">
<span>{{ node.label }}</span>
</span>
<span>
<el-button v-if="!data.treeId && !onlyRead" icon="el-icon-plus" style="font-size: 12px;color: #409EFF" type="text" @click.stop="append(2, data)" />
<el-button v-if="!onlyRead" icon="el-icon-delete" style="font-size: 12px;color: #F56C6C" type="text" @click.stop="remove(node, data)" />
</span>
</span>
</el-tree>
</div>
<after-form
ref="afterForm"
:only-read="onlyRead"
:table-data="tableData"
@selection="selection"
@moveHandle="moveHandle"
@handleNode="handleNode"
@addTree="addTree"
@removeTree="removeTree"
/>
</div>
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="40%">
<el-form :model="form" style="margin-top: 16px">
<el-form-item label="名称:" label-width="120px">
<el-input v-model="form.name" auto-complete="off" style="width: 300px" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="handSaveBtn">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="新建模板" :visible.sync="templateFlag" width="40%">
<el-form :model="form" style="margin-top: 16px">
<el-form-item label="名称:" label-width="120px">
<el-input v-model="form.name" auto-complete="off" style="width: 300px" />
</el-form-item>
<el-form-item label="目录:" label-width="120px">
<el-tree
ref="tree"
:data="treeTemplate"
:props="treeProps"
:default-expand-all="true"
:expand-on-click-node="false"
node-key="id"
highlight-current
@node-click="templateNodeClick"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="templateFlag = false">取 消</el-button>
<el-button type="primary" @click="saveTreeTemplete">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import eventBus from '@/page-subspecialty/utils/eventBus'
import treeSelect from '@/components/360View/itemSelect'
import axios from 'axios'
import Cookies from 'js-cookie'
import AfterForm from '@/components/360View/medicalRecord/outPatientRecord/afterForm.vue'
export default {
components: {
AfterForm,
treeSelect
},
mixins: [],
props: {
patientIdNumber: {
type: String,
default: ''
},
patientId: {
type: String,
default: ''
},
isSearch: {
type: String,
default: ''
},
caseId: {
type: String,
default: ''
},
onlyRead: {
type: Boolean,
default: false
}
},
inject: ['refresh'],
data() {
return {
userData: {},
title: '',
addType: '',
sourceData: [],
treeCaseList: [],
treeTemplate: [],
treeProps: {
value: 'id',
label: 'name',
children: 'child'
},
type: '',
doctorId: '',
deleteId: '',
treeFlag: '',
treeId: '',
treeName: '',
weight: '',
parentId: 0,
collectId: '',
form: {
name: ''
},
multipleSelection: [],
templateFlag: false,
dialogFormVisible: false,
tableData: [
{
name: '黄斑'
}, {
name: '黄斑',
sort: 99,
id: 14,
type: 'hangman',
od: '',
os: ''
}, {
name: '视盘'
}, {
name: '视盘',
id: 15,
sort: 3,
type: 'shipman',
od: '',
os: ''
}, {
name: '视盘',
id: 16,
sort: 4,
type: 'shipman',
od: '',
os: ''
}, {
name: '视网膜'
}, {
name: '视网膜',
sort: 99,
id: 17,
type: 'showing',
od: '',
os: ''
}, {
name: '脉络膜'
}, {
name: '脉络膜',
sort: 99,
id: 18,
type: 'mailbomb',
od: '',
os: ''
}, {
name: '玻璃体 vitreous'
}, {
name: '玻璃体 vitreous',
sort: 99,
id: 19,
type: 'blit',
od: '',
os: ''
}, {
name: '血管'
}, {
name: '血管',
sort: 99,
id: 20,
type: 'began',
od: '',
os: ''
}, {
name: '巩膜'
}, {
name: '巩膜',
sort: 99,
id: 21,
type: 'gong',
od: '',
os: ''
}, {
name: '边缘 periphery'
}, {
name: '边缘 periphery',
sort: 99,
id: 22,
type: 'banyan',
od: '',
os: ''
}],
treeList: []
}
},
watch: {
tableData: {
deep: true,
handler: (value) => {
if (value) {
eventBus.$emit('getAfterData', value)
}
}
},
caseId: {
handler: function(newV, oldV) {
this.getforeList().then(() => {
this.queryOptions()
})
}
}
},
created() {
},
mounted() {
this.userData = JSON.parse(window.sessionStorage.getItem('qg-userData'))
this.doctorId = this.userData.id
this.getforeList().then(() => {
this.queryOptions()
})
this.queryTreeCase()
},
methods: {
async getforeList() {
const { data: res } = await this.$http.get('/case/getCaseByCaseId', {
params: {
caseId: this.caseId,
patientId: this.patientId,
platform: this.isSearch,
flag: '3'
}
})
if (res.code === 0) {
if (res.data) {
this.tableData = JSON.parse(res.data.jsonText)
this.collectId = res.data.id
} else {
this.collectId = ''
this.tableData = [
{
name: '黄斑'
}, {
name: '黄斑',
sort: 99,
id: 14,
type: 'hangman',
od: '',
os: ''
}, {
name: '视盘'
}, {
name: '视盘',
id: 15,
sort: 3,
type: 'shipman',
od: '',
os: ''
}, {
name: '视盘',
id: 16,
sort: 4,
type: 'shipman',
od: '',
os: ''
}, {
name: '视网膜'
}, {
name: '视网膜',
sort: 99,
id: 17,
type: 'showing',
od: '',
os: ''
}, {
name: '脉络膜'
}, {
name: '脉络膜',
sort: 99,
id: 18,
type: 'mailbomb',
od: '',
os: ''
}, {
name: '玻璃体 vitreous'
}, {
name: '玻璃体 vitreous',
sort: 99,
id: 19,
type: 'blit',
od: '',
os: ''
}, {
name: '血管'
}, {
name: '血管',
sort: 99,
id: 20,
type: 'began',
od: '',
os: ''
}, {
name: '巩膜'
}, {
name: '巩膜',
sort: 99,
id: 21,
type: 'gong',
od: '',
os: ''
}, {
name: '边缘 periphery'
}, {
name: '边缘 periphery',
sort: 99,
id: 22,
type: 'banyan',
od: '',
os: ''
}]
}
} else {
this.$message.error(res.msg)
}
},
// 表格复选框
selection(value) {
if (!value.val.id) {
const data = this.tableData.filter(item => item.name === value.val.name)
if (value.val.flag) {
data.forEach(row => {
row.flag = false
this.$refs.afterForm.$refs.multipleTable.toggleRowSelection(row, false)
})
} else {
data.forEach(row => {
row.flag = true
this.$refs.afterForm.$refs.multipleTable.toggleRowSelection(row, true)
})
}
} else {
const data = this.tableData.filter(item => item.id === value.val.id)
if (value.val.flag) {
data.forEach(row => {
row.flag = false
})
} else {
data.forEach(row => {
row.flag = true
})
}
}
},
// 保留下拉框的label,添加到数据集用于展示
handleNode(val) {
if (val.type === 'os') {
this.tableData[val.index].osValue = val.event
} else {
this.tableData[val.index].odValue = val.event
}
},
// 添加数据集
addAfterData() {
const selectData = this.tableData.filter(item => item.flag === true)
if (!selectData.length) return this.$message.warning('请勾选数据!')
const data = selectData.filter(item => {
return item.type !== undefined
})
eventBus.$emit('sendForData', data)
},
// 获取下拉选择项,把数据封装进表格中
queryOptions() {
const treeList = []
this.tableData.forEach(item => {
item.flag = false
if (item.type) {
const p = this.queryTree(item.type)
treeList.push(p)
}
})
Promise.all(treeList).then((result) => {
if (result.length) {
result.forEach(item => {
item.forEach(row => {
this.tableData.forEach(e => {
if (e.type === row.type) {
e.data = item
const sort = e.sort
if (sort === 3 || sort === 4 || sort === 99) {
e.sort = ''
this.$nextTick(() => {
e.sort = sort
})
}
}
})
})
})
}
this.sourceData = Object.assign([], this.tableData)
eventBus.$emit('getAfterData', this.tableData)
}).catch((error) => {
console.log(error)
})
},
// 全部移动
moveAll(type) {
if (type === 1) {
this.tableData.forEach(item => {
if (item.sort) {
item.od = item.os
item.odValue = item.osValue
const sort = item.sort
item.sort = ''
this.$nextTick(() => {
item.sort = sort
})
}
})
} else {
this.tableData.forEach(item => {
if (item.sort) {
item.os = item.od
item.osValue = item.odValue
const sort = item.sort
item.sort = ''
this.$nextTick(() => {
item.sort = sort
})
}
})
}
},
// 移动
moveHandle(val) {
if (val.row.id) {
if (val.type === 1) {
this.tableData[val.index].od = val.row.os
this.tableData[val.index].odValue = val.row.osValue
} else {
this.tableData[val.index].os = val.row.od
this.tableData[val.index].osValue = val.row.odValue
}
const sort = this.tableData[val.index].sort
this.tableData[val.index].sort = ''
this.$nextTick(() => {
this.tableData[val.index].sort = sort
})
} else {
if (val.type === 1) {
this.tableData.forEach(item => {
if (item.name === val.row.name) {
item.od = item.os
item.odValue = item.osValue
const sort = item.sort
item.sort = ''
this.$nextTick(() => {
item.sort = sort
})
}
})
} else {
this.tableData.forEach(item => {
if (item.name === val.row.name) {
item.os = item.od
item.osValue = item.odValue
const sort = item.sort
item.sort = ''
this.$nextTick(() => {
item.sort = sort
})
}
})
}
}
},
// 保存后段检查
async saveAfter() {
const params = {
caseId: this.caseId,
flag: '3', // 1病史采集2前段检查3后段检查4专科检查
jsonText: JSON.stringify(this.tableData),
name: '后段检查',
patientId: this.patientId,
platform: this.isSearch
}
let url = ''
if (this.collectId) {
url = '/case/update'
params.id = this.collectId
} else {
url = '/case/save'
}
const { data: res } = await this.$http.post(url, params)
if (res.code === 0) {
await this.getforeList()
} else {
this.$message.error(res.msg)
}
},
handSaveBtn() {
if (this.addType === 1) {
this.handleSaveTree()
} else {
this.handleSaveCase()
}
},
// 新增树
addTree(val) {
this.title = '新增子级'
this.addType = 1
this.form.name = ''
this.type = val.event.type
this.parentId = val.event.id
this.treeFlag = val.event.flag
this.dialogFormVisible = true
},
// 新增保存树-眼睛部位下拉选择
async handleSaveTree() {
const params = {
doctorId: this.doctorId,
name: this.form.name,
flag: this.treeFlag, // 1公共树,2个人树
type: this.type,
parentId: this.parentId,
platform: this.isSearch
}
const { data: res } = await this.$http.post('/treetag/addTree', params)
if (res.code === 0) {
this.dialogFormVisible = false
this.updataList()
this.$message.success('保存成功')
} else {
this.$message.error(res.msg)
}
},
// 删除树
removeTree(item) {
this.type = item.type
this.deleteId = item.id
this.$confirm('确定删除该节点?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.handleRemove()
}).catch(() => {
})
},
async handleRemove() {
const params = {
id: this.deleteId
}
const { data: res } = await this.$http.post('/treetag/deleteTree', params)
if (res.code === 0) {
this.$message.success('删除成功')
this.updataList()
} else {
this.$message.error(res.msg)
}
},
// 刷新下拉树
updataList() {
this.queryTree(this.type).then((res) => {
this.tableData.forEach(item => {
if (item.type === this.type) {
const sort = item.sort
item.sort = ''
this.$nextTick(() => {
item.sort = sort
})
item.data = res
}
})
})
},
queryTree(type) {
const baseUrl = process.env.VUE_APP_LOGIN_URL + '/treetag/findTree'
return new Promise((resolve, reject) => {
axios.defaults.headers.common['token'] = window.sessionStorage.getItem('xa-token') || ''
axios.get(baseUrl, {
params: {
doctorId: this.doctorId,
type: type,
platform: this.isSearch
}
}).then(res => {
if (res.data.code === 0) {
const data = res.data
resolve(data.data)
}
})
.catch(error => {
reject(error)
})
})
},
// 点击左侧模板数据覆盖表格内容
templateData(data, node) {
if (data && data.caseJson) {
this.tableData = JSON.parse(data.caseJson)
// 回显表格复选框
this.$nextTick(() => {
this.tableData.forEach(item => {
if (item.flag) {
this.$refs.multipleTable.toggleRowSelection(item, true)
}
})
})
} else {
this.tableData = Object.assign([], this.sourceData)
}
},
// 点击保存模板后弹框
handleTemplate() {
this.dataForm.idList = []
this.tableData.forEach(item => {
if (item.flag && item.id) {
this.dataForm.idList.push(item.id)
}
})
if (!this.dataForm.idList.length) return this.$message.warning('请选择检查项!')
this.form.name = ''
this.queryTemplate()
this.templateFlag = true
},
// 保存模板时选择树节点
templateNodeClick(node) {
this.treeId = node.id
},
// 保存模板树
async saveTreeTemplete() {
if (!this.treeId) return this.$message.warning('请选择节点!')
const params = {
caseJson: JSON.stringify(this.tableData),
doctorId: this.doctorId,
name: this.form.name,
type: 3, // 2前段检查 3后段检查
treeId: this.treeId
}
const { data: res } = await this.$http.post('/treetemplate/addTreeCase', params)
if (res.code === 0) {
this.templateFlag = false
await this.queryTreeCase()
this.$message.success('保存成功')
} else {
this.$message.error(res.msg)
}
},
// 新增左侧描述项树弹框
append(type, data) {
this.addType = 2
this.form.name = ''
type === 1 ? this.title = '新增父级' : this.title = '新增子级'
type === 1 ? this.parentId = 0 : this.parentId = data.id
this.dialogFormVisible = true
},
// 左侧描述项树新增
async handleSaveCase() {
const params = {
doctorId: this.doctorId,
name: this.form.name,
weight: this.weight,
parentId: this.parentId,
platform: this.isSearch
}
const { data: res } = await this.$http.post('/treetemplate/addTree', params)
if (res.code === 0) {
this.dialogFormVisible = false
this.queryTreeCase()
this.$message.success('保存成功')
} else {
this.$message.error(res.msg)
}
},
// 删除左侧树/模板节点弹框
remove(node, data) {
this.deleteId = data.id
let url = ''
if (data.type) {
// 模板节点
url = '/treetemplate/deleteTreeCase'
} else {
// 树节点
url = '/treetemplate/deleteTree'
}
this.$confirm('确定删除该节点?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.removeTemplate(url)
}).catch(() => {
})
},
// 删除左侧树/模板节点
async removeTemplate(url) {
const params = {
id: this.deleteId
}
const { data: res } = await this.$http.post(url, params)
if (res.code === 0) {
this.$message.success('删除成功')
await this.queryTreeCase()
await this.getforeList('3')
} else {
this.$message.error(res.msg)
}
},
// 查询弹框模板树
async queryTemplate() {
const { data: res } = await this.$http.get('/treetemplate/findTree', {
params: {
platform: this.isSearch,
doctorId: this.doctorId
}
})
if (res.code === 0) {
this.treeTemplate = res.data
} else {
this.$message.error(res.msg)
}
},
// 使用递归遍历树,合并模板节点和child节点
fn(data) {
data.forEach((item, i) => {
if (item.list && item.list.length) {
item.child = item.child.concat(item.list)
// 调用递归函数
}
if (item.child) {
this.fn(item.child)
}
})
return data
},
// 查询左侧病历树
async queryTreeCase() {
const { data: res } = await this.$http.get('/treetemplate/findTreeCase', {
params: {
type: 3, // 2前段检查 3后段检查
platform: this.isSearch,
doctorId: this.doctorId
}
})
if (res.code === 0) {
this.treeCaseList = this.fn(res.data)
} else {
this.$message.error(res.msg)
}
}
}
}
</script>
<style lang="scss" scoped>
.afterBox{
width: 100%;
height: 100%;
//padding: 16px;
box-sizing: border-box;
overflow-y: auto;
position: relative;
.btnBox{
position: fixed;
right: 84px;
text-align: right;
margin-right: 16px;
background-color: white;
z-index: 999;
}
.moveIcon{
position: absolute;
left: calc(50% + 112px);
top: 40px;
z-index: 9;
}
.custom-tree-node{
width: 100%;
}
}
</style>
<style lang="scss">
.afterBox{
.el-form-item__content{
text-align: left;
}
.el-tree-node>.el-tree-node__children{
overflow-x: auto;
}
}
</style>