yjhtgl-web/src/views/comprehensiveGuarantee/MaterialReserveManagement/WarehouseManagement.vue

<!--库房管理-->
<template>
  <div>
    <div v-show="!addWarehouseState.show && !outboundDetailsState.show" class="app-container">
      <div>
        <transition name="fade">
          <el-row :gutter="30" style="height: 50px">
            <el-col :span="10">
              <el-button type="primary" @click="handleAdd">新增</el-button>
              <el-button type="primary" @click="handleAdd">数据导入</el-button>
            </el-col>
          </el-row>
        </transition>
        <el-table ref="multipleTable" v-loading="loading" :data="tableData" border :max-height="maxHeight" style="width: 96%">
          <el-table-column label="库房名称" align="center" prop="warehouse_name" width="120" show-overflow-tooltip/>
          <el-table-column label="所在仓库" align="center" prop="warehouse_location" width="120" show-overflow-tooltip/>
          <el-table-column label="库房面积(平方米)" align="center" prop="warehouse_area_square_meters" width="120" show-overflow-tooltip/>
          <el-table-column label="可用仓储面积(平方米)" align="center" prop="available_warehouse_area_square_meters" width="120" show-overflow-tooltip/>
          <el-table-column label="高度(米)" align="center" prop="height_meters" width="120" show-overflow-tooltip/>
          <el-table-column label="库房容积(立方米)" align="center" prop="warehouse_volume_cubic_meters" width="120" show-overflow-tooltip/>
          <el-table-column label="可用库房容积(立方米)" align="center" prop="available_warehouse_volume_cubic_meters" width="120" show-overflow-tooltip/>
          <el-table-column label="保管类型" align="center" prop="storage_type" width="120" show-overflow-tooltip/>
          <el-table-column label="等级" align="center" prop="grade" width="120" show-overflow-tooltip/>
          <el-table-column label="存放类型" align="center" prop="storage_placement_type" width="120" show-overflow-tooltip/>
          <el-table-column label="库存确认最新时间" align="center" prop="inventory_confirmation_latest_time" width="120" show-overflow-tooltip/>
          <el-table-column label="操作" align="center" fixed="right" width="88" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button type="text" class="common-btn-text-primary" @click="handleWrite">查看</el-button>
              <el-button type="text" class="common-btn-text-primary" @click="handleView">明细</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @change-page="handlePaginationChange"
        />
      </div>
    </div>
    <addWarehouse v-if="addWarehouseState.show" @close="handleCancel" />
    <outboundDetails v-if="outboundDetailsState.show" @close="handleCancel" />
  </div>
</template>
<script setup lang="ts">
import addWarehouse from "./addWarehouse.vue";
import outboundDetails from "./outboundDetails.vue";
import { ref,reactive, onMounted, onBeforeUnmount } from "vue";
// 定义响应式变量
const loading = ref(false);
const maxHeight = ref(window.innerHeight * 0.8);
const total = ref();
// 处理窗口大小变化
const handleResize = () => {
  maxHeight.value = window.innerHeight * 0.8;
};
const queryParams = reactive({
  page: '1',
  pageSize: '10',
});

const tableData = [
  {
    warehouse_name: "一号库房",
    warehouse_location: "北京市海淀区",
    warehouse_area_square_meters: 5000,
    available_warehouse_area_square_meters: 4000,
    height_meters: 10,
    warehouse_volume_cubic_meters: 50000,
    available_warehouse_volume_cubic_meters: 40000,
    storage_type: "常温保管",
    grade: "A级",
    storage_placement_type: "地面堆放",
    inventory_confirmation_latest_time: "2023-10-01 14:30:00"
  },
  {
    warehouse_name: "二号库房",
    warehouse_location: "上海市浦东新区",
    warehouse_area_square_meters: 3000,
    available_warehouse_area_square_meters: 2500,
    height_meters: 8,
    warehouse_volume_cubic_meters: 24000,
    available_warehouse_volume_cubic_meters: 20000,
    storage_type: "冷藏保管",
    grade: "B级",
    storage_placement_type: "货架存放",
    inventory_confirmation_latest_time: "2023-09-25 10:15:00"
  },
  {
    warehouse_name: "三号库房",
    warehouse_location: "广州市天河区",
    warehouse_area_square_meters: 2000,
    available_warehouse_area_square_meters: 1800,
    height_meters: 6,
    warehouse_volume_cubic_meters: 12000,
    available_warehouse_volume_cubic_meters: 10800,
    storage_type: "特殊保管",
    grade: "C级",
    storage_placement_type: "托盘存放",
    inventory_confirmation_latest_time: "2023-09-20 08:45:00"
  },
  // 可以继续添加更多测试数据...
];

const addWarehouseState = reactive({
  show: false, // 初始化show为false
});
const outboundDetailsState = reactive({
  show: false, // 初始化show为false
});

const handleAdd = () => {
  addWarehouseState.show = true;
};

const upload = () => {
  // 这里可能需要实现上传逻辑，暂时只是显示WriteForm作为示例
  addGodownState.show = true;
};

const handleCancel = () => {
  addWarehouseState.show = false;
};

const handleWrite = () => {
  outboundDetailsState.show=true;
};

const handleView = () => {
  outboundDetailsState.show=true;
};

const handlePaginationChange = (page: number) => {
  queryParams.page = page;
  // fetchTableData(); //
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

// 在组件卸载前移除窗口大小变化监听器
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
</script>
<style lang="scss" scoped></style>