@logwire/logwire-wms-pda-ui 1.2.0 → 3.1.1

package/src/components/page/inbound/components/QualityCard.vue

@@ -1,154 +1,578 @@
 <template>
-  <div v-if="data">
-    <!-- 顶栏 -->
-    <div class="lw-global-props">
-      <div>
-        <div>{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.xxllqyjv', '品检卡')}}</div>
-        <div>{{data.code}}</div>
-        <div>
-          <van-icon v-if="shrinkable" class="btn-shrink" :class="{inverted: isShrink}" name="arrow-up" @click.stop="isShrink = !isShrink"/>
-        </div>
-      </div>
+  <div v-if="data || delayLoad" :class="{'card-style':cardMode,'lw-global-model-box':cardMode}">
+
+    <div class="lw-global-flex-between" @click.stop="showCard">
+      <lw-title-value-cell
+        :title="$lwLanguage.get('wms_project.pda.components.page.inbound.components.xxllqyjv', '品检卡')"
+        :value="data && data.qualityCard? data.qualityCard.code : ''"
+        :is-row="false"
+        val-bold
+      />
+
+      <van-icon class="btn-shrink" name="arrow"/>
     </div>
-    <!-- 内容 -->
-    <div :class="{'content-shrink': isShrink}">
-      <div class="lw-global-sh"></div>
-      <div class="lw-global-props">
-        <div>
-          <div>{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.qotvwjpo', '供应商')}}</div>
-          <div>{{data.supplierName}}</div>
-        </div>
-      </div>
-      <div style="padding: 10px 0;">
-        <lw-tag plain>{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.tanolvkk', '大件')}}</lw-tag>
-        <lw-tag plain>{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.isymspwi', '大件')}}</lw-tag>
-        <lw-tag plain>{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.beprqbtf', '大件')}}</lw-tag>
-        <lw-tag plain>{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.vajvqnye', '大件')}}</lw-tag>
-        <lw-tag plain>{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.comcxtts', '大件')}}</lw-tag>
-      </div>
-      <div class="quality-des">
-        <div>
-          <div class="quality-des-title">{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.tehlnqsx', '正面')}}</div>
-          <div class="quality-des-content img">
-            <lw-img-look v-if="data.frontImage" :img-list="[data.frontImage]" justify-content="center"/>
-          </div>
-        </div>
-        <div>
-          <div class="quality-des-title">{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.tnaypwve', '背面')}}</div>
-          <div class="quality-des-content img">
-            <lw-img-look v-if="data.backImage" :img-list="[data.backImage]" justify-content="center"/>
-          </div>
-        </div>
-        <div>
-          <div class="quality-des-title">{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.gksfdkpd', '识别要点')}}</div>
-          <div class="quality-des-content">{{data.frontDescribe}}</div>
-        </div>
-        <div>
-          <div class="quality-des-title">{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.wcwqxdpn', '识别要点')}}</div>
-          <div class="quality-des-content">{{data.backDescribe}}</div>
-        </div>
-        <div>
-          <div class="quality-des-title">{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.auqnytlb', '特殊')}}</div>
-          <div class="quality-des-content img">
-            <lw-img-look v-if="data.markingImage" :img-list="[data.markingImage]" justify-content="center"/>
+
+    <lw-popup
+      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.components.xxllqyjv', '品检卡')"
+      class="abnormal-popup-bg"
+      position="center"
+      @clickCloseBtn="hideCard"
+      v-model="showDialog">
+
+      <div>
+        <lw-title-value-cell
+          :title="$lwLanguage.get('wms_project.pda.components.page.inbound.components.xxllqyjv', '品检卡')"
+          :value="data && data.qualityCard? data.qualityCard.code : ''"
+          :is-row="false"
+          val-bold
+        />
+
+        <div v-if="data" class="lw-global-row-end">
+          <lw-title-value-cell
+            :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.code', '商品编码')"
+            :value="data.sku.code"
+            :is-row="false"
+            val-bold
+          />
+
+          <lw-title-value-cell
+            :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.name', '商品名称')"
+            :value="data.sku.name"
+            :is-row="false"
+            val-bold
+          />
+
+          <lw-tag
+            style="margin-top: 10px;"
+            v-for="ini in data.sku.tags"
+            :key="ini"
+            plain
+            color="red">
+            {{ ini }}
+          </lw-tag>
+
+          <div class="quality-des" style="margin-top: 10px;grid-template-columns: 1fr;" v-if="data.sku.image">
+            <div class="quality-des-title">
+              {{ $lwLanguage.get('wms_project.pda.components.page.inbound.sku.image', '裸件图片') }}
+            </div>
+            <div class="quality-des-content img">
+              <lw-img-look :img-list="[data.sku.image]" justify-content="left"/>
+            </div>
           </div>
+
+          <van-collapse v-model="activePack">
+
+            <van-collapse-item>
+              <template #title>
+
+                <div class="lw-global-flex-between">
+                  <lw-title-value-cell
+                    :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.type.receive', '到货包装')"
+                    :value="data.receivePack.code"
+                    :is-row="false"
+                    val-bold
+                  />
+                  <lw-title-value-cell
+                    :title="getPackNum(data.receivePack)"
+                    :is-row="false"
+                    val-bold
+                  />
+                </div>
+              </template>
+
+              <div>
+                <div class="lw-global-flex-between">
+                  <lw-title-value-cell
+                    :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.type', '类型')"
+                    :value="data.receivePack.model1Label"
+                    :is-row="false"
+                    val-bold
+                  />
+
+                  <lw-title-value-cell
+                    :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.default', '默认包装')"
+                    :value="data.receivePack.defaultPack ? '是' : '否'"
+                    :is-row="false"
+                    val-bold
+                  />
+                  <!--                  <van-switch :v-model="true" @input="true" size="20px" active-color="@tabsActiveBgColor" inactive-color="#dcdee0"/>-->
+
+                </div>
+
+                <div v-if="data.receivePack.eachCode" class="lw-global-row">
+                  <div class="lw-global-flex-between">
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.ea', data.receivePack.eachCode)"
+                      :value="getPackUomNum(data.receivePack.eachQty, data.receivePack.eachName)"
+                      :is-row="false"
+                      val-bold
+                    />
+
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.volume', '长*宽*高')"
+                      :value="getPackUomVolume(data.receivePack.eachLength, data.receivePack.eachWidth, data.receivePack.eachHeight)"
+                      :is-row="false"
+                      val-bold
+                    />
+                  </div>
+                </div>
+
+                <div v-if="data.receivePack.innerCode && data.receivePack.innerQty" class="lw-global-row">
+                  <div class="lw-global-flex-between">
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.inner', data.receivePack.innerCode)"
+                      :value="getPackUomNum(data.receivePack.innerQty, data.receivePack.innerName)"
+                      :is-row="false"
+                      val-bold
+                    />
+
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.volume', '长*宽*高')"
+                      :value="getPackUomVolume(data.receivePack.innerLength, data.receivePack.innerWidth, data.receivePack.innerHeight)"
+                      :is-row="false"
+                      val-bold
+                    />
+                  </div>
+
+                  <div class="quality-des-content img" v-if="data.receivePack.innerImage && data.receivePack.innerImage.length>0">
+                    <lw-img-look :img-list="[data.receivePack.innerImage]" justify-content="left"/>
+                  </div>
+                </div>
+
+                <div v-if="data.receivePack.caseCode && data.receivePack.caseQty" class="lw-global-row">
+                  <div class="lw-global-flex-between">
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.case', data.receivePack.caseCode)"
+                      :value="getPackUomNum(data.receivePack.caseQty, data.receivePack.caseName)"
+                      :is-row="false"
+                      val-bold
+                    />
+
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.volume', '长*宽*高')"
+                      :value="getPackUomVolume(data.receivePack.caseLength, data.receivePack.caseWidth, data.receivePack.caseHeight)"
+                      :is-row="false"
+                      val-bold
+                    />
+                  </div>
+
+                  <div class="quality-des-content img" v-if="data.receivePack.caseImage && data.receivePack.caseImage.length>0">
+                    <lw-img-look :img-list="[data.receivePack.caseImage]" justify-content="left"/>
+                  </div>
+                </div>
+
+                <div v-if="data.receivePack.palletCode && data.receivePack.palletQty" class="lw-global-row-end">
+                  <div class="lw-global-flex-between">
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.pallet', data.receivePack.palletCode)"
+                      :value="getPackUomNum(data.receivePack.palletQty, data.receivePack.palletName)"
+                      :is-row="false"
+                      val-bold
+                    />
+
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.volume', '长*宽*高')"
+                      :value="getPackUomVolume(data.receivePack.palletLength, data.receivePack.palletWidth, data.receivePack.palletHeight)"
+                      :is-row="false"
+                      val-bold
+                    />
+                  </div>
+
+                  <div class="quality-des-content img" v-if="data.receivePack.palletImage && data.receivePack.palletImage.length>0">
+                    <lw-img-look :img-list="[data.receivePack.palletImage]" justify-content="left"/>
+                  </div>
+                </div>
+
+              </div>
+
+            </van-collapse-item>
+
+            <van-collapse-item v-if="data.stdPack">
+              <template #title>
+                <div class="lw-global-flex-between">
+
+                  <lw-title-value-cell
+                    :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.type.std', '标准包装')"
+                    :value="data.stdPack.code"
+                    :is-row="false"
+                    val-bold
+                  />
+
+                  <lw-title-value-cell
+                    :title="getPackNum(data.stdPack)"
+                    :is-row="false"
+                    val-bold
+                  />
+
+                </div>
+              </template>
+
+              <div>
+                <div class="lw-global-flex-between">
+                  <lw-title-value-cell
+                    :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.type', '类型')"
+                    :value="data.stdPack.model1Label"
+                    :is-row="false"
+                    val-bold
+                  />
+
+                  <lw-title-value-cell
+                    :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.default', '默认包装')"
+                    :value="data.stdPack.defaultPack ? '是' : '否'"
+                    :is-row="false"
+                    val-bold
+                  />
+                  <!--                  <van-switch :v-model="true" @input="true" size="20px" active-color="@tabsActiveBgColor" inactive-color="#dcdee0"/>-->
+
+                </div>
+
+                <div v-if="data.stdPack.eachCode" class="lw-global-row">
+                  <div class="lw-global-flex-between">
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.ea', data.stdPack.eachCode)"
+                      :value="getPackUomNum(data.stdPack.eachQty, data.stdPack.eachName)"
+                      :is-row="false"
+                      val-bold
+                    />
+
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.volume', '长*宽*高')"
+                      :value="getPackUomVolume(data.stdPack.eachLength, data.stdPack.eachWidth, data.stdPack.eachHeight)"
+                      :is-row="false"
+                      val-bold
+                    />
+                  </div>
+                </div>
+
+                <div v-if="data.stdPack.innerCode && data.stdPack.innerQty" class="lw-global-row">
+                  <div class="lw-global-flex-between">
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.inner', data.stdPack.innerCode)"
+                      :value="getPackUomNum(data.stdPack.innerQty, data.stdPack.innerName)"
+                      :is-row="false"
+                      val-bold
+                    />
+
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.volume', '长*宽*高')"
+                      :value="getPackUomVolume(data.stdPack.innerLength, data.stdPack.innerWidth, data.stdPack.innerHeight)"
+                      :is-row="false"
+                      val-bold
+                    />
+                  </div>
+
+                  <div class="quality-des-content img" v-if="data.stdPack.innerImage && data.stdPack.innerImage.length>0">
+                    <lw-img-look :img-list="[data.stdPack.innerImage]" justify-content="left"/>
+                  </div>
+                </div>
+
+                <div v-if="data.stdPack.caseCode && data.stdPack.caseQty" class="lw-global-row">
+                  <div class="lw-global-flex-between">
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.case', data.stdPack.caseCode)"
+                      :value="getPackUomNum(data.stdPack.caseQty, data.stdPack.caseName)"
+                      :is-row="false"
+                      val-bold
+                    />
+
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.volume', '长*宽*高')"
+                      :value="getPackUomVolume(data.stdPack.caseLength, data.stdPack.caseWidth, data.stdPack.caseHeight)"
+                      :is-row="false"
+                      val-bold
+                    />
+                  </div>
+
+                  <div class="quality-des-content img" v-if="data.stdPack.caseImage && data.stdPack.caseImage.length>0">
+                    <lw-img-look :img-list="[data.stdPack.caseImage]" justify-content="left"/>
+                  </div>
+                </div>
+
+                <div v-if="data.stdPack.palletCode && data.stdPack.palletQty" class="lw-global-row-end">
+                  <div class="lw-global-flex-between">
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.pallet', data.stdPack.palletCode)"
+                      :value="getPackUomNum(data.stdPack.palletQty, data.stdPack.palletName)"
+                      :is-row="false"
+                      val-bold
+                    />
+
+                    <lw-title-value-cell
+                      :title="$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.volume', '长*宽*高')"
+                      :value="getPackUomVolume(data.stdPack.palletLength, data.stdPack.palletWidth, data.stdPack.palletHeight)"
+                      :is-row="false"
+                      val-bold
+                    />
+                  </div>
+
+                  <div class="quality-des-content img" v-if="data.stdPack.palletImage && data.stdPack.palletImage.length>0">
+                    <lw-img-look :img-list="[data.stdPack.palletImage]" justify-content="left"/>
+                  </div>
+                </div>
+
+              </div>
+            </van-collapse-item>
+
+          </van-collapse>
+
         </div>
-        <div>
-          <div class="quality-des-title">{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.towwbait', '过往破损部位')}}</div>
-          <div class="quality-des-content img">
-            <lw-img-look v-if="data.beforeDamagedImage" :img-list="[data.beforeDamagedImage]" justify-content="center"/>
+
+        <div class="lw-global-row-end" v-if="data && data.qualityCard">
+
+          <lw-title-value-cell
+            :title="$lwLanguage.get('wms_project.pda.components.page.inbound.components.xxllqyjv', '品检卡')"
+            :value="data.qualityCard.code"
+            :is-row="false"
+            val-bold
+          />
+
+          <lw-title-value-cell
+            v-if="data.qualityCard.supplierName"
+            :title="$lwLanguage.get('wms_project.pda.components.page.inbound.components.qotvwjpo', '供应商')"
+            :value="data.qualityCard.supplierName"
+            :is-row="false"
+            val-bold
+          />
+
+          <div class="quality-des" style="margin-top: 10px;">
+            <div>
+              <div class="quality-des-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.components.tehlnqsx', '正面') }}
+              </div>
+              <div class="quality-des-content img">
+                <lw-img-look v-if="data.qualityCard.frontImage" :img-list="[data.qualityCard.frontImage]" justify-content="center"/>
+              </div>
+            </div>
+            <div>
+              <div class="quality-des-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.components.tnaypwve', '背面') }}
+              </div>
+              <div class="quality-des-content img">
+                <lw-img-look v-if="data.qualityCard.backImage" :img-list="[data.qualityCard.backImage]" justify-content="center"/>
+              </div>
+            </div>
+
+            <div>
+              <div class="quality-des-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.components.gksfdkpd', '识别要点') }}
+              </div>
+              <div class="quality-des-content">{{ data.qualityCard.frontDescribe }}</div>
+            </div>
+
+            <div>
+              <div class="quality-des-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.components.wcwqxdpn', '识别要点') }}
+              </div>
+              <div class="quality-des-content">{{ data.qualityCard.backDescribe }}</div>
+            </div>
+
+            <div>
+              <div class="quality-des-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.components.auqnytlb', '特殊') }}
+              </div>
+              <div class="quality-des-content img">
+                <lw-img-look v-if="data.qualityCard.markingImage" :img-list="[data.qualityCard.markingImage]" justify-content="center"/>
+              </div>
+            </div>
+
+            <div>
+              <div class="quality-des-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.components.towwbait', '过往破损部位') }}
+              </div>
+              <div class="quality-des-content img">
+                <lw-img-look v-if="data.qualityCard.beforeDamagedImage" :img-list="[data.qualityCard.beforeDamagedImage]"
+                             justify-content="center"/>
+              </div>
+            </div>
+
+            <div>
+              <div class="quality-des-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.components.xpknuype', '识别要点') }}
+              </div>
+              <div class="quality-des-content">{{ data.qualityCard.markingDescribe }}</div>
+            </div>
+
+            <div>
+              <div class="quality-des-title">
+                {{ $lwLanguage.get('wms_project.pda.components.page.inbound.components.yzezxfep', '识别要点') }}
+              </div>
+              <div class="quality-des-content">{{ data.qualityCard.beforeDamagedDescribe }}</div>
+            </div>
+
           </div>
         </div>
-        <div>
-          <div class="quality-des-title">{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.xpknuype', '识别要点')}}</div>
-          <div class="quality-des-content">{{data.markingDescribe}}</div>
-        </div>
-        <div>
-          <div class="quality-des-title">{{$lwLanguage.get('wms_project.pda.components.page.inbound.components.yzezxfep', '识别要点')}}</div>
-          <div class="quality-des-content">{{data.beforeDamagedDescribe}}</div>
-        </div>
-      </div>
-    </div>
-    <van-overlay v-if="overlay" :show="true">
-      <div class="quality-overlay">
-        <div class="quality-overlay-close" @click="overlay = null">
-          <van-icon name="cross" size="30px" />
-        </div>
-        <div class="quality-overlay-img">
-          <img :src="overlay.image" alt="">
-        </div>
-        <div class="quality-overlay-desc">
-          <div class="quality-overlay-title">{{overlay.title}}</div>
-          <div class="quality-overlay-content" v-html="overlay.desc"></div>
-        </div>
+
       </div>
-    </van-overlay>
+
+    </lw-popup>
+
   </div>
 </template>
 
 <script>
+import {
+  getInboundAsnSkuQualityCard,
+  getInboundSkuQualityCard,
+} from '../../../../api/inbound/receive'
+import {
+  getInboundFoundQualityCard,
+} from '../../../../api/inbound/quality'
+
 export default {
   name: 'QualityCard',
   props: {
-    data: Object,
-    shrinkable: {
+
+    // quality asn sku
+    type:{
+      type: String,
+      default: ''
+    },
+
+    skuCode:{
+      type: String,
+      default: ''
+    },
+    objId:{
+      type: String,
+      default: ''
+    },
+
+    delayLoad:{
       type: Boolean,
-      default: true
+      default: false
     },
+    cardMode:{
+      type: Boolean,
+      default: false
+    }
   },
-  data () {
+  data() {
     return {
-      isShrink: true,
-      overlay: null,
+      activeCard: [],
+      activePack: [],
+      data: null,
+      showDialog: false,
     }
   },
-  methods: {
-    showOverlay (e) {
-      if (e.target.tagName === 'IMG') {
-        const image = e.target.src
-        const imgDiv = e.target.closest('.quality-des > div')
-        if (imgDiv) {
-          const desDiv = imgDiv.nextElementSibling.nextElementSibling
-          const overlay = {image}
-          if (desDiv) {
-            const destDiv = desDiv.querySelector('.quality-des-title')
-            if (destDiv) {
-              overlay.title = destDiv.textContent
-            }
-            const descDiv = desDiv.querySelector('.quality-des-content')
-            if (descDiv) {
-              overlay.desc = descDiv.innerHTML
-            }
-          }
-          if (!overlay.title) {
-            overlay.title = this.$lwLanguage.get('wms_project.pda.components.page.inbound.components.zkbediey', '图片')
-          }
-          if (!overlay.desc) {
-            overlay.desc = ''
-          }
-          this.overlay = overlay
+  watch:{
+    'skuCode':{
+      handler(n){
+        this.activePack = []
+        this.activeCard = []
+
+        if(this.delayLoad){
+          this.data = null
+          return
         }
+        this.getData(n)
       }
     }
+  },
+  mounted() {
+    if(this.delayLoad){
+      return
+    }
+    this.getData(this.skuCode)
+  },
+  methods: {
+    getPackNum(pack) {
+      var s = ''
+
+      if (pack.innerCode && pack.innerQty) {
+        s = s + (s.length > 0 ? "," : "") + this.$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.inner', pack.innerCode) + (pack.innerQty ? `${':' + pack.innerQty}` : '')
+      }
+      if (pack.caseCode && pack.caseQty) {
+        s = s + (s.length > 0 ? "," : "") +  this.$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.case', pack.caseCode) + (pack.caseQty ? `${':' + pack.caseQty}` : '')
+      }
+      if (pack.palletCode && pack.palletQty) {
+        s = s + (s.length > 0 ? "," : "") +  this.$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.pallet', pack.palletCode) + (pack.palletQty ? `${':' + pack.palletQty}` : '')
+      }
+      return s
+    },
+    getPackUomNum(qty, name) {
+      var s = ""
+
+      if (qty) {
+        s = s + this.$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom.qty', '数量') + " " + qty + " "
+      }
+
+      if (name) {
+        s = s + this.$lwLanguage.get('wms_project.pda.components.page.inbound.sku.pack.uom', '单位') + " " + name
+      }
+
+      return s
+    },
+    getPackUomVolume(length, width, height) {
+      if(!length && !width && !height){
+        return '---'
+      }
+      return (length ? length : "0") + "*" + (width ? width : "0") + "*" + (height ? height : "0")
+    },
+    getPackUomLpnType(ti, hi) {
+      return (ti ? ti : "0") + "*" + (hi ? hi : "0")
+    },
+
+    getData(code){
+      this.data = null
+      if(!code){
+        return;
+      }
+
+      if(!this.objId){
+        this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.sku.quality.error.obj.id.null', 'ID 不能为空'))
+        return;
+      }
+
+      if(this.type === "quality" && this.objId){
+        this.getDataByQualityTask(this.objId)
+        return
+      }
+      if(this.type === "asn" && this.objId){
+        this.getDataByAsn(this.objId, code)
+        return
+      }
+      if(this.type === "sku" && this.objId){
+        this.getDataBySku(this.objId, code)
+        return
+      }
+
+      this.$lwShowErrorMsg(this.$lwLanguage.get('wms_project.pda.components.page.inbound.sku.quality.type.error', '不支持方式: {type} 查询品检卡', {type:this.type}))
+    },
+
+    getDataBySku(id, code){
+      getInboundSkuQualityCard(id, code).then(res => {
+        this.data = res
+      })
+    },
+    getDataByAsn(id, code){
+      getInboundAsnSkuQualityCard(id, code).then(res => {
+        this.data = res
+      })
+    },
+    getDataByQualityTask(id){
+      getInboundFoundQualityCard(id).then(res => {
+        this.data = res
+      })
+    },
+
+    showCard(){
+      this.showDialog = true
+
+      if(null==this.data){
+        this.getData(this.skuCode)
+      }
+    },
+
+    hideCard(){
+      console.log("hideCard")
+    },
   }
 }
 </script>
 
 <style lang="less" scoped>
-.lw-global-sh {
-  margin: 10px 0;
-}
-.btn-shrink {
-  padding: 5px;
 
-  &.inverted {
-    transform: rotate(180deg);
-  }
-}
-
-.content-shrink {
-  display: none;
-}
+@import "../../../../assets/css/var.less";
 
 .quality-des {
   display: grid;
@@ -161,7 +585,7 @@ export default {
   &-title {
     height: 30px;
     line-height: 30px;
-    background: #0f90dd;
+    background: @tabsActiveBgColor;
     color: white;
     text-align: center;
   }
@@ -169,6 +593,7 @@ export default {
   &-content {
     padding: 10px;
     font-size: 0.9em;
+
     &.img {
       min-height: 50px;
       text-align: center;
@@ -179,53 +604,9 @@ export default {
     border: 1px solid lightgray;
   }
 }
-.quality-overlay {
-  height: 100%;
-  display: flex;
-  position: relative;
-  background: #3b3a3a;
-  flex-direction: column;
-
-  &-close {
-    position: absolute;
-    top: 60px;
-    right: 10px;
-    background: lightgray;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    z-index: 9;
-  }
-
-  &-img {
-    flex: 1 0 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    img {
-      width: 100%;
-      min-height: 20%;
-      max-height: 60%;
-    }
-  }
 
-  &-desc {
-    flex-basis: 36%;
-  }
-
-  &-title {
-    height: 40px;
-    line-height: 40px;
-    background: #0f90dd;
-    color: white;
-    text-align: center;
-  }
-
-  &-content {
-    color: white;
-    padding: 10px;
-    line-height: 2em;
-  }
+.card-style{
+  margin-top: 10px;
 }
-</style>
+
+</style>