85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
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>
|