labsop_scientific_h5/pages/project/components/detail/ProjectInspection.vue

<template>
  <view class="insp-container">
    <uv-empty v-if="projectStore.fetchInspListLoading" mode="list" text="加载中..."></uv-empty>
    <uv-empty v-else-if="!projectStore.inspList || projectStore.inspList.length === 0" mode="data" text="暂无中检信息"></uv-empty>

    <view v-else class="list-wrapper">
      <CommonListCard 
        v-for="(item, index) in projectStore.inspList" 
        :key="index" 
        :title="String(item.batchName || '未知批次')"
        :statusLabel="getStatusLabel(item.approvalStatus)"
        :statusType="getStatusType(item.approvalStatus)"
        @click="handleDetail(item)"
      >
        <CommonInfoRow 
          v-if="item.projectStartDate || item.projectEndDate"
          label="项目起止" 
          :value="formatDate(item.projectStartDate) + ' 至 ' + formatDate(item.projectEndDate)" 
        />
        <CommonInfoRow 
          v-if="item.startDate || item.endDate"
          label="中检起止" 
          :value="formatDate(item.startDate) + ' 至 ' + formatDate(item.endDate)" 
          noBorder
        />
      </CommonListCard>
    </view>

    <!-- 详情弹窗 -->
    <InspDetailPopup ref="detailPopupRef" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useProjectStore } from '@/store/modules/project';
import { inspApprovalStatusOptions } from '@/constants';
import InspDetailPopup from './InspDetailPopup.vue';
import { formatDate } from '@/utils/date';
import CommonListCard from '@/components/ui/CommonListCard.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

const props = defineProps<{
  projectId: number;
  projectType: string;
}>();

const projectStore = useProjectStore();
const detailPopupRef = ref<any>(null);

/**
 * 页面加载时根据传进来的projectId发请求获取中检列表数据
 */
onMounted(() => {
  if (props.projectId) {
    projectStore.fetchInspList(props.projectId, props.projectType);
  }
});



/**
 * 获取状态标签展示处理
 */
const getStatusLabel = (status: string | number) => {
  if (!status) return '待提交';
  const match = inspApprovalStatusOptions.find(o => o.dictValue == status);
  return String(match ? match.dictLabel : status);
};

/**
 * 获取对应状态的 UI 类型
 */
const getStatusType = (status: string | number) => {
  const match = inspApprovalStatusOptions.find(o => o.dictValue == status);
  if (!match) return 'info';
  return match.type || 'primary';
};

/**
 * 查看中检详情
 */
const handleDetail = (item: any) => {
  detailPopupRef.value?.open(item, props.projectType);
};

</script>

<style lang="scss" scoped>
.insp-container {
  min-height: 400rpx;
  position: relative;
}

.list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style>