|  |  | 
 |  |  | <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="搜索物料名称/编码">
 | 
 |  |  |          <view class="tc b f30 c2 mb20">选择物料a1</view>
 | 
 |  |  |          <v-Search ref="V" @searchInput="searchInput" @submit="search" :isShow="false" placeholder="搜索物料名称/编码">
 | 
 |  |  |          </v-Search>
 | 
 |  |  |          <div class="content_total">共{{pages.total}}条数据</div>
 | 
 |  |  |          <view class="scroll-content"> | 
 |  |  |             <u-list @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower"> | 
 |  |  |                <u-list-item v-for="(item1, index) in list" :key="index"> | 
 |  |  |                   <view class="flex mb20" @click="selectMaterialAction(index)"> | 
 |  |  |                      <view class="img36 mr20 pt10"> | 
 |  |  |                         <u-checkbox-group style="display: block;" name="" @change="selectMaterialAction(index)"> | 
 |  |  |                            <u-checkbox :checked="item1.isActive"></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> | 
 |  |  |             <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> | 
 |  |  |                </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">提交()</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>
 | 
 |  |  | 
 |  |  | 
 | 
 |  |  | <script>
 | 
 |  |  |    import vSearch from '@/components/Search.vue'
 | 
 |  |  |    import {
 | 
 |  |  |       choiceStockListPage,
 | 
 |  |  |       choiceStockPageForStandard
 | 
 |  |  |    } from '@/util/api/agencyAPI'
 | 
 |  |  |    export default {
 | 
 |  |  |       name: "selectMaterial",
 | 
 |  |  |       components: {
 | 
 |  |  | 
 |  |  |       },
 | 
 |  |  |       data() {
 | 
 |  |  |          return {
 | 
 |  |  |             show: false, | 
 |  |  |             splite:' | ', | 
 |  |  |             show: false,
 | 
 |  |  |             splite: ' | ',
 | 
 |  |  |             isAll: false, | 
 |  |  |             refreshing: false, | 
 |  |  |             mixName: '',
 | 
 |  |  |             pages: {
 | 
 |  |  |                size: 10,
 | 
 |  |  |                index: 1,
 | 
 |  |  |                capacity: 10,
 | 
 |  |  |                page: 1,
 | 
 |  |  |                total: 0
 | 
 |  |  |             },
 | 
 |  |  |             list: []
 | 
 |  |  |             list: [], | 
 |  |  |             selectIndex: []
 | 
 |  |  |          };
 | 
 |  |  |       },
 | 
 |  |  |       methods: {
 | 
 |  |  |          open(target) {
 | 
 |  |  |             this.show = true
 | 
 |  |  |             this.workorderId = target.workorderId
 | 
 |  |  |             this.show = true | 
 |  |  |             this.refreshing = false
 | 
 |  |  |             this.warehouseId = target.warehouseId
 | 
 |  |  |             this.deviceId = target.deviceId
 | 
 |  |  |             this.list = []
 | 
 |  |  |             this.list = [] | 
 |  |  |             this.selectIndex = [] | 
 |  |  | 				 | 
 |  |  |             // console.log(this.selectIndex);
 | 
 |  |  |             this.pages = {
 | 
 |  |  |                size: 10,
 | 
 |  |  |                index: 1,
 | 
 |  |  |                capacity: 10,
 | 
 |  |  |                page: 1,
 | 
 |  |  |                total: 0
 | 
 |  |  |             }
 | 
 |  |  |             this.loadData()
 | 
 |  |  |          }, | 
 |  |  |          // 搜索框 | 
 |  |  |          searchInput(data) { | 
 |  |  |             this.form.page = 0 | 
 |  |  |             this.finished = false | 
 |  |  |             this.list = [] | 
 |  |  |             this.mixName = data | 
 |  |  |             this.loadData() | 
 |  |  |          },
 | 
 |  |  |          loadData() {
 | 
 |  |  |             this.list = [{
 | 
 |  |  |                batch: '1',
 | 
 |  |  |                materialName: 'dsadas',
 | 
 |  |  |                materialCode: '1m0001',
 | 
 |  |  |                locationName: 'a仓2号位',
 | 
 |  |  |                num: '1',
 | 
 |  |  |                unitName: '块',
 | 
 |  |  |                qualityType: 0,
 | 
 |  |  |                procedureName: '压制', | 
 |  |  |                isActive: false
 | 
 |  |  |             }, | 
 |  |  |             { | 
 |  |  |                batch: '1', | 
 |  |  |                materialName: 'dsadas', | 
 |  |  |                materialCode: '1m0001', | 
 |  |  |                locationName: 'a仓2号位', | 
 |  |  |                num: '1', | 
 |  |  |                unitName: '块', | 
 |  |  |                qualityType: 0, | 
 |  |  |                procedureName: '压制', | 
 |  |  |                isActive: false | 
 |  |  |             }, | 
 |  |  |             { | 
 |  |  |                batch: '1', | 
 |  |  |                materialName: 'dsadas', | 
 |  |  |                materialCode: '1m0001', | 
 |  |  |                locationName: 'a仓2号位', | 
 |  |  |                num: '1', | 
 |  |  |                unitName: '块', | 
 |  |  |                qualityType: 0, | 
 |  |  |                procedureName: '压制', | 
 |  |  |                isActive: false | 
 |  |  |             }, | 
 |  |  |             { | 
 |  |  |                batch: '1', | 
 |  |  |                materialName: 'dsadas', | 
 |  |  |                materialCode: '1m0001', | 
 |  |  |                locationName: 'a仓2号位', | 
 |  |  |                num: '1', | 
 |  |  |                unitName: '块', | 
 |  |  |                qualityType: 0, | 
 |  |  |                procedureName: '压制', | 
 |  |  |                isActive: false | 
 |  |  |             }, | 
 |  |  |             { | 
 |  |  |                batch: '1', | 
 |  |  |                materialName: 'dsadas', | 
 |  |  |                materialCode: '1m0001', | 
 |  |  |                locationName: 'a仓2号位', | 
 |  |  |                num: '1', | 
 |  |  |                unitName: '块', | 
 |  |  |                qualityType: 0, | 
 |  |  |                procedureName: '压制', | 
 |  |  |                isActive: false | 
 |  |  |             }, | 
 |  |  |             { | 
 |  |  |                batch: '1', | 
 |  |  |                materialName: 'dsadas', | 
 |  |  |                materialCode: '1m0001', | 
 |  |  |                locationName: 'a仓2号位', | 
 |  |  |                num: '1', | 
 |  |  |                unitName: '块', | 
 |  |  |                qualityType: 0, | 
 |  |  |                procedureName: '压制', | 
 |  |  |                isActive: false | 
 |  |  |             }, | 
 |  |  |             { | 
 |  |  |                batch: '1', | 
 |  |  |                materialName: 'dsadas', | 
 |  |  |                materialCode: '1m0001', | 
 |  |  |                locationName: 'a仓2号位', | 
 |  |  |                num: '1', | 
 |  |  |                unitName: '块', | 
 |  |  |                qualityType: 0, | 
 |  |  |                procedureName: '压制', | 
 |  |  |                isActive: false | 
 |  |  |             } | 
 |  |  |             ]
 | 
 |  |  |             choiceStockPageForStandard({
 | 
 |  |  |                ...this.pages,
 | 
 |  |  |                model: {
 | 
 |  |  |                   workorderId: this.workorderId,
 | 
 |  |  |                   deviceId: this.deviceId, | 
 |  |  |                   materialName: this.mixName
 | 
 |  |  |                }
 | 
 |  |  |             }).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; | 
 |  |  |             })
 | 
 |  |  |          },
 | 
 |  |  |          scrolltoupper() {
 | 
 |  |  |          loadMore() { | 
 |  |  |             this.pages.page += 1
 | 
 |  |  |             this.loadData()
 | 
 |  |  |          },
 | 
 |  |  |          scrolltolower() {
 | 
 |  |  |          onRefresh() { | 
 |  |  |             if (this.refreshing) return | 
 |  |  |             this.refreshing = true; | 
 |  |  |             this.pages.page = 1
 | 
 |  |  |             this.loadData()
 | 
 |  |  |          }, | 
 |  |  |          search() { | 
 |  |  |             this.pages.page = 1 | 
 |  |  |             this.loadData() | 
 |  |  |          },
 | 
 |  |  |          selectMaterialAction(index) { | 
 |  |  |             // console.log('12'); | 
 |  |  |             this.list[index].isActive = !this.list[index].isActive
 | 
 |  |  |             let i = this.selectIndex.findIndex(item => item==index) | 
 |  |  |             if (i == -1 ) { | 
 |  |  |                this.selectIndex.push(index) | 
 |  |  |             } else { | 
 |  |  |                this.selectIndex.splice(i) | 
 |  |  |             }
 | 
 |  |  |          },
 | 
 |  |  |          selectAll() { | 
 |  |  |             this.selectIndex = [] | 
 |  |  |             this.selectIndex = [...new Array(this.list.length).keys()] | 
 |  |  |          }, | 
 |  |  |          selectAll() {}
 | 
 |  |  |          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; | 
 |  |  |    .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; | 
 |  |  |    .content_total {
 | 
 |  |  |       margin-top: 20rpx;
 | 
 |  |  |       margin-bottom: 20rpx;
 | 
 |  |  |       // padding: 24rpx 30rpx;
 | 
 |  |  |       // background: #F7F7F7;
 | 
 |  |  | 
 |  |  |       display: flex;
 | 
 |  |  |       flex-direction: column;
 | 
 |  |  |       margin-bottom: 10rpx;
 | 
 |  |  | 		 | 
 |  |  | 
 | 
 |  |  | 
 | 
 |  |  | 
 | 
 |  |  |    } | 
 |  |  |    .bottom { | 
 |  |  |       height: 98rpx; | 
 |  |  |       .submit { | 
 |  |  |          width: 272rpx; | 
 |  |  |          height: 98rpx; | 
 |  |  |          line-height: 98rpx; | 
 |  |  |       } | 
 |  |  | 
 | 
 |  |  |    }
 | 
 |  |  | 
 | 
 |  |  |    .bottom {
 | 
 |  |  |       height: 98rpx;
 | 
 |  |  | 
 | 
 |  |  |       .submit {
 | 
 |  |  |          width: 272rpx;
 | 
 |  |  |          height: 98rpx;
 | 
 |  |  |          line-height: 98rpx;
 | 
 |  |  |       }
 | 
 |  |  |    }
 | 
 |  |  | </style> |