client-eam-v5/src/components/inventory1/InventoryPage3.vue

<template>
  <div style="position: relative;">
    <InventorySelect class="select-inventory" :class="{ 'hide': !isHave }" :size="'small'" @get-plan-id="getPlanInfo" />
    <component :is="dynamicComponent" v-bind="dynamicComponentParam" />
  </div>
  <a-card v-if="!isHave" style="width: 100%;position: absolute; top: 4rem;display: flex;justify-content: center;">
    <a-empty>
      <template #description>
        <span>
          暂无盘点数据
        </span>
      </template>
    </a-empty>
  </a-card>
</template>
<script setup>
import { ref, defineAsyncComponent } from 'vue';
import InventorySelect from './InventorySelect.vue';

const isHave = ref(false);
const dynamicComponent = ref(null);
const dynamicComponentParam = ref(null);

// 获取盘点计划ID
const getPlanInfo = id => {
  if (id) isHave.value = true;
  const asyncComponent = defineAsyncComponent({
    // 加载函数
    loader: () => import('pc-component-v3').then(module => module.InfoWindow),
    delay: 200,
    timeout: 10000,
  });

  dynamicComponentParam.value = {
    infoWindowNo: '20241017_165022',
    whereClauseSource: { customWhere: 'ai.assetInventoryPlanId = ' + id + ' and ail.needInventory = 1 and (ail.inventoryDate IS NOT NULL OR ail.isConfirmed = 1)' },
  };
  dynamicComponent.value = asyncComponent;
};

</script>

<style scoped>
:deep(.ant-page-header-heading) {
  display: none !important;
}

/* :deep(.m-segmented) {
  display: none !important;
} */

:deep(.flex-header) {
  flex: 0 0 40px !important;
}

.select-inventory {
  position: absolute;
  top: 4.2rem;
  left: 10rem;
}

@media (max-width: 768px) {
  .select-inventory {
    position: absolute;
    top: 4.2rem;
    left: 10rem;
    font-size: 10px;
  }
}
.hide {
  display: none
}
</style>