<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> 
 |