feat(projects): add file manage

paynezhuang · Nov 27, 2024 · 3896f31 · 3896f31
1 parent 99d99f9
commit 3896f31
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 29 deletions.
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
@@ -58,7 +58,8 @@ const local: App.I18n.Schema = {
     createUser: 'Create User',
     createTime: 'Create Time',
     updateUser: 'Update User',
-    updateTime: 'Update Time'
+    updateTime: 'Update Time',
+    isNotDevEnvTip: 'Current is not a development environment, cannot perform this operation'
   },
   request: {
     logout: 'Logout user after request failed',
@@ -914,7 +915,10 @@ const local: App.I18n.Schema = {
           category: 'Please select category',
           location: 'Please select storage location',
           name: 'Please enter file name'
-        }
+        },
+        upload: 'Upload File',
+        uploadSuccess: 'Upload Success',
+        preview: 'Preview'
       }
     }
   },

diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
@@ -58,7 +58,8 @@ const local: App.I18n.Schema = {
     createUser: '创建用户',
     createTime: '创建时间',
     updateUser: '更新用户',
-    updateTime: '更新时间'
+    updateTime: '更新时间',
+    isNotDevEnvTip: '当前非开发环境，无法进行此操作'
   },
   request: {
     logout: '请求失败后登出用户',
@@ -913,7 +914,10 @@ const local: App.I18n.Schema = {
           category: '请选择分类',
           location: '请选择存储位置',
           name: '请输入文件名称'
-        }
+        },
+        upload: '上传文件',
+        uploadSuccess: '上传成功',
+        preview: '预览'
       }
     }
   },

diff --git a/src/service/api/monitor/file.ts b/src/service/api/monitor/file.ts
@@ -20,4 +20,24 @@ export function fetchDeleteFile(data: Api.Common.DeleteParams) {
   });
 }
 
+/** upload file */
+export function fetchUploadFile(data: FormData) {
+  return request<boolean>({
+    url: '/mon_file/upload',
+    method: 'POST',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data
+  });
+}
+
+/** preview file */
+export function fetchPreviewFile(id: string) {
+  return request<string>({
+    url: `/mon_file/preview/${id}`,
+    method: 'GET'
+  });
+}
+
 // =============== File End  ===============
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
@@ -342,6 +342,7 @@ declare namespace App {
         createTime: string;
         updateUser: string;
         updateTime: string;
+        isNotDevEnvTip: string;
       };
       request: {
         logout: string;
@@ -1099,6 +1100,9 @@ declare namespace App {
               location: string;
               name: string;
             };
+            upload: string;
+            uploadSuccess: string;
+            preview: string;
           };
         };
       };

diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
+    'IconIc:baselineCloudUpload': typeof import('~icons/ic/baseline-cloud-upload')['default']
     'IconIc:outlineRefresh': typeof import('~icons/ic/outline-refresh')['default']
     'IconIc:roundKeyboardArrowDown': typeof import('~icons/ic/round-keyboard-arrow-down')['default']
     'IconIc:roundKeyboardArrowUp': typeof import('~icons/ic/round-keyboard-arrow-up')['default']
@@ -96,6 +97,7 @@ declare module 'vue' {
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTree: typeof import('naive-ui')['NTree']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
+    NUpload: typeof import('naive-ui')['NUpload']
     NWatermark: typeof import('naive-ui')['NWatermark']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']

diff --git a/src/views/monitor/file/index.vue b/src/views/monitor/file/index.vue
@@ -1,11 +1,12 @@
 <script setup lang="tsx">
+import type { UploadCustomRequestOptions } from 'naive-ui';
 import { NButton, NPopconfirm } from 'naive-ui';
 import { useAppStore } from '@/store/modules/app';
 import { useAuth } from '@/hooks/business/auth';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { $t } from '@/locales';
 import { transDeleteParams } from '@/utils/common';
-import { fetchDeleteFile, fetchGetFileList } from '@/service/api';
+import { fetchDeleteFile, fetchGetFileList, fetchPreviewFile, fetchUploadFile } from '@/service/api';
 import { useDict } from '@/hooks/business/dict';
 import { formatDateTime } from '@/utils/date';
 import FileSearch from './modules/file-search.vue';
@@ -20,6 +21,8 @@ const { hasAuth } = useAuth();
 
 const { dictTag } = useDict();
 
+const { DEV } = import.meta.env;
+
 const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetFileList,
   apiParams: {
@@ -31,6 +34,11 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
     name: null
   },
   columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
     {
       key: 'index',
       title: $t('common.index'),
@@ -41,57 +49,48 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
       key: 'orderNo',
       title: $t('page.monitor.file.orderNo'),
       align: 'center',
-      minWidth: 100
+      minWidth: 150,
+      width: 150
     },
     {
       key: 'category',
       title: $t('page.monitor.file.category'),
       align: 'center',
       minWidth: 100,
-      render: row => dictTag(row.category, 'file_record_category')
+      render: row => dictTag('file_record_category', row.category)
     },
     {
       key: 'location',
       title: $t('page.monitor.file.location'),
       align: 'center',
       minWidth: 100,
-      render: row => dictTag(row.location, 'file_record_location')
+      render: row => dictTag('file_record_location', row.location)
     },
     {
       key: 'name',
       title: $t('page.monitor.file.name'),
       align: 'center',
-      minWidth: 100
-    },
-    {
-      key: 'suffix',
-      title: $t('page.monitor.file.suffix'),
-      align: 'center',
-      minWidth: 100
-    },
-    {
-      key: 'path',
-      title: $t('page.monitor.file.path'),
-      align: 'center',
-      minWidth: 100
+      minWidth: 150,
+      width: 150,
+      ellipsis: {
+        tooltip: true
+      }
     },
     {
       key: 'size',
       title: $t('page.monitor.file.size'),
       align: 'center',
       minWidth: 100
     },
-    {
-      key: 'uuid',
-      title: $t('page.monitor.file.uuid'),
-      align: 'center',
-      minWidth: 100
-    },
     {
       key: 'contentType',
       title: $t('page.monitor.file.contentType'),
       align: 'center',
-      minWidth: 100
+      minWidth: 200,
+      width: 200,
+      ellipsis: {
+        tooltip: true
+      }
     },
     {
       key: 'remark',
@@ -109,6 +108,7 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
       key: 'createTime',
       title: $t('common.createTime'),
       align: 'center',
+      width: 180,
       minWidth: 180,
       render: row => formatDateTime(row.createTime)
     },
@@ -118,8 +118,14 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagi
       align: 'center',
       width: 200,
       minWidth: 200,
+      fixed: 'right',
       render: row => (
         <div class="flex-center gap-8px">
+          {hasAuth('mon:file:preview') && (
+            <NButton type="info" quaternary size="small" onClick={() => handlePreview(row.id)}>
+              {$t('page.monitor.file.preview')}
+            </NButton>
+          )}
           {hasAuth('mon:file:delete') && (
             <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
               {{
@@ -157,6 +163,30 @@ async function handleBatchDelete() {
     await onBatchDeleted();
   }
 }
+
+// custom request upload
+async function customRequest({ file, onFinish }: UploadCustomRequestOptions) {
+  if (!DEV) {
+    window.$message?.error($t('common.isNotDevEnvTip'));
+    return;
+  }
+  const formData = new FormData();
+  formData.append('file', file.file as File);
+  const { error, data: result } = await fetchUploadFile(formData);
+  if (!error && result) {
+    onFinish();
+    getData();
+    window.$message?.success($t('page.monitor.file.uploadSuccess'));
+  }
+}
+
+// preview file
+async function handlePreview(id: string) {
+  const { error, data: result } = await fetchPreviewFile(id);
+  if (!error && result) {
+    window.open(result);
+  }
+}
 </script>
 
 <template>
@@ -172,7 +202,18 @@ async function handleBatchDelete() {
         @add="handleAdd"
         @delete="handleBatchDelete"
         @refresh="getData"
-      />
+      >
+        <template #suffix>
+          <NUpload :custom-request="customRequest">
+            <NButton v-if="hasAuth('mon:file:upload')" size="small" type="primary" ghost>
+              <template #icon>
+                <icon-ic:baseline-cloud-upload class="text-icon" />
+              </template>
+              {{ $t('page.monitor.file.upload') }}
+            </NButton>
+          </NUpload>
+        </template>
+      </TableHeaderOperation>
       <NDataTable
         v-model:checked-row-keys="checkedRowKeys"
         remote