his/backup/vxetable-migration-20260602/medicationmanagement/statisticalManagement/medicationStockOutDetails.vue

<template>
  <div class="app-container">
    <el-form
      ref="queryRef"
      :model="queryParams"
      :inline="true"
      label-width="100px"
    >
      <el-form-item
        label="源仓库："
        prop="sourceLocationId"
        label-width="80px"
      >
        <el-select
          v-model="queryParams.sourceLocationId"
          placeholder="请选择源仓库"
          clearable
          style="width: 150px"
        >
          <el-option
            v-for="supplyStatus in locationIdList" 
            :key="supplyStatus.value"
            :label="supplyStatus.name"
            :value="supplyStatus.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="目的仓库："
        prop="purposeLocationId"
        label-width="100px"
      >
        <el-select
          v-model="queryParams.purposeLocationId"
          placeholder="请选择目的仓库"
          clearable
          style="width: 150px"
        >
          <el-option
            v-for="supplyStatus in locationIdList" 
            :key="supplyStatus.value"
            :label="supplyStatus.name"
            :value="supplyStatus.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="制单日期：">
        <el-date-picker
          v-model="occurrenceTime"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 300px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>
    <el-row
      :gutter="10"
      style="margin-left: 20px; margin-right: 0px; margin-bottom: 5px"
    >
      <el-col :span="1.5">
        <!-- v-hasPermi="['system:user:import']" -->
        <el-button
          type="primary"
          plain
          icon="Search"
          @click="handleQuery"
        >
          查询
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <!-- v-hasPermi="['system:user:export']" -->
        <el-button
          type="warning"
          plain
          icon="CircleClose"
          @click="handleClear"
        >
          重置
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <!-- v-hasPermi="['system:user:export']" -->
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
        >
          导出
        </el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="medicationStockOutDetailsList"
      height="calc(100vh - 300px)"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      />
      <el-table-column
        key="medinsCode"
        label="医疗机构代码"
        align="center"
        prop="medinsCode"
        width="220"
        :show-overflow-tooltip="true"
      />
      <!-- itemTable -->
      <el-table-column
        key="orgCode"
        label="组织机构名称"
        align="center"
        prop="orgCode"
        width="220"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        key="nationalMedicineCode"
        label="国家药品编码(YPID)"
        align="center"
        prop="nationalMedicineCode"
        width="220"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        key="busNo"
        label="院内药品唯一码"
        align="center"
        prop="busNo"
        width="220"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        key="provincialMedicineConcentratedCode"
        label="省级药品集中采购平台药品编码"
        align="center"
        prop="provincialMedicineConcentratedCode"
        width="220"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        key="productName"
        label="产品名称"
        align="center"
        prop="productName"
        width="220"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        key="totalQuantity"
        label="出库数量"
        align="center"
        prop="totalQuantity"
        :show-overflow-tooltip="true"
        width="220"
      />
      <el-table-column
        key="minUnit"
        label="单位"
        align="center"
        prop="minUnit"
        :show-overflow-tooltip="true"
        width="220"
      />
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="medicationStockOutDetails">
import {getPharmacyCabinetList, getReportMedicationStockOutDetails,} from './statisticalManagent';
import {ElMessage} from 'element-plus';

const { proxy } = getCurrentInstance();
const medicationStockOutDetailsList = ref([]);
const loading = ref(false);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const approvalTime = ref([]);
const supplierListOptions = ref([]);
const locationIdList = ref([]);
const occurrenceTime = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    searchKey: undefined,
    sourceLocationId:undefined,
    purposeLocationId:undefined,
    occurrenceTimeSTime: undefined,
    occurrenceTimeETime: undefined,
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

function getList() {
    if(queryParams.value.sourceLocationId==null||
     queryParams.value.purposeLocationId==null||
     queryParams.value.occurrenceTimeSTime==null||
     queryParams.value.occurrenceTimeETime==null){
      ElMessage.warning("请构建完整的查询条件");
     }else{
  loading.value = true;
  getReportMedicationStockOutDetails(queryParams.value).then((res) => {
    loading.value = false;
    medicationStockOutDetailsList.value = res.data.records;
    total.value = res.data.total;
  });}
}
function getPharmacyCabinetLists() {
  getPharmacyCabinetList().then((response) => {
    locationIdList.value = response.data
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.occurrenceTimeSTime =
  occurrenceTime.value && occurrenceTime.value.length == 2
      ? occurrenceTime.value[0]
      : "";
  queryParams.value.occurrenceTimeETime =
    occurrenceTime.value && occurrenceTime.value.length == 2
      ? occurrenceTime.value[1]
      : "";
  getList();
}
function handleClear() {
  // 清空查询条件
  occurrenceTime.value = '';
  proxy.resetForm('queryRef');
  medicationStockOutDetailsList.value = [];
  total.value = 0;
}
// 导出
function handleExport() {
  proxy.downloadGet(
    '/report-manage/report/excel-out/2',
    {
      ...queryParams.value,
    },
    `药品调拨详情_${proxy.formatDateStr(new Date(), 'YYYY-MM-DD')}.xlsx`
  );
}

// getList();
getPharmacyCabinetLists();
</script>
<style scoped>
.custom-tree-node {
  display: flex;
  align-items: center;
}

.title {
  font-weight: bold;
  font-size: large;
  margin-bottom: 10px;
}
</style>