fix: 1

src/api/floder.ts

@@ -35,7 +35,7 @@ export const fetchFloders = async () => {
     res.data.data.forEach((item:any, ndx: any) => {
       floders.push({
         filesId: 100 + ndx,
-        filesTypeId: 100,
+        filesTypeId: -1,
         filesTitle: '照片制卷图',
         caseId: params.caseId.toString(),
         filesUrl: item.imgUrl

src/api/folder-type.ts

@@ -1,17 +1,24 @@
-import { FOLDER_TYPE_LIST } from './constant'
-import axios from './instance'
+import { FOLDER_TYPE_LIST } from "./constant";
+import axios from "./instance";
 
 export interface FloderType {
-  filesTypeId: number,
-  filesTypeName: string,
-  parentId: number,
-  modalShow?: boolean
-  flatShow?: boolean
+  filesTypeId: number;
+  filesTypeName: string;
+  parentId: number;
+  modalShow?: boolean;
+  flatShow?: boolean;
 }
 
-export type FloderTypes = FloderType[]
+export type FloderTypes = FloderType[];
 
 export const fetchFloderTypes = async () => {
-  const types =await axios.get<FloderTypes>(FOLDER_TYPE_LIST)
-  return types
-}
+  const types = await axios.get<FloderTypes>(FOLDER_TYPE_LIST);
+  types.push({
+    filesTypeId: -1,
+    filesTypeName: "照片制卷",
+    flatShow: false,
+    modalShow: false,
+    parentId: 2,
+  });
+  return types;
+};

src/components/materials/index.vue

@@ -53,6 +53,13 @@
           @change="handleTableChange"
         >
           <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'name'">
+              <div class="name">
+                <span>
+                  {{ record.name }}
+                </span>
+              </div>
+            </template>
             <template v-if="column.key === 'size'">
               {{ getSizeStr(record.size) }}
             </template>
@@ -182,6 +189,7 @@ const cloumns = computed(() => [
     })),
   },
   {
+    width: "100px",
     title: "操作",
     key: "action",
   },
@@ -293,4 +301,19 @@ const handleTableChange: TableProps["onChange"] = (pag, filters) => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.name {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  span {
+    position: absolute;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis; //文本溢出显示省略号
+    white-space: nowrap; //文本不会换行
+  }
+}
 </style>

src/layout/scene-list/index.vue

@@ -135,9 +135,11 @@ const stopWatch = watch(
   padding: 0 20px;
   display: flex;
   align-items: center;
+  overflow: hidden;
   justify-content: space-between;
   > div {
     flex: 1;
+    max-width: 100%;
   }
 
   p {

src/utils/meta.ts

@@ -7,7 +7,7 @@ export enum MetaType {
 }
 
 export const metaTypeExtnames = {
-  [MetaType.image]: ['bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'],
+  [MetaType.image]: ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'],
   [MetaType.audio]: ['mp3'],
   [MetaType.video]: ['wmv', 'asf', 'asx', 'rm', 'rmvb', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv', 'vob'],
   [MetaType.xfile]: [".raw", ".dcm"]

src/views/folder/floder-view.vue

@@ -60,7 +60,7 @@
 </template>
 <script lang="ts" setup>
 import { Floder, FloderRoot, getFlatFloders } from "@/store";
-import { computed, ref } from "vue";
+import { computed, ref, toRaw, watchEffect } from "vue";
 import { MetaType } from "@/utils";
 import ModalFloderView from "./modal-floder-view.vue";
 import { Modal } from "ant-design-vue";
@@ -92,6 +92,11 @@ const children = computed(() => {
   }
 });
 const showChildren = ref(props.root.modal ? false : true);
+watchEffect(() => {
+  if (showChildren.value) {
+    console.log(toRaw(props.root));
+  }
+});
 </script>
 
 <style lang="scss" scoped>

src/views/folder/modal-floder-view.vue

@@ -42,8 +42,7 @@
       </TabPane>
     </template>
   </Tabs>
-
-  <template v-for="c in children" :key="c.id">
+  <template v-for="c in children" :key="c.id" v-else>
     <ModalFloderView
       :root="c"
       v-if="isLastLevel(c)"
@@ -107,7 +106,7 @@ const canAll = computed(() => len.value > samLen);
     padding-top: 56.25%;
     position: relative;
     cursor: pointer;
-    
+
     > div {
       position: absolute;
       width: 100%;