Smart_Canteen_Handheld_Device-JYY/pages/enterAndExit/exit/selectDocument.vue

<template>
  <view class="content"><!-- @touchmove="touchmoveMethod" -->
    <Navbar title="选择领料单" :showRightText="false" :isBack="false" />
    <view style="width: 100%;height: 100%;">
      <view class="search-form">
        <uni-easyinput class="searchInput" placeholder="输入领料单编号/名称" v-model="searchValue" suffixIcon="search"
                       @iconClick="search"
                       @keyup.enter.native="search"></uni-easyinput>
      </view>
      <scroll-view class="chronic-science" scroll-y="true" @scrolltolower="onScrollTolower">
        <view class="scroll-view-item" v-for="(item,index) in tableList" :key="index">
          <view class="scroll-view-item_content">
            <view
              style="width: 100%;height: 90%;display: flex;flex-direction: column;justify-content: space-between;padding: 15px;">
              <view
                style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 30px;display: flex;align-items: center;font-size:32rpx;font-weight: 600;color: #FF6816">
                <checkbox-group style="width: 30px;height: 30px" @change="checkClick(item)">
                  <checkbox :checked="item.checked" />
                </checkbox-group>
                <view style="width:90%;margin-left: 10px;">
                  <text>{{ item.fetchMaterialCode }}</text>
                </view>
              </view>
              <view style="width: 100%;display:flex;height: 30px">
                <view style="width: 50%;display: flex;align-items: center">
                  <view class="scroll_title">领料单数量：</view>
                  <view class="scroll_content">{{ item.totalNum }}</view>
                </view>
                <view style="width: 50%;display: flex;align-items: center">
                  <view class="scroll_title">已领取数量：</view>
                  <view class="scroll_content">{{ item.outNum }}</view>
                </view>
              </view>

            </view>
          </view>
        </view>
      </scroll-view>
      <u-button
        style="width:180rpx;height:70rpx;position: fixed;bottom: 20rpx;right: 10px;background: linear-gradient( 270deg, #FFB679 0%, #EF882E 100%);border: 0"
        type="primary"
        @click="navigateTo('/pages/enterAndExit/exit/add')">确认
      </u-button>
    </view>
  </view>
</template>

<script>

import UButton from '@/uni_modules/uview-ui/components/u-button/u-button.vue'
import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import { getMaterialRequisitionForm, getMaterialRequisitionFormDetail } from '@/api/enterExit'

export default {
  components: { UniEasyinput, UButton },
  data() {
    return {
      tableList: [],
      searchValue: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      status: 'loadmore',
      form: '',
      selectList: []
    }
  },
  onLoad(options) {
    console.log('options:', options)
    this.form = options.form ? JSON.parse(decodeURIComponent(options.form)) : this.form
    console.log('form:', this.form)
    this.getList()
  },
  onShow() {
  },
  methods: {
    search() {
      console.log('Searching for:', this.searchValue)
      this.pageNum = 1
      this.getList()
    },
    // 翻页
    onScrollTolower() {
      console.log(this.tableList.length)
      if (this.total > this.tableList.length) {
        this.pageNum++
        this.getList()
      }
    },
    //获取订单列表
    async getList() {
      console.log('获取列表')
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        materialName: this.searchValue,
        areaId: this.form.areaId,
        warehouseId: this.form.warehouseId,
      }
      var param = ""
      if (this.form.areaId){
        param = "&areaId=" + this.form.areaId + "&warehouseId=" + this.form.warehouseId
      }
      try {
        const res = await getMaterialRequisitionForm(params,param)
        console.log('?? ~ getList ~ res:', res)
        this.total = Number(res.total)
        if (this.pageNum == 1) {
          this.tableList = res.rows
        } else {
          this.tableList.push(...res.rows)
        }
        this.tableList.map(item => {
          item.checked = false
        })
        this.selectList.forEach(selectItem => {
          this.tableList.map(item => {
            if (item.fetchMaterialCode === selectItem.fetchMaterialCode) {
              item.checked = true
            }
          })
        })
        this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
      } catch (error) {
        console.log(error)
      }
    },
    // 单个商品的选择
    checkClick(item) {
      this.tableList.map(item => {
        item.checked = false
      })
      item.checked = !item.checked
      this.selectList[0] = item
      this.$forceUpdate() // 强制刷新页面
    },
    async navigateTo(url) {
      //调用详情接口
      const res = await getMaterialRequisitionFormDetail(this.selectList[0].fetchMaterialId)
      const orderGoodsDetailList = res.rows
      orderGoodsDetailList.forEach(item => {
        item.materialNum = item.fetchNum
        this.form.remark = this.form.remark || ''
      })
      url += '?selectList=' + encodeURIComponent(JSON.stringify(orderGoodsDetailList)) + '&form=' + JSON.stringify(this.form)
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style scoped lang="scss">
.uni-page-body {
  height: 100%;
  width: 100%;
}

.search-form {
  display: flex;
  width: 98%;
  margin-top: 10px;

  .searchInput {
    width: 300px;
    height: 40px;
    margin-left: 10px;
    font-size: 28rpx;
    font-family: PingFang SC-Regular;
  }

  .searchBtn {
    margin-left: 10px;
    height: 35px;
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.list_title {
  color: black;
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: PingFang SC-Medium;
  font-weight: 500;
  color: #A69F9A;
}

.list_item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: PingFang SC-Regular;
  color: #453C37;
  font-size: 28rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}


::v-deep .u-checkbox {
  margin-bottom: 16rpx;
}


/deep/ uni-checkbox .uni-checkbox-input {
  width: 25px;
  height: 25px;
  border-radius: 15px;
}

/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  border-color: #ddd;
  color: #fff !important;
  background-color: #3E34FF !important;
}

/deep/ uni-checkbox .uni-checkbox-input {
  border-color: #ddd;
}

/deep/ uni-checkbox .uni-checkbox-input:hover {
  border-color: #ddd;
}

.chronic-science {
  width: 100%;
  height: 83vh;

  .scroll-view-item {
    width: 96%;
    margin: 10px auto;
    background: #fff;
    border-radius: 23rpx;

    .scroll-view-item_content {
      width: 100%;
      display: flex;
      align-items: center;
      height: fit-content;
      justify-content: space-between;
      border: 0.1rpx solid #ececec;
      border-radius: 23rpx;
      box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(87, 87, 87, 0.14);

      .scroll_title {
        width: 50%;
        font-size: 28rpx;
        color: #0F274B;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFang SC-Medium;
      }

      .scroll_content {
        width: 50%;
        font-size: 28rpx;
        color: #86817B;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFang SC-Regular;
      }
    }

  }
}
</style>