<!-- 案例全景 -->
|
<template>
|
<div class="app-container">
|
<el-form
|
class="opo-query-form"
|
:model="queryParams"
|
ref="queryForm"
|
:inline="true"
|
v-show="showSearch"
|
label-width="65px"
|
>
|
<el-row :gutter="0">
|
<el-col :span="5">
|
<el-form-item label="捐献者" prop="donorName">
|
<el-input
|
v-model="queryParams.donorName"
|
placeholder="请输入捐献者姓名"
|
clearable
|
size="small"
|
style="width: 140px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="捐献日期">
|
<el-date-picker
|
v-model="dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
style="width: 250px"
|
@change="handleDateChange"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="业务组" prop="deptName">
|
<el-select
|
v-model="queryParams.deptName"
|
placeholder="请选择业务组"
|
clearable
|
filterable
|
style="width: 140px"
|
>
|
<el-option
|
v-for="item in deptOptions"
|
:key="item"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="人员" prop="reporterName">
|
<el-input
|
v-model="queryParams.reporterName"
|
placeholder="请输入业务姓名"
|
clearable
|
size="small"
|
style="width: 140px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="mini"
|
@click="handleQuery"
|
>搜索</el-button
|
>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
>重置</el-button
|
>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="warning"
|
plain
|
icon="el-icon-download"
|
size="mini"
|
:loading="exportLoading"
|
@click="handleExport"
|
>导出</el-button
|
>
|
</el-col>
|
<right-toolbar
|
:showSearch.sync="showSearch"
|
@queryTable="getList"
|
></right-toolbar>
|
</el-row>
|
|
<el-table
|
v-loading="loading"
|
:data="caseList"
|
border
|
class="table-bordered"
|
max-height="700"
|
highlight-current-row
|
:summary-method="getSummaries"
|
show-summary
|
style="width: 100%"
|
>
|
<el-table-column type="index" label="序号" width="55" align="center" fixed="left" />
|
<el-table-column label="捐献者姓名" prop="donorName" width="110" align="center" fixed="left" show-overflow-tooltip />
|
<el-table-column label="捐献日期" prop="donateTime" width="110" align="center" fixed="left" />
|
<el-table-column label="上报日期" prop="reportTime" width="110" align="center" fixed="left" />
|
<el-table-column label="业务组" prop="deptName" width="130" align="center" show-overflow-tooltip />
|
<el-table-column label="业务人员" prop="reporterName" width="110" align="center" show-overflow-tooltip />
|
<el-table-column label="案例终止" prop="terminationFlag" width="90" align="center" />
|
<el-table-column label="当前状态" prop="workflow" width="120" align="center">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.sys_donornode" :value="scope.row.workflow" />
|
</template>
|
</el-table-column>
|
<el-table-column label="捐献医院" prop="donationHospital" width="200" align="center" show-overflow-tooltip />
|
|
<el-table-column label="捐献器官" prop="organName" width="120" align="left">
|
<template slot-scope="scope">
|
<div class="organ-cell" v-html="formatOrganName(scope.row.organName)"></div>
|
</template>
|
</el-table-column>
|
<el-table-column label="获取器官" prop="organProcurement" width="120" align="center">
|
<template slot-scope="scope">
|
<div class="organ-cell" v-html="highlightOrgan(scope.row.organProcurement)"></div>
|
</template>
|
</el-table-column>
|
<el-table-column label="移植器官" prop="organTransplantation" width="120" align="center">
|
<template slot-scope="scope">
|
<div class="organ-cell" v-html="highlightOrgan(scope.row.organTransplantation)"></div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="成本合计" prop="totalCost" width="130" align="right" :formatter="amountFormatter" />
|
<el-table-column label="家属费用" prop="donorFamilyCost" width="120" align="right" :formatter="amountFormatter" />
|
<el-table-column label="医学成本小计" prop="medCost" width="130" align="right" :formatter="amountFormatter" />
|
<el-table-column label="专家成本小计" prop="expertCost" width="130" align="right" :formatter="amountFormatter" />
|
<el-table-column label="其他成本小计" prop="itemCode34" width="130" align="right" :formatter="amountFormatter" />
|
<el-table-column label="手术室使用费" prop="itemCode42" width="120" align="right" :formatter="amountFormatter" />
|
<el-table-column label="器官保存灌注" prop="itemCode46" width="120" align="right" :formatter="amountFormatter" />
|
<el-table-column label="器官保存设备" prop="itemCode50" width="120" align="right" :formatter="amountFormatter" />
|
<el-table-column label="肝脏三维重建" prop="itemCode44" width="120" align="right" :formatter="amountFormatter" />
|
<el-table-column label="病理穿刺活检" prop="itemCode47" width="120" align="right" :formatter="amountFormatter" />
|
<el-table-column label="HLA配型" prop="itemCode48" width="110" align="right" :formatter="amountFormatter" />
|
<el-table-column label="留存标本成本" prop="itemCode21" width="120" align="right" :formatter="amountFormatter" />
|
<el-table-column label="标本运输费" prop="itemCode12" width="110" align="right" :formatter="amountFormatter" />
|
<el-table-column label="转运车费" prop="itemCode17" width="110" align="right" :formatter="amountFormatter" />
|
<el-table-column label="遗体运输" prop="itemCode23" width="110" align="right" :formatter="amountFormatter" />
|
<el-table-column label="尸检" prop="itemCode25" width="90" align="right" :formatter="amountFormatter" />
|
</el-table>
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
listCasePanorama,
|
exportCasePanorama,
|
getCasePanoramaDeptOptions
|
} from "@/api/project/casePanorama";
|
|
export default {
|
name: "CasePanorama",
|
dicts: ["sys_donornode"],
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 导出遮罩层
|
exportLoading: false,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 案例全景数据
|
caseList: [],
|
// 业务组选项
|
deptOptions: [],
|
// 案例时间范围
|
dateRange: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 20,
|
donorName: null,
|
donateTimeBegin: null,
|
donateTimeEnd: null,
|
deptName: null,
|
reporterName: null
|
}
|
};
|
},
|
created() {
|
this.getDeptOptions();
|
this.getList();
|
},
|
methods: {
|
/** 查询案例全景 */
|
getList() {
|
this.loading = true;
|
listCasePanorama(this.queryParams)
|
.then(res => {
|
this.caseList = res.rows;
|
this.total = res.total;
|
this.loading = false;
|
})
|
.catch(() => {
|
this.loading = false;
|
});
|
},
|
/** 业务组选项 */
|
getDeptOptions() {
|
getCasePanoramaDeptOptions().then(res => {
|
this.deptOptions = res.data || [];
|
});
|
},
|
/** 案例时间范围变化 */
|
handleDateChange(val) {
|
if (val && val.length === 2) {
|
this.queryParams.donateTimeBegin = val[0];
|
this.queryParams.donateTimeEnd = val[1];
|
} else {
|
this.queryParams.donateTimeBegin = null;
|
this.queryParams.donateTimeEnd = null;
|
}
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.dateRange = [];
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 20,
|
donorName: null,
|
donateTimeBegin: null,
|
donateTimeEnd: null,
|
deptName: null,
|
reporterName: null
|
};
|
this.resetForm("queryForm");
|
this.getList();
|
},
|
/** 捐献器官：按器官逐个换行显示 */
|
formatOrganName(text) {
|
if (!text) {
|
return "";
|
}
|
const escaped = String(text)
|
.replace(/&/g, "&")
|
.replace(/</g, "<")
|
.replace(/>/g, ">");
|
return escaped
|
.split(/[,，、\n]/)
|
.map(item => item.trim())
|
.filter(item => item)
|
.join("<br/>");
|
},
|
/** 器官获取/移植：填纳、弃用标红；保留换行 */
|
highlightOrgan(text) {
|
if (!text) {
|
return "";
|
}
|
const escaped = String(text)
|
.replace(/&/g, "&")
|
.replace(/</g, "<")
|
.replace(/>/g, ">")
|
.replace(/\n/g, "<br/>");
|
return escaped
|
.replace(/\(填纳\)/g, '<span style="color:#F56C6C">(填纳)</span>')
|
.replace(/\(弃用\)/g, '<span style="color:#F56C6C">(弃用)</span>');
|
},
|
/** 金额显示：保留两位小数，0 显示为空 */
|
formatAmount(value) {
|
if (value === null || value === undefined || value === "") {
|
return "";
|
}
|
const num = Number(value);
|
if (!Number.isFinite(num) || num === 0) {
|
return "";
|
}
|
return num.toFixed(2);
|
},
|
amountFormatter(row, column, cellValue) {
|
return this.formatAmount(cellValue);
|
},
|
/** 费用列合计 */
|
getSummaries(param) {
|
const { columns, data } = param;
|
const sums = [];
|
const textColumns = [
|
"donorName",
|
"reportTime",
|
"deptName",
|
"reporterName",
|
"terminationFlag",
|
"workflow",
|
"donateTime",
|
"donationHospital",
|
"organName",
|
"organProcurement",
|
"organTransplantation"
|
];
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = "合计";
|
return;
|
}
|
if (textColumns.indexOf(column.property) > -1) {
|
return;
|
}
|
const total = data.reduce(
|
(prev, item) => prev + (Number(item[column.property]) || 0),
|
0
|
);
|
sums[index] = total === 0 ? "" : Number(total).toFixed(2);
|
});
|
return sums;
|
},
|
/** 导出按钮操作 */
|
handleExport() {
|
const queryParams = { ...this.queryParams };
|
delete queryParams.pageNum;
|
delete queryParams.pageSize;
|
this.$modal
|
.confirm("是否确认导出当前筛选条件下的案例全景数据？")
|
.then(() => {
|
this.exportLoading = true;
|
return exportCasePanorama(queryParams);
|
})
|
.then(response => {
|
this.$download.name(response.msg);
|
this.exportLoading = false;
|
})
|
.catch(() => {
|
this.exportLoading = false;
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.opo-query-form ::v-deep .el-form-item {
|
margin-right: 8px;
|
margin-bottom: 0;
|
}
|
.organ-cell {
|
white-space: normal;
|
line-height: 1.4;
|
text-align: left;
|
word-break: break-all;
|
}
|
</style>
|
