项目初始化

This commit is contained in:
刘汗青
2026-06-10 10:03:08 +08:00
commit a3c023a8d3
1255 changed files with 194055 additions and 0 deletions

View File

@@ -0,0 +1,553 @@
<template>
<div class="app-container create-stockout">
<!-- ===== 页面标题栏 ===== -->
<div class="page-header">
<span class="page-title"><i class="el-icon-document-add"></i> 新建出库单据</span>
<div class="header-actions">
<el-button type="primary" size="small" :loading="saving" @click="handleSave" v-hasPermi="['out:stockout:add']">
<i class="el-icon-check"></i> 保存
</el-button>
</div>
</div>
<!-- ===== 主单基础信息 ===== -->
<el-card shadow="never" class="section-card">
<div slot="header" class="card-header">
<i class="el-icon-tickets"></i> 基本信息
</div>
<el-form ref="mainForm" :model="mainForm" :rules="mainRules" label-width="100px" size="small">
<el-row :gutter="24">
<!-- 仓库 -->
<el-col :span="8">
<el-form-item label="仓库" prop="warehouseId">
<el-select
v-model="mainForm.warehouseId"
placeholder="请选择仓库"
filterable
clearable
style="width:100%"
@change="onWarehouseChange"
>
<el-option
v-for="w in warehouseOptions"
:key="w.warehouseId"
:label="w.warehouseName"
:value="w.warehouseId"
/>
</el-select>
</el-form-item>
</el-col>
<!-- 客户 -->
<el-col :span="8">
<el-form-item label="客户" prop="customerId">
<el-select
v-model="mainForm.customerId"
placeholder="请选择客户"
filterable
clearable
style="width:100%"
@change="onCustomerChange"
>
<el-option
v-for="c in customerOptions"
:key="c.customerId"
:label="c.customerName"
:value="c.customerId"
/>
</el-select>
</el-form-item>
</el-col>
<!-- 出库类型 -->
<el-col :span="8">
<el-form-item label="出库类型" prop="outType">
<el-select v-model="mainForm.outType" placeholder="请选择出库类型" style="width:100%">
<el-option
v-for="dict in dict.type.out_stockout_out_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<!-- 单据来源 -->
<el-col :span="8">
<el-form-item label="单据来源" prop="stockSource">
<el-select v-model="mainForm.stockSource" placeholder="请选择单据来源" style="width:100%">
<el-option
v-for="dict in dict.type.out_stockout_stock_source"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
<!-- 上位单号 -->
<el-col :span="8">
<el-form-item label="上位单号" prop="erpBill">
<el-input v-model="mainForm.erpBill" placeholder="请输入上位单号(选填)" clearable />
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- ===== 物料明细 ===== -->
<el-card shadow="never" class="section-card" style="margin-top:16px;">
<div slot="header" class="card-header">
<span><i class="el-icon-goods"></i> 物料明细</span>
<el-button
type="primary"
size="mini"
icon="el-icon-plus"
:disabled="!mainForm.warehouseId"
@click="openStockDialog"
v-hasPermi="['bas:stock:list']"
>选择库存</el-button>
</div>
<el-table
:data="detailLines"
border
size="small"
style="width:100%"
:header-cell-style="{ background:'#f5f7fa', color:'#606266' }"
>
<el-table-column type="index" label="序号" width="55" align="center" />
<el-table-column label="库存ID" prop="stockId" align="center" width="120" />
<el-table-column label="物料编码" prop="productId" align="center" width="130" />
<el-table-column label="物料名称" prop="productName" align="center" min-width="150" show-overflow-tooltip />
<el-table-column label="批次" prop="lotNo" align="center" width="130" />
<el-table-column label="货位" prop="cargoSpaceId" align="center" width="100" />
<el-table-column label="托盘条码" prop="trayCode" align="center" width="130" show-overflow-tooltip />
<el-table-column label="可用库存" prop="stockQuantity" align="center" width="100" />
<el-table-column label="出库数量" align="center" width="140">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.outQuantity"
:min="1"
:max="scope.row.stockQuantity || 999999"
size="mini"
controls-position="right"
style="width:120px"
@change="val => onOutQtyChange(val, scope.$index)"
/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" min-width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.remark" size="mini" placeholder="备注(选填)" clearable />
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="80" fixed="right">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
icon="el-icon-delete"
style="color:#f56c6c"
@click="removeLine(scope.$index)"
>删除</el-button>
</template>
</el-table-column>
<!-- 空状态 -->
<template slot="empty">
<div style="padding:40px 0; color:#c0c4cc;">
<i class="el-icon-shopping-cart-2" style="font-size:36px;display:block;margin-bottom:8px;"></i>
<span v-if="!mainForm.warehouseId">请先选择仓库后再选择库存</span>
<span v-else>暂无库存物料,请点击「选择库存」添加</span>
</div>
</template>
</el-table>
<!-- 汇总行 -->
<div v-if="detailLines.length > 0" class="summary-bar">
共 <strong>{{ detailLines.length }}</strong> 种物料,
合计出库 <strong>{{ totalQuantity }}</strong> 件
</div>
</el-card>
<!-- ===== 库存选择弹框 ===== -->
<el-dialog
title="选择库存物料"
:visible.sync="stockDialogVisible"
width="900px"
append-to-body
top="6vh"
@open="onStockDialogOpen"
>
<!-- 搜索栏 -->
<div class="stock-search">
<el-input
v-model="stockQuery.warehouseId"
placeholder="仓库ID"
size="small"
clearable
style="width:140px;margin-right:8px;"
@keyup.enter.native="searchStock"
/>
<el-input
v-model="stockQuery.productName"
placeholder="物料名称"
size="small"
clearable
style="width:160px;margin-right:8px;"
@keyup.enter.native="searchStock"
/>
<el-input
v-model="stockQuery.productId"
placeholder="物料编码"
size="small"
clearable
style="width:140px;margin-right:8px;"
@keyup.enter.native="searchStock"
/>
<el-input
v-model="stockQuery.lotNo"
placeholder="批次号"
size="small"
clearable
style="width:130px;margin-right:8px;"
@keyup.enter.native="searchStock"
/>
<el-button type="primary" size="small" icon="el-icon-search" @click="searchStock">搜索</el-button>
<el-button size="small" icon="el-icon-refresh" @click="resetStockSearch">重置</el-button>
</div>
<!-- 库存表格(多选) -->
<el-table
ref="stockTable"
v-loading="stockLoading"
:data="stockList"
size="small"
border
stripe
style="width:100%;margin-top:10px;"
:header-cell-style="{ background:'#f5f7fa', color:'#606266' }"
@selection-change="onStockSelectionChange"
>
<el-table-column type="selection" width="45" align="center" :selectable="isStockSelectable" />
<el-table-column label="仓库" prop="warehouseName" align="center" width="120" show-overflow-tooltip />
<el-table-column label="货位" prop="cargoSpaceId" align="center" width="100" />
<el-table-column label="物料编码" prop="productId" align="center" width="120" />
<el-table-column label="物料名称" prop="productName" align="center" min-width="130" show-overflow-tooltip />
<el-table-column label="批次" prop="lotNo" align="center" width="120" />
<el-table-column label="托盘条码" prop="trayCode" align="center" width="120" show-overflow-tooltip />
<el-table-column label="可用库存" prop="quantity" align="center" width="90" />
</el-table>
<!-- 弹框分页 -->
<pagination
v-show="stockTotal > 0"
:total="stockTotal"
:page.sync="stockQuery.pageNum"
:limit.sync="stockQuery.pageSize"
@pagination="fetchStockList"
style="margin-top:4px;"
/>
<div slot="footer" class="dialog-footer">
<span style="float:left;color:#606266;font-size:13px;line-height:32px;">
已选 <strong style="color:#409eff;">{{ selectedStocks.length }}</strong> 条库存记录
</span>
<el-button @click="stockDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmStocks" :disabled="selectedStocks.length === 0">
确认添加
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { saveWithDetails } from '@/api/out/stockout'
import { listWarehouse } from '@/api/bas/warehouse'
import { listCustomer } from '@/api/bas/customer'
import { listStock } from '@/api/bas/stock'
export default {
name: 'CreateStockout',
dicts: ['out_stockout_out_type', 'out_stockout_stock_source'],
data() {
return {
saving: false,
// ---------- 主单表单 ----------
mainForm: {
outType: null,
stockSource: null,
erpBill: null,
warehouseId: null,
warehouseName: null,
customerId: null,
customerName: null,
status: '0' // 默认待出库
},
mainRules: {
warehouseId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
customerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
outType: [{ required: true, message: '请选择出库类型', trigger: 'change' }],
stockSource: [{ required: true, message: '请选择单据来源', trigger: 'change' }]
},
// ---------- 下拉数据 ----------
warehouseOptions: [],
customerOptions: [],
// ---------- 明细行 ----------
detailLines: [],
// ---------- 库存弹框 ----------
stockDialogVisible: false,
stockLoading: false,
stockList: [],
stockTotal: 0,
stockQuery: {
pageNum: 1,
pageSize: 8,
warehouseId: null,
productId: null,
productName: null,
lotNo: null
},
selectedStocks: []
}
},
computed: {
totalQuantity() {
return this.detailLines.reduce((sum, l) => sum + (Number(l.outQuantity) || 0), 0)
}
},
created() {
this.fetchWarehouseOptions()
this.fetchCustomerOptions()
},
methods: {
// ===== 基础数据加载 =====
fetchWarehouseOptions() {
listWarehouse({ pageSize: 200,warehouseType: 1 }).then(res => {
this.warehouseOptions = res.rows || []
})
},
fetchCustomerOptions() {
listCustomer({ pageSize: 200 }).then(res => {
this.customerOptions = res.rows || []
})
},
// ===== 仓库/客户联动 =====
onWarehouseChange(val) {
const w = this.warehouseOptions.find(o => o.warehouseId === val)
this.mainForm.warehouseName = w ? w.warehouseName : null
this.stockQuery.warehouseId = val || null
},
onCustomerChange(val) {
const c = this.customerOptions.find(o => o.customerId === val)
this.mainForm.customerName = c ? c.customerName : null
},
// ===== 出库数量变化 =====
onOutQtyChange(val, index) {
// 可在此扩展超限提示等逻辑
},
// ===== 库存弹框 =====
openStockDialog() {
this.stockDialogVisible = true
},
onStockDialogOpen() {
this.resetStockSearch()
this.stockQuery.warehouseId = this.mainForm.warehouseId
this.fetchStockList()
},
searchStock() {
this.stockQuery.pageNum = 1
this.fetchStockList()
},
resetStockSearch() {
this.stockQuery.productId = null
this.stockQuery.productName = null
this.stockQuery.lotNo = null
this.stockQuery.pageNum = 1
},
fetchStockList() {
this.stockLoading = true
listStock(this.stockQuery).then(res => {
this.stockList = res.rows || []
this.stockTotal = res.total || 0
this.stockLoading = false
// 回显已选中行
this.$nextTick(() => {
if (this.$refs.stockTable) {
this.stockList.forEach(row => {
const already = this.detailLines.some(l => l.stockId === row.stockId)
if (already) {
this.$refs.stockTable.toggleRowSelection(row, true)
}
})
}
})
}).catch(() => { this.stockLoading = false })
},
onStockSelectionChange(selection) {
this.selectedStocks = selection
},
// 已在明细行中的库存记录置为不可重复勾选
isStockSelectable(row) {
return !this.detailLines.some(l => l.stockId === row.stockId)
},
confirmStocks() {
this.selectedStocks.forEach(s => {
if (!this.detailLines.some(l => l.stockId === s.stockId)) {
this.detailLines.push({
stockId: s.stockId, // 库存ID
productId: s.productId, // 物料编码
productName: s.productName, // 物料名称
lotNo: s.lotNo || '', // 批次
cargoSpaceId: s.cargoSpaceId || '', // 货位
trayCode: s.trayCode || '', // 托盘条码
stockQuantity: s.quantity, // 可用库存(原始)
outQuantity: 1, // 出库数量默认1
remark: ''
})
}
})
this.stockDialogVisible = false
},
// ===== 明细行操作 =====
removeLine(index) {
this.detailLines.splice(index, 1)
},
// ===== 保存 =====
handleSave() {
// 1. 主单校验
this.$refs.mainForm.validate(valid => {
if (!valid) return
// 2. 明细非空校验
if (this.detailLines.length === 0) {
this.$modal.msgWarning('请至少添加一条库存明细')
return
}
// 3. 数量校验
const invalidLine = this.detailLines.find(l => !l.outQuantity || l.outQuantity <= 0)
if (invalidLine) {
this.$modal.msgWarning(`物料【${invalidLine.productName}】的出库数量必须大于 0`)
return
}
this.doSave()
})
},
async doSave() {
this.saving = true
try {
// 构造保存数据(主单 + 明细)
const saveData = {
...this.mainForm,
details: this.detailLines.map(line => ({
stockId: line.stockId,
productId: line.productId,
productName: line.productName,
lotNo: line.lotNo || null,
cargoSpaceId: line.cargoSpaceId || null,
trayCode: line.trayCode || null,
quantity: line.outQuantity, // 出库数量
remark: line.remark || null
}))
}
const res = await saveWithDetails(saveData)
if (res.code !== 200) {
this.$modal.msgError('保存失败:' + res.msg)
return
}
this.$modal.msgSuccess('出库单据创建成功!')
// 跳回列表页
this.$router.push({ path: '/out/stockout' })
} catch (e) {
this.$modal.msgError('保存失败,请检查网络或联系管理员')
console.error(e)
} finally {
this.saving = false
}
}
}
}
</script>
<style scoped>
.create-stockout {
padding: 20px;
}
/* 页面标题栏 */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.page-title {
font-size: 18px;
font-weight: 600;
color: #303133;
}
.header-actions {
display: flex;
gap: 8px;
}
/* 分区卡片 */
.section-card {
border-radius: 4px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
color: #303133;
}
.card-header i {
margin-right: 6px;
color: #409eff;
}
/* 库存搜索栏 */
.stock-search {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
/* 汇总栏 */
.summary-bar {
margin-top: 10px;
padding: 8px 12px;
background: #f0f9ff;
border-radius: 4px;
font-size: 13px;
color: #606266;
border-left: 3px solid #409eff;
}
.summary-bar strong {
color: #409eff;
margin: 0 2px;
}
</style>

View File

@@ -0,0 +1,333 @@
<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="taskNo">
<el-input
v-model="queryParams.taskNo"
placeholder="请输入任务号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="任务类型" prop="inOrOut">
<el-select v-model="queryParams.inOrOut" placeholder="请选择任务类型" clearable>
<el-option
v-for="dict in dict.type.mydo_job_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="执行阶段" prop="executionPhase">
<el-select v-model="queryParams.executionPhase" placeholder="请选择执行阶段" clearable>
<el-option
v-for="dict in dict.type.mydo_job_execution_phase"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="托盘码" prop="trayCode">
<el-input
v-model="queryParams.trayCode"
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="巷道ID" prop="roadwayId">
<el-input
v-model="queryParams.roadwayId"
placeholder="请输入巷道ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="货位ID" prop="cargoSpaceId">
<el-input
v-model="queryParams.cargoSpaceId"
placeholder="请输入货位ID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="货位名称" prop="cargoSpaceName">
<el-input
v-model="queryParams.cargoSpaceName"
placeholder="请输入货位名称"
clearable
@keyup.enter.native="handleQuery"
/>
</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="['out:job:cancel']"
>手动作废</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-check"
size="mini"
:disabled="single"
@click="handleComplete"
v-hasPermi="['out:job:complete']"
>手动完成</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange" @row-click="handleRowClick" highlight-current-row>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="任务ID" align="center" prop="jobId" />
<el-table-column label="任务状态" align="center" prop="status" />
<el-table-column label="任务号" align="center" prop="taskNo" />
<el-table-column label="任务类型" align="center" prop="inOrOut">
<template slot-scope="scope">
<dict-tag :options="dict.type.mydo_job_status" :value="scope.row.inOrOut"/>
</template>
</el-table-column>
<el-table-column label="执行阶段" align="center" prop="executionPhase">
<template slot-scope="scope">
<dict-tag :options="dict.type.mydo_job_execution_phase" :value="scope.row.executionPhase"/>
</template>
</el-table-column>
<el-table-column label="托盘码" align="center" prop="trayCode" />
<el-table-column label="仓库名称" align="center" prop="warehouseName" />
<el-table-column label="巷道ID" align="center" prop="roadwayId" />
<el-table-column label="货位ID" align="center" prop="cargoSpaceId" />
<el-table-column label="货位名称" align="center" prop="cargoSpaceName" />
<el-table-column label="出口" align="center" prop="exitId" />
<!-- <el-table-column label="高度" align="center" prop="height" />-->
<!-- <el-table-column label="重量" align="center" prop="weight" />-->
<el-table-column label="创建时间" align="center" prop="createTime" 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="startTime" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" align="center" prop="finishTime" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.finishTime, '{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="currentJob" type="primary" size="small" style="margin-left: 4px;">
主任务:{{ currentJob.taskNo || currentJob.jobId }}
</el-tag>
<span v-else style="font-size: 12px; color: #909399; margin-left: 4px;">(请点击上方主作业行查看对应子作业数据)</span>
</div>
<el-table
v-loading="detailLoading"
:data="jobDetailList"
border
stripe
size="small"
style="width: 100%;"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
>
<el-table-column label="子任务ID" align="center" prop="jobDetailId" width="180" />
<el-table-column label="物料编码" align="center" prop="productId" width="120" />
<el-table-column label="物料名称" align="center" prop="productName" min-width="150" show-overflow-tooltip />
<el-table-column label="批次" align="center" prop="lotNo" width="120" />
<el-table-column label="子单编号" align="center" prop="inOrOutDId" width="160" />
<!-- <el-table-column label="入库数量" align="center" prop="inQuantity" width="100" />-->
<el-table-column label="库存数量" align="center" prop="stockQuantity" width="100" />
<el-table-column label="出库数量" align="center" prop="outQuantity" width="100" />
<!-- <el-table-column label="客户名称" align="center" prop="customerName" width="120" />-->
<el-table-column label="供应商名称" align="center" prop="supplierName" width="120" />
<!-- <el-table-column label="入库时间" align="center" prop="inDate" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.inDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>-->
<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>
{{ currentJob ? '暂无子作业数据' : '请先选择上方主作业行' }}
</div>
</template>
</el-table>
<pagination
v-show="detailTotal > 0"
:total="detailTotal"
:page.sync="detailQueryParams.pageNum"
:limit.sync="detailQueryParams.pageSize"
@pagination="getJobDetailList"
style="margin-top: 0;"
/>
</div>
</div>
</template>
<script>
import { listJob, cancelJob, completeJob } from "@/api/out/job"
import { listJobdetail } from "@/api/out/jobdetail"
export default {
name: "Job",
dicts: ['mydo_job_execution_phase', 'mydo_job_status'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 作业信息表格数据
jobList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
status: null,
taskNo: null,
inOrOut: null,
executionPhase: null,
trayCode: null,
warehouseName: null,
roadwayId: null,
cargoSpaceId: null,
cargoSpaceName: null
},
// ---- 子作业相关 ----
// 当前选中主作业行
currentJob: null,
// 子作业加载状态
detailLoading: false,
// 子作业总条数
detailTotal: 0,
// 子作业列表数据
jobDetailList: [],
// 子作业查询参数
detailQueryParams: {
pageNum: 1,
pageSize: 10,
jobId: null
}
}
},
created() {
this.getList()
},
methods: {
/** 查询作业信息列表 */
getList() {
this.loading = true
listJob(this.queryParams).then(response => {
this.jobList = response.rows
this.total = response.total
this.loading = false
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm")
this.handleQuery()
this.resetDetailQuery()
},
resetDetailQuery() {
this.jobDetailList = []
this.detailQueryParams.jobId = null
this.detailQueryParams.status = null
this.detailTotal = 0
this.currentJob = null
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.jobId)
this.single = selection.length !== 1
},
/** 手动作废按钮操作 */
handleCancel() {
const jobId = this.ids[0]
this.$modal.confirm('是否确认作废选中的作业任务?').then(() => {
return cancelJob(jobId)
}).then(() => {
this.$modal.msgSuccess("作废成功")
this.getList()
}).catch(() => {})
},
/** 手动完成按钮操作 */
handleComplete() {
const jobId = this.ids[0]
this.$modal.confirm('是否确认手动完成选中的作业任务?').then(() => {
return completeJob(jobId)
}).then(() => {
this.$modal.msgSuccess("操作成功")
this.getList()
}).catch(() => {})
},
/** 点击主作业行 —— 联动刷新子作业 */
handleRowClick(row) {
this.currentJob = row
this.detailQueryParams.jobId = row.jobId
this.detailQueryParams.pageNum = 1
this.getJobDetailList()
},
/** 查询子作业列表 */
getJobDetailList() {
if (!this.detailQueryParams.jobId) return
this.detailLoading = true
listJobdetail(this.detailQueryParams).then(response => {
this.jobDetailList = response.rows || []
this.detailTotal = response.total || 0
this.detailLoading = false
}).catch(() => {
this.detailLoading = false
})
}
}
}
</script>

View File

@@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>

View File

@@ -0,0 +1,508 @@
<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="outType">
<el-select v-model="queryParams.outType" placeholder="请选择出库类型" clearable>
<el-option
v-for="dict in dict.type.out_stockout_out_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.out_stockout_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.out_stockout_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="customerName">
<el-input
v-model="queryParams.customerName"
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"
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"
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"
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="['out:stockout: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="['out:stockout: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="['out:stockout:finish']"
>完成单据
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-magic-stick"
size="mini"
:disabled="single"
@click="handleAutoAssign"
v-hasPermi="['out:stockout:autoAssign']"
>自动分配
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-s-operation"
size="mini"
:disabled="detailSingle"
@click="openAssignDialog"
v-hasPermi="['out:stockout:manualAssign']"
>手动分配
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="stockoutList" @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="stockoutId" width="160"/>
<el-table-column label="出库类型" align="center" prop="outType">
<template slot-scope="scope">
<dict-tag :options="dict.type.out_stockout_out_type" :value="scope.row.outType"/>
</template>
</el-table-column>
<el-table-column label="单据来源" align="center" prop="stockSource">
<template slot-scope="scope">
<dict-tag :options="dict.type.out_stockout_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.out_stockout_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="customerName" 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="currentStockout" type="primary" size="small" style="margin-left: 4px;">
主单:{{ currentStockout.stockoutId }}
</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' }"
@selection-change="handleDetailSelectionChange"
ref="detailTable"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="子单ID" align="center" prop="stockoutDetailId" 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="quantity" width="100"/>
<el-table-column label="扫码数量" align="center" prop="allotNum" width="100"/>
<el-table-column label="实际数量" align="center" prop="assignNum" width="100"/>
<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>
{{ currentStockout ? '暂无子单数据' : '请先选择上侧主单行' }}
</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="选择出库库存"
:visible.sync="assignDialogVisible"
width="80%"
append-to-body
>
<el-table
v-loading="stockLoading"
:data="stockList"
border
size="small"
ref="stockTable"
@selection-change="handleStockSelectionChange"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="库存ID" prop="stockId" align="center"/>
<el-table-column label="物料编码" prop="productId" align="center"/>
<el-table-column label="物料名称" prop="productName" align="center"/>
<el-table-column label="批次" prop="lotNo" align="center"/>
<el-table-column label="货位" prop="cargoSpaceName" align="center"/>
<el-table-column label="托盘号" prop="trayCode" align="center"/>
<el-table-column label="可用数量" prop="quantity" align="center"/>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="assignDialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmManualAssign">确认分配</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listStockout,
cancelStockout,
auditStockout,
finishStockout,
autoAssignStockout,
manualAssignStockout
} from "@/api/out/stockout"
import { listStockoutdetail } from "@/api/out/stockoutdetail"
import { listStock } from "@/api/bas/stock"
export default {
name: "Stockout",
dicts: ['out_stockout_stock_source', 'out_stockout_status', 'out_stockout_out_type'],
data() {
return {
loading: true,
ids: [],
single: true,
multiple: true,
showSearch: true,
total: 0,
stockoutList: [],
daterangeCreateDate: [],
daterangeStartDate: [],
daterangeFinishDate: [],
queryParams: {
pageNum: 1,
pageSize: 10,
outType: null,
stockSource: null,
status: null,
createDate: null,
startDate: null,
finishDate: null,
erpBill: null,
warehouseName: null,
userName: null,
deptName: null,
customerName: null
},
// 子单
currentStockout: null,
detailLoading: false,
detailTotal: 0,
detailList: [],
detailQueryParams: {
pageNum: 1,
pageSize: 10,
stockoutId: null
},
// 子单选中ID
detailIds: [],
detailSingle: true,
// 手动分配弹窗
assignDialogVisible: false,
stockLoading: false,
stockList: [],
selectedStockList: []
}
},
created() {
this.getList()
},
methods: {
getList() {
this.loading = true
this.queryParams.params = {}
if (this.daterangeCreateDate && this.daterangeCreateDate.length > 0) {
this.queryParams.params.beginCreateDate = this.daterangeCreateDate[0]
this.queryParams.params.endCreateDate = this.daterangeCreateDate[1]
}
if (this.daterangeStartDate && this.daterangeStartDate.length > 0) {
this.queryParams.params.beginStartDate = this.daterangeStartDate[0]
this.queryParams.params.endStartDate = this.daterangeStartDate[1]
}
if (this.daterangeFinishDate && this.daterangeFinishDate.length > 0) {
this.queryParams.params.beginFinishDate = this.daterangeFinishDate[0]
this.queryParams.params.endFinishDate = this.daterangeFinishDate[1]
}
listStockout(this.queryParams).then(res => {
this.stockoutList = res.rows
this.total = res.total
this.loading = false
})
},
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
resetQuery() {
this.daterangeCreateDate = []
this.daterangeStartDate = []
this.daterangeFinishDate = []
this.resetForm("queryForm")
this.handleQuery()
this.resetDetailList()
},
resetDetailList() {
this.detailList = []
this.detailQueryParams.stockoutId = null
this.currentStockout = null
this.detailTotal = 0
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.stockoutId)
this.single = selection.length !== 1
},
handleRowClick(row) {
this.currentStockout = row
this.detailQueryParams.stockoutId = row.stockoutId
this.detailQueryParams.pageNum = 1
this.getDetailList()
},
getDetailList() {
if (!this.detailQueryParams.stockoutId) return
this.detailLoading = true
listStockoutdetail(this.detailQueryParams).then(res => {
this.detailList = res.rows
this.detailTotal = res.total
this.detailLoading = false
})
},
// 子单多选事件
handleDetailSelectionChange(val) {
this.detailIds = val.map(item => item.stockoutDetailId)
this.detailSingle = val.length !== 1
},
// ===================== 手动分配:打开弹窗 =====================
openAssignDialog() {
if (this.detailIds.length === 0) {
this.$modal.msgWarning("请选择子单")
return
}
const detail = this.detailList.find(item => item.stockoutDetailId === this.detailIds[0])
this.assignDialogVisible = true
this.stockLoading = true
// 根据物料编码查询可用库存
listStock({ productId: detail.productId }).then(res => {
this.stockList = res.rows
this.stockLoading = false
})
},
// 库存选中事件
handleStockSelectionChange(val) {
this.selectedStockList = val
},
// 确认分配
confirmManualAssign() {
if (this.selectedStockList.length === 0) {
this.$modal.msgWarning("请选择要出库的库存")
return
}
const stockIdList = this.selectedStockList.map(item => item.stockId)
const detailId = this.detailIds[0]
this.$modal.confirm("确认选中库存进行分配?").then(() => {
// 调用子单手动分配接口
return manualAssignStockout({
stockoutDetailId: detailId,
stockIdList: stockIdList
})
}).then(() => {
this.$modal.msgSuccess("分配成功")
this.assignDialogVisible = false
this.getDetailList()
})
},
handleCancel() {
cancelStockout(this.ids[0]).then(() => {
this.$modal.msgSuccess("作废成功")
this.getList()
})
},
handleAudit() {
auditStockout(this.ids[0]).then(() => {
this.$modal.msgSuccess("审核成功")
this.getList()
})
},
handleFinish() {
finishStockout(this.ids[0]).then(() => {
this.$modal.msgSuccess("完成成功")
this.getList()
})
},
handleAutoAssign() {
autoAssignStockout(this.ids[0]).then(() => {
this.$modal.msgSuccess("自动分配成功")
this.getDetailList()
})
}
}
}
</script>