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.

427 lines
15 KiB

3 years ago
<template>
<!-- 随访记录 -->
<div class="follow-up-record">
<div style="display: flex">
<!-- 随访内容 -->
<div class="content-left">
<div class="buttonBackground">
<el-button type="primary" plain size="small" icon="el-icon-plus" class="addfollow" @click="addFollowHandle">新增随访</el-button>
</div>
<time-line-follow-up ref="timeline" :time-axis-data="timeAxisData" class="time-line" @refreshDataList="childInit" />
</div>
<div class="content-right">
<div class="buttons">
<el-button type="primary" size="small" @click="addOrUpdateHandle(dataForm,'put')">修改</el-button>
<el-button type="danger" size="small" @click="deleteHandle">删除</el-button>
<el-button size="small" @click="printerHandle">打印</el-button>
</div>
</div>
<!-- 没有随访数据 -->
<div v-show="timeAxisData.length <= 0 && loading==false" class="no-follow-up-father">
<div class="no-follow-up">
<img src="@/assets/img/nodata.png" alt="">
<div class="no-follow-up-content">
<p class="title-one">暂无随访记录</p>
<p class="title-two">你可以点击新增记录按钮新增随访记录</p>
<el-button type="primary" icon="el-icon-plus" round @click="addFollowHandle">新增记录</el-button>
</div>
</div>
</div>
</div>
<!-- 新增随访记录 -->
<add-follow-record v-if="followRecordVisible" ref="followRecordRef" @getTimeAxisData="getTimeAxisData('add',$event)" @closeDialog="followRecordVisible=false" />
<!-- 弹窗, 新增 / 修改 -->
<follow-up v-if="followUpVisible" ref="followUp" updata-file="getTimeAxisData" :is-sign="true" :is-close-refresh="isCloseRefresh" @refreshDataList="childInit()" @getTimeAxisData="getTimeAxisData" @closeDialog="followUpVisible=false" />
</div>
</template>
<script>
import eventBus from '@/page-subspecialty/utils/eventBus'
import timeLineFollowUp from '@/components/360View/time-line-follow-up'
import followUp from '@/components/hm-crf/followUp.vue'
import editFullCaseTemplate from '@/components/hm-crf/edit-full-case-template.vue'
import intelligentFull from '@/components/hm-crf/intelligent-full.vue'
import addFollowRecord from './add-follow-record.vue'
import IntelligentFill from '@/mixins/IntelligentFill'
const Base64 = require('js-base64').Base64
export default {
components: {
timeLineFollowUp,
addFollowRecord,
followUp,
editFullCaseTemplate,
intelligentFull
},
mixins: [IntelligentFill],
props: {
patientIdNumber: {
type: String,
default: ''
},
patientCentreId: {
type: String,
default: ''
},
patientId: {
type: String,
default: ''
}
},
inject: ['refresh'],
data() {
return {
visible: true,
timeAxisData: [], // 左侧时间轴数据
followRecordVisible: false,
crfVisible: false,
followUpVisible: false,
editFullCaseTemplateVisible: false,
intelligentFullVisible: false,
jsArr: [],
dataForm: {},
name: '',
formDate: '',
callList: [{
date: '2021--4-12 12:53:21',
recordFile: '',
recordLength: '10:12:12',
flag: 1
}, {
date: '2021--4-12 13:53:21',
recordFile: '',
recordLength: '10:12:12',
flag: 1
}, {
date: '2021--4-12 14:53:21',
recordFile: '',
recordLength: '10:12:12',
flag: 0
}],
followFormList: [],
loading: true,
isCloseRefresh: false
}
},
methods: {
init() {
this.visible = true
this.$nextTick(() => {
this.getTimeAxisData()
// 根据类型获取随访表单列表
this.getFollowFormList()
})
},
// 打印
printerHandle() {
this.$refs.crfComponent.$el.contentWindow.print()
},
// 根据类型获取随访表单列表
async getFollowFormList() {
const { data: res } = await this.$http.get('/crf/template/getListByType/随访')
if (res.code === 0) {
this.followFormList = res.data
} else {
this.$message.error(res.msg)
}
},
// 点击新增随访记录 时间+选择随访表单
addFollowHandle() {
this.followRecordVisible = true
this.isCloseRefresh = true
this.$nextTick(() => {
this.$refs.followRecordRef.followFormList = this.followFormList
this.$refs.followRecordRef.dataForm.patientIdNumber = this.patientIdNumber
this.$refs.followRecordRef.dataForm.patientCentreId = this.patientCentreId
this.$refs.followRecordRef.init()
})
},
// 新增修改填写CRF
addOrUpdateHandle(data, flag) {
this.isCloseRefresh = flag !== 'put'
// console.log(data)
this.$store.commit('destroyPlugin')
if (data.crfDescription === '病历模板') {
this.editFullCaseTemplateVisible = true
this.$nextTick(() => {
this.$refs.editFullCaseTemplateRef.dataForm.id = flag === 'post' ? data.id : data.formId
this.$refs.editFullCaseTemplateRef.dataForm.description = data.crfDescription
this.$refs.editFullCaseTemplateRef.dataForm.patientIdNumber = data.patientIdNumber
this.$refs.editFullCaseTemplateRef.dataForm.patientCentreId = data.patientCentreId
this.$refs.editFullCaseTemplateRef.init()
})
} else if (data.crfDescription === '智能填充') {
this.intelligentFullVisible = true
this.$nextTick(() => {
this.$refs.intelligentFullRef.dataForm.crfId = data.crfId
this.$refs.intelligentFullRef.dataForm.formId = flag === 'post' ? data.id : data.formId
this.$refs.intelligentFullRef.dataForm.isWrite = data.isWrite
this.$refs.intelligentFullRef.init()
})
} else {
this.followUpVisible = true
this.$nextTick(() => {
this.$refs.followUp.dataForm.crfId = data.crfId
this.$refs.followUp.dataForm.formId = flag === 'post' ? data.id : data.formId
this.$refs.followUp.dataForm.isWrite = data.isWrite
this.$refs.followUp.init()
})
}
},
// 显示当前随访表单
childInit(item) {
console.log(item)
item ? this.dataForm = { ...this.dataForm, ...item } : ''
this.crfVisible = false
this.$nextTick(() => {
this.$http.get(`/visit/record/${this.dataForm.formId}`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
if (res.data) {
res.data.formId = res.data.id
delete res.data.id
this.dataForm = { ...this.dataForm, ...res.data }
// console.log(this.dataForm)
this.dataForm.content = Base64.decode(res.data.formContent)
// console.log(this.dataForm)
this.crfVisible = true
console.log(this.dataForm)
this.dataForm.isWrite === 0 && (this.dataForm.crfDescription === '智能填充' || this.dataForm.crfDescription === '病历模板') ? this.getFirstFeedbackData('智能填充', this.dataForm.formId) : this.CRFLoading = false
}
}).catch(() => { })
})
},
// 获取时间轴数据--左侧时间轴
async getTimeAxisData(flag, data, del) {
this.loading = true
const addFromData = data
data ? this.dataForm = data : ''
const { data: res } = await this.$http.get(`/visit/record/${this.patientCentreId}/${this.patientIdNumber}`)
if (res.code === 0) {
if (res.data.length > 0) {
res.data.forEach(item => {
item.active = false
})
this.timeAxisData = res.data
// 刚新增随访添加日期完成后定位当前所在序列位置高亮
data ? this.timeAxisData.forEach((item, index) => {
// console.log('data', data)
// console.log('item', item)
// console.log('this.dataForm', this.dataForm)
if (item.dateStr === this.dataForm.formDate) {
this.$refs.timeline.itemCurrentIndex = index
item.dataList.forEach((iten, itenIndex) => {
if (iten.formId === this.dataForm.id) {
this.$refs.timeline.itemListCurrentIndex = itenIndex
window.sessionStorage.setItem('itemCurrentIndex', index)
window.sessionStorage.setItem('itemListIndex', itenIndex)
}
})
}
}) : ''
// 如果是新增修改调取随访表单弹框
flag === 'add' ? this.addOrUpdateHandle(addFromData, 'post') : ''
// 如果是删除操作设置高亮区域及dataform和随访表单回显
if (del && !flag) {
// 判断当前日期是否还存在
const Isdate = this.timeAxisData.some(item => item.dateStr === this.dataForm.formDate)
// 获取当前所在序列
const itemCurrentIndex = this.$refs.timeline.itemCurrentIndex
const itemListCurrentIndex = this.$refs.timeline.itemListCurrentIndex
// 如果当前日期存在获取当前日期下的随访dataform
if (Isdate) {
const itemListIndex = itemListCurrentIndex == 0 ? 0 : itemListCurrentIndex - 1
this.$refs.timeline.itemListCurrentIndex = itemListIndex
this.dataForm = this.timeAxisData[itemCurrentIndex].dataList[itemListIndex]
window.sessionStorage.setItem('itemCurrentIndex', itemCurrentIndex)
window.sessionStorage.setItem('itemListIndex', itemListIndex)
this.childInit()
} else {
// 如果不存在获取上一日期的第一个序列的随访dataform
const itemIndex = itemCurrentIndex == 0 ? 0 : itemCurrentIndex - 1
this.$refs.timeline.itemCurrentIndex = itemIndex
this.$refs.timeline.itemListCurrentIndex = 0
this.dataForm = this.timeAxisData[itemIndex].dataList[0]
window.sessionStorage.setItem('itemCurrentIndex', itemIndex)
window.sessionStorage.setItem('itemListIndex', 0)
// console.log(123)
this.childInit()
}
} else if (!del && !flag) {
// console.log(123)
const getItemListCurrentIndex = window.sessionStorage.getItem('itemListIndex') ? window.sessionStorage.getItem('itemListIndex') : 0
const getItemCurrentIndex = window.sessionStorage.getItem('itemCurrentIndex') ? window.sessionStorage.getItem('itemCurrentIndex') : 0
// console.log(this.timeAxisData)
this.dataForm = this.timeAxisData[getItemCurrentIndex].dataList[getItemListCurrentIndex]
// console.log(this.dataForm)
this.childInit()
}
} else {
this.dataForm = {}
this.timeAxisData = []
del ? this.$emit('refreshFollow') : ''
}
this.loading = false
} else {
this.$message.error(res.msg)
}
},
// 删除
async deleteHandle() {
this.$confirmFun('你确定要删除此随访记录吗?').then(async() => {
const { data: res } = await this.$http.delete(`/visit/record/${this.dataForm.id}`)
if (res.code === 0) {
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.getTimeAxisData('', '', 'delete')
}
})
} else {
this.$message.error(res.msg)
}
})
},
// 关闭弹框
closeDialog() {
// 调用档案兄弟组件事件
// eventBus.$emit('getArchiveCaseList')
this.$emit('closeDialog', false)
}
}
}
</script>
<style lang="scss" scoped>
.follow-up-record {
width: 100%;
height: 100%;
.no-follow-up-father {
width: 100%;
text-align: center;
margin-top: 10vh;
.title-one {
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
margin-bottom: 8px;
font-weight: 700;
}
.title-two {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
margin-bottom: 8px;
}
}
.follow-up-content {
display: flex;
.content-left {
width: 180px;
.el-button {
width: 90%;
}
.buttonBackground {
background: #fff;
padding-bottom: 20px;
}
}
}
.content-right {
flex: 1;
//overflow:hidden;
//position: relatiave;
//text-align: center;
.buttons {
width: 100%;
//height: 50px;
//line-height: 50px;
//background: rgba(0, 0, 0, 0.5);
//position: absolute;
//top:0;
padding-right: 10px;
text-align: right;
}
.make-call {
position: absolute;
width: 255px;
top: 50px;
right: 10px;
}
.make-call-head,.make-call-record-list {
background: #F4F8FB;
border-radius: 6px;
width: 100%;
}
.make-call-head {
height: 68px;
display: flex;
justify-content: space-between;
padding: 12px;
.patient-info {
text-align: left;
border-right:1px solid #ccc;
padding-right: 12px;
}
.patient-info-head {
display: inline-block;
width:58px;
}
.patient-call {
color: #00820D;
cursor: pointer;
}
}
.make-call-record-list {
margin-top: 16px;
height: calc(88vh - 220px);
overflow-y: auto;
text-align: left;
padding:16px;
.text {
font-weight: 700;
font-size: 16px;
color: #1D2129;
margin-bottom: 16px;
}
.call-list {
margin-bottom: 16px;
}
.call-date {
padding-bottom: 2px;
color: #8E8E8E;
}
.call-file {
margin-left: 10px;
span:nth-child(1) {
padding-right: 10px;
}
span:nth-child(2) {
cursor: pointer;
color: #1e79ff;
}
}
}
}
.content-right-padding {
padding-right: 0;
}
}
</style>
<style lang="scss">
.follow-up-record {
.el-dialog {
height: 88vh;
margin-top: 7vh !important;
}
.microphone-blue {
color: #1e79ff;
}
.call-green {
color: #00820D;
}
}
</style>