<template>
|
<el-dialog
|
v-model="isShow"
|
title="库存详情"
|
width="90%"
|
top="3vh"
|
class="batch-no-qty-detail-dialog"
|
@close="closeModal"
|
>
|
<div class="detail-content">
|
<div class="detail-table-wrapper">
|
<el-table
|
:data="tableData"
|
border
|
v-loading="tableLoading"
|
style="width: 100%"
|
height="100%"
|
>
|
<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="batchNo" show-overflow-tooltip />
|
<el-table-column
|
label="合格库存数量"
|
prop="qualifiedQuantity"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="不合格库存数量"
|
prop="unQualifiedQuantity"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="合格冻结数量"
|
prop="qualifiedLockedQuantity"
|
show-overflow-tooltip
|
/>
|
<el-table-column
|
label="不合格冻结数量"
|
prop="unQualifiedLockedQuantity"
|
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="180" align="center">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
@click="handleSubtract(scope.row)"
|
:disabled="
|
(scope.row.qualifiedUnLockedQuantity || 0) +
|
(scope.row.qualifiedPendingOutQuantity || 0) <=
|
0 &&
|
(scope.row.unQualifiedUnLockedQuantity || 0) +
|
(scope.row.unQualifiedPendingOutQuantity || 0) <=
|
0
|
"
|
>领用</el-button
|
>
|
<el-button
|
link
|
type="primary"
|
v-if="
|
scope.row.unQualifiedUnLockedQuantity > 0 ||
|
scope.row.qualifiedUnLockedQuantity > 0
|
"
|
@click="handleFrozen(scope.row)"
|
>冻结</el-button
|
>
|
<el-button
|
link
|
type="primary"
|
v-if="
|
scope.row.qualifiedLockedQuantity > 0 ||
|
scope.row.unQualifiedLockedQuantity > 0
|
"
|
@click="handleThaw(scope.row)"
|
>解冻</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page="page.current"
|
:limit="page.size"
|
@pagination="paginationChange"
|
/>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import { computed, reactive, ref, watch } from "vue";
|
import { getStockInventoryBatchNoQty } from "@/api/inventoryManagement/stockInventory.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
record: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
|
const emit = defineEmits(["update:visible", "subtract", "frozen", "thaw"]);
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit("update:visible", val);
|
},
|
});
|
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const total = ref(0);
|
const page = reactive({
|
current: 1,
|
size: 20,
|
});
|
|
const getList = () => {
|
if (!props.record?.productId || !props.record?.productModelId) {
|
tableData.value = [];
|
total.value = 0;
|
return;
|
}
|
|
tableLoading.value = true;
|
getStockInventoryBatchNoQty({
|
current: page.current,
|
size: page.size,
|
productId: props.record.productId,
|
productModelId: props.record.productModelId,
|
})
|
.then((res) => {
|
tableData.value = res.data?.records || [];
|
total.value = res.data?.total || 0;
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
const paginationChange = (obj) => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const handleSubtract = (row) => {
|
emit("subtract", row);
|
};
|
|
const handleFrozen = (row) => {
|
emit("frozen", row);
|
};
|
|
const handleThaw = (row) => {
|
emit("thaw", row);
|
};
|
|
const closeModal = () => {
|
isShow.value = false;
|
page.current = 1;
|
page.size = 20;
|
tableData.value = [];
|
total.value = 0;
|
};
|
|
watch(
|
() => props.visible,
|
(visible) => {
|
if (!visible) {
|
return;
|
}
|
page.current = 1;
|
getList();
|
},
|
{ immediate: true }
|
);
|
</script>
|
|
<style scoped lang="scss">
|
.detail-content {
|
display: flex;
|
flex-direction: column;
|
height: calc(100vh - 170px);
|
min-height: 520px;
|
}
|
|
.detail-table-wrapper {
|
flex: 1;
|
min-height: 0;
|
}
|
|
:deep(.batch-no-qty-detail-dialog .el-dialog) {
|
max-width: calc(100vw - 48px);
|
}
|
|
:deep(.batch-no-qty-detail-dialog .el-dialog__body) {
|
padding-top: 12px;
|
}
|
</style>
|
