delivery_admin_app/pages/index/addHandDelivery.vue

<template>
  <view class="container">
    <uv-form labelPosition="top" style="margin-bottom: 20rpx;" labelWidth="100" :model="item" :rules="deliveryRules" :ref="(el) => el && (deliveryFormRef[index] = el)" v-for="(item, index) in listData" :key="index">
      <view class="formContent">
        <uv-form-item label="订单编号：" prop="sapNo">
          <uv-input placeholder="请输入内容" v-model="item.sapNo" clearable />
        </uv-form-item>
        <uv-form-item label="项目描述：" prop="xmMs">
          <uv-input placeholder="请输入内容" v-model="item.xmMs" clearable />
        </uv-form-item>
        <uv-form-item label="项目号：" prop="xmNo">
          <uv-input placeholder="请输入内容" v-model="item.xmNo" clearable />
        </uv-form-item>
        <uv-form-item label="物料号：" prop="wlNo">
          <uv-input placeholder="请输入内容" v-model="item.wlNo" clearable />
        </uv-form-item>
        <uv-form-item label="物料描述：" prop="wlMs">
          <uv-input placeholder="请输入内容" v-model="item.wlMs" clearable />
        </uv-form-item>
        <uv-form-item label="配送数量：" prop="realQty">
          <uv-input placeholder="请输入内容" type="digit" v-model="item.realQty" clearable />
        </uv-form-item>
        <uv-form-item label="单位" prop="dw">
          <uv-input placeholder="请输入内容" v-model="item.dw" clearable />
        </uv-form-item>
        <uv-form-item label="供应商名称：" prop="gysMc">
          <uv-input placeholder="请输入内容" v-model="item.gysMc" clearable />
        </uv-form-item>
        <uv-form-item label="备注：" prop="remark">
          <uv-input placeholder="请输入内容" v-model="item.remark" clearable />
        </uv-form-item>
        <template v-if="index !== 0">
          <view style="display: flex; justify-content: flex-end;">
            <uv-button type="error" text="删除" style="width: 200rpx;" @tap="removeForm(index)">删 除</uv-button>
          </view>
        </template>
      </view>
    </uv-form>
    <view style="display: flex; justify-content: flex-end;margin-right: 20rpx;">
      <uv-button type="primary" text="添加" style="width: 200rpx;" @tap="addForm">添 加</uv-button>
    </view>
    <view class="btn">
      <uv-button type="primary" text="确定" size="large" style="width: 100%;" class="mainBtn" @tap="submitForm">确 定 配 送 货
        物</uv-button>
    </view>

  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import { getGoodsDict } from "@/api/index.js";

const listData = ref([
  {
    sapNo: "",
    xmMs: "",
    xmNo: "",
    wlNo: "",
    wlMs: "",
    realQty: null,
    dw: "",
    gysMc: "",
    remark: ""
  }
])

const deliveryFormRef = ref([])
const deliveryRules = ref({
  sapNo: [
    { required: true, message: "请输入订单编号", trigger: "blur" }
  ],
  xmMs: [
    { required: true, message: "请输入项目描述", trigger: "blur" }
  ],
  xmNo: [
    { required: true, message: "请输入项目号", trigger: "blur" }
  ],
  wlNo: [
    { required: true, message: "请输入物料号", trigger: "blur" }
  ],
  wlMs: [
    { required: true, message: "请输入物料描述", trigger: "blur" }
  ],
  realQty: [
    { required: true, type: 'float', message: "请输入配送数量", trigger: "blur" }
  ],
  dw: [
    { required: true, message: "请输入单位", trigger: "blur" }
  ],
  gysMc: [
    { required: true, message: "请输入供应商名称", trigger: "blur" }
  ],
})


const removeForm = (index) => {
  listData.value.splice(index, 1)
}

const addForm = () => {
  listData.value.push({
    sapNo: "",
    xmMs: "",
    xmNo: "",
    wlNo: "",
    wlMs: "",
    realQty: "",
    dw: "",
    gysMc: "",
    remark: ""
  })
}

const submitForm = async () => {
  try {
    // 遍历所有表单实例，逐个校验
    for (const formRef of deliveryFormRef.value) {
      if (formRef) {
        // 等待单个表单校验完成，失败则抛出异常
        await formRef.validate();
      }
    }

    // 所有表单校验通过后的逻辑
    uni.$uv.toast('校验通过，准备提交');

    console.log("提交数据：", listData.value);
    // 这里写你的提交逻辑
    let arr = listData.value.map(item => {
      return {
        wlNo: item.wlNo,
        qty: item.realQty,
      }
    })
    getGoodsDict({ items: arr }).then(res => {
      console.log(res)
      uni.navigateTo({
        url: '/pages/index/addDeliveryInfo',
        success: function(res1) {
          // 通过eventChannel向被打开页面传送数据
          res1.eventChannel.emit('acceptData', { data: {detailList: listData.value}, totalWeightKg: res.data.totalWeightKg, goodsSize: res.data.totalVolumeM3 })
        }
      })
    })

  } catch (errors) {
    // 校验失败的处理
    console.log("校验失败：", errors);
    uni.$uv.toast('请完善必填项后提交');
  }
}

onLoad(() => {
})



</script>

<style scoped lang="scss">
.container {
  padding: 32rpx;
  background-color: #F6F8FA;
  padding-bottom: 160rpx;
  .formContent {
    background-color: white;
    border-radius: 20rpx;
    padding: 0 20rpx 20rpx;
  }
  .btn {
    position: fixed;
    width: calc(100vw - 64rpx);
    bottom: 0;
    left: 32rpx;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
}



::v-deep uni-toast {
  z-index: 30000 !important;
}
</style>