Files
zhongxinmes-IMPM-UI/src/views/mes/wm/itemrecpt/index.vue
2025-08-22 14:24:18 +08:00

859 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 2024 12 16 Name:"采购入库父组件" */
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-form-item label="入库单编号" prop="recptCode">
<el-input
v-model="queryParams.recptCode"
placeholder="请输入入库单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="入库单名称" prop="recptName">
<el-input
v-model="queryParams.recptName"
placeholder="请输入入库单名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item label="供应商名称" prop="vendorName">
<el-input
v-model="queryParams.vendorName"
placeholder="请输入供应商名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="订单编号" prop="poCode">
<el-input
v-model="queryParams.poCode"
placeholder="请输入订单编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="物料编码" prop="itemCode">
<el-input
v-model="queryParams.itemCode"
placeholder="请输入物料编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="入库日期" prop="recptDate">
<el-date-picker
v-model="dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['mes:wm:itemrecpt:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['mes:wm:itemrecpt:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['mes:wm:itemrecpt:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['mes:wm:itemrecpt:export']"
>导出</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="itemrecptList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="入库单编号" align="center" width="180px" prop="recptCode">
<template slot-scope="scope">
<el-button
type="text"
@click="handleView(scope.row)"
v-hasPermi="['mes:wm:itemrecpt:query']"
>{{ scope.row.recptCode }}</el-button
>
</template>
</el-table-column>
<!-- <el-table-column
label="入库单名称"
align="center"
prop="recptName"
:show-overflow-tooltip="true"
/> -->
<el-table-column
label="产品物料名称"
align="center"
prop="itemName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="规格型号"
align="center"
prop="specification"
:show-overflow-tooltip="true"
/>
<el-table-column
label="合计重量"
align="center"
prop="quantityRecived"
:show-overflow-tooltip="true"
/>
<el-table-column
label="供应商名称"
align="center"
prop="vendorName"
:show-overflow-tooltip="true"
/>
<el-table-column label="入库日期" align="center" prop="recptDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.recptDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="采购订单号" align="center" prop="poCode" />
<el-table-column label="单据状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.mes_order_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-video-play"
v-if="scope.row.status == 'PREPARE'"
@click="handleExecute(scope.row)"
v-hasPermi="['mes:wm:itemrecpt:edit']"
>执行入库</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
v-if="scope.row.status == 'PREPARE'"
@click="handleUpdate(scope.row)"
v-hasPermi="['mes:wm:itemrecpt:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
v-if="scope.row.status == 'PREPARE'"
@click="handleDelete(scope.row)"
v-hasPermi="['mes:wm:itemrecpt:remove']"
>删除</el-button
>
<!-- 需求八 单据撤销 -->
<!-- 标记 此处的按钮鉴权 待优化 -->
<el-button
size="mini"
type="text"
icon="el-icon-refresh-left"
v-if="scope.row.status == 'FINISHED'"
@click="handleWithdrawn(scope.row)"
v-hasPermi="['mes:wm:itemrecpt:edit']"
>撤销</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-view"
v-if="scope.row.status == 'CANCEL'"
@click="handleLookWithdrawn(scope.row)"
v-hasPermi="['mes:wm:itemrecpt:edit']"
>查看撤销原因</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改物料入库单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="8">
<el-form-item label="入库单编号" prop="recptCode">
<el-input v-model="form.recptCode" placeholder="请输入入库单编号" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="80">
<el-switch
v-model="autoGenFlag"
active-color="#13ce66"
active-text="自动生成"
@change="handleAutoGenChange(autoGenFlag)"
v-if="optType != 'view' && form.status == 'PREPARE'"
>
</el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入库单名称" prop="recptName">
<el-input v-model="form.recptName" placeholder="请输入入库单名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="入库日期" prop="recptDate">
<el-date-picker
clearable
v-model="form.recptDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择入库日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="采购订单号" prop="poCode">
<el-input v-model="form.poCode" placeholder="请输入采购订单号" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="单据状态" prop="status">
<el-select v-model="form.status" disabled placeholder="请选择单据状态">
<el-option
v-for="dict in dict.type.mes_order_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="供应商" prop="vendorName">
<el-input
v-model="form.vendorName"
readonly="readonly"
placeholder="请选择供应商"
>
<el-button
slot="append"
@click="handleSelectVendor"
icon="el-icon-search"
></el-button>
</el-input>
<VendorSelect ref="vendorSelect" @onSelected="onVendorSelected" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="入库仓库">
<el-cascader
v-model="warehouseInfo"
:options="warehouseOptions"
:props="warehouseProps"
@change="handleWarehouseChanged"
>
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="8"> </el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider v-if="form.recptId != null" content-position="center"
>物料信息</el-divider
>
<el-card shadow="always" v-if="form.recptId != null" class="box-card">
<Itemrecptline
ref="line"
:recptId="form.recptId"
:warehouseId="form.warehouseId"
:locationId="form.locationId"
:areaId="form.areaId"
:optType="optType"
></Itemrecptline>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
@click="cancel"
v-if="optType == 'view' || form.status != 'PREPARE'"
>返回</el-button
>
<el-button
type="primary"
@click="submitForm"
v-if="form.status == 'PREPARE' && optType != 'view'"
> </el-button
>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!-- 需求八 单据撤销 对话框 -->
<el-dialog title="单据撤销" :visible.sync="WithdrawnFlag" width="30%">
<el-form
ref="WithdrawnForm"
:model="WithdrawnForm"
:rules="WithdrawnRules"
label-width="120px"
>
<el-form-item label="撤销原因:" prop="cancelRemark">
<el-input
type="textarea"
v-model="WithdrawnForm.cancelRemark"
placeholder="请输入备注"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="WithdrawnFlag = false"> </el-button>
<el-button type="primary" @click="handleWithdrawnSubmit"> </el-button>
</span>
</el-dialog>
<!-- 查看撤销原因 对话框 -->
<el-dialog title="单据撤销原因" :visible.sync="LookWithdrawnFlag" width="30%">
<p>
{{ LookWithdrawn }}
</p>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="LookWithdrawnFlag = false"> </el-button>
</span>
</el-dialog>
<!-- 撤销错误 对话框 提示 需求八 -->
<el-dialog title="提示" :visible.sync="WithdrawnErrorFlag" width="45%">
<div>
<p style="margin-top: 0px">当前单据部分产品物料已出库相关单据</p>
<p v-for="(value, name, index) in WithdrawnErrorObj" :key="index">
<span>{{ WithdrawnErrorObjMap[name].CNName }}</span>
<router-link
:to="{
path: WithdrawnErrorObjMap[name].path,
query: { Parameters: item },
}"
v-for="(item, ind) in value"
:key="ind"
>
<span
style="color: #02a7f1; border-bottom: 1px solid #02a7f1; margin-right: 8px"
:id="value.length - 1 == ind ? '' : 'WithdrawnErrorObj'"
@click="WithdrawnErrorFlag = false"
>{{ item }}</span
>
</router-link>
</p>
<p style="margin-bottom: 0px">请溯源后撤销该单据</p>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listItemrecpt,
getItemrecpt,
delItemrecpt,
addItemrecpt,
updateItemrecpt,
confirmItemrecpt,
execute,
cancelFn,
} from "@/api/mes/wm/itemrecpt";
import { getTreeList } from "@/api/mes/wm/warehouse";
import { genCode } from "@/api/system/autocode/rule";
import VendorSelect from "@/components/vendorSelect/single.vue";
import IqcSelect from "@/components/iqcSelect/single.vue";
import Itemrecptline from "./line.vue";
export default {
name: "Itemrecpt",
dicts: ["mes_order_status"],
components: { VendorSelect, IqcSelect, Itemrecptline },
data() {
return {
//自动生成编码
autoGenFlag: false,
optType: undefined,
warehouseInfo: [],
warehouseOptions: [],
warehouseProps: {
multiple: false,
value: "pId",
label: "pName",
},
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 物料入库单表格数据
itemrecptList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
recptCode: null,
recptName: null,
iqcId: null,
iqcCode: null,
vendorId: null,
vendorCode: null,
vendorName: null,
vendorNick: null,
warehouseId: null,
warehouseCode: null,
warehouseName: null,
locationId: null,
locationCode: null,
locationName: null,
areaId: null,
areaCode: null,
areaName: null,
recptDate: null,
poCode: null,
status: null,
itemCode: null,
},
dateRange: [],
// 表单参数
form: {},
// 表单校验
rules: {
recptCode: [{ required: true, message: "入库单编号不能为空", trigger: "blur" }],
// 2024 12 16 需求三 入库单据名称改为非必填
// recptName: [
// { required: true, message: "入库单名称不能为空", trigger: "blur" }
// ],
recptDate: [{ required: true, message: "入库时间不能为空", trigger: "blur" }],
vendorName: [{ required: true, message: "请选择对应的供应商", trigger: "blur" }],
},
// 单据撤销 对话框 开关
WithdrawnFlag: false,
// 单据撤销 对话框 表单参数
WithdrawnForm: {
recptId: null,
cancelRemark: null,
},
// 撤销单 表单校验
WithdrawnRules: {
cancelRemark: [{ required: true, message: "撤销原因不能为空", trigger: "blur" }],
},
// 查看撤销原因 以及 开关
LookWithdrawnFlag: false,
LookWithdrawn: null,
// 撤销错误 提示 开关
WithdrawnErrorFlag: false,
// 撤销错误 提示 内容
WithdrawnErrorObj: null,
// 映射
WithdrawnErrorObjMap: {
ps: {
CNName: "销售出库",
path: "/mes/wm/productsalse",
},
ih: {
CNName: "生产领料",
path: "/mes/wm/issue",
},
rv: {
CNName: "供应商退货",
path: "/mes/wm/rtvendor",
},
},
};
},
created() {
this.getList();
this.getWarehouseList();
},
methods: {
/** 查询物料入库单列表 */
getList() {
this.loading = true;
listItemrecpt(this.addDateRange(this.queryParams, this.dateRange)).then(
(response) => {
this.itemrecptList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
getWarehouseList() {
getTreeList().then((response) => {
if (response.data) {
this.warehouseOptions = response.data.filter((el) => {
return el.warehouseCode.indexOf("VIR") == -1;
});
}
this.warehouseOptions.map((w) => {
w.children.map((l) => {
let lstr = JSON.stringify(l.children)
.replace(/locationId/g, "lId")
.replace(/areaId/g, "pId")
.replace(/areaName/g, "pName");
l.children = JSON.parse(lstr);
});
let wstr = JSON.stringify(w.children)
.replace(/warehouseId/g, "wId")
.replace(/locationId/g, "pId")
.replace(/locationName/g, "pName");
w.children = JSON.parse(wstr);
});
let ostr = JSON.stringify(this.warehouseOptions)
.replace(/warehouseId/g, "pId")
.replace(/warehouseName/g, "pName");
this.warehouseOptions = JSON.parse(ostr);
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
recptId: null,
recptCode: null,
recptName: null,
iqcId: null,
iqcCode: null,
vendorId: null,
vendorCode: null,
vendorName: null,
vendorNick: null,
warehouseId: null,
warehouseCode: null,
warehouseName: null,
locationId: null,
locationCode: null,
locationName: null,
areaId: null,
areaCode: null,
areaName: null,
recptDate: null,
poCode: null,
status: "PREPARE",
remark: null,
addProducts: 0,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
};
this.autoGenFlag = false;
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.recptId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.warehouseInfo = [];
this.open = true;
this.title = "添加物料入库单";
this.optType = "add";
},
// 查询明细按钮操作
handleView(row) {
this.reset();
const recptIds = row.recptId;
getItemrecpt(recptIds).then((response) => {
this.form = response.data;
this.warehouseInfo[0] = response.data.warehouseId;
this.warehouseInfo[1] = response.data.locationId;
this.warehouseInfo[2] = response.data.areaId;
this.open = true;
this.title = "查看入库单信息";
this.optType = "view";
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const recptId = row.recptId || this.ids;
getItemrecpt(recptId).then((response) => {
this.form = response.data;
this.warehouseInfo[0] = response.data.warehouseId;
this.warehouseInfo[1] = response.data.locationId;
this.warehouseInfo[2] = response.data.areaId;
this.open = true;
this.title = "修改物料入库单";
this.optType = "edit";
});
},
//执行入库
handleExecute(row) {
const recptIds = row.recptId || this.ids;
this.$modal
.confirm("确认执行入库?")
.then(function () {
return execute(recptIds); //执行入库
})
.then(() => {
this.getList();
this.$modal.msgSuccess("入库成功");
})
.catch(() => {});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.recptId != null) {
updateItemrecpt(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addItemrecpt(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
this.addProducts = this.addProducts + 1;
});
}
}
});
},
doconfirm() {
let that = this;
this.$modal.confirm("是否完成入库单编制?【完成后将不能更改】").then(function () {
that.form.status = "CONFIRMED";
that.submitForm();
});
},
/** 删除按钮操作 */
handleDelete(row) {
const recptIds = row.recptId || this.ids;
this.$modal
.confirm("是否确认删除物料入库单?")
.then(function () {
return delItemrecpt(recptIds);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"mes/wm/itemrecpt/export",
{
...this.queryParams,
},
`物料入库单数据.xlsx`
);
},
//选择默认的仓库、库区、库位
handleWarehouseChanged(obj) {
debugger;
if (obj != null) {
this.form.warehouseId = obj[0];
this.form.locationId = obj[1];
this.form.areaId = obj[2];
}
},
//IQC检验单选择
handleSelectIqc() {
this.$refs.iqcSelect.showFlag = true;
},
//IQC检验单选择弹出框
onIqcSelected(obj) {
if (obj != undefined && obj != null) {
this.form.iqcId = obj.iqcId;
this.form.iqcCode = obj.iqcCode;
this.form.recptName = obj.iqcName;
this.form.vendorId = obj.vendorId;
this.form.vendorCode = obj.vendorCode;
this.form.vendorName = obj.vendorName;
this.form.vendorNick = obj.vendorNick;
}
},
//供应商选择
handleSelectVendor() {
this.$refs.vendorSelect.showFlag = true;
},
//供应商选择弹出框
onVendorSelected(obj) {
if (obj != undefined && obj != null) {
this.form.vendorId = obj.vendorId;
this.form.vendorCode = obj.vendorCode;
this.form.vendorName = obj.vendorName;
this.form.vendorNick = obj.vendorNick;
}
},
//自动生成编码
handleAutoGenChange(autoGenFlag) {
if (autoGenFlag) {
genCode("ITEMRECPT_CODE").then((response) => {
this.form.recptCode = response;
});
} else {
this.form.recptCode = null;
}
},
// 撤销单据 点击撤销按钮
handleWithdrawn(row) {
console.log(row);
this.WithdrawnFlag = true;
this.WithdrawnForm.recptId = row.recptId;
},
// 撤销原因 提交
handleWithdrawnSubmit(formName) {
this.$refs["WithdrawnForm"].validate((valid) => {
if (valid) {
cancelFn(this.WithdrawnForm)
.then((res) => {
console.log(res);
if (res.code == 200) {
this.$modal.msgSuccess(res.msg);
}
})
.catch((res) => {
console.log(res.data);
// 错误提示 对象 (内容)
this.WithdrawnErrorObj = res.data;
// 打开错误提示 对话框
this.WithdrawnErrorFlag = true;
})
.finally(() => {
this.WithdrawnFlag = false;
this.$refs["WithdrawnForm"].resetFields();
this.getList();
});
} else {
console.log("error submit!!");
return false;
}
});
},
// 查看撤销原因
handleLookWithdrawn(val) {
console.log(val.cancelRemark);
this.LookWithdrawn = val.cancelRemark;
this.LookWithdrawnFlag = true;
},
},
};
</script>
<style scoped>
.collapse-title {
flex: 0 1 54%;
order: 1;
}
#WithdrawnErrorObj::after {
content: "、";
color: #ccc;
/* 设置下划线颜色为红色 */
text-decoration: none;
position: absolute;
}
</style>