refactor: 重构文件目录系统

src/api/infra/category/index.ts

@@ -1,43 +1,43 @@
-import request from '@/config/axios'
-
-// 文件目录 VO
-export interface CategoryVO {
-  id: number // 主键
-  code: string // 编号
-  name: string // 文件夹名称
-  parentId: number // 父id
-  description: string // 描述
-}
-
-// 文件目录 API
-export const CategoryApi = {
-  // 查询文件目录列表
-  getCategoryList: async (params) => {
-    return await request.get({ url: `/infra/category/list`, params })
-  },
-
-  // 查询文件目录详情
-  getCategory: async (id: number) => {
-    return await request.get({ url: `/infra/category/get?id=` + id })
-  },
-
-  // 新增文件目录
-  createCategory: async (data: CategoryVO) => {
-    return await request.post({ url: `/infra/category/create`, data })
-  },
-
-  // 修改文件目录
-  updateCategory: async (data: CategoryVO) => {
-    return await request.put({ url: `/infra/category/update`, data })
-  },
-
-  // 删除文件目录
-  deleteCategory: async (id: number) => {
-    return await request.delete({ url: `/infra/category/delete?id=` + id })
-  },
-
-  // 导出文件目录 Excel
-  exportCategory: async (params) => {
-    return await request.download({ url: `/infra/category/export-excel`, params })
-  },
-}
+import request from '@/config/axios'
+
+// 文件目录 VO
+export interface CategoryVO {
+  id: number // 主键
+  code: string // 编号
+  name: string // 文件夹名称
+  parentId: number // 父id
+  description: string // 描述
+}
+
+// 文件目录 API
+export const CategoryApi = {
+  // 查询文件目录列表
+  getCategoryList: async (params?: any) => {
+    return await request.get({ url: `/infra/category/list`, params })
+  },
+
+  // 查询文件目录详情
+  getCategory: async (id: number) => {
+    return await request.get({ url: `/infra/category/get?id=` + id })
+  },
+
+  // 新增文件目录
+  createCategory: async (data: CategoryVO) => {
+    return await request.post({ url: `/infra/category/create`, data })
+  },
+
+  // 修改文件目录
+  updateCategory: async (data: CategoryVO) => {
+    return await request.put({ url: `/infra/category/update`, data })
+  },
+
+  // 删除文件目录
+  deleteCategory: async (id: number) => {
+    return await request.delete({ url: `/infra/category/delete?id=` + id })
+  },
+
+  // 导出文件目录 Excel
+  exportCategory: async (params?: any) => {
+    return await request.download({ url: `/infra/category/export-excel`, params })
+  }
+}

src/api/infra/file/index.ts

@@ -4,6 +4,7 @@ export interface FilePageReqVO extends PageParam {
   path?: string
   type?: string
   createTime?: Date[]
+  categoryId?: number
 }
 
 // 文件预签名地址 Response VO
@@ -45,6 +46,6 @@ export const updateFile = (data: any) => {
 }
 
 // 上传文件
-export const updateFileEx = (data: any) => {
-  return request.upload({ url: '/infra/file/uploadEx', data })
+export const updateFileEx = (data: any, params?: any) => {
+  return request.upload({ url: '/infra/file/uploadEx', params, data })
 }

src/components/UploadFile/src/useUpload.ts

@@ -14,7 +14,7 @@ export const useUpload = () => {
   // 是否使用前端直连上传
   const isClientUpload = UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE
   // 重写ElUpload上传方法
-  const httpRequest = async (options: UploadRequestOptions) => {
+  const httpRequest = async (options: UploadRequestOptions, params?: any) => {
     // 模式一：前端上传
     if (isClientUpload) {
       // 1.1 生成文件名称
@@ -22,21 +22,23 @@ export const useUpload = () => {
       // 1.2 获取文件预签名地址
       const presignedInfo = await FileApi.getFilePresignedUrl(fileName)
       // 1.3 上传文件（不能使用 ElUpload 的 ajaxUpload 方法的原因：其使用的是 FormData 上传，Minio 不支持）
-      return axios.put(presignedInfo.uploadUrl, options.file, {
-        headers: {
-          'Content-Type': options.file.type,
-        }
-      }).then(() => {
-        // 1.4. 记录文件信息到后端（异步）
-        createFile(presignedInfo, fileName, options.file)
-        // 通知成功，数据格式保持与后端上传的返回结果一致
-        return { data: presignedInfo.url }
-      })
+      return axios
+        .put(presignedInfo.uploadUrl, options.file, {
+          headers: {
+            'Content-Type': options.file.type
+          }
+        })
+        .then(() => {
+          // 1.4. 记录文件信息到后端（异步）
+          createFile(presignedInfo, fileName, options.file)
+          // 通知成功，数据格式保持与后端上传的返回结果一致
+          return { data: presignedInfo.url }
+        })
     } else {
       // 模式二：后端上传
       // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子
       return new Promise((resolve, reject) => {
-        FileApi.updateFileEx({ file: options.file })
+        FileApi.updateFileEx({ file: options.file }, params)
           .then((res) => {
             if (res.code === 0) {
               resolve(res)

src/views/infra/category/CategoryForm.vue

@@ -62,13 +62,13 @@ const formRef = ref() // 表单 Ref
 const categoryTree = ref() // 树形结构
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
   // 修改时，设置数据
-  if (id) {
+  if (type === 'update') {
     formLoading.value = true
     try {
       formData.value = await CategoryApi.getCategory(id)
@@ -76,6 +76,10 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  // 新增时，设置默认上一级
+  else{
+    formData.value.parentId = id;
+  }
   await getCategoryTree()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗

src/views/infra/category/FolderTree.vue

@@ -0,0 +1,201 @@
+<template>
+  <div className="folder-header" v-if="folderList && folderList.length > 0">
+    <el-input v-model="folderName" class="!w-240px" clearable placeholder="请输入文件夹名称">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+    <el-space>
+      <el-button
+        type="success"
+        plain
+        @click="handleExport"
+        :loading="exportLoading"
+        v-hasPermi="['infra:category:export']"
+      >
+        <Icon icon="ep:download" class="mr-5px" /> 导出
+      </el-button>
+      <el-button type="danger" plain @click="toggleExpandAll">
+        <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
+      </el-button>
+    </el-space>
+  </div>
+  <div>
+    <el-tree
+      ref="treeRef"
+      v-if="refreshTable"
+      :load="folderLoading"
+      :data="folderList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      :default-expand-all="isExpandAll"
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    >
+      <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          <span>
+            <el-button type="primary" size="small" plain @click="appendFolder(data)"
+              >新增</el-button
+            >
+            <el-button
+              style="margin-left: 8px"
+              type="warning"
+              size="small"
+              plain
+              @click="updateFolder(data)"
+              >修改</el-button
+            >
+            <el-button
+              :class="{ hidden: data.children !== undefined }"
+              style="margin-left: 8px"
+              type="danger"
+              size="small"
+              plain
+              @click="deleteFolder(data)"
+              >删除</el-button
+            >
+          </span>
+        </span>
+      </template>
+      <template #empty>
+        <el-button type="primary" plain @click="appendFolder({ id: 0 })">新增文件夹</el-button>
+      </template>
+    </el-tree>
+  </div>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CategoryForm ref="formRef" @success="getFolderList" />
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus'
+import { defaultProps, handleTree } from '@/utils/tree'
+import { CategoryApi, CategoryVO } from '@/api/infra/category'
+import CategoryForm from './CategoryForm.vue'
+import download from '@/utils/download'
+
+defineOptions({ name: 'CategoryFolderTree' })
+const emits = defineEmits(['node-click'])
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const folderLoading = ref(false)
+const folderName = ref('')
+const folderList = ref<Tree[]>([])
+const refreshTable = ref(true) // 重新渲染表格状态
+const exportLoading = ref(false) // 导出的加载中
+const isExpandAll = ref(true) // 是否展开，默认全部展开
+
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const formRef = ref()
+
+/** 查询文件夹列表 */
+const getFolderList = async () => {
+  folderLoading.value = true
+  try {
+    const data = await CategoryApi.getCategoryList()
+    folderList.value = handleTree(data, 'id', 'parentId')
+    // 重载树
+    refreshTable.value = false
+    await nextTick()
+    refreshTable.value = true
+  } finally {
+    folderLoading.value = false
+  }
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 监听过滤项 */
+watch(folderName, (val) => {
+  treeRef.value!.filter(val)
+})
+
+/** 新增文件夹 */
+const appendFolder = (data: Tree) => {
+  formRef.value.open('create', data.id)
+}
+
+/** 修改文件夹 */
+const updateFolder = (data: Tree) => {
+  formRef.value.open('update', data.id)
+}
+
+/** 删除文件夹 */
+const deleteFolder = async (data: Tree) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await CategoryApi.deleteCategory(data.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    getFolderList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await CategoryApi.exportCategory()
+    download.excel(data, '文件目录.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 展开/折叠操作 */
+const toggleExpandAll = async () => {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  await nextTick()
+  refreshTable.value = true
+}
+
+// invoke
+getFolderList()
+</script>
+
+<style scoped lang="scss">
+.folder-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+:deep(.el-tree-node__children) {
+  margin-top: 7px;
+}
+</style>

src/views/infra/category/index.vue

@@ -1,199 +1,186 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="文件夹名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入文件夹名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="编号" prop="code">
-        <el-input
-          v-model="queryParams.code"
-          placeholder="请输入编号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['infra:category:create']"
+  <el-row :gutter="20">
+    <!-- 左侧文件夹树 -->
+    <el-col :span="6" :xs="24">
+      <ContentWrap class="h-1/1">
+        <FolderTree @node-click="handleNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="18" :xs="24">
+      <!-- 搜索 -->
+      <ContentWrap>
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="68px"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['infra:category:export']"
+          <el-form-item label="文件名" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入用户名称"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item label="创建时间" prop="createTime">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="datetimerange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+            <el-upload
+              v-if="curCategoryId"
+              :show-file-list="false"
+              style="margin-left: 12px"
+              :action="uploadUrl"
+              :http-request="handleRequest"
+              multiple
+            >
+              <el-button type="primary" plain> <Icon icon="ep:plus" /> 新增 </el-button>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+      <!-- 文件列表 -->
+      <ContentWrap>
+        <el-table
+          v-loading="fileListLoading"
+          :data="fileList"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+          row-key="id"
         >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-        <el-button type="danger" plain @click="toggleExpandAll">
-          <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      row-key="id"
-      :default-expand-all="isExpandAll"
-      v-if="refreshTable"
-    >
-      <el-table-column label="id" align="center" prop="id" />
-      <el-table-column label="文件夹名称" align="center" prop="name" />
-      <el-table-column label="编号" align="center" prop="code" />
-      <el-table-column label="上一级id" align="center" prop="parentId" />
-      <el-table-column label="描述" align="center" prop="description" />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:category:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:category:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <CategoryForm ref="formRef" @success="getList" />
+          <el-table-column label="id" align="center" prop="id" width="150" />
+          <el-table-column label="文件名称" align="center" prop="name" />
+          <el-table-column label="文件地址" align="center" prop="url" />
+          <el-table-column
+            label="创建时间"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            width="180"
+          />
+          <el-table-column label="操作" align="center" width="200">
+            <template #default="scope">
+              <el-button link type="primary" @click="downloadFile(scope.row.url)"> 下载 </el-button>
+              <el-button link type="danger" @click="deleteFile(scope.row.id)"> 删除 </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getFileList"
+        />
+      </ContentWrap>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
-import { handleTree } from '@/utils/tree'
-import download from '@/utils/download'
 import { CategoryApi, CategoryVO } from '@/api/infra/category'
-import CategoryForm from './CategoryForm.vue'
+import * as FileApi from '@/api/infra/file'
+import FolderTree from './FolderTree.vue'
+import { ElTree, UploadRequestOptions } from 'element-plus'
+import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload'
+import { dateFormatter } from '@/utils/formatTime'
 
 /** 文件目录 列表 */
 defineOptions({ name: 'Category' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
+const { uploadUrl, httpRequest } = useUpload()
 
-const loading = ref(true) // 列表的加载中
-const list = ref<CategoryVO[]>([]) // 列表的数据
-const queryParams = reactive({
-  code: undefined,
-  name: undefined,
-})
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await CategoryApi.getCategoryList(queryParams)
-    list.value = handleTree(data, 'id', 'parentId')
-  } finally {
-    loading.value = false
-  }
-}
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  createTime: [],
+  name: undefined
+})
+const total = ref<number>(0)
+
+// 当前文件夹id
+const curCategoryId = ref<number>()
+const fileList = ref([])
+const fileListLoading = ref(false)
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
-  getList()
+  getFileList()
 }
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
   handleQuery()
 }
 
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
+/** 获取文件列表 */
+const getFileList = async () => {
+  fileListLoading.value = true
   try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await CategoryApi.deleteCategory(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await CategoryApi.exportCategory(queryParams)
-    download.excel(data, '文件目录.xls')
-  } catch {
+    const data = await FileApi.getFilePage({
+      ...queryParams,
+      categoryId: curCategoryId.value
+    })
+    fileList.value = data.list
+    total.value = data.total
   } finally {
-    exportLoading.value = false
+    fileListLoading.value = false
   }
 }
 
-/** 展开/折叠操作 */
-const isExpandAll = ref(true) // 是否展开，默认全部展开
-const refreshTable = ref(true) // 重新渲染表格状态
-const toggleExpandAll = async () => {
-  refreshTable.value = false
-  isExpandAll.value = !isExpandAll.value
-  await nextTick()
-  refreshTable.value = true
+/** 处理文件夹被点击 */
+const handleNodeClick = async (data: Tree) => {
+  curCategoryId.value = data.id
+  getFileList()
 }
 
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
+/** 上传文件 */
+const handleRequest = async (f: UploadRequestOptions) => {
+  if (!curCategoryId.value) {
+    message.error('请先选择一个文件目录')
+    return
+  }
+  try {
+    await httpRequest(f, { categoryId: curCategoryId.value })
+    message.success('新增成功')
+    getFileList()
+  } catch (e) {
+    message.error('上传文件失败')
+    console.error(e)
+  }
+}
+
+/** 下载文件 */
+const downloadFile = (url: string) => {
+  window.open(url, '_blank')
+}
+
+/** 删除文件 */
+const deleteFile = async (id: number) => {
+  // 删除的二次确认
+  await message.delConfirm()
+  // 发起删除
+  await FileApi.deleteFile(id)
+  message.success(t('common.delSuccess'))
+  // 刷新列表
+  getFileList()
+}
 </script>