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

<template>
  <view class="module-container">
    <uv-empty v-if="projectStore.fetchConclusionLoading" mode="list" text="加载中..."></uv-empty>
    <view v-else-if="!projectStore.conclusionList || projectStore.conclusionList.length === 0" class="empty-wrap">
       <uv-empty mode="data" text="暂无结题信息"></uv-empty>
    </view>
    <view v-else class="list-wrapper">
      <CommonListCard 
        v-for="(item, index) in projectStore.conclusionList" 
        :key="index" 
        :title="(index + 1) + '. ' + (item.batchName || '未知批次')"
        :statusLabel="getStatusLabel(item.approvalStatus)"
        :statusType="getStatusType(item.approvalStatus)"
      >
        <CommonInfoRow label="项目名称" :value="item.projectTitle || '--'" />
        <CommonInfoRow label="负责人" :value="item.projectHeadName || '--'" />
        <CommonInfoRow label="开始日期" :value="item.projectStartDate ? formatDate(item.projectStartDate) : '--'" />
        <CommonInfoRow label="结束日期" :value="item.projectEndDate ? formatDate(item.projectEndDate) : '--'" noBorder />
      </CommonListCard>
    </view>
  </view>
</template>

<script setup lang="ts">
import { watch } from 'vue';
import { useProjectStore } from '@/store/modules/project';
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();

watch(() => props.projectId, (id) => {
  if (id) {
    projectStore.fetchConclusion(id, props.projectType);
  }
}, { immediate: true });

const getStatusLabel = (status: number | string) => {
  if (status == 10) return '待提交';
  if (status == 20) return '审批中';
  if (status == 30) return '审批通过';
  if (status == 40) return '审批退回';
  return '未知';
};

const getStatusType = (status: number | string) => {
  if (status == 10) return 'info';
  if (status == 20) return 'primary';
  if (status == 30) return 'success';
  if (status == 40) return 'error';
  return 'info';
};
</script>

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

.empty-wrap {
  min-height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

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