Files
FT542-WMS/ruoyi-ui/src/views/bas/cargoSpace/index.vue
liuhanqing 4e9dbfba27 feat(cargoSpace): 新增货位锁定功能并优化UI显示
- 在BasCargoSpaceMapper中新增lockedCargoSpace方法用于批量锁定货位
- 在BasCargoSpaceMapper.xml中实现根据货位ID锁定同一通道货位的SQL逻辑
- 在BasCargoSpaceServiceImpl中增加锁定状态变更时的业务处理逻辑
- 注释掉index.vue中的巷道ID列以优化界面展示
- 修改空间计划图表中出库分配的颜色配置提升可视化效果
2025-12-09 16:01:42 +08:00

558 lines
19 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="labelWidthForSearch">
<!-- 货位ID -->
<el-form-item label="货位编号" prop="cargoSpaceId">
<el-input
v-model="queryParams.cargoSpaceId"
placeholder="请输入货位编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- 仓库ID -->
<!-- <el-form-item label="仓库名称" prop="warehouseId">&lt;!&ndash; 仓库id &ndash;&gt;-->
<!-- <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库名称">-->
<!-- <el-option-->
<!-- v-for="item in warehouseOptions"-->
<!-- :key="item.warehouseId"-->
<!-- :label="item.warehouseName"-->
<!-- :value="item.warehouseId"-->
<!-- />-->
<!-- </el-select>-->
<!-- </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 :label="$t('cargoSpace.platoon')" prop="thePlatoon">
<el-input
v-model="queryParams.thePlatoon"
:placeholder="$t('cargoSpace.platoon')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<!-- 列 -->
<!-- <el-form-item :label="$t('cargoSpace.column')" prop="theColumn">
<el-input
v-model="queryParams.theColumn"
:placeholder="$t('cargoSpace.column')"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<!-- 层 -->
<!-- <el-form-item :label="$t('cargoSpace.floor')" prop="theFloor">
<el-input
v-model="queryParams.theFloor"
:placeholder="$t('cargoSpace.floor')"
clearable
@keyup.enter.native="handleQuery"
/>
</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.cargo_space_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- 是否锁定 -->
<el-form-item label="锁定状态" prop="locked">
<el-select v-model="queryParams.locked" placeholder="请选择锁定状态" clearable>
<el-option
v-for="dict in dict.type.cargo_space_lock_status"
: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="$t('cargoSpace.cargoHeight')" prop="cargoHight">
<el-input
v-model="queryParams.cargoHight"
:placeholder="$t('cargoSpace.cargoHeight')"
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">-->
<!-- &lt;!&ndash; 【新增】按钮 &ndash;&gt;-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['bas:cargoSpace: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="['bas:cargoSpace:edit']"
>修改</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- &lt;!&ndash; 【删除】按钮 &ndash;&gt;-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['bas:cargoSpace: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="['bas:cargoSpace:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="cargoSpaceList" @selection-change="handleSelectionChange" max-height="650">
<el-table-column type="selection" width="55" align="center" />
<!-- 货位ID -->
<el-table-column label="货位编号" align="left" prop="cargoSpaceId" />
<!-- 仓库名称 -->
<!-- <el-table-column label="仓库名称" align="left" prop="warehouseName" />-->
<!-- <el-table-column label="巷道ID" align="left" prop="roadwayId" /> -->
<!-- 货位名称 -->
<el-table-column label="货位名称" align="center" prop="cargoSpaceName" />
<!-- 排 -->
<el-table-column label="排" align="left" prop="thePlatoon" />
<!-- 列 -->
<el-table-column label="列" align="left" prop="theColumn" />
<!-- 层 -->
<el-table-column label="层" align="left" prop="theFloor" />
<!-- 货位编码 -->
<el-table-column label="货位状态" align="left" prop="status" >
<template slot-scope="scope">
<dict-tag :options="dict.type.cargo_space_status" :value="scope.row.status"/>
</template>
</el-table-column>
<!-- 是否锁定 -->
<el-table-column label="锁定状态" align="left" prop="locked" >
<template slot-scope="scope">
<dict-tag :options="dict.type.cargo_space_lock_status" :value="scope.row.locked"/>
</template>
</el-table-column>
<!-- 托盘编码 -->
<el-table-column label="托盘编号" align="left" prop="trayCode" />
<!-- 货物高度 -->
<!-- <el-table-column label="货物高度" align="right" prop="cargoHight" />-->
<!-- 人工操作 -->
<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-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['bas:cargoSpace:edit']"
>修改</el-button>
<!-- 人工操作---【删除】按钮 -->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['bas:cargoSpace:remove']"-->
<!-- >删除</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="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<!-- 货位ID -->
<el-form-item label="货位编号" prop="cargoSpaceId">
<el-input v-model="form.cargoSpaceId" placeholder="请输入货位编号" disabled/>
</el-form-item>
<!-- 仓库 -->
<!-- <el-form-item label="仓库名称" prop="warehouseId">-->
<!-- <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库名称">-->
<!-- <el-option-->
<!-- v-for="item in warehouseOptions"-->
<!-- :key="item.warehouseId"-->
<!-- :label="item.warehouseName"-->
<!-- :value="item.warehouseId"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- 巷道号 -->
<el-form-item label="巷道编号" prop="roadwayId">
<el-input v-model="form.roadwayId" placeholder="请输入巷道编号" disabled/>
</el-form-item>
<!-- 货区编码 -->
<!-- <el-form-item label="货区编号" prop="cargoAreaId">-->
<!-- <el-input v-model="form.cargoAreaId" placeholder="请输入货区编号" disabled/>-->
<!-- </el-form-item>-->
<!-- 货位类型 -->
<!-- <el-form-item label="货位类型" prop="theTypeName">-->
<!-- <el-input v-model="form.theTypeName" placeholder="请输入货位类型" />-->
<!-- </el-form-item>-->
<!-- 货位名称 -->
<el-form-item label="货位名称" prop="cargoSpaceName">
<el-input v-model="form.cargoSpaceName" placeholder="请输入货位名称" disabled/>
</el-form-item>
<!-- 排 -->
<!-- <el-form-item label="排" prop="thePlatoon">-->
<!-- <el-input v-model="form.thePlatoon" placeholder="请输入排号" />-->
<!-- </el-form-item>-->
<!-- 列 -->
<!-- <el-form-item label="列" prop="theColumn">-->
<!-- <el-input v-model="form.theColumn" placeholder="请输入列号" />-->
<!-- </el-form-item>-->
<!-- 层 -->
<!-- <el-form-item label="层" prop="theFloor">-->
<!-- <el-input v-model="form.theFloor" placeholder="请输入层号" />-->
<!-- </el-form-item>-->
<!-- 货位状态 -->
<el-form-item label="货位状态" prop="status">
<el-select v-model="form.status" placeholder="请选择货位状态">
<el-option
v-for="dict in dict.type.cargo_space_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- 是否锁定 -->
<el-form-item label="锁定状态" prop="locked">
<el-select v-model="form.locked" placeholder="请选择锁定状态">
<el-option
v-for="dict in dict.type.cargo_space_lock_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- 托盘编码 -->
<el-form-item label="托盘编号" prop="trayCode">
<el-input v-model="form.trayCode" placeholder="请输入托盘编号" />
</el-form-item>
<!-- 货位高度 -->
<!-- <el-form-item label="货物高度" prop="cargoHight">-->
<!-- <el-input v-model="form.cargoHight" placeholder="请输入货物高度" />-->
<!-- </el-form-item>-->
</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 { listCargoSpace, getCargoSpace, delCargoSpace, addCargoSpace, updateCargoSpace } from "@/api/bas/cargoSpace"
import {listWarehouse} from "@/api/bas/warehouse"
export default {
name: "CargoSpace",
dicts:['cargo_space_status','cargo_space_lock_status'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 库存信息表格数据
cargoSpaceList: [],
warehouseOptions:[],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
warehouseId: null,
roadwayId: null,
cargoAreaId: null,
theType: null,
theTypeName: null,
cargoSpaceName: null,
cargoSpaceId: null,
thePlatoon: null,
theColumn: null,
theFloor: null,
status: null,
locked: null,
trayCode: null,
cargoHight: null,
issDouble: null,
groupCodingNo: null,
groupCoding: null,
cargoSpaceLogo: null,
thisCargoArea: null
},
// 表单参数
form: {},
// 表单校验
rules: {
cargoSpaceId: [
// 校验---货位ID是否为空
{ required: true, message: "请输入货位编号", trigger: "blur" }
],
warehouseId: [
// 校验---仓库是否为空
{ required: true, message: "请选择仓库", trigger: "change" }
],
cargoSpaceName: [
// 校验---货位名称是否为空
{ required: true, message: "请输入货位名称", trigger: "blur" }
],
thePlatoon: [
// 校验---排是否为空
{ required: true, message: "请输入排号", trigger: "blur" }
],
theColumn: [
// 校验---列是否为空
{ required: true, message: "请输入列号", trigger: "blur" }
],
theFloor: [
// 校验---层是否为空
{ required: true, message: "请输入层号", trigger: "blur" }
],
status: [
// 校验---货位状态是否为空
{ required: true, message: "请选择货位状态", trigger: "change" }
],
locked: [
// 校验---锁定状态是否为空
{ required: true, message: "请选择锁定状态", trigger: "change" }
],
}
}
},
created() {
this.getWarehouseList();
this.getList()
},
methods: {
/** 获取仓库列表 */
getWarehouseList() {
listWarehouse().then(response => {
this.warehouseOptions = response.rows;
});
},
/** 查询库存信息列表 */
getList() {
this.loading = true
listCargoSpace(this.queryParams).then(response => {
this.cargoSpaceList = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
cargoSpaceId: null,
warehouseId: null,
roadwayId: null,
cargoAreaId: null,
theType: null,
theTypeName: null,
cargoSpaceName: null,
thePlatoon: null,
theColumn: null,
theFloor: null,
status: null,
locked: null,
trayCode: null,
cargoHight: null,
issDouble: null,
groupCodingNo: null,
groupCoding: null,
cargoSpaceLogo: null,
thisCargoArea: null
}
this.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm")
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.cargoSpaceId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = "新增货位"
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const cargoSpaceId = row.cargoSpaceId || this.ids
getCargoSpace(cargoSpaceId).then(response => {
this.form = response.data
this.open = true
this.title = "修改货位"
})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
// 检查cargoSpaceId是否存在且不为空
if (this.form.cargoSpaceId && this.form.cargoSpaceId.trim() !== '') {
// 检查数据库中是否存在该ID的记录
getCargoSpace(this.form.cargoSpaceId).then(response => {
// 检查返回的数据是否为null或空对象
if (response.data && response.data.cargoSpaceId) {
// 如果能获取到有效数据,说明记录存在,调用修改方法
updateCargoSpace(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
this.getList()
})
} else {
// 如果返回数据为空,说明记录不存在,调用新增方法
addCargoSpace(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
}
}).catch(() => {
// 如果请求失败,调用新增方法
addCargoSpace(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
})
} else {
// 如果cargoSpaceId为空,直接调用新增方法
addCargoSpace(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const cargoSpaceIds = row.cargoSpaceId || this.ids
this.$modal.confirm('确认要删除货位编号为 "' + cargoSpaceIds + '" 的货位吗?').then(function() {
return delCargoSpace(cargoSpaceIds)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
this.download('bas/cargoSpace/export', {
...this.queryParams
}, `cargoSpace_${new Date().getTime()}.xlsx`)
}
},
computed: {
labelWidthForSearch() {
const lang = this.$i18n.locale;
return lang.startsWith('en') ? '84px' : '68px';
},
labelWidthForFunction() {
const lang = this.$i18n.locale;
return lang.startsWith('en') ? '150px' : '120px';
}
},
}
</script>
<style scoped>
/* 统一表单控件宽度 */
.el-select,
.el-input {
width: 100%;
}
</style>