From c3d1fcf6afcf0c6c1f41e32b6a59f861f8c10482 Mon Sep 17 00:00:00 2001
From: simple321vip <simple321@vip.qq.com>
Date: Mon, 12 Dec 2022 08:35:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=99=BE=E5=BA=A6=E7=BD=91?=
 =?UTF-8?q?=E7=9B=98=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/cloud.ts            |  31 ++++++++++
 package-lock.json        |  13 ++++-
 package.json             |   4 +-
 src/api/cloud.ts         |   7 ++-
 src/main.ts              |   4 ++
 src/view/cloud/index.vue | 121 ++++++++++++++++++++++++++++++++++++++-
 6 files changed, 174 insertions(+), 6 deletions(-)
 create mode 100644 mock/cloud.ts

diff --git a/mock/cloud.ts b/mock/cloud.ts
new file mode 100644
index 0000000..f9c8f49
--- /dev/null
+++ b/mock/cloud.ts
@@ -0,0 +1,31 @@
+import { MockMethod } from 'vite-plugin-mock'
+
+export default [
+  {
+    url: '/cloud/api/v1/file/list',
+    method: 'get',
+    response: ({ body, query }) => {
+      return [
+        {
+          server_filename: "java实战.pdf",
+          path: "/",
+          isDir: 0,
+          size: 1000
+        },
+        {
+          server_filename: "天道.pdf",
+          path: "/",
+          isDir: 0,
+          size: 1000
+        },
+        {
+          server_filename: "我得音乐",
+          path: "/",
+          isDir: 1,
+          size: 10001
+
+        },
+      ]
+    }
+  },
+] as MockMethod[]
diff --git a/package-lock.json b/package-lock.json
index 4fb9148..6908d08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1807,6 +1807,12 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
+    "v-contextmenu": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/v-contextmenu/-/v-contextmenu-3.0.0.tgz",
+      "integrity": "sha512-zi38JxmTt66TmljgV1JbfEa9WvoQkpzRuEwZK7Tjb2XoRejbWLozQtkyTWXJa6x6Y3FrVDfgT36w01gpTpo41A==",
+      "dev": true
+    },
     "vite": {
       "version": "2.9.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.13.tgz",
@@ -2076,6 +2082,11 @@
         "@vue/devtools-api": "^6.0.0"
       }
     },
+    "vue-runtime-helpers": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vue-runtime-helpers/-/vue-runtime-helpers-1.1.2.tgz",
+      "integrity": "sha512-pZfGp+PW/IXEOyETE09xQHR1CKkR9HfHZdnMD/FVLUNI+HxYTa82evx5WrF6Kz4s82qtqHvMZ8MZpbk2zT2E1Q=="
+    },
     "vue-tsc": {
       "version": "0.29.8",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.29.8.tgz",
@@ -2121,4 +2132,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 7dcd252..ee033f3 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "type-fest": "^2.12.2",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
+    "vue-runtime-helpers": "^1.1.2",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
@@ -41,6 +42,7 @@
     "vite": "^2.9.13",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.6",
+    "v-contextmenu": "^3.0.0",
     "vue-tsc": "^0.29.8"
   }
-}
\ No newline at end of file
+}
diff --git a/src/api/cloud.ts b/src/api/cloud.ts
index ec031a7..6a20f55 100644
--- a/src/api/cloud.ts
+++ b/src/api/cloud.ts
@@ -4,12 +4,13 @@ const headers = {
   'Content-Type': 'application/json;charsetset=UTF-8'
 }
 
-const getAudioInfo = (url: string) => {
+const getFileList = (url: string) => {
   return service({
-    url: '/cloud/api/v1/common/audio-info',
+    url: '/cloud/api/v1/file/list',
     method: 'GET',
     params: { url: url },
+    headers: headers
   })
 }
 
-export { getAudioInfo }
\ No newline at end of file
+export { getFileList }
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 9944c5f..4f98117 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,6 +15,10 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
+import contentmenu from 'v-contextmenu'
+import 'v-contextmenu/dist/themes/default.css'
+app.use(contentmenu)
+
 import { setupMock } from '../mock'
 
 if (process.env.NODE_ENV === 'development') {
diff --git a/src/view/cloud/index.vue b/src/view/cloud/index.vue
index 178138d..d50e218 100644
--- a/src/view/cloud/index.vue
+++ b/src/view/cloud/index.vue
@@ -1,9 +1,128 @@
 <template>
-  <div class="dashboard">个人云网盘，典型的权限，初期打算只有最高权限的我自己使用</div>
+  <el-table :data="dirContexts" @row-contextmenu="showContext" @row-click="leftClickRow"
+    @selection-change="handleSelectionChange">
+    <el-table-column type="selection" width="55" />
+    <el-table-column prop="name" width="200px">
+    </el-table-column>
+    <el-table-column prop="isDir" width="130px">
+    </el-table-column>
+    <el-table-column prop="size" width="130px">
+    </el-table-column>
+    <el-table-column prop="path" width="130px">
+    </el-table-column>
+  </el-table>
+
+  <Contextmenu auto-ajust-placement ref="contextmenu">
+    <ContextmenuItem v-if="isSelect" @click="createFolder">
+      <el-icon class="contextmenu-icon">
+        <FolderOpened />
+      </el-icon>
+      <label> _new folder</label>
+    </ContextmenuItem>
+    <ContextmenuItem v-if="isSelect" @click="createFolder">
+      <el-icon class="contextmenu-icon">
+        <FolderOpened />
+      </el-icon>
+      <label> _copy</label>
+    </ContextmenuItem>
+    <ContextmenuItem v-if="isSelect" @click="createFolder">
+      <el-icon class="contextmenu-icon">
+        <FolderOpened />
+      </el-icon>
+      <label> _rename</label>
+    </ContextmenuItem>
+    <ContextmenuItem v-if="isSelect" @click="createFolder">
+      <el-icon class="contextmenu-icon">
+        <FolderOpened />
+      </el-icon>
+      <label> _delete</label>
+    </ContextmenuItem>
+
+  </Contextmenu>
+
 </template>
 
 <script setup lang="ts">
+import { reactive } from 'vue';
+import { getFileList } from '../../api/cloud'
+import { Contextmenu, ContextmenuDivider, ContextmenuItem } from "v-contextmenu";
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref } from "vue";
+
+import { ElTable } from 'element-plus'
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+
+interface DirContext {
+  size: number
+  isDir: number
+  name: string
+  path: string
+}
+const currentInstance = getCurrentInstance();
+const dirContexts = reactive<DirContext[]>([])
+let url = ""
+
+const isSelect = ref(false)
+const selection = ref()
+
+const handleSelectionChange = (val: DirContext) => {
+  selection.value = val
+}
+const createFolder = () => {
+
+}
+
+
+
+const toggleSelection = (row: DirContext) => {
+  multipleTableRef.value.toggleRowSelection(row, true)
+  // multipleTableRef.value!.clearSelection()
+}
+
+
+const leftClickRow = (row: any, column: any, event: any) => {
+  isSelect.value = true
+  console.log(1)
+  toggleSelection(row)
+}
+
+
+
+getFileList(url).then(response => {
+
+  response.data.forEach((element: any) => {
+    const dirContext: DirContext = {
+      size: element.size,
+      isDir: element.isDir,
+      name: element.server_filename,
+      path: element.path
+    }
+    dirContexts.push(dirContext)
+  });
+
+})
+
+const showContext = (row: any, column: any, event: any) => {
+  let contextmenuRef: any = currentInstance?.proxy?.$refs.contextmenu
+
+  event.preventDefault();
+  contextmenuRef.show({
+    top: event.clientY,
+    left: event.clientX
+  });
+  console.log(row)
+  console.log(column)
+  console.log(event)
+  window.onclick = () => {
+    contextmenuRef.hide();
+    // contextMenuTargetBlank.value = false;
+    // contextMenuTargetFile.value = false;
+  };
+
+}
+
 </script>
 
+
 <style>
+
 </style>
\ No newline at end of file