修复错误，增加验证

qingyiay

2023-05-17 ae1aad66a165ee7253bed2127a3b53baa40c2361

 pages/public-page/forward/forward.vue

@@ -1,28 +1,62 @@
<template>
   <!-- 转发 -->
   <view class="forward">
      <view v-if="roleType == 1"><u-notice-bar :text="text" :fontSize="30" mode="link"></u-notice-bar></view>
      <view v-else-if="roleType == 2"><u-notice-bar :text="text1" :fontSize="30" mode="link"></u-notice-bar></view>
      <view class="forward-card" v-for="(val, index) in jhOrderPlanForwardList" :key="index">
         <u--form labelPosition="top" :model="forwardForm" ref="form1">
            <u-form-item label="转发对象" labelWidth="20%" ref="item1" @click="forwardObjectClick(index)">
               <u--input v-model="val.name" placeholder="点击选择转发对象" :readonly="true"></u--input>
            </u-form-item>
            <u-form-item label="输入数量" labelWidth="20%" ref="item1">
               <view class="forward-card-amount">
                  <view class="forward-card-amount-input"><u--input v-model="val.carNum" placeholder="请输入转发数量"></u--input></view>
                  <u-checkbox-group v-model="val.checkboxValue1" placement="column" @change="v => checkboxChange(v, index, val)">
                     <u-checkbox :customStyle="{ marginBottom: '8px' }" size="30" labelSize="30" label="全部转发" name="全部转发" :disabled="val.ischecked"></u-checkbox>
                  </u-checkbox-group>
               </view>
            </u-form-item>
            <u-form-item><u-button text="删除本组" :hairline="false" type="error" @click="deleteGroup(index, val)"></u-button></u-form-item>
         </u--form>
      <view class="forward-banner">
         <view class="banner-block">
            <view class="arrow-left" @click="back"><u-icon name="arrow-left" size="40" color="#ffffff"></u-icon></view>
            <view class="forward-text">转发</view>
         </view>
      </view>
      <view v-if="roleType == 1" class="notice-bar">
         <u-notice-bar :text="text" :fontSize="30"></u-notice-bar>
         <view
            class="notice-icon"
            style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/notice.png') no-repeat;background-size: cover; width: 42rpx;height: 42rpx;"
         ></view>
      </view>
      <view v-else-if="roleType == 2" class="notice-bar"><u-notice-bar :text="text1" :fontSize="30"></u-notice-bar></view>
      <view class="card-main">
         <view class="card-block">
            <view class="forward-card" v-for="(val, index) in jhOrderPlanForwardList" :key="index">
               <u-swipe-action>
                  <u-swipe-action-item :options="options1" @click="deleteGroup(index, val)" :index="index" :name="val.xsUserId || val.fleetId">
                     <view class="card-content">
                        <u--form labelPosition="left" :model="forwardForm" ref="form1">
                           <u-form-item label="转发对象" labelWidth="21%" ref="item1" @click="forwardObjectClick(index)">
                              <u--input v-model="val.name" placeholder="点击选择转发对象" :readonly="true" border="bottom"></u--input>
                           </u-form-item>
                           <u-form-item label="输入数量" ref="item2" labelWidth="21%">
                              <view class="forward-card-amount">
                                 <view class="forward-card-amount-input">
                                    <u--input
                                       v-model="val.carNum"
                                       placeholder="请输入转发数量"
                                       @input="debouncecarNumInput(index, val.carNum)"
                                       @blur="blurInput(index, val.carNum)"
                                       border="bottom"
                                    ></u--input>
                                 </view>
                                 <u-checkbox-group v-model="val.checkboxValue1" placement="column" @change="v => checkboxChange(v, index, val)">
                                    <u-checkbox size="30" shape="circle" labelSize="30" label="全部转发" name="全部转发" :disabled="val.ischecked"></u-checkbox>
                                 </u-checkbox-group>
                              </view>
                           </u-form-item>
                           <!-- <u-form-item><u-button text="删除本组" :hairline="false" type="error" @click="deleteGroup(index, val)"></u-button></u-form-item> -->
                        </u--form>
                     </view>
                  </u-swipe-action-item>
               </u-swipe-action>
            </view>
         </view>
      </view>

      <view class="utils-buttonGroup">
         <!-- 添加按钮 -->
         <view class="AdddBtn"><u-button text="添加" :hairline="false" @click.stop="addForm" :disabled="whetherClick"></u-button></view>
         <!-- 提交按钮 -->
         <view class="forwardBtn"><u-button text="提交" :hairline="false" type="warning" @click.stop="submitForm" :disabled="whetherClick1"></u-button></view>
      </view>
      <!-- 增加按钮 -->
      <view class="AdddBtn"><u-button text="添加" :hairline="false" type="primary" :customStyle="{ marginBottom: '8px' }" @click="addForm"></u-button></view>
      <!-- 按钮 -->
      <view class="forwardBtn"><u-button text="提交" :hairline="false" type="warning" @click="submitForm"></u-button></view>

      <!-- 选择货代或车队弹出框 -->
      <view class="selectHuoDaiOrFleet-container">
@@ -55,13 +89,14 @@

<script>
import { customerId } from '@/utils/status';
import toast from '../../../uni_modules/uview-ui/libs/config/props/toast';

export default {
   onLoad(params) {
      console.log(params, '转发页面的参数');
      // 客户
      this.cars2 = Number(params.cars2);
      this.carNumSurplus1 = Number(params.carNumSurplus1);
      this.tempcarNumSurplus1 = this.carNumSurplus1 = Number(params.carNumSurplus1);
      // 货代
      this.carNum = Number(params.carNum);
      this.carNumSurplusHuodai = this.forwardSurplus = Number(params.carNumSurplusHuodai);
@@ -128,12 +163,24 @@
         list1: [{ name: '车队' }, { name: '货代' }],
         tabHuoDai: false,
         carNumSurplus1: '',
         tempcarNumSurplus1: '',
         cars2: '',
         carNum: '',
         carNumSurplusHuodai: '',
         formNum: 1,
         // 个人转发数据
         personalForward: {}
         personalForward: {},
         whetherClick: false,
         whetherClick1: false,
         // 滑动单元格配置
         options1: [
            {
               text: '删除',
               style: {
                  backgroundColor: '#FB0101'
               }
            }
         ]
      };
   },
   onShow() {
@@ -155,6 +202,12 @@
      }
   },
   methods: {
      // 返回上一页
      back() {
         uni.navigateBack({
            delta: 1
         });
      },
      init() {
         switch (this.roleType) {
            case 1:
@@ -187,8 +240,7 @@
         }
      },
      checkboxChange(value, index, v) {
         uni.setStorageSync('allrelay', this.jhOrderPlanForwardList[index].carNum);
         this.jhOrderPlanForwardList = this.jhOrderPlanForwardList.map((v, i) => {
         this.jhOrderPlanForwardList = this.jhOrderPlanForwardList.map(v => {
            return {
               ...v,
               ischecked: false
@@ -197,30 +249,34 @@
         if (value.length != 0) {
            let tempforwardSurplus = this.forwardSurplus;
            let tempcarNumSurplus1 = this.carNumSurplus1;
            if (v.id) {
               this.$reqGet('jhorderplanforward', { forwardId: v.id }).then(res => {
                  this.personalForward = res.data;
                  // 计算全部转发数
                  // 客户
                  if (this.roleType == 1) {
                     this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.personalForward.carNum, tempcarNumSurplus1);
                  }
                  tempcarNumSurplus1 = 0;
                  // 货代
                  if (this.roleType == 2) {
                     this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.personalForward.carNum, tempforwardSurplus);
                  }
                  tempforwardSurplus = 0;
               });
            } else {
               if (this.roleType == 1) {
                  this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.jhOrderPlanForwardList[index].carNum, this.carNumSurplus1);
               }
               tempcarNumSurplus1 = 0;
               if (this.roleType == 2) {
                  this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.jhOrderPlanForwardList[index].carNum, this.forwardSurplus);
               }
               tempforwardSurplus = 0;
            // if (v.id) {
            //    this.$reqGet('jhorderplanforward', { forwardId: v.id }).then(res => {
            //       this.personalForward = res.data;
            //       // 计算全部转发数
            //       // 客户
            //       if (this.roleType == 1) {
            //          this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.personalForward.carNum, tempcarNumSurplus1);
            //          this.calculate(this.jhOrderPlanForwardList);
            //          if (tempcarNumSurplus1 == 0) {
            //             this.jhOrderPlanForwardList[index].carNum = this.allrelay(0, this.carNumSurplus1);
            //          }
            //       }
            //       tempcarNumSurplus1 = 0;
            //       // 货代
            //       if (this.roleType == 2) {
            //          this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.personalForward.carNum, tempforwardSurplus);
            //       }
            //       tempforwardSurplus = 0;
            //    });
            // } else { }

            if (this.roleType == 1) {
               this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.carNumSurplus1, this.jhOrderPlanForwardList[index].carNum);
               this.calculate(this.jhOrderPlanForwardList);
            }
            if (this.roleType == 2) {
               this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.carNumSurplusHuodai, this.jhOrderPlanForwardList[index].carNum);
               this.calculate(this.jhOrderPlanForwardList);
            }
            // 选择一个后其余禁止复选
            this.jhOrderPlanForwardList.forEach((v, i) => {
@@ -228,23 +284,10 @@
                  v.ischecked = true;
               }
            });
            this.whetherClick = true;
         } else {
            let tempforwardSurplus = this.forwardSurplus;
            let tempcarNumSurplus1 = this.carNumSurplus1;
            // 货代
            if (this.roleType == 2) {
               this.jhOrderPlanForwardList[index].carNum = this.allrelayto(this.jhOrderPlanForwardList[index].carNum, this.forwardSurplus);
               if (this.jhOrderPlanForwardList[index].carNum <= 0) {
                  this.jhOrderPlanForwardList[index].carNum = 0;
               }
            }
            // 客户
            if (this.roleType == 1) {
               this.jhOrderPlanForwardList[index].carNum = this.allrelayto(this.jhOrderPlanForwardList[index].carNum, this.carNumSurplus1);
               if (this.jhOrderPlanForwardList[index].carNum <= 0) {
                  this.jhOrderPlanForwardList[index].carNum = 0;
               }
            }
            this.jhOrderPlanForwardList[index].carNum = 0;
            this.calculate(this.jhOrderPlanForwardList);
         }
      },
      // 获取货代列表
@@ -298,6 +341,64 @@
            }
         });
      },
      // 计算提煤单数量，添加或删除时调用
      calculate(arr) {
         let total = arr.reduce((prev, cur) => {
            return cur.carNum + prev;
         }, 0);
         console.log(total, '提煤单一共的数据');
         if (this.roleType == 1) {
            if (this.cars2 >= total) {
               this.carNumSurplus1 = this.cars2 - total;
               this.whetherClick = false;
               this.whetherClick1 = false;
            } else {
               this.carNumSurplus1 = 0;
               this.$u.toast('剩余提煤单数量不足');
               this.whetherClick = true;
               this.whetherClick1 = true;
            }
         }
         if (this.roleType == 2) {
            if (this.carNum >= total) {
               this.carNumSurplusHuodai = this.carNum - total;
               this.whetherClick = false;
               this.whetherClick1 = false;
            } else {
               this.carNumSurplusHuodai = 0;
               this.$u.toast('剩余提煤单数量不足');
               this.whetherClick = true;
               this.whetherClick1 = true;
            }
         }
      },
      debouncecarNumInput(index, value) {
         let time;
         let that = this;
         that.$set(that.jhOrderPlanForwardList[index], 'carNum', Number(value));
         if (that.roleType == 1) {
            if (that.jhOrderPlanForwardList[index].carNum < that.carNumSurplus1) {
               that.jhOrderPlanForwardList[index].checkboxValue1 = '';
            }
         }
         if (that.roleType == 2) {
            if (that.jhOrderPlanForwardList[index].carNum < that.carNumSurplusHuodai) {
               that.jhOrderPlanForwardList[index].checkboxValue1 = '';
            }
         }
         return (function() {
            if (!time) {
               time = setTimeout(() => {
                  that.calculate(that.jhOrderPlanForwardList);
                  time = null;
               }, 800);
            }
         })();
      },
      blurInput(index, value) {
         this.$set(this.jhOrderPlanForwardList[index], 'carNum', Number(value));
         this.calculate(this.jhOrderPlanForwardList);
      },
      // 添加一组表单
      addForm() {
         // 判断是否有一个复选，如果有则禁止新加的复选，没有则不禁止
@@ -306,7 +407,7 @@
            this.jhOrderPlanForwardList.push({
               orderPlanId: this.orderPlanId,
               name: '',
               carNum: 0,
               carNum: null,
               xsUserId: 0,
               fleetId: 0,
               checkboxValue1: '',
@@ -316,21 +417,23 @@
            this.jhOrderPlanForwardList.push({
               orderPlanId: this.orderPlanId,
               name: '',
               carNum: 0,
               carNum: null,
               xsUserId: 0,
               fleetId: 0,
               checkboxValue1: '',
               ischecked: true
            });
         }
         this.calculate(this.jhOrderPlanForwardList);
      },
      // 删除一组表单
      deleteGroup(index, v) {
         let tempcarNum = v.carNum;
         if (v.id && this.jhOrderPlanForwardList[index].carNum !== tempcarNum) {
         if (v.id) {
            this.$reqPost('deleteForward', { id: v.id }, 'params').then(res => {
               if (res.code === 0) {
                  this.jhOrderPlanForwardList.splice(index, 1);
                  this.calculate(this.jhOrderPlanForwardList);
                  this.$u.toast('删除成功');
               } else if (res.code === 1) {
                  this.$u.toast(res.msg);
@@ -338,6 +441,7 @@
            });
         } else {
            this.jhOrderPlanForwardList.splice(index, 1);
            this.calculate(this.jhOrderPlanForwardList);
            this.$u.toast('删除成功');
         }
      },
@@ -347,8 +451,9 @@
         if (this.jhOrderPlanForwardList.length === 0) {
            this.$u.toast('请至少选择一组转发对象');
         }
         let reg = /^[1-9]\d*$/;
         this.jhOrderPlanForwardList.forEach(v => {
            if (isNaN(Number(v.carNum)) || Number(v.carNum) <= 0) {
            if (!reg.test(v.carNum) || Number(v.carNum) <= 0) {
               this.$u.toast('请输入合法数字');
               isPass = false;
               return isPass;
@@ -389,33 +494,127 @@
</script>

<style lang="scss" scoped>
::v-deep.forward {
   width: 90%;
   margin: 0 auto;

   // 卡片
   .forward-card {
      margin-top: vww(10);
      .notice-bar {
         width: 100%;
         height: vww(24);
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
/deep/ .u-notice-bar {
   background: rgba(255, 255, 255, 0.3) !important;
   box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(27, 103, 255, 0);
   border-radius: 28rpx;
   .u-notice__content {
      text {
         text-shadow: 3rpx 3rpx 8rpx #4784fe;
         font-size: 24rpx;
         color: #fd1446 !important;
         font-weight: 400;
      }
      .u-form {
         .u-form-item {
            .u-form-item__body {
               .u-form-item__body__right {
                  .u-form-item__body__right__content {
                     .u-form-item__body__right__content__slot {
                        .forward-card-amount {
                           display: flex;
                           justify-content: space-between;
                           align-items: flex-end;
                           .forward-card-amount-input {
                              width: vww(245);
   }
}
/deep/ .u-input {
   border-bottom: 1px solid #c4c4c4;
   width: 458rpx;
}
::v-deep.forward {
   width: 100%;
   margin: 0 auto;
   .forward-banner {
      width: 100%;
      height: 430rpx;
      background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
      @include flex;
      justify-content: flex-start;
      overflow: hidden;
      .banner-block {
         width: 50%;
         @include flex;
         position: relative;
         top: -75rpx;
         left: 32rpx;
         .forward-text {
            width: 80rpx;
            font-size: 40rpx;
            font-weight: 400;
            color: #ffffff;
            line-height: 69rpx;
         }
      }
   }
   .notice-bar {
      width: 688rpx;
      height: 56rpx;
      margin: 0 auto;
      position: relative;
      top: -200rpx;
      background: transparent;
      .notice-icon {
         position: absolute;
         top: 21rpx;
         left: 7rpx;
      }
   }
   .card-main {
      width: 100%;
      @include flex;
      justify-content: center;
      position: relative;
      top: -100rpx;
      z-index: 1;
      margin-bottom: vww(40);
      .card-block {
         width: 690rpx;
         @include flex;
         flex-direction: column;
         .forward-card {
            margin-top: vww(10);
            width: 690rpx;
            height: 275rpx;
            background: #ffffff;
            box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
            border-radius: 20rpx;
            .card-content {
               width: 612rpx;
               margin-left: 48rpx;
               margin-top: 24rpx;
               // margin: 56rpx 30rpx 70rpx 48rpx;
               .u-form {
                  .u-form-item {
                     .u-form-item__body {
                        .u-form-item__body__left {
                           .u-form-item__body__left__content {
                              .u-form-item__body__left__content__label {
                                 font-weight: 400 !important;
                                 color: #898989 !important;
                                 font-size: 30rpx !important;
                              }
                           }
                        }
                        .u-input {
                           border: 1px solid #dddddd;
                        .u-form-item__body__right {
                           .u-form-item__body__right__content {
                              .u-form-item__body__right__content__slot {
                                 .forward-card-amount {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: flex-end;
                                    .forward-card-amount-input {
                                       .u-input {
                                          width: 263rpx;
                                       }
                                    }
                                    .u-checkbox-group {
                                       position: relative;
                                       top: vww(8);
                                       left: vww(4);
                                       .u-checkbox {
                                          .u-checkbox__icon-wrap {
                                             border-color: rgba(42, 97, 255, 1) !important;
                                          }
                                       }
                                    }
                                 }
                              }
                           }
                        }
                     }
                  }
@@ -423,21 +622,41 @@
            }
         }
      }
      .forward-card-amount {
         display: flex;
   }
   .utils-buttonGroup {
      width: 610rpx;
      @include flex;
      position: fixed;
      bottom: vww(30);
      left: vww(30);
      z-index: 3;
      .AdddBtn,
      .forwardBtn {
         width: 290rpx;
      }
      .AdddBtn {
         .u-button {
            height: 74rpx;
            border: 1px solid #3b56eb;
            border-radius: 37rpx 37rpx 37rpx 37rpx;
            background: transparent;
            color: #3b56eb;
         }
      }
      .forwardBtn {
         .u-button {
            height: 74rpx;
            color: #ffffff;
            background: rgba(73, 123, 251, 1);
            border: 0;
            border-radius: 37rpx 37rpx 37rpx 37rpx;
         }
      }
   }

   .forwardBtn {
      width: 100%;
      // position: fixed;
      bottom: vww(50);
   }

   .selectHuoDaiOrFleet-container {
      .u-popup {
         .u-transition {
            height: 95%;
            height: 80%;

            .u-popup__content {
               overflow: scroll !important;