3 changed files with 605 additions and 1 deletions
-
21src/api/wcsSystem/agvStation.js
-
5src/views/modules/warehouse/location.vue
-
580src/views/modules/wcsSystem/agvStation.vue
@ -0,0 +1,21 @@ |
|||
import { createAPI } from "@/utils/httpRequest.js"; |
|||
|
|||
// ========== 查询相关 ========== - rqrq
|
|||
|
|||
// 查询AGV站点列表 - rqrq
|
|||
export const getAgvStationList = data => createAPI('/wcsSystem/agvStation/list', 'POST', data) |
|||
|
|||
// 获取区域类型下拉选项 - rqrq
|
|||
export const getAreaOptions = data => createAPI('/wcsSystem/agvStation/getAreaOptions', 'POST', data) |
|||
|
|||
// 获取状态下拉选项 - rqrq
|
|||
export const getStatusOptions = data => createAPI('/wcsSystem/agvStation/getStatusOptions', 'POST', data) |
|||
|
|||
// ========== 保存相关 ========== - rqrq
|
|||
|
|||
// 新增AGV站点 - rqrq
|
|||
export const addAgvStation = data => createAPI('/wcsSystem/agvStation/add', 'POST', data) |
|||
|
|||
// 修改AGV站点 - rqrq
|
|||
export const updateAgvStation = data => createAPI('/wcsSystem/agvStation/update', 'POST', data) |
|||
|
|||
@ -0,0 +1,580 @@ |
|||
<template> |
|||
<div class="mod-config"> |
|||
<!-- 查询表单 - rqrq --> |
|||
<el-form :inline="true" label-position="top" style="margin-top: 1px; margin-left: 0px;"> |
|||
<el-form-item label="站点ID"> |
|||
<el-input v-model="queryData.searchStationId" style="width: 120px" placeholder="站点ID" clearable></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="RCS站点编码"> |
|||
<el-input v-model="queryData.searchStationCode" style="width: 120px" placeholder="站点编码" clearable></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="站点名称"> |
|||
<el-input v-model="queryData.searchStationName" style="width: 120px" placeholder="站点名称" clearable></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label=" "> |
|||
<el-button type="primary" @click="getDataList()">查询</el-button> |
|||
<el-button @click="resetQuery()">重置</el-button> |
|||
<el-button type="primary" class="yzzButtonAn" @click="addStation()">新增</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<!-- 数据表格 - rqrq --> |
|||
<el-table |
|||
:data="dataList" |
|||
:height="height" |
|||
border |
|||
highlight-current-row |
|||
v-loading="dataListLoading" |
|||
style="width: 100%;"> |
|||
<el-table-column |
|||
v-for="(item,index) in columnList" :key="index" |
|||
:sortable="item.columnSortable" |
|||
:prop="item.columnProp" |
|||
:header-align="item.headerAlign" |
|||
:show-overflow-tooltip="item.showOverflowTooltip" |
|||
:align="item.align" |
|||
:fixed="item.fixed==''?false:item.fixed" |
|||
:min-width="item.columnWidth" |
|||
:label="item.columnLabel"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="item.columnProp === 'active'"> |
|||
<el-tag |
|||
:type="scope.row.active === 'Y' ? 'success' : 'danger'" |
|||
size="small"> |
|||
{{ scope.row.active === 'Y' ? '启用' : '禁用' }} |
|||
</el-tag> |
|||
</span> |
|||
<span v-else-if="item.columnProp === 'autoCallBlankPallet'"> |
|||
{{ scope.row.autoCallBlankPallet === 'Y' ? '是' : '否' }} |
|||
</span> |
|||
<span v-else>{{ scope.row[item.columnProp] }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<!-- 操作列 - rqrq --> |
|||
<el-table-column |
|||
header-align="center" |
|||
align="center" |
|||
fixed="right" |
|||
width="100" |
|||
label="操作"> |
|||
<template slot-scope="scope"> |
|||
<a type="text" @click="editStation(scope.row)">修改</a> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 分页 - rqrq --> |
|||
<el-pagination |
|||
@size-change="sizeChangeHandle" |
|||
@current-change="currentChangeHandle" |
|||
:current-page="pageIndex" |
|||
:page-sizes="[20, 50, 100, 1000]" |
|||
:page-size="pageSize" |
|||
:total="totalPage" |
|||
layout="total, sizes, prev, pager, next, jumper"> |
|||
</el-pagination> |
|||
|
|||
<!-- 新增/修改弹窗 - rqrq --> |
|||
<el-dialog |
|||
:title="dialogTitle" |
|||
:visible.sync="dialogVisible" |
|||
:close-on-click-modal="false" |
|||
v-drag |
|||
width="900px"> |
|||
<el-form :model="formData" :rules="formRules" ref="stationForm" label-position="top" style="margin-top: 1px; margin-left: 0px;"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-form-item label="站点ID" prop="stationId"> |
|||
<el-input v-model="formData.stationId" :disabled="dialogType === 'edit'" placeholder="请输入站点ID"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="RCS站点编码" prop="stationCode"> |
|||
<el-input v-model="formData.stationCode" :disabled="dialogType === 'edit'" placeholder="请输入站点编码"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="站点名称" prop="stationName"> |
|||
<el-input v-model="formData.stationName" placeholder="请输入站点名称"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-form-item label="仓库编码" prop="warehouseCode"> |
|||
<el-input v-model="formData.warehouseCode" placeholder="请输入仓库编码"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="库位编码" prop="locationCode"> |
|||
<el-input v-model="formData.locationCode" placeholder="请输入库位编码"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="区域类型" prop="areaType"> |
|||
<el-select v-model="formData.areaType" placeholder="请选择区域类型" style="width: 100%"> |
|||
<el-option |
|||
v-for="item in areaOptions" |
|||
:key="item.areaId" |
|||
:label="item.areaDesc" |
|||
:value="item.areaId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-form-item label="X坐标"> |
|||
<el-input v-model="formData.locationX" placeholder="请输入X坐标"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="Y坐标"> |
|||
<el-input v-model="formData.locationY" placeholder="请输入Y坐标"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="Z坐标"> |
|||
<el-input v-model="formData.locationZ" placeholder="请输入Z坐标"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="是否启用" prop="active"> |
|||
<el-select v-model="formData.active" placeholder="请选择" style="width: 100%"> |
|||
<el-option label="启用" value="Y"></el-option> |
|||
<el-option label="禁用" value="N"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row :gutter="20"> |
|||
<el-col :span="6"> |
|||
<el-form-item label="站点状态" prop="statusDb"> |
|||
<el-select v-model="formData.statusDb" placeholder="请选择状态" style="width: 100%"> |
|||
<el-option |
|||
v-for="item in statusOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-form-item label="自动续盘" prop="autoCallBlankPallet"> |
|||
<el-select v-model="formData.autoCallBlankPallet" placeholder="请选择" disabled style="width: 100%"> |
|||
<el-option label="是" value="Y"></el-option> |
|||
<el-option label="否" value="N"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-form-item label="备注"> |
|||
<el-input v-model="formData.remark" type="textarea" :rows="3" resize='none' placeholder="请输入备注"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
|
|||
<div slot="footer" class="dialog-footer" style="margin-top: 52px"> |
|||
<el-button type="primary" @click="saveStation" :disabled="saveLoading"> |
|||
{{ saveLoading ? '保存中...' : '确定' }} |
|||
</el-button> |
|||
<el-button @click="dialogVisible = false" :disabled="saveLoading">取消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getAgvStationList, |
|||
addAgvStation, |
|||
updateAgvStation, |
|||
getAreaOptions, |
|||
getStatusOptions |
|||
} from '@/api/wcsSystem/agvStation.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// 查询条件 - rqrq |
|||
queryData: { |
|||
searchStationCode: '', |
|||
searchStationName: '', |
|||
searchStationId: '', |
|||
stationType: '正式站点', |
|||
active: 'Y', |
|||
page: 1, |
|||
limit: 20 |
|||
}, |
|||
// 表格高度 - rqrq |
|||
height: 450, |
|||
// 表格列配置 - rqrq |
|||
columnList: [ |
|||
{ |
|||
columnProp: "stationCode", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "站点编码", |
|||
columnWidth: 120, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "stationName", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "站点名称", |
|||
columnWidth: 120, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "stationId", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "站点ID", |
|||
columnWidth: 100, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "warehouseCode", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "仓库编码", |
|||
columnWidth: 100, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "locationCode", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "库位编码", |
|||
columnWidth: 120, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "areaType", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "区域类型", |
|||
columnWidth: 100, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "stationArea", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "站点区域", |
|||
columnWidth: 120, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "locationX", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "X坐标", |
|||
columnWidth: 80, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "locationY", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "Y坐标", |
|||
columnWidth: 80, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "locationZ", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "Z坐标", |
|||
columnWidth: 80, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "active", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "是否启用", |
|||
columnWidth: 80, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "status", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "站点状态", |
|||
columnWidth: 100, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "autoCallBlankPallet", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "自动续盘", |
|||
columnWidth: 80, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "stationType", |
|||
headerAlign: "center", |
|||
align: "center", |
|||
columnLabel: "站点类型", |
|||
columnWidth: 100, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
}, |
|||
{ |
|||
columnProp: "remark", |
|||
headerAlign: "center", |
|||
align: "left", |
|||
columnLabel: "备注", |
|||
columnWidth: 200, |
|||
columnSortable: false, |
|||
showOverflowTooltip: true, |
|||
fixed: "" |
|||
} |
|||
], |
|||
// 数据列表 - rqrq |
|||
dataList: [], |
|||
// 分页参数 - rqrq |
|||
pageIndex: 1, |
|||
pageSize: 20, |
|||
totalPage: 0, |
|||
dataListLoading: false, |
|||
// 弹窗相关 - rqrq |
|||
dialogVisible: false, |
|||
dialogTitle: '', |
|||
dialogType: '', // add 或 edit |
|||
formData: {}, |
|||
formRules: { |
|||
stationCode: [ |
|||
{ required: true, message: '请输入站点编码', trigger: 'blur' } |
|||
], |
|||
stationName: [ |
|||
{ required: true, message: '请输入站点名称', trigger: 'blur' } |
|||
], |
|||
stationId: [ |
|||
{ required: true, message: '请输入站点ID', trigger: 'blur' } |
|||
], |
|||
warehouseCode: [ |
|||
{ required: true, message: '请输入仓库编码', trigger: 'blur' } |
|||
], |
|||
locationCode: [ |
|||
{ required: true, message: '请输入库位编码', trigger: 'blur' } |
|||
], |
|||
areaType: [ |
|||
{ required: true, message: '请选择区域类型', trigger: 'change' } |
|||
], |
|||
active: [ |
|||
{ required: true, message: '请选择是否启用', trigger: 'change' } |
|||
], |
|||
statusDb: [ |
|||
{ required: true, message: '请选择站点状态', trigger: 'change' } |
|||
], |
|||
autoCallBlankPallet: [ |
|||
{ required: true, message: '请选择是否自动续盘', trigger: 'change' } |
|||
] |
|||
}, |
|||
saveLoading: false, |
|||
// 下拉选项 - rqrq |
|||
areaOptions: [], |
|||
statusOptions: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
// 计算表格高度 - rqrq |
|||
this.height = window.innerHeight - 220; |
|||
}) |
|||
}, |
|||
activated() { |
|||
this.getDataList() |
|||
this.loadOptions() |
|||
}, |
|||
methods: { |
|||
// 获取数据列表 - rqrq |
|||
getDataList() { |
|||
this.dataListLoading = true |
|||
this.queryData.page = this.pageIndex |
|||
this.queryData.limit = this.pageSize |
|||
|
|||
getAgvStationList(this.queryData).then(({data}) => { |
|||
this.dataListLoading = false |
|||
if (data && data.code === 0) { |
|||
this.dataList = data.page.list || [] |
|||
this.totalPage = data.page.totalCount || 0 |
|||
} else { |
|||
this.dataList = [] |
|||
this.totalPage = 0 |
|||
this.$message.error(data.msg || '查询失败') |
|||
} |
|||
}).catch(error => { |
|||
this.dataListLoading = false |
|||
console.error('查询AGV站点列表失败:', error) |
|||
this.$message.error('查询失败') |
|||
}) |
|||
}, |
|||
|
|||
// 加载下拉选项 - rqrq |
|||
loadOptions() { |
|||
// 获取区域类型选项 - rqrq |
|||
getAreaOptions().then(({data}) => { |
|||
if (data && data.code === 0) { |
|||
this.areaOptions = data.rows || [] |
|||
} |
|||
}).catch(error => { |
|||
console.error('获取区域类型选项失败:', error) |
|||
}) |
|||
|
|||
// 获取状态选项 - rqrq |
|||
getStatusOptions().then(({data}) => { |
|||
if (data && data.code === 0) { |
|||
this.statusOptions = data.rows || [] |
|||
} |
|||
}).catch(error => { |
|||
console.error('获取状态选项失败:', error) |
|||
}) |
|||
}, |
|||
|
|||
// 重置查询条件 - rqrq |
|||
resetQuery() { |
|||
this.queryData = { |
|||
searchStationCode: '', |
|||
searchStationName: '', |
|||
searchStationId: '', |
|||
stationType: '正式站点', |
|||
active: 'Y', |
|||
page: 1, |
|||
limit: 20 |
|||
} |
|||
this.pageIndex = 1 |
|||
this.getDataList() |
|||
}, |
|||
|
|||
// 每页数量变化 - rqrq |
|||
sizeChangeHandle(val) { |
|||
this.pageSize = val |
|||
this.pageIndex = 1 |
|||
this.getDataList() |
|||
}, |
|||
|
|||
// 当前页变化 - rqrq |
|||
currentChangeHandle(val) { |
|||
this.pageIndex = val |
|||
this.getDataList() |
|||
}, |
|||
|
|||
// 新增站点 - rqrq |
|||
addStation() { |
|||
this.dialogTitle = '新增AGV站点' |
|||
this.dialogType = 'add' |
|||
this.formData = { |
|||
stationCode: '', |
|||
stationName: '', |
|||
stationId: '', |
|||
warehouseCode: '', |
|||
locationCode: '', |
|||
areaType: '', |
|||
locationX: '', |
|||
locationY: '', |
|||
locationZ: '', |
|||
active: 'Y', |
|||
statusDb: 0, |
|||
autoCallBlankPallet: 'N', |
|||
remark: '', |
|||
stationType: '正式站点' |
|||
} |
|||
this.dialogVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.stationForm.clearValidate() |
|||
}) |
|||
}, |
|||
|
|||
// 修改站点 - rqrq |
|||
editStation(row) { |
|||
this.dialogTitle = '修改AGV站点' |
|||
this.dialogType = 'edit' |
|||
this.formData = Object.assign({}, row) |
|||
this.dialogVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.stationForm.clearValidate() |
|||
}) |
|||
}, |
|||
|
|||
// 保存站点 - rqrq |
|||
saveStation() { |
|||
this.$refs.stationForm.validate((valid) => { |
|||
if (!valid) { |
|||
return |
|||
} |
|||
|
|||
this.saveLoading = true |
|||
|
|||
const apiMethod = this.dialogType === 'add' ? addAgvStation : updateAgvStation |
|||
|
|||
apiMethod(this.formData).then(({data}) => { |
|||
if (data && data.code === 0) { |
|||
this.$message.success(this.dialogType === 'add' ? '新增成功' : '修改成功') |
|||
this.dialogVisible = false |
|||
this.getDataList() |
|||
} else { |
|||
this.$alert(data.msg || '操作失败', '错误') |
|||
} |
|||
}).catch(error => { |
|||
console.error('保存AGV站点失败:', error) |
|||
this.$message.error('保存失败') |
|||
}).finally(() => { |
|||
this.saveLoading = false |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 表格样式优化 - rqrq */ |
|||
.mod-config { |
|||
padding: 10px; |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue