Files
FT577-WMS/ruoyi-ui/src/views/in/stockin/index.vue
2026-09-08 22:20:47 +08:00

679 lines
24 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.
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="入库类型" prop="inType">
<el-select v-model="queryParams.inType" placeholder="请选择入库类型" clearable>
<el-option
v-for="dict in dict.type.in_stockin_in_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="单据来源" prop="stockSource">
<el-select v-model="queryParams.stockSource" placeholder="请选择单据来源" clearable>
<el-option
v-for="dict in dict.type.in_stockin_stock_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="单据状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择单据状态" clearable>
<el-option
v-for="dict in dict.type.in_stockin_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="上位单号" prop="erpBill">
<el-input
v-model="queryParams.erpBill"
placeholder="请输入上位单号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="仓库名称" prop="warehouseName">
<el-input
v-model="queryParams.warehouseName"
placeholder="请输入仓库名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="部门名称" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入部门名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="供应商" prop="supplierName">
<el-input
v-model="queryParams.supplierName"
placeholder="请输入供应商名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="daterangeCreateDate"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="开始时间">
<el-date-picker
v-model="daterangeStartDate"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker
v-model="daterangeFinishDate"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
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="danger"
plain
icon="el-icon-close"
size="mini"
:disabled="single"
@click="handleCancel"
v-hasPermi="['in:stockin:cancel']"
>手动作废
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-s-check"
size="mini"
:disabled="single"
@click="handleAudit"
v-hasPermi="['in:stockin:audit']"
>审核单据
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-check"
size="mini"
:disabled="single"
@click="handleFinish"
v-hasPermi="['in:stockin:finish']"
>完成单据
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="stockinList" @selection-change="handleSelectionChange"
@row-click="handleRowClick" highlight-current-row>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="入库订单" align="center" prop="stockinId" width="160"/>
<el-table-column label="入库类型" align="center" prop="inType">
<template slot-scope="scope">
<dict-tag :options="dict.type.in_stockin_in_type" :value="scope.row.inType"/>
</template>
</el-table-column>
<el-table-column label="单据来源" align="center" prop="stockSource">
<template slot-scope="scope">
<dict-tag :options="dict.type.in_stockin_stock_source" :value="scope.row.stockSource"/>
</template>
</el-table-column>
<el-table-column label="单据状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.in_stockin_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="上位单号" align="center" prop="erpBill"/>
<el-table-column label="仓库名称" align="center" prop="warehouseName"/>
<el-table-column label="用户名称" align="center" prop="userName"/>
<el-table-column label="部门名称" align="center" prop="deptName"/>
<el-table-column label="供应商名称" align="center" prop="supplierName" width="100" show-overflow-tooltip/>
<el-table-column label="创建时间" align="center" prop="createDate" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" prop="startDate" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" align="center" prop="finishDate" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.finishDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 入库子单详情 -->
<div class="detail-panel" style="margin-top: 20px;">
<div class="detail-header" style="margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
<span style="font-size: 14px; font-weight: 600; color: #303133;">入库子单详情</span>
<el-tag v-if="currentStockin" type="primary" size="small" style="margin-left: 4px;">
主单:{{ currentStockin.stockinId }}
</el-tag>
<span v-else
style="font-size: 12px; color: #909399; margin-left: 4px;">(请点击上方主单行查看对应子单数据)</span>
</div>
<el-table
v-loading="detailLoading"
:data="detailList"
border
stripe
size="small"
style="width: 100%;"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
>
<el-table-column label="子单ID" align="center" prop="stockinDetailId" width="180"/>
<el-table-column label="批次" align="center" prop="lotNo" width="150"/>
<el-table-column label="物料编码" align="center" prop="productId" width="150"/>
<el-table-column label="物料名称" align="center" prop="productName" min-width="150" show-overflow-tooltip/>
<el-table-column label="版辊编号" align="center" prop="rollerNumber"/>
<el-table-column label="计划数量" align="center" prop="quantity" width="100"/>
<el-table-column label="扫码数量" align="center" prop="scanNum" width="100"/>
<el-table-column label="实际数量" align="center" prop="assignNum" width="100"/>
<el-table-column label="状态" align="center" prop="status" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.stock_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" min-width="120" show-overflow-tooltip/>
<template slot="empty">
<div style="padding: 30px 0; color: #909399; font-size: 13px;">
<i class="el-icon-document" style="font-size: 28px; display: block; margin-bottom: 8px;"></i>
{{ currentStockin ? '暂无子单数据' : '请先选择上侧主单行' }}
</div>
</template>
</el-table>
<pagination
v-show="detailTotal > 0"
:total="detailTotal"
:page.sync="detailQueryParams.pageNum"
:limit.sync="detailQueryParams.pageSize"
@pagination="getDetailList"
style="margin-top: 0;"
/>
</div>
<!-- 添加或修改入库单据主信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="入库类型" prop="inType">
<el-select v-model="form.inType" placeholder="请选择入库类型">
<el-option
v-for="dict in dict.type.in_stockin_in_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="单据来源" prop="stockSource">
<el-select v-model="form.stockSource" placeholder="请选择单据来源">
<el-option
v-for="dict in dict.type.in_stockin_stock_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="单据状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.in_stockin_status"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="创建时间" prop="createDate">
<el-date-picker clearable
v-model="form.createDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择创建时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="开始时间" prop="startDate">
<el-date-picker clearable
v-model="form.startDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="结束时间" prop="finishDate">
<el-date-picker clearable
v-model="form.finishDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择结束时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="上位单号" prop="erpBill">
<el-input v-model="form.erpBill" placeholder="请输入上位单号"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="仓库ID562" prop="warehouseId">
<el-input v-model="form.warehouseId" placeholder="请输入仓库ID562"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="仓库名称" prop="warehouseName">
<el-input v-model="form.warehouseName" placeholder="请输入仓库名称"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="用户id" prop="userId">
<el-input v-model="form.userId" placeholder="请输入用户id"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="部门id" prop="deptId">
<el-input v-model="form.deptId" placeholder="请输入部门id"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="供应商id" prop="supplierId">
<el-input v-model="form.supplierId" placeholder="请输入供应商id"/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="供应商名称" prop="supplierName">
<el-input v-model="form.supplierName" placeholder="请输入供应商名称"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listStockin,
getStockin,
delStockin,
addStockin,
updateStockin,
listStockinDetail,
cancelStockin,
auditStockin,
finishStockin
} from "@/api/in/stockin"
export default {
name: "Stockin",
dicts: ['in_stockin_in_type', 'in_stockin_status', 'in_stockin_stock_source', 'stock_status'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 入库单据主信息表格数据
stockinList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 供应商名称时间范围
daterangeCreateDate: [],
// 供应商名称时间范围
daterangeStartDate: [],
// 供应商名称时间范围
daterangeFinishDate: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
inType: null,
stockSource: null,
status: null,
createDate: null,
startDate: null,
finishDate: null,
warehouseName: null,
userName: null,
deptName: null,
supplierName: null
},
// 表单参数
form: {},
// 表单校验
rules: {
inType: [
{required: true, message: "入库类型不能为空", trigger: "change"}
],
stockSource: [
{required: true, message: "单据来源不能为空", trigger: "change"}
],
status: [
{required: true, message: "单据状态不能为空", trigger: "change"}
],
createDate: [
{required: true, message: "创建时间不能为空", trigger: "blur"}
],
warehouseId: [
{required: true, message: "仓库不能为空", trigger: "blur"}
],
warehouseName: [
{required: true, message: "仓库名称不能为空", trigger: "blur"}
],
userId: [
{required: true, message: "用户id不能为空", trigger: "blur"}
],
userName: [
{required: true, message: "用户名称不能为空", trigger: "blur"}
],
deptId: [
{required: true, message: "部门id不能为空", trigger: "blur"}
],
deptName: [
{required: true, message: "部门名称不能为空", trigger: "blur"}
],
},
// ---- 子单相关 ----
// 当前选中主单行
currentStockin: null,
// 子单加载状态
detailLoading: false,
// 子单总条数
detailTotal: 0,
// 子单列表数据
detailList: [],
// 子单查询参数
detailQueryParams: {
pageNum: 1,
pageSize: 10,
stockinId: null,
status: null
}
}
},
created() {
this.getList()
},
methods: {
/** 查询入库单据主信息列表 */
getList() {
this.resetDetailList();
this.loading = true
this.queryParams.params = {}
if (null != this.daterangeCreateDate && '' != this.daterangeCreateDate) {
this.queryParams.params["beginCreateDate"] = this.daterangeCreateDate[0]
this.queryParams.params["endCreateDate"] = this.daterangeCreateDate[1]
}
if (null != this.daterangeStartDate && '' != this.daterangeStartDate) {
this.queryParams.params["beginStartDate"] = this.daterangeStartDate[0]
this.queryParams.params["endStartDate"] = this.daterangeStartDate[1]
}
if (null != this.daterangeFinishDate && '' != this.daterangeFinishDate) {
this.queryParams.params["beginFinishDate"] = this.daterangeFinishDate[0]
this.queryParams.params["endFinishDate"] = this.daterangeFinishDate[1]
}
listStockin(this.queryParams).then(response => {
this.stockinList = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
stockinId: null,
inType: null,
stockSource: null,
status: null,
createDate: null,
startDate: null,
finishDate: null,
erpBill: null,
warehouseId: null,
warehouseName: null,
userId: null,
userName: null,
deptId: null,
deptName: null,
supplierId: null,
supplierName: null
}
this.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
this.resetDetailList()
},
/** 重置按钮操作 */
resetQuery() {
this.daterangeCreateDate = []
this.daterangeStartDate = []
this.daterangeFinishDate = []
this.resetForm("queryForm")
this.handleQuery()
this.resetDetailList()
},
resetDetailList() {
this.detailList = []
this.detailQueryParams.stockinId = null
this.currentStockin = null
this.detailQueryParams.status = null
this.detailTotal = 0
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.stockinId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 —— 跳转到创建单据页面 */
handleAdd() {
this.$router.push({path: '/in/stockin/create'})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const stockinId = row.stockinId || this.ids
getStockin(stockinId).then(response => {
this.form = response.data
this.open = true
this.title = "修改入库单据主信息"
})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.stockinId != null) {
updateStockin(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
this.getList()
})
} else {
addStockin(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const stockinIds = row.stockinId || this.ids
this.$modal.confirm('是否确认删除入库单据主信息编号为"' + stockinIds + '"的数据项?').then(function () {
return delStockin(stockinIds)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => {
})
},
/** 导出按钮操作 */
handleExport() {
this.download('in/stockin/export', {
...this.queryParams
}, `stockin_${new Date().getTime()}.xlsx`)
},
/** 点击主单行 —— 联动刷新子单 */
handleRowClick(row) {
this.currentStockin = row
this.detailQueryParams.stockinId = row.stockinId
this.detailQueryParams.status = this.queryParams.status
this.detailQueryParams.pageNum = 1
this.getDetailList()
},
/** 查询入库子单列表 */
getDetailList() {
if (!this.detailQueryParams.stockinId) return
this.detailLoading = true
listStockinDetail(this.detailQueryParams).then(response => {
this.detailList = response.rows
this.detailTotal = response.total
this.detailLoading = false
}).catch(() => {
this.detailLoading = false
})
},
/** 手动作废按钮操作 */
handleCancel() {
const stockinId = this.ids[0]
this.$modal.confirm('是否确认作废选中的入库单据?').then(() => {
return cancelStockin(stockinId)
}).then(() => {
this.$modal.msgSuccess("作废成功")
this.getList()
}).catch(() => {
})
},
/** 审核单据按钮操作 */
handleAudit() {
const stockinId = this.ids[0]
this.$modal.confirm('是否确认审核选中的入库单据?').then(() => {
return auditStockin(stockinId)
}).then(() => {
this.$modal.msgSuccess("审核成功")
this.getList()
}).catch(() => {
})
},
/** 完成单据按钮操作 */
handleFinish() {
const stockinId = this.ids[0]
this.$modal.confirm('是否确认完成选中的入库单据?').then(() => {
return finishStockin(stockinId)
}).then(() => {
this.$modal.msgSuccess("操作成功")
this.getList()
}).catch(() => {
})
}
}
}
</script>