feat: 我的组件上传 删除 编辑功能实现

src/views/components/Graphics.vue

@@ -76,6 +76,7 @@
                     :upload-all-files-in-one-request="false"
                     :before-upload="beforeUpload"
                     @selectChange="onSelectFiles(item)"
+                    allowUploadDuplicateFile
                     @success="fileSuccessed"
                     theme="custom"
                   >
@@ -147,7 +148,7 @@
       :style="contextmenu.style"
       @blur="hideContextmenu"
     >
-      <t-menu class="context-menu" @change="onMenu" expandType="popup">
+      <t-menu class="context-menu" @change="onMenu" expandType="popup" v-model="contextmenu.activeValue">
         <t-submenu
           value="move"
           title="移动到"
@@ -161,7 +162,7 @@
             {{ subMenu.name }}
           </t-menu-item>
         </t-submenu>
-        <t-menu-item value="edit" :disabled="!contextmenu.component.component">
+        <t-menu-item value="edit" :disabled="!contextmenu.component.component || contextmenu.component.image.endsWith('.svg')">
           编辑
         </t-menu-item>
         <t-menu-item value="del" :disabled="contextmenu.component['3d']">
@@ -176,7 +177,7 @@
       header="删除"
       :visible="true"
       @close="delDialog.show = false"
-      @confirm="delComponet"
+      @confirm="delComponent"
     >
       确定删除该数据吗？删除后不可恢复！
     </t-dialog>
@@ -761,7 +762,7 @@ const contextmenu = reactive<any>({
   subMenus: [],
 });
 const contextmenuDom = ref<any>(null);
-const onContextMenu = async (e: MouseEvent, group: string, item: any) => {
+const onContextMenu = async (e: MouseEvent, group: any, item: any) => {
   e.preventDefault();
   e.stopPropagation();
 
@@ -799,8 +800,9 @@ const onContextMenu = async (e: MouseEvent, group: string, item: any) => {
   }, 500);
 };
 
-const delDialog = reactive<any>({});
-
+const delDialog = reactive<any>({
+  contextmenuObj:{}
+});
 const onMenu = async (val: string) => {
   const id = contextmenu.component._id || contextmenu.component.id;
   setTimeout(() => {
@@ -831,7 +833,7 @@ const onMenu = async (val: string) => {
       break;
     case 'del':
       delDialog.show = true;
-      delDialog.contextmenuObj = deepClone(contextmenu)
+      Object.assign(delDialog.contextmenuObj, contextmenu)
       break;
     default:
       if (val.indexOf('move:')) {
@@ -880,15 +882,16 @@ const onMenu = async (val: string) => {
       }
       break;
   }
+  contextmenu.activeValue = 0
 };
 
 const hideContextmenu = () => {
   contextmenu.visible = false;
 };
 
-const delComponet = async () => {
+const delComponent = async () => {
   // const id = contextmenu.component._id || contextmenu.component.id;
-  const id = delDialog.contextmenuObj.component._id || delDialog.contextmenu.component.id;;
+  const id = delDialog.contextmenuObj.component._id || delDialog.contextmenuObj.component.id;
   try {
     await axios.post(`/api/data/le5leV-components/delete`, {
       id
@@ -897,7 +900,6 @@ const delComponet = async () => {
     console.log(e)
     return
   }
-
   // 前端：从源文件夹移出组件
   delDialog.contextmenuObj.group.list.forEach((item: any, index: number, arr: any[]) => {
     if (id === item._id || id === item.id) {
@@ -915,6 +917,7 @@ const delComponet = async () => {
 
   delDialog.show = false;
   delDialog.contextmenuObj = {}
+  MessagePlugin.success('删除成功');
 };
 
 const drop = (obj: any) => {
@@ -1021,41 +1024,53 @@ const beforeUpload = (file: any) => {
   return true;
 };
 
+/*
+* @description 根据上传的文件处理为meta2d能够识别的内容
+* */
+function processFileObj(fileObj,c) {
+  return new Promise((resolve) => {
+    if(fileObj.name.endsWith('.svg')){
+      let fileReader = new FileReader()
+      fileReader.readAsText(fileObj.raw)
+      fileReader.onload = async ()=>{
+        let svgText = fileReader.result
+        c.componentDatas = parseSvg(svgText as string)
+        c.component = true
+        resolve(c)
+      }
+    }else {
+      // 除了svg 其他一律按照图片处理，这样是否会有问题？
+     resolve(c)
+    }
+  })
+}
+
 const fileSuccessed = async (content: any) => {
-  let file = content.file.raw
   const c: any = {
     name: filename(content.file.name),
     image: content.response.url,
     folder: uploadGroup.name === '我的组件' ? '' : uploadGroup.name,
   };
-  // 若是svg格式 则开启解析
-  if(content.file.name.endsWith('.svg')){
-    let fileReader = new FileReader()
-    fileReader.readAsText(file)
-    fileReader.onload = async ()=>{
-      let svgText = fileReader.result
-      c.componentDatas =  parseSvg(svgText as string)
-      c.component = true
-      const ret: any = await addCollection('le5leV-components', c);
-
-      if (ret && uploadGroup.name !== '我的组件') {
-        c._id = ret._id || ret.id;
-        if (!uploadGroup.list) {
-          uploadGroup.list = [];
-        }
-        uploadGroup.list.push(c);
-        await axios.post('/api/data/folders/update', {
-          _id: uploadGroup._id || uploadGroup.id,
-          list: uploadGroup.list,
-        });
-      } else {
-        if (!uploadGroup.list) {
-          uploadGroup.list = [];
-        }
-        uploadGroup.list.push(c);
-      }
+  let rst = await processFileObj({raw: content.file.raw,name:content.file.name},c)
+  const ret: any = await addCollection('le5leV-components', rst);
+  c._id = ret._id || ret.id;
+  if (ret && uploadGroup.name !== '我的组件') {
+    if (!uploadGroup.list) {
+      uploadGroup.list = [];
+    }
+
+    uploadGroup.list.push(c);
+    await axios.post('/api/data/folders/update', {
+      _id: uploadGroup._id || uploadGroup.id,
+      list: uploadGroup.list,
+    });
+  } else {
+    if (!uploadGroup.list) {
+      uploadGroup.list = [];
     }
+    uploadGroup.list.push(c);
   }
+  MessagePlugin.success('上传成功');
 };
 
 const delFolder = async (item: any) => {