feat: 文件管理适配后端文件上传、单个删除、批量删除 API

continew-admin-ui/src/api/system/file.ts

@@ -47,7 +47,11 @@ export function get(id: string) {
   return axios.get<FileItem>(`${BASE_URL}/${id}`);
 }
 
-export function update(req: FileItem, id: string) {
+export interface FileItemUpdate {
+  name: string;
+}
+
+export function update(req: FileItemUpdate, id: string) {
   return axios.put(`${BASE_URL}/${id}`, req);
 }
 

continew-admin-ui/src/store/modules/app/index.ts

@@ -10,7 +10,6 @@ import type { RouteRecordNormalized } from 'vue-router';
 import defaultSettings from '@/config/settings.json';
 import { listRoute } from '@/api/auth';
 import { listOption } from '@/api/common';
-import getFile from '@/utils/file';
 import { AppState, Config } from './types';
 
 const recursionMenu = (
@@ -134,7 +133,7 @@ const useAppStore = defineStore('app', {
           .querySelector('link[rel="shortcut icon"]')
           ?.setAttribute(
             'href',
-            getFile(resMap.get('site_favicon')) ||
+            resMap.get('site_favicon') ||
               'https://cnadmin.charles7c.top/favicon.ico',
           );
       });
@@ -152,8 +151,7 @@ const useAppStore = defineStore('app', {
         .querySelector('link[rel="shortcut icon"]')
         ?.setAttribute(
           'href',
-          getFile(config.site_favicon) ||
-            'https://cnadmin.charles7c.top/favicon.ico',
+          config.site_favicon || 'https://cnadmin.charles7c.top/favicon.ico',
         );
     },
   },

continew-admin-ui/src/utils/file.ts

@@ -1,13 +0,0 @@
-export default function getFile(file: string | undefined) {
-  if (file) {
-    const baseUrl = import.meta.env.VITE_API_BASE_URL;
-    if (
-      !file.startsWith('http://') &&
-      !file.startsWith('https://') &&
-      !file.startsWith('blob:')
-    ) {
-      return `${baseUrl}/file/${file}`;
-    }
-  }
-  return file;
-}

continew-admin-ui/src/views/system/file/components/FileRenameModal/index.vue

@@ -20,7 +20,7 @@
           label="文件名称"
           :rules="[{ required: true, message: '请输入文件名称' }]"
         >
-          <a-input v-model="form.name" placeholder="请输入" allow-clear />
+          <a-input v-model="form.name" placeholder="请输入文件名称" allow-clear />
         </a-form-item>
       </a-form>
     </a-row>
@@ -28,16 +28,16 @@
 </template>
 
 <script setup lang="ts">
+  import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
   import type { FormInstance, Modal } from '@arco-design/web-vue';
-  import type { FileItem } from '@/api/system/file';
-  import { onMounted, reactive, ref } from 'vue';
+  import { FileItem, update } from '@/api/system/file';
 
   interface Props {
     fileInfo: FileItem;
     onClose: () => void;
   }
   const props = withDefaults(defineProps<Props>(), {});
-
+  const { proxy } = getCurrentInstance() as any;
   const visible = ref(false);
   type Form = { name: string };
   const form: Form = reactive({
@@ -54,20 +54,15 @@
     props.onClose();
   };
 
-  // 模拟接口
-  const saveApi = (): Promise<boolean> => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(true);
-      }, 2000);
-    });
-  };
-
   const FormRef = ref<FormInstance | null>(null);
   const save: InstanceType<typeof Modal>['onBeforeOk'] = async () => {
     const flag = await FormRef.value?.validate();
     if (flag) return false;
-    return saveApi();
+    const res = await update({ name: form.name }, props.fileInfo.id);
+    // eslint-disable-next-line vue/no-mutating-props
+    props.fileInfo.name = form.name;
+    proxy.$message.success(res.msg);
+    return true;
   };
 </script>
 

continew-admin-ui/src/views/system/file/main/FileMain/FileImg.vue

@@ -1,6 +1,6 @@
 <template>
   <img v-if="isImage" class="img" :src="props.data.url || ''" alt="" />
-  <svg-icon v-else size="100%" :icon-class="getFileImg" />
+  <svg-icon v-else :icon-class="getFileImg" style="height: 100%; width: 100%" />
 </template>
 
 <script setup lang="ts">

continew-admin-ui/src/views/system/file/main/FileMain/FileList.vue

@@ -37,11 +37,11 @@
         </a-table-column>
         <a-table-column
           title="扩展名"
-          data-index="extendName"
+          data-index="extension"
           :width="100"
         ></a-table-column>
         <a-table-column
-          title="更改时间"
+          title="修改时间"
           data-index="updateTime"
           :width="200"
         ></a-table-column>

continew-admin-ui/src/views/system/file/main/FileMain/index.vue

@@ -5,10 +5,14 @@
       <a-space wrap>
         <a-form ref="queryRef" :model="queryParams" layout="inline">
           <a-form-item hide-label>
-            <a-button type="primary" shape="round">
-              <template #icon><icon-upload /></template>
-              <template #default>上传</template>
-            </a-button>
+            <a-upload :show-file-list="false" :custom-request="handleUpload">
+              <template #upload-button>
+                <a-button type="primary" shape="round">
+                  <template #icon><icon-upload /></template>
+                  <template #default>上传</template>
+                </a-button>
+              </template>
+            </a-upload>
           </a-form-item>
           <a-form-item field="name" hide-label>
             <a-input
@@ -87,12 +91,13 @@
 </template>
 
 <script setup lang="ts">
-  import { Message, Modal } from '@arco-design/web-vue';
+  import { Message, Modal, RequestOption } from '@arco-design/web-vue';
   import { api as viewerApi } from 'v-viewer';
   import { imageTypeList } from '@/constant/file';
   import { useFileStore } from '@/store/modules/file';
   import type { ListParam, FileItem } from '@/api/system/file';
-  import { list } from '@/api/system/file';
+  import { list, del } from '@/api/system/file';
+  import { upload } from '@/api/common';
   import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
   import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
   import FileGrid from './FileGrid.vue';
@@ -178,12 +183,17 @@
   };
   // 鼠标右键
   const handleRightMenuClick = (mode: string, fileInfo: FileItem) => {
-    Message.success(`点击了${mode}`);
     if (mode === 'delete') {
       Modal.warning({
         title: '提示',
-        content: '是否删除该文件？',
+        content: `是否确定删除文件 [${fileInfo.name}]？`,
         hideCancel: false,
+        onOk: () => {
+          del(fileInfo.id).then((res) => {
+            proxy.$message.success(res.msg);
+            getList();
+          });
+        },
       });
     }
     if (mode === 'rename') {
@@ -198,11 +208,52 @@
   const handleMulDelete = () => {
     Modal.warning({
       title: '提示',
-      content: '是否确认删除？',
+      content: `是否确定删除所选的${fileStore.selectedFileIds.length}个文件？`,
       hideCancel: false,
+      onOk: () => {
+        del(fileStore.selectedFileIds).then((res) => {
+          proxy.$message.success(res.msg);
+          getList();
+        });
+      },
     });
   };
 
+  /**
+   * 上传
+   *
+   * @param options /
+   */
+  const handleUpload = (options: RequestOption) => {
+    const controller = new AbortController();
+    (async function requestWrap() {
+      const {
+        onProgress,
+        onError,
+        onSuccess,
+        fileItem,
+        name = 'file',
+      } = options;
+      onProgress(20);
+      const formData = new FormData();
+      formData.append(name as string, fileItem.file as Blob);
+      upload(formData)
+        .then((res) => {
+          onSuccess(res);
+          getList();
+          proxy.$message.success(res.msg);
+        })
+        .catch((error) => {
+          onError(error);
+        });
+    })();
+    return {
+      abort() {
+        controller.abort();
+      },
+    };
+  };
+
   /**
    * 查询
    */