optimize: ♻️ 优化部门代码

src/api/v1/files.ts

@@ -1,30 +1,27 @@
 import { http } from '@/api/service/request';
 import type { BaseResult, ResultTable } from '@/api/service/types';
 
-/**
- * 系统文件管理---获取系统文件管理列表
- */
+/** 系统文件管理---获取系统文件管理列表 */
 export const fetchGetFilesList = (data: any) => {
 	return http.request<BaseResult<ResultTable>>('get', `files/getFilesList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
-/**
- * 系统文件管理---添加系统文件管理
- */
+/** 系统文件管理---下载系统文件 */
+export const fetchDownloadFiles = (data: any) => {
+	return http.request<any>('get', `files/downloadFiles/${data.id}`);
+};
+
+/** 系统文件管理---添加系统文件管理 */
 export const fetchAddFiles = (data: any) => {
 	return http.request<BaseResult<object>>('post', 'files/addFiles', { data });
 };
 
-/**
- * 系统文件管理---更新系统文件管理
- */
+/** 系统文件管理---更新系统文件管理 */
 export const fetchUpdateFiles = (data: any) => {
 	return http.request<BaseResult<object>>('put', 'files/updateFiles', { data });
 };
 
-/**
- * 系统文件管理---删除系统文件管理
- */
+/** 系统文件管理---删除系统文件管理 */
 export const fetchDeleteFiles = (data: any) => {
-	return http.request<BaseResult<object>>('delete', 'files/deleteFiles', { data });
+	return http.request<BaseResult<any>>('delete', 'files/deleteFiles', { data });
 };

src/components/CropperPreview/src/index.vue

@@ -4,10 +4,6 @@ import ReCropper from '@/components/ReCropper';
 import { formatBytes } from '@pureadmin/utils';
 import { $t } from '@/plugins/i18n';
 
-defineOptions({
-	name: 'ReCropperPreview',
-});
-
 defineProps({
 	imgSrc: String,
 });
@@ -35,7 +31,7 @@ defineExpose({ hidePopover });
 
 <template>
 	<div v-loading="!showPopover" element-loading-background="transparent">
-		<el-popover ref="popoverRef" :visible="showPopover" placement="right" width="18vw">
+		<el-popover ref="popoverRef" :visible="showPopover" placement="right" popper-style="top:260px" width="18vw">
 			<template #reference>
 				<div class="w-[18vw]">
 					<ReCropper ref="refCropper" :src="imgSrc" circled @cropper="onCropper" @readied="showPopover = true" />
@@ -43,7 +39,7 @@ defineExpose({ hidePopover });
 				</div>
 			</template>
 			<div class="flex flex-wrap justify-center items-center text-center">
-				<el-image v-if="cropperImg" :preview-src-list="Array.of(cropperImg)" :src="cropperImg" fit="cover" />
+				<el-image v-if="cropperImg" :preview-src-list="Array.of(cropperImg)" :src="cropperImg" class="cropper-img-preview" fit="contain" />
 				<div v-if="infos" class="mt-1">
 					<p>{{ $t('image_size') }}：{{ parseInt(infos.width) }} × {{ parseInt(infos.height) }}{{ $t('pixel') }}</p>
 					<p>{{ $t('file_size') }}：{{ formatBytes(infos.size) }}（{{ infos.size }} {{ $t('bytes') }}</p>
@@ -52,3 +48,13 @@ defineExpose({ hidePopover });
 		</el-popover>
 	</div>
 </template>
+
+<style lang="scss" scoped>
+.cropper-img-preview {
+	height: 200px;
+
+	:deep(.el-image__inner) {
+		max-height: 310px;
+	}
+}
+</style>

src/components/ReCropper/src/index.tsx

@@ -109,7 +109,7 @@ export default defineComponent({
 		async function init() {
 			const imgEl = unref(imgElRef);
 			if (!imgEl) return;
-			cropper.value = new Cropper(imgEl, {
+			const result: any = new Cropper(imgEl, {
 				...defaultOptions,
 				ready: () => {
 					isReady.value = true;
@@ -127,6 +127,14 @@ export default defineComponent({
 				},
 				...props.options,
 			});
+
+			if (!result.ready) {
+				isReady.value = true;
+				realTimeCroppered();
+				emit('readied', cropper.value);
+			}
+
+			cropper.value = result;
 		}
 
 		function realTimeCroppered() {

src/views/monitor/files/index.vue

@@ -4,13 +4,13 @@ import { columns } from '@/views/monitor/files/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { onAdd, onDelete, onSearch, onUpdate } from '@/views/monitor/files/utils/hooks';
+import { onAdd, onDelete, onDeleteBatch, onDownload, onSearch, onUpdate, selectIds } from '@/views/monitor/files/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
-import { useFilesStore } from '@/store/monitor/files.ts';
+import { useFilesStore } from '@/store/monitor/files';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import { FormInstance } from 'element-plus';
 
@@ -18,33 +18,30 @@ const tableRef = ref();
 const formRef = ref();
 const filesStore = useFilesStore();
 
-/**
- * * 当前页改变时
- */
+/** 当前页改变时 */
 const onCurrentPageChange = async (value: number) => {
 	filesStore.pagination.currentPage = value;
 	await onSearch();
 };
 
-/**
- * * 当分页发生变化
- * @param value
- */
+/** 当分页发生变化 */
 const onPageSizeChange = async (value: number) => {
 	filesStore.pagination.pageSize = value;
 	await onSearch();
 };
 
-/**
- * 重置表单
- * @param formEl
- */
+/** 重置表单 */
 const resetForm = async (formEl: FormInstance) => {
 	if (!formEl) return;
 	formEl.resetFields();
 	await onSearch();
 };
 
+/** 选择多行 */
+const onSelectionChange = (rows: Array<any>) => {
+	selectIds.value = rows.map((row: any) => row.id);
+};
+
 onMounted(() => {
 	onSearch();
 });
@@ -74,6 +71,11 @@ onMounted(() => {
 		<PureTableBar :columns="columns" title="系统文件管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
 			<template #buttons>
 				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
+
+				<!-- 批量删除按钮 -->
+				<el-button v-show="selectIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+					{{ $t('delete_batches') }}
+				</el-button>
 			</template>
 
 			<template v-slot="{ size, dynamicColumns }">
@@ -94,6 +96,7 @@ onMounted(() => {
 					showOverflowTooltip
 					table-layout="auto"
 					@page-size-change="onPageSizeChange"
+					@selection-change="onSelectionChange"
 					@page-current-change="onCurrentPageChange"
 				>
 					<template #createUser="{ row }">
@@ -106,6 +109,7 @@ onMounted(() => {
 
 					<template #operation="{ row }">
 						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onDownload(row)"> {{ $t('download') }} </el-button>
 						<el-popconfirm :title="`${$t('delete')} ${row.filename}?`" @confirm="onDelete(row)">
 							<template #reference>
 								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">

src/views/monitor/files/utils/hooks.ts

@@ -6,6 +6,8 @@ import { messageBox } from '@/utils/message';
 import type { FormItemProps } from '@/views/monitor/files/utils/types';
 import { $t } from '@/plugins/i18n';
 
+// 选择的id列表
+export const selectIds = ref([]);
 export const formRef = ref();
 const filesStore = useFilesStore();
 
@@ -104,3 +106,42 @@ export const onDelete = async (row: any) => {
 	await filesStore.deleteFiles([id]);
 	await onSearch();
 };
+
+/** 批量删除 */
+export const onDeleteBatch = async () => {
+	const ids = selectIds.value;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirm_delete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await filesStore.deleteFiles(ids);
+	await onSearch();
+};
+
+/**
+ * 下载文件
+ * @param row
+ */
+export const onDownload = async (row: any) => {
+	const id = row.id;
+
+	fetch(`/admin/files/downloadFiles/${id}`)
+		.then(response => response.blob()) // 将响应转换为Blob对象
+		.then(blob => {
+			// 创建一个链接元素
+			const link = document.createElement('a');
+			link.href = URL.createObjectURL(blob);
+			link.download = 'filename.jpg'; // 指定下载文件名
+			document.body.appendChild(link);
+			link.click(); // 模拟点击
+			document.body.removeChild(link); // 下载后移除元素
+		})
+		.catch(error => console.error('下载失败:', error));
+};

src/views/system/adminUser/index.vue

@@ -47,36 +47,26 @@ const { switchStyle } = usePublicHooks();
 const tableRef = ref();
 const formRef = ref();
 
-/**
- * * 加载部门列表
- */
+/** 加载部门列表 */
 const onSearchDept = async () => {
 	deptStore.loading = true;
 	await deptStore.getAllDeptList();
 	deptStore.loading = false;
 };
 
-/**
- * * 当前页改变时
- */
+/** 当前页改变时 */
 const onCurrentPageChange = async (value: number) => {
 	adminUserStore.pagination.currentPage = value;
 	await onSearch();
 };
 
-/**
- * * 当分页发生变化
- * @param value
- */
+/** 当分页发生变化 */
 const onPageSizeChange = async (value: number) => {
 	adminUserStore.pagination.pageSize = value;
 	await onSearch();
 };
 
-/**
- * 重置表单
- * @param formEl
- */
+/** 重置表单 */
 const resetForm = async (formEl: FormInstance) => {
 	if (!formEl) return;
 	formEl.resetFields();
@@ -84,10 +74,7 @@ const resetForm = async (formEl: FormInstance) => {
 	await onSearch();
 };
 
-/**
- * * 选择多行
- * @param rows
- */
+/** 选择多行 */
 const onSelectionChange = (rows: Array<any>) => {
 	deleteIds.value = rows.map((row: any) => row.id);
 };
@@ -181,7 +168,13 @@ onMounted(() => {
 					>
 						<!-- 显示头像 -->
 						<template #avatar="{ row }">
-							<el-image :preview-src-list="Array.of(row.avatar || userAvatar)" :src="row.avatar || userAvatar" class="w-[24px] h-[24px] rounded-full align-middle" fit="cover" preview-teleported />
+							<el-image :preview-src-list="Array.of(row.avatar || userAvatar)" :src="row.avatar || userAvatar" class="w-[24px] h-[24px] rounded-full align-middle" fit="cover" preview-teleported>
+								<template #error>
+									<div class="image-slot">
+										<img :src="userAvatar" alt="" />
+									</div>
+								</template>
+							</el-image>
 						</template>
 
 						<!-- 显示用户状态 -->

src/views/system/adminUser/utils/columns.tsx

@@ -26,8 +26,8 @@ export const columns: TableColumnList = [
 	{ label: $t('adminUser_sex'), prop: 'sex', slot: 'sex' },
 	// 个人描述
 	{ label: $t('adminUser_summary'), prop: 'summary', width: 460 },
-	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160, fixed: 'right' },
-	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160, fixed: 'right' },
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90, fixed: 'right' },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90, fixed: 'right' },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },