luyifan/wms-web-mule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 格式修改

Browse Source
This commit is contained in:
陆一凡 2025-03-02 00:44:45 +08:00
parent 8bdb6fc270
commit c92fab3cbd
13 changed files with 1996 additions and 1537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
1.html Normal file
View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>秋日出行推荐 | 小众宝藏旅行地</title>
<style>
body {
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 28px;
color: #ff6b6b;
text-align: center;
margin-bottom: 20px;
}
h2 {
font-size: 24px;
color: #333;
margin-top: 30px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 15px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f1f1f1;
margin-bottom: 10px;
padding: 15px;
border-radius: 5px;
font-size: 16px;
line-height: 1.6;
}
.highlight {
color: #ff6b6b;
font-weight: bold;
}
.footer {
text-align: center;
margin-top: 30px;
font-size: 14px;
color: #999;
}
</style>
</head>
<body>
<div class="container">
<h1>🌟 秋日出行推荐！5个小众宝藏旅行地 🌟</h1>
<p>🍂 秋天是旅行的最佳季节，天气凉爽，景色宜人。如果你厌倦了人挤人的热门景点，不妨看看这些小众宝藏旅行地，避开人潮，享受属于你的秋日时光！</p>
<h2>1️⃣ 云南·元阳梯田</h2>
<p><span class="highlight">推荐理由：</span>秋天的元阳梯田金黄一片，宛如大地的调色盘，清晨的云雾更是如梦如幻。</p>
<p><span class="highlight">玩法：</span>徒步梯田、拍摄日出、体验哈尼族文化。</p>
<p><span class="highlight">最佳时间：</span>10月-11月</p>
<h2>2️⃣ 四川·稻城亚丁</h2>
<p><span class="highlight">推荐理由：</span>秋天的稻城亚丁被誉为“最后的香格里拉”，雪山、草甸、湖泊交相辉映。</p>
<p><span class="highlight">玩法：</span>徒步牛奶海、五色海，感受高原秋色。</p>
<p><span class="highlight">最佳时间：</span>9月-10月</p>
<h2>3️⃣ 广西·龙脊梯田</h2>
<p><span class="highlight">推荐理由：</span>秋天的龙脊梯田金黄一片，层层叠叠，宛如大地的波浪。</p>
<p><span class="highlight">玩法：</span>徒步梯田、体验瑶族风情、品尝当地美食。</p>
<p><span class="highlight">最佳时间：</span>9月-10月</p>
<h2>4️⃣ 甘肃·张掖丹霞</h2>
<p><span class="highlight">推荐理由：</span>秋天的张掖丹霞色彩更加浓郁，宛如上帝打翻的调色盘。</p>
<p><span class="highlight">玩法：</span>拍摄丹霞地貌、体验沙漠越野、参观马蹄寺。</p>
<p><span class="highlight">最佳时间：</span>9月-10月</p>
<h2>5️⃣ 浙江·楠溪江</h2>
<p><span class="highlight">推荐理由：</span>秋天的楠溪江山水如画，古村落与秋色相映成趣，适合慢旅行。</p>
<p><span class="highlight">玩法：</span>泛舟江上、探访古村落、品尝农家菜。</p>
<p><span class="highlight">最佳时间：</span>10月-11月</p>
<p class="highlight">💡 这些小众旅行地不仅风景绝美，还能避开人潮，享受静谧的秋日时光。如果觉得有用，记得点赞收藏，分享给更多需要的朋友哦～</p>
<div class="footer">
#秋日旅行 #小众旅行地 #宝藏景点 #旅行推荐 #秋天去哪儿
</div>
</div>
</body>
</html>

12
src/api/goods.js
View File

@ -49,12 +49,17 @@ const queryPartNo = (params) => {
const deleteCurrentPartInfo = (params) => {
return request({
url: '/goods/deletePartInfo',
url: '/goods/deleteGoodInfo',
method: 'post',
data: params
})
}
const clearGoodsInfo =()=> {
return request({
url: '/goods/clearGoodsInfo',
method: 'get',
})
}
export {
getAllGoods,
updateGoodsInfo,
@ -62,5 +67,6 @@ export {
getPartInfo,
updatePartInfo,
queryPartNo,
deleteCurrentPartInfo
deleteCurrentPartInfo,
clearGoodsInfo
}

27
src/api/location.js
View File

@ -24,8 +24,33 @@ const getAvailableLocations = (params) => {
})
}
const updateArea = (params) => {
return request({
url: '/location/updateArea',
method: 'post',
data: params
})
}
const getStockList = () => {
return request({
url: '/stock/getStockList',
method: 'get',
})
}
const getVehicleList = (params) => {
return request({
url: '/location/getVehicleList',
method: 'get',
})
}
export {
getLocations,
updateLocation,
getAvailableLocations
getAvailableLocations,
updateArea,
getStockList,
getVehicleList
}

27
src/api/stock.js
View File

@ -8,6 +8,14 @@ const getAllStocks = (params) => {
})
}
const getStockByLocation = (params) => {
return request({
url: '/stock/getStockByLocation',
method: 'post',
data: params
})
}
const getAllStocksByGoodsId = (params) => {
return request({
url: '/stock/getAllStocksByGoodsId',
@ -23,9 +31,26 @@ const updateStockInfo = (params) => {
data: params
})
}
const addStockInfo = (params) => {
return request({
url: '/stock/addNewStock',
method: 'post',
data: params
})
}
const deleteStockInfo = (params) => {
return request({
url: '/stock/deleteStockInfo',
method: 'post',
data: params
})
}
export {
getAllStocks,
updateStockInfo,
getAllStocksByGoodsId
getAllStocksByGoodsId,
addStockInfo,
getStockByLocation,
deleteStockInfo
}

2
src/api/task.js
View File

@ -193,7 +193,7 @@ const callEmptyVehicle = (params) => {
const changeTaskStatus = (params) => {
return request({
url: '/taskDeal/changeTaskStatus',
url: '/taskDeal/updateTaskStatus',
method: 'post',
data: params
})

11
src/api/vehicle.js
View File

@ -7,7 +7,13 @@ const getAllVehicles = (params) => {
data: params
})
}
const getVehiclesByLocation = (params)=> {
return request({
url: '/location/getVehiclesByLocation',
method: 'post',
data: params
})
}
const updateVehicleInfo = (params) => {
return request({
url: '/location/updateVehicleInfo',
@ -27,5 +33,6 @@ const deleteCurrentVehicle = (params) => {
export {
getAllVehicles,
updateVehicleInfo,
deleteCurrentVehicle
deleteCurrentVehicle,
getVehiclesByLocation
}

16
src/components/BindingGoods.vue
View File

@ -13,7 +13,6 @@
<el-form-item label="载具号：" required>
<el-input class="form-input" v-model="bindingData.vehicleNo" clearable/>
</el-form-item>
<el-form-item label="零件号：">
<el-input class="form-input" v-model="bindingData.goodsId" clearable/>
</el-form-item>
@ -22,16 +21,10 @@
</el-form-item>
<el-form-item label="库区选择：" prop="abcSelect" required>
<el-select v-model="bindingData.abcSelect" placeholder="请选择" style="width: 100%;">
<el-option label="A" value="A"></el-option>
<el-option label="B" value="B"></el-option>
<el-option label="C" value="C"></el-option>
</el-select>
</el-form-item>
<el-form-item label="物料种类：" prop="efSelect" required>
<el-select v-model="bindingData.efSelect" placeholder="请选择" style="width: 120%;">
<el-option label="单种" value="E"></el-option>
<el-option label="多种" value="F"></el-option>
<el-option label="空托" value="G"></el-option>
<el-option label="毛坯区域" value="A"></el-option>
<el-option label="待置区域" value="B"></el-option>
<el-option label="半成品区域" value="C"></el-option>
<el-option label="空托盘区域" value="D"></el-option>
</el-select>
</el-form-item>
<div style="margin-top: 50px">
@ -76,7 +69,6 @@ export default {
goodsId: '',
goodsNum: '',
abcSelect: '',
efSelect: ''
},
bindOrderInList: []
}

558
src/layout/goods.vue
View File

@ -1,363 +1,283 @@
<template>
<div style="margin-bottom: 10px">
<el-config-provider :locale="zhCn">
<el-row>
<UploadExcelPart></UploadExcelPart>
</el-row>
<el-row style="margin-top: 10px;">
<el-input v-model="queryKey" style="width: 256px; margin-right: 10px;" placeholder="零件号" />
<el-button type="primary" @click="search()">搜索</el-button>
<el-button type="warning" @click="reset()">重置</el-button>
<el-button type="success" @click="search()">刷新</el-button>
<el-button type="success" @click="exportExcel()">导出信息</el-button>
</el-row>
<br />
<el-table :data="partInfos" stripe border v-loading="loading" class="table-class" max-height="650px"
<div style="margin-bottom: 10px">
<el-config-provider :locale="zhCn">
<el-row>
<UploadExcelPart></UploadExcelPart>
</el-row>
<el-row style="margin-top: 10px;">
<el-input v-model="queryKey" style="width: 256px; margin-right: 10px;" placeholder="零件号"/>
<el-button type="primary" @click="search()">搜索</el-button>
<el-button type="warning" @click="reset()">重置</el-button>
<el-button type="success" @click="search()">刷新</el-button>
<el-button type="success" @click="exportExcel()">导出信息</el-button>
<el-popconfirm title="确认清空信息吗" @confirm="confirmEvent">
<template #reference>
<el-button type="danger">清空信息</el-button>
</template>
</el-popconfirm>
</el-row>
<br/>
<el-table :data="partInfos" stripe border v-loading="loading" class="table-class" max-height="650px"
highlight-current-row @row-click="getCurrentRow" :header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }">
<el-table-column width="65px" fixed="left">
<template v-slot="scope">
<el-radio :label="scope.row.material" v-model="material">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="material" label="零件号" fixed="left" sortable min-width="120px" />
<el-table-column prop="itemDesc" label="描述" fixed="left" min-width="120px" />
<el-table-column prop="category" label="零件类型" fixed="left" sortable min-width="120px" />
<el-table-column prop="categoryRemark" label="策略" min-width="120px" />
<el-table-column prop="unloadPlace" label="卸货点" min-width="120px" />
<el-table-column prop="kittingPoint" label="配料点" min-width="120px" />
<el-table-column prop="property" label="可用性" min-width="120px" />
<el-table-column prop="vendorId" label="供应商代码" min-width="120px" />
<el-table-column prop="dataOwner" label="数据负责人" min-width="120px" />
<el-table-column prop="partWeight" label="重量" min-width="120px" />
<el-table-column prop="storageLocation" label="库位" min-width="120px" />
<el-table-column prop="storageType" label="存储类型" min-width="120px" />
<el-table-column prop="storageBin" label="BIN位" min-width="120px" />
<el-table-column prop="vendorNameEN" label="供应商名称（英文）" min-width="120px" />
<el-table-column prop="vendorNameCN" label="供应商名称（中文）" min-width="120px" />
<el-table-column prop="vendorCountry" label="供应商国家/地区" min-width="120px" />
<el-table-column prop="SLED" label="SLED" min-width="120px" />
<el-table-column prop="updateDate" label="更新日期" min-width="120px" />
<el-table-column fixed="right" label="操作" width="240px">
<template v-slot="scope">
<el-button plain type="primary" @click="editCurrentRowGoods(scope.row)">编辑</el-button>
<el-button plain type="danger" @click="deleteCurrentRowGoods(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<br />
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
:small="false" :disabled="false" :background="false" :default-page-size="10"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
@current-change="search" />
<el-dialog v-model="dialogVisible" title="物料信息" width="40%" draggable :show-close="false">
<el-form ref="goodsFormRef" :model="goodsFormEntity" :label-position="labelPosition" label-width="100px"
style="max-width: 100%" :rules="rules" status-icon>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="零件号" prop="material">
<el-input v-model="goodsFormEntity.material" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="描述" prop="itemDesc">
<el-input v-model="goodsFormEntity.itemDesc" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="零件类型" prop="category">
<el-input v-model="goodsFormEntity.category" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="策略" prop="categoryRemark">
<el-input v-model="goodsFormEntity.categoryRemark" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="卸货点" prop="unloadPlace">
<el-input v-model="goodsFormEntity.unloadPlace" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="配料点" prop="kittingPoint">
<el-input v-model="goodsFormEntity.kittingPoint" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="可用性" prop="property">
<el-input v-model="goodsFormEntity.property" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商代码" prop="vendorId">
<el-input v-model="goodsFormEntity.vendorId" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="数据负责人" prop="dataOwner">
<el-input v-model="goodsFormEntity.dataOwner" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="重量" prop="partWeight">
<el-input v-model="goodsFormEntity.partWeight" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="库位" prop="storageLocation">
<el-input v-model="goodsFormEntity.storageLocation" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="存储类型" prop="storageType">
<el-input v-model="goodsFormEntity.storageType" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="BIN位" prop="storageBin">
<el-input v-model="goodsFormEntity.storageBin" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商名称（英文）" prop="vendorNameEN">
<el-input v-model="goodsFormEntity.vendorNameEN" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="供应商名称（中文）" prop="vendorNameCN">
<el-input v-model="goodsFormEntity.vendorNameCN" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="供应商国家/地区" prop="vendorCountry">
<el-input v-model="goodsFormEntity.vendorCountry" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="SLED" prop="SLED">
<el-input-number v-model.number="goodsFormEntity.SLED" clearable controls-position="right"
:min="0" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="更新日期" prop="updateDate">
<el-input v-model="goodsFormEntity.updateDate" clearable />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-table-column width="65px" fixed="left">
<template v-slot="scope">
<el-radio :label="scope.row.material" v-model="material">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="goodsId" label="物料号" fixed="left" sortable min-width="120px"/>
<el-table-column prop="goodsUnit" label="规格型号" fixed="left" sortable min-width="120px"/>
<el-table-column prop="singleWeight" label="单重(kg)" fixed="left" sortable min-width="120px"/>
<el-table-column prop="remark" label="描述" fixed="left" sortable min-width="120px"/>
<el-table-column fixed="right" label="操作" width="240px">
<template v-slot="scope">
<el-button plain type="primary" @click="editCurrentRowGoods(scope.row)">编辑</el-button>
<el-button plain type="danger" @click="deleteCurrentRowGoods(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<br/>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
:small="false" :disabled="false" :background="false" :default-page-size="10"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
@current-change="search"/>
<el-dialog v-model="dialogVisible" title="物料信息" width="40%" draggable :show-close="false">
<el-form ref="goodsFormRef" :model="goodsFormEntity" :label-position="labelPosition" label-width="100px"
style="max-width: 100%" :rules="rules" status-icon>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="零件号" prop="goodsId">
<el-input v-model="goodsFormEntity.goodsId" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规格" prop="goodsUnit">
<el-input v-model="goodsFormEntity.goodsUnit" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单重" prop="singleWeight">
<el-input v-model="goodsFormEntity.singleWeight" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="描述" prop="remark">
<el-input v-model="goodsFormEntity.remark" clearable/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitGoodsInfo(goodsFormEntity)">
确定
</el-button>
</span>
</template>
</el-dialog>
</el-config-provider>
</div>
</template>
</el-dialog>
</el-config-provider>
</div>
</template>
<script setup>
import { getPartInfo, updatePartInfo, deleteCurrentPartInfo } from '@/api/goods.js'
import {getPartInfo, updatePartInfo, deleteCurrentPartInfo} from '@/api/goods.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
import { dateFormatter } from '@/utils/formatter.js'
import {ElMessage} from 'element-plus'
import {ref, reactive} from 'vue'
import {dateFormatter} from '@/utils/formatter.js'
import UploadExcelPart from '@/excel/UploadExcelPart.vue'
import { downloadMaterialExcel } from '@/api/excel.js'
import {downloadMaterialExcel} from '@/api/excel.js'
</script>
<script>
export default {
name: 'goods',
data() {
return {
partInfos: [],
pageInfo: {},
currentPage: 1,
pageSize: 10,
total: 0,
queryKey: '',
loading: true,
dialogVisible: false,
material: '',
goodsFormEntity: reactive({}),
labelPosition: 'top',
goodsFormRef: ref(),
rules: reactive({})
}
},
mounted() {
this.search()
},
methods: {
search() {
this.loading = true
this.pageInfo.pageNum = this.currentPage
this.pageInfo.pageSize = this.pageSize
const tableRequest = {
page: this.pageInfo,
param: {
material: this.queryKey.trim()
},
}
getPartInfo(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
console.log(tableResponse.code + ':' + tableResponse.message)
ElMessage.error(tableResponse.message)
}
this.partInfos = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
ElMessage.error('查询物料错误' + err.message)
})
this.loading = false
},
dateFormat: (row, column, cellValue, index) => {
return dateFormatter(cellValue)
},
reset() {
this.queryKey = ''
this.search
},
// getCurrentPageGoods() {
// this.currentGoods = this.displayGoods.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
// },
editCurrentRowGoods(row) {
this.goodsFormEntity = row
this.dialogVisible = true
},
deleteCurrentRowGoods(row) {
this.material = row.material
const goods = {
material: row.material
}
deleteCurrentPartInfo(goods).then(res => {
if (res.data.code == 0) {
ElMessage({
message: '删除零件信息成功',
type: 'success',
})
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('删除零件信息失败:' + err)
})
},
submitGoodsInfo(formData) {
updatePartInfo(formData).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '更新零件信息成功',
type: 'success',
})
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('更新零件信息失败')
})
},
getCurrentRow(row) {
this.goodsId = row.goodsId
},
exportExcel() {
downloadMaterialExcel().then(res => {
const link = document.createElement('a');//创建a标签
try {
// let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}); //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
let blob = res.data //如果后台返回的直接是blob对象类型，直接获取数据
// let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，如果后端有给返回文件名的话
let _fileName = "导出物料信息" + dateFormatter(new Date) + ".xlsx"
link.style.display = 'none'//隐藏
import {clearGoodsInfo, updateGoodsInfo} from "@/api/goods";
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL
link.href = url.createObjectURL(blob)
link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
url.revokeObjectURL(link.href)//移除url对象
} catch (e) {
ElMessage({
message: '下载文件失败：: ' + e,
type: 'error',
showClose: true
})
}
}).catch(err => {
ElMessage({
message: '导出失败：: ' + err,
type: 'error',
showClose: true
})
export default {
name: 'goods',
data() {
return {
partInfos: [],
pageInfo: {},
currentPage: 1,
pageSize: 10,
total: 0,
queryKey: '',
loading: true,
dialogVisible: false,
material: '',
goodsFormEntity: reactive({}),
labelPosition: 'top',
goodsFormRef: ref(),
rules: reactive({})
}
},
mounted() {
this.search()
},
methods: {
confirmEvent() {
clearGoodsInfo().then(res => {
if (res.data.code == 0) {
ElMessage({
message: '清空所有零件信息成功',
type: 'success',
})
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('清空所有零件信息信息失败:' + err)
})
},
search() {
this.loading = true
this.pageInfo.pageNum = this.currentPage
this.pageInfo.pageSize = this.pageSize
const tableRequest = {
page: this.pageInfo,
param: {
goodsName: this.queryKey.trim()
},
}
getPartInfo(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
ElMessage.error(tableResponse.message)
}
this.partInfos = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
ElMessage.error('查询物料错误' + err.message)
})
this.loading = false
},
dateFormat: (row, column, cellValue, index) => {
return dateFormatter(cellValue)
},
reset() {
this.queryKey = ''
this.search
},
// getCurrentPageGoods() {
// this.currentGoods = this.displayGoods.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
// },
editCurrentRowGoods(row) {
this.goodsFormEntity = row
this.dialogVisible = true
},
deleteCurrentRowGoods(row) {
const goods = {
goodsId: row.goodsId
}
deleteCurrentPartInfo(goods).then(res => {
if (res.data.code == 0) {
ElMessage({
message: '删除零件信息成功',
type: 'success',
})
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('删除零件信息失败:' + err)
})
},
submitGoodsInfo(formData) {
updateGoodsInfo(formData).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '更新零件信息成功',
type: 'success',
})
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('更新零件信息失败')
})
},
getCurrentRow(row) {
this.goodsId = row.goodsId
},
exportExcel() {
downloadMaterialExcel().then(res => {
const link = document.createElement('a');//创建a标签
try {
// let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}); //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
let blob = res.data //如果后台返回的直接是blob对象类型，直接获取数据
// let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，如果后端有给返回文件名的话
let _fileName = "导出物料信息" + dateFormatter(new Date) + ".xlsx"
link.style.display = 'none'//隐藏
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL
link.href = url.createObjectURL(blob)
link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
url.revokeObjectURL(link.href)//移除url对象
} catch (e) {
ElMessage({
message: '下载文件失败：: ' + e,
type: 'error',
showClose: true
})
}
}).catch(err => {
ElMessage({
message: '导出失败：: ' + err,
type: 'error',
showClose: true
})
})
},
},
// watch: {
// currentPage() {
// this.getCurrentPageGoods()
// },
// pageSize() {
// this.getCurrentPageGoods()
// }
// }
},
// watch: {
// currentPage() {
// this.getCurrentPageGoods()
// },
// pageSize() {
// this.getCurrentPageGoods()
// }
// }
}
</script>
<style scoped>
.el-pagination {
padding-left: 5px;
padding-left: 5px;
}
.el-row .el-button {
width: 72px;
margin-left: 0px;
margin-right: 5px;
width: 72px;
margin-left: 0px;
margin-right: 5px;
}
.table-class {
width: 100%;
width: 100%;
}
.el-row .el-form-item {
width: 10% inherit;
justify-content: center;
width: 10% inherit;
justify-content: center;
}
.el-row .el-form-item .el-select-v2 {
width: 100% !important;
width: 100% !important;
}
.el-row .el-form-item .el-input-number {
width: 100% !important;
width: 100% !important;
}
.el-row .el-form-item .el-button {
margin: auto;
margin: auto;
}
</style>

500
src/layout/goodsIn.vue
View File

@ -1,96 +1,105 @@
<template>
<el-config-provider :locale="localLanguage">
<div style="width: calc(100vw - 300px)">
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px; calc(100vw - 300px)"><!-- 搜索-->
<el-row style="width: 100%">
<el-form :model="searchParams" label-width="120" label-position="left" >
<el-form-item style="width: 600px" label="查询关键字：">
<el-input placeholder="输入 料箱号/库位/任务号 查询..." v-model="searchParams.searchStr" clearable></el-input>
</el-form-item>
<el-form-item style="width: 600px" label="任务状态：">
<el-select style="width: 600px" v-model="searchParams.orderStatus" multiple placeholder="请选择需要查询的任务状态">
<el-option v-for="item in orderInEnum" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="queryGoodsOrderIn">查询入库单</el-button>
<el-button type="success" @click="showBindingGoods = true">下发入库任务</el-button>
</el-row>
</div>
<div> <!-- 表格-->
<el-row style="width: calc(100vw - 300px)">
<h5>入库单</h5>
<el-table :data="goodsOrderInList" border stripe max-height="calc(100vh - 550px)">
<el-table-column fixed prop="rowId" label="识别号" width="130px" align="center" show-overflow-tooltip/>
<el-table-column fixed prop="guid" label="GUID" width="200px" align="center" show-overflow-tooltip/>
<el-table-column prop="inType" label="入库类型" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="batchNo" label="批次" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="vehicleNo" label="载具号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="goodsId" label="物料号" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="goodsNum" label="物料数量" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="wareHouse" label="库别" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="orderStatus" label="入库单状态" width="95px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterOrderInEnum(scope.row.orderStatus).type>
{{formatterOrderInEnum(scope.row.orderStatus).label }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="createPerson" label="创建人" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="createTime" label="创建时间" :formatter="formatCellValueTime" width="180px"
align="center" show-overflow-tooltip/>
<el-table-column prop="updateTime" label="更新时间" :formatter="formatCellValueTime" width="180px" align="center" show-overflow-tooltip/>
<el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120px"/>
<el-table-column fixed="right" label="操作" align="center" width="190">
<template #default="scope">
<el-button-group class="ml-4">
<!-- <el-tooltip content="解绑" placement="top" effect="light">
<el-button type="warning" size="small" @click="unBindingOrder(scope.row)">
<el-icon><Close /></el-icon>
</el-button>
</el-tooltip> -->
<el-tooltip content="更新数量" placement="top" effect="light">
<el-button type="success" size="small" @click="updateGoodsNum(scope.row)">
<el-icon><Edit/></el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top" effect="light">
<el-button type="danger" size="small" @click="deleteOrder(scope.row)">
<el-icon><Delete/></el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
<!-- 对话框部分 -->
<el-dialog v-model="dialogVisible" title="更新数量" width="40%" @close="resetForm">
<el-form ref="updateFormRef" :model="updateFormEntity" :rules="rules" status-icon>
<el-form-item label="识别号" prop="rowId">
<el-input v-model="updateFormEntity.rowId" readonly />
</el-form-item>
<el-form-item label="实际数量" prop="realNum">
<el-input-number v-model.number="updateFormEntity.realNum" controls-position="right" :min="0" clearable />
</el-form-item>
<!-- 其他表单项 -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-config-provider :locale="localLanguage">
<div style="width: calc(100vw - 300px)">
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px; calc(100vw - 300px)"><!-- 搜索-->
<el-row style="width: 100%">
<el-form :model="searchParams" label-width="120" label-position="left">
<el-form-item style="width: 600px" label="查询关键字：">
<el-input placeholder="输入 料箱号/库位/任务号 查询..." v-model="searchParams.searchStr"
clearable></el-input>
</el-form-item>
<el-form-item style="width: 600px" label="任务状态：">
<el-select style="width: 600px" v-model="searchParams.orderStatus" multiple
placeholder="请选择需要查询的任务状态">
<el-option v-for="item in orderInEnum" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
</el-form>
</el-row>
<el-row>
<el-button type="primary" @click="queryGoodsOrderIn">查询入库单</el-button>
<el-button type="success" @click="showBindingGoods = true">下发入库任务</el-button>
</el-row>
</div>
<div> <!-- 表格-->
<el-row style="width: calc(100vw - 300px)">
<h5>入库单</h5>
<el-table :data="goodsOrderInList" border stripe max-height="calc(100vh - 550px)">
<el-table-column fixed prop="rowId" label="识别号" width="130px" align="center" show-overflow-tooltip/>
<el-table-column fixed prop="guid" label="GUID" width="200px" align="center" show-overflow-tooltip/>
<el-table-column prop="inType" label="入库类型" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="batchNo" label="批次" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="vehicleNo" label="载具号" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="goodsId" label="物料号" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="goodsNum" label="物料数量" width="120px" align="center" show-overflow-tooltip/>
<el-table-column prop="wareHouse" label="库别" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="orderStatus" label="入库单状态" width="95px" align="center">
<template #default="scope">
<el-tag class="ml-2" :type=formatterOrderInEnum(scope.row.orderStatus).type>
{{ formatterOrderInEnum(scope.row.orderStatus).label }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createPerson" label="创建人" width="100px" align="center" show-overflow-tooltip/>
<el-table-column prop="createTime" label="创建时间" :formatter="formatCellValueTime" width="180px"
align="center" show-overflow-tooltip/>
<el-table-column prop="updateTime" label="更新时间" :formatter="formatCellValueTime" width="180px"
align="center" show-overflow-tooltip/>
<el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120px"/>
<el-table-column fixed="right" label="操作" align="center" width="190">
<template #default="scope">
<el-button-group class="ml-4">
<!-- <el-tooltip content="解绑" placement="top" effect="light">
<el-button type="warning" size="small" @click="unBindingOrder(scope.row)">
<el-icon><Close /></el-icon>
</el-button>
</el-tooltip> -->
<el-tooltip content="更新数量" placement="top" effect="light">
<el-button type="success" size="small" @click="updateGoodsNum(scope.row)">
<el-icon>
<Edit/>
</el-icon>
</el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top" effect="light">
<el-button type="danger" size="small" @click="deleteOrder(scope.row)">
<el-icon>
<Delete/>
</el-icon>
</el-button>
</el-tooltip>
</el-button-group>
</template>
</el-table-column>
</el-table>
<!-- 对话框部分 -->
<el-dialog v-model="dialogVisible" title="更新数量" width="40%" @close="resetForm">
<el-form ref="updateFormRef" :model="updateFormEntity" :rules="rules" status-icon>
<el-form-item label="识别号" prop="rowId">
<el-input v-model="updateFormEntity.rowId" readonly/>
</el-form-item>
<el-form-item label="实际数量" prop="realNum">
<el-input-number v-model.number="updateFormEntity.realNum" controls-position="right" :min="0"
clearable/>
</el-form-item>
<!-- 其他表单项 -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitUpdate">确认</el-button>
</span>
</el-dialog>
</el-row>
</div>
</div>
<!-- 绑定物料框-->
<BindingGoods v-model="showBindingGoods"></BindingGoods>
</el-config-provider>
</el-dialog>
</el-row>
</div>
</div>
<!-- 绑定物料框-->
<BindingGoods v-model="showBindingGoods"></BindingGoods>
</el-config-provider>
</template>
<script>
import { Delete, Close, Edit } from "@element-plus/icons-vue";
import {Delete, Close, Edit} from "@element-plus/icons-vue";
import apiOrderIn from '@/api/order.in';
import {ElMessage, ElMessageBox} from 'element-plus'
import stock from '@/layout/stock.vue'
@ -100,188 +109,197 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';
import {ref} from "vue";
import BindingGoods from "@/components/BindingGoods.vue";
const language = ref('zh-cn');
export default {
name: 'goodsIn',
name: 'goodsIn',
computed: {
orderInEnum() {
return orderInEnum
},
localLanguage: () => (language.value === 'zh-cn' ? zhCn : en)
},
components: {BindingGoods, Delete, Close, Edit },
data() {
return {
// 查询条件
searchParams: {
searchStr: '',
orderStatus: [0,1,2]
},
// 展示绑定物料的弹窗
showBindingGoods: false,
// 绑定物料数据
dialogVisible: false,
updateFormEntity: {
rowId: '',
realNum: 0
// 其他字段初始化
},
rules: {
// 表单验证规则
},
tableData: [], // 你需要根据实际数据填充
// 入库任务单表格
goodsOrderInList: []
}
},
mounted() {},
methods: {
formatCellValueTime,
formatterOrderInEnum,
// 查询入库单
queryGoodsOrderIn() {
this.goodsOrderInList = [];
apiOrderIn.getOrderInList(this.searchParams).then(res => {
const responseData = res.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '查询成功',
type: 'success',
});
this.goodsOrderInList = responseData['returnData'];
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.msg}`, '查询失败', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
}
}).catch(err => {
// 通讯报错
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
type: 'warning',
confirmButtonText: '确定'
})
})
components: {BindingGoods, Delete, Close, Edit},
data() {
return {
// 查询条件
searchParams: {
searchStr: '',
orderStatus: [0, 1, 2]
},
// 删除入库单
deleteOrder(row) {
ElMessageBox.confirm('确定执行删除吗?','提示')
// 展示绑定物料的弹窗
showBindingGoods: false,
// 绑定物料数据
dialogVisible: false,
updateFormEntity: {
rowId: '',
realNum: 0
// 其他字段初始化
},
rules: {
// 表单验证规则
},
tableData: [], // 你需要根据实际数据填充
// 入库任务单表格
goodsOrderInList: []
}
},
mounted() {
},
methods: {
formatCellValueTime,
formatterOrderInEnum,
// 查询入库单
queryGoodsOrderIn() {
this.goodsOrderInList = [];
apiOrderIn.getOrderInList(this.searchParams).then(res => {
const responseData = res.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '查询成功',
type: 'success',
});
this.goodsOrderInList = responseData['returnData'];
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.msg}`, '查询失败', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
}
}).catch(err => {
// 通讯报错
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
type: 'warning',
confirmButtonText: '确定'
})
})
},
// 删除入库单
deleteOrder(row) {
ElMessageBox.confirm('确定执行删除吗?', '提示')
.then(() => {
apiOrderIn.deleteOrderIn(row.rowId).then(res => {
const responseData = res.data;
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '删除成功',
type: 'success',
});
this.queryGoodsOrderIn();
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '删除失败', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
}
}).catch(err => {
// 通讯报错
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
apiOrderIn.deleteOrderIn(row.rowId).then(res => {
const responseData = res.data;
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '删除成功',
type: 'success',
});
this.queryGoodsOrderIn();
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '删除失败', {
type: 'warning',
confirmButtonText: '确定'
confirmButtonText: '确定',
showClose: false
})
}
}).catch(err => {
// 通讯报错
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
type: 'warning',
confirmButtonText: '确定'
})
})
})
.catch(() => {
})
},
// 更新入库单
updateGoodsNum(row) {
this.dialogVisible = true;
this.updateFormEntity = row;
},
test() {
console.log({rowId:this.updateFormEntity.rowId,realNum:this.updateFormEntity.realNum,orderStatus:this.updateFormEntity.orderStatus});
},
// 提交更新入库单
submitUpdate(){
if(this.updateFormEntity.realNum === 0){
// 更新入库单
updateGoodsNum(row) {
this.dialogVisible = true;
this.updateFormEntity = row;
},
test() {
console.log({
rowId: this.updateFormEntity.rowId,
realNum: this.updateFormEntity.realNum,
orderStatus: this.updateFormEntity.orderStatus
});
},
// 提交更新入库单
submitUpdate() {
if (this.updateFormEntity.realNum === 0) {
ElMessage({
message: '数量不能为0',
type: 'error',
});
return;
}
if (this.updateFormEntity.orderStatus === 1) {
ElMessage({
message: '正在入库的订单不能更新数量',
type: 'error',
});
return;
}
apiOrderIn.updateForNum({
rowId: this.updateFormEntity.rowId,
realNum: this.updateFormEntity.realNum
}).then(res => {
const responseData = res.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '数量不能为0',
type: 'error',
message: '更新成功',
type: 'success',
});
return;
}
if(this.updateFormEntity.orderStatus === 1){
ElMessage({
message: '正在入库的订单不能更新数量',
type: 'error',
});
return;
}
apiOrderIn.updateForNum({rowId:this.updateFormEntity.rowId,realNum:this.updateFormEntity.realNum}).then(res => {
const responseData = res.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '更新成功',
type: 'success',
});
this.queryGoodsOrderIn();
}else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '更新失败', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
}
}).catch(err => {
// 通讯报错
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
this.queryGoodsOrderIn();
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '更新失败', {
type: 'warning',
confirmButtonText: '确定'
confirmButtonText: '确定',
showClose: false
})
}
}).catch(err => {
// 通讯报错
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
type: 'warning',
confirmButtonText: '确定'
})
},
// 解绑入库单
unBindingOrder(row) {
ElMessageBox.confirm('你确定要解绑该吗','提示')
.then(() => {
apiOrderIn.unbindingVehicle(row.rowId).then(res => {
const responseData = res.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '解绑成功',
type: 'success',
});
this.queryGoodsOrderIn();
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '解绑失败', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
},
// 解绑入库单
unBindingOrder(row) {
ElMessageBox.confirm('你确定要解绑该吗', '提示')
.then(() => {
apiOrderIn.unbindingVehicle(row.rowId).then(res => {
const responseData = res.data
if (responseData.code === 0) {
// 正确请求
ElMessage({
message: '解绑成功',
type: 'success',
});
this.queryGoodsOrderIn();
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '解绑失败', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
}
}).catch(err => {
// 通讯报错
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
type: 'warning',
confirmButtonText: '确定'
})
})
}
}).catch(err => {
// 通讯报错
ElMessageBox.alert(`请求服务器失败：：${err}`, '任务添加失败', {
type: 'warning',
confirmButtonText: '确定'
})
})
})
.catch(() => {
})
.catch(() => {
})
}
}
}

845
src/layout/location.vue
View File

@ -1,103 +1,164 @@
<template>
<div style="margin-bottom: 10px">
<el-config-provider :locale="zhCn">
<el-row style="align-items: center;">
<!-- <span>选择库区：</span>
<el-select v-model="areaId" placeholder="请选择库区" style="width: 120px;" @change="getAllLocations">
<el-option label="3楼库区" :value='1' />
<el-option label="2楼库区" :value='2' />
</el-select> -->
<span style="margin-left: 5px;">状态说明：</span>
<el-button color="green">空闲</el-button>
<el-button color="red">占用</el-button>
<el-button color="yellow">锁定</el-button>
<span style="margin-left: 20px;">层数选择：</span>
<el-select v-model="chooseLayer" placeholder="层数选择" @change="getAllLocations">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button color="#00BFFF" style="margin: 0 0 0 auto;" @click="getAllLocations">刷新</el-button>
</el-row>
<hr style="border: 1px solid #ff0000" />
<div>
<el-scrollbar max-height="600px" :native="true" >
<div v-for="currentRowLocation in allLocations" class="scrollbar-flex-content">
<div style="margin-bottom: 10px">
<el-config-provider :locale="zhCn">
<el-row style="align-items: center;">
<!-- <span>选择库区：</span>
<el-select v-model="areaId" placeholder="请选择库区" style="width: 120px;" @change="getAllLocations">
<el-option label="3楼库区" :value='1' />
<el-option label="2楼库区" :value='2' />
</el-select> -->
<span style="margin-left: 5px;">状态说明：</span>
<el-button color="green">空闲</el-button>
<el-button color="red">占用</el-button>
<el-button color="yellow">锁定</el-button>
<el-tag style="margin-left: 15px;font-size: 20px;color: black" type="success" size="large">A: 毛坯区域 B: 待置区域
C:半成品区域 D:空托盘区域
</el-tag>
<span style="margin-left: 20px;">层数选择：</span>
<el-select v-model="chooseLayer" placeholder="层数选择" @change="getAllLocations">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" style="margin-left: 16px" @click="openDrawer = true">
区域划分
</el-button>
<el-button type="warning" style="margin-left: 16px" @click="resetArea">
重置区域
</el-button>
<el-button color="#00BFFF" style="margin: 0 0 0 auto;" @click="getAllLocations">刷新</el-button>
</el-row>
<hr style="border: 1px solid #ff0000"/>
<div>
<el-scrollbar max-height="900px" :native="true">
<div v-for="currentRowLocation in allLocations" class="scrollbar-flex-content">
<span class="row" v-for="currentLayerLocation in currentRowLocation.currentLayerLocations">
<span class="col" v-for="currentColLocation in currentLayerLocation.currentColLocations">
<el-button :color="getLocationStatus(currentColLocation)"
<el-button :class="getStyle(currentColLocation)"
:color="getLocationStatus(currentColLocation)"
@click="showDialog(currentColLocation)">
<span style="font-size: 13px;">{{ currentColLocation.queue}}排{{ currentColLocation.line}}列{{ currentColLocation.layer}}层 -{{ currentColLocation.wareArea}}</span>
<el-icon style="position: relative; left: 3px"
v-if="isException(currentColLocation)"><WarningFilled/></el-icon>
<!-- <span style="font-size: 13px;"> {{ currentColLocation.queue}}排{{ currentColLocation.line}}列{{ currentColLocation.layer}}层 - {{ currentColLocation.wareArea}} </span>-->
<span
style="font-size: 13px;"> {{ currentColLocation.wareArea }} {{ currentColLocation.locationId.slice(1, 9) }}</span>
</el-button>
<span v-if="currentColLocation.line >= 41 && currentColLocation.line < 43"
style="width: 12px;height: 50px;margin-left: 19px"></span>
<span v-if="currentColLocation.line >= 34 && currentColLocation.line < 36"
style="width: 12px;height: 50px;margin-left: 19px"></span>
<span v-if="currentColLocation.line >= 27 && currentColLocation.line < 29"
style="width: 12px;height: 50px;margin-left: 19px"></span>
<span v-if="currentColLocation.line >= 20 && currentColLocation.line < 22"
style="width: 12px;height: 50px;margin-left: 19px"></span>
<span v-if="currentColLocation.line >= 13 && currentColLocation.line < 15"
style="width: 12px;height: 50px;margin-left: 19px"></span>
</span>
</span>
</div>
</el-scrollbar>
<!-- 库位信息和物料信息弹出框 -->
<el-dialog v-model="dialogVisible" :title="currentLocationTitle" width="30%" draggable :show-close="false">
<el-tabs
v-model="activeTabName"
type="card"
class="demo-tabs"
@tab-click="handleTabClick"
>
<el-tab-pane label="库位信息" name="location">
<el-form :model="location">
<el-form-item label="库位号" :label-width="140">
<el-input v-model="this.currentSelectedLocation.locationId" style="width: 70%;" readonly />
</el-form-item>
<el-form-item label="占用/解除占用库位" :label-width="140">
<el-select v-model="location.locationStatus" placeholder="库位是否占用" style="width: 70%;">
<el-option label="空闲" :value='0' />
<el-option label="占用" :value='1' />
</el-select>
</el-form-item>
<el-form-item label="锁定/解锁库位" :label-width="140">
<el-select v-model="location.isLock" placeholder="库位是否锁定" style="width: 70%;">
<el-option label="解锁" :value='0' />
<el-option label="锁定" :value='1' />
</el-select>
</el-form-item>
<el-form-item label="载具" :label-width="140">
<el-input v-model="location.vehicleId" style="width: 70%;" />
</el-form-item>
<el-form-item label="库区选择" :label-width="140">
<el-select v-model="location.wareArea" placeholder="选择库区" style="width: 70%;">
<el-option label="A" value="A" />
<el-option label="B" value="B" />
<el-option label="C" value="C" />
</el-select>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="物料信息" name="stock">
<el-form :model="stock">
<el-form-item label="托盘号" :label-width="140">
<el-input v-model="stock.vehicleId" style="width: 70%;" />
</el-form-item>
<el-form-item label="物料号" :label-width="140">
<el-input v-model="stock.goodsId" style="width: 70%;" />
</el-form-item>
<el-form-item label="数量" :label-width="140">
<el-input v-model="stock.availableNum" style="width: 70%;" />
</el-form-item>
<el-form-item label="规格描述" :label-width="140">
<el-input v-model="stock.goodsName" style="width: 70%;" />
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="托盘信息" name="vehicle">Config</el-tab-pane>
</el-tabs>
<template #footer>
</div>
</el-scrollbar>
<!-- 库位信息和物料信息弹出框 -->
<el-dialog v-model="dialogVisible" :title="currentLocationTitle" width="30%" draggable :show-close="false">
<el-tabs
v-model="activeTabName"
type="card"
class="demo-tabs"
@tab-click="handleTabClick"
>
<el-tab-pane label="库位信息" name="location">
<el-form :model="location">
<el-form-item label="库位号" :label-width="140">
<el-input v-model="this.currentSelectedLocation.locationId" style="width: 70%;" readonly/>
</el-form-item>
<el-form-item label="占用/解除占用库位" :label-width="140">
<el-select v-model="location.locationStatus" placeholder="库位是否占用" style="width: 70%;">
<el-option label="空闲" :value='0'/>
<el-option label="占用" :value='1'/>
</el-select>
</el-form-item>
<el-form-item label="锁定/解锁库位" :label-width="140">
<el-select v-model="location.isLock" placeholder="库位是否锁定" style="width: 70%;">
<el-option label="解锁" :value='0'/>
<el-option label="锁定" :value='1'/>
</el-select>
</el-form-item>
<el-form-item label="载具" :label-width="140">
<el-input v-model="location.vehicleId" style="width: 70%;"/>
</el-form-item>
<el-form-item label="库区选择" :label-width="140">
<el-select v-model="location.wareArea" placeholder="选择库区" style="width: 70%;">
<el-option label="毛坯区域" value="A"/>
<el-option label="待置区域" value="B"/>
<el-option label="半成品区域" value="C"/>
<el-option label="空托盘区域" value="D"/>
</el-select>
</el-form-item>
<el-form-item label="移库交换区域" :label-width="140">
<el-select v-model="location.isChangeArea" style="width: 70%;">
<el-option label="否" :value="0"/>
<el-option label="是" :value="1"/>
</el-select>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="物料信息" name="stock">
<el-form :model="stock">
<el-form-item label="托盘号" :label-width="140">
<el-input v-model="stock.vehicleId" style="width: 70%;"/>
</el-form-item>
<el-form-item label="物料号" :label-width="140">
<el-input v-model="stock.goodsId" style="width: 70%;"/>
</el-form-item>
<el-form-item label="数量" :label-width="140">
<el-input v-model="stock.availableNum" style="width: 70%;"/>
</el-form-item>
<el-form-item label="规格描述" :label-width="140">
<el-input v-model="stock.goodsName" style="width: 70%;"/>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="托盘信息" name="vehicle">
<el-form :model="vehicle">
<el-form-item label="托盘号" :label-width="140">
<el-input v-model="vehicle.vehicleId" style="width: 70%;"/>
</el-form-item>
<el-form-item label="托盘当前位置" :label-width="140">
<el-input v-model="vehicle.currentLocation" style="width: 70%;"/>
</el-form-item>
<el-form-item label="托盘状态" :label-width="140">
<el-select v-model="vehicle.vehicleStatus" placeholder="区域选择" @change="getAllLocations">
<el-option
v-for="item in vehicleStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否是空托盘" :label-width="140">
<el-select v-model="vehicle.isEmpty" placeholder="区域选择" @change="getAllLocations">
<el-option
v-for="item in emptyOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button v-if="activeTabName == 'location'" type="primary" @click="submitLocationStatus()">
更新库位信息
<el-button v-if="activeTabName == 'location'" type="primary"
@click="submitLocationStatus()">
更新库位信息
</el-button>
<el-button v-if="activeTabName == 'stock'" type="primary" @click="submitLocationStatus()">
<el-button v-if="activeTabName == 'stock'" type="primary">
<span v-if="isAddStock" @click="handleAddStock">
添加物料信息
</span>
@ -105,228 +166,458 @@
更新物料信息
</span>
</el-button>
<el-button v-if="activeTabName == 'vehicle'" type="primary" @click="submitLocationStatus()">
更新托盘信息
<el-button v-if="activeTabName == 'vehicle'" type="primary"
@click="updateCurrentVehicleInfo">
更新托盘信息
</el-button>
</span>
</template>
</el-dialog>
</div>
</el-config-provider>
</div>
</template>
</el-dialog>
</div>
</el-config-provider>
<!--区域选择 -->
<el-drawer v-model="openDrawer" :direction="direction">
<template #header>
<h4>区域划分</h4>
</template>
<template #default>
<div>
<el-form ref="areaForm" :model="areaForm" label-width="100px">
<el-form-item label="区域选择">
<el-select v-model="areaForm.chooseArea" placeholder="区域选择" @change="getAllLocations">
<el-option
v-for="item in areaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="开始排">
<el-input v-model="areaForm.startQueue" placeholder="请输入排编号（如13）"></el-input>
</el-form-item>
<el-form-item label="结束排">
<el-input v-model="areaForm.endQueue" placeholder="请输入排编号（如13）"></el-input>
</el-form-item>
<el-form-item label="开始列">
<el-input v-model="areaForm.startLine" placeholder="请输入列编号（如42）"></el-input>
</el-form-item>
<el-form-item label="结束列">
<el-input v-model="areaForm.endLine" placeholder="请输入列编号（如42）"></el-input>
</el-form-item>
<el-form-item label="开始层">
<el-input v-model="areaForm.startLayer" placeholder="请输入层编号（如02）"></el-input>
</el-form-item>
<el-form-item label="结束层">
<el-input v-model="areaForm.endLayer" placeholder="请输入层编号（如02）"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<template #footer>
<div style="flex: auto">
<el-button @click="cancelClick">取消</el-button>
<el-button type="primary" @click="confirmClick">确认划分</el-button>
</div>
</template>
</el-drawer>
</div>
</template>
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { getLocations, updateLocation } from '@/api/location.js'
import { ElMessage, ElLoading } from 'element-plus'
import { reactive } from 'vue'
import {getLocations, updateLocation} from '@/api/location.js'
import {ElMessage, ElLoading} from 'element-plus'
import {reactive} from 'vue'
</script>
<script>
import {reactive} from "vue";
import {addStockInfo, getStockByLocation, updateStockInfo} from "@/api/stock";
import {addStockInfo, getAllStocks, getStockByLocation, updateStockInfo} from "@/api/stock";
import {ElLoading, ElMessage} from "element-plus";
import {getStockList, getVehicleList, updateArea} from "@/api/location";
import {getAllVehicles, getVehiclesByLocation, updateVehicleInfo} from "@/api/vehicle";
export default {
name: 'location',
data() {
return {
isAddStock:true,
stock:{},
activeTabName:'stock',
options: [{
value: 1,
label: '第一层'
}, {
value: 2,
label: '第二层'
}, {
value: 3,
label: '第三层'
}, {
value: 4,
label: '第四层'
}],
chooseLayer: 1,
dialogVisible: false,
currentSelectedLocation: {},
allLocations: [],
location: reactive({
locationId:'this.currentSelectedLocation.locationId',
locationStatus: '',
isLock: '',
vehicleId: '',
wareArea: ''
}),
currentLocationTitle: '',
areaId: 1
}
},
mounted() {
this.getAllLocations()
},
methods: {
handleAddStock() {
if (this.isAddStock) {
addStockInfo(this.stock).then(res=> {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '添加物料信息成功！',
type: 'success',
})
this.getAllLocations()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('添加物料信息失败！',err)
})
}else {
updateStockInfo(this.stock).then(res=>{
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '更新物料信息成功！',
type: 'success',
})
this.getAllLocations()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('更新物料信息失败！',err)
})
}
},
handleTabClick(tab, event){
console.log(tab,event)
},
getLocationStatus: (currentColLocation) => {
if (currentColLocation.isLock === 1) {
return 'yellow'
}
if (currentColLocation.locationStatus === 1) {
return 'red'
}
return 'green'
},
getStockLocation(locationId){
getStockByLocation({locationId: locationId}).then(res=> {
if (res.data.code == 0) {
this.isAddStock = false
this.stock = res.data.returnData
} else {
this.isAddStock = true
this.stock = {}
}
}).catch(err => {
loading.close()
ElMessage.error('查询库存信息失败！')
})
},
getAllLocations() {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
const data = { areaId: this.areaId,layer: this.chooseLayer }
getLocations(data).then(res => {
loading.close()
let sum = 0
if (res.data.code == 0) {
this.allLocations = res.data.returnData
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
loading.close()
ElMessage.error('查询库位失败！')
})
},
test() {
console.log(this.location);
},
showDialog(currentColLocation) {
this.dialogVisible = true
this.currentSelectedLocation = currentColLocation
this.getStockLocation(this.currentSelectedLocation.locationId)
this.setCurrentLocationTitle()
this.location.locationId = this.currentSelectedLocation.locationId
this.location.locationStatus = this.currentSelectedLocation.locationStatus
this.location.isLock = this.currentSelectedLocation.isLock
this.location.vehicleId = this.currentSelectedLocation.vehicleId
this.location.wareArea = this.currentSelectedLocation.wareArea
},
submitLocationStatus() {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
this.currentSelectedLocation.locationId = this.location.locationId
this.currentSelectedLocation.locationStatus = this.location.locationStatus
this.currentSelectedLocation.isLock = this.location.isLock
this.currentSelectedLocation.vehicleId = this.location.vehicleId
this.currentSelectedLocation.wareArea = this.location.wareArea
updateLocation(this.currentSelectedLocation).then(res => {
if (res.data.code == 0) {
loading.close()
this.dialogVisible = false
ElMessage({
message: '更新库位信息成功！',
type: 'success',
})
this.getAllLocations()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
loading.close()
ElMessage.error('更新库位信息失败')
})
},
setCurrentLocationTitle() {
const parts = this.currentSelectedLocation.locationId.split('-');
this.currentLocationTitle = '当前选择库位：' + parts[0] + '排' + parts[1] + '列' + parts[2] + '层';
//this.currentLocationTitle = '当前选择库位：' + this.currentSelectedLocation.queue + '排' + this.currentSelectedLocation.line + '列' + this.currentSelectedLocation.layer + '层' + '(' + this.currentSelectedLocation.warearea + ')'
}
name: 'location',
data() {
return {
vehicle: {},
stockList: [],
vehicleList: [],
vehicleStatusOptions: [{
value: 1,
label: '入库中'
}, {
value: 2,
label: '在库中',
}, {
value: 3,
label: '出库中',
}],
emptyOptions: [{
value: 1,
label: '空托盘'
}, {
value: 0,
label: '非空托盘'
}],
areaOptions: [{
value: 'A',
label: '毛坯区域'
}, {
value: 'B',
label: '待置区域'
}, {
value: 'C',
label: '半成品区域'
},
{
value: 'D',
label: '空托盘区域'
}],
areaForm: {},
direction: 'rtl',
openDrawer: false,
isAddStock: true,
stock: {},
activeTabName: 'location',
options: [{
value: 1,
label: '第一层'
}, {
value: 2,
label: '第二层'
}, {
value: 3,
label: '第三层'
}, {
value: 4,
label: '第四层'
}],
chooseLayer: 1,
dialogVisible: false,
currentSelectedLocation: {},
allLocations: [],
location: reactive({
locationId: 'this.currentSelectedLocation.locationId',
locationStatus: '',
isLock: '',
vehicleId: '',
wareArea: '',
isChangeArea: 0
}),
currentLocationTitle: '',
areaId: 1
}
},
mounted() {
this.getAllLocations()
this.getAllStock()
this.getAllVechicle()
},
methods: {
getAllStock() {
getStockList().then(res => {
if (res.data.code == 0) {
ElMessage.success(res.data.message)
this.stockList = res.data.returnData
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('查询所有托盘信息失败！', err)
})
},
getAllVechicle() {
getVehicleList().then(res => {
if (res.data.code == 0) {
ElMessage.success(res.data.message)
this.vehicleList = res.data.returnData;
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('查询所有托盘信息失败！', err)
})
},
isException(locationInfo) {
if (locationInfo.locationStatus == 1) {
const vehicleList = this.vehicleList.filter(item => item.currentLocation == locationInfo.locationId)
const stockList = this.stockList.filter(item => item.locationId == locationInfo.locationId)
console.log(locationInfo.locationId)
console.log(this.vehicleList)
console.log(stockList)
console.log(vehicleList)
if (vehicleList.length == 0 || stockList.length == 0) {
return true
}
} else {
return false
}
},
updateCurrentVehicleInfo() {
updateVehicleInfo(this.vehicle).then(res => {
console.log(res.data.code)
if (res.data.code == 0) {
ElMessage.success(res.data.message)
this.getCurrentVehicleInfo(this.currentSelectedLocation.locationId)
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('更新托盘信息失败！', err)
})
},
getChangeAreaStyle(val) {
return 'change-area-style'
},
getCurrentVehicleInfo(locationId) {
getVehiclesByLocation({locationId: locationId}).then(res => {
if (res.data.code === 0) {
this.vehicle = res.data.returnData
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('查询托盘信息失败！', err)
})
},
resetArea() {
updateArea({chooseArea: 'reset'}).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '重置成功！',
type: 'success',
})
this.getAllLocations()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('重置失败', err)
})
},
getStyle(val) {
let colorClass = [];
if (val.wareArea === 'A') {
colorClass.push('red-text');
} else if (val.wareArea === 'B') {
colorClass.push('green-text');
} else if (val.wareArea === 'C') {
colorClass.push('blue-text');
} else if (val.wareArea === 'D') {
colorClass.push('purple-text');
}
if (val.isChangeArea == 1) {
colorClass.push('change-area-style')
}
return colorClass;
},
cancelClick() {
this.openDrawer = false
},
confirmClick() {
updateArea(this.areaForm).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '划分区域成功！',
type: 'success',
})
this.getAllLocations()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('划分失败', err)
})
},
handleAddStock() {
if (this.isAddStock) {
this.stock.locationId = this.location.locationId
addStockInfo(this.stock).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '添加物料信息成功！',
type: 'success',
})
this.getAllLocations()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('添加物料信息失败！', err)
})
} else {
updateStockInfo(this.stock).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '更新物料信息成功！',
type: 'success',
})
this.getAllLocations()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('更新物料信息失败！', err)
})
}
},
handleTabClick(tab, event) {
console.log(tab, event)
},
getLocationStatus: (currentColLocation) => {
if (currentColLocation.isLock === 1) {
return 'yellow'
}
if (currentColLocation.locationStatus === 1) {
return 'red'
}
return 'green'
},
getStockLocation(locationId) {
getStockByLocation({locationId: locationId}).then(res => {
if (res.data.code == 0) {
this.isAddStock = false
this.stock = res.data.returnData
} else {
this.isAddStock = true
this.stock = {}
}
}).catch(err => {
loading.close()
ElMessage.error('查询库存信息失败！')
})
},
getAllLocations() {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
const data = {areaId: this.areaId, layer: this.chooseLayer}
getLocations(data).then(res => {
loading.close()
let sum = 0
if (res.data.code == 0) {
this.allLocations = res.data.returnData
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
loading.close()
ElMessage.error('查询库位失败！')
})
},
showDialog(currentColLocation) {
this.dialogVisible = true
this.currentSelectedLocation = currentColLocation
this.getStockLocation(this.currentSelectedLocation.locationId)
this.getCurrentVehicleInfo(this.currentSelectedLocation.locationId)
this.setCurrentLocationTitle()
this.location.locationId = this.currentSelectedLocation.locationId
this.location.locationStatus = this.currentSelectedLocation.locationStatus
this.location.isLock = this.currentSelectedLocation.isLock
this.location.vehicleId = this.currentSelectedLocation.vehicleId
this.location.wareArea = this.currentSelectedLocation.wareArea
this.location.isChangeArea = this.currentSelectedLocation.isChangeArea
},
submitLocationStatus() {
const loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
this.currentSelectedLocation.locationId = this.location.locationId
this.currentSelectedLocation.locationStatus = this.location.locationStatus
this.currentSelectedLocation.isLock = this.location.isLock
this.currentSelectedLocation.vehicleId = this.location.vehicleId
this.currentSelectedLocation.wareArea = this.location.wareArea
this.currentSelectedLocation.isChangeArea = this.location.isChangeArea
updateLocation(this.currentSelectedLocation).then(res => {
if (res.data.code == 0) {
loading.close()
this.dialogVisible = false
ElMessage({
message: '更新库位信息成功！',
type: 'success',
})
this.getAllLocations()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
loading.close()
ElMessage.error('更新库位信息失败')
})
},
setCurrentLocationTitle() {
const parts = this.currentSelectedLocation.locationId.split('-');
this.currentLocationTitle = '当前选择库位：' + parts[0] + '排' + parts[1] + '列' + parts[2] + '层';
//this.currentLocationTitle = '当前选择库位：' + this.currentSelectedLocation.queue + '排' + this.currentSelectedLocation.line + '列' + this.currentSelectedLocation.layer + '层' + '(' + this.currentSelectedLocation.warearea + ')'
}
}
}
</script>
<style scoped>
.el-pagination {
padding-left: 5px;
padding-left: 5px;
}
.row {
//display: flex;
//justify-content: space-between;
margin: 5px;
//display: flex; //justify-content: space-between; margin: 5px;
}
.col {
/* width: 100px; */
/* height: 40px; */
padding: 1px;
margin: 1px;
/* width: 100px; */
/* height: 40px; */
padding: 1px;
margin: 1px;
}
.col .el-button {
width: 100px;
height: 50px;
width: 100px;
height: 50px;
padding: 4px;
}
.scrollbar-flex-content {
display: flex;
}
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.red-text {
color: white;
}
.green-text {
color: black;
}
.blue-text {
color: blue;
}
.purple-text {
color: purple;
}
.change-area-style {
border: 4px solid black;
}
</style>

833
src/layout/stock.vue
View File

@ -1,134 +1,129 @@
<template>
<div style="margin-bottom: 10px">
<el-config-provider :locale="zhCn">
<el-row>
<el-input v-model="queryKey" v-if="dataType == 1" style="width: 256px; margin-right: 10px;"
placeholder="零件号/箱号/零件名称" :suffix-icon="Search" />
<el-input v-if="dataType == 2" v-model="goodsIdQuery" style="width: 256px; margin-right: 10px;"
placeholder="零件号" :suffix-icon="Search" />
<el-button type="primary" @click="search()">搜索</el-button>
<el-button type="warning" @click="reset()">重置</el-button>
<el-button type="success" @click="exportExcel()">导出表格</el-button>
<el-select-v2 v-if="selStock == null" v-model="dataType" style="width: 156px; margin-right: 10px;"
placeholder="请选择库存显示类型" :options="dataTypeOptions" @change="search()"></el-select-v2>
</el-row>
<br />
<el-table id="stock-table" :data="displayStocks" stripe border v-loading="loading" class="table-class"
<div style="margin-bottom: 10px">
<el-config-provider :locale="zhCn">
<el-row>
<el-input v-model="queryKey" v-if="dataType == 1" style="width: 256px; margin-right: 10px;"
placeholder="零件号/箱号/零件名称/时间" :suffix-icon="Search"/>
<el-input v-if="dataType == 2" v-model="goodsIdQuery" style="width: 256px; margin-right: 10px;"
placeholder="零件号" :suffix-icon="Search"/>
<el-button type="primary" @click="search()">搜索</el-button>
<el-button type="warning" @click="reset()">重置</el-button>
<el-button type="success" @click="exportExcel()">导出表格</el-button>
<el-select-v2 v-if="selStock == null" v-model="dataType" style="width: 156px; margin-right: 10px;"
placeholder="请选择库存显示类型" :options="dataTypeOptions" @change="search()"></el-select-v2>
</el-row>
<br/>
<el-table id="stock-table" :data="displayStocks" stripe border v-loading="loading" class="table-class"
max-height="650px" highlight-current-row @row-click="getCurrentRow" :row-style="rowStyle"
:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
<el-table-column width="65px" fixed="left">
<template v-slot="scope">
<el-radio :label="scope.row.stockId" v-model="stockId">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="stockId" label="库存ID" min-width="120px" show-overflow-tooltip/>
<el-table-column prop="goodsId" label="物料号" min-width="120px" />
<el-table-column prop="batchNo" v-if="dataType == 1" label="批次号" min-width="120px" />
<el-table-column prop="goodsName" label="零件描述" min-width="120px" />
<el-table-column prop="availableNum" v-if="dataType == 1" label="可用数量" min-width="120px" />
<el-table-column prop="remainNum" v-if="dataType == 1" label="剩余数量" min-width="120px" />
<el-table-column prop="realNum" label="实际数量" min-width="120px" />
<el-table-column prop="vehicleId" v-if="dataType == 1" label="料箱号" fixed="left" min-width="120px" />
<el-table-column prop="providerId" v-if="dataType == 1" label="供应商编号" min-width="130px" />
<el-table-column prop="providerName" v-if="dataType == 1" label="供应商名称" min-width="130px" />
<el-table-column prop="shelfLife" v-if="dataType == 1" label="保质期" min-width="120px" />
<el-table-column prop="expirationDate" v-if="dataType == 1" label="有效日期" :formatter="dateFormat" min-width="140px" />
<el-table-column prop="locationId" v-if="dataType == 1" label="库位" :formatter="locationFormat" min-width="160px" />
<el-table-column prop="currentLocation" v-if="dataType == 1" label="当前位置" min-width="120px" />
<el-table-column prop="isInventory" v-if="dataType == 1" label="是否盘点" min-width="120px" />
<el-table-column prop="createTime" v-if="dataType == 1" label="上架时间" :formatter="timeFormat" min-width="140px" />
<el-table-column prop="goodsStatus" v-if="dataType == 1" label="物料状态" :formatter="goodsStatusFormat" min-width="120px" />
<el-table-column prop="stockStatus" v-if="dataType == 1" label="库存状态" :formatter="stockStatusFormat" fixed="right"
min-width="120px" />
<el-table-column fixed="right" label="操作" width="135px" v-if="selStock == null">
<template v-slot="scope">
<el-button size="small" plain type="primary" @click="editCurrentRowStock(scope.row)">编辑</el-button>
<!--<el-button size="small" plain type="warning" @click="outRowStock(scope.row)">出库</el-button>-->
</template>
</el-table-column>
<!-- <el-table-column prop="areaCode" label="库区代码" fixed="right" sortable min-width="120px" /> -->
</el-table>
<br />
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
:small="false" :disabled="false" :background="false" :default-page-size="10" @size-change="search"
@current-change="search" layout="total, sizes, prev, pager, next, jumper" :total="total" />
<el-dialog v-model="dialogVisible" title="物料信息" width="40%" draggable :show-close="false">
<el-form ref="stockFormRef" :model="stockFormEntity" :label-position="labelPosition" label-width="100px"
style="max-width: 100%" :rules="rules" status-icon>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="零件号" prop="goodsId">
<el-input v-model="stockFormEntity.goodsId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="零件描述" prop="goodsName">
<el-input v-model="stockFormEntity.goodsName" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="可用数量" prop="availableNum">
<el-input-number v-model.number="stockFormEntity.availableNum" clearable
controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="剩余数量" prop="remainNum">
<el-input-number v-model.number="stockFormEntity.remainNum" clearable
controls-position="right" :min="0" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="实际数量（为0时删除库存）" prop="realNum">
<el-input-number v-model.number="stockFormEntity.realNum" controls-position="right"
:min="0" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="货箱号" prop="vehicleId">
<el-input v-model="stockFormEntity.vehicleId" clearable readonly />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="库存状态" prop="stockStatus">
<el-select-v2 v-model="stockFormEntity.stockStatus" placeholder="请选择库存状态"
:options="stockStatusOptions"></el-select-v2>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物料状态" prop="goodsStatus">
<el-select-v2 v-model="stockFormEntity.goodsStatus" placeholder="请选择物料状态"
:options="goodsStatusOptions"></el-select-v2>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-table-column width="65px" fixed="left">
<template v-slot="scope">
<el-radio :label="scope.row.stockId" v-model="stockId">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="stockId" label="库存ID" min-width="120px" show-overflow-tooltip/>
<el-table-column prop="goodsId" label="物料号" min-width="120px"/>
<el-table-column prop="singleWeight" label="单重" min-width="120px"/>
<el-table-column prop="availableNum" v-if="dataType == 1" label="可用数量" min-width="120px"/>
<!-- <el-table-column prop="remainNum" v-if="dataType == 1" label="剩余数量" min-width="120px" />-->
<!-- <el-table-column prop="realNum" label="实际数量" min-width="120px" />-->
<el-table-column prop="vehicleId" v-if="dataType == 1" label="料箱号" fixed="left" min-width="120px"/>
<!-- <el-table-column prop="shelfLife" v-if="dataType == 1" label="保质期" min-width="120px" />-->
<!-- <el-table-column prop="expirationDate" v-if="dataType == 1" label="有效日期" :formatter="dateFormat" min-width="140px" />-->
<el-table-column prop="locationId" v-if="dataType == 1" label="库位" :formatter="locationFormat"
min-width="160px"/>
<el-table-column prop="createTime" v-if="dataType == 1" label="上架时间" :formatter="timeFormat"
min-width="140px"/>
<el-table-column prop="stockStatus" v-if="dataType == 1" label="库存状态" :formatter="stockStatusFormat"
fixed="right"
min-width="120px"/>
<el-table-column fixed="right" label="操作" width="135px" v-if="selStock == null">
<template v-slot="scope">
<el-button size="small" plain type="primary" @click="editCurrentRowStock(scope.row)">编辑</el-button>
<el-popconfirm title="你确定删除了?" @confirm="deleteCurrentRowStock(scope.row)">
<template #reference>
<el-button size="small" plain type="warning">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
<!-- <el-table-column prop="areaCode" label="库区代码" fixed="right" sortable min-width="120px" /> -->
</el-table>
<br/>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
:small="false" :disabled="false" :background="false" :default-page-size="10" @size-change="search"
@current-change="search" layout="total, sizes, prev, pager, next, jumper" :total="total"/>
<el-dialog v-model="dialogVisible" title="物料信息" width="40%" draggable :show-close="false">
<el-form ref="stockFormRef" :model="stockFormEntity" :label-position="labelPosition" label-width="100px"
style="max-width: 100%" :rules="rules" status-icon>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="零件号" prop="goodsId">
<el-input v-model="stockFormEntity.goodsId"/>
</el-form-item>
</el-col>
<el-form-item label="可用数量" prop="availableNum">
<el-input-number v-model.number="stockFormEntity.availableNum" clearable
controls-position="right" :min="0"/>
</el-form-item>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="货箱号" prop="vehicleId">
<el-input v-model="stockFormEntity.vehicleId" clearable readonly/>
</el-form-item>
</el-col>
<el-col :span="12" :offset="0">
<el-form-item label="库存状态" prop="stockStatus">
<el-select-v2 v-model="stockFormEntity.stockStatus" placeholder="请选择库存状态"
:options="stockStatusOptions"></el-select-v2>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="物料状态" prop="goodsStatus">
<el-select-v2 v-model="stockFormEntity.goodsStatus" placeholder="请选择物料状态"
:options="goodsStatusOptions"></el-select-v2>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="单重" prop="singleWeight">
<el-input v-model="stockFormEntity.singleWeight"/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitStockInfo(stockFormEntity)">
确定
</el-button>
<div v-if="isAddStock">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitStockInfo(stockFormEntity)">
添加
</el-button>
</div>
<div v-else>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitStockInfo(stockFormEntity)">
确定
</el-button>
</div>
</span>
</template>
</el-dialog>
</el-config-provider>
</div>
</template>
</el-dialog>
</el-config-provider>
</div>
</template>
<script setup>
import { getAllStocks, updateStockInfo, getAllStocksByGoodsId } from '@/api/stock.js'
import { downloadStockExcel } from '@/api/excel.js'
import { dateFormatter, locationFormatter, timeFormatter } from '@/utils/formatter.js'
import {getAllStocks, updateStockInfo, getAllStocksByGoodsId} from '@/api/stock.js'
import {downloadStockExcel} from '@/api/excel.js'
import {dateFormatter, locationFormatter, timeFormatter} from '@/utils/formatter.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { Search } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import {Search} from '@element-plus/icons-vue'
import {ref, reactive} from 'vue'
//import { ElMessage } from 'element-plus'
import {ElMessage, ElMessageBox} from 'element-plus'
import apiOrderOut from '@/api/order.out'
@ -136,246 +131,315 @@ import apiOrderOut from '@/api/order.out'
// import * as XLSX from 'xlsx';
</script>
<script>
import {deleteStockInfo} from "@/api/stock";
import {ElMessage} from "element-plus";
export default {
name: 'stock',
props: ['selStock'],
emits: ['update:selStock'],
data() {
return {
pageInfo: {},
displayStocks: [],
currentPage: 1,
pageSize: 10,
total: 0,
queryKey: '',
loading: true,
stockId: '',
stockFormRef: ref(),
stockFormEntity: reactive({}),
rules: reactive({}),
labelPosition: 'top',
dialogVisible: false,
goodsStatusOptions: [
{
value: 0,
label: '合格'
},
{
value: 1,
label: '不合格'
},
{
value: 2,
label: '延期'
},
{
value: 3,
label: '过期'
},
{
value: 5,
label: '长时间未使用'
}
],
stockStatusOptions: [
{
value: 0,
label: '库存正常'
},
{
value: 1,
label: '准备出库'
},
{
value: 2,
label: '正在出库'
},
{
value: 3,
label: '出库完成，环线运输中'
},
{
value: 4,
label: '站台拣货中'
},
{
value: 5,
label: '站台盘点中'
},
{
value: 6,
label: '正在回库'
},
{
value: 9,
label: '库存锁定'
}
],
dataType: 1,
dataTypeOptions: [
{
value: 1,
label: '按料箱分类'
},
{
value: 2,
label: '按零件分类'
}
],
goodsIdQuery: ''
name: 'stock',
props: ['selStock'],
emits: ['update:selStock'],
data() {
return {
pageInfo: {},
displayStocks: [],
currentPage: 1,
pageSize: 10,
total: 0,
queryKey: '',
loading: true,
stockId: '',
stockFormRef: ref(),
stockFormEntity: reactive({}),
rules: reactive({}),
labelPosition: 'top',
dialogVisible: false,
isAddStock: false,
goodsStatusOptions: [
{
value: 0,
label: '合格'
},
{
value: 1,
label: '不合格'
},
{
value: 2,
label: '延期'
},
{
value: 3,
label: '过期'
},
{
value: 5,
label: '长时间未使用'
}
],
stockStatusOptions: [
{
value: 0,
label: '库存正常'
},
{
value: 1,
label: '准备出库'
},
{
value: 2,
label: '正在出库'
},
{
value: 3,
label: '出库完成，环线运输中'
},
{
value: 4,
label: '站台拣货中'
},
{
value: 5,
label: '站台盘点中'
},
{
value: 6,
label: '正在回库'
},
{
value: 9,
label: '库存锁定'
}
],
dataType: 1,
dataTypeOptions: [
{
value: 1,
label: '按料箱分类'
},
{
value: 2,
label: '按零件分类'
}
],
goodsIdQuery: ''
}
},
mounted() {
this.refresh()
},
methods: {
getFormattedDate() {
let date = new Date(),
year = date.getFullYear(),
month = (date.getMonth() + 1).toString().padStart(2, '0'),
day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
},
mounted() {
this.refresh()
selectNowdayStock() {
this.loading = true
this.pageInfo.pageNum = this.currentPage
this.pageInfo.pageSize = this.pageSize
if (this.dataType == 1) {
const tableRequest = {
page: this.pageInfo,
param: this.getFormattedDate(),
}
getAllStocks(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
ElMessage.error(tableResponse.message)
}
this.displayStocks = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
console.log(err)
ElMessage.error('查询库存错误')
})
} else if (this.dataType == 2) {
const tableRequest = {
page: this.pageInfo,
param: this.getFormattedDate(),
}
getAllStocksByGoodsId(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
ElMessage.error(tableResponse.message)
}
this.displayStocks = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
console.log(err)
ElMessage.error('查询库存错误')
})
}
this.loading = false
},
locationFormat: (row, column, cellValue, index) => {
return locationFormatter(cellValue)
},
dateFormat: (row, column, cellValue, index) => {
return dateFormatter(cellValue)
},
timeFormat: (row, column, cellValue, index) => {
return timeFormatter(cellValue)
},
goodsStatusFormat: (row, column, cellValue, index) => {
if (cellValue === 0) {
return '合格'
} else if (cellValue === 1) {
return '不合格'
} else if (cellValue === 2) {
return '延期'
} else if (cellValue === 3) {
return '过期'
} else if (cellValue === 5) {
return '长时间未使用'
}
},
methods: {
locationFormat: (row, column, cellValue, index) => {
return locationFormatter(cellValue)
},
dateFormat: (row, column, cellValue, index) => {
return dateFormatter(cellValue)
},
timeFormat: (row, column, cellValue, index) => {
return timeFormatter(cellValue)
},
goodsStatusFormat: (row, column, cellValue, index) => {
if (cellValue === 0) {
return '合格'
} else if (cellValue === 1) {
return '不合格'
} else if (cellValue === 2) {
return '延期'
} else if (cellValue === 3) {
return '过期'
} else if (cellValue === 5) {
return '长时间未使用'
}
},
stockStatusFormat: (row, column, cellValue, index) => {
switch (cellValue) {
case 0:
return '库存正常'
case 1:
return '准备出库'
case 2:
return '正在出库'
case 3:
return '出库完成，环线运输中'
case 4:
return '站台拣货中'
case 5:
return '站台盘点中'
case 6:
return '正在回库'
case 7:
return '到达拣选站台'
case 9:
return '库存锁定'
default:
return '异常'
}
},
rowStyle: ({ row, rowIndex }) => {
if (row.goodsStatus == 3) {
return { "color": "red" }
}
if (row.goodsStatus == 5) {
return { "color": "yellow" }
}
},
search() {
this.loading = true
this.pageInfo.pageNum = this.currentPage
this.pageInfo.pageSize = this.pageSize
if (this.dataType == 1) {
const tableRequest = {
page: this.pageInfo,
param: this.queryKey.trim(),
}
getAllStocks(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
ElMessage.error(tableResponse.message)
}
this.displayStocks = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
console.log(err)
ElMessage.error('查询库存错误')
})
} else if (this.dataType == 2) {
const tableRequest = {
page: this.pageInfo,
param: this.goodsIdQuery.trim(),
}
getAllStocksByGoodsId(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
ElMessage.error(tableResponse.message)
}
this.displayStocks = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
console.log(err)
ElMessage.error('查询库存错误')
})
}
this.loading = false
},
reset() {
this.queryKey = ''
this.goodsIdQuery = ''
this.search()
},
refresh() {
this.search()
},
getCurrentRow(row) {
this.stockId = row.stockId
this.$emit('update:selStock', row)
},
exportExcel() {
downloadStockExcel().then(res => {
const link = document.createElement('a');//创建a标签
try {
// let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}); //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
let blob = res.data //如果后台返回的直接是blob对象类型，直接获取数据
// let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，如果后端有给返回文件名的话
let _fileName = "库存报表" + dateFormatter(new Date) + ".xlsx"
link.style.display = 'none'//隐藏
stockStatusFormat: (row, column, cellValue, index) => {
switch (cellValue) {
case 0:
return '库存正常'
case 1:
return '准备出库'
case 2:
return '正在出库'
case 3:
return '出库完成，环线运输中'
case 4:
return '站台拣货中'
case 5:
return '站台盘点中'
case 6:
return '正在回库'
case 7:
return '到达拣选站台'
case 9:
return '库存锁定'
default:
return '异常'
}
},
rowStyle: ({row, rowIndex}) => {
if (row.goodsStatus == 3) {
return {"color": "red"}
}
if (row.goodsStatus == 5) {
return {"color": "yellow"}
}
},
search() {
this.loading = true
this.pageInfo.pageNum = this.currentPage
this.pageInfo.pageSize = this.pageSize
if (this.dataType == 1) {
const tableRequest = {
page: this.pageInfo,
param: this.queryKey.trim(),
}
getAllStocks(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
ElMessage.error(tableResponse.message)
}
this.displayStocks = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
console.log(err)
ElMessage.error('查询库存错误')
})
} else if (this.dataType == 2) {
const tableRequest = {
page: this.pageInfo,
param: this.goodsIdQuery.trim(),
}
getAllStocksByGoodsId(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
ElMessage.error(tableResponse.message)
}
this.displayStocks = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
console.log(err)
ElMessage.error('查询库存错误')
})
}
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL
link.href = url.createObjectURL(blob)
link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
url.revokeObjectURL(link.href)//移除url对象
} catch (e) {
ElMessage({
message: '下载文件失败：: ' + e,
type: 'error',
showClose: true
})
}
}).catch(err => {
ElMessage({
message: '导出失败：: ' + err,
type: 'error',
showClose: true
})
})
},
editCurrentRowStock(row) {
this.stockFormEntity = row
this.dialogVisible = true
},
this.loading = false
},
reset() {
this.queryKey = ''
this.goodsIdQuery = ''
this.search()
},
refresh() {
this.search()
},
getCurrentRow(row) {
this.stockId = row.stockId
this.$emit('update:selStock', row)
},
exportExcel() {
downloadStockExcel().then(res => {
const link = document.createElement('a');//创建a标签
try {
// let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}); //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
let blob = res.data //如果后台返回的直接是blob对象类型，直接获取数据
// let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，如果后端有给返回文件名的话
let _fileName = "库存报表" + dateFormatter(new Date) + ".xlsx"
link.style.display = 'none'//隐藏
outRowStock(row) {
const stockId = row.stockId;
ElMessageBox.confirm(`是否执行 ${stockId} 的出库?`, '提示')
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL
link.href = url.createObjectURL(blob)
link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
url.revokeObjectURL(link.href)//移除url对象
} catch (e) {
ElMessage({
message: '下载文件失败：: ' + e,
type: 'error',
showClose: true
})
}
}).catch(err => {
ElMessage({
message: '导出失败：: ' + err,
type: 'error',
showClose: true
})
})
},
editCurrentRowStock(row) {
this.stockFormEntity = row
this.dialogVisible = true
},
deleteCurrentRowStock(row) {
deleteStockInfo({stockId: row.stockId}).then(res => {
if (res.data.code === 0) {
// 正确请求
ElMessage({
message: '删除成功',
type: 'success',
});
this.refresh()
} else {
// 服务报错
ElMessageBox.alert(`服务器返回失败：${responseData.message}`, '执行失败', {
type: 'warning',
confirmButtonText: '确定',
showClose: false
})
}
})
},
outRowStock(row) {
const stockId = row.stockId;
ElMessageBox.confirm(`是否执行 ${stockId} 的出库?`, '提示')
.then(() => {
apiOrderOut.outRowStock(stockId).then(res => {
const responseData = res.data;
@ -404,54 +468,51 @@ export default {
})
.catch(() => {
})
},
submitStockInfo(stockFormEntity) {
console.log(stockFormEntity)
updateStockInfo(stockFormEntity).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '更新库存成功',
type: 'success'
})
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage({
message: '更新料箱信息失败: ' + err,
type: 'error',
showClose: true
})
})
}
},
submitStockInfo(stockFormEntity) {
updateStockInfo(stockFormEntity).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '更新库存成功',
type: 'success'
})
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage({
message: '更新料箱信息失败: ' + err,
type: 'error',
showClose: true
})
})
}
},
}
</script>
<style scoped>
.el-pagination {
padding-left: 5px;
padding-left: 5px;
}
.el-row .el-button {
width: 72px;
margin-left: 0px;
margin-right: 5px;
width: 72px;
margin-left: 0px;
margin-right: 5px;
}
.table-class {
width: 100%;
width: 100%;
}
.el-row .el-form-item .el-select-v2 {
width: 100% !important;
width: 100% !important;
}
.el-row .el-form-item .el-input-number {
width: 100% !important;
width: 100% !important;
}
</style>

579
src/layout/taskMonitor.vue
View File

@ -1,326 +1,339 @@
<template>
<div style="margin-bottom: 15px">
<el-config-provider :locale="zhCn">
<el-row>
<el-input v-model="goodsIdQuery" style="width: 256px; margin-right: 10px;" placeholder="零件号" />
<el-input v-model="vehicleNoQuery" style="width: 256px; margin-right: 10px;" placeholder="箱号" />
<el-button type="primary" @click="search()">搜索</el-button>
<el-button type="warning" @click="reset()">重置</el-button>
<el-button type="success" @click="search()">刷新</el-button>
</el-row>
<br />
<el-table :data="tasks" stripe border v-loading="loading" style="width: 100%" max-height="684px"
class="table-class" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
<div style="margin-bottom: 15px">
<el-config-provider :locale="zhCn">
<el-row>
<el-input v-model="goodsIdQuery" style="width: 256px; margin-right: 10px;" placeholder="零件号"/>
<el-input v-model="vehicleNoQuery" style="width: 256px; margin-right: 10px;" placeholder="箱号"/>
<el-button type="primary" @click="search()">搜索</el-button>
<el-button type="warning" @click="reset()">重置</el-button>
<el-button type="success" @click="search()">刷新</el-button>
</el-row>
<br/>
<el-table :data="tasks" stripe border v-loading="loading" style="width: 100%" max-height="684px"
class="table-class" :header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
@row-click="getCurrentRow">
<el-table-column width="65px" fixed="left">
<template v-slot="scope">
<el-radio :label="scope.row.taskId" v-model="taskId">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="goodsId" label="零件号" fixed="left" min-width="120px" />
<el-table-column prop="vehicleNo" label="箱号" fixed="left" min-width="120px" />
<el-table-column prop="goodsName" label="零件名称" min-width="120px" />
<el-table-column prop="taskType" label="任务类型" :formatter="taskTypeFormat" min-width="120px" />
<el-table-column prop="taskGroup" label="任务组" min-width="120px" />
<el-table-column prop="origin" label="起点" min-width="120px" />
<el-table-column prop="destination" label="终点" min-width="120px" />
<el-table-column prop="pickStand" label="拣选站台" min-width="120px" />
<el-table-column prop="weight" label="重量" min-width="120px" />
<el-table-column prop="productionDate" label="生产日期" :formatter="dateFormat" min-width="120px" />
<el-table-column prop="expirationDate" label="有效日期" :formatter="dateFormat" min-width="120px" />
<el-table-column prop="operateNum" label="操作数量" min-width="120px" />
<el-table-column prop="totalNum" label="库存数量" min-width="120px" />
<el-table-column prop="taskPriority" label="任务优先级" min-width="120px" />
<el-table-column prop="kateTaskId" label="配件任务号" min-width="140px" />
<el-table-column prop="createTime" label="创建时间" :formatter="timeFormat" min-width="120px" />
<el-table-column prop="createTime" label="运行时长" :formatter="dueFormat" min-width="120px" />
<el-table-column prop="userName" label="操作人员姓名" min-width="120px" />
<el-table-column prop="taskStatus" label="任务状态" fixed="right" :formatter="taskStatusFormat"
min-width="120px" />
<el-table-column fixed="right" label="操作" width="120px">
<template v-slot="scope">
<el-button plain type="primary" @click="editCurrentRowTask(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<br />
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
:small="false" :disabled="false" :background="false" :default-page-size="10"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
@current-change="search" />
<el-dialog v-model="dialogVisible" title="任务信息" width="40%" draggable :show-close="false">
<el-form ref="taskFormRef" :model="taskFormEntity" :label-position="labelPosition" label-width="100px"
style="max-width: 100%" :rules="rules" status-icon>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="料箱号" prop="vehicleNo">
<el-input v-model="taskFormEntity.vehicleNo" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="零件号" prop="goodsId">
<el-input v-model="taskFormEntity.goodsId" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="起点" prop="origin">
<el-input v-model="taskFormEntity.origin" disabled />
</el-form-item>
</el-col>
<el-col :span="12" v-if="taskFormEntity.taskType == 1">
<el-form-item label="终点" prop="destination">
<el-select-v2 v-model="taskFormEntity.destination"
:options="availableLocationOptions"></el-select-v2>
</el-form-item>
</el-col>
<el-col :span="12" v-if="taskFormEntity.taskType == 2">
<el-form-item label="终点" prop="destination">
<el-input v-model="taskFormEntity.destination" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="任务类型" prop="taskType">
<el-select-v2 v-model="taskFormEntity.taskType" placeholder="请选择任务类型" disabled
:options="taskTypeOptions"></el-select-v2>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="任务状态" prop="taskStatus">
<el-select-v2 v-model="taskFormEntity.taskStatus" placeholder="请选择任务状态"
:options="taskStatusOptions"></el-select-v2>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-table-column width="65px" fixed="left">
<template v-slot="scope">
<el-radio :label="scope.row.taskId" v-model="taskId">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="goodsId" label="零件号" fixed="left" min-width="120px"/>
<el-table-column prop="vehicleNo" label="箱号" fixed="left" min-width="120px"/>
<!-- <el-table-column prop="goodsName" label="零件名称" min-width="120px" />-->
<el-table-column prop="taskType" label="任务类型" :formatter="taskTypeFormat" min-width="120px"/>
<el-table-column prop="taskGroup" label="任务组" min-width="120px"/>
<el-table-column prop="origin" label="起点" min-width="120px"/>
<el-table-column prop="destination" label="终点" min-width="120px"/>
<!-- <el-table-column prop="pickStand" label="拣选站台" min-width="120px" />-->
<el-table-column prop="weight" label="重量" min-width="120px"/>
<!-- <el-table-column prop="productionDate" label="生产日期" :formatter="dateFormat" min-width="120px" />-->
<!-- <el-table-column prop="expirationDate" label="有效日期" :formatter="dateFormat" min-width="120px" />-->
<!-- <el-table-column prop="operateNum" label="操作数量" min-width="120px" />-->
<!-- <el-table-column prop="totalNum" label="库存数量" min-width="120px" />-->
<el-table-column prop="taskPriority" label="任务优先级" min-width="120px"/>
<!-- <el-table-column prop="kateTaskId" label="配件任务号" min-width="140px" />-->
<el-table-column prop="createTime" label="创建时间" :formatter="timeFormat" min-width="120px"/>
<el-table-column prop="createTime" label="运行时长" :formatter="dueFormat" min-width="120px"/>
<el-table-column prop="userName" label="操作人员姓名" min-width="120px"/>
<el-table-column prop="taskStatus" label="任务状态" fixed="right" :formatter="taskStatusFormat"
min-width="120px"/>
<el-table-column fixed="right" label="操作" width="120px">
<template v-slot="scope">
<el-button plain type="primary" @click="editCurrentRowTask(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<br/>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
:small="false" :disabled="false" :background="false" :default-page-size="10"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
@current-change="search"/>
<el-dialog v-model="dialogVisible" title="任务信息" width="40%" draggable :show-close="false">
<el-form ref="taskFormRef" :model="taskFormEntity" :label-position="labelPosition" label-width="100px"
style="max-width: 100%" :rules="rules" status-icon>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="料箱号" prop="vehicleNo">
<el-input v-model="taskFormEntity.vehicleNo" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="零件号" prop="goodsId">
<el-input v-model="taskFormEntity.goodsId" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="起点" prop="origin">
<el-input v-model="taskFormEntity.origin" disabled/>
</el-form-item>
</el-col>
<el-col :span="12" v-if="taskFormEntity.taskType == 1">
<el-form-item label="终点" prop="destination">
<el-select-v2 v-model="taskFormEntity.destination"
:options="availableLocationOptions"></el-select-v2>
</el-form-item>
</el-col>
<el-col :span="12" v-if="taskFormEntity.taskType == 2">
<el-form-item label="终点" prop="destination">
<el-input v-model="taskFormEntity.destination" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12" :offset="0">
<el-form-item label="任务类型" prop="taskType">
<el-select-v2 v-model="taskFormEntity.taskType" placeholder="请选择任务类型" disabled
:options="taskTypeOptions"></el-select-v2>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="任务状态" prop="taskStatus">
<el-select-v2 v-model="taskFormEntity.taskStatus" placeholder="请选择任务状态"
:options="taskStatusOptions"></el-select-v2>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitTaskInfo(taskFormEntity)">
确定
</el-button>
</span>
</template>
</el-dialog>
</el-config-provider>
</div>
</template>
</el-dialog>
</el-config-provider>
</div>
</template>
<script setup>
import { getTasks, changeTaskStatus } from '@/api/task.js'
import { getAvailableLocations } from '@/api/location.js'
import { dateFormatter, locationFormatter, taskStatusFormatter, timeFormatter, dueFormatter } from '@/utils/formatter.js'
import {getTasks, changeTaskStatus} from '@/api/task.js'
import {getAvailableLocations} from '@/api/location.js'
import {dateFormatter, locationFormatter, taskStatusFormatter, timeFormatter, dueFormatter} from '@/utils/formatter.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ElMessage } from 'element-plus'
import {ElMessage} from 'element-plus'
import store from '@/store'
import { ref, reactive } from 'vue'
import {ref, reactive} from 'vue'
</script>
<script>
export default {
name: 'taskMonitor',
data() {
return {
pageInfo: {},
tasks: [],
currentPage: 1,
pageSize: 10,
total: 0,
goodsIdQuery: '',
vehicleNoQuery: '',
loading: true,
dialogVisible: false,
taskFormEntity: reactive({}),
labelPosition: 'top',
taskFormRef: ref(),
rules: reactive({}),
taskId: '',
taskTypeOptions: [
{
value: 1,
label: '入库'
},
{
value: 2,
label: '出库'
},
{
value: 3,
label: '盘点'
},
],
taskStatusOptions: [
{
value: 0,
label: '任务重置'
},
{
value: 1,
label: '任务取消'
},
{
value: 2,
label: '任务完成'
}
],
availableLocationOptions: []
name: 'taskMonitor',
data() {
return {
pageInfo: {},
tasks: [],
currentPage: 1,
pageSize: 10,
total: 0,
goodsIdQuery: '',
vehicleNoQuery: '',
loading: true,
dialogVisible: false,
taskFormEntity: reactive({}),
labelPosition: 'top',
taskFormRef: ref(),
rules: reactive({}),
taskId: '',
taskTypeOptions: [
{
value: 1,
label: '入库'
},
{
value: 2,
label: '出库'
},
{
value: 3,
label: '盘点'
},
{
value: 9,
label: '移库'
},
],
taskStatusOptions: [
{
value: 0,
label: '任务新建'
},
{
value: 1,
label: '任务已下发'
},
{
value: 998,
label: '任务取消'
},
{
value: 100,
label: '任务完成'
}
],
availableLocationOptions: []
}
},
mounted() {
this.search()
},
methods: {
dateFormat: (row, column, cellValue, index) => {
return dateFormatter(cellValue)
},
mounted() {
this.search()
timeFormat: (row, column, cellValue, index) => {
return timeFormatter(cellValue)
},
methods: {
dateFormat: (row, column, cellValue, index) => {
return dateFormatter(cellValue)
},
timeFormat: (row, column, cellValue, index) => {
return timeFormatter(cellValue)
},
taskStatusFormat: (row, column, cellValue, index) => {
return taskStatusFormatter(cellValue)
},
taskTypeFormat: (row, column, cellValue, index) => {
switch (cellValue) {
case 1:
if (row.taskId.substr(0, 2) == 'HK') {
return '回库'
} else {
return '入库'
}
case 2: return '出库'
case 3: return '盘点'
default: return '未知'
}
},
dueFormat: (row, column, cellValue, index) => {
return dueFormatter(cellValue)
},
search() {
this.loading = true
this.pageInfo.pageNum = this.currentPage
this.pageInfo.pageSize = this.pageSize
const tableRequest = {
page: this.pageInfo,
param: {
goodsId: this.goodsIdQuery.trim(),
vehicleNo: this.vehicleNoQuery.trim(),
userName: store.getters.getUserName
}
}
getTasks(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
console.log(tableResponse.code + ':' + tableResponse.message)
ElMessage.error(tableResponse.message)
}
this.tasks = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
console.log(err)
ElMessage.error('查询任务错误')
})
this.loading = false
},
reset() {
this.goodsIdQuery = ''
this.vehicleNoQuery = ''
},
editCurrentRowTask(row) {
if (row.taskType == 1) {
this.availableLocationOptions = []
var currentOption = {
value: row.destination,
label: locationFormatter(row.destination)
}
this.availableLocationOptions.push(currentOption)
// 生成可用库位列表
const requestParam = {
areaId: 1
}
getAvailableLocations(requestParam).then(res => {
if (res.data.code == 0) {
for (const location of res.data.returnData) {
var newOption = {}
newOption.value = location.locationId
newOption.label = locationFormatter(location.locationId)
this.availableLocationOptions.push(newOption)
}
}
}).catch(err => {
ElMessage.error('查找可用库位失败:' + err)
})
}
this.taskFormEntity.taskId = row.taskId
this.taskFormEntity.vehicleNo = row.vehicleNo
this.taskFormEntity.goodsId = row.goodsId
this.taskFormEntity.origin = row.origin
this.taskFormEntity.destination = row.destination
this.taskFormEntity.taskType = row.taskType
this.taskFormEntity.taskStatus = null
this.dialogVisible = true
},
submitTaskInfo(formData) {
if (formData.taskStatus == null || formData.taskStatus == undefined) {
ElMessage.error('请选择任务状态')
return
}
formData.userName = store.getters.getUserName
changeTaskStatus(formData).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '更新任务状态成功',
type: 'success',
})
this.taskFormEntity.taskId = ''
this.taskFormEntity.vehicleNo = ''
this.taskFormEntity.goodsId = ''
this.taskFormEntity.origin = ''
this.taskFormEntity.destination = ''
this.taskFormEntity.taskType = null
this.taskFormEntity.taskStatus = null
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('更新任务状态失败:' + err)
})
},
getCurrentRow(row) {
this.taskId = row.taskId
taskStatusFormat: (row, column, cellValue, index) => {
return taskStatusFormatter(cellValue)
},
taskTypeFormat: (row, column, cellValue, index) => {
switch (cellValue) {
case 1:
if (row.taskId.substr(0, 2) == 'HK') {
return '回库'
} else {
return '入库'
}
case 2:
return '出库'
case 3:
return '盘点'
case 9:
return '移库'
default:
return '未知'
}
},
dueFormat: (row, column, cellValue, index) => {
return dueFormatter(cellValue)
},
search() {
this.loading = true
this.pageInfo.pageNum = this.currentPage
this.pageInfo.pageSize = this.pageSize
const tableRequest = {
page: this.pageInfo,
param: {
goodsId: this.goodsIdQuery.trim(),
vehicleNo: this.vehicleNoQuery.trim(),
userName: store.getters.getUserName
}
}
getTasks(tableRequest).then(res => {
const tableResponse = res.data
if (tableResponse.code != 0) {
console.log(tableResponse.code + ':' + tableResponse.message)
ElMessage.error(tableResponse.message)
}
this.tasks = tableResponse.rows
this.total = tableResponse.total
}).catch(err => {
console.log(err)
ElMessage.error('查询任务错误')
})
this.loading = false
},
reset() {
this.goodsIdQuery = ''
this.vehicleNoQuery = ''
},
editCurrentRowTask(row) {
if (row.taskType == 1) {
this.availableLocationOptions = []
var currentOption = {
value: row.destination,
label: locationFormatter(row.destination)
}
this.availableLocationOptions.push(currentOption)
// 生成可用库位列表
const requestParam = {
areaId: 1
}
getAvailableLocations(requestParam).then(res => {
if (res.data.code == 0) {
for (const location of res.data.returnData) {
var newOption = {}
newOption.value = location.locationId
newOption.label = locationFormatter(location.locationId)
this.availableLocationOptions.push(newOption)
}
}
}).catch(err => {
ElMessage.error('查找可用库位失败:' + err)
})
}
this.taskFormEntity.taskId = row.taskId
this.taskFormEntity.vehicleNo = row.vehicleNo
this.taskFormEntity.goodsId = row.goodsId
this.taskFormEntity.origin = row.origin
this.taskFormEntity.destination = row.destination
this.taskFormEntity.taskType = row.taskType
this.taskFormEntity.taskStatus = null
this.dialogVisible = true
},
submitTaskInfo(formData) {
if (formData.taskStatus == null || formData.taskStatus == undefined) {
ElMessage.error('请选择任务状态')
return
}
formData.userName = store.getters.getUserName
changeTaskStatus(formData).then(res => {
if (res.data.code == 0) {
this.dialogVisible = false
ElMessage({
message: '更新任务状态成功',
type: 'success',
})
this.taskFormEntity.taskId = ''
this.taskFormEntity.vehicleNo = ''
this.taskFormEntity.goodsId = ''
this.taskFormEntity.origin = ''
this.taskFormEntity.destination = ''
this.taskFormEntity.taskType = null
this.taskFormEntity.taskStatus = null
this.search()
} else {
ElMessage.error(res.data.message)
}
}).catch(err => {
ElMessage.error('更新任务状态失败:' + err)
})
},
getCurrentRow(row) {
this.taskId = row.taskId
}
},
}
</script>
<style scoped>
.el-pagination {
padding-left: 5px;
padding-left: 5px;
}
.el-row .el-button {
width: 72px;
margin-left: 0px;
margin-right: 5px;
width: 72px;
margin-left: 0px;
margin-right: 5px;
}
.table-class {
width: 100%;
width: 100%;
}
.el-row .el-form-item .el-select-v2 {
width: 100% !important;
width: 100% !important;
}
.el-row .el-form-item .el-input-number {
width: 100% !important;
width: 100% !important;
}
.el-row .el-form-item .el-button {
margin: auto;
margin: auto;
}
</style>