| <template>  | 
|     <u-popup :show="show" :round="10" closeable @close="show=false">  | 
|         <view class="loaction-content bbox p30">  | 
|             <div class="content_list">  | 
|                 <div class="page_content" v-for="(item1, idx) in list" :key="idx" @click="jump(item1)">  | 
|                     <div class="page_content_title">  | 
|                         <div class="page_content_title_top">  | 
|                             <span v-if="item1.batch">{{ item1.materialName + ' | ' + item1.materialCode }}</span>  | 
|                             <span v-else>{{ item1.materialName + ' | ' + item1.materialCode }}</span>  | 
|                             <span>{{item1.outActnum}}{{item1.unitName}}</span>  | 
|                         </div>  | 
|                         <div class="page_content_title_bottom">  | 
|                             <span class="green" v-if="item1.qualityType === 0">合格 <span  | 
|                                     class="black">/</span> </span>  | 
|                             <span class="warning" v-else-if="item1.qualityType === 1">不良 <span  | 
|                                     class="black">/</span> </span>  | 
|                             <span class="error" v-else-if="item1.qualityType === 2">报废 <span  | 
|                                     class="black">/</span> </span>  | 
|                             <span v-else>- / </span>  | 
|                             <span>{{item1.procedureName ? item1.procedureName : '-'}} / </span>  | 
|                             <span>{{item1.batch ? item1.batch : '-'}}</span>  | 
|                         </div>  | 
|                     </div>  | 
|                 </div>  | 
|             </div>  | 
|         </view>  | 
|     </u-popup>  | 
| </template>  | 
|   | 
| <script>  | 
|     export default {  | 
|         name: "materialIn",  | 
|         data() {  | 
|             return {  | 
|                 show: false, | 
|                 list: [],  | 
|             };  | 
|         }, | 
|         methods: { | 
|             open(target) { | 
|                 this.show = true | 
|                 this.list = target.list | 
|             }, | 
|             jump(item) { | 
|                 this.show = false | 
|                 this.$emit('selected', item) | 
|             } | 
|         }  | 
|     }  | 
| </script>  | 
|   | 
| <style lang="scss" scoped>  | 
|     .loaction-content { | 
|           | 
|         height: 1200rpx;  | 
|     }  | 
|   | 
|     .content_list {  | 
|         width: 100%;  | 
|         height: 100%;  | 
|         display: flex;  | 
|         padding: 0 30rpx;  | 
|         box-sizing: border-box;  | 
|         flex-direction: column;  | 
|   | 
|         .page_content {  | 
|             margin-top: 36rpx;  | 
|   | 
|             .page_content_title {  | 
|                 display: flex;  | 
|                 flex-direction: column;  | 
|                 margin-bottom: 10rpx;  | 
|   | 
|                 .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 {  | 
|                     .green {  | 
|                         color: $nav-stateColor7 !important;  | 
|   | 
|                         .black {  | 
|                             color: black !important;  | 
|                         }  | 
|                     }  | 
|   | 
|                     .warning {  | 
|                         color: $nav-stateColor5 !important;  | 
|   | 
|                         .black {  | 
|                             color: black !important;  | 
|                         }  | 
|                     }  | 
|   | 
|                     .error {  | 
|                         color: $nav-stateColor4 !important;  | 
|   | 
|                         .black {  | 
|                             color: black !important;  | 
|                         }  | 
|                     }  | 
|   | 
|                     span {  | 
|                         font-size: 24rpx;  | 
|                         font-weight: 400;  | 
|                         color: #666666;  | 
|                     }  | 
|                 }  | 
|             }  | 
|   | 
|             .lineBorder {  | 
|                 border: none !important;  | 
|                 padding-bottom: 0 !important;  | 
|                 margin-bottom: 24rpx;  | 
|             }  | 
|   | 
|             .page_content_list {  | 
|                 width: 100%;  | 
|                 display: flex;  | 
|                 align-items: center;  | 
|                 flex-wrap: wrap;  | 
|   | 
|                 &:first-child {  | 
|                     margin: 0;  | 
|                 }  | 
|   | 
|                 &:last-child {  | 
|                     border: none;  | 
|                 }  | 
|   | 
|                 .page_content_list_nums {  | 
|                     width: 30%;  | 
|                     display: flex;  | 
|   | 
|                     .page_content_list_num_label {  | 
|                         font-size: 26rpx;  | 
|                         font-weight: 400;  | 
|                         color: #666666;  | 
|                     }  | 
|   | 
|                     .page_content_list_num_nr {  | 
|                         font-size: 26rpx;  | 
|                         font-weight: 400;  | 
|                         color: #222222;  | 
|                     }  | 
|                 }  | 
|   | 
|                 .page_content_list_num {  | 
|                     width: 70%;  | 
|                     display: flex;  | 
|   | 
|                     .page_content_list_num_label {  | 
|                         font-size: 26rpx;  | 
|                         font-weight: 400;  | 
|                         color: #666666;  | 
|                     }  | 
|   | 
|                     .page_content_list_num_nr {  | 
|                         font-size: 26rpx;  | 
|                         font-weight: 400;  | 
|                         color: #222222;  | 
|                     }  | 
|                 }  | 
|   | 
|                 .page_content_list_items {  | 
|                     width: 30%;  | 
|                     display: flex;  | 
|                     margin-top: 24rpx;  | 
|   | 
|                     .page_content_list_item_label {  | 
|                         font-size: 26rpx;  | 
|                         font-weight: 400;  | 
|                         color: #666666;  | 
|                         flex-shrink: 0;  | 
|                     }  | 
|   | 
|                     .page_content_list_item_nr {  | 
|                         font-size: 26rpx;  | 
|                         font-weight: 400;  | 
|                         color: #222222;  | 
|                     }  | 
|                 }  | 
|   | 
|                 .page_content_list_item {  | 
|                     width: 70%;  | 
|                     display: flex;  | 
|   | 
|                     .page_content_list_item_label {  | 
|                         font-size: 26rpx;  | 
|                         font-weight: 400;  | 
|                         color: #666666;  | 
|                         flex-shrink: 0;  | 
|                     }  | 
|   | 
|                     .page_content_list_item_nr {  | 
|                         font-size: 26rpx;  | 
|                         font-weight: 400;  | 
|                         color: #222222;  | 
|                     }  | 
|                 }  | 
|             }  | 
|         }  | 
|     }  | 
| </style> |