新增上传文件组件

张红振
1 parent 47f32d5c
Showing 4 changed files with 83 additions and 3 deletions
src/components/FileUpload/index.vue
src/views/community/housekeeper/houseDetail.vue
src/views/community/houses/index.vue
src/views/ownerManagement/owner/index.vue
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+import * as store from "@/pinia/index";
+const upload = ref();
+/**
+ * @description 组件属性
+ * @prop {string | null} url 上传地址
+ * @prop { string | null } method 上传请求方法
+ *
+ */
+interface Props {
+  url: string;
+  method: string;
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emit = defineEmits<{
+  (e: "success"): void;
+}>();
+/**
+ * @description 上传配置
+ */
+const setting = reactive({
+  url: `${import.meta.env.VITE_BASE_URL}${props.url}`,
+  headers: {
+    "X-Token": store.family.loginStore().token,
+  },
+  loading: false,
+});
+/**
+ * 上传文件成功回调
+ * @param { ElUploadProgressEvent } 回调返回对象
+ */
+const handleSuccess = (res: ElUploadProgressEvent) => {
+    setting.loading = false;
+  if (res.errorCode == 0) {
+    ElMessage.success("操作成功");
+    emit('success');
+  } else {
+    ElMessage.error(res.errorMessage??'操作失败');
+  }
+
+};
+
+/**
+ * 上传文件失败回调
+ * @param { ElUploadProgressEvent } 回调返回对象
+ */
+const handlError = (err: ElUploadProgressEvent) => {
+  console.log(err);
+};
+/**
+ * 文件上传中回调
+ * 
+ */
+const handleProgress = () => {
+  setting.loading = true;
+};
+</script>
+<template>
+  <el-upload
+    ref="upload"
+    :action="setting.url"
+    :headers="setting.headers"
+    :method="props.method"
+    accept=".xlsx,.xls"
+    name="multipartFile"
+    :with-credentials="true"
+    :show-file-list="false"
+    :on-success="handleSuccess"
+    :on-error="handlError"
+    :on-progress="handleProgress"
+  >
+    <el-button type="primary" :loading="setting.loading">导入</el-button>
+  </el-upload>
+</template>
@@ -124,7 +124,7 @@ let submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
       addOrUpdate(props.formObj)
         .then((res) => {
           loading.value = false;
-          emit("success");
+          emit('success')
         })
         .catch((err) => {
           console.log(err);
@@ -5,6 +5,7 @@ import { parseTime } from &quot;@/utils/tool.ts&quot;;
 import Detail from "./detail.vue";
 import BuildOwner from "./buildOwner.vue";
 import Relieve from "./relieve.vue";
+import File from "@/components/FileUpload/index.vue"
 import Pagination from "@/components/Pagination/index.vue";
 import { useRoute } from "vue-router";
  
@@ -134,8 +135,9 @@ watchEffect(() =&gt; {
       >
       <el-row>
         <el-form-item>
-          <el-button type="primary">导入</el-button>
-          <el-button type="primary">导出</el-button>
+          <!-- <el-button type="primary">导入</el-button>
+          <el-button type="primary">导出</el-button> -->
+          <File url="house/importExcel" method="put" @success="search"></File>
         </el-form-item>
       </el-row>
     </el-form>
@@ -8,6 +8,7 @@ import {
 } from "@/api/ownerManagement/owner.ts";
 import { parseTime } from "@/utils/tool.ts";
 import Detail from "./detail.vue";
+import File from "@/components/FileUpload/index.vue"
 import Pagination from "@/components/Pagination/index.vue";
 import { useRoute } from "vue-router";
  
@@ -196,6 +197,7 @@ watchEffect(() =&gt; {
           <el-button type="primary" @click="data.dialogVisible = true"
             >新增</el-button
           > -->
+          <File url="resident/poiInsert" method="post" @success="search"></File>
         </el-form-item>
       </el-row>
     </el-form>