122 lines
4.5 KiB
Vue
122 lines
4.5 KiB
Vue
<template>
|
||
<div class="table-box">
|
||
<!-- 原有：处方列表（仅操作列新增“查看报告”按钮） -->
|
||
<ProTable ref="proTable" title="处方列表" :columns="columns" :request-api="getPrescriptionListApi" :row-key="rowKey">
|
||
<!-- 原有：表格头部按钮（不变） -->
|
||
<template #tableHeader>
|
||
<s-button suffix="处方" type="success" @click="handleAddPrescription" />
|
||
</template>
|
||
|
||
<!-- 原有：就诊人类型自定义插槽（不变） -->
|
||
<template #personType="scope">
|
||
<el-space>
|
||
<span v-if="scope.row.personType === 1">公司员工</span>
|
||
<span v-else-if="scope.row.personType === 2">
|
||
员工家属，所属员工：{{ scope.row.employeeName || "未知" }}
|
||
</span>
|
||
<span v-else>未知类型</span>
|
||
</el-space>
|
||
</template>
|
||
|
||
<!-- 关键改动：操作列新增“查看报告”按钮 -->
|
||
<template #operation="{ row }">
|
||
<s-button link :opt="FormOptEnum.VIEW" size="small" @click="handleViewDetail(row.id)">
|
||
查看详情
|
||
</s-button>
|
||
<s-button v-if="row.canEdit" link :opt="FormOptEnum.EDIT" size="small" class="ml-2" @click="handleEdit(row.id)">
|
||
编辑
|
||
</s-button>
|
||
<!-- 新增：触发报告弹窗 -->
|
||
<s-button link :opt="FormOptEnum.VIEW" size="small" class="ml-2" @click="handleOpenReport(row.id)">
|
||
查看报告
|
||
</s-button>
|
||
</template>
|
||
</ProTable>
|
||
|
||
<!-- 原有：处方详情/编辑弹窗（不变） -->
|
||
<PrescriptionDetailDialog v-model:visible="showDetailDialog" :prescription-id="currentPrescriptionId"
|
||
:is-edit="isEdit" @refresh-list="handleRefresh" />
|
||
|
||
<!-- 关键改动：引入独立的报告弹窗组件 -->
|
||
<PrescriptionReportDialog v-model="showReportDialog" :prescription-id="currentReportId" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="PrescriptionModule">
|
||
import { ref } from "vue";
|
||
import ProTable from "@/components/ProTable/index.vue";
|
||
import type { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
|
||
import { prescriptionApi } from "@/api";
|
||
// 原有：引入详情弹窗组件（不变）
|
||
import PrescriptionDetailDialog from "./components/PrescriptionDetailDialog.vue";
|
||
// 关键改动：引入独立的报告弹窗组件
|
||
import PrescriptionReportDialog from "./components/PrescriptionReportDialog.vue";
|
||
import { FormOptEnum } from "@/enums";
|
||
|
||
// 原有：表格ref、详情弹窗状态（不变）
|
||
const proTable = ref<ProTableInstance | null>(null);
|
||
const showDetailDialog = ref(false);
|
||
const currentPrescriptionId = ref<number | undefined>(undefined);
|
||
const isEdit = ref(false);
|
||
|
||
// 关键改动：新增报告弹窗相关状态
|
||
const showReportDialog = ref(false); // 报告弹窗显隐
|
||
const currentReportId = ref<number | undefined>(undefined); // 当前报告对应的处方ID
|
||
|
||
// 原有：就诊人类型选项、表格列配置（不变）
|
||
const personTypeOptions = [
|
||
{ label: "公司员工", value: 1 },
|
||
{ label: "员工家属", value: 2 }
|
||
];
|
||
const columns: ColumnProps<any>[] = [
|
||
{ type: "selection", fixed: "left", width: 80 },
|
||
{ prop: "personName", label: "就诊人", search: { el: "input" } },
|
||
{
|
||
prop: "personType",
|
||
label: "就诊人类型",
|
||
sortable: false,
|
||
enum: personTypeOptions,
|
||
search: { el: "select" }
|
||
},
|
||
{ prop: "visitDate", label: "就诊时间" },
|
||
{ prop: "totalMedicineCost", label: "预估处方药材成本（元）" },
|
||
{ prop: "operation", label: "操作", width: 280, fixed: "right" }
|
||
];
|
||
const rowKey = "id";
|
||
const getPrescriptionListApi = (params: any) => {
|
||
return prescriptionApi.getList(params);
|
||
};
|
||
|
||
// 原有：新增、查看详情、编辑、刷新逻辑（不变）
|
||
const handleAddPrescription = () => {
|
||
currentPrescriptionId.value = undefined;
|
||
isEdit.value = false;
|
||
showDetailDialog.value = true;
|
||
};
|
||
const handleViewDetail = (id: number) => {
|
||
currentPrescriptionId.value = id;
|
||
isEdit.value = false;
|
||
showDetailDialog.value = true;
|
||
};
|
||
const handleEdit = (id: number) => {
|
||
currentPrescriptionId.value = id;
|
||
isEdit.value = true;
|
||
showDetailDialog.value = true;
|
||
};
|
||
const handleRefresh = () => {
|
||
proTable.value?.refresh?.();
|
||
};
|
||
|
||
// 关键改动：新增“打开报告弹窗”方法
|
||
const handleOpenReport = (id: number) => {
|
||
currentReportId.value = id; // 传递当前处方ID给报告组件
|
||
showReportDialog.value = true; // 显示报告弹窗
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 原有样式（不变）：确保操作列按钮不换行 */
|
||
.table-box {
|
||
padding: 16px;
|
||
}
|
||
</style> |