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

<template>
  <view class="module-container">
    <uv-empty v-if="projectStore.fetchChangeListLoading" mode="list" text="加载中..."></uv-empty>
    <uv-empty v-else-if="projectStore.changeList.length === 0" mode="data" text="暂无变更信息"></uv-empty>

    <view v-else class="list-wrapper">
      <CommonListCard 
        v-for="(item, index) in projectStore.changeList" 
        :key="index" 
        :title="(index + 1) + '. ' + getChangeTypeName(item.changeType)"
        :statusLabel="getStatusLabel(item.approvalStatus)"
        :statusType="getStatusType(item.approvalStatus)"
        @click="handleViewDetail(item)"
      >
        <CommonInfoRow label="申请人" :value="item.createdName" />
        <CommonInfoRow label="申请时间" :value="item.createdTime ? dayjs(item.createdTime).format('YYYY-MM-DD') : '--'" noBorder />
      </CommonListCard>
    </view>

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

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useProjectStore } from '@/store/modules/project';
import { approvalStatusOptions, changeTypeOptions } from '@/constants';
import ChangeDetailPopup from './ChangeDetailPopup.vue';
import dayjs from 'dayjs';
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);

onMounted(() => {
  if (props.projectId) {
    projectStore.fetchProjectChanges(props.projectId, props.projectType);
  }
});

const handleViewDetail = (item: any) => {
  detailPopupRef.value?.open(item, props.projectType, props.projectId);
};

const getChangeTypeName = (type: string | number) => {
  const typeStr = String(type);
  const found = changeTypeOptions.find((opt: any) => opt.dictValue === typeStr);
  return found ? found.dictLabel : '未知变更';
};

const getStatusLabel = (status: string | number) => {
  const statusStr = String(status);
  const found = approvalStatusOptions.find((opt: any) => opt.dictValue === statusStr);
  return found ? found.dictLabel : '未知状态';
};

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

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

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