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.

336 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-raw-feeding-detail">
<view class="header" :style="{ backgroundColor: `rgba(23, 83, 234, ${scrollTop / 100})` }">
<view class="left">
<u-icon class="icon" name="arrow-left" @click="uni.navigateBack()" />
</view>
<view class="title">{{ $t('message.Feeding_ReplenishmentDetails') }}</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.blDetailList" :show-vert-border="false"></wyb-table>
</view>
<view class="bottom-bar">
<div class="extra">
<!-- <u-form ref="form1" :model="form1" :error-type="['toast']">
<u-row class="bottom-info">
<u-col :span="12">
<u-form-item
>{{ $t("message.po_Total") }} {{ model.blDetailList.length }}
{{ $t("message.po_Records") }}</u-form-item
>
</u-col>
<u-col :span="6">
<u-form-item
prop="locationCode"
label="库存地点"
label-width="120rpx"
>
<u-input
v-model="form1.locationCode"
type="select"
@click="locationCodeSelect = true"
/>
<u-select
v-model="locationCodeSelect"
:list="model.locationList"
@confirm="(v) => (form1.locationCode = v[0].value)"
></u-select>
</u-form-item>
</u-col>
<u-col :span="6">
<u-form-item
prop="amount"
:label="this.$t('message.Summary_Number')"
>
<u-input
v-model="form1.amount"
type="number"
:placeholder="this.$t('message.po_PleaseInput')"
style="margin-left: 12px"
/>
</u-form-item>
</u-col>
</u-row>
</u-form> -->
<u-form ref="form2" :model="form2" :error-type="['toast']">
<u-row class="bottom-info">
<u-col :span="6">
<u-form-item prop="operatorPass" :label="this.$t('message.Summary_Receiver')" label-width="120rpx">
<u-input v-model="operatorName" @confirm="onOperatorConfirm" :placeholder="this.$t('message.po_PleaseInput')" />
</u-form-item>
</u-col>
<u-col :span="6">
<u-form-item prop="rfPwd" :label="this.$t('message.Summary_Password')">
<u-input v-model="form2.rfPwd" type="password" :placeholder="this.$t('message.po_PleaseInput')" />
</u-form-item>
</u-col>
</u-row>
</u-form>
</div>
<div class="container">
<u-row>
<u-col :span="4">
<u-button type="primary" @click="onSubmit">
{{ $t('message.dn_Confirm') }}
</u-button>
</u-col>
<u-col :span="4">
<u-button type="success" @click="onUpload">
{{ $t('message.po_Submit') }}
</u-button>
</u-col>
<u-col :span="4">
<u-button type="error" @click="uni.navigateBack()">
{{ $t('message.po_Return') }}
</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 { VForm, VFormRules } from 'vue/types/form';
import { auth } from '@/store/modules/auth';
import model from './model';
import { headers } from './config';
@Component
export default class feedingDel extends BasePage {
/**
* 表单引用
*/
@Ref('form1') readonly $form1!: VForm;
@Ref('form2') readonly $form2!: VForm;
/**
* 页面Module
*/
model = model;
/**
* 表头
*/
headers = headers;
/**
* 表单数据
*/
form1 = {
locationCode: null,
amount: '',
};
form2 = {
operatorPass: '', // 接收人
};
/**
* 接收人名称
*/
operatorName = '';
/**
* 库存地点选择
*/
locationCodeSelect = false;
/**
* 表单验证规则
*/
rules1: VFormRules<any> = {
amount: [
{ required: true, message: this.$t('message.Feeding_Tip1') as string },
{
type: 'integer',
min: 1,
transform: Number,
message: this.$t('message.Feeding_Tip2') as string,
},
],
};
rules2: VFormRules<any> = {
rfPwd: [{ required: true, message: this.$t('message.Feeding_Tip3') as string }],
operatorPass: [{ required: true, message: this.$t('message.Feeding_Tip4') as string }],
};
onReady() {
this.$form1.setRules(this.rules1); // 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
this.$form2.setRules(this.rules2); // 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
this.model.queryLocationList();
}
// async onUnload() {
// await this.model.unlockBlDetailList();
// }
/**
* 上传
*/
async onUpload() {
if (!this.model.hasBlDetailFillAmount) {
// uni.showToast({
// icon: "none",
// title: this.$t("message.Pi_tip10") as string,
// });
this.customToast(this.$t('message.Pi_tip10') as string);
return;
}
const dataList = this.model.blDetailUploadList;
if (dataList.length === 0) {
// uni.showToast({
// icon: "none",
// title: this.$t("message.Pi_tip4") as string,
// });
this.customToast(this.$t('message.Pi_tip4') as string);
return;
}
const params = {
dataList,
...this.form2,
};
await this.model.saveBlDetailUpload(params);
// this.$form2.validate(async (valid) => {
// if (!valid) return;
// const params = {
// dataList,
// ...this.form2,
// };
// await this.model.saveBlDetailUpload(params);
// // uni.navigateBack({ delta: 1 });
// setTimeout(() => {
// uni.navigateBack({ delta: 1 });
// }, 2000);
// uni.showModal({
// title: this.$t('message.Pi_tip') as string,
// content: this.$t('message.Pi_tip5') as string,
// confirmText: this.$t('message.workArea_Confirm') as string,
// showCancel: false,
// success: () => {
// uni.navigateBack({ delta: 1 });
// },
// });
// });
}
/**
* 提交
*/
async onSubmit() {
// if (!this.model.hasBlDetailChecked) {
// uni.showToast({
// icon: "none",
// title: this.$t("message.Pi_tip7") as string,
// });
// return;
// }
// this.$form1.validate((valid) => {
// if (!valid) return;
// const list = this.model.checkedBlDetailList;
// // const needLocationCode = list.findIndex((_: any) => !_.wkposCodeP) > -1;
// // if (needLocationCode && !this.form1.locationCode) {
// // uni.showToast({ icon: 'none', title: '请选择库位' });
// // return;
// // }
// const amount = Number(this.form1.amount);
// for (const item of list) {
// if (amount + item.totalFillAmount > item.amount) {
// uni.showToast({
// icon: "none",
// title: this.$t("message.Pi_tip9") as string,
// });
// return;
// }
// }
// const locationCode: any = this.form1.locationCode;
// this.model.confirmCheckedBlDetailList({ amount, locationCode });
// });
this.toPage(this.page.raw.handover.feeding.Location);
}
/**
* 接收人输入回车
*/
async onOperatorConfirm(loginName: string) {
try {
const { userName } = await auth.getUserInfo({ loginName });
this.form2.operatorPass = loginName;
this.operatorName = userName;
} catch {
this.form2.operatorPass = '';
this.operatorName = '';
}
}
}
</script>
<style lang="scss" scoped>
.page-raw-feeding-detail {
background: #f2f2f2 linear-gradient(0deg, #f2f2f2 0%, #4a78ea 51%, #1753ea 100%) no-repeat;
background-size: 100% 600rpx;
padding: 118rpx 30rpx 162rpx;
min-height: 100%;
.header {
position: fixed;
top: 36rpx;
left: 0;
right: 0;
z-index: 99;
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;
}
.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>