<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: ' | ',  
 | 
                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> 
 |