<template>
|
<div class="app-container">
|
<!-- 查询条件：按钮紧跟条件之后（与案例评估页风格一致） -->
|
<el-form
|
class="opo-query-form"
|
:model="queryParams"
|
ref="queryForm"
|
:inline="true"
|
v-show="showSearch"
|
label-width="82px"
|
>
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="捐献者" prop="name">
|
<el-input
|
v-model="queryParams.name"
|
placeholder="请输入捐献者姓名"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="证件号码" prop="idcardno">
|
<el-input
|
v-model="queryParams.idcardno"
|
placeholder="请输入证件号码"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="器官类别" prop="organno">
|
<el-select
|
v-model="queryParams.organno"
|
placeholder="请选择器官类别"
|
clearable
|
size="small"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="dict in dict.type.sys_Organ"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="获取状态" prop="organstate">
|
<el-select
|
v-model="queryParams.organstate"
|
placeholder="请选择获取状态"
|
clearable
|
size="small"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="dict in dict.type.sys_organstate"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="器官编号" prop="organnumber">
|
<el-input
|
v-model="queryParams.organnumber"
|
placeholder="请输入器官编号"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="移植机构" prop="transplanthospitalname">
|
<el-input
|
v-model="queryParams.transplanthospitalname"
|
placeholder="请输入移植机构名称"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="移植人" prop="acceptname">
|
<el-input
|
v-model="queryParams.acceptname"
|
placeholder="请输入移植人姓名"
|
clearable
|
size="small"
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label-width="10px">
|
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
|
<el-button
|
type="warning"
|
plain
|
icon="el-icon-download"
|
size="small"
|
:loading="exportLoading"
|
@click="handleExport"
|
v-hasPermi="['project:register:export']"
|
>导出</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row class="mb8">
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
</el-row>
|
</el-form>
|
|
<el-table v-loading="loading" :data="registerList" :border="true">
|
<el-table-column label="捐献者编号" align="center" prop="donorno" width="200" show-overflow-tooltip />
|
<el-table-column label="姓名" align="center" prop="name" width="90" show-overflow-tooltip />
|
<el-table-column label="性别" align="center" prop="sex" width="70">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
|
</template>
|
</el-table-column>
|
<el-table-column label="年龄" align="center" width="80">
|
<template slot-scope="scope">
|
<span v-if="scope.row.age">{{ scope.row.age }}{{ scope.row.ageunit }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="器官类别" align="center" prop="organname" width="90" show-overflow-tooltip />
|
<el-table-column label="器官编号" align="center" prop="organnumber" width="130" show-overflow-tooltip />
|
<el-table-column label="获取状态" align="center" prop="organstate" width="100">
|
<template slot-scope="scope">
|
<dict-tag :options="dict.type.sys_organstate" :value="scope.row.organstate" />
|
</template>
|
</el-table-column>
|
<el-table-column label="获取时间" align="center" prop="organgettime" width="150">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.organgettime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="获取机构" align="center" prop="gainhospitalname" min-width="180" show-overflow-tooltip />
|
<el-table-column label="移植机构" align="center" prop="transplanthospitalname" min-width="180" show-overflow-tooltip />
|
<el-table-column label="移植医生" align="center" prop="transplantdoct" width="100" show-overflow-tooltip />
|
<el-table-column label="移植时间" align="center" prop="transplanttime" width="150">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.transplanttime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="90" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-view"
|
@click="handleDetail(scope.row)"
|
v-hasPermi="['project:register:query']"
|
>详情</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="器官去处详情" :visible.sync="open" width="900px" append-to-body>
|
<div v-loading="detailLoading" class="register-detail">
|
<el-divider content-position="left">捐献者信息</el-divider>
|
<el-descriptions :column="3" size="small" border>
|
<el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
|
<el-descriptions-item label="性别">{{ dictLabel("sys_user_sex", detail.sex) }}</el-descriptions-item>
|
<el-descriptions-item label="年龄">
|
<span v-if="detail.age">{{ detail.age }}{{ detail.ageunit }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="证件号码">{{ detail.idcardno }}</el-descriptions-item>
|
<el-descriptions-item label="出生日期">{{ parseTime(detail.birthday, "{y}-{m}-{d}") }}</el-descriptions-item>
|
<el-descriptions-item label="联系电话">{{ detail.phone }}</el-descriptions-item>
|
<el-descriptions-item label="现住地址" :span="3">{{ detail.residenceaddress }}</el-descriptions-item>
|
<el-descriptions-item label="捐献者编号">{{ detail.donorno }}</el-descriptions-item>
|
</el-descriptions>
|
|
<el-divider content-position="left">器官信息</el-divider>
|
<el-descriptions :column="3" size="small" border>
|
<el-descriptions-item label="器官类别">{{ detail.organname }}</el-descriptions-item>
|
<el-descriptions-item label="器官编号">{{ detail.organnumber }}</el-descriptions-item>
|
<el-descriptions-item label="获取状态">
|
{{ dictLabel("sys_organstate", detail.organstate) }}
|
</el-descriptions-item>
|
<el-descriptions-item label="获取时间">{{ parseTime(detail.organgettime) }}</el-descriptions-item>
|
<el-descriptions-item label="获取医生" :span="2">{{ detail.organgetdoct }}</el-descriptions-item>
|
<el-descriptions-item label="获取机构" :span="2">{{ detail.gainhospitalname }}</el-descriptions-item>
|
<el-descriptions-item label="移植机构" :span="2">{{ detail.transplanthospitalname }}</el-descriptions-item>
|
<el-descriptions-item label="移植医生">{{ detail.transplantdoct }}</el-descriptions-item>
|
<el-descriptions-item label="移植时间" :span="2">{{ parseTime(detail.transplanttime) }}</el-descriptions-item>
|
</el-descriptions>
|
|
<el-divider content-position="left">申请与审核</el-divider>
|
<el-descriptions :column="3" size="small" border>
|
<el-descriptions-item label="申请人">{{ detail.applicantusername }}</el-descriptions-item>
|
<el-descriptions-item label="申请时间" :span="2">{{ parseTime(detail.applicanttime) }}</el-descriptions-item>
|
<el-descriptions-item label="审核人">{{ detail.checkusername }}</el-descriptions-item>
|
<el-descriptions-item label="审核时间" :span="2">{{ parseTime(detail.checktime) }}</el-descriptions-item>
|
<el-descriptions-item label="审核意见" :span="3">{{ detail.checksuggestion }}</el-descriptions-item>
|
</el-descriptions>
|
|
<el-divider content-position="left">移植人信息</el-divider>
|
<el-descriptions :column="3" size="small" border>
|
<el-descriptions-item label="姓名">{{ detail.acceptname }}</el-descriptions-item>
|
<el-descriptions-item label="性别">{{ dictLabel("sys_user_sex", detail.acceptsex) }}</el-descriptions-item>
|
<el-descriptions-item label="年龄">
|
<span v-if="detail.acceptage">{{ detail.acceptage }}{{ detail.acceptageunit }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="证件号码">{{ detail.acceptidcard }}</el-descriptions-item>
|
<el-descriptions-item label="联系电话" :span="2">{{ detail.acceptphone }}</el-descriptions-item>
|
<el-descriptions-item label="现住地址" :span="3">{{ detail.acceptresidenceaddress }}</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="open = false">关 闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { listRegister, getRegister, exportRegister } from "@/api/project/register";
|
|
export default {
|
name: "Register",
|
dicts: ["sys_Organ", "sys_organstate", "sys_user_sex", "sys_AgeUnit"],
|
data() {
|
return {
|
// 遮罩层
|
loading: true,
|
// 详情加载
|
detailLoading: false,
|
// 导出遮罩层
|
exportLoading: false,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 器官去处列表
|
registerList: [],
|
// 详情弹窗
|
open: false,
|
detail: {},
|
// 查询参数（均需与后端 queryList / Mapper 支持的条件一致）
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: null,
|
idcardno: null,
|
organno: null,
|
organstate: null,
|
organnumber: null,
|
transplanthospitalname: null,
|
acceptname: null
|
}
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询器官去处列表 */
|
getList() {
|
this.loading = true;
|
listRegister(this.queryParams).then(response => {
|
this.registerList = response.rows;
|
this.total = response.total;
|
this.loading = false;
|
});
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
/** 详情按钮操作 */
|
handleDetail(row) {
|
this.detail = {};
|
this.open = true;
|
this.detailLoading = true;
|
getRegister(row.id).then(response => {
|
this.detail = response.data || {};
|
this.detailLoading = false;
|
}).catch(() => {
|
this.detailLoading = false;
|
});
|
},
|
/** 字典翻译（模板里用，避免多个 dict-tag 嵌套） */
|
dictLabel(type, value) {
|
const list = this.dict.type[type] || [];
|
const item = list.find(d => String(d.value) === String(value));
|
return item ? item.label : value;
|
},
|
/** 导出按钮操作 */
|
handleExport() {
|
this.$modal
|
.confirm("是否确认导出器官去处数据？")
|
.then(() => {
|
this.exportLoading = true;
|
return exportRegister(this.queryParams);
|
})
|
.then(response => {
|
this.$download.name(response.msg);
|
this.exportLoading = false;
|
})
|
.catch(() => {
|
this.exportLoading = false;
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.register-detail >>> .el-divider--horizontal {
|
margin: 12px 0 14px;
|
}
|
.register-detail >>> .el-divider__text {
|
color: var(--opo-primary, #0e768f);
|
font-size: var(--opo-font-size-sm, 14px);
|
}
|
.register-detail >>> .el-descriptions-item__label {
|
color: var(--opo-text-secondary, #6b7280);
|
width: 90px;
|
}
|
</style>
|
