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

<template>
  <view class="module-container">
    <uv-empty v-if="loading" mode="list" text="加载中..."></uv-empty>
    <uv-empty v-else-if="!listData || listData.length === 0" mode="data" text="暂无伦理信息"></uv-empty>

    <view class="list-wrapper" v-else>
      <CommonListCard 
        v-for="(item, index) in listData" 
        :key="index" 
        :title="(index + 1) + '. ' + (item.reviewCode || '-')"
        :statusLabel="getReviewStatusText(item.reviewStatus)"
        :statusType="getReviewStatusType(item.reviewStatus)"
      >
        <template #status v-if="getApplyStatusText(item)">
          <view class="tags-group">
            <text class="status-tag" :class="getReviewStatusClass(item.reviewStatus)">{{ getReviewStatusText(item.reviewStatus) }}</text>
            <text class="status-tag" :class="getApplyStatusClass(item)">{{ getApplyStatusText(item) }}</text>
          </view>
        </template>

        <CommonInfoRow label="审查类型" :value="getDictLabel('sci_review_type', item.reviewType)" />
        <CommonInfoRow label="审查方式" :value="item.reviewMethod == '10' ? '简易审查' : (item.reviewMethod == '20' ? '会议审查' : '--')" />
        <CommonInfoRow label="承担科室" :value="item.deptName" />
        <CommonInfoRow label="申请人" :value="item.createdName" />
        <CommonInfoRow label="申请日期" :value="item.createdTime ? formatDate(item.createdTime) : '--'" noBorder />
      </CommonListCard>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useProjectApi } from '@/api/project';
import { formatDate } from '@/utils/date';
import { useDict } from '@/hooks/useDict';
import CommonListCard from '@/components/ui/CommonListCard.vue';
import CommonInfoRow from '@/components/ui/CommonInfoRow.vue';

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

const { getEthicalReviewList } = useProjectApi();
const { getDictLabel } = useDict('sci_review_type');

const loading = ref(false);
const listData = ref<any[]>([]);

const fetchList = async () => {
  if (!props.projectId) return;
  
  loading.value = true;
  try {
    const res: any = await getEthicalReviewList({
      projectId: props.projectId,
      projectType: props.projectType === 'horizontal' ? '20' : '10', // 匹配横向项目时传 20
      pageNum: 1,
      pageSize: 100
    });
    if (res && res.data && res.data.list) {
      listData.value = res.data.list;
    }
  } catch (error) {
    uni.showToast({ title: '获取伦理信息失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

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

// 审查状态格式化
const getReviewStatusText = (status: string | number) => {
  if (status == 10) return '待提交';
  if (status == 20) return '已提交';
  if (status == 30) return '形式审查拒绝';
  if (status == 40) return '已受理';
  if (status == 50) return '审查通过';
  if (status == 60) return '审查拒绝';
  return '未知状态';
};

const getReviewStatusType = (status: string | number) => {
  if (status == 10) return 'info';
  if (status == 20) return 'primary';
  if (status == 30) return 'error';
  if (status == 40) return 'warning';
  if (status == 50) return 'success';
  if (status == 60) return 'error';
  return 'info';
};

const getReviewStatusClass = (status: string | number) => {
  if (status == 10) return 'tag-info';
  if (status == 20) return 'tag-warning';
  if (status == 30) return 'tag-error';
  if (status == 40) return 'tag-primary';
  if (status == 50) return 'tag-success';
  if (status == 60) return 'tag-error';
  return 'tag-default';
};

// 审批状态格式化
const getApplyStatusText = (row: any) => {
  if ((row.reviewStatus == '10' || row.reviewStatus == '20') && !row.reviewMethod) {
    if (row.applyStatus == '10') return '待提交';
    if (row.applyStatus == '20') return '审批中';
    if (row.applyStatus == '30') return '审批通过';
    if (row.applyStatus == '40') return '审批拒绝';
  } else if (row.reviewStatus >= '20' && row.reviewMethod == '10') {
    if (row.formStatus == '10') return '待提交';
    if (row.formStatus == '20') return '审批中';
    if (row.formStatus == '30') return '审批通过';
    if (row.formStatus == '40') return '审批拒绝';
  }
  return '';
};

const getApplyStatusClass = (row: any) => {
  let status = '';
  if ((row.reviewStatus == '10' || row.reviewStatus == '20') && !row.reviewMethod) {
    status = row.applyStatus;
  } else if (row.reviewStatus >= '20' && row.reviewMethod == '10') {
    status = row.formStatus;
  }
  
  if (status == '10') return 'tag-info';
  if (status == '20') return 'tag-warning';
  if (status == '30') return 'tag-success';
  if (status == '40') return 'tag-error';
  return 'tag-default';
};

</script>

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

.list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.tags-group {
  display: flex;
  gap: 12rpx;
  flex-shrink: 0;
}

.status-tag {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 6rpx;
  white-space: nowrap;

  &.tag-success { background-color: #f0f9eb; color: #67c23a; border: 2rpx solid #e1f3d8; }
  &.tag-error { background-color: #fef0f0; color: #f56c6c; border: 2rpx solid #fde2e2; }
  &.tag-primary { background-color: #ecf5ff; color: #409eff; border: 2rpx solid #d9ecff; }
  &.tag-warning { background-color: #fdf6ec; color: #e6a23c; border: 2rpx solid #faecd8; }
  &.tag-info { background-color: #f4f4f5; color: #909399; border: 2rpx solid #e9e9eb; }
  &.tag-default { background-color: #f4f4f5; color: #909399; }
}
</style>