his/openhis-ui-vue3/src/views/drug/inpatientMedicationDispensing/components/MedicationSummary.vue

<template>
  <div class="med-summary-container">
    <div style="width: 40%">
      <el-card style="height: 80vh">
        <template #header>
          {{ '汇总单' }}
        </template>
        <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
          <div>
            <el-input style="width: 250px" v-model="queryParams.searchKey" placeholder="单据号">
              <template #append>
                <el-button icon="Search" @click="getSummaryList" />
              </template>
            </el-input>
            <el-select
              placeholder="发放状态"
              style="width: 250px; margin-left: 10px"
              v-model="queryParams.statusEnum"
              @change="getSummaryList"
            >
              <el-option
                v-for="item in statusEnumOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
          <div>
            <el-date-picker
              v-model="queryParams.applyTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 400px"
              value-format="YYYY-MM-DD"
              :clearable="false"
            />
            <el-button type="primary" @click="getSummaryList" style="margin-left: 10px">搜索</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </div>
          <div>
            <el-button type="primary" plain @click="handleSend">批量发药</el-button>
            <el-button type="warning" plain>批量作废</el-button>
          </div>
        </div>
        <el-table
          :data="summaryList"
          max-height="85vh"
          border
          ref="summaryTableRef"
          highlight-current-row
          @row-click="getDetails"
        >
          <el-table-column type="selection" align="center" width="50" />
          <el-table-column prop="busNo" label="单据号" align="center" width="150" />
          <el-table-column prop="applicantName" label="申请人" align="center" width="100" />
          <el-table-column prop="locationName" label="发药药房" align="center" />
          <el-table-column prop="statusEnum_enumText" label="状态" align="center" />
          <el-table-column prop="applyTime" label="汇总日期" align="center" width="140">
            <template #default="scope">
              {{ scope.row.applyTime ? parseTime(scope.row.applyTime, '{y}-{m}-{d}') : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleSend(scope.row)">发药</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- <el-row :gutter="10" justify="end" align="middle" style="margin-bottom: 10px">
      <el-button type="danger" plain icon="Refresh" @click="handleSendDrug" :disabled="!busNo">
        发药
      </el-button>
      <el-button type="primary" plain icon="Download" @click="handleExport" :disabled="!busNo">
        导出
      </el-button>
    </el-row> -->
    <div style="width: 59%">
      <el-card style="height: 80vh">
        <template #header>
          {{ '汇总单详情' }}
        </template>
        <el-table
          :data="summaryDetailsData"
          style="width: 100%"
          border
          v-loading="loading"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column type="index" label="序号" min-width="50" />
          <el-table-column prop="itemName" label="项目名称" min-width="150">
            <template #default="scope">
              {{ scope.row.itemName || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="totalVolume" label="规格" min-width="120">
            <template #default="scope">
              {{ scope.row.totalVolume || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="lotNumber" label="批次号" min-width="100">
            <template #default="scope">
              {{ scope.row.lotNumber || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" min-width="80" align="center">
            <template #default="scope">
              {{ scope.row.itemQuantity + ' ' + scope.row.minUnitCode_dictText }}
            </template>
          </el-table-column>
          <el-table-column prop="categoryCode_dictText" label="药品类型" min-width="100">
            <template #default="scope">
              {{ scope.row.categoryCode_dictText || '-' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="manufacturerText"
            label="生产厂家"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              {{ scope.row.manufacturerText || '-' }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref} from 'vue';
import {getFromSummaryDetails, getFromSummaryInit, getFromSummaryList, totalSendDrug,} from './api.js';

const { proxy } = getCurrentInstance();
const statusEnumOptions = ref([]);
const summaryList = ref([]);
const queryParams = ref({
  applyTime: [
    proxy.formatDateStr(new Date().setMonth(new Date().getMonth() - 1), 'YYYY-MM-DD'),
    proxy.formatDateStr(new Date(), 'YYYY-MM-DD'),
  ],
});

// 定义组件属性
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  selectedId: {
    type: String,
    default: '',
  },
  busNo: {
    type: String,
    default: '',
  },
});

const selectedRows = ref([]);
const summaryDetailsData = ref([]);
// 定义loading状态
const loading = ref(false);

getSummaryList();
// 获取汇总单信息
function getSummaryList() {
  queryParams.value.applyTimeSTime = queryParams.value.applyTime[0] + ' 00:00:00';
  queryParams.value.applyTimeETime = queryParams.value.applyTime[1] + ' 23:59:59';
  getFromSummaryList(queryParams.value).then((res) => {
    summaryList.value = res.data.records;
  });
}

// 重置查询条件
function resetQuery() {
  queryParams.value.applyTime = [
    proxy.formatDateStr(new Date().setMonth(new Date().getMonth() - 1), 'YYYY-MM-DD'),
    proxy.formatDateStr(new Date(), 'YYYY-MM-DD'),
  ];
  queryParams.value.searchKey = '';
  queryParams.value.statusEnum = '';
  getSummaryList();
}

function getDetails(row) {
  loading.value = true;
  getFromSummaryDetails({ summaryNo: row.busNo }).then((res) => {
    summaryDetailsData.value = res.data;
    loading.value = false;
  });
}

// 发药
function handleSend(row) {
  let sendList = [];
  if (row.busNo) {
    sendList.push(row.busNo);
  } else {
    proxy.$refs['summaryTableRef'].getSelectionRows().forEach((item) => {
      sendList.push(item.busNo);
    });
  }
  console.log(sendList);

  totalSendDrug(sendList).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess('操作成功');
      getSummaryList();
    }
  });
}

// 获取发药状态
const getStatusOption = async () => {
  try {
    const res = await getFromSummaryInit();
    statusEnumOptions.value = res.data.dispenseStatusOptions;
  } catch (error) {}
};
getStatusOption();

// 定义暴露给父组件的数据和方法
defineExpose({
  selectedRows,
});
</script>

<style lang="scss" scoped>
.med-summary-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.medicationTableDetail {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .buttonGroup {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
    gap: 10px;
    margin-right: 20px;

    :deep(.el-button) {
      padding: 6px 16px;
      font-size: 14px;
    }
  }
}
</style>