update:图标组件

src/components/common/dataFileTree/index.vue

@@ -30,12 +30,10 @@
                 <template #default="{ data, node }">
                   <div class="tree-item">
                     <div class="icon">
-                      <el-icon :size="18">
-                        <MessageBox v-if="data.relatedResourceUuidOwnType === NODE_TYPE.PROJECT" />
-                        <Share v-else-if="data.relatedResourceUuidOwnType === NODE_TYPE.PHASE" />
-                        <Document v-else-if="data.relatedResourceUuidOwnType === NODE_TYPE.TASK" />
-                        <Folder v-else />
-                      </el-icon>
+                      <FileIcon
+                        :fileName="projectCodeName(data)"
+                        :fileType="data.relatedResourceUuidOwnType"
+                      />
                     </div>
                     <div class="label" :title="projectCodeName(data)">
                       {{ projectCodeName(data) }}
@@ -80,10 +78,9 @@
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
-import { MessageBox, Share, Folder, Document } from '@element-plus/icons-vue';
-import { NODE_TYPE } from '@/utils/enum/node';
 import DragSplit from '@/components/common/dragSplit/index.vue';
 import { projectCodeName } from '@/utils/common';
+import FileIcon from '@/components/common/fileIcon/index.vue';
 
 interface Props {
   api: any;
@@ -329,7 +326,6 @@ defineExpose({
           align-items: center;
           justify-content: center;
           width: 26px;
-          color: var(--el-color-primary);
         }
         .label {
           flex: 1;

src/components/common/fileIcon/index.vue

@@ -5,6 +5,11 @@
     :style="{ width: `${size}px`, height: `${size}px`, lineHeight: `${size}px` }"
   >
     <img :src="imgSrc" class="img" />
+    <div v-if="fileType" class="second-type">
+      <img v-if="fileType === NODE_TYPE.PROJECT" class="second-type-img" :src="ProjectIcon" />
+      <img v-if="fileType === NODE_TYPE.PHASE" class="second-type-img" :src="PhaseIcon" />
+      <img v-if="fileType === NODE_TYPE.TASK" class="second-type-img" :src="TaskIcon" />
+    </div>
   </span>
 </template>
 
@@ -12,12 +17,17 @@
 import { ref } from 'vue';
 import { fileUploadAllocationIconFun } from '@/utils/file';
 import { isString } from 'lodash-es';
+import { NODE_TYPE } from '@/utils/enum/node';
+import ProjectIcon from '@/assets/imgs/fileIcon/project.png';
+import PhaseIcon from '@/assets/imgs/fileIcon/phase.png';
+import TaskIcon from '@/assets/imgs/fileIcon/task.png';
 
 interface Props {
   fileName: string;
   fileType?: string;
   dataType?: string;
   size?: number;
+  folderOpen?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -25,6 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
   fileType: '',
   dataType: '',
   size: 20,
+  folderOpen: false,
 });
 
 const imgSrc = ref(fileUploadAllocationIconFun(props.fileName, props.dataType));
@@ -32,12 +43,29 @@ const imgSrc = ref(fileUploadAllocationIconFun(props.fileName, props.dataType));
 
 <style lang="scss" scoped>
 .comp-file-icon {
+  position: relative;
   display: inline-block;
-  margin-right: 5px;
+  margin-right: 8px;
   .img {
     width: 100%;
     height: 100%;
     vertical-align: sub;
   }
+  .second-type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: -3px;
+    bottom: -1px;
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    overflow: hidden;
+    .second-type-img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 </style>

src/components/common/table/baseTable.vue

@@ -125,6 +125,7 @@
               <FileIcon
                 v-if="item.tableIcon === 'fileIcon'"
                 :fileName="row[item.key]"
+                :fileType="row.relatedResourceUuidOwnType"
                 :dataType="row.dataType"
                 :size="20"
               />