SPDM/src/views/task/projectList/components/projectCard.vue

<template>
  <div class="project-card" @click="cardClickFun">
    <el-dropdown class="options-dropdown" :teleported="false">
      <div class="options-btn" @click.stop>
        <el-icon :size="18"><MoreFilled /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(action, aIndex) in actionList" :key="aIndex">
            <el-link :type="action.type" @click.stop="actionClickFun(action)">
              {{ action.title }}
            </el-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <img class="gl-pointer-class cover-img" :src="coverImgMap[project.detailImgUrl ? 'custom' : (index % 2 !== 0 ? 'blue' : 'green')]" alt="" />

    <div class="bottom-box">
      <span class="gl-text-ellipsis gl-pointer-class" :title="project.nodeName">
        {{ project.nodeName }}
      </span>
      <span :class="statusClassMap[project.exeStatus] || 'status car-info-status'">
        {{ PROJECT_EXE_STATUS.O[project.exeStatus] || '未开始' }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { MoreFilled } from '@element-plus/icons-vue';
import { useDict } from '@/utils/useDict';
import { PROJECT_EXE_STATUS_CODE } from '@/utils/enum/project';
import { FileUtil } from '@/utils/file';
import projectBlue from '@/assets/imgs/projectList/project-blue.png';
import projectGreen from '@/assets/imgs/projectList/project-green.png';

interface Props {
  project: any;
  index: number;
  actionList: any[];
}

const props = withDefaults(defineProps<Props>(), {
  project: () => ({}),
  index: 0,
  actionList: () => [],
});

const emit = defineEmits(['cardClick', 'actionClick']);

const { PROJECT_EXE_STATUS } = useDict('PROJECT_EXE_STATUS');

const coverImgMap = computed(() => ({
  custom: FileUtil.getFilePreviewImgPathUrl(props.project.detailImgUrl),
  blue: projectBlue,
  green: projectGreen,
}));

const statusClassMap: Record<string, string> = {
  [PROJECT_EXE_STATUS_CODE.COMPLETED]: 'status car-completed',
  [PROJECT_EXE_STATUS_CODE.IN_PROGRESS]: 'status car-ing',
  [PROJECT_EXE_STATUS_CODE.PAUSED]: 'status car-paused',
  [PROJECT_EXE_STATUS_CODE.POSTPONED]: 'status car-postponed',
};

const cardClickFun = () => {
  emit('cardClick', props.project);
};

const actionClickFun = (action: any) => {
  emit('actionClick', props.project, action);
};
</script>

<style lang="scss" scoped>
@use './projectCard.scss';

.project-card {
  @extend .project-card-base;
}
</style>