lanju-app/src/pages/raw/handover/virtual-Vn/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" @onCellClick="Modify($event)" width="100%" show-left-and-right-border @onCheck="ClickHandover" enable-check="multiple" :headers="headers" :contents="model.proOrderResultList" :show-vert-border="false"> </wyb-table>
    </view>
    <view class="bottom-bar">
      <view class="extra">
        <u-form ref="submitForm" :model="submitForm" :error-type="['toast']">
          <u-row class="bottom-info">
            <u-col :span="6">
              <u-form-item prop="receiverName" :label="$t('message.Summary_Receiver')" label-width="120rpx">
                <u-input v-model="submitForm.receiverName" :border="border" @confirm="onReceiverConfirm" :placeholder="$t('message.po_PleaseInput')" />
              </u-form-item>
            </u-col>
            <u-col :span="6">
              <u-form-item prop="password" :label="$t('message.Summary_Password')">
                <u-input type="password" v-model="submitForm.password" :border="border" :placeholder="$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="uni.navigateBack({})">
              {{ $t('message.po_Return') }}
            </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>
      <!-- 弹窗 -->
      <u-popup v-model="show" mode="center" closeable width="95%" height="15%" border-radius="14">
        <view class="singles">
          <view class="single-lefts">
            <view>{{ $t('message.dn_Number') }}</view>
            <u-search :placeholder="$t('message.Summary_PleaseInputNumber')" v-model.trim="nextNum" :show-action="false"> </u-search>
          </view>
          <view class="single-rights">
            <u-button type="primary" @click="ModifyConfirm">{{ $t('message.product_Confirm') }}</u-button>
          </view>
        </view>
      </u-popup>
    </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 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;
  border = true;
  /**
   * 表头
   */
  headers = summaryHeaders;
  show = false;
  nextNum: any = '';
  itemIndex = 0;

  /**
   * 处理完成
   */
  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;
  }
  /**
   * 接收人回车
   */
  async onReceiverConfirm() {
    const { userName } = await auth.getUserInfo({
      loginName: this.submitForm.receiverName,
    });
    this.submitForm.receiver = this.submitForm.receiverName;
    //console.log(this.submitForm.receiver)
    this.submitForm.receiverName = userName;
  }
  Modify(e: any) {
    this.itemIndex = e.contentIndex;
    this.show = !this.show;
    this.nextNum = '';
  }
  ModifyConfirm() {
    if (this.nextNum == '') {
      uni.showToast({
        title: this.$t('message.Summary_PleaseInputNumber') as any,
        image: '/static/icons/icon-52.png',
      });
      return;
    }
    let num: any = parseFloat(this.model.proOrderResultList[this.itemIndex].amount) - parseFloat(this.model.proOrderResultList[this.itemIndex].totalMoAmount);
    if (parseFloat(this.nextNum) > num) {
      uni.showToast({
        title: this.$t('message.Commission_tips4') as any,
        image: '/static/icons/icon-52.png',
      });
      return;
    }
    if (parseFloat(this.nextNum) > this.model.proOrderResultList[this.itemIndex].virtualAmount) {
      uni.showToast({
        title: this.$t('message.Cannotvirtual') as any,
        image: '/static/icons/icon-52.png',
      });
      return;
    }
    this.model.proOrderResultList[this.itemIndex].hvAmount = this.nextNum;
    this.show = !this.show;
  }
  //选中其中某一行数据
  ClickHandover(e: any) {
    console.log(e);
    this.model.proOrderResultList.forEach((item: any) => {
      if (!item.checked) {
        item.hvAmount = 0;
      }
    });
    if (e.data.length != 0) {
      if (e.data.length != this.model.proOrderResultList.length) {
        let index = e.data[e.data.length - 1].index;
        let num: any = parseFloat(this.model.proOrderResultList[index].amount) - parseFloat(this.model.proOrderResultList[index].totalMoAmount);
        if (num > parseFloat(this.model.proOrderResultList[index].virtualAmount)) {
          this.model.proOrderResultList[index].hvAmount = parseFloat(this.model.proOrderResultList[index].virtualAmount);
        } else {
          this.model.proOrderResultList[index].hvAmount = num;
        }
      } else {
        this.model.proOrderResultList.forEach((item: any) => {
          let num: any = parseFloat(item.amount) - parseFloat(item.totalMoAmount);
          if (num > item.virtualAmount) {
            item.hvAmount = item.virtualAmount;
          } else {
            item.hvAmount = num;
          }
        });
      }
    }
  }
  onSubmit() {
    this.$submitForm.validate(async (valid) => {
      if (valid) {
        let qtyStase = false;
        let selectsta = true;
        console.log('qqq', model.proOrderResultList);
        if (model.proOrderResultList.length === 0) {
          this.customToast(this.$t('message.Pi_tip4') as string);
          return;
        } else {
          model.proOrderResultList.map((item) => {
            if (!item.checked) {
              return;
            } else if (item.hvAmount == 0 || item.hvAmount == null) {
              qtyStase = true;
            }
            if (item.checked) {
              selectsta = false;
            }
          });
        }
        if (selectsta) {
          this.customToast(this.$t('message.Pi_tip4') as string);
          return;
        }
        if (qtyStase) {
          this.customToast(this.$t('message.Summary_PleaseInputNumber') as string);
          return;
        }
        //console.log("????",this.submitForm.receiver)
        //console.log("//////",this.submitForm.receiver? "true":"false");
        //console.log("<<<<<<<",(this.submitForm.receiver ? this.submitForm.receiver : this.submitForm.receiverName) == session.loginName)
        if ((this.submitForm.receiver ? this.submitForm.receiver : this.submitForm.receiverName) == session.loginName) {
          this.customToast(this.$t('message.different') as string);
          return;
        }
        let res = await auth.checkPassword({
          rfPwd: this.submitForm.password,
          factoryCode: session.factoryCode as string,
          loginName: this.submitForm.receiver ? this.submitForm.receiver : this.submitForm.receiverName,
        });
        if (res.code != 1) {
          return;
        }
        let list = [];
        console.log('选择是否有标志', model.proOrderResultList);
        model.proOrderResultList.forEach((item) => {
          if (item.checked) {
            list.push(item);
          }
        });
        console.log('数据。。。', list);
        await model.uploadSummaryList({
          operatorPass: this.submitForm.receiver ? this.submitForm.receiver : this.submitForm.receiverName,
          factoryCode: session.factoryCode as string,
          loginName: session.loginName as string,
          sapFactoryCode: model.sapFactoryCode,
          dataList: list,
          includeOrderOutIdList: model.proOrderResultList.map((item: any) => item.orderOutId),
        });
        await this.model.queryProOrderResultList(this.model.nextQueryParams);
        if (this.model.proOrderResultList.length == 0) {
          uni.showToast({
            title: this.$t('message.Pi_NoDataFound') as string,
          });
          setTimeout(() => {
            uni.navigateBack({ delta: 2 });
          }, 2000);
        }
        this.submitForm.receiverName = '';
        this.submitForm.receiver = '';
        this.submitForm.password = '';
        this.isBusinessFinished = true;
      }
    });
  }
  async unlock() {
    try {
      await http.post(url.virtual.unlock.list, {
        factoryCode: session.factoryCode,
        loginName: session.loginName,
        orderOutIdList: model.proOrderResultList.map((_: any) => _.orderOutId),
      });
    } catch (e) {
      this.customToast((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;
    z-index: 1000;

    .singles {
      width: 100%;
      height: 50px;
      // height: 100px;
      display: flex;
      padding-top: 35px;

      .single-lefts {
        width: 80%;
        height: 60px;
        display: flex;

        view {
          width: 110rpx;
          height: 100%;
          line-height: 100rpx;
        }
      }

      .single-rights {
        button {
          margin-top: 15rpx;
          width: 150rpx;
          height: 70rpx;
        }
      }
    }

    .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>