【更新】批量操作组件优化且加入图标颜色支持，上传组件优多文件上传且提供主动获取文件方法

snowy-admin-web/src/components/XnBatchButton/index.vue

@@ -5,9 +5,9 @@
 		@visibleChange="batchVisibleChange"
 		@confirm="deleteBatch"
 	>
-		<a-button :type="props.buttonType" :danger="props.buttonDanger">
+		<a-button :type="props.buttonType" :danger="props.buttonDanger" :size="props.size" :loading="buttonLoading">
 			<template #icon v-if="props.icon">
-				<component :is="props.icon" />
+				<component :is="props.icon" :style="{ color: props.color }" />
 			</template>
 			{{ props.buttonName }}
 		</a-button>
@@ -18,6 +18,7 @@
 	import { message } from 'ant-design-vue'
 	const batchVisible = ref(false)
 	const emit = defineEmits({ batchCallBack: null })
+	const buttonLoading = ref(false)
 	const props = defineProps({
 		buttonName: {
 			type: String,
@@ -35,9 +36,17 @@
 			type: String,
 			default: () => ''
 		},
+		size: {
+			type: String,
+			default: () => 'middle'
+		},
 		selectedRowKeys: {
 			type: Array,
 			default: () => []
+		},
+		color: {
+			type: String,
+			default: () => ''
 		}
 	})
 	// 参数校验
@@ -64,4 +73,12 @@
 		// 发起方法调用，谁的谁来实现
 		emit('batchCallBack', params)
 	}
+	// 打开loading
+	const loading = () => {
+		buttonLoading.value = true
+	}
+	// 关闭loading
+	const closeLoading = () => {
+		buttonLoading.value = true
+	}
 </script>

snowy-admin-web/src/components/XnUpload/index.vue

@@ -5,11 +5,11 @@
 		name="file"
 		:action="action"
 		:headers="headers"
-		:maxCount="props.uploadMumber"
+		:maxCount="props.uploadNumber"
 		@change="handleChange"
 	>
 		<a-button>
-			<upload-outlined></upload-outlined>
+			<upload-outlined />
 			上传
 		</a-button>
 	</a-upload>
@@ -21,11 +21,11 @@
 		:multiple="true"
 		:action="action"
 		:headers="headers"
-		:maxCount="props.uploadMumber"
+		:maxCount="props.uploadNumber"
 		@change="handleChange"
 	>
 		<p class="ant-upload-drag-icon">
-			<inbox-outlined></inbox-outlined>
+			<inbox-outlined />
 		</p>
 		<p class="ant-upload-text">单击或拖动文件到此区域上传</p>
 		<p class="ant-upload-hint"></p>
@@ -53,7 +53,7 @@
 			required: false
 		},
 		// 上传数量
-		uploadMumber: {
+		uploadNumber: {
 			type: Number,
 			default: 1,
 			required: false
@@ -61,11 +61,13 @@
 	})
 	const action = sysConfig.API_URL + props.action
 
+	// 上传时间，构造上传数组，主动推送至调用组件，单文件可以使用
 	const handleChange = () => {
+		// 单个文件可以使用回调方法，多个文件建议主动获取
 		let result = []
-		for (let a = 0; a < props.uploadMumber; a++) {
+		for (let a = 0; a < props.uploadNumber; a++) {
 			const file = fileList.value[a]
-			if (file.status === 'done' && file.response && file.response.code === 200) {
+			if (file && file.status === 'done' && file.response && file.response.code === 200) {
 				const resultObj = {
 					name: file.name,
 					url: file.response.data
@@ -77,4 +79,27 @@
 			emit('uploadDone', result)
 		}
 	}
+	// 通过DOM获取上传的文件
+	const uploadFileList = () => {
+		if (fileList.value) {
+			const result = []
+			// 只返回这些就够用了，其他基本用不到
+			fileList.value.forEach((item) => {
+				const obj = {
+					name: item.name,
+					type: item.type,
+					size: item.size,
+					url: item.response.data
+				}
+				result.push(obj)
+			})
+			return result
+		} else {
+			return []
+		}
+	}
+	// 抛出这个获取文件列表的方法
+	defineExpose({
+		uploadFileList
+	})
 </script>