<template>
|
<div class="app-container">
|
<el-tabs v-model="activeTab" @tab-change="handleTabChange">
|
<el-tab-pane label="入库明细" name="in" />
|
<el-tab-pane label="出库明细" name="out" />
|
</el-tabs>
|
|
<div class="search_form">
|
<div>
|
<span class="search_title">产品大类：</span>
|
<el-input v-model="searchForm.productCategory" style="width: 220px" placeholder="请输入" clearable @change="handleQuery" />
|
<el-button type="primary" style="margin-left: 10px" @click="handleQuery">搜索</el-button>
|
<el-button @click="resetQuery">重置</el-button>
|
</div>
|
</div>
|
|
<div class="table_list">
|
<el-table :data="tableData" border v-loading="tableLoading" height="calc(100vh - 20em)">
|
<el-table-column align="center" label="序号" type="index" width="60" />
|
<el-table-column v-if="activeTab === 'in'" label="入库日期" prop="inboundDate" width="120" />
|
<el-table-column v-else label="出库日期" prop="createTime" width="160" />
|
<el-table-column label="批次号" prop="code" width="140" show-overflow-tooltip />
|
<el-table-column label="产品大类" prop="productCategory" show-overflow-tooltip />
|
<el-table-column label="规格型号" prop="specificationModel" show-overflow-tooltip />
|
<el-table-column label="单位" prop="unit" width="70" />
|
<el-table-column v-if="activeTab === 'in'" label="入库数量" prop="inboundNum" width="110" />
|
<el-table-column v-else label="出库数量" prop="inboundNum" width="110" />
|
<el-table-column v-if="activeTab === 'out'" label="领用数量" prop="requisitionNum" width="110" />
|
<el-table-column label="单价(元)" prop="taxInclusiveUnitPrice" width="120" />
|
<el-table-column label="总价(元)" prop="taxInclusiveTotalPrice" width="130" />
|
<el-table-column label="经手人" prop="createBy" width="100" show-overflow-tooltip />
|
</el-table>
|
<pagination v-show="page.total > 0" :total="page.total" layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current" :limit="page.size" @pagination="paginationChange" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import { getInPageByCustom } from "@/api/inventoryManagement/stockIn.js";
|
import { getStockOutPage } from "@/api/inventoryManagement/stockOut.js";
|
import { getCurrentDate } from "@/utils/index.js";
|
|
const activeTab = ref("in");
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const page = reactive({ current: 1, size: 100, total: 0 });
|
const searchForm = reactive({ productCategory: "", timeStr: getCurrentDate() });
|
|
const getList = () => {
|
tableLoading.value = true;
|
const params = { ...searchForm, ...page };
|
if (activeTab.value === "in") {
|
params.flag = false;
|
getInPageByCustom(params).then((res) => {
|
tableLoading.value = false;
|
tableData.value = (res.data && res.data.records) || [];
|
page.total = (res.data && res.data.total) || 0;
|
}).catch(() => { tableLoading.value = false; });
|
} else {
|
getStockOutPage(params).then((res) => {
|
tableLoading.value = false;
|
tableData.value = (res.data && res.data.records) || [];
|
page.total = (res.data && res.data.total) || 0;
|
}).catch(() => { tableLoading.value = false; });
|
}
|
};
|
const handleQuery = () => { page.current = 1; getList(); };
|
const resetQuery = () => { searchForm.productCategory = ""; handleQuery(); };
|
const paginationChange = (obj) => { page.current = obj.page; page.size = obj.limit; getList(); };
|
const handleTabChange = () => { page.current = 1; getList(); };
|
|
onMounted(() => { getList(); });
|
</script>
|
|
<style scoped lang="scss">
|
.table_list { margin-top: unset; }
|
</style>
|
