feat: 🎉 导入导出

用户管理加入导入导出

web/src/views/system/user/api.ts

@@ -1,4 +1,4 @@
-import { request } from '/@/utils/service';
+import { request,downloadFile } from '/@/utils/service';
 import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/user/';
@@ -48,3 +48,11 @@ export function DelObj(id: DelReq) {
         data: { id },
     });
 }
+
+export function exportData(params:any){
+    return downloadFile({
+        url: apiPrefix + 'export_data/',
+        params: params,
+        method: 'get'
+    })
+}

web/src/views/system/user/crud.tsx

@@ -20,6 +20,10 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 		return await api.AddObj(form);
 	};
 
+	const exportRequest = async (query: UserPageQuery) => {
+		return await api.exportData(query)
+	}
+
 	//权限判定
 	const hasPermissions:any = inject('$hasPermissions');
 
@@ -41,6 +45,13 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 					add: {
 						show: hasPermissions('user:Create')
 						// show:true
+					},
+					export:{
+						text:"导出",//按钮文字
+						title:"导出",//鼠标停留显示的信息
+						click(){
+							return exportRequest(crudExpose.getSearchFormData())
+						}
 					}
 				}
 			},

web/src/views/system/user/index.vue

@@ -30,10 +30,15 @@
 			</el-col>
 			<el-col xs="24" :sm="16" :md="18" :lg="20" :xl="20" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
-					<fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
+					<fs-crud ref="crudRef" v-bind="crudBinding">
+            <template #actionbar-right>
+              <importExcel  api="api/system/user/" >导入 </importExcel>
+            </template>
+          </fs-crud>
 				</el-card>
 			</el-col>
 		</el-row>
+
 	</fs-page>
 </template>
 
@@ -42,11 +47,9 @@ import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import * as api from './api';
 import { ElTree } from 'element-plus';
-import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
+import { ref, onMounted, watch, toRaw } from 'vue';
 import XEUtils from 'xe-utils';
-import { errorMessage, successMessage } from '../../../utils/message';
-import { GetDept } from './api';
-import { dictionary } from '/@/utils/dictionary';
+import importExcel from '/@/components/importExcel/index.vue'
 
 interface Tree {
 	id: number;