feat: 🚀 优化代码逻辑 && 更新微信群二维码

Author: HalseySpicy

README.md

@@ -191,7 +191,7 @@ Geeker-Admin
 
 |                          微信群二维码                          |
 | :------------------------------------------------------------: |
-| <img src="https://i.imgtg.com/2023/03/03/V95jD.png" width=170> |
+| <img src="https://i.imgtg.com/2023/03/10/Y3Fkr.png" width=170> |
 
 ### 捐赠 🍵
 

src/App.vue

@@ -13,23 +13,20 @@ import { ElConfigProvider } from "element-plus";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import en from "element-plus/es/locale/lang/en";
 
-// 初始化主题配置
+const globalStore = GlobalStore();
 const { initTheme } = useTheme();
 initTheme();
 
-const globalStore = GlobalStore();
-// 配置element按钮文字中间是否有空格
-const config = reactive({
-	autoInsertSpace: false
-});
+// element config
+const config = reactive({ autoInsertSpace: false });
 
-// element 语言配置
+// element language
 const i18nLocale = computed(() => {
-	if (globalStore.language && globalStore.language == "zh") return zhCn;
+	if (globalStore.language == "zh") return zhCn;
 	if (globalStore.language == "en") return en;
 	return getBrowserLang() == "zh" ? zhCn : en;
 });
 
-// 配置全局组件大小
+// element assemblySize
 const assemblySize = computed(() => globalStore.assemblySize);
 </script>

src/api/interface/index.ts

@@ -70,6 +70,7 @@ export namespace User {
 		createTime: string;
 		status: number;
 		avatar: string;
+		photo: any[];
 		children?: ResUserList[];
 	}
 	export interface ResStatus {

src/components/ImportExcel/index.vue

@@ -6,7 +6,7 @@
 			</el-form-item>
 			<el-form-item label="文件上传 :">
 				<el-upload
-					action="string"
+					action="#"
 					class="upload"
 					:drag="true"
 					:limit="excelLimit"
@@ -17,12 +17,16 @@
 					:on-exceed="handleExceed"
 					:on-success="excelUploadSuccess"
 					:on-error="excelUploadError"
-					accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+					:accept="parameter.fileType!.join(',')"
 				>
-					<el-icon class="el-icon--upload"><upload-filled /></el-icon>
-					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+					<slot name="empty">
+						<el-icon class="el-icon--upload"><upload-filled /></el-icon>
+						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+					</slot>
 					<template #tip>
-						<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
+						<slot name="tip">
+							<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
+						</slot>
 					</template>
 				</el-upload>
 			</el-form-item>
@@ -37,13 +41,15 @@
 import { ref } from "vue";
 import { useDownload } from "@/hooks/useDownload";
 import { Download } from "@element-plus/icons-vue";
-import { ElNotification } from "element-plus";
+import { ElNotification, UploadRequestOptions, UploadRawFile } from "element-plus";
 
 export interface ExcelParameterProps {
 	title: string; // 标题
-	tempApi: (params: any) => Promise<any>; // 下载模板的Api
-	importApi: (params: any) => Promise<any>; // 批量导入的Api
-	getTableList?: () => Promise<any>; // 获取表格数据的Api
+	fileSize?: number; // 上传文件的大小
+	fileType?: File.ExcelMimeType[]; // 上传文件的类型
+	tempApi?: (params: any) => Promise<any>; // 下载模板的Api
+	importApi?: (params: any) => Promise<any>; // 批量导入的Api
+	getTableList?: () => void; // 获取表格数据的Api
 }
 
 // 是否覆盖数据
@@ -53,11 +59,15 @@ const excelLimit = ref(1);
 // dialog状态
 const dialogVisible = ref(false);
 // 父组件传过来的参数
-const parameter = ref<Partial<ExcelParameterProps>>({});
+const parameter = ref<ExcelParameterProps>({
+	title: "",
+	fileSize: 5,
+	fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
+});
 
 // 接收父组件参数
-const acceptParams = (params?: any): void => {
-	parameter.value = params;
+const acceptParams = (params: ExcelParameterProps) => {
+	parameter.value = { ...parameter.value, ...params };
 	dialogVisible.value = true;
 };
 
@@ -68,40 +78,41 @@ const downloadTemp = () => {
 };
 
 // 文件上传
-const uploadExcel = async (param: any) => {
+const uploadExcel = async (param: UploadRequestOptions) => {
 	let excelFormData = new FormData();
 	excelFormData.append("file", param.file);
 	excelFormData.append("isCover", isCover.value as unknown as Blob);
 	await parameter.value.importApi!(excelFormData);
-	parameter.value.getTableList && parameter.value.getTableList();
+	parameter.value.getTableList!();
 	dialogVisible.value = false;
 };
 
 /**
  * @description 文件上传之前判断
  * @param file 上传的文件
  * */
-const beforeExcelUpload = (file: any) => {
-	const isExcel =
-		file.type === "application/vnd.ms-excel" || file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-	const fileSize = file.size / 1024 / 1024 < 5;
+const beforeExcelUpload = (file: UploadRawFile) => {
+	const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType);
+	const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
 	if (!isExcel)
 		ElNotification({
 			title: "温馨提示",
 			message: "上传文件只能是 xls / xlsx 格式！",
 			type: "warning"
 		});
 	if (!fileSize)
-		ElNotification({
-			title: "温馨提示",
-			message: "上传文件大小不能超过 5MB！",
-			type: "warning"
-		});
+		setTimeout(() => {
+			ElNotification({
+				title: "温馨提示",
+				message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
+				type: "warning"
+			});
+		}, 0);
 	return isExcel && fileSize;
 };
 
 // 文件数超出提示
-const handleExceed = (): void => {
+const handleExceed = () => {
 	ElNotification({
 		title: "温馨提示",
 		message: "最多只能上传一个文件！",
@@ -110,7 +121,7 @@ const handleExceed = (): void => {
 };
 
 // 上传错误提示
-const excelUploadError = (): void => {
+const excelUploadError = () => {
 	ElNotification({
 		title: "温馨提示",
 		message: `批量添加${parameter.value.title}失败，请您重新上传！`,
@@ -119,7 +130,7 @@ const excelUploadError = (): void => {
 };
 
 // 上传成功提示
-const excelUploadSuccess = (): void => {
+const excelUploadSuccess = () => {
 	ElNotification({
 		title: "温馨提示",
 		message: `批量添加${parameter.value.title}成功！`,

src/components/ProTable/index.vue

@@ -206,7 +206,7 @@ const colSetting = tableColumns.value!.filter(
 );
 const openColSetting = () => colRef.value.openColSetting();
 
-// 🙅‍♀️ 不需要打印可以把以下方法删除（目前数据处理比较复杂 201-238）
+// 🙅‍♀️ 不需要打印可以把以下方法删除（目前数据处理比较复杂 209-246）
 // 处理打印数据（把后台返回的值根据 enum 做转换）
 const printData = computed(() => {
 	const printDataList = JSON.parse(JSON.stringify(selectedList.value.length ? selectedList.value : tableData.value));

src/components/SelectFilter/index.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts" name="selectFilter">
-import { ref, onBeforeMount } from "vue";
+import { ref, watch } from "vue";
 
 interface OptionsProps {
 	value: string | number;
@@ -56,12 +56,16 @@ const props = withDefaults(defineProps<SelectFilterProps>(), {
 
 // 重新接收默认值
 const selected = ref<{ [key: string]: any }>({});
-onBeforeMount(() => {
-	props.data.forEach(item => {
-		if (item.multiple) selected.value[item.key] = props.defaultValues[item.key] ?? [""];
-		else selected.value[item.key] = props.defaultValues[item.key] ?? "";
-	});
-});
+watch(
+	() => props.defaultValues,
+	() => {
+		props.data.forEach(item => {
+			if (item.multiple) selected.value[item.key] = props.defaultValues[item.key] ?? [""];
+			else selected.value[item.key] = props.defaultValues[item.key] ?? "";
+		});
+	},
+	{ deep: true, immediate: true }
+);
 
 interface FilterEmits {
 	(e: "change", value: any): void;

src/components/SwitchDark/index.vue

@@ -1,19 +1,15 @@
 <template>
-	<el-switch v-model="themeConfig.isDark" @change="onAddDarkChange" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" />
+	<el-switch v-model="themeConfig.isDark" @change="switchDark" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" />
 </template>
 
 <script setup lang="ts" name="SwitchDark">
 import { computed } from "vue";
 import { GlobalStore } from "@/stores";
 import { Sunny, Moon } from "@element-plus/icons-vue";
 import { useTheme } from "@/hooks/useTheme";
-const globalStore = GlobalStore();
 
 const { switchDark } = useTheme();
 
+const globalStore = GlobalStore();
 const themeConfig = computed(() => globalStore.themeConfig);
-
-const onAddDarkChange = () => {
-	switchDark();
-};
 </script>

src/components/TreeFilter/index.vue

@@ -57,12 +57,11 @@ const defaultProps = {
 	label: props.label
 };
 
-const filterText = ref<string>("");
 const treeRef = ref<InstanceType<typeof ElTree>>();
 const treeData = ref<{ [key: string]: any }[]>([]);
 const treeAllData = ref<{ [key: string]: any }[]>([]);
-const selected = ref();
 
+const selected = ref();
 const setSelected = () => {
 	if (props.multiple) selected.value = Array.isArray(props.defaultValue) ? props.defaultValue : [props.defaultValue];
 	else selected.value = typeof props.defaultValue === "string" ? props.defaultValue : "";
@@ -77,6 +76,7 @@ onBeforeMount(async () => {
 	}
 });
 
+// 使用 nextTick 防止打包后赋值不生效
 watch(
 	() => props.defaultValue,
 	() => nextTick(() => setSelected()),
@@ -94,6 +94,7 @@ watch(
 	{ deep: true, immediate: true }
 );
 
+const filterText = ref("");
 watch(filterText, val => {
 	treeRef.value!.filter(val);
 });

src/components/Upload/Img.vue

@@ -54,25 +54,13 @@ import { generateUUID } from "@/utils/util";
 import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
 import type { UploadProps, UploadRequestOptions } from "element-plus";
 
-type FileTypes =
-	| "image/apng"
-	| "image/bmp"
-	| "image/gif"
-	| "image/jpeg"
-	| "image/pjpeg"
-	| "image/png"
-	| "image/svg+xml"
-	| "image/tiff"
-	| "image/webp"
-	| "image/x-icon";
-
 interface UploadFileProps {
 	imageUrl: string; // 图片地址 ==> 必传
 	api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
 	drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
 	disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
 	fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
-	fileType?: FileTypes[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+	fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
 	height?: string; // 组件高度 ==> 非必传（默认为 150px）
 	width?: string; // 组件宽度 ==> 非必传（默认为 150px）
 	borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
@@ -106,11 +94,10 @@ const self_disabled = computed(() => {
 
 /**
  * @description 图片上传
- * @param options 上传的文件
+ * @param options upload 所有配置项
  * */
 interface UploadEmits {
 	(e: "update:imageUrl", value: string): void;
-	(e: "check-validate"): void;
 }
 const emit = defineEmits<UploadEmits>();
 const handleHttpUpload = async (options: UploadRequestOptions) => {
@@ -122,7 +109,6 @@ const handleHttpUpload = async (options: UploadRequestOptions) => {
 		emit("update:imageUrl", data.fileUrl);
 		// 调用 el-form 内部的校验方法（可自动校验）
 		formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
-		emit("check-validate");
 	} catch (error) {
 		options.onError(error as any);
 	}
@@ -145,27 +131,31 @@ const editImg = () => {
 
 /**
  * @description 文件上传之前判断
- * @param rawFile 上传的文件
+ * @param rawFile 选择的文件
  * */
 const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
 	const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
-	const imgType = props.fileType;
-	if (!imgType.includes(rawFile.type as FileTypes))
+	const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
+	if (!imgType)
 		ElNotification({
 			title: "温馨提示",
 			message: "上传图片不符合所需的格式！",
 			type: "warning"
 		});
 	if (!imgSize)
-		ElNotification({
-			title: "温馨提示",
-			message: `上传图片大小不能超过 ${props.fileSize}M！`,
-			type: "warning"
-		});
-	return imgType.includes(rawFile.type as FileTypes) && imgSize;
+		setTimeout(() => {
+			ElNotification({
+				title: "温馨提示",
+				message: `上传图片大小不能超过 ${props.fileSize}M！`,
+				type: "warning"
+			});
+		}, 0);
+	return imgType && imgSize;
 };
 
-// 图片上传成功提示
+/**
+ * @description 图片上传成功
+ * */
 const uploadSuccess = () => {
 	ElNotification({
 		title: "温馨提示",
@@ -174,7 +164,9 @@ const uploadSuccess = () => {
 	});
 };
 
-// 图片上传错误提示
+/**
+ * @description 图片上传错误
+ * */
 const uploadError = () => {
 	ElNotification({
 		title: "温馨提示",