newPeter7
2 years ago
13 changed files with 1370 additions and 227 deletions
@ -0,0 +1,753 @@ |
|||
<template> |
|||
<div class="afterBox"> |
|||
<div class="moveIcon" v-if="!onlyRead"> |
|||
<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 |
|||
:only-read="onlyRead" |
|||
ref="afterForm" |
|||
:data-form="dataForm" |
|||
: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-copy.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, |
|||
dataForm: { |
|||
id: '', |
|||
caseId: '', |
|||
patientId: '', |
|||
bltOd: '', // 玻璃体 vitreous |
|||
bltOs: '', // 玻璃体 vitreous |
|||
byOd: '', // 边缘 periphery |
|||
byOs: '', // 边缘 periphery |
|||
hbOd: '', // 黄斑 |
|||
hbOs: '', // 黄斑 |
|||
hmOd: '', // 巩膜 |
|||
hmOs: '', // 巩膜 |
|||
mlmOd: '', // 脉络膜 |
|||
mlmOs: '', // 脉络膜 |
|||
spCrdOd: '', // 视盘：CDR |
|||
spCrdOs: '', // 视盘：CDR |
|||
spSsjOd: '', // 视盘：视神经 |
|||
spSsjOs: '', // 视盘：视神经 |
|||
swmOd: '', // 视网膜 |
|||
swmOs: '', // 视网膜 |
|||
xgOd: '', // 血管 |
|||
xgOs: '' // 血管 |
|||
}, |
|||
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.localStorage.getItem('qg-userData')) |
|||
this.doctorId = this.userData.id |
|||
this.queryOptions() |
|||
this.getforeList() |
|||
this.queryTreeCase() |
|||
}, |
|||
methods: { |
|||
async getforeList() { |
|||
const { data: res } = await this.$http.get('/mjz/getMjzHdjcInfo', { |
|||
params: { |
|||
caseId: this.caseId, |
|||
patientId: this.patientId |
|||
} |
|||
}) |
|||
if (res.code === 0) { |
|||
if (res.data) { |
|||
this.dataForm = res.data |
|||
this.handleData(this.dataForm) |
|||
} |
|||
} else { |
|||
this.$message.error(res.msg) |
|||
} |
|||
}, |
|||
handleData(data) { |
|||
for (const aKey in data) { |
|||
if (aKey !== 'caseId' && aKey !== 'id' && aKey !== 'patientId') { |
|||
if (data[aKey]) { |
|||
data[aKey] = data[aKey].split(',') |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
// 表格复选框 |
|||
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() { |
|||
for (const resKey in this.dataForm) { |
|||
if (Array.isArray(this.dataForm[resKey])) { |
|||
this.dataForm[resKey] = this.dataForm[resKey].join(',') |
|||
} |
|||
} |
|||
const { data: res } = await this.$http.post('/mjz/saveMjzHdjc', this.dataForm) |
|||
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 = window.SITE_CONFIG['apiURL'] + '/treetag/findTree' |
|||
return new Promise((resolve, reject) => { |
|||
axios.defaults.headers.common['token'] = Cookies.get('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.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> |
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<el-table |
|||
id="foreCheck" |
|||
ref="multipleTable" |
|||
:data="tableData" |
|||
style="margin: 8px 8px 0 0" |
|||
@select="selection" |
|||
> |
|||
<el-table-column |
|||
type="selection" |
|||
width="55" |
|||
/> |
|||
<el-table-column |
|||
align="center" |
|||
label="OD" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div> |
|||
<span v-if="scope.row.name === '黄斑' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.hbOd" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '视网膜' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.swmOd" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '脉络膜' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.mlmOd" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '玻璃体 vitreous' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.bltOd" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '血管' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.xgOd" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '巩膜' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.hmOd" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '边缘 periphery' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.byOd" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="!scope.row.sort && !scope.row.id">{{ scope.row.name }}</span> |
|||
<span v-if="scope.row.sort === 3"> |
|||
<p style="margin:0 16px 6px 0">视盘：视神经</p> |
|||
<treeSelect v-model="dataForm.spSsjOd" :props="treeProps" style="display: inline-block;" :options="scope.row.data" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" /> |
|||
</span> |
|||
<span v-if="scope.row.sort === 4"> |
|||
<span style="margin:0 16px 6px 0">视盘：CDR</span> |
|||
<treeSelect v-model="dataForm.spCrdOd" :props="treeProps" style="display: inline-block;" :options="scope.row.data" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'od', $event)" @add="addTree(scope.row, $event)" /> |
|||
</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
class="move" |
|||
align="center" |
|||
width="120" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div v-if="!isPrint && !onlyRead"> |
|||
<p @click="moveHandle(scope.$index,1, scope.row)"><i style="font-size: 20px" class="el-icon-back" /></p> |
|||
<p style="margin-top: 5px" @click="moveHandle(scope.$index,2, scope.row)"><i class="el-icon-back" style="transform: rotateY(180deg);font-size: 20px" /></p> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
label="OS" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div> |
|||
<span v-if="scope.row.name === '黄斑' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.hbOs" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '视网膜' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.swmOs" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '脉络膜' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.mlmOs" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '玻璃体 vitreous' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.bltOs" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '血管' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.xgOs" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '巩膜' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.hmOs" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
<span v-if="scope.row.name === '边缘 periphery' && scope.row.id"> |
|||
<treeSelect v-model="dataForm.byOs" :options="scope.row.data" :props="treeProps" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" @remove="removeTree" /> |
|||
</span> |
|||
|
|||
<span v-if="!scope.row.sort && !scope.row.id">{{ scope.row.name }}</span> |
|||
<span v-if="scope.row.sort === 3"> |
|||
<span style="margin:0 16px 6px 0">视盘：视神经</span> |
|||
<treeSelect v-model="dataForm.spSsjOs" :props="treeProps" style="display: inline-block;" :options="scope.row.data" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" /> |
|||
</span> |
|||
<span v-if="scope.row.sort === 4"> |
|||
<span style="margin:0 16px 6px 0">视盘：CDR</span> |
|||
<treeSelect v-model="dataForm.spCrdOs" :props="treeProps" style="display: inline-block;" :options="scope.row.data" :multiple="true" :filterable="true" :check-strictly="true" :default-expand-all="true" @handleNode="handleNode(scope.$index,'os', $event)" @add="addTree(scope.row, $event)" /> |
|||
</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
|
|||
<script> |
|||
import treeSelect from '@/components/360View/itemSelect' |
|||
export default { |
|||
name: 'AfterForm', |
|||
components: { |
|||
treeSelect |
|||
}, |
|||
props: ['tableData', 'dataForm', 'isPrint', 'onlyRead'], |
|||
data() { |
|||
return { |
|||
treeProps: { |
|||
value: 'id', |
|||
label: 'name', |
|||
children: 'child' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
console.log(this.tableData) |
|||
console.log(this.dataForm) |
|||
}, |
|||
methods: { |
|||
moveHandle(index, type, row) { |
|||
this.$emit('moveHandle', { index, type, row }) |
|||
}, |
|||
handleNode(index, type, event) { |
|||
this.$emit('handleNode', { index, type, event }) |
|||
}, |
|||
addTree(item, event) { |
|||
this.$emit('addTree', { item, event }) |
|||
}, |
|||
removeTree(item) { |
|||
this.$emit('removeTree', item) |
|||
}, |
|||
selection(selection, val) { |
|||
this.$emit('selection', { selection, val }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue