一维表导入上传文件功能

src/server/api.js

@@ -30,6 +30,13 @@ export const getStanderOne = (params) =>
 		method: "get",
 		params,
 	});
+export const uploadExcel = (param, sourceType) =>
+	service.request({
+		url: '/admin/etl/datatablehead/uploadexcel?taskId=' + sourceType,
+		method: 'post',
+		headers: { 'Content-Type': 'multipart/form-data' },
+		data: param
+	});
 export default {
   get,
   post,

src/views/oneimport/components/upload.vue

@@ -0,0 +1,79 @@
+<template>
+	<el-dialog :title="title" model-value width="50%" :close-on-click-modal="false" :before-close="cancel">
+		<input
+          type="file"
+          accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, xls, xlsx"
+          @change="previewUpload"
+        >
+        <el-button
+          type="primary"
+          :loading="uploadLoading"
+          icon="el-icon-upload"
+          size="mini"
+          @click="uploadEvent"
+        >上传</el-button>
+	</el-dialog>
+</template>
+<script>
+import { uploadExcel } from "../../../server/api.js";
+export default {
+	name: 'editField',
+	props: {
+		item: {
+			default: null,
+		}
+	},
+	data() {
+		return {
+			title: '上传', // 弹框标题
+			uploadLoading: false,
+      excel: '',
+		}
+	},
+	methods: {
+		cancel() { // 取消按钮
+			this.$emit('update:isShowDialog','')
+		},
+		// 上传文件预览
+    previewUpload(file) {
+      this.excle = file.target.files[0]
+    },
+    // 上传文件
+    uploadEvent() {
+      this.uploadLoading = true
+      if (this.excle === null || this.excle === '') {
+        this.$message({
+          showClose: true,
+          duration: 2000,
+          message: '请选择文件',
+          type: 'error'
+        })
+        this.uploadLoading = false
+      } else {
+        const uploadData = new FormData()
+        uploadData.append('uploadfile', this.excle)
+        uploadExcel(uploadData, this.item['DataTableHead-TaskId']).then(res => {
+          this.uploadLoading = false
+          if (res.code === 200) {
+            this.$message({
+              showClose: true,
+              duration: 2000,
+              message: 'submit success',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              showClose: true,
+              duration: 2000,
+              message: 'submit failed',
+              type: 'error'
+            })
+          }
+        }).catch(() => {
+					this.uploadLoading = false
+				})
+      }
+    },
+	}
+}
+</script>

src/views/oneimport/index.vue

@@ -25,11 +25,12 @@
 						<span v-else>{{ scope.row[item] }}</span>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="300">
+				<el-table-column label="操作" width="380">
 					<template #default="scope">
 						<el-button class="edit-button-style" @click="configuration(scope.row)" icon="el-icon-setting" size="small">配置</el-button>
 						<el-button class="edit-button-style" @click="handleUpdate(scope.row)" icon="el-icon-edit" size="small">修改</el-button>
 						<el-button class="edit-button-style" @click="handleDelete(scope.row)" icon="el-icon-delete" size="small">删除</el-button>
+						<el-button class="edit-button-style" @click="handleUpload(scope.row)" icon="el-icon-upload" size="small">上传</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -39,6 +40,8 @@
 			<EditTemplate v-if="isShowDialog === 'edit' ? true : false" :item="item" v-model:isShowDialog="isShowDialog" @editCallBack="completeCallBack"></EditTemplate>
 			<!-- 任务配置项 -->
 			<Configuration v-if="isShowDialog === 'configuration'" :item="item" v-model:isShowDialog="isShowDialog" @editCallBack="completeCallBack" />
+			<!-- 上传 -->
+			<uploadTemplate v-if="isShowDialog === 'upload'" :item="item" v-model:isShowDialog="isShowDialog" @editCallBack="completeCallBack" />
 		</ContentContainer>
 	</div>
 </template>
@@ -47,6 +50,7 @@
 	import SearchTemplate from "../../components/SearchTemplate.vue"
 	import ContentContainer from "../../components/ContentContainer.vue"
 	import EditTemplate from "./components/edit.vue"
+	import uploadTemplate from "./components/upload.vue"
 	import Configuration from "./components/configuration.vue"
 	import { ListMixin } from '@/mixins/ListMixin'
 	export default {
@@ -55,7 +59,8 @@
 			SearchTemplate,
 			ContentContainer,
 			EditTemplate,
-			Configuration
+			Configuration,
+			uploadTemplate
 		},
 		mixins: [ListMixin], // mixins 里面封装了操作列表的共用方法，直接引入mixins即可
 		data() {
@@ -101,6 +106,11 @@
 				* 第二个参数  删除的接口拼接参数
 				*/ 
 				this.delHanle(keyName, deteleUrl)
+			},
+			// 上传
+			handleUpload(row) {
+				this.isShowDialog = 'upload'
+				this.item = row
 			}
 		},
 	}