<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="telcode"
|
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", // 已完成
|
7: "danger", // 超时
|
};
|
return stateMap[state] || "info";
|
},
|
|
getStateText(state) {
|
const stateTextMap = {
|
1: "表单已领取",
|
2: "待随访",
|
3: "表单已发送",
|
4: "不执行",
|
5: "发送失败",
|
6: "已完成",
|
7: "超时",
|
};
|
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>
|
