feat: 文件管理

src/api/interface/system/files.ts

@@ -0,0 +1,33 @@
+/**
+ * 查询参数
+ */
+export interface FilesQuery extends PageQuery {
+  originalName: string
+  fileSuffix: string
+}
+
+/**
+ * 接收后端返回信息
+ */
+export interface FilesVO extends BaseEntity {
+  fileId: string
+  engine: string
+  bucket: string
+  fileName: string
+  originalName: string
+  sizeKb: string
+  fileSuffix: string
+}
+
+/**
+ * 传入后端的表单信息
+ */
+export interface FilesBO {
+  fileId: string
+  engine: string
+  bucket: string
+  fileName: string
+  originalName: string
+  sizeKb: string
+  fileSuffix: string
+}

src/api/module/system/files.ts

@@ -0,0 +1,44 @@
+import http from '@/axios'
+import { FilesBO, FilesQuery, FilesVO } from '@/api/interface/system/files'
+
+class FilesApi {
+  /**
+   * @name 查询分页
+   * @returns returns
+   */
+  static page = (params: FilesQuery): Promise<ResultData<any>> => {
+    return http.get<FilesVO>({ url: '/system/files/page', params })
+  }
+
+  /**
+   * @name 查询列表
+   * @returns returns
+   */
+  static list = (params: FilesBO): Promise<ResultData<any>> => {
+    return http.get<FilesVO>({ url: '/system/files/list', params })
+  }
+
+  /**
+   * @name 添加
+   * @returns returns
+   */
+  static add = (data: FilesBO): Promise<ResultData<any>> => {
+    return http.post({ url: '/system/files/add', data })
+  }
+  /**
+   * @name 更新
+   * @returns returns
+   */
+  static edit = (data: FilesBO): Promise<ResultData<any>> => {
+    return http.put({ url: '/system/files/edit', data })
+  }
+
+  /**
+   * @name 删除
+   * @returns returns
+   */
+  static delete = (data: string[]): Promise<ResultData<any>> => {
+    return http.delete({ url: '/system/files/delete', data })
+  }
+}
+export default FilesApi

src/types/auto-components.d.ts

@@ -70,6 +70,7 @@ declare module 'vue' {
     ElTransfer: typeof import('element-plus/es')['ElTransfer']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    FilesDrawer: typeof import('./../views/system/files/components/FilesDrawer.vue')['default']
     Form: typeof import('./../views/system/org/components/form.vue')['default']
     Grid: typeof import('./../components/Grid/index.vue')['default']
     GridItem: typeof import('./../components/Grid/GridItem.vue')['default']

src/views/system/config/index.vue

@@ -28,8 +28,8 @@ const proTableRef = ref<ProTableInstance>()
 const columns: ColumnProps<ConfigVO>[] = [
   { type: 'selection', width: 60, selectable: row => row.isLock !== '1' },
   { type: 'index', width: 60 },
-  { prop: 'name', label: '参数名称' },
-  { prop: 'configKey', label: '参数Key', tag: true },
+  { prop: 'name', label: '参数名称', width: 200 },
+  { prop: 'configKey', label: '参数Key', tag: true, width: 200 },
   { prop: 'configValue', label: '参数Value' },
   {
     prop: 'status',
@@ -39,7 +39,7 @@ const columns: ColumnProps<ConfigVO>[] = [
     width: 80,
     fieldNames: { label: 'dictLabel', value: 'dictValue', tagType: 'callbackShowStyle' }
   },
-  { prop: 'orderNum', label: '排序' },
+  { prop: 'orderNum', label: '排序', width: 80 },
   { prop: 'remark', label: '备注' },
   { prop: 'createByName', label: '创建人' },
   { prop: 'createTime', label: '创建时间' },
@@ -49,7 +49,7 @@ const columns: ColumnProps<ConfigVO>[] = [
 // 表格配置项
 const searchColumns: SearchProps[] = [
   { prop: 'name', label: '参数名称', el: 'input' },
-  { prop: 'configValue', label: '参数Value', el: 'input' }
+  { prop: 'configKey', label: '参数键', el: 'input' }
 ]
 
 // 获取table列表

src/views/system/files/index.vue

@@ -1,3 +1,59 @@
 <template>
-  <div>文件</div>
+  <div class="table-box">
+    <ProTable ref="proTableRef" title="参数配置" row-key="filesId" :columns="columns" :search-columns="searchColumns" :request-api="getTableList">
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button type="primary" icon="CirclePlus" @click="upload()"> 上传 </el-button>
+        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected" @click="batchDelete(scope.selectedListIds)"> 批量删除 </el-button>
+      </template>
+
+      <template #operation="{ row }">
+        <el-button v-if="row.isLock !== '1'" type="primary" link icon="Delete" @click="deleteRow(row)"> 删除 </el-button>
+      </template>
+    </ProTable>
+  </div>
 </template>
+<script lang="tsx" setup name="FilesManage">
+import FilesApi from '@/api/module/system/files'
+import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
+import { useHandleData } from '@/hooks'
+import { FilesQuery, FilesVO } from '@/api/interface/system/files'
+const proTableRef = ref<ProTableInstance>()
+
+// 表格配置项
+const columns: ColumnProps<FilesVO>[] = [
+  { type: 'selection', width: 60 },
+  { type: 'index', width: 60 },
+  { prop: 'originalName', label: '文件名称' },
+  { prop: 'fileName', label: '文件ID', tag: true },
+  { prop: 'sizeInfo', label: '文件大小' },
+  { prop: 'fileSuffix', label: '文件类型' },
+  { prop: 'createByName', label: '创建人' },
+  { prop: 'createTime', label: '创建时间' },
+  { prop: 'operation', label: '操作', width: 250, fixed: 'right' }
+]
+
+// 表格配置项
+const searchColumns: SearchProps[] = [
+  { prop: 'originalName', label: '文件名称', el: 'input' },
+  { prop: 'fileSuffix', label: '文件类型', el: 'input' }
+]
+
+// 获取table列表
+const getTableList = (params: FilesQuery) => FilesApi.page(params)
+
+// 单行删除
+const deleteRow = async (row: FilesVO) => {
+  await useHandleData(FilesApi.delete, [row.fileId], `删除【${row.originalName}】文件`)
+  proTableRef.value?.getTableList()
+}
+
+// 批量删除信息
+const batchDelete = async (ids: (string | number)[]) => {
+  await useHandleData(FilesApi.delete, ids, '删除所选数据')
+  proTableRef.value?.clearSelection()
+  proTableRef.value?.getTableList()
+}
+
+const upload = () => {}
+</script>