<template>
|
<div>
|
<div class="search_form"
|
style="margin-bottom: 10px;">
|
<el-form ref="searchFormRef"
|
:model="searchForm"
|
class="demo-form-inline">
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-form-item label="入库日期"
|
prop="timeStr">
|
<el-date-picker v-model="searchForm.timeStr"
|
type="date"
|
placeholder="请选择日期"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="产品大类"
|
prop="productName">
|
<el-input v-model="searchForm.productName"
|
style="width: 240px"
|
placeholder="请输入"
|
clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="规格型号"
|
prop="model">
|
<el-input v-model="searchForm.model"
|
style="width: 240px"
|
placeholder="请输入"
|
clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="批号"
|
prop="batchNo">
|
<el-input v-model="searchForm.batchNo"
|
style="width: 240px"
|
placeholder="请输入"
|
clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="来源"
|
prop="recordType">
|
<el-select v-model="searchForm.recordType"
|
style="width: 240px"
|
placeholder="请选择"
|
clearable>
|
<el-option v-for="item in stockRecordTypeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<!-- 按钮 -->
|
<el-col :span="4">
|
<el-form-item>
|
<el-button type="primary"
|
@click="getList">
|
搜索
|
</el-button>
|
<el-button @click="resetSearch">
|
重置
|
</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="actions">
|
<el-button type="primary"
|
:disabled="!canBatchApprove"
|
@click="handleBatchApprove">审批</el-button>
|
<el-button :disabled="!canReverseApprove"
|
@click="handleReverseApprove">反审</el-button>
|
<el-button @click="handleOut">导出</el-button>
|
<el-button type="danger"
|
plain
|
:disabled="!canDelete"
|
@click="handleDelete">删除
|
</el-button>
|
</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%"
|
height="calc(100vh - 18.5em)">
|
<el-table-column align="center"
|
type="selection"
|
:selectable="isRowSelectable"
|
width="55" />
|
<el-table-column align="center"
|
label="序号"
|
type="index"
|
width="60" />
|
<el-table-column label="入库批次"
|
prop="inboundBatches"
|
width="200"
|
show-overflow-tooltip />
|
<el-table-column label="入库时间"
|
prop="createTime"
|
show-overflow-tooltip />
|
<el-table-column label="厂家"
|
prop="manufacturerId"
|
show-overflow-tooltip>
|
<template #default="scope">
|
{{ getManufacturerName(scope.row.manufacturerId) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="产品大类"
|
prop="productName"
|
show-overflow-tooltip />
|
<el-table-column label="规格型号"
|
prop="model"
|
show-overflow-tooltip />
|
<el-table-column label="批号"
|
prop="batchNo"
|
show-overflow-tooltip />
|
<el-table-column label="单位"
|
prop="unit"
|
show-overflow-tooltip />
|
<el-table-column label="实际入库数量"
|
prop="stockInNum"
|
width="120"
|
show-overflow-tooltip />
|
<el-table-column label="含水差额"
|
prop="differenceNum"
|
show-overflow-tooltip>
|
<template #default="scope">
|
{{ scope.row.isContainsWater?scope.row.differenceNum || "--": "--" }}
|
</template>
|
</el-table-column>
|
<el-table-column label="入库人"
|
prop="createBy"
|
show-overflow-tooltip />
|
<el-table-column label="来源"
|
show-overflow-tooltip>
|
<template #default="scope">
|
{{ scope.row.qualifiedSourceText || scope.row.unQualifiedSourceText || getRecordType(scope.row.recordType) || "--" }}
|
</template>
|
</el-table-column>
|
<el-table-column v-if="showSourceOrderNoColumn"
|
label="源单号"
|
width="150"
|
prop="sourceOrderNo"
|
show-overflow-tooltip>
|
<template #default="scope">
|
{{ formatSourceOrderNo(scope.row?.sourceOrderNo) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="审批状态"
|
prop="approvalStatus"
|
show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag :type="getApprovalStatusTagType(scope.row.approvalStatus)"
|
size="small">
|
{{ getApprovalStatusLabel(scope.row.approvalStatus) }}
|
</el-tag>
|
</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="pageProductChange" />
|
</div>
|
<!-- 审批弹窗 -->
|
<el-dialog v-model="approveDialogVisible"
|
title="审批"
|
width="800px"
|
append-to-body>
|
<el-form :model="approveForm"
|
label-width="80px">
|
<el-form-item label="审批结果">
|
<el-radio-group v-model="approveForm.approvalStatus">
|
<el-radio :label="1">通过</el-radio>
|
<el-radio :label="2">驳回</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="明细确认"
|
v-if="approveForm.approvalStatus === 1">
|
<div class="approve-items-list">
|
<div class="list-header">
|
<span class="header-product">产品信息</span>
|
<span class="header-num">入库数量</span>
|
</div>
|
<div v-for="item in approveForm.items"
|
:key="item.id"
|
class="approve-item">
|
<div class="item-info">
|
<div class="product-name"
|
:title="item.productName">{{ item.productName }}</div>
|
<div class="product-info-sub">
|
<span class="product-model"
|
:title="item.model">{{ item.model }}</span>
|
<span class="product-batch"
|
v-if="item.batchNo"
|
:title="'批号: ' + item.batchNo"> | 批号: {{ item.batchNo }}</span>
|
</div>
|
</div>
|
<div class="item-input">
|
<el-input-number v-model="item.stockInNum"
|
:min="0"
|
:precision="2"
|
controls-position="right"
|
style="width: 130px" />
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="approveDialogVisible = false">取消</el-button>
|
<el-button type="primary"
|
@click="submitApprove"
|
:loading="approveLoading">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import {
|
ref,
|
reactive,
|
toRefs,
|
computed,
|
onMounted,
|
getCurrentInstance,
|
} from "vue";
|
import { ElMessageBox } from "element-plus";
|
import {
|
getStockInRecordListPage,
|
batchDeletePendingStockInRecords,
|
batchApproveStockInRecords,
|
batchUnapproveStockInRecords,
|
} from "@/api/inventoryManagement/stockInRecord.js";
|
import {
|
findAllQualifiedStockInRecordTypeOptions,
|
// findAllUnQualifiedStockInRecordTypeOptions,
|
} from "@/api/basicData/enum.js";
|
import { getManufacturerOptions } from "@/api/inspectionManagement/manufacturerManageFile.js";
|
|
const { proxy } = getCurrentInstance();
|
|
const props = defineProps({
|
type: {
|
type: String,
|
required: true,
|
default: "0",
|
},
|
topParentProductId: {
|
type: [String, Number],
|
default: undefined,
|
},
|
});
|
|
const tableData = ref([]);
|
const selectedRows = ref([]);
|
const tableLoading = ref(false);
|
// 来源类型选项
|
const stockRecordTypeOptions = ref([]);
|
const manufacturerOptions = ref([]);
|
const page = reactive({
|
current: 1,
|
size: 10,
|
});
|
const total = ref(0);
|
|
// 审批相关
|
const approveDialogVisible = ref(false);
|
const approveLoading = ref(false);
|
const approveForm = reactive({
|
approvalStatus: 1,
|
items: [], // 存储每个选中的条目及其入库数量
|
});
|
|
const data = reactive({
|
searchForm: {
|
productName: "",
|
batchNo: "",
|
model: "",
|
timeStr: "",
|
recordType: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
const searchFormRef = ref(null);
|
|
const resetSearch = () => {
|
searchFormRef.value?.resetFields();
|
page.current = 1;
|
getList();
|
};
|
|
const getRecordType = recordType => {
|
return (
|
stockRecordTypeOptions.value.find(item => item.value === recordType)
|
?.label || ""
|
);
|
};
|
|
const getManufacturerName = manufacturerId => {
|
return (
|
manufacturerOptions.value.find(item => item.id === manufacturerId)?.name ||
|
"--"
|
);
|
};
|
|
const approvalStatusLabelMap = {
|
0: "待审批",
|
1: "通过",
|
2: "驳回",
|
pending: "待审批",
|
approved: "通过",
|
rejected: "驳回",
|
PENDING: "待审批",
|
APPROVED: "通过",
|
REJECTED: "驳回",
|
};
|
approvalStatusLabelMap[3] = "待确认";
|
|
const getApprovalStatusLabel = status => {
|
if (status === null || status === undefined || status === "") {
|
return "待审批";
|
}
|
return approvalStatusLabelMap[status] || "待审批";
|
};
|
|
// 通过/驳回固定色；其余（含待审批、空值、未映射但文案为待审批）统一用 warning 预警色
|
const getApprovalStatusTagType = status => {
|
if (
|
status === 1 ||
|
status === "1" ||
|
status === "approved" ||
|
status === "APPROVED"
|
)
|
return "success";
|
if (
|
status === 2 ||
|
status === "2" ||
|
status === "rejected" ||
|
status === "REJECTED"
|
)
|
return "danger";
|
return "warning";
|
};
|
|
const isPendingApproval = status => {
|
return (
|
status === 0 ||
|
status === "0" ||
|
status === "pending" ||
|
status === "PENDING" ||
|
status === null ||
|
status === undefined ||
|
status === ""
|
);
|
};
|
|
const isRejectedApproval = status => {
|
return (
|
status === 2 ||
|
status === "2" ||
|
status === "rejected" ||
|
status === "REJECTED"
|
);
|
};
|
|
const isRowSelectable = row => {
|
return (
|
isPendingApproval(row?.approvalStatus) ||
|
isRejectedApproval(row?.approvalStatus)
|
);
|
};
|
|
const canBatchApprove = computed(() => {
|
return (
|
selectedRows.value.length > 0 &&
|
selectedRows.value.every(row => isPendingApproval(row.approvalStatus))
|
);
|
});
|
|
const canReverseApprove = computed(() => {
|
return (
|
selectedRows.value.length > 0 &&
|
selectedRows.value.every(row => isRejectedApproval(row.approvalStatus))
|
);
|
});
|
|
const canDelete = computed(() => canBatchApprove.value);
|
const showSourceOrderNoColumn = computed(() => {
|
const topParentProductId = Number(props.topParentProductId);
|
return topParentProductId === 276 || topParentProductId === 278;
|
});
|
|
const formatSourceOrderNo = value => {
|
const text = String(value ?? "").trim();
|
return text || "--";
|
};
|
|
const pageProductChange = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
getStockInRecordListPage(
|
Object.assign(
|
{},
|
{
|
...searchForm.value,
|
...page,
|
topParentProductId: props.topParentProductId,
|
}
|
)
|
)
|
.then(res => {
|
tableData.value = res.data.records;
|
total.value = res.data.total || 0;
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
};
|
|
// 获取来源类型选项
|
const fetchStockRecordTypeOptions = () => {
|
if (props.type === "0") {
|
findAllQualifiedStockInRecordTypeOptions().then(res => {
|
stockRecordTypeOptions.value = res.data;
|
});
|
return;
|
}
|
// findAllUnQualifiedStockInRecordTypeOptions()
|
// .then(res => {
|
// stockRecordTypeOptions.value = res.data;
|
// })
|
};
|
|
const fetchManufacturerOptions = () => {
|
getManufacturerOptions().then(res => {
|
manufacturerOptions.value = res.data || [];
|
});
|
};
|
|
// 表格选择数据
|
const handleSelectionChange = selection => {
|
selectedRows.value = selection.filter(
|
item => item.id && isRowSelectable(item)
|
);
|
};
|
|
const expandedRowKeys = ref([]);
|
|
const handleReverseApprove = () => {
|
if (!canReverseApprove.value) {
|
proxy.$modal.msgWarning("请选择已驳回的数据");
|
return;
|
}
|
const ids = selectedRows.value.map(item => item.id);
|
ElMessageBox.confirm("反审后记录将恢复为待审批状态，是否确认反审？", "反审", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
batchUnapproveStockInRecords({ ids })
|
.then(() => {
|
proxy.$modal.msgSuccess("反审成功");
|
getList();
|
})
|
.catch(() => {
|
proxy.$modal.msgError("反审失败");
|
});
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
const handleBatchApprove = () => {
|
if (!canBatchApprove.value) {
|
proxy.$modal.msgWarning("请选择待审批的数据");
|
return;
|
}
|
// 初始化审批表单
|
approveForm.approvalStatus = 1;
|
approveForm.items = selectedRows.value.map(row => ({
|
id: row.id,
|
productName: row.productName,
|
model: row.model,
|
batchNo: row.batchNo,
|
stockInNum: row.stockInNum || 0,
|
}));
|
approveDialogVisible.value = true;
|
};
|
|
const submitApprove = () => {
|
const params = {
|
approvalStatus: approveForm.approvalStatus,
|
items: approveForm.items.map(item => ({
|
id: item.id,
|
...(approveForm.approvalStatus === 1 && { stockInNum: item.stockInNum }),
|
})),
|
};
|
|
approveLoading.value = true;
|
batchApproveStockInRecords(params)
|
.then(() => {
|
proxy.$modal.msgSuccess(
|
approveForm.approvalStatus === 1 ? "审批通过成功" : "审批驳回成功"
|
);
|
approveDialogVisible.value = false;
|
getList();
|
})
|
.catch(() => {
|
proxy.$modal.msgError(
|
approveForm.approvalStatus === 1 ? "审批通过失败" : "审批驳回失败"
|
);
|
})
|
.finally(() => {
|
approveLoading.value = false;
|
});
|
};
|
|
// 导出
|
const handleOut = () => {
|
ElMessageBox.confirm("是否确认导出？", "导出", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 根据不同的 tab 类型调用不同的导出接口
|
proxy.download(
|
"/stockInRecord/exportStockInRecord",
|
{ type: props.type },
|
props.type === "0" ? "合格入库.xlsx" : "不合格入库.xlsx"
|
);
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
// 删除
|
const handleDelete = () => {
|
if (!canDelete.value) {
|
proxy.$modal.msgWarning("请选择待审批的数据");
|
return;
|
}
|
const ids = selectedRows.value.map(item => item.id);
|
|
ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
batchDeletePendingStockInRecords(ids)
|
.then(() => {
|
proxy.$modal.msgSuccess("删除成功");
|
getList();
|
})
|
.catch(() => {
|
proxy.$modal.msgError("删除失败");
|
});
|
})
|
.catch(() => {
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
onMounted(() => {
|
getList();
|
fetchStockRecordTypeOptions();
|
fetchManufacturerOptions();
|
});
|
|
watch(
|
() => props.topParentProductId,
|
() => {
|
page.current = 1;
|
getList();
|
}
|
);
|
</script>
|
|
<style scoped lang="scss">
|
.actions {
|
display: flex;
|
justify-content: flex-end;
|
margin-bottom: 10px;
|
}
|
|
.approve-items-list {
|
max-height: 400px;
|
overflow-y: auto;
|
width: 100%;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
|
.list-header {
|
display: flex;
|
background-color: #f5f7fa;
|
padding: 8px 12px;
|
font-weight: bold;
|
border-bottom: 1px solid #ebeef5;
|
font-size: 13px;
|
|
.header-product {
|
flex: 1;
|
}
|
|
.header-num {
|
width: 130px;
|
text-align: center;
|
}
|
}
|
|
.approve-item {
|
display: flex;
|
align-items: center;
|
padding: 10px 12px;
|
border-bottom: 1px solid #ebeef5;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.item-info {
|
flex: 1;
|
min-width: 0;
|
margin-right: 15px;
|
|
.product-name {
|
font-weight: bold;
|
font-size: 13px;
|
color: #303133;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.product-info-sub {
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
color: #909399;
|
margin-top: 2px;
|
white-space: nowrap;
|
overflow: hidden;
|
|
.product-model,
|
.product-batch {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.product-batch {
|
margin-left: 4px;
|
color: #409eff;
|
}
|
}
|
}
|
|
.item-input {
|
width: 130px;
|
}
|
}
|
}
|
</style>
|
