| | |
| | | <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button> |
| | | </div> |
| | | <div> |
| | | <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button> |
| | | <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button> |
| | | <el-button type="info" plain icon="Upload" @click="isShowImportModal = true"> |
| | | 导入库存 |
| | | </el-button> |
| | | <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" style="width: 100%" |
| | | :row-class-name="tableRowClassName" height="calc(100vh - 18.5em)"> |
| | | :expand-row-keys="expandedRowKeys" :row-key="row => row.id" style="width: 100%" |
| | | :row-class-name="tableRowClassName" 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="productName" show-overflow-tooltip /> |
| | | <el-table-column label="仓库编码" prop="warehouseCode" show-overflow-tooltip /> |
| | | <el-table-column label="仓库" prop="warehouseName" show-overflow-tooltip /> |
| | | <el-table-column label="存货编码" prop="productCode" show-overflow-tooltip /> |
| | | <el-table-column label="存货" prop="productName" show-overflow-tooltip /> |
| | | <el-table-column label="规格型号" prop="model" 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="unit" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="单位(辅单位)" prop="subUnit" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="数量(主单位)" prop="qualitity" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="数量(辅单位)" prop="subQualitity" min-width="100" 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"> |
| | | <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> |
| | | <el-button link type="primary" size="small" v-if="scope.row.lockedQuantity > 0" @click="showThawModal(scope.row)">解冻</el-button> |
| | | </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" /> |
| | | :page="page.current" :limit="page.size" @pagination="paginationChange" /> |
| | | </div> |
| | | <new-stock-inventory v-if="isShowNewModal" |
| | | v-model:visible="isShowNewModal" |
| | | type="unqualified" |
| | | @completed="handleQuery" /> |
| | | v-model:visible="isShowNewModal" |
| | | type="qualified" |
| | | @completed="handleQuery" /> |
| | | |
| | | <subtract-stock-inventory v-if="isShowSubtractModal" |
| | | v-model:visible="isShowSubtractModal" |
| | | :record="record" |
| | | type="unqualified" |
| | | @completed="handleQuery" /> |
| | | v-model:visible="isShowSubtractModal" |
| | | :record="record" |
| | | type="qualified" |
| | | @completed="handleQuery" /> |
| | | <!-- 导入库存--> |
| | | <import-stock-inventory v-if="isShowImportModal" |
| | | v-model:visible="isShowImportModal" |
| | | type="qualified" |
| | | @uploadSuccess="handleQuery" /> |
| | | <!-- 冻结/解冻库存--> |
| | | <frozen-and-thaw-stock-inventory v-if="isShowFrozenAndThawModal" |
| | | v-model:visible="isShowFrozenAndThawModal" |
| | | :record="record" |
| | | :operation-type="operationType" |
| | | type="unqualified" |
| | | type="qualified" |
| | | @completed="handleQuery" /> |
| | | </div> |
| | | </template> |
| | |
| | | <script setup> |
| | | import pagination from '@/components/PIMTable/Pagination.vue' |
| | | import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue' |
| | | import { ElMessageBox } from "element-plus"; |
| | | import { getStockUninventoryListPage } from "@/api/inventoryManagement/stockUninventory.js"; |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import { getStockInventoryListPage } from "@/api/inventoryManagement/stockInventory.js"; |
| | | const NewStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/New.vue")); |
| | | const SubtractStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/Subtract.vue")); |
| | | const ImportStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/Import.vue")); |
| | | const FrozenAndThawStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/FrozenAndThaw.vue")); |
| | | |
| | | const { proxy } = getCurrentInstance() |
| | | const tableData = ref([]) |
| | | const selectedRows = ref([]) |
| | |
| | | const isShowNewModal = ref(false) |
| | | // 是否显示领用弹框 |
| | | const isShowSubtractModal = ref(false) |
| | | |
| | | // 是否显示冻结/解冻弹框 |
| | | const isShowFrozenAndThawModal = ref(false) |
| | | // 操作类型 |
| | | const operationType = ref('frozen') |
| | | // 是否显示导入弹框 |
| | | const isShowImportModal = ref(false) |
| | | const data = reactive({ |
| | | searchForm: { |
| | | productName: '', |
| | | rootName:'辅材' |
| | | } |
| | | }) |
| | | const { searchForm } = toRefs(data) |
| | |
| | | } |
| | | const getList = () => { |
| | | tableLoading.value = true |
| | | getStockUninventoryListPage({ ...searchForm.value, ...page }).then(res => { |
| | | getStockInventoryListPage({ ...searchForm.value, ...page }).then(res => { |
| | | tableLoading.value = false |
| | | tableData.value = res.data.records |
| | | total.value = res.data.total |
| | |
| | | tableLoading.value = false |
| | | }) |
| | | } |
| | | |
| | | const handleFileSuccess = (response) => { |
| | | const { code, msg } = response; |
| | | if (code == 200) { |
| | | ElMessage({ message: "导入成功", type: "success" }); |
| | | upload.open = false; |
| | | emits("uploadSuccess"); |
| | | } else { |
| | | ElMessage({ message: msg, type: "error" }); |
| | | } |
| | | }; |
| | | |
| | | // 点击领用 |
| | | const showSubtractModal = (row) => { |
| | |
| | | |
| | | // 表格行类名 |
| | | const tableRowClassName = ({ row }) => { |
| | | // const stock = Number(row?.unLockedQuantity ?? 0); |
| | | // const warn = Number(row?.warnNum ?? 0); |
| | | // if (!Number.isFinite(stock) || !Number.isFinite(warn)) { |
| | | // return ''; |
| | | // } |
| | | // return stock < warn ? 'row-low-stock' : ''; |
| | | const stock = Number(row?.unLockedQuantity ?? 0); |
| | | const warn = Number(row?.warnNum ?? 0); |
| | | if (!Number.isFinite(stock) || !Number.isFinite(warn)) { |
| | | return ''; |
| | | } |
| | | return stock < warn ? 'row-low-stock' : ''; |
| | | }; |
| | | |
| | | // 导出 |
| | | const handleOut = () => { |
| | | ElMessageBox.confirm( |
| | | '是否确认导出?', |
| | | '导出', { |
| | | confirmButtonText: '确认', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | } |
| | | '是否确认导出?', |
| | | '导出', { |
| | | confirmButtonText: '确认', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | } |
| | | ).then(() => { |
| | | proxy.download("/stockUninventory/exportStockUninventory", {}, '不合格库存信息.xlsx') |
| | | proxy.download("/stockInventory/exportStockInventory", {}, '辅材库存信息.xlsx') |
| | | }).catch(() => { |
| | | proxy.$modal.msg("已取消") |
| | | }) |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | :deep(.row-low-stock td) { |
| | | background-color: #fde2e2; |
| | | color: #c45656; |
| | | // background-color: #fde2e2; |
| | | // color: #c45656; |
| | | } |
| | | |
| | | :deep(.row-low-stock:hover > td) { |
| | | background-color: #fcd4d4; |
| | | // background-color: #fcd4d4; |
| | | } |
| | | </style> |