liuleilei
2023-09-11 faf1d3cc35a3a5f83558946c8056537a4d77fa1f
minipro_standard/components/materialIn.vue
对比新文件
@@ -0,0 +1,226 @@
<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">鍚堟牸&nbsp;<span
                           class="black">/</span>&nbsp;</span>
                     <span class="warning" v-else-if="item1.qualityType === 1">涓嶈壇&nbsp;<span
                           class="black">/</span>&nbsp;</span>
                     <span class="error" v-else-if="item1.qualityType === 2">鎶ュ簾&nbsp;<span
                           class="black">/</span>&nbsp;</span>
                     <span v-else>-&nbsp;/&nbsp;</span>
                     <span>{{item1.procedureName ? item1.procedureName : '-'}}&nbsp;/&nbsp;</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>