<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="caseNo">
|
<el-input
|
v-model="queryParams.caseNo"
|
placeholder="请输入案例编号"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="患者姓名" prop="patName">
|
<el-input
|
v-model="queryParams.patName"
|
placeholder="请输入患者姓名"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="转运状态" prop="transitStatus">
|
<el-select
|
v-model="queryParams.transitStatus"
|
placeholder="转运状态"
|
clearable
|
style="width: 200px"
|
>
|
<el-option label="全部" value="" />
|
<el-option label="待转运" :value="1" />
|
<el-option label="转运中" :value="2" />
|
<el-option label="转运完成" :value="3" />
|
<el-option label="转运取消" :value="4" />
|
<el-option label="暂存" :value="5" />
|
</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="reportId"
|
width="140"
|
/>
|
<el-table-column
|
label="案例编号"
|
align="center"
|
prop="caseNo"
|
width="140"
|
/>
|
<el-table-column label="患者信息" align="center" width="260">
|
<template slot-scope="scope">
|
<div class="donor-info">
|
<div class="donor-name">{{ scope.row.patName }}</div>
|
<div class="donor-details">
|
<dict-tag
|
:options="dict.type.sys_user_sex"
|
:value="parseInt(scope.row.sex)"
|
/>
|
| {{ scope.row.age }}岁
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="疾病诊断"
|
align="center"
|
prop="diagnosisname"
|
min-width="200"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="治疗医院"
|
align="center"
|
prop="treatmentHospitalName"
|
width="150"
|
/>
|
<el-table-column
|
label="计划转运时间"
|
align="center"
|
prop="transportStartTime"
|
width="160"
|
/>
|
<el-table-column
|
label="负责协调员"
|
align="center"
|
prop="contactPerson"
|
width="100"
|
/>
|
<el-table-column
|
label="转运状态"
|
align="center"
|
prop="transitStatus"
|
width="100"
|
>
|
<template slot-scope="scope">
|
<el-tag :type="getStatusTagType(scope.row.transitStatus)">
|
{{ getStatusText(scope.row.transitStatus) }}
|
</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.transitStatus === 1"
|
>开始转运</el-button
|
>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-check"
|
@click="handleCompleteTransport(scope.row)"
|
v-if="scope.row.transitStatus === 2"
|
>完成转运</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>
|
<!-- 新增：修改弹框 -->
|
<transport-edit
|
:edit-open="editOpen"
|
:transport-data="currentTransport"
|
:is-edit="isEditing"
|
@update:edit-open="editOpen = $event"
|
@close="handleEditClose"
|
@save-success="handleSaveSuccess"
|
/>
|
<!-- 操作确认弹框 -->
|
<el-dialog
|
:title="actionTitle"
|
:visible.sync="actionOpen"
|
width="500px"
|
append-to-body
|
>
|
<div class="action-confirm">
|
<p>
|
确定要{{ actionText }}转运单 "{{
|
currentTransport.reportId || 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 {
|
transportList,
|
transportAdd,
|
transportEdit,
|
transportDelete,
|
transportInfo
|
} from "@/api/businessApi/index";
|
import TransportDetail from "./transportDetail";
|
import TransportEdit from "./TransportEdit";
|
|
export default {
|
name: "TransportList",
|
components: { TransportDetail, TransportEdit },
|
dicts: ["sys_user_sex", "sys_BloodType"],
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 转运单表格数据 - 直接使用后端返回的数据结构
|
transportList: [],
|
// 详情弹框是否显示
|
detailOpen: false,
|
// 操作确认弹框是否显示
|
actionOpen: false,
|
// 新增：修改弹框相关数据
|
editOpen: false,
|
isEditing: false,
|
// 详情弹框标题
|
detailTitle: "",
|
// 操作确认标题
|
actionTitle: "",
|
// 操作文本
|
actionText: "",
|
// 当前操作的转运单
|
currentTransport: {},
|
// 日期范围
|
dateRange: [],
|
// 统计数据
|
stats: {
|
totalTransports: 0,
|
pendingTransports: 0,
|
completedTransports: 0
|
},
|
// 查询参数（完全适配后端接口）
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
caseNo: undefined, // 案例编号
|
patName: undefined, // 患者姓名
|
transitStatus: undefined, // 转运状态：1待转运 2转运中 3转运完成 4转运取消 5暂存
|
searchValue: undefined, // 搜索值
|
params: {} // 其他参数对象
|
}
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询转运单列表 - 直接使用后端数据结构 */
|
async getList() {
|
this.loading = true;
|
|
try {
|
// 构建符合后端接口的请求参数 [1,2](@ref)
|
const requestParams = {
|
pageNum: this.queryParams.pageNum,
|
pageSize: this.queryParams.pageSize,
|
caseNo: this.queryParams.caseNo,
|
patName: this.queryParams.patName,
|
transitStatus: this.queryParams.transitStatus,
|
searchValue: this.queryParams.searchValue
|
};
|
|
// 处理时间范围参数 [5](@ref)
|
if (this.dateRange && this.dateRange.length === 2) {
|
requestParams.transportStartTime = this.dateRange.join(",");
|
}
|
|
// 调用正式接口 [3](@ref)
|
const response = await transportList(requestParams);
|
|
if (response.code === 200) {
|
// 直接使用后端返回的数据结构，不进行转换 [8](@ref)
|
this.transportList = response.rows || response.data || [];
|
this.total = response.total || 0;
|
|
// 更新统计数据
|
this.updateStats();
|
} else {
|
this.$modal.msgError(response.msg || "获取转运单列表失败");
|
}
|
} catch (error) {
|
console.error("获取转运单列表失败:", error);
|
this.$modal.msgError("网络请求失败，请稍后重试");
|
} finally {
|
this.loading = false;
|
}
|
},
|
|
/** 获取状态标签类型 */
|
getStatusTagType(transitStatus) {
|
const statusMap = {
|
1: "warning", // 待转运
|
2: "primary", // 转运中
|
3: "success", // 转运完成
|
4: "danger", // 转运取消
|
5: "info" // 暂存
|
};
|
return statusMap[transitStatus] || "info";
|
},
|
|
/** 获取状态文本 */
|
getStatusText(transitStatus) {
|
const statusMap = {
|
1: "待转运",
|
2: "转运中",
|
3: "转运完成",
|
4: "转运取消",
|
5: "暂存"
|
};
|
return statusMap[transitStatus] || "未知状态";
|
},
|
|
// 更新统计数据
|
updateStats() {
|
this.stats.totalTransports = this.transportList.length;
|
this.stats.pendingTransports = this.transportList.filter(
|
item => item.transitStatus === 1
|
).length;
|
this.stats.completedTransports = this.transportList.filter(
|
item => item.transitStatus === 3
|
).length;
|
},
|
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.ids = selection.map(item => item.reportId || item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.dateRange = [];
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
caseNo: undefined,
|
patName: undefined,
|
transitStatus: undefined,
|
searchValue: undefined
|
};
|
this.getList();
|
},
|
|
/** 详情按钮操作 */
|
handleDetail(row) {
|
this.currentTransport = row;
|
this.detailTitle = `转运单详情 - ${row.reportId || row.id}`;
|
this.detailOpen = true;
|
},
|
|
/** 修改按钮操作 */
|
handleUpdate(row) {
|
this.currentTransport = row || {};
|
this.isEditing = true;
|
this.editOpen = true;
|
},
|
|
/** 新建转运单 */
|
handleAdd() {
|
this.currentTransport = {};
|
this.isEditing = false;
|
this.editOpen = true;
|
},
|
|
/** 修改弹框关闭处理 */
|
handleEditClose() {
|
this.editOpen = false;
|
this.currentTransport = {};
|
},
|
|
/** 保存成功处理 */
|
handleSaveSuccess() {
|
this.getList(); // 重新加载列表
|
},
|
|
/** 开始转运操作 */
|
async handleStartTransport(row) {
|
this.currentTransport = row;
|
this.actionTitle = "开始转运";
|
this.actionText = "开始";
|
this.actionOpen = true;
|
},
|
|
/** 完成转运操作 */
|
async handleCompleteTransport(row) {
|
this.currentTransport = row;
|
this.actionTitle = "完成转运";
|
this.actionText = "完成";
|
this.actionOpen = true;
|
},
|
|
/** 确认操作 - 使用后端原始数据结构 [4](@ref) */
|
async confirmAction() {
|
try {
|
let requestData = {
|
id: this.currentTransport.id || this.currentTransport.reportId
|
};
|
|
if (this.actionText === "开始") {
|
requestData.transitStatus = 2; // 设置为转运中
|
} else if (this.actionText === "完成") {
|
requestData.transitStatus = 3; // 设置为转运完成
|
}
|
|
// 直接传递后端需要的参数 [8](@ref)
|
const response = await transportEdit(requestData);
|
|
if (response.code === 200) {
|
this.$modal.msgSuccess(`${this.actionText}转运成功`);
|
this.getList(); // 刷新列表
|
} else {
|
this.$modal.msgError(response.msg || `${this.actionText}转运失败`);
|
}
|
} catch (error) {
|
console.error(`${this.actionText}转运失败:`, error);
|
this.$modal.msgError("操作失败，请稍后重试");
|
}
|
this.actionOpen = false;
|
},
|
|
/** 删除按钮操作 - 使用后端原始ID [1](@ref) */
|
async handleDelete(row) {
|
const ids = row.reportId || row.id || this.ids;
|
|
try {
|
await this.$modal.confirm(
|
'是否确认删除转运单编号为"' + ids + '"的数据项？'
|
);
|
|
const response = await transportDelete(ids);
|
|
if (response.code === 200) {
|
this.$modal.msgSuccess("删除成功");
|
this.getList(); // 刷新列表
|
} else {
|
this.$modal.msgError(response.msg || "删除失败");
|
}
|
} catch (error) {
|
if (error !== "cancel") {
|
console.error("删除失败:", error);
|
this.$modal.msgError("删除失败，请稍后重试");
|
}
|
}
|
},
|
|
/** 导出按钮操作 */
|
handleExport() {
|
// 直接使用后端参数结构进行导出 [5](@ref)
|
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: center;
|
display: flex;
|
justify-content: center
|
}
|
|
.donor-name {
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
|
.donor-details {
|
margin-left: 5px;
|
font-size: 16px;
|
color: #093ca4;
|
display: flex;
|
}
|
|
.mb8 {
|
margin-bottom: 8px;
|
}
|
|
.action-confirm {
|
text-align: center;
|
font-size: 16px;
|
padding: 20px 0;
|
}
|
</style>
|
