| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <div> |
| | | <span class="search_title ml10">产品大类:</span> |
| | | <el-input v-model="searchForm.productName" |
| | | style="width: 240px" |
| | | placeholder="请输入" |
| | | clearable/> |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button> |
| | | <div class="search_form search_form--wrap"> |
| | | <div class="search-field"> |
| | | <span class="search_title">产品类型:</span> |
| | | <el-radio-group v-model="productScope" class="qualified-product-scope" @change="onProductScopeChange"> |
| | | <el-radio-button label="成品">成品</el-radio-button> |
| | | <el-radio-button label="其他产品">其他产品</el-radio-button> |
| | | </el-radio-group> |
| | | </div> |
| | | <div> |
| | | <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button> |
| | | <div class="search-field"> |
| | | <span class="search_title">产品名称:</span> |
| | | <el-input |
| | | v-model="searchForm.productName" |
| | | class="search-input" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </div> |
| | | <div class="search-field"> |
| | | <span class="search_title">规格型号:</span> |
| | | <el-input |
| | | v-model="searchForm.model" |
| | | class="search-input" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </div> |
| | | <div class="search-field"> |
| | | <span class="search_title">UID码:</span> |
| | | <el-input |
| | | v-model="searchForm.uidNo" |
| | | class="search-input" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </div> |
| | | <div class="search-field"> |
| | | <span class="search_title">批次号:</span> |
| | | <el-input |
| | | v-model="searchForm.batchNo" |
| | | class="search-input" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </div> |
| | | <div class="search-field search-field--actions"> |
| | | <el-button type="primary" @click="handleQuery">搜索</el-button> |
| | | <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button> |
| | | <el-button type="info" plain icon="Upload" @click="isShowImportModal = true"> |
| | | 导入库存 |
| | | </el-button> |
| | |
| | | <div class="table_list"> |
| | | <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange" |
| | | :expand-row-keys="expandedRowKeys" :row-key="row => row.id" style="width: 100%" |
| | | :row-class-name="tableRowClassName" height="calc(100vh - 18.5em)"> |
| | | :row-class-name="tableRowClassName" height="calc(100vh - 26.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="productName" show-overflow-tooltip /> |
| | | <el-table-column label="规格型号" prop="model" show-overflow-tooltip /> |
| | | <el-table-column label="UID码" prop="uidNo" show-overflow-tooltip /> |
| | | <el-table-column label="批号" prop="batchNo" show-overflow-tooltip /> |
| | | <el-table-column label="生产日期" prop="productionDate" show-overflow-tooltip /> |
| | | <el-table-column label="供应商" prop="customer" show-overflow-tooltip /> |
| | | <el-table-column label="单位" prop="unit" show-overflow-tooltip /> |
| | | <el-table-column label="库存数量" prop="qualitity" show-overflow-tooltip /> |
| | | <el-table-column label="冻结数量" prop="lockedQuantity" show-overflow-tooltip /> |
| | | <el-table-column label="库存预警数量" prop="warnNum" show-overflow-tooltip /> |
| | | <el-table-column label="备注" prop="remark" show-overflow-tooltip /> |
| | | <el-table-column label="最近更新时间" prop="updateTime" show-overflow-tooltip /> |
| | | <el-table-column fixed="right" label="操作" min-width="60" align="center"> |
| | | <el-table-column fixed="right" label="操作" min-width="120" align="center"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" size="small" @click="showSubtractModal(scope.row)" :disabled="scope.row.unLockedQuantity === 0">领用</el-button> |
| | | <el-button link type="primary" size="small" v-if="scope.row.unLockedQuantity > 0" @click="showFrozenModal(scope.row)">冻结</el-button> |
| | |
| | | |
| | | <script setup> |
| | | import pagination from '@/components/PIMTable/Pagination.vue' |
| | | import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue' |
| | | import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue' |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import { getStockInventoryListPage } from "@/api/inventoryManagement/stockInventory.js"; |
| | | const NewStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/New.vue")); |
| | |
| | | const data = reactive({ |
| | | searchForm: { |
| | | productName: '', |
| | | model: '', |
| | | uidNo: '', |
| | | batchNo: '', |
| | | } |
| | | }) |
| | | const { searchForm } = toRefs(data) |
| | | |
| | | // 成品(2) / 其他产品(原材料1、半成品3),与产品类型字典一致;分页接口需支持 productType 或 productTypes |
| | | const productScope = ref('成品') |
| | | |
| | | const getProductScopeParams = () => { |
| | | return { productScope: productScope.value } |
| | | } |
| | | |
| | | const onProductScopeChange = () => { |
| | | page.current = 1 |
| | | getList() |
| | | } |
| | | |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | |
| | | } |
| | | const getList = () => { |
| | | tableLoading.value = true |
| | | getStockInventoryListPage({ ...searchForm.value, ...page }).then(res => { |
| | | getStockInventoryListPage({ ...searchForm.value, ...page, ...getProductScopeParams() }).then(res => { |
| | | tableLoading.value = false |
| | | tableData.value = res.data.records |
| | | total.value = res.data.total |
| | |
| | | type: 'warning', |
| | | } |
| | | ).then(() => { |
| | | proxy.download("/stockInventory/exportStockInventory", {}, '合格库存信息.xlsx') |
| | | proxy.download("/stockInventory/exportStockInventory", { ...searchForm.value, ...getProductScopeParams() }, '合格库存信息.xlsx') |
| | | }).catch(() => { |
| | | proxy.$modal.msg("已取消") |
| | | }) |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .search_form--wrap { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | gap: 12px 16px; |
| | | } |
| | | |
| | | .search-field { |
| | | display: inline-flex; |
| | | align-items: center; |
| | | flex: 0 1 auto; |
| | | min-width: 0; |
| | | gap: 8px; |
| | | |
| | | .search_title { |
| | | flex-shrink: 0; |
| | | white-space: nowrap; |
| | | text-align: right; |
| | | min-width: 4.5em; |
| | | } |
| | | |
| | | .search-input { |
| | | width: 200px; |
| | | } |
| | | |
| | | .qualified-product-scope { |
| | | flex-shrink: 0; |
| | | } |
| | | } |
| | | |
| | | .search-field--actions { |
| | | flex-wrap: wrap; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .qualified-product-scope { |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | :deep(.row-low-stock td) { |
| | | background-color: #fde2e2; |
| | | color: #c45656; |