<template>
|
<div class="app-container">
|
<!-- 搜索筛选区域 -->
|
<el-card class="filter-card">
|
<el-form
|
:model="queryParams"
|
ref="queryForm"
|
:inline="true"
|
class="demo-form-inline"
|
>
|
<el-form-item label="捐献编号" prop="donorNo">
|
<el-input
|
v-model="queryParams.donorNo"
|
placeholder="请输入捐献编号"
|
clearable
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item label="捐献者姓名" prop="donorName">
|
<el-input
|
v-model="queryParams.donorName"
|
placeholder="请输入捐献者姓名"
|
clearable
|
style="width: 200px"
|
/>
|
</el-form-item>
|
<el-form-item label="案例状态" prop="status">
|
<el-select
|
v-model="queryParams.status"
|
placeholder="请选择状态"
|
clearable
|
style="width: 200px"
|
>
|
<el-option label="全部" value="" />
|
<el-option label="待审批" value="0" />
|
<el-option label="已通过" value="1" />
|
<el-option label="已终止" value="2" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery"
|
>搜索</el-button
|
>
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 操作按钮区域 -->
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="primary" plain icon="el-icon-plus" @click="handleAdd"
|
>新增案例</el-button
|
>
|
</el-col>
|
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
plain
|
icon="el-icon-delete"
|
:disabled="multiple"
|
@click="handleDelete"
|
>删除</el-button
|
>
|
</el-col>
|
</el-row>
|
|
<!-- 数据表格 -->
|
<el-table
|
v-loading="loading"
|
:data="caseList"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" width="55" align="center" />
|
<!-- <el-table-column label="序号" type="index" width="60" align="center"/>
|
<el-table-column label="捐献编号" align="center" prop="donorNo" width="140"/> -->
|
<el-table-column
|
label="上报时间"
|
align="center"
|
prop="reportTime"
|
width="160"
|
/>
|
|
<el-table-column
|
label="捐献者姓名"
|
align="center"
|
prop="donorName"
|
width="100"
|
/>
|
<el-table-column label="性别" align="center" prop="gender" width="80">
|
<template slot-scope="scope">
|
<dict-tag :options="genderOptions" :value="scope.row.gender" />
|
</template>
|
</el-table-column>
|
<el-table-column label="年龄" align="center" prop="age" width="80" />
|
<el-table-column label="血型" align="center" prop="bloodType" width="80">
|
<template slot-scope="scope">
|
<dict-tag :options="bloodTypeOptions" :value="scope.row.bloodType" />
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="GCS评分"
|
align="center"
|
prop="gscScore"
|
width="80"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="疾病诊断"
|
align="center"
|
prop="diagnosis"
|
min-width="200"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="上报医院"
|
align="center"
|
prop="hospitalName"
|
width="150"
|
/>
|
<el-table-column label="状态" align="center" prop="status" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.status | statusFilter">
|
{{ scope.row.status | statusTextFilter }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
class-name="small-padding fixed-width"
|
width="200"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-view"
|
@click="handleDetail(scope.row)"
|
>详情</el-button
|
>
|
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-check"
|
@click="handleApprove(scope.row)"
|
v-if="scope.row.status === '0'"
|
>审批</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
|
<!-- 案例详情弹框 -->
|
<el-dialog
|
:title="detailTitle"
|
:visible.sync="detailOpen"
|
width="900px"
|
append-to-body
|
:close-on-click-modal="false"
|
>
|
<case-detail :caseData="currentCase" @close="detailOpen = false" />
|
</el-dialog>
|
|
<!-- 审批弹框 -->
|
<!-- 审批弹框优化 -->
|
<el-dialog
|
title="案例审批"
|
:visible.sync="approveOpen"
|
width="80vw"
|
append-to-body
|
class="approve-dialog"
|
>
|
<el-container style="height: 800px;">
|
<!-- 左侧：案例详情 -->
|
<el-aside
|
width="50vw"
|
style="background: #f8f9fa; padding: 20px; overflow-y: auto;"
|
>
|
<div class="approve-detail-preview">
|
<h3 style="margin-bottom: 15px; color: #303133;">案例详情预览</h3>
|
<case-detail :caseData="currentCase" :showtitle="false" />
|
</div>
|
</el-aside>
|
|
<!-- 右侧：审批表单 -->
|
<el-main style="padding: 20px;">
|
<el-form
|
ref="approveForm"
|
:model="approveForm"
|
:rules="approveRules"
|
label-width="100px"
|
>
|
<el-form-item label="审批结果" prop="approveResult">
|
<el-radio-group v-model="approveForm.approveResult">
|
<el-radio label="1">通过</el-radio>
|
<el-radio label="2">终止</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="审批意见" prop="approveOpinion">
|
<el-input
|
type="textarea"
|
v-model="approveForm.approveOpinion"
|
placeholder="请输入详细的审批意见，包括通过或终止的理由"
|
:rows="6"
|
maxlength="500"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-form>
|
</el-main>
|
</el-container>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="approveOpen = false">取消</el-button>
|
<el-button type="primary" @click="submitApprove">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import CaseDetail from "./caseDetail";
|
import CaseDetailPreview from "./CaseDetailPreview";
|
export default {
|
name: "CaseList",
|
components: { CaseDetail, CaseDetailPreview },
|
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 总条数
|
total: 0,
|
// 案例表格数据
|
caseList: [],
|
// 详情弹框是否显示
|
detailOpen: false,
|
// 审批弹框是否显示
|
approveOpen: false,
|
// 详情弹框标题
|
detailTitle: "",
|
// 当前操作的案例
|
currentCase: {},
|
// 性别选项
|
genderOptions: [
|
{ value: "0", label: "男" },
|
{ value: "1", label: "女" }
|
],
|
// 血型选项
|
bloodTypeOptions: [
|
{ value: "A", label: "A型" },
|
{ value: "B", label: "B型" },
|
{ value: "O", label: "O型" },
|
{ value: "AB", label: "AB型" }
|
],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
donorNo: undefined,
|
donorName: undefined,
|
status: undefined
|
},
|
// 审批表单
|
approveForm: {
|
caseId: null,
|
approveResult: "1",
|
approveOpinion: ""
|
},
|
// 审批表单验证
|
approveRules: {
|
approveResult: [
|
{ required: true, message: "请选择审批结果", trigger: "change" }
|
],
|
approveOpinion: [
|
{ required: true, message: "请输入审批意见", trigger: "blur" }
|
]
|
}
|
};
|
},
|
filters: {
|
statusFilter(status) {
|
const statusMap = {
|
"0": "warning", // 待审批
|
"1": "success", // 已通过
|
"2": "danger" // 已终止
|
};
|
return statusMap[status];
|
},
|
statusTextFilter(status) {
|
const statusMap = {
|
"0": "待审批",
|
"1": "已通过",
|
"2": "已终止"
|
};
|
return statusMap[status];
|
}
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询案例列表 */
|
getList() {
|
this.loading = true;
|
// 模拟API调用延迟
|
setTimeout(() => {
|
// 测试数据
|
this.caseList = [
|
{
|
id: 1,
|
donorNo: "DON20241219001",
|
donorName: "张三",
|
gender: "2",
|
age: 38,
|
bloodType: "A",
|
gscScore:'1',
|
diagnosis:
|
"脑外伤导致脑死亡，经抢救无效宣布脑死亡。家属同意器官捐献。",
|
hospitalName: "青岛大学附属医院",
|
status: "0",
|
reportTime: "2024-12-19 09:30:00",
|
reporterName: "李医生",
|
idCardNo: "370203198510123456",
|
nation: "汉族",
|
phone: "13800138000",
|
address: "山东省青岛市市南区香港中路100号",
|
inpatientNo: "ZY20241219001",
|
departmentName: "神经外科",
|
doctorName: "王主任",
|
infectiousDisease: "无",
|
medicalRecord:
|
"患者因交通事故导致严重脑外伤，经抢救无效宣布脑死亡。",
|
hospitalLevel: "三级甲等",
|
contactPerson: "张护士",
|
contactPhone: "13900139000",
|
hospitalAddress: "山东省青岛市市南区江苏路1号"
|
},
|
{
|
id: 2,
|
donorNo: "DON20241218001",
|
donorName: "李四",
|
gender: "1",
|
age: 45,
|
bloodType: "O",
|
gscScore:'3',
|
diagnosis: "急性心肌梗死，心脏功能衰竭",
|
hospitalName: "青岛市立医院",
|
status: "1",
|
reportTime: "2024-12-18 14:20:00",
|
approveTime: "2024-12-18 16:30:00",
|
reporterName: "刘医生",
|
approverName: "审核专员A",
|
approveOpinion: "资料齐全，符合捐献条件，同意通过。"
|
},
|
{
|
id: 3,
|
donorNo: "DON20241217001",
|
donorName: "王五",
|
gender: "2",
|
age: 52,
|
bloodType: "B",
|
gscScore:'6',
|
diagnosis: "颅内出血，脑干功能丧失",
|
hospitalName: "青岛眼科医院",
|
status: "2",
|
reportTime: "2024-12-17 10:15:00",
|
approveTime: "2024-12-17 14:20:00",
|
reporterName: "陈医生",
|
approverName: "审核专员B",
|
approveOpinion: "家属同意书不完整，需补充材料后重新提交。"
|
},
|
{
|
id: 4,
|
donorNo: "DON20241216001",
|
donorName: "赵六",
|
gender: "1",
|
age: 28,
|
bloodType: "AB",
|
gscScore:'10',
|
diagnosis: "重型颅脑损伤，多器官功能衰竭",
|
hospitalName: "青岛儿童医院",
|
status: "0",
|
reportTime: "2024-12-16 16:45:00",
|
reporterName: "孙医生"
|
}
|
];
|
this.total = this.caseList.length;
|
this.loading = false;
|
}, 500);
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
/** 详情按钮操作 */
|
handleDetail(row) {
|
this.currentCase = row;
|
this.detailTitle = `案例详情 - ${row.donorNo}`;
|
this.detailOpen = true;
|
},
|
// 在父组件中更新审批方法
|
handleApprove(row) {
|
this.currentCase = row;
|
this.approveForm.caseId = row.id;
|
this.approveForm.approveResult = "1";
|
this.approveForm.approveOpinion = "";
|
this.approveOpen = true;
|
},
|
|
/** 提交审批 */
|
submitApprove() {
|
this.$refs["approveForm"].validate(valid => {
|
if (valid) {
|
// 模拟审批提交
|
this.$modal.msgSuccess("审批成功");
|
this.approveOpen = false;
|
// 更新案例状态
|
const caseItem = this.caseList.find(
|
item => item.id === this.approveForm.caseId
|
);
|
if (caseItem) {
|
caseItem.status = this.approveForm.approveResult;
|
caseItem.approveTime = new Date().toLocaleString();
|
caseItem.approverName = "当前用户";
|
caseItem.approveOpinion = this.approveForm.approveOpinion;
|
}
|
}
|
});
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.$router.push("/case/add");
|
},
|
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
const ids = row.id || this.ids;
|
this.$modal
|
.confirm('是否确认删除住院号为"' + ids + '"的数据项？')
|
.then(() => {
|
// 模拟删除操作
|
this.caseList = this.caseList.filter(item => !ids.includes(item.id));
|
this.total = this.caseList.length;
|
this.$modal.msgSuccess("删除成功");
|
})
|
.catch(() => {});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.filter-card {
|
margin-bottom: 20px;
|
}
|
.mb8 {
|
margin-bottom: 8px;
|
}
|
/* 详情页面样式优化 */
|
.case-detail-container {
|
max-height: 70vh;
|
overflow-y: auto;
|
padding: 0 10px;
|
}
|
|
.detail-section {
|
margin-bottom: 16px;
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
/* 审批弹框样式 */
|
.approve-dialog >>> .el-dialog__body {
|
padding: 0;
|
}
|
|
.approve-detail-preview {
|
height: 100%;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 1200px) {
|
.approve-dialog {
|
width: 95% !important;
|
}
|
|
.el-aside {
|
width: 50% !important;
|
}
|
}
|
</style>
|
