附件管理优化

src/api/sys/department.ts

@@ -35,6 +35,7 @@ export function addDepartment(params: AddDepartmentParams) {
     params,
   });
 }
+
 /**
  * @description: 批量删除部门
  */

src/api/sys/general.ts

@@ -8,6 +8,8 @@ import {
   DeleteConfigInfoParams,
   ConfigNameParams,
   configNameExistModel,
+  DeleteAttachmentParams,
+  DeleteBatchesParams,
 } from './model/generalModel';
 
 enum Api {
@@ -16,7 +18,7 @@ enum Api {
   ConfigUrl = '/general/config/', // 系统配置表
   FileUrl = '/general/file/', // 上传文件
   ConfigNameExistUrl = '/general/exist', // 检测变量名是否已经存在
-  AttachmentUrl = '/general/attachment/', // 检测变量名是否已经存在
+  AttachmentUrl = '/general/attachment/', // 附件
 }
 
 /**
@@ -91,9 +93,31 @@ export function configNameExist(params: ConfigNameParams) {
 /**
  * @description: 获取附件列表
  */
-export function getAttachmentList() {
+export function getAttachmentList(params) {
   return defHttp.request<CommonRowModel>({
     url: Api.AttachmentUrl,
     method: 'GET',
+    params,
+  });
+}
+
+/**
+ * @description: 删除附件 id
+ */
+export function deleteAttachment(params: DeleteAttachmentParams) {
+  return defHttp.request<CommonRowModel>({
+    url: Api.AttachmentUrl + params.id,
+    method: 'DELETE',
+  });
+}
+
+/**
+ * @description: 批量删除附件
+ */
+export function deleteBatchesAttachment(params: DeleteBatchesParams) {
+  return defHttp.request<CommonRowModel>({
+    url: Api.AttachmentUrl,
+    method: 'DELETE',
+    params,
   });
 }

src/api/sys/model/generalModel.ts

@@ -59,3 +59,17 @@ export interface DeleteConfigInfoParams {
 export interface ConfigNameParams {
   name: string;
 }
+
+/**
+ * @description: 删除附件参数
+ */
+export interface DeleteAttachmentParams {
+  id: number;
+}
+
+/**
+ * @description: 批量删除附件参数
+ */
+export interface DeleteBatchesParams {
+  ids: string | string[] | number[];
+}

src/views/general/attachment/data.ts

@@ -1,4 +1,4 @@
-import { BasicColumn } from '/@/components/Table';
+import { FormProps, BasicColumn } from '/@/components/Table';
 import Image from './customComponents/Image.vue';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
@@ -57,7 +57,7 @@ export const columns: BasicColumn[] = [
     width: 100,
   },
   {
-    title: '图片类型',
+    title: '文件类型',
     align: 'center',
     dataIndex: 'imagetype',
     width: 100,
@@ -96,3 +96,47 @@ export const columns: BasicColumn[] = [
     },
   },
 ];
+
+export function getFormConfig(): Partial<FormProps> {
+  return {
+    labelWidth: 100,
+    schemas: [
+      {
+        field: `id`,
+        label: `ID`,
+        component: 'Input',
+        componentProps: {
+          placeholder: 'ID',
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `imagetype`,
+        label: `文件类型`,
+        component: 'Input',
+        componentProps: {
+          placeholder: '文件类型',
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+      {
+        field: `createtime`,
+        label: `创建日期`,
+        component: 'RangePicker',
+        componentProps: {
+          showTime: true,
+        },
+        colProps: {
+          xl: 12,
+          xxl: 8,
+        },
+      },
+    ],
+  };
+}

src/views/general/attachment/index.vue

@@ -7,11 +7,7 @@
   >
     <a-button type="default" class="mr-2"> 全部 </a-button>
     <a-button type="default" class="mr-2"> 图片 </a-button>
-    <a-button type="default" class="mr-2"> 音频 </a-button>
-    <a-button type="default" class="mr-2"> 视频 </a-button>
-    <a-button type="default" class="mr-2"> 文档 </a-button>
-    <a-button type="default" class="mr-2"> 应用 </a-button>
-    <a-button type="default" class="mr-2"> 压缩包 </a-button>
+    <a-button type="default" class="mr-2"> 文本 </a-button>
     <BasicTable ref="tableRef" :canResize="true" @register="registerTable" showTableSetting>
       <template #action="{ record }">
         <TableAction :actions="createActions(record)" stopButtonPropagation />
@@ -38,8 +34,8 @@
 </template>
 <script lang="ts">
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { defineComponent, nextTick, reactive, ref, toRefs, unref } from 'vue';
-  // import Upload from '/@/components/customComponents/upload.vue';
+  import { defineComponent, nextTick, reactive, ref, toRefs, unref, createVNode } from 'vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { Upload, Progress, Modal } from 'ant-design-vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import { adapt } from '/@/utils/adapt';
@@ -52,8 +48,8 @@
     EditRecordRow,
     TableActionType,
   } from '/@/components/Table';
-  import { columns } from './data';
-  import { getAttachmentList } from '/@/api/sys/general';
+  import { getFormConfig, columns } from './data';
+  import { getAttachmentList, deleteAttachment, deleteBatchesAttachment } from '/@/api/sys/general';
   import { uploadApi } from '/@/api/sys/upload';
 
   export default defineComponent({
@@ -78,9 +74,13 @@
       });
       const tableRef = ref<Nullable<TableActionType>>(null);
       const [registerTable] = useTable({
+        rowSelection: {
+          type: 'checkbox',
+        },
+        formConfig: getFormConfig(),
         columns: columns,
         maxHeight: tableHeight,
-        afterFetch: afterFetch,
+        beforeFetch: beforeFetch,
         api: getAttachmentList,
         actionColumn: {
           width: 160,
@@ -92,9 +92,37 @@
         showIndexColumn: false,
         pagination: true,
       });
-      function afterFetch(res) {
-        console.log(`res`, res);
+      function getTableAction() {
+        // 获取组件
+        const tableAction = unref(tableRef);
+        if (!tableAction) {
+          throw new Error('tableAction is null');
+        }
+        return tableAction;
       }
+
+      // 请求之前处理
+      function beforeFetch(params) {
+        for (let k in params) {
+          if (k !== 'page' && k !== 'pageSize' && k !== 'field' && k !== 'order') {
+            if (params[k] === '') {
+              delete params[k];
+            } else {
+              if (!params.filter) {
+                params.filter = {};
+              }
+              params.filter[k] = params[k];
+              delete params[k];
+            }
+          }
+        }
+        params.filter = JSON.stringify(params.filter);
+        params.offset = params.page;
+        params.limit = params.pageSize;
+        delete params.page;
+        delete params.pageSize;
+      }
+
       function beforeUpload(file) {
         uploadApi({ file })
           .then((res) => {
@@ -109,15 +137,6 @@
         return false;
       }
 
-      function getTableAction() {
-        // 获取组件
-        const tableAction = unref(tableRef);
-        if (!tableAction) {
-          throw new Error('tableAction is null');
-        }
-        return tableAction;
-      }
-
       function handleChange(info) {
         console.log(`info`, info);
       }
@@ -128,30 +147,57 @@
         state.group = group.toLowerCase();
       }
 
-      function handleTableReset() {
-        getTableAction().reload();
-      }
-
-      async function handleEdit(record: Recordable) {
-        console.log(`record`, record);
-        console.log('=====编辑');
-      }
+      // async function handleEdit(record: Recordable) {
+      //   console.log(`record`, record);
+      //   console.log('=====编辑');
+      // }
       async function handleDelete(record: Recordable) {
-        console.log(`record`, record);
-        console.log('删除=====');
+        console.log(record);
+        await deleteAttachment({ id: record.id }).then((res) => {
+          console.log(res);
+          getTableAction().showTableSearch();
+          getTableAction().reload();
+          success('删除成功!');
+        });
       }
+
       async function deleteBatches() {
-        console.log('批量删除=====');
+        const keys = await getTableAction().getSelectRowKeys();
+        const count = keys.length;
+        const ids = keys.toString();
+        if (!ids) {
+          return;
+        }
+        Modal.confirm({
+          title: '删除提示',
+          icon: createVNode(ExclamationCircleOutlined),
+          content: '确定删除选中的' + count + '项?',
+          okText: '确定',
+          okType: 'danger',
+          cancelText: '取消',
+          maskClosable: true,
+          async onOk() {
+            await deleteBatchesAttachment({ ids }).then((res) => {
+              console.log(res);
+              getTableAction().reload();
+              success('删除成功!');
+              getTableAction().setSelectedRowKeys([]);
+            });
+          },
+          onCancel() {
+            console.log('Cancel');
+          },
+        });
       }
 
       function createActions(record: EditRecordRow): ActionItem[] {
         return [
-          {
-            label: '编辑',
-            icon: 'ant-design:edit-outlined',
-            color: 'warning',
-            onClick: handleEdit.bind(null, record),
-          },
+          // {
+          //   label: '编辑',
+          //   icon: 'ant-design:edit-outlined',
+          //   color: 'warning',
+          //   onClick: handleEdit.bind(null, record),
+          // },
           {
             label: '删除',
             color: 'error',
@@ -172,7 +218,6 @@
         beforeUpload,
         handleChange,
         handleGroupBtn,
-        handleTableReset,
         ...toRefs(state),
       };
     },