前端页面

liuying

2024-11-25 84138b3f42b218ecc2efaa54ec31a1c1be29e326

 LA24030_LuLiPackageLine_Web/src/views/main/ReportCenter/storageView/component/ContentView.vue

@@ -1,22 +1,25 @@
<template>
   <div>

      <!-- 库位列表 -->

      <div v-for="(itemW,indexW) in storageList" :key="indexW">
         <p> 巷道：{{itemW.laneCode}}</p>
         <div v-for="(itemIN,indexIN) in itemW.rows" :key="indexIN" >
               <div class="content-view" >
                  <!-- 每个库位方块    查询库位全部库存 -->
                  <div class="mask100" v-for="(itemSmall,itemSmallIndex) in itemIN.rowLocations2" :key="itemSmallIndex">
							
                     <content-item v-for="item in itemSmall" :key="item.wareLocationCode" :itemData="item"
                     :index="item.wareLocationCode" @show="show(item,item.wareLocationCode)"
						
                  <content-item
                     v-for="item in itemSmall"
                     :key="item.wareLocationCode"
                     :itemData="item"
                     :index="item.wareLocationCode"
                     @show="show(item, item.wareLocationCode)"
                     @click="openDialog(item.wareLocationCode)" 

                     :class="'laneCodeBox_' + (item.showInventoryType)">
                     :class="'laneCodeBox_' + item.showInventoryType"
                  >
                     </content-item>

                  </div>
		
               </div>
            <div v-if="itemW.rows.length>1" class="stripe stripeM"></div>
         </div>
@@ -30,13 +33,12 @@
      </teleport>
      <!-- 详情弹框 -->
      <prop-detail ref="propDetailRef"></prop-detail>

   </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { ref, defineProps, computed, getCurrentInstance } from 'vue'
import ContentItem from './ContentItem.vue'
import { ref, defineProps, computed, getCurrentInstance } from 'vue';
import ContentItem from './ContentItem.vue';
import PropDetail from './propDetail.vue';
const { proxy} :any = getCurrentInstance();// 访问实例上下文 proxy同时支持开发 线上环境
//props
@@ -44,18 +46,18 @@
   contentData: {
      type: Array,
      required: true,
      default: []
   }
})
const containerCodeSHsow = ref('')
      default: [],
   },
});
const containerCodeSHsow = ref('');
//库位列表
const storageList: Record<any, any> = computed(() => props.contentData);
//每个库位详情的显示
const itemVisible = ref(false);
//详情数据
const detailData = ref({} as Record<string, any>)
const detailData = ref({} as Record<string, any>);
//当前选中的库位
const count = ref(String)
const count = ref(String);
//显示 隐藏详情
const show = (item: any, index: any) => {
   // console.log('item:'+JSON.stringify(item) )
@@ -69,13 +71,13 @@
      itemVisible.value = false;
      count.value = index;
      detailData.value = {};
      containerCodeSHsow.value  = "";
      containerCodeSHsow.value = '';
   }
}
};

// 显示库位状态
const setKwStauts = (type: number): string => {
   let status = ''
   let status = '';
   switch (type) {
      case 0:
         status = '空库位';
@@ -87,13 +89,14 @@
         status = '有货库位（物料）';
   }
   return status;
}
};

//打开窗口
const openDialog = (type: string) => { //托盘号
const openDialog = (type: string) => {
   //托盘号
   if (!type || type == null) {
      ElMessage.warning("不存在托盘号！");
      return
      ElMessage.warning('不存在托盘号！');
      return;
   }
   proxy.$refs['propDetailRef'].openDialog(type);
};
@@ -135,7 +138,6 @@
         margin: 5px;
      }
   }

}

.stripe {
@@ -150,7 +152,7 @@

/*斑马条纹*/
.stripeM {
   background: linear-gradient(#dbd4b4 50%, #f5be6a 50%, );
   background: linear-gradient(#dbd4b4 50%, #f5be6a 50%);
   background-size: 100% 40px;
}
.laneCodeBox_0{
@@ -159,7 +161,6 @@
.laneCodeBox_1{
   visibility: visible;
}


.mask100{
   height: 100%;
@@ -173,5 +174,4 @@
//    margin-bottom: 149px;

// }

</style>