his/openhis-ui-vue3/src/views/inpatientNurse/medicalOrderProofread/components/prescriptionList.vue

<template>
  <div style="height: calc(100vh - 126px)">
    <div
      style="
        height: 51px;
        border-bottom: 2px solid #e4e7ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div>
        <el-radio-group v-model="type" class="ml20" @change="handleRadioChange">
          <el-radio :label="1">全部</el-radio>
          <el-radio :label="2">长期</el-radio>
          <el-radio :label="3">临时</el-radio>
        </el-radio-group>
        <el-button class="ml20" type="primary" plain @click="handleGetPrescription">
          查询
        </el-button>
      </div>
      <div>
        <span class="descriptions-item-label">全选：</span>
        <el-switch v-model="chooseAll" @change="handelSwitchChange" />
        <el-button class="ml20" type="primary" @click="handleCheck"> 核对通过 </el-button>
        <el-button class="ml20 mr20" type="danger" @click="handleCancel"> 退回 </el-button>
      </div>
    </div>
    <div
      style="padding: 10px; background-color: #eef9fd; height: 100%; overflow-y: auto"
      v-loading="loading"
    >
      <el-collapse
        v-model="activeNames"
        expand-icon-position="left"
        v-if="prescriptionList.length > 0"
        style="
          border-bottom: 0px;
          border-top: 0px;
          border-radius: 0px;
          overflow-y: auto;
          max-height: calc(100vh - 200px);
        "
      >
        <el-collapse-item
          v-for="(item, index) in prescriptionList"
          :key="index"
          :name="item[0].encounterId"
          style="
            border: 2px solid #e4e7ed;
            border-radius: 8px;
            margin-bottom: 10px;
            overflow: hidden;
          "
        >
          <template #title>
            <div style="display: flex; justify-content: space-between; align-items: center">
              <div>
                <span>{{ item[0].bedName + '【' + item[0].busNo + '】' }}</span>
                <span>
                  {{
                    item[0].patientName + ' / ' + item[0].genderEnum_enumText + ' / ' + item[0].age
                  }}
                </span>
                <el-tag style="margin-left: 10px">{{ item[0].contractName }}</el-tag>
                <span style="margin-left: 30px; font-weight: 600">
                  {{ item[0].conditionNames }}
                </span>
              </div>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  gap: 20px;
                  align-items: center;
                  margin-right: 20px;
                "
              >
                <div style="display: inline-block; margin-right: 10px">
                  <span class="descriptions-item-label">住院医生：</span>
                  <span>{{ item[0].requesterId_dictText }}</span>
                </div>
                <div style="display: inline-block; margin-right: 10px">
                  <div
                    class="descriptions-item-label"
                    style="height: 20px; line-height: 20px; text-align: center; margin: 0"
                  >
                    预交金额
                  </div>
                  <div
                    style="
                      height: 20px;
                      line-height: 20px;
                      text-align: center;
                      font-size: 15px;
                      color: #ec8c43;
                    "
                  >
                    {{ item[0].balanceAmount?.toFixed(2) }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <el-table
            :data="item"
            border
            :ref="'tableRef' + index"
            :header-cell-style="{ background: '#eef9fd !important' }"
            @select="handleSelectionChange"
          >
            <el-table-column type="selection" align="center" width="50" />
            <el-table-column label="组" align="center" width="60" prop="groupIcon" />
            <el-table-column label="类型" align="center" prop="therapyEnum_enumText" width="80">
              <template #default="scope">
                <span :style="scope.row.therapyEnum == '1' ? 'color: #a6745c' : 'color: #3787a5'">
                  {{ scope.row.therapyEnum_enumText }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="医嘱内容" prop="adviceName">
              <template #default="scope">
                <span>
                  {{ scope.row.adviceName }}
                </span>
                <template v-if="scope.row.adviceTable == 'med_medication_request'">
                  <span>
                    {{ ' 【' + scope.row.volume + '】' }}
                  </span>
                  <span style="color: #447c95 !important">
                    {{
                      '(' +
                      scope.row.methodCode_dictText +
                      ' ' +
                      scope.row.dose +
                      scope.row.doseUnitCode_dictText +
                      ' ' +
                      scope.row.rateCode_dictText +
                      ')'
                    }}
                  </span>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="执行科室" prop="positionName" width="230" />
            <el-table-column label="签发时间" prop="requestTime" width="230" />
          </el-table>
        </el-collapse-item>
      </el-collapse>
      <el-empty v-else description="点击查询获取患者医嘱信息"></el-empty>
    </div>
  </div>
</template>
<script setup>
import {adviceVerify, cancel, getPrescriptionList} from './api';
import {patientInfoList} from '../../components/store/patient.js';
import {formatDateStr} from '@/utils/index';

const activeNames = ref([]);
const prescriptionList = ref([]);
const deadline = ref(formatDateStr(new Date(), 'YYYY-MM-DD') + ' 23:59:59');
const type = ref(1);
const { proxy } = getCurrentInstance();
const loading = ref(false);
const chooseAll = ref(false);
const props = defineProps({
  requestStatus: {
    type: Number,
    default: 2,
  },
});

function handleRadioChange() {
  handleGetPrescription();
}

function handleGetPrescription() {
  if (patientInfoList.value.length > 0) {
    loading.value = true;
    let encounterIds = patientInfoList.value.map((i) => i.encounterId).join(',');
    getPrescriptionList({
      encounterIds: encounterIds,
      requestStatus: props.requestStatus,
      ...(type.value !== undefined ? { therapyEnum: type.value } : {}),
      pageSize: 10000,
      pageNo: 1,
    }).then((res) => {
      // try {
      // 根据encounterId分组
      const groupedPrescriptions = res.data.records.reduce((groups, prescription) => {
        const encounterId = prescription.encounterId;
        if (!groups[encounterId]) {
          groups[encounterId] = [];
        }
        if (!activeNames.value.includes(encounterId)) {
          activeNames.value.push(encounterId);
        }
        groups[encounterId].push(prescription);
        return groups;
      }, {});

      // 将分组结果转换为数组形式
      prescriptionList.value = Object.values(groupedPrescriptions);
      console.log(prescriptionList.value, '1111');
      console.log('@@@@@=======>', JSON.stringify(prescriptionList.value));
      loading.value = false;
      getGroupMarkers();
    });
    chooseAll.value = false;
  } else {
    proxy.$message.warning('请选择患者');
  }
}

// 分组标记处理
function getGroupMarkers() {
  // 初始化所有行的 groupIcon 为 null
  prescriptionList.value.forEach((item) => {
    item.forEach((prescription) => {
      prescription.groupIcon = null;
    });
  });
  console.log('prescriptionList====>', JSON.stringify(prescriptionList.value));
  // 创建一个映射来存储每个 groupId 对应的行索引
  const groupMap = {};

  // 遍历处方列表，按 groupId 分组（忽略无 groupId 的项）
  prescriptionList.value.forEach((item, index) => {
    item.forEach((prescription, idnexNum) => {
      if (prescription.groupId) {
        if (!groupMap[prescription.groupId]) {
          groupMap[prescription.groupId] = [];
        }
        groupMap[prescription.groupId].push(idnexNum);
      }
    });
  });
  // 为每个组设置 groupIcon
  Object.values(groupMap).forEach((indices) => {
    // 只有当组内元素大于1个时才需要显示分组标记
    if (indices.length > 1) {
      let iconArrayIndex = 0;
      indices.forEach((index, i) => {
        prescriptionList.value.forEach((itemArray, index1) => {
          itemArray.forEach((item, index2) => {
            if (index2 === index) {
              iconArrayIndex++;
              if (iconArrayIndex == 1) {
                item.groupIcon = '┏';
              } else if (iconArrayIndex == indices.length) {
                item.groupIcon = '┗';
              } else {
                item.groupIcon = '┃';
              }
            }
          });
        });
      });
    }
  });
  console.log('prescriptionList====>', JSON.stringify(prescriptionList.value));
}

// 选择框改变时的处理
function handleSelectionChange(selection, row) {}

/**
 * 核对通过
 */
function handleCheck() {
  let list = getSelectRows();
  if (list.length > 0) {
    adviceVerify(list).then((res) => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess(res.msg);
        handleGetPrescription();
      }
    });
    console.log(list, 'list');
  } else {
    proxy.$message.warning('请先选择医嘱信息');
  }
}

/**
 * 退回
 */
function handleCancel() {
  let list = getSelectRows();
  if (list.length > 0) {
    // 校验已发药的医嘱不允许退回
    let dispensedItems = list.filter(item => item.dispenseStatus === 4);
    if (dispensedItems.length > 0) {
      proxy.$message.error('该医嘱已发药，无法退回');
      return;
    }
    cancel(list).then((res) => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess(res.msg);
        handleGetPrescription();
      }
    });
    console.log(list, 'list');
  } else {
    proxy.$message.warning('请先选择医嘱信息');
  }
}

function getSelectRows() {
  // 获取选中的医嘱信息
  let list = [];
  prescriptionList.value.forEach((item, index) => {
    list = [...list, ...proxy.$refs['tableRef' + index][0].getSelectionRows()];
  });
  return list.map((item) => {
    return {
      requestId: item.requestId,
      requestTable: item.adviceTable,
    };
  });
}

function handelSwitchChange(value) {
  prescriptionList.value.forEach((item, index) => {
    proxy.$refs['tableRef' + index][0].toggleAllSelection();
  });
}

/**
 * 计算两个日期之间的所有日期（包含起始和结束日期）
 * @param {string|Date} startDate - 开始日期
 * @param {string|Date} endDate - 结束日期
 * @returns {Array<string>} 格式为MM-DD的日期数组
 */
function getDateRange(startDate, endDate) {
  const start = new Date(startDate);
  const end = new Date(endDate);

  // 重置时间部分，只保留日期
  start.setHours(0, 0, 0, 0);
  end.setHours(0, 0, 0, 0);

  const dates = [];
  const current = new Date(start);

  // 循环添加日期直到结束日期
  while (current <= end) {
    // 格式化为MM-DD
    const month = String(current.getMonth() + 1).padStart(2, '0');
    const day = String(current.getDate()).padStart(2, '0');
    dates.push(`${month}-${day}`);

    // 移动到下一天
    current.setDate(current.getDate() + 1);
  }
  return dates;
}

// 处理后端返回的时间集合
function handleTime() {}

defineExpose({
  handleGetPrescription,
});
</script>

<style scoped>
.el-collapse-icon-position-left :deep(.el-collapse-item__header) {
  padding: 10px;
}

:deep(.el-collapse-item__wrap) {
  padding: 10px;
}

/* 表头背景色 */
:deep(.prescription-table .el-table__header th) {
  background-color: #eef9fd !important;
}

:deep(.el-table__row:hover > td) {
  background-color: #eef9fd !important;
}
</style>