833 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view style="margin: 10rpx;">
<u-navbar back-text="返回" title="立体库转库" :background="background"></u-navbar>
<u-form ref="testForm">
<u-form-item class="item2">
<p>物料:</p>
<u-input @input="getSdkInfo" v-model="materialSpecName" border></u-input>
</u-form-item>
<u-form-item class="item2">
<p>SDK规格:</p>
<zxzUniDataSelect @change="getMATERIALSPECNAME" filterable v-model="sdk_id" :localdata="sdkList">
</zxzUniDataSelect>
</u-form-item>
<u-form-item class="item2">
<p>原库区:</p>
<zxzUniDataSelect @change="changeSlect" filterable v-model="AreaName" :localdata="Area">
</zxzUniDataSelect>
</u-form-item>
<br />
<u-form-item class="item2">
<p>目标库区:</p>
<zxzUniDataSelect @change="changeAimAreaSlect" filterable v-model="desAreaName" :localdata="Area">
</zxzUniDataSelect>
</u-form-item>
<br />
<u-form-item>
<p>出货口:</p>
<zxzUniDataSelect filterable v-model="outPort" :localdata="outPortList">
</zxzUniDataSelect>
</u-form-item>
<checkbox-group @change="IFHaveBh">
<label>
<checkbox value="bh" />是否已备货
</label>
</checkbox-group>
<br />
<u-card style="border: 1rpx solid #0081ff" :show-head="false" :full="true"
:body-style="{ height: '100rpx' }">
<view slot="body">
<u-row>
<u-col span="6">
<view>累计选择支数:{{ sumJs || '0' }}</view>
</u-col>
<u-col span="6">
<view>累计选择数量:{{ sumQuantity || '0' }}</view>
</u-col>
</u-row>
</view>
</u-card>
<!-- 分栏器 -->
<view class="uni-padding-wrap uni-common-mt">
<uni-segmented-control :current="current" :values="flitems" :style-type="styleType"
:active-color="activeColor" @clickItem="clickitem" />
</view>
<view>
<view v-show="current === 0">
<view class="pagination">
<u-button size="mini" @click="prevPage" :disabled="currentPage === 1">上一页</u-button>
<span v-for="page in displayedPages" :key="page">
<u-button size="mini" @click="goToPage(page)" :class="{ active: currentPage === page }">
{{ page }}
</u-button>
</span>
<u-button size="mini" @click="nextPage" :disabled="currentPage === totalPages">下一页</u-button>
</view>
<view class="search-box">
<u-input type="text" placeholder="请输入搜索料号" v-model="searchSpec" class="search-input"
clearable />
</view>
<view class="container" style="margin-bottom: 80px;">
<view id="list-item" v-for="(item, index) in paginatedlist_detail" :key="item.id"
class="selectable-view" @click="toggleSelection(item)"
:class="{ 'selected': isSelected(item), 'hidded' : isHidded(item) }">
<view>
<view>
<!-- <div>
<text class="card-description"> 序号: {{list_detail.length - index}}</text>
</div> -->
<div>
<text class="card-description"> 批次: {{ item.CHARGE }}</text>
</div>
<div>
<text class="card-description"> 料号: {{ item.MATERIALSPECNAME }} 阶段:
{{ item.PHASE }} SDK规格: {{ item.SPECNAME }}</text>
</div>
<div>
<text class="card-description"> 品名: {{ item.DESC_CN }}</text>
</div>
<div>
<text class="card-description"> 实际规格: {{ item.TRUEGG }}</text>
</div>
<div>
<text class="card-description"> 仓库: {{ item.ERPLOCATION }}</text>
</div>
<div>
<text class="card-description"> 货位: {{ item.LOCATIONNAME }}</text>
</div>
<div>
<text class="card-description"> 数量: {{ item.MATERIALQUANTITY }}
{{ item.UNIT }}</text>
</div>
<div>
<text class="card-description"> 载具: {{ item.TRAYNAME }} 库区:
{{ item.DESCRIPTION }}</text>
</div>
<div>
<text class="card-description"> 立库货架: {{ item.SHELFNAME }} </text>
</div>
<div>
<text class="card-description"> 宽幅: {{ item.WIDTH }} 直径: {{ item.DIAMETER }}
</text>
</div>
<div>
<text class="card-description"> 偏移量: {{ item.DEVIATION }} 重量: {{ item.WEIGHT }}
</text>
</div>
<div>
<text class="card-description"> 生产线: {{ item.PRODUCTLINE }} </text>
</div>
</view>
</view>
</view>
</view>
<br />
</view>
<view v-show="current === 1">
<view>
<!-- 选中的项目: {{ selectedItems.map(i => list_detail[i].CHARGE).join(', ') }} -->
<view id="list-item" v-for="(item, index) in stockChoose" :key="item.id" class="selectable-view"
@click="toggleSelection(item)" :class="{ 'selected': isSelected(index) }">
<view>
<view>
<!-- <div>
<text class="card-description"> 序号: {{list_detail.length - index}}</text>
</div> -->
<div>
<text class="card-description"> 批次: {{ item.CHARGE }}</text>
</div>
<div>
<text class="card-description"> 料号: {{ item.MATERIALSPECNAME }} 阶段:
{{ item.PHASE }} SDK规格: {{ item.SPECNAME }}</text>
</div>
<div>
<text class="card-description"> 品名: {{ item.DESC_CN }}</text>
</div>
<div>
<text class="card-description"> 实际规格: {{ item.TRUEGG }}</text>
</div>
<div>
<text class="card-description"> 仓库: {{ item.ERPLOCATION }}</text>
</div>
<div>
<text class="card-description"> 货位: {{ item.LOCATIONNAME }}</text>
</div>
<div>
<text class="card-description"> 数量: {{ item.MATERIALQUANTITY }}
{{ item.UNIT }}</text>
</div>
<div>
<text class="card-description"> 载具: {{ item.TRAYNAME }} 库区:
{{ item.DESCRIPTION }}</text>
</div>
<div>
<text class="card-description"> 立库货架: {{ item.SHELFNAME }} </text>
</div>
<div>
<text class="card-description"> 宽幅: {{ item.WIDTH }} 直径: {{ item.DIAMETER }}
</text>
</div>
<div>
<text class="card-description"> 偏移量: {{ item.DEVIATION }} 重量: {{ item.WEIGHT }}
</text>
</div>
<div>
<text class="card-description"> 生产线: {{ item.PRODUCTLINE }} </text>
</div>
</view>
</view>
</view>
</view>
</view>
</view>
<checkbox-group @change="IFUserAGV" v-if="AreaName != 'E'">
<label>
<checkbox value="cb" />是否使用AGV
</label>
</checkbox-group>
<!--
<zb-table
style="height: 350upx;"
ref="zbTable"
:show-header="true"
:columns="column"
:stripe="true"
:fit="false"
:highlight="true"
:border="true"
:data="list_detail"
:cell-style="cellStyleFn"
@toggleAllSelection="toggleAllSelection"
@toggleRowSelection="stockSelectionChange"
></zb-table> -->
<u-form-item label="起始点" v-if="AGVshow">
<zxzUniDataSelect filterable v-model="INITILATION" :localdata="items_In"></zxzUniDataSelect>
</u-form-item>
<u-form-item label="目的点" v-if="AGVshow">
<zxzUniDataSelect filterable v-model="ENDING" :localdata="items_En"></zxzUniDataSelect>
</u-form-item>
<u-form-item label="A/B轴" v-if="AGVshow">
<zxzUniDataSelect filterable v-model="AB" :localdata="ABS"></zxzUniDataSelect>
<!-- <select v-model="AB">
<option value="A">A轴</option>
<option value="B">B轴</option>
</select> -->
</u-form-item>
</u-form>
<!-- </u-popup>
</view> -->
<u-form ref="testForm" style="padding-bottom: 130rpx;" v-if="desAreaName != 'C' && desAreaName != 'B'">
<u-form-item :border-bottom="false">
<label>选择仓库:</label>&nbsp;&nbsp;&nbsp;&nbsp;
<zxzUniDataSelect filterable v-model="ERPLOCATION" :localdata="items" @change="change">
</zxzUniDataSelect>
</u-form-item>
<u-form-item :border-bottom="false">
<label>选择库位:</label>&nbsp;&nbsp;&nbsp;&nbsp;
<zxzUniDataSelect filterable v-model="LOCATIONNAME" :localdata="items_Location"></zxzUniDataSelect>
</u-form-item>
</u-form>
<br />
<view class="tabbar_bottom">
<uni-datetime-picker style="align-items: center;" type="date" :clear-icon="false" v-model="commitDate"
@maskClick="maskClick" />
<u-button class="btn-bottom" @click="FGStockIn" type="primary" :loading="loading">确定</u-button>
</view>
</view>
</template>
<script>
import zxzUniDataSelect from "@/components/zxz-uni-data-select/zxz-uni-data-select.vue"
export default {
components: {
zxzUniDataSelect
},
data() {
return {
sdkList: [],
sdkListAll: [],
sdk_id: '',
list_detail: [],
column: [],
MATERIALQUANTITY: null,
items_In: [],
items_En: [],
commitDate: '',
INITILATION: '', //起始点
ENDING: '', //目的地
AB: '', //AB轴
ABS: [{
text: "A轴",
value: "A"
},
{
text: "B轴",
value: "B"
}
],
DURABLENAMECode: '', //卷芯
AreaName: '',
Area: [],
desAreaName: '',
value: '',
show: false,
AGVshow: false,
orgObject: {
ERPFACTORY: '',
DESCRIPTION: ''
}, // 组织对象
datamodel: '',
LocationName: '', //库位信息
LOCATIONNAME: '',
ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY, //组织
ERPLOCATION: '', //库位
tabH: 800, //表格的宽度
MATERIALSPECNAME: '',
MATERIALPACKINGNAME: '', //条码
MATERIALPACKINGNAME2: '', //条码
CHARGE: '', //批次
DESC_CN: '', //品名
SPECNAME: '', //规格
RECEIVEACTNO: '', //入库单号
UNIT: '', //单位
PHASE: '', //阶段
QTY: '', //数量
background: {
backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
}, //返回按钮的样式
colors: ['#007aff', '#4cd964', '#dd524d'],
styleType: 'button',
current: 0,
BoxListInfo: [], //后端传回来的绑定表格的数据
colorIndex: 0,
activeColor: '#007aff',
loading: false,
scanData: [], //已扫描箱
barCode: "", //条码
focusBarCode: false, //焦点是否被选中
focusShipRequest: true, //默认焦点在单号
siteName: "",
userId: "",
items: [],
items_Location: [],
stockChoose: [],
materialSpecName: "",
outPort: "",
outPortList: [],
currentPage: 1, // 当前页码
perPage: 10, // 每页显示的项目数
pageRange: 1, //前后显示的页码数量
isFolded: [], // 用于存储每个项目的折叠状态,初始为 false不折叠
searchSpec: '', //搜索料号
// 分栏器
current: 0,
flitems: ['库存列表', '备货列表'],
styleType: 'text',
activeColor: '#007aff',
}
},
mounted() {
this.GetArea()
this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
let that = this
uni.getStorage({
key: "sitename",
success(res) {
that.siteName = res.data
}
})
uni.getStorage({
key: "userid",
success(res) {
that.userId = res.data
}
})
this.orgObject = JSON.parse(uni.getStorageSync('orgObject'))
this.getERPLocation();
this.GetLiberaryBaeIn()
this.GetLiberaryBaeEn()
this.getTimeData();
// let Things = 20
// for (var i = 0; i < Things; i++) {
// this.list_detail.push({aa:"1"})
// }
},
computed: {
displayedPages() {
let start = Math.max(this.currentPage - this.pageRange, 1);
let end = Math.min(this.currentPage + this.pageRange, this.totalPages);
let pages = [];
for (let i = start; i <= end; i++) {
pages.push(i);
}
// 如果第一页不在范围内,添加省略号
if (start > 1) {
pages.unshift('...');
}
// 如果最后一页不在范围内,添加省略号
if (end < this.totalPages) {
pages.push('...');
}
return pages;
},
paginatedlist_detail() {
const start = (this.currentPage - 1) * this.perPage;
const end = start + this.perPage;
return this.list_detail.slice(start, end);
},
totalPages() {
return Math.ceil(this.list_detail.length / this.perPage);
},
sumJs() {
// 计算累计选择支数
return this.stockChoose.reduce((total, item) => total + 1, 0);
},
sumQuantity() {
// 计算累计选择数量
return this.stockChoose.reduce((total, item) => total + item.MATERIALQUANTITY, 0);
},
},
methods: {
getMATERIALSPECNAME() {
if (!this.materialSpecName) {
this.$showMessage("请输入物料!")
return;
}
},
getSdkInfo() {
this.sdkList = []
this.$MyRequest('/label/getSDKSPEC', {
materialSpecName: this.materialSpecName
}).then((res) => {
// this.sdkListAll = res.resultObj;
// this.locatioNFilter('1')
this.sdkList = res.data.resultObj;
})
},
// locatioNFilter(query) {
// console.log(query)
// let arr = this.sdkListAll.filter((item) => {
// return (item.text.includes(query) || item.value.includes(query))
// })
// if (arr.length > 50) {
// this.sdkList = arr.slice(0, 50)
// } else {
// this.sdkList = arr
// }
// },
clickitem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex //获取当前选中的index
}
},
/* 分页方法 */
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
},
goToPage(page) {
if (page != "...") {
this.currentPage = page;
}
},
getTimeData() {
var year = new Date().getFullYear(); //年
if (year < 1900) year = year + 1900;
var month = new Date().getMonth() + 1; //月
if (month < 10) month = '0' + month;
var day = new Date().getDate(); //日
if (day < 10) day = '0' + day;
const calendar1 = year + '-' + month + '-' + day
this.commitDate = calendar1
},
maskClick(e) {
console.log('maskClick事件:', e);
},
outPortFn() {
this.$MyRequest('/MaturationLibrary/getPort', {
AREANAME: this.AREANAME
}).then((res) => {
let list = res.data.resultObj.map(item => {
return {
value: item.PORTNO,
text: item.PORTNAME
}
})
this.outPortList = list
})
},
changeSlect(e) {
this.list_detail = []
console.log('1', e)
this.AREANAME = e.value
if (this.AREANAME == this.desAreaName) {
this.AREANAME == ""
this.$showMessage("目标库区与发出库区不能相同")
try {
Vue.prototype.$playFail()
} catch (e) {}
return
}
this.outPortFn()
this.getDetailQuery({
AREANAME: this.AREANAME,
SHIPREQUESTNAME: this.IFBh,
MATERIALSPECNAME: this.materialSpecName,
SDK_ID: this.sdk_id
})
},
changeAimAreaSlect(e) {
console.log('1', e)
this.desAreaName = e.value
if (this.AREANAME == this.desAreaName) {
this.desAreaName = ""
this.$showMessage("目标库区与发出库区不能相同")
try {
Vue.prototype.$playFail()
} catch (e) {}
return
}
},
IFHaveBh(e) {
let value = e.detail.value[0] || ""
console.log(value)
this.IFBh = value
this.list_detail = []
this.getDetailQuery({
AREANAME: this.AREANAME,
SHIPREQUESTNAME: this.IFBh,
MATERIALSPECNAME: this.materialSpecName,
SDK_ID: this.sdk_id
})
},
getDetailQuery(data) {
this.loading = true
this.$MyRequest('/MaturationLibrary/getPreStockOutByAuto', data).then((res) => {
console.log("aaa", res.data.resultObj)
this.list_detail = res.data.resultObj
this.loading = false
})
},
toggleAllSelection(e, data) {
console.log('调用了', data)
this.stockChoose = data
},
//选择备货
stockSelectionChange(e, selection) {
console.log('调用了', selection)
this.stockChoose = selection
},
toggleSelection(item) {
const isSelected = this.isSelected(item);
if (isSelected) {
// 如果已选中,则移除该项目对象
this.stockChoose = this.stockChoose.filter(selectedItem => selectedItem !== item);
} else {
// 如果未选中,则添加该项目对象
this.stockChoose.push(item);
}
},
isSelected(item) {
// 检查项目对象是否在已选中的项目数组中
return this.stockChoose.includes(item);
},
isHidded(item) {
// 检查项目对象是否在已选中的项目数组中
return item.MATERIALSPECNAME && !item.MATERIALSPECNAME.includes(this.searchSpec);
},
change(e) {
this.ERPLOCATION = e.value;
this.LOCATIONNAME = ""
this.getLocationName();
},
GetArea() {
this.$MyRequest('/api/storage/getArea2', {}).then(res => {
if (res.data.success) {
console.log(res.data.resultObj)
this.Area = res.data.resultObj
console.log(this.Area)
} else {
this.$showMessage(res.data.message)
}
}).catch(err => {
this.$showMessage(err)
})
},
confirm(e) {
console.log(e[0].value)
this.AreaName = e[0].value
},
IFUserAGV(e) {
let value = e.detail.value[0]
console.log(value)
if (value == 'cb') {
this.AGVshow = true
} else {
this.AGVshow = false
}
},
//获取焦点的公共方法
getfocus(nextfocus) {
this.initfocus()
this[nextfocus]
this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新哪nextTick函数就是为了拿到最新的数据还不懂的可以去百度
this[nextfocus] = true
})
},
GetLiberaryBaeIn() {
//发送请求
this.$MyRequest('/api/ApiQuery', {
queryId: "GetLibraryBaseIn",
version: "00001",
params: {}
}).then(res => {
for (let i = 0; i < res.data.data.length; i++) {
var _Arr = res.data.data[i];
this.items_In.push({
text: _Arr.LABEL,
value: _Arr.VALUE
});
}
}).catch(err => {
this.$showMessage(err)
})
},
GetLiberaryBaeEn() {
//发送请求
this.$MyRequest('/api/ApiQuery', {
queryId: "GetLibraryBaseIn",
version: "00002",
params: {}
}).then(res => {
for (let i = 0; i < res.data.data.length; i++) {
var _Arr = res.data.data[i];
this.items_En.push({
text: _Arr.LABEL,
value: _Arr.VALUE
});
}
}).catch(err => {
this.$showMessage(err)
})
},
getERPLocation() {
this.items = [];
this.$MyRequest('/api/storage/getERPLocation', {
ERPFACTORYNAME: this.ERPFACTORY
}).then(res => {
if (res.data.success) {
for (let i = 0; i < res.data.resultObj.length; i++) {
var _Arr = res.data.resultObj[i];
this.items.push({
text: _Arr.DESCRIPTION,
value: _Arr.ERPLOCATIONNAME
});
}
} else {
this.$showMessage(res.data.message)
}
});
},
getLocationName() {
this.items_Location = []
let ERPFACTORY = JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY;
if (this.ERPLOCATION != '') {
this.$MyRequest('/api/storage/getLocationNameForERPLocation', {
ERPLocation: ERPFACTORY
}).then(res => {
if (res.data.success) {
for (let i = 0; i < res.data.resultObj.length; i++) {
var _Arr = res.data.resultObj[i];
this.items_Location.push({
text: _Arr.DESCRIPTION,
value: _Arr.STORAGENAME
});
}
} else {
this.$showMessage(res.data.message)
}
this.focusBarCode = true
this.focusShipRequest = false
}).catch(err => {
this.$showMessage(err)
});
} else {
this.$showMessage("请先选择仓库")
}
},
/**
* 转库保存
*/
FGStockIn() {
console.log(this.commitDate)
console.log(this.AREANAME + "****" + this.desAreaName)
if (!this.AGVshow && (this.AREANAME == this.desAreaName || this.AREANAME == "" || this.desAreaName ==
"")) {
this.$showMessage("目标库区与发出库区不能相同")
try {
Vue.prototype.$playFail()
} catch (e) {}
return
}
if (this.stockChoose.length > 0) {
this.loading = true;
let ISAGV = this.AGVshow ? "TRUE" : "FALSE"
let MATERIALPACKINGNAMELIST = this.stockChoose.map(item => {
if (this.AREANAME == this.desAreaName) {
if (item.ERPLOCATION == this.ERPLOCATION) {
if (item.LOCATIONNAME == this.LOCATIONNAME) {
this.$showMessage("不能选择同库区 同仓库 同库位 转移")
return;
}
}
}
item.AREANAME = this.AREANAME
item.FLAG = "MOVE"
item.OUTDESTINATION = this.AREANAME
item.INDESTINATION = this.desAreaName
item.ISAGV = ISAGV
item.INITILATION = this.INITILATION
item.ENDING = this.ENDING
item.AB = this.AB
item.TRANSPORTCOMMANDTYPE = "MOVE"
item.PORT = this.outPort
return item;
})
this.$MyRequest('/MaturationLibrary/AutoStockOut', {
SITENAME: "SDK",
commitDate: this.commitDate,
userId: this.userId,
AREANAME: this.AREANAME,
aimAreaName: this.desAreaName,
outProt: '',
erpLocation: this.ERPLOCATION,
erpFactory: this.ERPFACTORY,
locationName: this.LOCATIONNAME,
barCode: this.MATERIALPACKINGNAME,
durableName: '',
shipRequestName: "",
MATERIALPACKINGNAME: MATERIALPACKINGNAMELIST
}).then(res => {
if (res.data.success) {
this.loading = false;
this.resetValue();
this.$showMessage(res.data.message)
this.list_detail = [];
} else {
this.loading = false;
this.$showMessage(res.data.message)
this.list_detail = [];
}
}).catch(err => {
this.loading = false;
this.$showMessage(err)
});
} else {
this.$showMessage("请扫描!")
}
},
resetValue() {
this.MATERIALPACKINGNAME = "";
this.BoxListInfo = [];
this.RECEIVEACTNO = "";
this.MATERIALSPECNAME = "";
this.PHASE = "";
this.SPECNAME = "";
this.DESC_CN = "";
this.CHARGE = "";
}
}
}
</script>
<style>
.btn-bottom {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
}
</style>
<style lang="scss">
#list-item {
margin-top: 16px;
/* 卡片之间的间距 */
// padding: 12px;
/* 卡片内部的内边距 */
background-color: #aaaa7f;
/* 卡片背景色 */
border-radius: 8px;
/* 卡片边框圆角 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* 卡片阴影效果 */
}
.selectable-view {
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
display: flex;
align-items: center;
cursor: pointer;
}
.selected {
background-color: #007aff;
color: white;
}
.hidded {
display: none;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
}
.pagination button.active {
font-weight: bold;
color: red;
/* 或者其他突出显示的颜色 */
}
.button-group button {
display: inline-block;
/* 使按钮以内联块级元素显示 */
margin: 0 5px;
/* 为按钮添加一些左右外边距 */
/* 根据需要添加其他样式 */
}
</style>