delivery_admin_app/pages/index/addDelivery.vue

<template>
  <view class="container">
    <z-paging ref="pagingRef" class="containerBox" v-model="listData" :default-page-size="queryParams.pageSize"
      @query="queryList">
      <view class="box">
        <view v-for="(item, index) in listData" :key="index" @tap="changeSelect(index)" class="item"
          :style="index == selectIndex ? 'border: #199793 4rpx solid;' : ''">
          <uv-icon v-show="index == selectIndex" class="selectIcon" color="#199793" size="20"
            name="checkbox-mark"></uv-icon>
          <view class="title">单据号：{{ item.billNo }}</view>
          <view><text>出库类型：</text>{{ item.operationTypeName }}</view>
          <view><text>理货员：</text>{{ item.operatorName }}</view>
          <view><text>施工队：</text>{{ item.teamName }}</view>
          <view><text>出库时间：</text>{{ parseTime(item.operationTime) }}</view>
          <view class="more" v-show="!item.showMore" @tap="openMore(index)">
            <view>详细信息</view>
            <uv-icon name="arrow-right" color="#A4A6A7" size="28rpx" style="margin-left: 10rpx;"></uv-icon>
          </view>
        </view>
      </view>

      
    </z-paging>
    <view class="btn">
      <uv-button type="primary" text="确定" size="large" style="width: 48%;" @tap="toAddHandDelivery">录 入 配 送 货
        物</uv-button>
      <uv-button type="primary" text="确定" size="large" style="width: 48%;" class="mainBtn" @tap="openMore(selectIndex)">选 择 配 送 货
        物</uv-button>
    </view>

    <uv-modal ref="modalRef" title="单据明细" class="modalInfo" confirmText="确定" showCancelButton @close="closeModal" @confirm="confirmSelected"
      :closeOnClickOverlay="false" asyncClose>
      <view class="box">
        <view v-for="items in detailList" class="item" :style="items.selected ? 'border-color: #2979ff;' : ''" @tap="changeSelected(items)">
          <uv-icon v-show="items.selected" class="selectIcon" color="#2979ff" size="20" name="checkbox-mark"></uv-icon>
          <view><text>订单编号：</text>{{ items.sapNo }}</view>
          <view><text>项目描述：</text>{{ items.xmMs }}</view>
          <view><text>项目号：</text>{{ items.xmNo }}</view>
          <view><text>物料号：</text>{{ items.wlNo }}</view>
          <view><text>物料描述：</text>{{ items.wlMs }}</view>
          <view><text>供应商名称：</text>{{ items.gysMc }}</view>
          <view><text>存放位置：</text>{{ items.pcode || "-" }}</view>
          <view><text>身份码：</text>{{ items.entityId || "-" }}</view>
          <view><text>备注：</text>{{ items.remark || '-' }}</view>
        </view>
      </view>
    </uv-modal>
  </view>
</template>

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


const selectIndex = ref(0)
const changeSelect = (index) => {
  selectIndex.value = index
}

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const pagingRef = ref(null)
const listData = ref([])
// 获取列表
const queryList = (pageNo, pageSize) => {
  queryParams.value.pageNum = pageNo
  console.log(pageNo, pageSize, queryParams.value)
  selectInfo(queryParams.value).then(res => {
    console.log(res.data)
    res.data.forEach(e => {
      e.showMore = false;
      e.recordList.forEach(e => {
        e.totalWeight = e.realQty * e.weightKg
        e.totalVolume = e.realQty * e.volumeM3
        e.rkRecordId = e.id
        e.selected = false
      })
    });
    pagingRef.value.complete(res.data)
  }).catch(res => {
    pagingRef.value.complete(false)
  })
}

// const getDetail = (index) => {
//   return new Promise((resolve, reject) => {
//     if (listData.value[index].detailList.length > 0) {
//       detailList.value = listData.value[index].detailList
//       resolve("完成")
//     } else {
//       selectInfoDetail({ billNoCk: listData.value[index].billNoCk }).then(res => {
//         res.rows.forEach(e => {
//           e.totalWeight = e.realQty * e.weightKg
//           e.totalVolume = e.realQty * e.volumeM3
//         })
//         detailList.value = res.rows
//         listData.value[index].detailList = res.rows
//         resolve()
//       }).catch(res => {
//         reject(res)
//       })
//     }
//   })
// }

// 跳转至录入货物信息页面
const toAddHandDelivery = () => {
  uni.navigateTo({
    url: '/pages/index/addHandDelivery',
  })
}



// 打开弹窗
const detailList = ref([])
const openMore = async (index) => {
  // await getDetail(index)
  console.log(listData.value[index])
  detailList.value = listData.value[index].recordList
  modalRef.value.open()
};

// 弹窗
const modalRef = ref()

const changeSelected = (items) => {
  items.selected = !items.selected
}

const closeModal = () => {
  console.log("关闭")
  listData.value[selectIndex.value].showMore = false
}



const confirmSelected = async () => {
  // await getDetail(selectIndex.value)
  let selectedList = JSON.parse(JSON.stringify(listData.value[selectIndex.value]))
  selectedList.detailList = selectedList.recordList.filter(e => e.selected)
  if (selectedList.detailList.length == 0) {
    uni.showToast({
      title: "请选择货物信息",
      icon: "none"
    })
    modalRef.value.closeLoading()
    return
  }
  uni.navigateTo({
    url: '/pages/index/addDeliveryInfo',
    success: function(res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('acceptData', { data: selectedList })
      modalRef.value.close()
    }
  })
}

onLoad(() => {
})

onShow(() => {
  pagingRef.value?.reload()
})


</script>

<style scoped lang="scss">
.container {
  position: relative;

  .containerBox {
    padding: 32rpx;
    padding-bottom: 120rpx;

    
    
  }
  .btn {
    position: fixed;
    width: calc(100vw - 64rpx);
    bottom: 0;
    left: 32rpx;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
}

.box {

  // background-color: #ebebeb;
  // background-color: #f5f5f5;
  // padding-top: 20rpx;
  .item {
    border: #969696 4rpx solid;
    padding: 20rpx;
    margin-top: 20rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    border-radius: 8rpx;
    color: #333;
    position: relative;

    

    .title {
      font-size: 32rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    text {
      color: #666;
    }

    .more {
      color: #A4A6A7;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.selectIcon {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
}

.modalInfo {
  .box {
    width: 100%;
    max-height: 60vh;
    overflow: auto;
    .item {
      background: #efefef;
      padding: 20rpx;
      margin-top: 20rpx;
      line-height: 50rpx;
      font-size: 28rpx;
      border-radius: 8rpx;
      color: #333;
      border: 2rpx solid #efefef;
      position: relative;
    }
  }
}

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