70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<template>
|
||
<div class="outpatient-record">
|
||
<el-table :data="records" style="width: 100%">
|
||
<el-table-column prop="date" label="就诊日期" width="180"/>
|
||
<el-table-column prop="doctor" label="医生" width="180"/>
|
||
<el-table-column prop="status" label="状态" width="120">
|
||
<!-- 修复：当 status 为 null、undefined、空字符串时统一显示为 “未确认” 并使用已选中样式 -->
|
||
<template #default="{ row }">
|
||
<el-checkbox
|
||
v-model="row._statusChecked"
|
||
:true-label="'已确认'"
|
||
:false-label="'未确认'"
|
||
:disabled="true"
|
||
@change="onStatusChange(row)">
|
||
{{ row._statusChecked ? '已确认' : '未确认' }}
|
||
</el-checkbox>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="120">
|
||
<template #default="{ row }">
|
||
<el-button type="text" size="small" @click="viewDetail(row)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'OutpatientRecord',
|
||
data() {
|
||
return {
|
||
records: [] // [{ date, doctor, status }]
|
||
};
|
||
},
|
||
created() {
|
||
this.fetchRecords();
|
||
},
|
||
methods: {
|
||
/** 获取就诊记录 */
|
||
async fetchRecords() {
|
||
const res = await this.$api.getOutpatientRecords();
|
||
// 这里统一把 status 转换为布尔值，避免出现空方框
|
||
this.records = res.data.map(item => ({
|
||
...item,
|
||
// status 可能为 null、undefined、''，统一映射为 false（未确认）
|
||
_statusChecked: !!item.status
|
||
}));
|
||
},
|
||
|
||
/** 当状态复选框变化时（理论上只读，这里保留以防后续业务需要） */
|
||
onStatusChange(row) {
|
||
// 只在前端展示，不向后端提交，防止误改
|
||
// 如需持久化，请在此调用对应的 API
|
||
},
|
||
|
||
/** 查看详情 */
|
||
viewDetail(row) {
|
||
this.$router.push({ name: 'OutpatientDetail', params: { id: row.id } });
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.outpatient-record {
|
||
padding: 20px;
|
||
}
|
||
</style>
|