bug
jiangping
2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae
minipro_standard/components/SelectTraMultipleMaterial.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,259 @@
<template>
   <u-popup :show="show" :round="10" closeable @close="show=false">
      <view class="material-content bbox p30 rp">
         <view class="tc b f24 c2 mb20">选择物料</view>
         <!-- <v-Search ref="V" @searchInput="searchInput" @submit="submit" :isShow="false" placeholder="搜索物料名称/编码">
         </v-Search> -->
         <div class="content_total">共{{pages.total}}条数据</div>
         <view class="scroll-content">
            <scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="refreshing" @scrolltolower="loadMore"
               @refresherrefresh="onRefresh">
               <view v-for="(item1, index) in list" :key="index" class="flex mb20" @click="selectMaterialAction(index)">
                  <view class="img36 mr20 pt10">
                     <u-checkbox-group style="display: block;" name="" @change="selectMaterialAction(index)">
                        <u-checkbox :checked="selectIndex.includes(index)"></u-checkbox>
                     </u-checkbox-group>
                  </view>
                  <view class="fx1">
                     <div class="page_content_title_top">
                        <span>{{ item1.materialName + ' | ' + item1.materialCode }}</span>
                     </div>
                     <div class="page_content_title_bottom">
                        <span class="green" v-if="item1.qualityType == 0">
                           åˆæ ¼
                           <text class="c1" decode>{{ splite }}</text>
                        </span>
                        <span class="orange" v-else-if="item1.qualityType == 1">
                           ä¸è‰¯
                           <text class="c1" decode>{{ splite }}</text>
                        </span>
                        <span class="red" v-else-if="item1.qualityType == 2">
                           æŠ¥åºŸ
                           <text class="c1" decode>{{ splite }}</text>
                        </span>
                        <span v-else>
                           -
                           <text class="c1" decode>{{ splite }}</text>
                        </span>
                        <span>
                           {{item1.procedureName ? item1.procedureName : '-'}}
                           <text class="c1" decode>{{ splite }}</text>
                        </span>
                        <span>{{item1.batch ? item1.batch : '-'}}</span>
                     </div>
                     <div class="mt20 plr25 ptb20 bg_f7 f26">
                        <div class="c2 mb10"><span class="c6">货位:</span>{{ item1.locationName }}</div>
                        <div class="c2"><span class="c6">数量:</span>{{ item1.num }}{{ item1.unitName }}</div>
                     </div>
                  </view>
               </view>
            </scroll-view>
            <!-- <u-list @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
               <u-list-item v-for="(item1, index) in list" :key="index">
               </u-list-item>
            </u-list> -->
         </view>
         <view style="height: 98rpx;"></view>
         <!-- <view class="">
            <u-safe-bottom></u-safe-bottom>
         </view> -->
         <view class="fixedBottom bottom cY">
            <view class="fx1 bbox plr30">
               <u-checkbox-group style="display: block;" name="" @change="selectAll()">
                  <u-checkbox :checked="isAll" label="全选"></u-checkbox>
               </u-checkbox-group>
            </view>
            <view class="submit sbtn_green bbox tc" @click="submitAction">{{ `提交(${selectIndex.length})`}}</view>
         </view>
      </view>
   </u-popup>
</template>
<script>
   // import vSearch from '@/components/Search.vue'
   import {
      choiceStockPageByTransfer
   } from '@/util/api/ExWarehouse'
   export default {
      name: "selectTraMultipleMaterial",
      // components: {
      //    vSearch
      // },
      data() {
         return {
            show: false,
            splite: '&nbsp;|&nbsp;',
            isAll: false,
            refreshing: false,
            pages: {
               capacity: 10,
               page: 1,
               total: 0
            },
            transferId: '',
            warehouseId: '',
            list: [],
            selectIndex: []
         };
      },
      methods: {
         open(target) {
            this.show = true
            this.refreshing = false
            this.isAll = false
            this.transferId = target.transferId
            this.warehouseId = target.warehouseId
            this.list = []
            this.selectIndex = []
            // console.log(this.selectIndex);
            this.pages = {
               capacity: 10,
               page: 1,
               total: 0
            }
            this.loadData()
         },
         loadData() {
            choiceStockPageByTransfer({
               ...this.pages,
               model: {
                  transferId: this.transferId,
                  warehouseId: this.warehouseId
               }
            }).then(res => {
               let {data} = res
               if (data.page == 1) {
                  this.list = [];
               }
               this.pages.page = data.page
               this.pages.total = data.total
               this.list.push(...data.records)
            }).catch((err) => {
            })
            .finally(() => {
               this.refreshing = false;
            })
         },
         loadMore() {
            this.pages.page += 1
            this.loadData()
         },
         onRefresh() {
            if (this.refreshing) return
            this.refreshing = true;
            this.pages.page = 1
            this.loadData()
         },
         selectMaterialAction(index) {
            let i = this.selectIndex.findIndex(item => item==index)
            if (i == -1 ) {
               this.selectIndex.push(index)
            } else {
               this.selectIndex.splice(i)
            }
            if (this.selectIndex.length == this.list.length) {
               this.isAll = true
            } else {
               this.isAll = false
            }
         },
         selectAll() {
            this.selectIndex = []
            this.selectIndex = [...new Array(this.list.length).keys()]
         },
         submitAction () {
            this.show = false
            let selectValue = []
            this.selectIndex.forEach(item => {
               selectValue.push(this.list[item])
            })
            this.$emit('selectes', { materials: selectValue })
         }
      }
   }
   /*
    */
</script>
<style lang="scss" scoped>
   .material-content {
      display: flex;
      flex-direction: column;
      height: 1200rpx;
      box-sizing: border-box;
      .scroll-content {
         height: calc(1100rpx - env(safe-area-inset-bottom));
         overflow: scroll;
      }
   }
   .content_total {
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      // padding: 24rpx 30rpx;
      // background: #F7F7F7;
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
   }
   .page_content_title_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
         &:nth-child(1) {
            font-size: 30rpx;
            font-weight: 500;
            color: #222222;
         }
         &:nth-child(2) {
            flex-shrink: 0;
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
            // span {
            //    font-size: 24rpx;
            //    color: $nav-color;
            // }
         }
      }
   }
   .page_content_title_bottom {
      margin-top: 24rpx;
      span {
         font-size: 24rpx;
         font-weight: 400;
         color: #666666;
      }
   }
   .page_content_title {
      display: flex;
      flex-direction: column;
      margin-bottom: 10rpx;
   }
   .bottom {
      height: 98rpx;
      .submit {
         width: 272rpx;
         height: 98rpx;
         line-height: 98rpx;
      }
   }
</style>