You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

357 lines
9.1 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="page-picking-order">
<view class="header">
<view class="left">
<u-icon class="icon" name="arrow-left" @click="index" />
</view>
<view class="title">{{ $t("message.Pi_ByOrderPicking") }}</view>
<view class="right"></view>
</view>
<view class="table-wrapper">
<wyb-table
class="table"
ref="table"
width="100%"
enable-check="multiple"
show-left-and-right-border
:headers="headers"
:contents="model.proOrderResultList"
:show-vert-border="false"
></wyb-table>
</view>
<view class="bottom-bar">
<div class="extra">
<u-form ref="form" :model="form" :error-type="['toast']">
<u-row class="bottom-info">
<!-- <u-col :span="12"
>{{ $t('message.po_Total') }} {{ model.aggregateList.length }}
{{ $t('message.po_Records') }}</u-col
> -->
<!-- <u-col :span="6">
<u-form-item
prop="locationCode"
:label="this.$t('message.po_Location')"
label-width="120rpx"
>
<u-input
:placeholder="this.$t('message.po_PleaseInput')"
v-model="form.locationCode"
type="select"
@click="locationCodeSelect = true"
/>
<u-select
v-model="locationCodeSelect"
:list="model.locationList"
@confirm="(v) => (form.locationCode = v[0].value)"
></u-select>
</u-form-item>
</u-col> -->
<!-- <u-col :span="12">
<u-form-item prop="amount" :label="this.$t('message.dn_Number')">
<u-input
v-model="form.amount"
type="number"
:placeholder="this.$t('message.po_PleaseInput')"
/>
</u-form-item>
</u-col> -->
</u-row>
</u-form>
</div>
<div class="container">
<u-row>
<u-col :span="3">
<u-button
type="primary"
@click="
model.checkAllProOrderResultList(
!model.isProOrderResultCheckedAll
)
"
>
{{
model.isAggregateCheckedAll
? this.$t("message.po_noSelectAll")
: this.$t("message.po_SelectAll")
}}
</u-button>
</u-col>
<u-col :span="3">
<u-button type="primary" class="appoint" @click="appoint">{{
$t("message.Pi_distribution")
}}</u-button>
</u-col>
<u-col :span="3">
<u-button type="success" @click="onSubmit">
{{ $t("message.dn_Confirm") }}
</u-button>
</u-col>
<u-col :span="3">
<u-button type="error" @click="onUpload">
{{ $t("message.po_Submit") }}
</u-button>
</u-col>
</u-row>
</div>
</view>
</view>
</template>
<script lang="ts">
import { Component, Ref } from "vue-property-decorator";
import { BasePage } from "@/components/base/page";
import model from "./model";
import { orderHeaders } from "./config";
import { VForm, VFormRules } from "vue/types/form";
@Component
export default class RawReceiptDetail extends BasePage {
/**
* 表单引用
*/
@Ref("form") readonly $form!: VForm;
/**
* 页面Module
*/
model = model;
/**
* 表单数据
*/
form: any = {
// locationCode: null,
amount: null,
};
index() {
this.toPage(this.page.raw.handover.picking.result);
}
/**
* 表单校验
*/
rules: VFormRules<any> = {
// locationCode: [{ required: true, message: '请选择库存地点!' }],
amount: [
{ required: true, message: this.$t("message.Pi_tip1") as string },
// { type: 'integer', min: 1, transform: Number, message: this.$t('message.Pi_tip2') as string },
],
};
/**
* 库存地点选择
*/
locationCodeSelect = false;
/**
* 表头
*/
headers = orderHeaders;
// 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
onShow() {
this.model.queryLocationList();
this.model.proOrderResultList.forEach((item: any) => {
item.currentAmount = 0;
});
let ant: any = JSON.parse(sessionStorage.getItem("material") as string);
let index: any = JSON.parse(sessionStorage.getItem("index") as string);
this.model.proOrderResultList[index] = ant;
sessionStorage.removeItem("material");
sessionStorage.removeItem("index");
}
appoint() {
let selectStatus = model.proOrderResultList.map((item) => {
if (item.checked == true) {
return true;
} else {
return false;
}
});
let i: number = 0;
selectStatus.forEach((item) => {
if (item == true) {
i++;
}
});
if (i > 1) {
uni.showToast({
icon: "none",
title: "只能选择一条物料" as string,
});
} else if (i == 0) {
uni.showToast({
icon: "none",
title: "请选择一条物料" as string,
});
} else {
let mater: number = selectStatus.indexOf(true);
sessionStorage.setItem(
"mater",
JSON.stringify(model.proOrderResultList[mater]) as string
);
sessionStorage.setItem("index", JSON.stringify(mater) as string);
this.toPage(this.page.raw.handover.picking.idetailed);
}
}
/**
* 上传
*/
async onUpload() {
//判断是否有数据
if (this.model.proOrderResultUploadList.length === 0) {
uni.showToast({
icon: "none",
title: this.$t("message.Pi_tip4") as string,
});
return;
}
//获取选中的列表
let checkData: any = [];
this.model.proOrderResultUploadList.forEach((item: any) => {
if (item.checked === true) {
checkData.push(item);
}
});
//判断选中的列表是否为空
if (checkData.length == 0) {
uni.showToast({
icon: "none",
title: "请先选中要提交的数据" as string,
});
return;
}
//判断选中的数据中 是否存在没分配库位的数据
checkData.forEach((item: any) => {
if (item.wlList == null || item.wlList.length == 0) {
uni.showToast({
icon: "none",
title: "请确保所选数据都已分配库位" as string,
});
return;
}
});
await this.model.saveProOrderResultUpload(checkData);
}
/**
* 提交
*/
async onSubmit() {
if (!this.model.hasProOrderResultChecked) {
uni.showToast({
icon: "none",
title: this.$t("message.Pi_tip7") as string,
});
return;
}
this.$form.validate((valid) => {
if (!valid) return;
const list = this.model.checkedProOrderResultList;
const needLocationCode =
list.findIndex((_: any) => !_.currentWkposCode) > -1;
console.log("needLocationCode", needLocationCode);
// if (needLocationCode && !this.form.locationCode) {
// uni.showToast({ icon: 'none', title: this.$t('message.Pi_tip6') as string });
// return;
// }
const amount = Number(this.form.amount);
if (amount <= 0 || amount.toString().split(".")[1].length > 3) {
uni.showToast({
icon: "none",
title: this.$t("message.Pi_tip2") as string,
});
return;
}
for (const item of list) {
if (amount + item.totalMoAmount > item.amount) {
uni.showToast({
icon: "none",
title: this.$t("message.Pi_tip6") as string,
});
return;
}
}
// const locationCode = this.form.locationCode;
this.model.confirmCheckedProOrderResultList({ amount });
});
}
}
</script>
<style lang="scss" scoped>
.page-picking-order {
background: #f2f2f2
linear-gradient(0deg, #f2f2f2 0%, #4a78ea 51%, #1753ea 100%) no-repeat;
background-size: 100% 600rpx;
padding: 30rpx;
min-height: 100%;
padding-top: 118rpx;
padding-bottom: 222rpx;
.header {
position: fixed;
top: 36rpx;
left: 0;
right: 0;
display: flex;
height: 88rpx;
line-height: 88rpx;
color: #fff;
font-size: 34rpx;
font-weight: 500;
text-align: center;
.title {
flex: 3;
}
.left,
.right {
flex: 1;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
width: 88rpx;
height: 88rpx;
}
}
.table-wrapper {
background-color: #fff;
}
.form {
background-color: #fff;
padding: 40rpx;
border-radius: 10rpx;
}
.bottom-bar {
z-index: 21;
position: fixed;
bottom: 0;
left: 0;
right: 0;
.container {
background: #ffffff;
box-shadow: 0 1rpx 20rpx 0 rgba(128, 128, 128, 0.2);
padding: 20rpx;
}
.extra {
background-color: #fff;
margin: 5px;
border-radius: 5px;
padding: 0 10px;
}
.bottom-info {
.u-form-item {
padding: 0;
}
}
}
}
</style>