fix physical and some bugs

src/views/base/physicalReceive/components/PhysicalReceiveCartRow.vue

@@ -1,46 +1,43 @@
 <template>
   <div>
     <div class="flex">
-      <div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2 shrink-0">
-        <img v-if="item.product.group_type == 'گوی'" :src="goyImg" alt="" />
-        <img v-if="item.product.group_type == 'مکعب'" :src="mokaabImg" alt="" />
-        <img v-if="item.product.group_type == 'سکه'" :src="sekkeImg" alt="" />
-        <img v-if="item.product.group_type == 'مس'" :src="mesImg" alt="" />
-        <img v-if="item.product.group_type == 'نقره'" :src="noghrehImg" alt="" />
+      <div class="bg-gray-100 m-2 rounded-lg w-18 h-18 flex justify-center p-1 shrink-0">
+        <img :src="displayImage" class="object-contain w-full h-full" alt="" />
       </div>
       <div class="w-full min-w-0">
-        <div class="flex justify-between gap-2">
-          <div class="font-bold text-lg truncate">{{ item.product.title }}</div>
+        <div class="pr-cart-row__head">
+          <div class="truncate text-base font-bold">{{ item.product.title }}</div>
           <BasicButton
             icon="vuesax-linear:trash"
             icon-class="text-red"
+            class="pr-cart-row__trash shrink-0"
             @click="emit('remove', item.product.id)"
           />
-        </div>
-        <div class="flex mt-3 justify-between items-center">
-          <div>تعداد موجودی:</div>
-          <div class="flex flex-col items-end gap-0.5">
-            <div class="flex gap-1 items-center">
-              <div class="font-bold">{{ item.product.wallet.gold }}</div>
-              <div>{{ getProductQuantityUnit(item.product) }}</div>
-            </div>
-            <div v-if="getProductUnitWeightLabel(item.product)" class="text-xs text-gray-500">
+          <div class="pr-cart-row__stock text-xs">
+            <span>مقدار موجودی</span>
+            <span class="font-bold">{{ item.product.wallet.gold }}</span>
+            <span>{{ getProductQuantityUnit(item.product) }}</span>
+            <div
+              v-if="getProductUnitWeightLabel(item.product)"
+              class="mt-0.5 text-xs text-gray-500"
+            >
               هر عدد {{ getProductUnitWeightLabel(item.product) }}
             </div>
           </div>
         </div>
-        <div class="flex justify-between items-center mt-2 gap-2">
-          <div>تعداد درخواستی:</div>
+        <div class="mt-2 flex justify-between items-center gap-2">
+          <div class="shrink-0">تعداد درخواستی:</div>
           <div
-            class="flex gap-1 items-center"
-            :class="variant === 'desktop' ? 'dpr-cart-row__input' : 'w-40%'"
+            class="flex items-center gap-1 "
+            :class="variant === 'desktop' ? 'dpr-cart-row__input' : 'pr-cart-row__input'"
           >
             <BasicInput
               v-model:value="item.count"
               :addon-before="getProductQuantityUnit(item.product)"
               :addon-bg-color="config.config?.color"
               addon-text-color="white"
-              :size="variant === 'desktop' ? 'large' : undefined"
+              type="text"
+              inputmode="numeric"
             />
           </div>
         </div>
@@ -50,15 +47,12 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import { useConfigStore } from '@/store/configStore'
 import type { CountPInventory } from '@/models/products'
-import goyImg from '@/assets/img/goyImg.svg'
-import mokaabImg from '@/assets/img/mokaabImg.svg'
-import sekkeImg from '@/assets/img/sekkeImg.svg'
-import mesImg from '@/assets/img/mesImg.jpg'
-import noghrehImg from '@/assets/img/noghrehImg.webp'
+import { getProductDisplayImage } from '@/utils/productAssets'
 import { getProductQuantityUnit, getProductUnitWeightLabel } from '@/utils/productDealMethod'
 
 interface Props {
@@ -66,13 +60,65 @@ interface Props {
   variant?: 'mobile' | 'desktop'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   variant: 'mobile',
 })
 
+const displayImage = computed(() =>
+  getProductDisplayImage({
+    group_type: props.item.product.group_type,
+    title: props.item.product.title,
+    file: props.item.product.file,
+  })
+)
+
 const config = useConfigStore()
 
 const emit = defineEmits<{
   remove: [id: number]
 }>()
 </script>
+
+<style scoped lang="less">
+.pr-cart-row__head {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  column-gap: 0.5rem;
+  row-gap: 0.125rem;
+  align-items: start;
+}
+
+.pr-cart-row__trash {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  justify-self: end;
+}
+
+.pr-cart-row__stock {
+  grid-column: 1;
+  grid-row: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.pr-cart-row__input {
+  width: auto;
+  max-width: 10rem;
+
+  :deep(.noname-input),
+  :deep(.ant-input-group-wrapper) {
+    width: 100%;
+  }
+
+  :deep(.ant-input-group-addon) {
+    min-width: 3.75rem;
+    padding-inline: 6px;
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 600;
+  }
+}
+</style>