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

<!--入库管理-->
<template>
  <div>
    <div v-show="!addInboundState.show && !inboundDetailsState.show" class="app-container">
      <div>
        <transition name="fade">
          <el-row :gutter="30" style="height: 50px">
            <el-col :span="10">
              <el-button type="primary" icon="Plus" @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="inbound_order_number" fixed />
          <el-table-column label="仓库名称" align="center" prop="warehouse_name" />
          <el-table-column label="库房名称" align="center" prop="room_name" />
          <el-table-column label="类型" align="center" prop="type">
            <template #default="scope">
              <dict-tag :options="sys_store_type" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" align="center" prop="supplier_name" />
          <el-table-column label="是否捐赠" align="center" prop="is_donation" >
            <template #default="scope">
              <dict-tag :options="sys_yes_no" :value="scope.row.is_donation" />
            </template>
          </el-table-column>
          <el-table-column label="采购单号" align="center" prop="purchase_order_number" />
          <el-table-column label="运单号" align="center" prop="transport_order_number" />
<!--          <el-table-column label="捐赠人联系电话" align="center" prop="donator_phone" width="120" />-->
<!--          <el-table-column label="捐赠人姓名" align="center" prop="donator_name" width="120" />-->
<!--          <el-table-column label="审核人" align="center" prop="reviewer" width="120" />-->
<!--          <el-table-column label="企业名称" align="center" prop="enterprise_name" width="120" />-->
<!--          <el-table-column label="企业编号" align="center" prop="enterprise_code" width="120" />-->
<!--          <el-table-column label="分级信息" align="center" prop="grading_info" width="120" />-->
<!--          <el-table-column label="创建时间" align="center" prop="creation_time" width="120" />-->
<!--          <el-table-column label="备注" align="center" prop="remark" width="120" />-->
<!--          <el-table-column label="供应商编号" align="center" prop="supplier_code" width="120" />-->
<!--          <el-table-column label="完成时间" align="center" prop="completion_time" width="120" />-->


<!--          <el-table-column label="计划完成时间" align="center" prop="planned_completion_time" width="120" />-->
<!--          <el-table-column label="仓库名称" align="center" prop="warehouse_name" width="120" />-->
<!--          <el-table-column label="新增时间" align="center" prop="new_time" width="120" />-->
<!--          <el-table-column label="入库单" align="center" fixed="right" width="88" class-name="small-padding fixed-width"/>-->
          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button type="text" class="common-btn-text-primary" @click="handleWrite(scope.row)">查看</el-button>
                <el-button type="text" class="common-btn-text-primary" @click="goToInventory(scope.row.inbound_order_number)">明细</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"
          @pagination="getListData"
        />
      </div>
    </div>
    <addInbound v-if="addInboundState.show" @close="handleCancel" @confirm="submitRefresh" />
    <InboundDetails v-if="inboundDetailsState.show" :id="detailId" @close="handleCancel" />
  </div>
</template>
<script setup lang="ts">
import addInbound from "./addInbound.vue";
import InboundDetails from "./InboundDetails.vue";
import { ref, reactive, onMounted, onBeforeUnmount, toRefs } from 'vue';
import { getWarehousingEntry } from '@/api/comprehensiveGuarantee/materialReserveManagement/InboundManagement';
import { parseTime } from '@/utils/ruoyi';
import InventoryDetails from '@/views/comprehensiveGuarantee/MaterialReserveManagement/InventoryDetails.vue';
import router from '@/router';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_store_type, sys_yes_no } = toRefs<any>(proxy?.useDict('sys_store_type','sys_yes_no'));
// 定义响应式变量
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,
});
let detailId = ref('');
const tableData = ref([]);
const getListData = () => {
  getWarehousingEntry(queryParams).then((res) => {
    res.data.forEach((item) => {
      item.completion_time = parseTime(item.completion_time);
      item.creation_time = parseTime(item.creation_time);
      item.new_time = parseTime(item.new_time);
      item.planned_completion_time = parseTime(item.planned_completion_time);
    })
    tableData.value = res.data;
    total.value = res.total;
  })
}

const goToInventory = (id) => {
  router.push({ path:'/comprehensiveGuarantee/MaterialReserveManagement/InventoryDetails', query: { id } });
};

const submitRefresh = () => {
  handleCancel();
  queryParams.page = 1;
  getListData();
}

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


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

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

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

const handleWrite = (item) => {
  inboundDetailsState.show=true;
  detailId = item.id;
};

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

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

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

<style lang="scss" scoped></style>