WeiBingJuAdmin/src/views/biz/weibingju/prescription/index.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" />
        <el-button type="primary" @click="handleViewTotalCost">查看处方总价</el-button>
      </template>

      <!-- 原有：就诊人类型自定义插槽（不变） -->
      <template #personType="scope">
        <el-space>
          <div v-if="scope.row.personType === 1" class="flex items-center">
            <span>公司员工</span>
            <el-tag v-if="scope.row.type == 1" type="success" size="small" class="ml-2">领导</el-tag>
            <el-tag v-if="scope.row.type == 2" type="info" size="small" class="ml-2">普通员工</el-tag>
          </div>
          <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" />

    <!-- 处方总价弹窗 -->
    <el-dialog v-model="showTotalCostDialog" title="查看处方总价" width="400px" :close-on-click-modal="false">
      <div style="padding: 20px; text-align: center;">
        <div style="font-size: 16px; color: #606266; margin-bottom: 10px;">预估总药材成本</div>
        <div style="color: #f56c6c; font-size: 32px; font-weight: bold;">
          ¥{{ totalCostData || 0 }}
        </div>
      </div>
      <template #footer>
        <el-button @click="showTotalCostDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </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 showTotalCostDialog = ref(false); // 总价弹窗显隐
const totalCostData = ref<number>(0); // 总价数据

// 原有：就诊人类型选项、表格列配置（不变）
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: "createTime", 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; // 显示报告弹窗
};

// 新增：查看处方总价
const handleViewTotalCost = async () => {
  showTotalCostDialog.value = true;
  try {
    const { data } = await prescriptionApi.getTotalCost();
    totalCostData.value = data || 0;
  } catch (error) {
    console.error("获取处方总价失败:", error);
    totalCostData.value = 0;
  }
};
</script>