打包详情优化

src/views/ecw/order/components/PackHistoryDetail.vue

@@ -35,7 +35,7 @@
             <el-table-column :label="$t('箱数')" prop="cartonsNum">
                 <template slot-scope="{row}">
                   <span>{{row.cartonsNum}}</span>
-                  <!-- <el-button type="primary" @click="seeBox(row)">({{$t('混箱')}})</el-button> -->
+                  <!-- <el-button v-if="boxData.length>0" type="text" @click="seeBox">({{$t('混箱')}})</el-button> -->
                 </template>
             </el-table-column>
             <el-table-column :label="$t('入仓类型')" prop="cartonsNum">
@@ -88,7 +88,12 @@
           </div>
           <el-table v-if="warehouseItem && warehouseItem.orderWarehouseInBackItemDoList" :data="warehouseItem.orderWarehouseInBackItemDoList">
             <el-table-column type="index" :label="$t('序号')" />
-            <el-table-column :label="$t('箱数')" prop="cartonsNum" />
+            <el-table-column :label="$t('箱数')" prop="cartonsNum">
+            <template slot-scope="{row}">
+                  <span>{{row.cartonsNum}}</span>
+                  <el-button v-if="row.orderWarehouseInDetailsVOList" type="text" @click="seeBox(row.orderWarehouseInDetailsVOList)">({{$t('混箱')}})</el-button>
+                </template>
+            </el-table-column>
             <el-table-column :label="$t('入仓类型')" prop="cartonsNum">
               <template slot-scope="{row}">
                 <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="row.specificationType" />
@@ -146,7 +151,7 @@
       <el-button type="primary" @click="closeDialog">{{$t('关闭窗口')}}</el-button>
 
     </el-dialog>
-    <el-dialog :title="$t('入仓影像')" :visible="mvShow" :before-close="closeMv" :close-on-click-modal="false" width="600px">
+    <el-dialog :title="$t('入仓影像')" :visible.sync="mvShow" :before-close="closeMv" :close-on-click-modal="false" width="600px">
       <div style="display:flex;flex-wrap:wrap">
         <div v-for="(item, index) in pictureUrls" :index="index" :key="index" style="width:80px;height:80px">
             <image v-if="item.type === 'image'" :src="item.url" mode="scaleToFill" style="height: 100%" @tap="previewImage(item.url)" />
@@ -157,6 +162,14 @@
         <span>{{$t('暂无影像')}}</span>
       </div>
     </el-dialog>
+    <el-dialog :title="$t('箱明细')" :visible.sync="boxShow" :before-close="closeBox" :close-on-click-modal="false" width="800px">
+        <WarehouseRecordDetailItem
+            v-for="(item, index) in boxData"
+            :key="index" v-model="boxData[index]"
+            :index="index" :attr-list="attrList"
+            :readonly="true"
+        />
+    </el-dialog>
     </div>
 </template>
 <script>
@@ -165,9 +178,10 @@ import { DICT_TYPE } from '@/utils/dict'
 import { parseTime } from '@/utils/ruoyi'
 import WarehouseAreaSelect from "@/components/WarehouseAreaSelect"
 import {getProductAttrList} from '@/api/ecw/productAttr'
+import WarehouseRecordDetailItem from "@/views/ecw/order/warehousing/components/WarehouseRecordDetailItem.vue";
 export default {
   components: {
-    WarehouseAreaSelect
+    WarehouseAreaSelect,WarehouseRecordDetailItem
   },
     filters: {parseTime},
     props:{
@@ -188,9 +202,14 @@ export default {
               quantityAll:0
             },
             pictureUrls:[],
-            mvShow:false
+            mvShow:false,
+            boxShow:false,
+            // 特性列表
+            attrList: [],
+            boxData: []
         }
     },
+
     computed:{
       info(){
         return this.orderDetail || this.order
@@ -235,6 +254,7 @@ export default {
         }
         this.getOrderWarehouseIn()
         this.productAttrList = (await getProductAttrList()).data
+        this.getAttrList()
     },
     methods:{
       // 获取储位名称
@@ -291,7 +311,21 @@ export default {
         },
         closeMv(){
           this.mvShow = false
-        }
+        },
+        closeBox(){
+          this.boxData = []
+          this.boxShow = false
+        },
+        seeBox(data){
+          this.boxData = data
+          this.boxShow = true
+        },
+        /** 获取产品属性列表 */
+        getAttrList() {
+          getProductAttrList().then(response => {
+            this.attrList = response.data;
+          })
+        },
     }
 }
 </script>