lsy/FT577-WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
刘汗青
2026-06-10 10:03:08 +08:00
commit a3c023a8d3
1255 changed files with 194055 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

553
ruoyi-ui/src/views/out/create/index.vue Normal file
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>