From 863db086c7830e9c252e60a87f5b51d4283c852a Mon Sep 17 00:00:00 2001
From: chendaze <1824191732@qq.com>
Date: Tue, 2 Apr 2024 08:49:14 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E4=BC=81?=
 =?UTF-8?q?=E4=B8=9A=E8=81=94=E7=B3=BB=E4=BA=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/customer.js                     |  9 ++
 src/views/admin/CustomerEdit.vue              | 78 +++++++++++++++-
 .../admin/modules/CustomerContactsModal.vue   | 93 ++++++++++++++++++-
 3 files changed, 174 insertions(+), 6 deletions(-)

diff --git a/src/api/admin/customer.js b/src/api/admin/customer.js
index 3dd850c..9bf965f 100644
--- a/src/api/admin/customer.js
+++ b/src/api/admin/customer.js
@@ -100,6 +100,15 @@ export function getCustomer (parameter) {
   })
 }
 
+export function importData (data) {
+  return axios({
+    url: api.icsCustomerStaff + '/importData',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    params: data
+  })
+}
+
 export function getQiXinBasicInfo (parameter) {
   return axios({
     url: api.customer + '/getBasicInfo',
diff --git a/src/views/admin/CustomerEdit.vue b/src/views/admin/CustomerEdit.vue
index fc310b6..4a7851c 100644
--- a/src/views/admin/CustomerEdit.vue
+++ b/src/views/admin/CustomerEdit.vue
@@ -290,6 +290,9 @@
             <a-button type='primary' @click='$refs.contactModal.add({ customerId: $route.query.customerId })'>
               新建企业员工
             </a-button>
+            <a-button style='margin-left: 30px' type='success' @click='importUser'>
+              导入用户
+            </a-button>
           </div>
           <a-table :pagination='false' :columns='contactsItemColumns' :dataSource='contactsItemData' rowKey='id'>
             <template slot='operation' slot-scope='text, record'>
@@ -312,6 +315,39 @@
       </a-tabs>
     </a-form>
     <customer-contacts-modal ref='contactModal' @ok='handleContactSaved' />
+    <a-modal v-model="visible" title="导入用户" @ok="handleFileOk">
+<!--      <a-upload-dragger-->
+<!--        name="file"-->
+<!--        :multiple="true"-->
+<!--        :file-list="fileList"-->
+<!--        :action="uploadUrl"-->
+<!--        :headers="headers"-->
+<!--        @change="handleFileChange"-->
+<!--      >-->
+<!--        <p class="ant-upload-drag-icon">-->
+<!--          <a-icon type="inbox" />-->
+<!--        </p>-->
+<!--        <p class="ant-upload-text">-->
+<!--          单击或拖动文件到此区域进行上传-->
+<!--        </p>-->
+<!--      </a-upload-dragger>-->
+
+      <a-upload
+        :fileList="fileList"
+        :customRequest="customRequest">
+        <a-button type="primary" >导入</a-button>
+
+
+      </a-upload>
+<!--      <a-upload-->
+<!--        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"-->
+<!--        :customRequest="customRequest"-->
+<!--        @change="customChange"-->
+<!--        :disabled="uploadDisabled">-->
+<!--        <a-button type="primary" :icon="uploadIcon" :disabled="uploadDisabled">导入</a-button>-->
+<!--      </a-upload>-->
+
+    </a-modal>
   </a-card>
 </template>
 
@@ -325,7 +361,8 @@ import {
   getQiXinBasicInfo,
   getStaffList,
   selectCustomerStaffList,
-  updateStaffByCustomer
+  updateStaffByCustomer,
+  importData
 } from '@/api/admin/customer'
 import {
   getFloorList,
@@ -439,6 +476,8 @@ export default {
       form: this.$form.createForm(this),
       floorList: [],
       roomList: [],
+      file:'',
+      visible:false
     }
   },
   filters: {
@@ -472,6 +511,43 @@ export default {
         this.floorList = res.data
       })
     },
+
+    customRequest(file){
+      // file 是上传的文件 其内容会在放在下面截图中
+      // 后端需要接受的参数是 formData数据，
+      // uploadFile 我自己的接口
+      console.log(file)
+      importData({ filePath:file.file.name }).then(res => {
+        if (res.success) {
+          // 调用组件内方法, 设置为成功状态
+          file.onSuccess(res, file.file)
+          file.status = 'done'
+        } else {
+          file.onError()
+          file.status = 'error'
+        }
+      })
+    },
+
+    handleFileChange(info){
+      this.fileList = info.fileList
+
+      if (info.file.status === 'done') {
+        const result = info.file.response
+        this.file =info.file.response
+        this.fileName = result.fileName
+      }
+    },
+    //导入用户数据
+    importUser(){
+      this.visible = true
+    },
+    handleFileOk(){
+      console.log(this.file)
+      importData({file:this.file}).then(res =>{
+        console.log(res)
+      })
+    },
     // 获取房间
     getRoomList(value) {
       let param = {
diff --git a/src/views/admin/modules/CustomerContactsModal.vue b/src/views/admin/modules/CustomerContactsModal.vue
index d3e056c..f7d6b90 100644
--- a/src/views/admin/modules/CustomerContactsModal.vue
+++ b/src/views/admin/modules/CustomerContactsModal.vue
@@ -81,7 +81,6 @@
           <a-input placeholder='紧急联系人' v-decorator="['urgent']" />
         </a-form-item>
 
-      </a-form-item>
 <!--      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系电话">-->
 <!--        <a-input placeholder="联系电话" v-decorator="['phone']"/>-->
 <!--      </a-form-item>-->
@@ -92,8 +91,10 @@
   </a-modal>
 </template>
 <script>
-import { saveCustomerContacts,getStaffList,updateStaff,getStaffListNotId } from '@/api/admin/customer'
+import { importData,getStaffList,updateStaff,getCustomer,getStaffListNotId } from '@/api/admin/customer'
 import pick from 'lodash.pick'
+import storage from 'store'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
 export default {
   name: 'CustomerContactsModal',
   props: {
@@ -112,12 +113,21 @@ export default {
         xs: { span: 24 },
         sm: { span: 16 }
       },
+      uploadUrl: process.env.VUE_APP_API_BASE_URL + '/api/dfs/upload',
+      imageUrl: '',
+      headers: {
+        Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
+      },
       confirmLoading: false,
       mdl: {},
       customerId: undefined,
       contactId: undefined,
       form: this.$form.createForm(this),
       data:[],
+      photoImageUrl: '',
+      photoLoading: false,
+      avatarImageUrl: '',
+      avatarLoading: false
     }
   },
   beforeCreate () {
@@ -126,6 +136,79 @@ export default {
 
   },
   methods: {
+    // 照片
+    photoBeforeUpload(file) {
+      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+      if (!isJpgOrPng) {
+        this.$message.error('You can only upload JPG file!')
+      }
+      const isLt2M = file.size / 1024 < 5000
+      if (!isLt2M) {
+        this.$message.error('图片必须小于 5M!')
+      }
+      return isJpgOrPng && isLt2M
+    },
+    photoHandleChange(info) {
+      if (info.file.status === 'uploading') {
+        this.photoLoading = true
+        return
+      }
+      if (info.file.status === 'done') {
+        const { form: { setFieldsValue } } = this
+        const result = info.file.response
+        // 设置值
+        this.$nextTick(() => {
+          setFieldsValue({
+            // 设置相对路径
+            photo: result.fileName
+          })
+        })
+        // Get this url from response in real world.
+        this.getBase64(info.file.originFileObj, imageUrl => {
+          this.photoImageUrl = imageUrl
+          this.photoLoading = false
+        })
+      }
+    },
+    // 头像
+    avatarBeforeUpload(file) {
+      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+      if (!isJpgOrPng) {
+        this.$message.error('You can only upload JPG file!')
+      }
+      const isLt2M = file.size / 1024 < 5000
+      if (!isLt2M) {
+        this.$message.error('图片必须小于 5M!')
+      }
+      return isJpgOrPng && isLt2M
+    },
+    avatarHandleChange(info) {
+      if (info.file.status === 'uploading') {
+        this.avatarLoading = true
+        return
+      }
+      if (info.file.status === 'done') {
+        const { form: { setFieldsValue } } = this
+        const result = info.file.response
+        // 设置值
+        this.$nextTick(() => {
+          setFieldsValue({
+            // 设置相对路径
+            avatar: result.fileName
+          })
+        })
+        // Get this url from response in real world.
+        this.getBase64(info.file.originFileObj, imageUrl => {
+          this.avatarImageUrl = imageUrl
+          this.avatarLoading = false
+        })
+      }
+    },
+    getBase64(img, callback) {
+      const reader = new FileReader()
+      reader.addEventListener('load', () => callback(reader.result))
+      reader.readAsDataURL(img)
+    },
     handleSearch(value){
       let param = {
         mobile:value
@@ -151,7 +234,7 @@ export default {
       let param = {
         icsCustomerId:contactInfo.customerId
       }
-      getStaffListNotId(param).then(res =>{
+      getCustomer(param).then(res =>{
         this.data =res.rows
       })
 
@@ -159,10 +242,10 @@ export default {
     edit (record) {
       this.mdl = Object.assign(record)
       console.log(this.mdl)
-      // this.mdl = record
       this.visible = true
       this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.mdl, 'id', 'customerId', 'name', 'phone', 'remark'))
+        this.form.setFieldsValue(pick(this.mdl, 'id','name','username','mobile','gender',
+          'photo','avatar','cardNo','address','email','degree','urgent', 'customerId', 'remark'))
       })
     },
     handleSubmit (e) {

From 6b2e85cbe945cef212432f2688d272c82604f593 Mon Sep 17 00:00:00 2001
From: chendaze <1824191732@qq.com>
Date: Tue, 2 Apr 2024 13:43:54 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E4=BC=81?=
 =?UTF-8?q?=E4=B8=9A=E7=9A=84=E5=AF=BC=E5=87=BA=E5=92=8C=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/customer.js        |  11 +++-
 src/views/admin/CustomerEdit.vue | 103 ++++++++++++++++++++-----------
 2 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/src/api/admin/customer.js b/src/api/admin/customer.js
index 9bf965f..1241fee 100644
--- a/src/api/admin/customer.js
+++ b/src/api/admin/customer.js
@@ -104,8 +104,15 @@ export function importData (data) {
   return axios({
     url: api.icsCustomerStaff + '/importData',
     method: 'post',
-    headers: { 'Content-Type': 'multipart/form-data' },
-    params: data
+    data: data
+  })
+}
+
+export function exportTemplate () {
+  return axios({
+    url: api.icsCustomerStaff + '/exportTemplate',
+    method: 'post',
+    data: {  }
   })
 }
 
diff --git a/src/views/admin/CustomerEdit.vue b/src/views/admin/CustomerEdit.vue
index 4a7851c..0bfd631 100644
--- a/src/views/admin/CustomerEdit.vue
+++ b/src/views/admin/CustomerEdit.vue
@@ -315,43 +315,26 @@
       </a-tabs>
     </a-form>
     <customer-contacts-modal ref='contactModal' @ok='handleContactSaved' />
-    <a-modal v-model="visible" title="导入用户" @ok="handleFileOk">
-<!--      <a-upload-dragger-->
-<!--        name="file"-->
-<!--        :multiple="true"-->
-<!--        :file-list="fileList"-->
-<!--        :action="uploadUrl"-->
-<!--        :headers="headers"-->
-<!--        @change="handleFileChange"-->
-<!--      >-->
-<!--        <p class="ant-upload-drag-icon">-->
-<!--          <a-icon type="inbox" />-->
-<!--        </p>-->
-<!--        <p class="ant-upload-text">-->
-<!--          单击或拖动文件到此区域进行上传-->
-<!--        </p>-->
-<!--      </a-upload-dragger>-->
-
-      <a-upload
-        :fileList="fileList"
-        :customRequest="customRequest">
-        <a-button type="primary" >导入</a-button>
-
-
-      </a-upload>
-<!--      <a-upload-->
-<!--        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"-->
-<!--        :customRequest="customRequest"-->
-<!--        @change="customChange"-->
-<!--        :disabled="uploadDisabled">-->
-<!--        <a-button type="primary" :icon="uploadIcon" :disabled="uploadDisabled">导入</a-button>-->
-<!--      </a-upload>-->
+    <a-modal v-model="visible" title="导入用户" @ok="handleFileOk" >
+      <div style='display: flex'>
+        <a-upload
+          :fileList="fileList"
+          :headers="headers"
+          accept=".xlsx,.xls"
+          @change="customChange"
+          :customRequest="customRequest">
+          <a-button type="primary" >导入用户数据</a-button>
+        </a-upload>
+        <a-button  style='margin-left: 40px' type="primary" @click='exportTemplate'>导出用户模板</a-button>
+      </div>
 
     </a-modal>
   </a-card>
 </template>
 
 <script>
+
+let downloadLoadingInstance;
 import moment from 'moment'
 import storage from 'store'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
@@ -362,7 +345,8 @@ import {
   getStaffList,
   selectCustomerStaffList,
   updateStaffByCustomer,
-  importData
+  importData,
+  exportTemplate
 } from '@/api/admin/customer'
 import {
   getFloorList,
@@ -372,7 +356,8 @@ import { getCustomerContractList } from '@/api/admin/customerContract'
 import CustomerContactsModal from './modules/CustomerContactsModal.vue'
 import CustomerAttachmentList from './modules/CustomerAttachmentList.vue'
 import pick from 'lodash.pick'
-
+import { message } from 'ant-design-vue'
+import { download } from '@/utils/request'
 export default {
   name: 'BaseForm',
   components: {
@@ -430,6 +415,10 @@ export default {
           title: '手机号',
           dataIndex: 'mobile'
         },
+        {
+          title: '性别',
+          dataIndex: 'gender'
+        },
         {
           title: '操作',
           key: 'operation',
@@ -511,17 +500,58 @@ export default {
         this.floorList = res.data
       })
     },
+    exportTemplate(){
+      exportTemplate().then(res =>{
+        console.log(res)
+        this.downloadFile(res)
+      })
+    },
+    downloadFile (data) {
+      let fileName = '客户导入模板'
+
+      let link = document.createElement('a')
+      let blob = new Blob([data], {type: 'application/vnd.ms-excel;charset=utf-8'});
+      console.log(blob)
+      link.style.display = 'none';
+      link.download = fileName+'.xlsx';
+      link.href = URL.createObjectURL(blob);
+      // link.setAttribute('download', fileName+'.xlsx');
+      document.body.appendChild(link);
+      link.click();
+      URL.revokeObjectURL(link.href); // 释放URL 对象
+      document.body.removeChild(link);
+
+
+
+      // console.log(data)
+      // var link = document.createElement('a')
+      // // 文件导出
+      // if (!data) {
+      //   return
+      // }
+      // link.style.display = 'none'
+      // link.href = window.URL.createObjectURL(new Blob([data]))
+      // link.setAttribute('download', '用户导入模板.xls')
+      // document.body.appendChild(link)
+      // link.click()
+    },
+
 
     customRequest(file){
       // file 是上传的文件 其内容会在放在下面截图中
       // 后端需要接受的参数是 formData数据，
       // uploadFile 我自己的接口
+
+      const formData = new FormData()
+      formData.append('file', file.file)
       console.log(file)
-      importData({ filePath:file.file.name }).then(res => {
-        if (res.success) {
+      importData(formData).then(res => {
+        if (res.code == 0) {
           // 调用组件内方法, 设置为成功状态
           file.onSuccess(res, file.file)
           file.status = 'done'
+          this.visible =false
+          this.$message.success(res.msg)
         } else {
           file.onError()
           file.status = 'error'
@@ -537,6 +567,9 @@ export default {
         this.file =info.file.response
         this.fileName = result.fileName
       }
+    },
+    customChange(){
+
     },
     //导入用户数据
     importUser(){