冷链设备，导入功能，模板下载功能

snowy-admin-web/src/api/basicset/memApi.js

@@ -35,5 +35,16 @@ export default {
 	// 根据检测设备id获取监测点位列表
 	getRegionByDeviceIdData(data) {
 		return request('getRegionByDeviceId', data, 'get')
+	},
+
+	// 导入
+	upload(data) {
+		return request('import', data, 'post')
+	},
+	// 导出
+	download(data) {
+		return request('downloadTemplate', data, 'get', {
+			responseType: 'blob'
+		})
 	}
 }

snowy-admin-web/src/views/biz/monitor/mem/index.vue

@@ -51,6 +51,11 @@
 							<template #icon><plus-outlined /></template>新增
 						</a-button>
 					</div>
+					<div class="btn-right">
+						<a-button class="xn-mg08" @click="uploadRef.onOpen()">
+							<template #icon><CloudUploadOutlined /> </template>导入
+						</a-button>
+					</div>
 				</div>
 			</template>
 			<template #bodyCell="{ column, record, index }">
@@ -74,6 +79,7 @@
 
 		<Form ref="formRef" @successful="tableRef.refresh(true)" />
 		<configForm ref="configformRef" @successful="tableRef.refresh(true)" />
+		<upload ref="uploadRef" @successful="tableRef.refresh(true)" />
 	</div>
 </template>
 
@@ -81,11 +87,14 @@
 	import memApi from '@/api/basicset/memApi'
 	import Form from './form.vue'
 	import configForm from './configForm.vue'
+	import upload from './upload.vue'
+
 	const formRef = ref()
 	const configformRef = ref()
 	const searchFormRef = ref()
 	const searchFormState = ref({})
 	const tableRef = ref()
+	const uploadRef = ref()
 
 	const columns = [
 		{

snowy-admin-web/src/views/biz/monitor/mem/upload.vue

@@ -0,0 +1,78 @@
+<template>
+	<xn-form-container title="冷链设备导入" :width="'60%'" :visible="visible" :destroy-on-close="true" @close="onClose">
+		<span
+			>导入数据格式严格按照系统模板进行数据录入，请点击
+			<a-button type="primary" size="small" @click="onDownload">下载模板</a-button>
+		</span>
+		<a-divider dashed />
+		<div>
+			<a-spin :spinning="impUploadLoading">
+				<a-upload-dragger :show-upload-list="false" :custom-request="onUpload" accept=".xls">
+					<p class="ant-upload-drag-icon">
+						<inbox-outlined></inbox-outlined>
+					</p>
+					<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
+					<p class="ant-upload-hint">仅支持xls格式文件</p>
+				</a-upload-dragger>
+			</a-spin>
+		</div>
+	</xn-form-container>
+</template>
+
+<script setup>
+	import memApi from '@/api/basicset/memApi'
+	const emit = defineEmits({ successful: null })
+	const visible = ref(false) // 默认是关闭状态
+
+	const impUploadLoading = ref(false)
+
+	// 打开抽屉
+	const onOpen = (record) => {
+		visible.value = true
+	}
+	// 关闭抽屉
+	const onClose = () => {
+		visible.value = false
+	}
+
+	// 确定导入
+	const onUpload = (data) => {
+		console.log(data, 'xxxxxxxxx')
+
+		// impUploadLoading.value = true
+		const fileData = new FormData()
+
+		fileData.append('file', data.file)
+		console.log(fileData, 'lalal ')
+
+		memApi
+			.upload(fileData)
+			.then((res) => {
+				visible.value = false
+				impUploadLoading.value = false
+			})
+			.finally(() => {
+				impUploadLoading.value = false
+			})
+	}
+
+	// 确定导出 模板
+	const onDownload = () => {
+		memApi.download().then((res) => {
+			const blob = res.data
+			const url = window.URL.createObjectURL(blob)
+			const link = document.createElement('a')
+			link.href = url
+			link.download = '冷链设备模板'
+			link.click()
+			window.URL.revokeObjectURL(url)
+		})
+	}
+
+	// 调用这个函数将子组件的一些数据和方法暴露出去
+	defineExpose({
+		onOpen
+	})
+</script>
+
+<style lang="less" scoped></style>