<template>
|
<div class="app-container archive-container">
|
<div class="archive-header">
|
<span class="archive-title">捐献案例归档管理</span>
|
<span class="archive-tag">仅展示已归档案例（不可编辑）</span>
|
</div>
|
<!-- 搜索 -->
|
<el-card class="search-card">
|
<el-form
|
:model="queryParams"
|
ref="queryForm"
|
:inline="true"
|
v-show="showSearch"
|
label-width="70px"
|
>
|
<el-row :gutter="8">
|
<el-col :span="5">
|
<el-form-item label="姓名" prop="name">
|
<el-input
|
v-model="queryParams.name"
|
placeholder="请输入姓名"
|
clearable
|
size="small"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="5">
|
<el-form-item label="报告医院" prop="treatmenthospitalno">
|
<org-selecter
|
ref="orgSelecter"
|
:org-type="'3'"
|
v-model="queryParams.treatmenthospitalno"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="9">
|
<el-form-item label="归档时间">
|
<el-date-picker
|
v-model="selecttime"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
@change="getTimeList"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<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-card>
|
|
<!-- 操作 -->
|
<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>
|
</el-row>
|
|
<el-card class="table-card">
|
|
<el-table
|
v-loading="loading"
|
:data="tableList"
|
class="archive-table"
|
border
|
>
|
<el-table-column label="姓名" align="center" prop="name" />
|
<el-table-column label="住院号" align="center" prop="inpatientno" />
|
<el-table-column label="性别" align="center" prop="sex">
|
<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" prop="age" />
|
<el-table-column label="血型" align="center" prop="bloodtype">
|
<template slot-scope="scope">
|
<dict-tag
|
:options="dict.type.sys_BloodType"
|
:value="scope.row.bloodtype"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column label="归档时间" align="center" prop="filingtime" />
|
|
<el-table-column
|
label="操作"
|
width="120"
|
align="center"
|
fixed="right"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
style="color:#67C23A;"
|
@click="handleCancelArchive(scope.row)"
|
>
|
取消归档
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<!-- 表格 -->
|
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</div>
|
</template>
|
<script>
|
import {
|
listDonatebaseinfo,
|
updateDonatebaseinfo,
|
exportDonatebaseinfo
|
} from "@/api/project/donatebaseinfo";
|
import OrgSelecter from "@/views/project/components/orgselect";
|
|
export default {
|
name: "DonateArchive",
|
components: { OrgSelecter },
|
dicts: ["sys_user_sex", "sys_BloodType"],
|
|
data() {
|
return {
|
loading: true,
|
exportLoading: false,
|
tableList: [],
|
total: 0,
|
selecttime: [],
|
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: null,
|
treatmenthospitalno: null,
|
starttime: null,
|
endtime: null,
|
recordstate: "4" // ✅ 只查归档案例
|
}
|
};
|
},
|
|
created() {
|
this.getList();
|
},
|
|
methods: {
|
getTimeList() {
|
if (!this.selecttime) return;
|
const [start, end] = this.selecttime;
|
this.queryParams.starttime = start;
|
this.queryParams.endtime = end;
|
},
|
|
getList() {
|
this.loading = true;
|
listDonatebaseinfo(this.queryParams).then(res => {
|
this.tableList = res.data;
|
this.total = res.total;
|
this.loading = false;
|
});
|
},
|
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
name: null,
|
treatmenthospitalno: null,
|
starttime: null,
|
endtime: null,
|
recordstate: "4"
|
};
|
this.selecttime = [];
|
this.resetForm("queryForm");
|
this.getList();
|
},
|
|
/** 取消归档 */
|
handleCancelArchive(row) {
|
this.$confirm("确认取消归档？取消后案例将恢复为正常状态。", "提示", {
|
type: "warning"
|
}).then(async () => {
|
const res = await updateDonatebaseinfo({
|
id: row.id,
|
recordstate: "2"
|
});
|
|
if (res.code === 200) {
|
this.$modal.msgSuccess("已取消归档");
|
this.getList();
|
} else {
|
this.$modal.msgError(res.msg || "操作失败");
|
}
|
}).catch(() => {});
|
},
|
|
/** 导出 */
|
async handleExport() {
|
this.$modal.confirm("是否导出归档案例数据？").then(async () => {
|
this.exportLoading = true;
|
const res = await exportDonatebaseinfo(this.queryParams);
|
this.$download.name(res.msg);
|
this.exportLoading = false;
|
}).catch(() => {});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
/* ===== 归档页面整体风格 ===== */
|
.archive-container {
|
background: #f5f7fa;
|
min-height: calc(100vh - 84px);
|
padding: 20px;
|
}
|
|
/* ===== 页面标题区 ===== */
|
.archive-header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16px;
|
}
|
|
.archive-title {
|
font-size: 18px;
|
font-weight: bold;
|
color: #606266;
|
}
|
|
.archive-tag {
|
margin-left: 12px;
|
background: #fdf6ec;
|
color: #e6a23c;
|
border: 1px solid #faecd8;
|
padding: 4px 10px;
|
border-radius: 4px;
|
font-size: 12px;
|
}
|
|
/* ===== 搜索区域 ===== */
|
.search-card {
|
background: #ffffff;
|
padding: 18px 20px 0;
|
border-radius: 6px;
|
margin-bottom: 16px;
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
}
|
|
/* ===== 表格区域 ===== */
|
.table-card {
|
background: #ffffff;
|
padding: 16px;
|
border-radius: 6px;
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
}
|
|
/* ===== 归档表格行样式（重点） ===== */
|
::v-deep .archive-table .el-table__row {
|
background: #fdfbf5;
|
}
|
|
::v-deep .archive-table .el-table__row:hover > td {
|
background: #f9f3e3 !important;
|
}
|
|
/* ===== 操作按钮 ===== */
|
.archive-action-btn {
|
color: #67c23a;
|
font-weight: 500;
|
}
|
|
/* ===== 空状态 ===== */
|
.empty-archive {
|
text-align: center;
|
padding: 60px 0;
|
color: #909399;
|
}
|
</style>
|
