lanju-app/src/pages/raw/handover/virtual/summary.vue

<template>
  <view class="page-aggregating-order">
    <view class="header">
      <view class="left">
        <u-icon class="icon" name="arrow-left" @click="uni.navigateBack()" />
      </view>
      <view class="title">{{ $t("message.rawMenu_virtual_Handover_QR") }}</view>
      <view class="right"></view>
    </view>
    <view class="table-wrapper">
      <wyb-table
        class="table"
        ref="table"
        width="100%"
        show-left-and-right-border
        enable-check="multiple"
        :headers="headers"
        :contents="model.summaryList"
        :show-vert-border="false"
      ></wyb-table>
    </view>
    <view class="bottom-bar">
      <view class="extra">
        <u-form ref="amountForm" :model="amountForm" :error-type="['toast']">
          <u-row class="bottom-info">
            <!-- <u-col :span="6">
              <u-form-item prop="sendSpot" label="源工位" label-width="120rpx">
                <u-input v-model="amountForm.oriSendSpot" />
              </u-form-item>
            </u-col> -->
            <u-col :span="6">
              <u-form-item
                prop="amount"
                :label="this.$t('message.Summary_Number')"
                label-width="120rpx"
              >
                <u-input
                  type="number"
                  v-model="amountForm.amount"
                  :placeholder="this.$t('message.po_PleaseInput')"
                />
              </u-form-item>
            </u-col>
          </u-row>
        </u-form>
        <u-form ref="submitForm" :model="submitForm" :error-type="['toast']">
          <u-row class="bottom-info">
            <u-col :span="6">
              <u-form-item
                prop="receiverName"
                :label="this.$t('message.Summary_Receiver')"
                label-width="120rpx"
              >
                <u-input
                  v-model="submitForm.receiverName"
                  @confirm="onReceiverConfirm"
                  :placeholder="this.$t('message.po_PleaseInput')"
                />
              </u-form-item>
            </u-col>
            <u-col :span="6">
              <u-form-item
                prop="password"
                :label="this.$t('message.Summary_Password')"
              >
                <u-input
                  type="password"
                  v-model="submitForm.password"
                  :placeholder="this.$t('message.po_PleaseInput')"
                />
              </u-form-item>
            </u-col>
          </u-row>
        </u-form>
      </view>
      <view class="container">
        <u-row>
          <u-col :span="6">
            <u-button type="primary" @click="onOk">
              {{ $t("message.dn_Confirm") }}
            </u-button>
          </u-col>
          <u-col :span="6">
            <u-button type="success" @click="onSubmit">
              {{ $t("message.po_Submit") }}
            </u-button>
          </u-col>
        </u-row>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Ref } from "vue-property-decorator";
import { BasePage } from "@/components/base/page";
import model from "./model";
import { summaryHeaders } from "./config";
import { VForm, VFormRules } from "vue/types/form";
import { auth } from "@/store/modules/auth";
import { pick } from "lodash/fp";
import http from "@/utils/request";
import { url } from "@/utils/url";
import { session } from "@/store/modules/session";

@Component
export default class VirtualSummary extends BasePage {
  /**
   * 表单引用
   */
  @Ref("amountForm") readonly $amountForm!: VForm;
  @Ref("submitForm") readonly $submitForm!: VForm;

  /**
   * 页面Module
   */
  model = model;

  /**
   * 表头
   */
  headers = summaryHeaders;

  /**
   * 处理完成
   */
  isBusinessFinished = true;

  /**
   * 更改数量表单
   */
  amountForm = {
    // oriSendSpot: '',
    amount: "",
  };

  /**
   * 上传表单
   */
  submitForm = {
    receiver: "",
    receiverName: "",
    password: "",
  };

  amountFormRules: VFormRules<any> = {
    amount: [
      {
        required: true,
        message: this.$t("message.Summary_PleaseInputNumber") as string,
      },
    ],
  };

  submitFormRules: VFormRules<any> = {
    receiver: [
      {
        required: true,
        message: this.$t("message.Summary_PleaseInputReceiver") as string,
      },
    ],
    password: [
      {
        required: true,
        message: this.$t("message.Summary_PleaseInputPassword") as string,
      },
    ],
  };

  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$amountForm.setRules(this.amountFormRules);
    this.$submitForm.setRules(this.submitFormRules);
    this.isBusinessFinished = false;
  }

  beforeDestroy() {
    if (model.summaryList.length > 0 && !this.isBusinessFinished) {
      this.unlock();
    }
  }

  /**
   * 行点击
   */
  // onRowClick(e: any) {
  //   const lineData: SummaryItem = e.lineData;
  //   this.amountForm.amount = String(lineData.amount - lineData.hvAmount);
  // }

  /**
   * 接收人回车
   */
  async onReceiverConfirm() {
    const { userName } = await auth.getUserInfo({
      loginName: this.submitForm.receiverName,
    });
    this.submitForm.receiver = this.submitForm.receiverName;
    this.submitForm.receiverName = userName;
  }

  /**
   * 确认
   */
  onOk() {
    this.$amountForm.validate(async (valid) => {
      if (!valid) return;
      // 检查
      const firstRecord = model.summaryList[0];
      if (firstRecord === undefined) {
        uni.showToast({
          icon: "none",
          title: this.$t("message.LBWK") as string,
        });
        return;
      }
      console.log("firstRecord", firstRecord);
      await model.checkAmount({
        sapFactoryCode: model.sapFactoryCode,
        loginName: session.loginName as string,
        materialCode: firstRecord.materialCode,
        unit: firstRecord.unit,
        mrpCode: firstRecord.mrpCode,
        factoryCode: session.factoryCode as string,
        sendSpot: firstRecord.sendSpot,
        amount: this.amountForm.amount,
      });
      // 改数
      const firstSelection = this.model.summaryList.find((_: any) => _.checked);
      if (firstSelection === undefined) {
        uni.showToast({
          icon: "none",
          title: this.$t("message.Pi_tip7") as string,
        });
      } else {
        const inputAmount = parseFloat(this.amountForm.amount);
        const totalHvAmount = firstSelection.totalHvAmount;
        const totalMoAmount = firstSelection.totalMoAmount;
        if (inputAmount + totalHvAmount - totalMoAmount > 0.000001) {
          uni.showToast({
            icon: "none",
            title: this.$t("message.Pi_tip8") as string,
          });
        } else if (
          inputAmount <= 0
          // inputAmount.toString().split(".")[1].length > 3
        ) {
          uni.showToast({
            icon: "none",
            title: this.$t("message.Pi_tip2") as string,
          });
        } else {
          // model.updateSummaryItem({
          //   index: this.model.summaryList.findIndex((_: any) => _.checked),
          //   newItem: {
          //     ...firstSelection,
          //     // oriSendSpot: this.amountForm.oriSendSpot,
          //     hvAmount: inputAmount,
          //   },
          // });
          this.model.summaryList.forEach((item: any) => {
            if (item.checked) {
              item.hvAmount = this.amountForm.amount;
            }
          });
          uni.showToast({
            icon: "none",
            title: this.$t("message.success") as string,
          });
        }
      }
    });
  }

  /**
   * 上传
   */
  onSubmit() {
    this.$submitForm.validate(async (valid) => {
      if (valid) {
        let qtyStase = false;
        let selectsta = true;
        console.log("qqq", model.summaryList);
        if (model.summaryList.length === 0) {
          uni.showToast({
            icon: "none",
            title: this.$t("message.Pi_tip4") as string,
          });
          return;
        } else {
          model.summaryList.map((item) => {
            if (!item.checked) {
              return;
            } else if (item.hvAmount == 0 || item.hvAmount == null) {
              qtyStase = true;
            }
            if (item.checked) {
              selectsta = false;
            }
          });
        }
        if (selectsta) {
          uni.showToast({
            icon: "none",
            title: this.$t("message.Pi_tip4") as string,
          });
          return;
        }
        if (qtyStase) {
          uni.showToast({
            icon: "none",
            title: this.$t("message.Summary_PleaseInputNumber") as string,
          });
          return;
        }
        let res = await auth.checkPassword({
          rfPwd: this.submitForm.password,
          factoryCode: session.factoryCode as string,
          loginName: this.submitForm.receiverName,
        });
        if (res.code != 1) {
          return;
        }
        await model.uploadSummaryList({
          operatorPass: this.submitForm.receiver,
          factoryCode: session.factoryCode as string,
          loginName: session.loginName as string,
          sapFactoryCode: model.sapFactoryCode,
          dataList: model.summaryList.map((item) => ({
            ...pick(
              [
                "materialCode",
                "materialDesc",
                "unit",
                "wkposCode",
                "prdMaterialDesc",
                "sendSpot",
                // 'oriSendSpot',
                "mrpCode",
              ],
              item
            ),
            amount: String(item.amount),
            hvAmount: String(item.hvAmount),
            totalMoAmount: String(item.totalMoAmount),
            totalHvAmount: String(item.totalHvAmount),
            factoryCode: model.sapFactoryCode,
          })),
          includeOrderOutIdList: model.proOrderResultList.map(
            (item: any) => item.orderOutId
          ),
        });
        this.submitForm.receiverName = "";
        this.submitForm.receiver = "";
        this.submitForm.password = "";
        this.isBusinessFinished = true;
        model.clearProOrderResultList();
        setTimeout(() => {
          uni.navigateBack({ delta: 2 });
        }, 2000);
      }
    });
  }

  /**
   * 解锁
   */
  async unlock() {
    try {
      await http.post(url.virtual.unlock.list, {
        factoryCode: session.factoryCode,
        loginName: session.loginName,
        orderOutIdList: model.proOrderResultList.map((_: any) => _.orderOutId),
      });
    } catch (e) {
      uni.showToast({
        icon: "none",
        title: (this.$t("message.Summary_Tip") as string) + e.message,
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.page-aggregating-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: calc(var(--status-bar-height) + 118rpx);
  padding-bottom: 280rpx;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    padding-top: var(--status-bar-height);
    height: calc(var(--status-bar-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 {
    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>