From f4b0199ef86e133fccbaf86c530438ec89ea6c63 Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Sat, 7 Dec 2024 21:32:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(address-book):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=80=9A=E8=AE=AF=E5=BD=95=E5=AF=BC=E5=85=A5=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   2 +
 src/api/address-book/index.js                 |  22 ++++
 src/components/ImportExcel.vue                | 105 ++++++++++++++++
 .../address-book-management/index.vue         | 113 ++++++++++++------
 4 files changed, 208 insertions(+), 34 deletions(-)
 create mode 100644 src/components/ImportExcel.vue

diff --git a/components.d.ts b/components.d.ts
index 8af693e..902d677 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -52,6 +52,7 @@ declare module '@vue/runtime-core' {
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     FvCheckbox: typeof import('./src/fvcomponents/fvCheckbox/index.vue')['default']
     FvForm: typeof import('./src/fvcomponents/fvForm/index.vue')['default']
     FvFormDialog: typeof import('./src/fvcomponents/fvFormDialog/index.vue')['default']
@@ -68,6 +69,7 @@ declare module '@vue/runtime-core' {
     IconSelect: typeof import('./src/components/iconSelect/index.vue')['default']
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    ImportExcel: typeof import('./src/components/ImportExcel.vue')['default']
     InfoLiveCall: typeof import('./src/components/infoLiveCall/index.vue')['default']
     LiveCall: typeof import('./src/components/liveCall/index.vue')['default']
     LiveCallItem: typeof import('./src/components/liveCall/LiveCallItem.vue')['default']
diff --git a/src/api/address-book/index.js b/src/api/address-book/index.js
index c17fac9..3ce061a 100644
--- a/src/api/address-book/index.js
+++ b/src/api/address-book/index.js
@@ -1,4 +1,6 @@
 import request from '@/utils/request.js'
+import axios from "axios";
+import {getToken} from "@/utils/auth";
 
 export const addContact = (data) => {
   return request({
@@ -28,3 +30,23 @@ export const deleteContact = (contactIds) => {
     method: 'delete'
   })
 }
+
+export const importContact = (data) => {
+  return request({
+    url: '/contact/import',
+    method: 'post',
+    data
+  })
+}
+
+export const exportContact = (data) => {
+  return axios.post(
+      `${import.meta.env.VITE_BASE_URL}/contact/export`,data,
+      {
+        responseType: 'blob',
+        headers: {
+          Authorization: getToken()
+        }
+      }
+  );
+}
\ No newline at end of file
diff --git a/src/components/ImportExcel.vue b/src/components/ImportExcel.vue
new file mode 100644
index 0000000..0c80ad8
--- /dev/null
+++ b/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>
diff --git a/src/views/phone-traffic-management/address-book-management/index.vue b/src/views/phone-traffic-management/address-book-management/index.vue
index 656efc4..41b4992 100644
--- a/src/views/phone-traffic-management/address-book-management/index.vue
+++ b/src/views/phone-traffic-management/address-book-management/index.vue
@@ -1,19 +1,27 @@
 <template>
   <div class="address-book">
     <fvSearchForm :searchConfig="searchConfig" @search="searchAddressBook"></fvSearchForm>
-    <fvTable ref="tableIns" :tableConfig="addressBookTableConfig" @headBtnClick="headBtnClick"
-             @selectionChange="selectionChange"></fvTable>
-    <fvFormDialog ref="formDialogRef" :title="dialogTitle" :dialogType="dialogType"
-                  :form-schema="formSchema" :form-rules="formRules"
-                  @dialogSubmit="handleSubmitAddressBook"></fvFormDialog>
-  </div>
+    <div style="display: flex;">
+      <el-button type="primary" v-perm="auths.add" @click="handleAdd">新增</el-button>
+      <import-excel @success="importAddress"/>
+      <el-button type="info" v-perm="auths.export" @click="handleExport">导出</el-button>
+      <el-button type="danger" v-perm="auths.delete" @click="handleMoreDelete">删除</el-button>
+    </div>
+<!--    @headBtnClick="headBtnClick"-->
+      <fvTable ref="tableIns" :tableConfig="addressBookTableConfig"
+               @selectionChange="selectionChange"></fvTable>
+      <fvFormDialog ref="formDialogRef" :title="dialogTitle" :dialogType="dialogType"
+                    :form-schema="formSchema" :form-rules="formRules"
+                    @dialogSubmit="handleSubmitAddressBook"></fvFormDialog>
+    </div>
 </template>
 
 <script setup lang="jsx">
 import fvSelect from '@/fvcomponents/fvSelect/index.vue'
-import {addContact, editContact, getContactDetail, deleteContact} from "@/api/address-book";
+import {addContact, editContact, getContactDetail, deleteContact, exportContact} from "@/api/address-book";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {reactive} from "vue";
+import ImportExcel from "@/components/ImportExcel.vue";
 
 const router = useRouter()
 const tableIns = ref()
@@ -50,8 +58,8 @@ const formRules = reactive({
     {required: true, message: "请输入姓名", trigger: ["change", "blur"]}
   ],
   phone: [
-    {required: true, message: "请输入手机号码",   trigger: ["change", "blur"]},
-    { validator: checkPhone,  trigger: ["change", "blur"]},
+    {required: true, message: "请输入手机号码", trigger: ["change", "blur"]},
+    {validator: checkPhone, trigger: ["change", "blur"]},
   ]
 });
 const formSchema = computed(() => {
@@ -128,7 +136,7 @@ const formSchema = computed(() => {
       props: {
         placeholder: '请输入手机号',
         clearable: true,
-        controls:false
+        controls: false
       },
     },
     {
@@ -181,6 +189,8 @@ const searchConfig = reactive([
 const auths = reactive({
   add: ['order:contacts:add'],
   edit: ['order:contacts:edit'],
+  import: ['order:contacts:import'],
+  export: ['order:contacts:export'],
   delete: ['order:contacts:del'],
 })
 const addressBookTableConfig = reactive({
@@ -248,8 +258,8 @@ const addressBookTableConfig = reactive({
       showOverflowTooltip: false,
       currentRender: ({row, index}) => {
         let btn = []
-        btn.push({label: '编辑',  prem: auths.edit, func: () => handleEdit(row), type: 'primary'})
-        btn.push({label: '删除', prem: auths.delete,func: () => handleSingleDelete(row), type: 'danger'})
+        btn.push({label: '编辑', prem: auths.edit, func: () => handleEdit(row), type: 'primary'})
+        btn.push({label: '删除', prem: auths.delete, func: () => handleSingleDelete(row), type: 'danger'})
         return (
             <div style={{width: '100%'}}>
               {
@@ -272,8 +282,10 @@ const addressBookTableConfig = reactive({
   api: '/contact/list',
   params: {},
   btns: [
-    {name: '新增', key: 'add', type: 'primary' , auth: auths.add},
-    {name: '删除', key: 'delete', type: 'danger', auth: auths.delete},
+    // {name: '新增', key: 'add', type: 'primary', auth: auths.add},
+    // {name: '导入', key: 'import', type: 'warning', auth: auths.import},
+    // {name: '导出', key: 'export', type: 'info', auth: auths.export},
+    // {name: '删除', key: 'delete', type: 'danger', auth: auths.delete},
   ]
 })
 const searchAddressBook = (val) => {
@@ -286,18 +298,50 @@ const searchAddressBook = (val) => {
   addressBookTableConfig.params = obj
   tableIns.value.refresh()
 }
-
+const importAddress = () => {
+  tableIns.value.refresh()
+}
 const headBtnClick = (key) => {
   switch (key) {
     case 'add':
       handleAdd()
       break;
+    case 'import':
+      handleImport()
+      break;
+    case 'export':
+      handleExport()
+      break;
     case 'delete':
       handleMoreDelete()
       break;
   }
 }
+//通讯录导入
+const handleImport = () => {
 
+}
+//通讯录导出
+const handleExport = () => {
+  exportContact().then(res => {
+    let link = document.createElement('a')
+    try {
+      let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
+      let _fileName = "运维智能语音服务系统-通讯录.xlsx"
+      link.style.display = 'none';
+      // 兼容不同浏览器的URL对象
+      const url = window.URL || window.webkitURL || window.moxURL;
+      link.href = url.createObjectURL(blob);
+      link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      url.revokeObjectURL(link.href);//销毁url对象
+    } catch (e) {
+      console.log('下载的文件出错', e)
+    }
+  })
+}
 const handleAdd = () => {
   formDialogRef.value.openOrCloseDialog(true)
   dialogTitle.value = "新增通讯录";
@@ -333,7 +377,7 @@ const selectionChange = (selection) => {
   if (selection.length !== 0) {
     contactIds.value = selection.map(item => item.contactsId).join()
   } else {
-    contactIds.value=''
+    contactIds.value = ''
   }
 }
 const deleteContactMethod = (contactsId) => {
@@ -347,17 +391,17 @@ const deleteContactMethod = (contactsId) => {
   })
 }
 const handleMoreDelete = () => {
-    if(contactIds.value){
-      ElMessageBox.confirm(`确认删除选择的通讯录吗?`, '系统提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
+  if (contactIds.value) {
+    ElMessageBox.confirm(`确认删除选择的通讯录吗?`, '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }).then(() => {
       deleteContactMethod(contactIds.value)
-      })
-    }else{
-      ElMessage.warning("请选择要删除的通讯录")
-    }
+    })
+  } else {
+    ElMessage.warning("请选择要删除的通讯录")
+  }
 }
 const handleSingleDelete = (row) => {
   ElMessageBox.confirm(`确认删除姓名为${row.name}的通讯录吗?`, '系统提示', {
@@ -374,13 +418,13 @@ const handleSubmitAddressBook = async (formInstance) => {
   if (!formInstance) return;
   let validate = await formInstance.validate()
   if (!validate.isValidate) return;
-  if(formInstance.getValues().role=='0'&&!formInstance.getValues().team){
-      ElMessage.warning('请输入班组信息');
-        return;
+  if (formInstance.getValues().role == '0' && !formInstance.getValues().team) {
+    ElMessage.warning('请输入班组信息');
+    return;
   }
-  if(formInstance.getValues().role=='1'&&!formInstance.getValues().dispatchUnit){
-        ElMessage.warning('请输入拨打单位');
-        return;
+  if (formInstance.getValues().role == '1' && !formInstance.getValues().dispatchUnit) {
+    ElMessage.warning('请输入拨打单位');
+    return;
   }
   if (dialogType.value === "add") {
 
@@ -407,11 +451,12 @@ const handleSubmitAddressBook = async (formInstance) => {
 }
 </script>
 <style lang="scss">
-.address-book{
+.address-book {
 
   .el-input-number {
     width: 100% !important;
-    .el-input__inner{
+
+    .el-input__inner {
       text-align: left;
     }
   }