<template>
|
<el-dialog
|
:title="title"
|
:visible.sync="visible"
|
v-loading="loading"
|
width="70%"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="detail-dialog">
|
<div style="margin-bottom: 16px; display: flex; align-items: center">
|
<span style="margin-right: 10px; font-weight: bold">患者姓名查询:</span>
|
<el-input
|
v-model="searchName"
|
placeholder="请输入患者姓名进行筛选"
|
clearable
|
style="width: 300px"
|
@input="handleSearch"
|
@clear="handleSearch"
|
/>
|
<span style="margin-left: 10px; color: rgb(35, 81, 233); font-size: 16px">
|
共 {{ displayList.length }} 条记录
|
</span>
|
</div>
|
|
<div class="examine-jic">
|
<div class="jic-value">
|
<el-row :gutter="20">
|
<div class="data-list" ref="dataList" @scroll="handleScroll" v-loading="loading">
|
<el-table :data="currentDisplayList" height="660" style="width: 100%">
|
<el-table-column prop="sendname" align="center" label="姓名" width="100" />
|
<el-table-column prop="taskName" align="center" width="200" show-overflow-tooltip label="任务名称" />
|
|
<el-table-column prop="sendstate" align="center" width="200" label="任务状态">
|
<template slot-scope="scope">
|
<el-tag
|
:type="getStateTagType(scope.row.sendstate)"
|
:disable-transitions="false"
|
>
|
{{ getStateText(scope.row.sendstate) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="任务执行方式"
|
align="center"
|
key="preachform"
|
prop="preachform"
|
width="160"
|
:show-overflow-tooltip="true"
|
>
|
<template slot-scope="scope">
|
<span v-for="(item, index) in scope.row.preachform" :key="index">
|
{{ item }}{{ index < scope.row.preachform.length - 1 ? '、' : '' }}
|
</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="visitTime"
|
align="center"
|
label="应随访时间"
|
width="200"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
prop="finishtime"
|
align="center"
|
label="随访完成时间"
|
width="200"
|
show-overflow-tooltip
|
/>
|
<el-table-column label="出院日期" width="200" align="center" key="endtime" prop="endtime">
|
<template slot-scope="scope">
|
<span>{{ formatTime(scope.row.endtime) }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="责任护士" width="120" align="center" key="nurseName" prop="nurseName" />
|
<el-table-column label="主治医生" width="120" align="center" key="drname" prop="drname" />
|
|
<el-table-column label="结果状态" align="center" key="excep" prop="excep" width="120">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.sys_yujing" :value="scope.row.excep" />
|
</template>
|
</el-table-column>
|
|
<el-table-column label="处理意见" align="center" key="suggest" prop="suggest" width="120">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.sys_suggest" :value="scope.row.suggest" />
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="templatename" align="center" label="服务模板" width="200" show-overflow-tooltip />
|
<el-table-column prop="remark" align="center" label="服务记录" width="200" show-overflow-tooltip />
|
|
<el-table-column prop="bankcardno" align="center" label="呼叫状态" width="210" />
|
|
<el-table-column label="操作" fixed="right" align="center" width="200" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button size="medium" type="text" @click="handleDetailsGo(scope.row)">
|
<span class="button-zx">
|
<i class="el-icon-s-order"></i>查看
|
</span>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: 'DetailDialog',
|
dicts: ['sys_yujing', 'sys_suggest'],
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
},
|
data: {
|
type: Array,
|
default: () => []
|
},
|
searchName: {
|
type: String,
|
default: ''
|
},
|
loading: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
localSearchName: '',
|
displayList: [],
|
currentDisplayList: [],
|
loadIndex: 0,
|
pageSize: 100,
|
isLoading: false
|
}
|
},
|
watch: {
|
data: {
|
immediate: true,
|
handler(newData) {
|
this.initializeData(newData)
|
}
|
},
|
searchName(newVal) {
|
this.localSearchName = newVal
|
this.handleSearch()
|
}
|
},
|
mounted() {
|
if (this.data && this.data.length > 0) {
|
this.initializeData(this.data)
|
}
|
},
|
methods: {
|
initializeData(data) {
|
this.displayList = [...data]
|
this.formatPreachformData()
|
this.loadIndex = 0
|
this.currentDisplayList = []
|
this.$nextTick(() => {
|
this.loadMoreData()
|
})
|
},
|
|
formatPreachformData() {
|
this.displayList.forEach((item) => {
|
if (item.preachform) {
|
if (item.endtime) {
|
item.preachformson = item.preachform
|
const idArray = item.preachform.split(',')
|
|
item.preachform = idArray.map((value) => {
|
const checkboxlist = this.$store.getters.checkboxlist
|
const foundItem = checkboxlist.find((item) => item.value == value)
|
return foundItem ? foundItem.label : null
|
}).filter(label => label !== null)
|
}
|
}
|
})
|
},
|
|
handleSearch() {
|
if (!this.localSearchName.trim()) {
|
this.displayList = [...this.data]
|
this.formatPreachformData()
|
} else {
|
const keyword = this.localSearchName.toLowerCase()
|
this.displayList = this.data.filter((item) => {
|
return item.sendname && item.sendname.toLowerCase().includes(keyword)
|
})
|
this.formatPreachformData()
|
}
|
|
this.loadIndex = 0
|
this.currentDisplayList = []
|
this.$nextTick(() => {
|
this.loadMoreData()
|
})
|
|
this.$emit('search', this.localSearchName)
|
},
|
|
loadMoreData() {
|
if (this.isLoading || this.loadIndex >= this.displayList.length) return
|
|
this.isLoading = true
|
|
setTimeout(() => {
|
const nextChunk = this.displayList.slice(
|
this.loadIndex,
|
this.loadIndex + this.pageSize
|
)
|
this.currentDisplayList = this.currentDisplayList.concat(nextChunk)
|
this.loadIndex += this.pageSize
|
this.isLoading = false
|
}, 200)
|
},
|
|
handleScroll(event) {
|
const scrollContainer = event.target
|
const isAtBottom =
|
scrollContainer.scrollTop + scrollContainer.clientHeight >=
|
scrollContainer.scrollHeight - 10
|
|
if (
|
isAtBottom &&
|
!this.isLoading &&
|
this.loadIndex < this.displayList.length
|
) {
|
this.loadMoreData()
|
}
|
},
|
|
getStateTagType(state) {
|
const stateMap = {
|
1: 'primary', // 表单已领取
|
2: 'primary', // 待随访
|
3: 'success', // 表单已发送
|
4: 'info', // 不执行
|
5: 'danger', // 发送失败
|
6: 'success' // 已完成
|
}
|
return stateMap[state] || 'info'
|
},
|
|
getStateText(state) {
|
const stateTextMap = {
|
1: '表单已领取',
|
2: '待随访',
|
3: '表单已发送',
|
4: '不执行',
|
5: '发送失败',
|
6: '已完成'
|
}
|
return stateTextMap[state] || '未知状态'
|
},
|
|
formatTime(time) {
|
if (!time) return ''
|
return this.parseTime(time)
|
},
|
|
handleDetailsGo(row) {
|
this.$emit('details-go', row)
|
},
|
|
handleClose() {
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.detail-dialog {
|
.data-list {
|
max-height: 800px;
|
overflow-y: auto;
|
}
|
|
.button-zx {
|
color: rgb(70, 204, 238);
|
}
|
}
|
</style>
|
