<template>
|
<div class="app-container">
|
<!-- 搜索筛选区域 -->
|
<el-card class="filter-card">
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
|
<el-form-item label="转运单号" prop="transportNo">
|
<el-input
|
v-model="queryParams.transportNo"
|
placeholder="请输入转运单号"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="案例编号" prop="caseNo">
|
<el-input
|
v-model="queryParams.caseNo"
|
placeholder="请输入案例编号"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="捐献者姓名" prop="donorName">
|
<el-input
|
v-model="queryParams.donorName"
|
placeholder="请输入捐献者姓名"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</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="pending"/>
|
<el-option label="转运中" value="transporting"/>
|
<el-option label="已完成" value="completed"/>
|
<el-option label="已取消" value="cancelled"/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="创建时间">
|
<el-date-picker
|
v-model="dateRange"
|
style="width: 240px"
|
value-format="yyyy-MM-dd"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
</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="20" class="stats-row">
|
<el-col :span="8">
|
<el-card class="stats-card total">
|
<div class="stat-content">
|
<div class="stat-icon">📦</div>
|
<div class="stat-info">
|
<div class="stat-count">{{ stats.totalTransports }}</div>
|
<div class="stat-label">总转运单</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="8">
|
<el-card class="stats-card pending">
|
<div class="stat-content">
|
<div class="stat-icon">⏳</div>
|
<div class="stat-info">
|
<div class="stat-count">{{ stats.pendingTransports }}</div>
|
<div class="stat-label">待出发</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="8">
|
<el-card class="stats-card completed">
|
<div class="stat-content">
|
<div class="stat-icon">✅</div>
|
<div class="stat-info">
|
<div class="stat-count">{{ stats.completedTransports }}</div>
|
<div class="stat-label">已完成</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 操作按钮区域 -->
|
<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="success" plain icon="el-icon-edit" :disabled="single" @click="handleUpdate">修改</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-col :span="1.5">
|
<el-button type="warning" plain icon="el-icon-download" @click="handleExport">导出</el-button>
|
</el-col>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
</el-row>
|
|
<!-- 数据表格 -->
|
<el-table v-loading="loading" :data="transportList" @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="id" width="140"/>
|
<el-table-column label="案例编号" align="center" prop="caseNo" width="140"/>
|
<el-table-column label="捐献者信息" align="center" width="180">
|
<template slot-scope="scope">
|
<div class="donor-info">
|
<div class="donor-name">{{ scope.row.donorName }}</div>
|
<div class="donor-details">{{ scope.row.gender }} | {{ scope.row.age }}岁</div>
|
</div>
|
</template>
|
</el-table-column>
|
<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="transportTime" width="160"/>
|
<el-table-column label="负责协调员" align="center" prop="coordinator" width="100"/>
|
<el-table-column label="转运状态" align="center" prop="status" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.status | statusFilter">
|
{{ scope.row.statusText }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" align="center" prop="createTime" width="160"/>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
|
<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-edit" @click="handleUpdate(scope.row)">编辑</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-video-play"
|
@click="handleStartTransport(scope.row)"
|
v-if="scope.row.status === 'pending'"
|
>开始转运</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-check"
|
@click="handleCompleteTransport(scope.row)"
|
v-if="scope.row.status === 'transporting'"
|
>完成转运</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="1000px"
|
append-to-body
|
:close-on-click-modal="false"
|
>
|
<transport-detail :transportData="currentTransport" @close="detailOpen = false"/>
|
</el-dialog>
|
|
<!-- 操作确认弹框 -->
|
<el-dialog
|
:title="actionTitle"
|
:visible.sync="actionOpen"
|
width="500px"
|
append-to-body
|
>
|
<div class="action-confirm">
|
<p>确定要{{ actionText }}转运单 "{{ currentTransport.id }}" 吗？</p>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="actionOpen = false">取 消</el-button>
|
<el-button type="primary" @click="confirmAction">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { listTransport, getTransport, delTransport, updateTransportStatus } from "@/api/system/business";
|
import TransportDetail from './transportDetail';
|
|
export default {
|
name: "TransportList",
|
components: { TransportDetail },
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 转运单表格数据
|
transportList: [],
|
// 详情弹框是否显示
|
detailOpen: false,
|
// 操作确认弹框是否显示
|
actionOpen: false,
|
// 详情弹框标题
|
detailTitle: "",
|
// 操作确认标题
|
actionTitle: "",
|
// 操作文本
|
actionText: "",
|
// 当前操作的转运单
|
currentTransport: {},
|
// 日期范围
|
dateRange: [],
|
// 统计数据
|
stats: {
|
totalTransports: 0,
|
pendingTransports: 0,
|
completedTransports: 0
|
},
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
transportNo: undefined,
|
caseNo: undefined,
|
donorName: undefined,
|
status: undefined
|
}
|
};
|
},
|
filters: {
|
statusFilter(status) {
|
const statusMap = {
|
'pending': 'warning',
|
'transporting': 'primary',
|
'completed': 'success',
|
'cancelled': 'danger'
|
};
|
return statusMap[status];
|
}
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询转运单列表 */
|
getList() {
|
this.loading = true;
|
// 模拟API调用延迟
|
setTimeout(() => {
|
// 测试数据
|
this.transportList = [
|
{
|
id: 'T20241217001',
|
caseNo: 'DON20241216001',
|
donorName: '张三',
|
gender: '男',
|
age: 38,
|
diagnosis: '脑外伤导致脑死亡，经抢救无效宣布脑死亡。家属同意器官捐献。',
|
hospitalName: '青岛镜湖医院',
|
transportTime: '2024-12-17 14:30:00',
|
coordinator: '张医生',
|
createTime: '2024-12-16 09:30:00',
|
status: 'pending',
|
statusText: '待出发',
|
departureLocation: '青岛市立医院急诊科',
|
destinationHospital: '青岛镜湖医院',
|
emergencyDoctor: '王医生',
|
nurse: '李护士',
|
driver: '刘师傅',
|
icuDoctor: '赵医生',
|
contacts: [
|
{ role: '协调员电话', phone: '13800138000' },
|
{ role: '急诊医生电话', phone: '13800138001' },
|
{ role: '护士电话', phone: '13800138002' },
|
{ role: '司机电话', phone: '13800138003' },
|
{ role: 'ICU医生电话', phone: '13800138004' }
|
],
|
remarks: '需要准备呼吸机等急救设备'
|
},
|
{
|
id: 'T20241217002',
|
caseNo: 'DON20241216002',
|
donorName: '李四',
|
gender: '女',
|
age: 45,
|
diagnosis: '脑梗死，脑干功能丧失',
|
hospitalName: '青岛大学附属医院',
|
transportTime: '2024-12-17 16:00:00',
|
coordinator: '李医生',
|
createTime: '2024-12-16 11:20:00',
|
status: 'transporting',
|
statusText: '转运中',
|
departureLocation: '青岛大学附属医院ICU',
|
destinationHospital: '青岛器官移植中心',
|
currentLocation: '青岛市南区香港中路',
|
estimatedTime: '30分钟'
|
},
|
{
|
id: 'T20241216003',
|
caseNo: 'DON20241215001',
|
donorName: '王五',
|
gender: '男',
|
age: 52,
|
diagnosis: '心脏骤停，多器官功能衰竭',
|
hospitalName: '青岛市立医院',
|
transportTime: '2024-12-16 10:15:00',
|
coordinator: '王医生',
|
createTime: '2024-12-15 14:45:00',
|
status: 'completed',
|
statusText: '已完成',
|
departureLocation: '青岛市立医院心内科',
|
destinationHospital: '青岛器官移植中心',
|
completedTime: '2024-12-16 12:30:00',
|
distance: '15公里',
|
duration: '2小时15分钟'
|
},
|
{
|
id: 'T20241216004',
|
caseNo: 'DON20241214001',
|
donorName: '赵六',
|
gender: '女',
|
age: 29,
|
diagnosis: '急性肝衰竭',
|
hospitalName: '青岛科大医院',
|
transportTime: '2024-12-16 08:30:00',
|
coordinator: '赵医生',
|
createTime: '2024-12-14 16:20:00',
|
status: 'cancelled',
|
statusText: '已取消',
|
cancelReason: '家属临时改变决定'
|
}
|
];
|
|
// 更新统计数据
|
this.updateStats();
|
this.total = this.transportList.length;
|
this.loading = false;
|
}, 500);
|
},
|
|
// 更新统计数据
|
updateStats() {
|
this.stats.totalTransports = this.transportList.length;
|
this.stats.pendingTransports = this.transportList.filter(item => item.status === 'pending').length;
|
this.stats.completedTransports = this.transportList.filter(item => item.status === 'completed').length;
|
},
|
|
// 多选框选中数据
|
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.dateRange = [];
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
|
/** 详情按钮操作 */
|
handleDetail(row) {
|
this.currentTransport = row;
|
this.detailTitle = `转运单详情 - ${row.id}`;
|
this.detailOpen = true;
|
},
|
|
/** 开始转运操作 */
|
handleStartTransport(row) {
|
this.currentTransport = row;
|
this.actionTitle = '开始转运';
|
this.actionText = '开始';
|
this.actionOpen = true;
|
},
|
|
/** 完成转运操作 */
|
handleCompleteTransport(row) {
|
this.currentTransport = row;
|
this.actionTitle = '完成转运';
|
this.actionText = '完成';
|
this.actionOpen = true;
|
},
|
|
/** 确认操作 */
|
confirmAction() {
|
const index = this.transportList.findIndex(item => item.id === this.currentTransport.id);
|
if (index !== -1) {
|
if (this.actionText === '开始') {
|
this.transportList[index].status = 'transporting';
|
this.transportList[index].statusText = '转运中';
|
} else if (this.actionText === '完成') {
|
this.transportList[index].status = 'completed';
|
this.transportList[index].statusText = '已完成';
|
this.transportList[index].completedTime = new Date().toLocaleString();
|
}
|
|
// 更新统计数据
|
this.updateStats();
|
|
this.$modal.msgSuccess(`${this.actionText}成功`);
|
}
|
this.actionOpen = false;
|
},
|
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.$router.push('/transport/add');
|
},
|
|
/** 修改按钮操作 */
|
handleUpdate(row) {
|
const id = row.id || this.ids[0];
|
this.$router.push('/transport/edit/' + id);
|
},
|
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
const ids = row.id || this.ids;
|
this.$modal.confirm('是否确认删除转运单编号为"' + ids + '"的数据项？').then(() => {
|
// 模拟删除操作
|
this.transportList = this.transportList.filter(item => !ids.includes(item.id));
|
this.total = this.transportList.length;
|
this.updateStats();
|
this.$modal.msgSuccess("删除成功");
|
}).catch(() => {});
|
},
|
|
/** 导出按钮操作 */
|
handleExport() {
|
this.download('system/transport/export', {
|
...this.queryParams
|
}, `transport_${new Date().getTime()}.xlsx`)
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.filter-card {
|
margin-bottom: 20px;
|
}
|
|
.stats-row {
|
margin-bottom: 20px;
|
}
|
|
.stats-card {
|
border-radius: 8px;
|
transition: all 0.3s ease;
|
}
|
|
.stats-card:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
}
|
|
.stats-card.total {
|
border-left: 4px solid #409EFF;
|
}
|
|
.stats-card.pending {
|
border-left: 4px solid #E6A23C;
|
}
|
|
.stats-card.completed {
|
border-left: 4px solid #67C23A;
|
}
|
|
.stat-content {
|
display: flex;
|
align-items: center;
|
padding: 10px;
|
}
|
|
.stat-icon {
|
font-size: 40px;
|
margin-right: 15px;
|
}
|
|
.stat-info {
|
flex: 1;
|
}
|
|
.stat-count {
|
font-size: 28px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 5px;
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #909399;
|
}
|
|
.donor-info {
|
text-align: left;
|
}
|
|
.donor-name {
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.donor-details {
|
font-size: 12px;
|
color: #909399;
|
}
|
|
.mb8 {
|
margin-bottom: 8px;
|
}
|
|
.action-confirm {
|
text-align: center;
|
font-size: 16px;
|
padding: 20px 0;
|
}
|
</style>
|
