<template>
|
<div>
|
<div class="search_form" style="margin-bottom: 10px;">
|
<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.productName"
|
style="width: 240px"
|
placeholder="请输入"
|
clearable/>
|
<span class="search_title ml10">来源：</span>
|
<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-button type="primary"
|
@click="handleQuery"
|
style="margin-left: 10px">搜索
|
</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="handleAdd">新增</el-button>
|
<el-button type="primary" @click="handleBatchApprove">审批</el-button>
|
<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"
|
style="width: 100%"
|
height="calc(100vh - 18.5em)">
|
<el-table-column align="center"
|
type="selection"
|
:selectable="isRowSelectableForApprove"
|
width="55"/>
|
<el-table-column align="center"
|
label="序号"
|
type="index"
|
width="60"/>
|
<el-table-column label="入库批次"
|
prop="inboundBatches"
|
width="280"
|
show-overflow-tooltip/>
|
<el-table-column label="入库时间"
|
prop="createTime"
|
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="warehouseName"
|
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"
|
show-overflow-tooltip/>
|
<el-table-column label="入库人"
|
prop="createBy"
|
show-overflow-tooltip/>
|
<el-table-column label="来源"
|
prop="recordType"
|
show-overflow-tooltip>
|
<template #default="scope">
|
{{ getRecordType(scope.row.recordType) }}
|
</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-column label="操作" width="120" align="center" fixed="right">
|
<template #default="scope">
|
<el-button
|
v-if="scope.row.approvalStatus !== 1 && scope.row.approvalStatus !== '1' && scope.row.approvalStatus !== 'approved' && scope.row.approvalStatus !== 'APPROVED'"
|
link
|
type="primary"
|
size="small"
|
@click="handleEdit(scope.row)">编辑</el-button>
|
<span v-else style="color: #999; font-size: 12px;">已通过</span>
|
</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="dialogVisible"
|
:title="dialogTitle"
|
width="800"
|
@close="closeDialog">
|
<el-form ref="formRef"
|
:model="formState"
|
label-width="140px"
|
label-position="top">
|
<el-form-item label="产品名称"
|
prop="productModelId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择产品',
|
trigger: 'change',
|
}
|
]">
|
<el-button type="primary"
|
@click="showProductSelect = true">
|
{{ formState.productName ? formState.productName : '选择产品' }}
|
</el-button>
|
</el-form-item>
|
<el-form-item label="规格"
|
prop="productModelName">
|
<el-input v-model="formState.productModelName" disabled />
|
</el-form-item>
|
<el-form-item label="单位"
|
prop="unit">
|
<el-input v-model="formState.unit" disabled />
|
</el-form-item>
|
<el-form-item label="库位"
|
prop="warehouseInfoId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择库位',
|
trigger: 'change',
|
}
|
]">
|
<el-select v-model="formState.warehouseInfoId"
|
placeholder="请选择库位"
|
clearable
|
style="width: 100%">
|
<el-option v-for="warehouse in warehouseList"
|
:key="warehouse.id"
|
:label="warehouse.warehouseName + ' - ' + warehouse.location"
|
:value="warehouse.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="批号"
|
prop="batchNo">
|
<el-input v-model="formState.batchNo"
|
placeholder="请输入批号"
|
:disabled="isEdit" />
|
</el-form-item>
|
<el-form-item label="库存数量"
|
prop="qualitity">
|
<el-input-number v-model="formState.qualitity"
|
:step="1"
|
:min="1"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item v-if="isEdit"
|
label="来源"
|
prop="recordType">
|
<el-select v-model="formState.recordType"
|
placeholder="请选择来源"
|
disabled>
|
<el-option v-for="item in stockRecordTypeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="formState.type === 'qualified'"
|
label="库存预警数量"
|
prop="warnNum">
|
<el-input-number v-model="formState.warnNum"
|
:step="1"
|
:min="0"
|
:max="formState.qualitity"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="库存类型"
|
prop="type"
|
:rules="[
|
{
|
required: true,
|
message: '请选择库存类型',
|
trigger: 'change',
|
}
|
]">
|
<el-select v-model="formState.type"
|
placeholder="请选择库存类型"
|
:disabled="isEdit">
|
<el-option label="合格库存"
|
value="qualified" />
|
<el-option label="不合格库存"
|
value="unqualified" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="备注"
|
prop="remark">
|
<el-input v-model="formState.remark"
|
type="textarea" />
|
</el-form-item>
|
</el-form>
|
<!-- 产品选择弹窗 -->
|
<ProductSelectDialog v-model="showProductSelect"
|
@confirm="handleProductSelect"
|
:top-product-parent-id="topParentProductId"
|
single />
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
<el-button @click="closeDialog">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import pagination from "@/components/PIMTable/Pagination.vue";
|
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
|
import {
|
ref,
|
reactive,
|
toRefs,
|
onMounted,
|
getCurrentInstance,
|
computed,
|
watch,
|
} from "vue";
|
import { ElMessageBox, ElMessage } from "element-plus";
|
import {
|
getStockInRecordListPage,
|
batchDeletePendingStockInRecords,
|
batchApproveStockInRecords,
|
updateStockInRecord,
|
} from "@/api/inventoryManagement/stockInRecord.js";
|
import { addStockInRecordOnly } from "@/api/inventoryManagement/stockInventory.js";
|
import { createStockUnInventory } from "@/api/inventoryManagement/stockUninventory.js";
|
import {
|
findAllQualifiedStockInRecordTypeOptions, findAllUnQualifiedStockInRecordTypeOptions,
|
} from "@/api/basicData/enum.js";
|
import { getWarehouseList } from "@/api/inventoryManagement/warehouse.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 warehouseList = ref([]);
|
const page = reactive({
|
current: 1,
|
size: 10,
|
});
|
const total = ref(0);
|
|
const data = reactive({
|
searchForm: {
|
productName: "",
|
timeStr: "",
|
recordType: "",
|
},
|
});
|
const { searchForm } = toRefs(data);
|
|
// 对话框相关
|
const dialogVisible = ref(false);
|
const dialogType = ref('add'); // 'add' 或 'edit'
|
const dialogTitle = computed(() => dialogType.value === 'add' ? '新增入库记录' : '编辑入库记录');
|
const isEdit = computed(() => dialogType.value === 'edit');
|
const formRef = ref();
|
const showProductSelect = ref(false);
|
|
// 表单数据（仿照New.vue使用formState）
|
const formState = ref({
|
id: undefined,
|
productId: undefined,
|
productModelId: undefined,
|
productName: "",
|
productModelName: "",
|
unit: "",
|
type: undefined,
|
qualitity: 0,
|
batchNo: null,
|
warehouseInfoId: undefined,
|
warnNum: 0,
|
recordType: "",
|
remark: "",
|
});
|
|
// 批号为空时转为 null
|
watch(
|
() => formState.value.batchNo,
|
val => {
|
if (val === "") {
|
formState.value.batchNo = null;
|
}
|
}
|
);
|
|
// 查询列表
|
/** 搜索按钮操作 */
|
const handleQuery = () => {
|
page.current = 1;
|
getList();
|
};
|
|
const getRecordType = (recordType) => {
|
return stockRecordTypeOptions.value.find(item => item.value === recordType)?.label || ''
|
}
|
|
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 isRowSelectableForApprove = row => {
|
return isPendingApproval(row?.approvalStatus);
|
};
|
|
const pageProductChange = obj => {
|
page.current = obj.page;
|
page.size = obj.limit;
|
getList();
|
};
|
|
const getList = () => {
|
tableLoading.value = true;
|
const params = { ...page, topParentProductId: props.topParentProductId };
|
params.timeStr = searchForm.value.timeStr;
|
params.productName = searchForm.value.productName;
|
params.recordType = searchForm.value.recordType;
|
getStockInRecordListPage(params)
|
.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 handleSelectionChange = selection => {
|
selectedRows.value = selection.filter(item => item.id && isPendingApproval(item.approvalStatus));
|
};
|
|
const expandedRowKeys = ref([]);
|
|
// 新增
|
const handleAdd = () => {
|
dialogType.value = 'add';
|
resetForm();
|
// 根据当前tab设置默认库存类型
|
formState.value.type = props.type === '0' ? 'qualified' : 'unqualified';
|
dialogVisible.value = true;
|
};
|
|
// 编辑
|
const handleEdit = (row) => {
|
dialogType.value = 'edit';
|
resetForm();
|
// 填充表单数据
|
formState.value = {
|
id: row.id,
|
productId: row.productId,
|
productModelId: row.productModelId,
|
productName: row.productName,
|
productModelName: row.model,
|
unit: row.unit,
|
type: props.type === '0' ? 'qualified' : 'unqualified',
|
qualitity: row.stockInNum,
|
batchNo: row.batchNo,
|
warehouseInfoId: row.warehouseInfoId,
|
warnNum: row.warnNum || 0,
|
recordType: row.recordType,
|
remark: row.remark || "",
|
};
|
dialogVisible.value = true;
|
};
|
|
// 重置表单
|
const resetForm = () => {
|
formState.value = {
|
id: undefined,
|
productId: undefined,
|
productModelId: undefined,
|
productName: "",
|
productModelName: "",
|
unit: "",
|
type: undefined,
|
qualitity: 0,
|
batchNo: null,
|
warehouseInfoId: undefined,
|
warnNum: 0,
|
recordType: "",
|
remark: "",
|
};
|
};
|
|
// 关闭对话框
|
const closeDialog = () => {
|
dialogVisible.value = false;
|
resetForm();
|
};
|
|
// 产品选择处理（仿照New.vue）
|
const handleProductSelect = async products => {
|
if (products && products.length > 0) {
|
const product = products[0];
|
formState.value.productId = product.productId;
|
formState.value.productName = product.productName;
|
formState.value.productModelName = product.model;
|
formState.value.productModelId = product.id;
|
formState.value.unit = product.unit;
|
showProductSelect.value = false;
|
// 触发表单验证更新
|
proxy.$refs["formRef"]?.validateField("productModelId");
|
}
|
};
|
|
// 提交表单（仿照New.vue）
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
// 验证是否选择了产品和规格
|
if (!formState.value.productModelId) {
|
ElMessage.error("请选择产品");
|
return;
|
}
|
|
if (dialogType.value === 'add') {
|
submitAdd();
|
} else {
|
submitEdit();
|
}
|
}
|
});
|
};
|
|
// 提交新增
|
const submitAdd = () => {
|
const params = { ...formState.value };
|
|
if (formState.value.type === "qualified") {
|
addStockInRecordOnly(params).then(res => {
|
ElMessage.success("新增成功");
|
closeDialog();
|
getList();
|
}).catch(() => {
|
ElMessage.error("新增失败");
|
});
|
} else {
|
params.warnNum = 0;
|
createStockUnInventory(params).then(res => {
|
ElMessage.success("新增成功");
|
closeDialog();
|
getList();
|
}).catch(() => {
|
ElMessage.error("新增失败");
|
});
|
}
|
};
|
|
// 获取仓库列表
|
const fetchWarehouseList = () => {
|
getWarehouseList({ status: true }).then(res => {
|
warehouseList.value = res.data || [];
|
}).catch(() => {
|
ElMessage.error("获取仓库列表失败");
|
});
|
};
|
|
// 提交编辑
|
const submitEdit = () => {
|
const params = {
|
productId: formState.value.productId,
|
productModelId: formState.value.productModelId,
|
productName: formState.value.productName,
|
model: formState.value.productModelName,
|
unit: formState.value.unit,
|
batchNo: formState.value.batchNo,
|
warehouseInfoId: formState.value.warehouseInfoId,
|
stockInNum: formState.value.qualitity,
|
recordType: formState.value.recordType,
|
remark: formState.value.remark,
|
warnNum: formState.value.warnNum,
|
};
|
|
updateStockInRecord(formState.value.id, params).then(() => {
|
ElMessage.success("编辑成功");
|
closeDialog();
|
getList();
|
}).catch(() => {
|
ElMessage.error("编辑失败");
|
});
|
};
|
|
const handleBatchApprove = () => {
|
if (selectedRows.value.length === 0) {
|
proxy.$modal.msgWarning("请选择数据");
|
return;
|
}
|
const ids = selectedRows.value.map(item => item.id);
|
ElMessageBox.confirm("请选择审批结果", "审批", {
|
confirmButtonText: "通过",
|
cancelButtonText: "驳回",
|
type: "warning",
|
distinguishCancelAndClose: true,
|
})
|
.then(() => {
|
batchApproveStockInRecords({ ids, approvalStatus: 1 })
|
.then(() => {
|
proxy.$modal.msgSuccess("审批通过成功");
|
getList();
|
})
|
.catch(() => {
|
proxy.$modal.msgError("审批通过失败");
|
});
|
})
|
.catch((action) => {
|
if (action === "cancel") {
|
batchApproveStockInRecords({ ids, approvalStatus: 2 })
|
.then(() => {
|
proxy.$modal.msgSuccess("审批驳回成功");
|
getList();
|
})
|
.catch(() => {
|
proxy.$modal.msgError("审批驳回失败");
|
});
|
return;
|
}
|
proxy.$modal.msg("已取消");
|
});
|
};
|
|
// 导出
|
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 (selectedRows.value.length === 0) {
|
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();
|
fetchWarehouseList();
|
});
|
|
watch(
|
() => props.topParentProductId,
|
() => {
|
page.current = 1;
|
getList();
|
}
|
);
|
</script>
|
|
<style scoped lang="scss"></style>
|
