feat(address-book): 添加通讯录导入导出功能

src/components/ImportExcel.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-upload :file-list="[]"
+             :limit="maxSize"
+             with-credentials
+             :multiple="multiple"
+             :http-request="httpRequestHandle"
+             :data="uploadParams"
+             :auto-upload="true"
+             :show-file-list="false"
+             :before-upload="beforeUpload"
+             :on-remove="handleRemove"
+  >
+    <el-button color="#DED0B2" style="margin-left: 10px; margin-right: 10px;" :loading="loading" v-perm="['order:contacts:import']" :disabled="disabled">导入</el-button>
+  </el-upload>
+</template>
+
+<script setup>
+import {ElMessageBox, ElNotification} from "element-plus";
+import {getToken} from '@/utils/auth'
+import axios from "axios";
+
+const props = defineProps({
+  value: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  maxSize: {
+    type: Number,
+    default: 30
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+})
+
+const loading = ref(false)
+const baseURL = import.meta.env.VITE_BASE_URL
+const uploadFileUrl = ref(baseURL + "/contact/import")
+const headers = reactive({
+  authorization: getToken()
+})
+const uploadParams = ref({})
+const emit = defineEmits(["input", "getFile", "delete"])
+
+const handleRemove = (file) => {
+  emit("delete", file.response.data.id)
+}
+const beforeUpload = () => {
+  loading.value = true
+  return true
+}
+const httpRequestHandle = (param) => {
+  // loading.value=true
+  let file = param.file
+  axios.post(uploadFileUrl.value, {
+    file: file
+  }, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+      ...headers
+    }
+  }).then(res => {
+    loading.value=false
+    handleUploadSuccess(res)
+  }).catch(error => {
+    loading.value=false
+    uploadError(error)
+  })
+}
+const handleUploadSuccess = (res) => {
+  let data = res.data
+  ElNotification({
+    title: '提示',
+    message: data.code === 1000 ? '导入成功' : '导入失败',
+    type: data.code === 1000 ? 'success' : 'error'
+  })
+  emit("success")
+}
+const uploadError = (error) => {
+  loading.value = false
+  ElNotification({
+    title: '提示',
+    message: "导入失败，请稍后再试！",
+    type: 'error'
+  })
+}
+defineExpose({
+  handleRemove
+})
+</script>
+
+<style lang="scss" scoped>
+a {
+  font-size: 14px;
+  color: #2a99ff;
+}
+
+</style>