<template>
|
<el-dialog
|
:title="title"
|
:visible.sync="visible"
|
width="70%"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="propaganda-detail-dialog">
|
<!-- 搜索栏 -->
|
<div class="search-bar">
|
<span class="search-label">患者姓名查询:</span>
|
<el-input
|
v-model="localSearchName"
|
placeholder="请输入患者姓名进行筛选"
|
clearable
|
style="width: 300px"
|
@input="handleSearch"
|
@clear="handleSearch"
|
/>
|
<span class="record-count">
|
共 {{ displayList.length }} 条记录
|
</span>
|
</div>
|
|
<!-- 数据表格 -->
|
<div class="table-wrap" ref="tableWrap" @scroll="handleScroll">
|
<el-table
|
:data="currentDisplayList"
|
height="560"
|
style="width: 100%"
|
v-loading="loading"
|
>
|
<el-table-column
|
prop="sendname"
|
align="center"
|
label="患者姓名"
|
width="100"
|
/>
|
<el-table-column
|
prop="telcode"
|
align="center"
|
label="联系电话"
|
width="120"
|
/>
|
<el-table-column
|
prop="preachcontent"
|
align="center"
|
label="宣教标题"
|
min-width="200"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
prop="deptname"
|
align="center"
|
label="科室"
|
width="120"
|
/>
|
<el-table-column
|
prop="leavehospitaldistrictname"
|
align="center"
|
label="病区"
|
width="120"
|
/>
|
<el-table-column
|
prop="sendTime"
|
align="center"
|
label="发送时间"
|
width="160"
|
>
|
<template slot-scope="scope">
|
<span>{{ formatTime(scope.row.sendTime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="readTime"
|
align="center"
|
label="阅读时间"
|
width="160"
|
>
|
<template slot-scope="scope">
|
<span>{{ formatTime(scope.row.readTime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="sendState"
|
align="center"
|
label="发送状态"
|
width="100"
|
>
|
<template slot-scope="scope">
|
<el-tag
|
:type="getSendStateType(scope.row.sendState)"
|
:disable-transitions="false"
|
>
|
{{ getSendStateText(scope.row.sendState) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="isRead"
|
align="center"
|
label="阅读状态"
|
width="100"
|
>
|
<template slot-scope="scope">
|
<el-tag
|
:type="scope.row.isRead == 1 ? 'success' : 'info'"
|
:disable-transitions="false"
|
>
|
{{ scope.row.isRead == 1 ? '已读' : '未读' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "PropagandaDetailDialog",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
title: {
|
type: String,
|
default: "",
|
},
|
data: {
|
type: Array,
|
default: () => [],
|
},
|
loading: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
localSearchName: "",
|
displayList: [],
|
currentDisplayList: [],
|
loadIndex: 0,
|
pageSize: 100,
|
isLoading: false,
|
};
|
},
|
watch: {
|
data: {
|
immediate: true,
|
handler(newData) {
|
if (newData && newData.length > 0) {
|
this.initializeData(newData);
|
} else {
|
this.displayList = [];
|
this.currentDisplayList = [];
|
this.loadIndex = 0;
|
}
|
},
|
},
|
},
|
methods: {
|
initializeData(data) {
|
this.displayList = [...data];
|
this.loadIndex = 0;
|
this.currentDisplayList = [];
|
this.$nextTick(() => {
|
this.loadMoreData();
|
});
|
},
|
|
handleSearch() {
|
if (!this.localSearchName.trim()) {
|
this.displayList = [...this.data];
|
} else {
|
const keyword = this.localSearchName.toLowerCase();
|
this.displayList = this.data.filter((item) => {
|
return item.sendname && item.sendname.toLowerCase().includes(keyword);
|
});
|
}
|
this.loadIndex = 0;
|
this.currentDisplayList = [];
|
this.$nextTick(() => {
|
this.loadMoreData();
|
});
|
},
|
|
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;
|
}, 100);
|
},
|
|
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();
|
}
|
},
|
|
getSendStateType(state) {
|
const map = {
|
1: "success",
|
2: "danger",
|
0: "info",
|
};
|
return map[state] || "info";
|
},
|
|
getSendStateText(state) {
|
const map = {
|
1: "发送成功",
|
2: "发送失败",
|
0: "未发送",
|
};
|
return map[state] || "未知";
|
},
|
|
formatTime(time) {
|
if (!time) return "-";
|
return this.parseTime ? this.parseTime(time) : time;
|
},
|
|
handleClose() {
|
this.localSearchName = "";
|
this.$emit("close");
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.propaganda-detail-dialog {
|
.search-bar {
|
margin-bottom: 16px;
|
display: flex;
|
align-items: center;
|
.search-label {
|
margin-right: 10px;
|
font-weight: bold;
|
}
|
.record-count {
|
margin-left: 10px;
|
color: #2351e9;
|
font-size: 16px;
|
}
|
}
|
|
.table-wrap {
|
max-height: 600px;
|
overflow-y: auto;
|
}
|
}
|
</style>
|
