feat: 项目列表 card

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

@@ -0,0 +1,84 @@
+<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 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 env = import.meta.env;
+
+const coverImgMap = computed(() => ({
+  custom: `${env.VITE_API_IMAGE_PREVIEW_URL}/data/previewImage?fileId=${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>
+@import './projectCard.scss';
+
+.project-card {
+  @extend .project-card-base;
+}
+</style>