| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-tabs v-model="activeTab" @tab-change="handleTabChange"> |
| | | <!-- <el-tab-pane label="采购库存" name="production"> |
| | | <el-tab-pane label="成品库存" name="production"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title ml10">入库日期:</span> |
| | |
| | | clearable |
| | | @change="handleQuery" |
| | | /> |
| | | <span class="search_title ml10">产品名称:</span> |
| | | <span class="search_title ml10">产品大类:</span> |
| | | <el-input |
| | | v-model="searchForm.productCategory" |
| | | style="width: 240px" |
| | |
| | | </div> |
| | | <div> |
| | | <el-button @click="handleOut">导出</el-button> |
| | | <!-- <el-button type="danger" plain @click="handleDelete">删除</el-button>--> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="入库日期" prop="createTime" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="产品名称" prop="productCategory" show-overflow-tooltip /> |
| | | <el-table-column label="销售合同号" prop="salesContractNo" width="180" 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="80" show-overflow-tooltip /> |
| | | <el-table-column label="入库数量" prop="inboundNum" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="已出库数量" prop="totalInboundNum" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="剩余库存" prop="inboundNum0" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="单价(元)" prop="unitPrice" width="150"></el-table-column> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" :page="page.current" |
| | | :limit="page.size" @pagination="paginationChange" /> |
| | | </div> |
| | | </el-tab-pane> --> |
| | | |
| | | <el-tab-pane label="采购库存" name="purchase"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title ml10">产品名称:</span> |
| | | <el-input v-model="searchForm.productCategory" style="width: 240px" placeholder="请输入" clearable /> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button @click="handleOut">导出</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | | <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" |
| | | :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary style="width: 100%" |
| | | :row-class-name="tableRowClassName" :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="产品名称" prop="productCategory" show-overflow-tooltip /> |
| | | <el-table-column label="产品高度" prop="specificationModel" width="100" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <div>{{ scope.row.specificationModel }}{{ scope.row.unit }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="每件数量/支" prop="boxNum" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="入库数量" prop="inboundNum" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="单价(元)/件" prop="taxInclusiveUnitPrice" width="150"></el-table-column> |
| | | <el-table-column label="已出库数量" prop="totalInboundNum" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="剩余库存" prop="inboundNum0" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="纸箱规格" prop="cartonSpecifications" width="150"></el-table-column> |
| | | </el-table> |
| | | <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" :limit="page.size" @pagination="paginationChange" /> |
| | | </div> |
| | | </el-tab-pane> |
| | | |
| | | <el-tab-pane label="成品库存" name="manual"> |
| | | <el-tab-pane label="原料库存" name="purchase"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <!-- <span class="search_title">供应商名称:</span>--> |
| | | <!-- <el-input v-model="searchForm.supplierName" style="width: 240px" placeholder="请输入" @change="handleQuery"--> |
| | | <!-- clearable prefix-icon="Search" />--> |
| | | <span class="search_title ml10">产品名称:</span> |
| | | <el-input v-model="searchForm.productCategory" style="width: 240px" placeholder="请输入" clearable /> |
| | | <span class="search_title ml10">入库日期:</span> |
| | | <el-date-picker |
| | | v-model="searchForm.timeStr" |
| | | type="date" |
| | | placeholder="请选择日期" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | clearable |
| | | @change="handleQuery" |
| | | /> |
| | | <span class="search_title ml10">产品大类:</span> |
| | | <el-input |
| | | v-model="searchForm.productCategory" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button> |
| | | </div> |
| | | <div> |
| | |
| | | <div class="table_list"> |
| | | <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" |
| | | :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary style="width: 100%" |
| | | :row-class-name="tableRowClassName" :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)"> |
| | | :row-class-name="tableRowClassName" |
| | | :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="产品图片" width="100" align="center"> |
| | | <template #default="scope"> |
| | | <img class="barcode-img" :src="javaApiUrl + scope.row.url"></img> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="产品名称" prop="productCategory" show-overflow-tooltip /> |
| | | <el-table-column label="产品高度" prop="specificationModel" width="100" show-overflow-tooltip> |
| | | <template #default="scope"> |
| | | <div>{{ scope.row.specificationModel }}{{ scope.row.unit }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="单价(美元)/件" prop="taxInclusiveUnitPrice" width="150"></el-table-column> |
| | | <el-table-column label="每件数量/支" prop="boxNum" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="入库数量" prop="inboundNum" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="入库日期" prop="createTime" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="采购合同号" prop="purchaseContractNumber" width="180" 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="80" show-overflow-tooltip /> |
| | | <el-table-column label="已出库数量" prop="totalInboundNum" show-overflow-tooltip /> |
| | | <el-table-column label="剩余库存" prop="inboundNum0" show-overflow-tooltip /> |
| | | <el-table-column label="含税单价(元)" prop="taxInclusiveUnitPrice" width="150"></el-table-column> |
| | | <el-table-column label="含税总价(元)" prop="taxInclusiveTotalPrice" width="150"></el-table-column> |
| | | </el-table> |
| | | <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" :limit="page.size" @pagination="paginationChange" /> |
| | | </div> |
| | | </el-tab-pane> |
| | | |
| | | <el-tab-pane label="材料库存" name="manual"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title ml10">入库日期:</span> |
| | | <el-date-picker |
| | | v-model="searchForm.timeStr" |
| | | type="date" |
| | | placeholder="请选择日期" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | clearable |
| | | @change="handleQuery" |
| | | /> |
| | | <span class="search_title ml10">产品大类:</span> |
| | | <el-input |
| | | v-model="searchForm.productCategory" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button @click="handleOut">导出</el-button> |
| | | <!-- <el-button type="danger" plain @click="handleDelete">删除</el-button>--> |
| | | </div> |
| | | </div> |
| | | <div class="table_list"> |
| | | <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" |
| | | :expand-row-keys="expandedRowKeys" :row-key="row => row.id" show-summary style="width: 100%" |
| | | :row-class-name="tableRowClassName" |
| | | :summary-method="summarizeMainTable" height="calc(100vh - 18.5em)"> |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="入库日期" prop="inboundDate" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="批次号" prop="code" width="130" 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="80" show-overflow-tooltip /> |
| | | <el-table-column label="物品类型" prop="itemType" width="120" show-overflow-tooltip /> |
| | | <el-table-column label="已出库数量" prop="totalInboundNum" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="剩余库存" prop="inboundNum0" width="100" show-overflow-tooltip /> |
| | | <el-table-column label="纸箱规格" prop="cartonSpecifications" width="150"></el-table-column> |
| | | <!-- <el-table-column fixed="right" label="操作" width="100" align="center"> |
| | | <el-table-column label="单价(元)" prop="taxInclusiveUnitPrice" width="150"></el-table-column> |
| | | <el-table-column label="总价(元)" prop="taxInclusiveTotalPrice" width="150"></el-table-column> |
| | | <el-table-column fixed="right" label="操作" width="100" align="center"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" size="small" @click="openForm('edit', scope.row);">编辑</el-button> |
| | | </template> |
| | | </el-table-column> --> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" :limit="page.size" @pagination="paginationChange" /> |
| | |
| | | </el-tabs> |
| | | |
| | | <!-- 成品库存弹框 --> |
| | | <FormDiaProduction v-model:dialogFormVisible="productionDialogVisible" :operationType="operationType" |
| | | :formData="form" @submit="submitForm" @close="closeDia" /> |
| | | <FormDiaProduction |
| | | v-model:dialogFormVisible="productionDialogVisible" |
| | | :operationType="operationType" |
| | | :formData="form" |
| | | @submit="submitForm" |
| | | @close="closeDia" |
| | | /> |
| | | |
| | | <!-- 原料库存弹框 --> |
| | | <FormDiaPurchase v-model:dialogFormVisible="purchaseDialogVisible" :operationType="operationType" :formData="form" |
| | | @submit="submitForm" @close="closeDia" /> |
| | | <FormDiaPurchase |
| | | v-model:dialogFormVisible="purchaseDialogVisible" |
| | | :operationType="operationType" |
| | | :formData="form" |
| | | @submit="submitForm" |
| | | @close="closeDia" |
| | | /> |
| | | |
| | | <!-- 材料库存弹框 --> |
| | | <FormDiaManual v-model:dialogFormVisible="manualDialogVisible" :operationType="operationType" :formData="form" |
| | | @submit="submitForm" @close="closeDia" /> |
| | | <FormDiaManual |
| | | v-model:dialogFormVisible="manualDialogVisible" |
| | | :operationType="operationType" |
| | | :formData="form" |
| | | @submit="submitForm" |
| | | @close="closeDia" |
| | | /> |
| | | </div> |
| | | <el-dialog v-model="barcodeDia" title="产品信息" width="70%" @close="closeBarcodeDia"> |
| | | <div> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <div class="barcode-item"> |
| | | <div class="barcode-label">名称</div> |
| | | <div class="barcode-value">{{ barcodeDetail.barcode }}</div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="barcode-item"> |
| | | <div class="barcode-label">单价</div> |
| | | <div class="barcode-value">xxx元</div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <div class="barcode-item"> |
| | | <div class="barcode-label">产品高度</div> |
| | | <div class="barcode-value">222cm</div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="barcode-item"> |
| | | <div class="barcode-label">数量/件</div> |
| | | <div class="barcode-value">120</div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <div class="barcode-item"> |
| | | <div class="barcode-label">规格</div> |
| | | <div class="barcode-value">12*20*30</div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button @click="closeBarcodeDia">关闭</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script setup> |
| | |
| | | import { |
| | | updateManagement, updateManagementByCustom, updateStockIn |
| | | } from "@/api/inventoryManagement/stockIn.js"; |
| | | const javaApiUrl = __BASE_API__; |
| | | |
| | | // 导入三个独立的弹框组件 |
| | | import FormDiaProduction from './components/FormDiaProduction.vue' |
| | |
| | | const loading = ref(false); |
| | | // 用户信息表单弹框数据 |
| | | const operationType = ref('') |
| | | const activeTab = ref('purchase') |
| | | const activeTab = ref('production') |
| | | |
| | | // 三个独立的弹框显示状态 |
| | | const productionDialogVisible = ref(false) |
| | |
| | | // supplierName: '', |
| | | productCategory: '', |
| | | customerName: '', |
| | | timeStr: getCurrentDate(), |
| | | }, |
| | | form: { |
| | | supplierId: null, |
| | |
| | | const buildQueryParams = () => { |
| | | const params = { |
| | | ...page, |
| | | timeStr: searchForm.value.timeStr, |
| | | } |
| | | params.productCategory = searchForm.value.productCategory |
| | | if (activeTab.value === 'production') { |
| | |
| | | page.current = 1 |
| | | // searchForm.value.supplierName = '' |
| | | searchForm.value.customerName = '' |
| | | searchForm.value.timeStr = '' |
| | | selectedRows.value = [] |
| | | searchForm.value.productCategory = '' |
| | | getList() |
| | |
| | | delete submitData.taxExclusiveTotalPrice |
| | | |
| | | console.log('提交给后端的数据(已移除总价字段):', submitData) |
| | | submitData.inboundNum = parseFloat(submitData.inboundNum) || 0 |
| | | |
| | | // 根据当前标签页调用不同的提交接口 |
| | | let apiCall |
| | | if (activeTab.value === 'production') { |
| | |
| | | const day = String(today.getDate()).padStart(2, '0'); |
| | | return `${year}-${month}-${day}`; |
| | | } |
| | | |
| | | //扫码相关参数 |
| | | const barcodeDia = ref(false); |
| | | const scanBarcodeInput = ref(''); |
| | | const barcodeDetail = ref({}) |
| | | // 扫码函数 |
| | | const scanBarcode = (e) => { |
| | | if (!e || !e.target || !e.target.tagName) { |
| | | return; |
| | | } |
| | | if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') { |
| | | return |
| | | } |
| | | if (e.key === 'Enter') { |
| | | let _value = scanBarcodeInput.value |
| | | getDetail(_value) |
| | | scanBarcodeInput.value = "" |
| | | } else { |
| | | scanBarcodeInput.value += e.key |
| | | } |
| | | } |
| | | const getDetail = (barcode) => { |
| | | barcodeDetail.value = { |
| | | barcode: barcode |
| | | } |
| | | barcodeDia.value = true |
| | | } |
| | | |
| | | const closeBarcodeDia = () => { |
| | | barcodeDia.value = false |
| | | } |
| | | onMounted(() => { |
| | | // 添加扫码枪监听事件 |
| | | // document.addEventListener('keypress', scanBarcode) |
| | | getList() |
| | | // checkStockAndCreatePurchase(); |
| | | // 每小时检查一次库存 |
| | |
| | | // // 组件卸载时清除定时器 |
| | | // clearInterval(intervalId); |
| | | // }); |
| | | }) |
| | | onUnmounted(() => { |
| | | // 移除键盘监听事件 |
| | | document.removeEventListener('keypress', scanBarcode) |
| | | console.log('组件卸载') |
| | | }) |
| | | </script> |
| | | |
| | |
| | | |
| | | :deep(.row-low-stock:hover > td) { |
| | | background-color: #fcd4d4; |
| | | } |
| | | |
| | | .barcode-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 5px 0; |
| | | } |
| | | |
| | | .barcode-img { |
| | | width: 80px; |
| | | height: 80px; |
| | | border-radius: 5px; |
| | | background-color: #F5F5F5; |
| | | } |
| | | </style> |