数据联调

src/components/uploadExcel/index.vue

+<template>
+  <div>
+    <input id="excel-upload-input" :ref="'excel-upload-input'+currentIndex" type="file" accept=".xlsx, .xls, .csv" class="c-hide excel-upload-input" @change="handkeFileChange">
+    <div id="drop">
+      <el-button
+        style="margin-left:16px;"
+        size="mini" type="text"
+        @click.stop="handleUpload"
+        :disabled="(tagItemStatus==2 ||tagItemStatus==4 ||tagItemStatus ==5 ||tagItemStatus==6) ? true: false">
+        <span class=" inline-block">点击导入会员</span><!-- p-r-8 -->
+        </el-button>
+        <el-button
+          size="mini" type="text"
+          @click.stop="handleDownload"
+          v-if="tagItemStatus == 8">
+          <span class="p-l-8 border-l-dcdfe6 color-e55858" >上传完成,下载失败会员清单</span>
+      </el-button>
+      <div class="excel-upload__tip">只能上传一个excle文件（2003版本以上），且数据不超过5000条</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import XLSX from 'xlsx'
+
+import strLength from '@/common/js/strlen';
+import showMsg from '@/common/js/showmsg';
+import errMsg  from '@/common/js/error';
+import { _debounce } from "@/common/js/public";
+import { getRequest, postRequest, postJson, postForm } from '@/api/api';
+export default {
+  props:{
+    currentIndex: {
+      type: [String,Number]
+    },
+    currentExcelTagItemId: String,
+    status: {
+      type: [String,Number]
+    },
+    excelBodyData: Array,
+    excelHeader: Array,
+    // failHead: {
+    //   type: Array,
+    //   default: function () {
+    //     return []
+    //   }
+    // },
+    // failData: {
+    //   type: Array,
+    //   default: function () {
+    //     return []
+    //   }
+    // }
+  },
+  data() {
+    return {
+      loading: false,
+      useIndex: null,
+      tagItemId: '', // 当前标签值 id
+      tagItemStatus: this.status, // 当前标签值的状态
+      excelData: {
+        header: null,
+        results: null,
+        name: null
+      },
+      failedData: []
+    }
+  },
+  methods: {
+    generateDate({ header, results, fileName }) {
+      this.excelData.header = header;
+      this.excelData.results = results;
+      this.excelData.name = fileName;
+      console.log(this.useIndex)
+      this.$emit('on-selected-file', this.excelData);
+      this.$emit('selectIndex', this.useIndex);
+    },
+    handleDrop(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      const files = e.dataTransfer.files
+      if (files.length !== 1) {
+        this.$message.error('Only support uploading one file!')
+        return
+      }
+      const itemFile = files[0] // only use files[0]
+      this.readerData(itemFile)
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    handleDragover(e) {
+      e.stopPropagation()
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+    },
+    handleUpload() {
+      var that = this
+      console.log(11111)
+      console.log(that.excelBodyData);
+      // if (!!that.excelHeader&&!!that.excelHeader.length) {
+      if (that.excelBodyData.length > 0) {
+
+        that.$confirm('目前操作没有结束，点击其他导入现有数据不会保存，\n 确认要离开吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+        }).then(() => {
+          // 先清空原有数据
+          that.$emit('clearOldData',that.currentIndex)
+          document.getElementsByClassName('excel-upload-input')[that.useIndex].click()
+        }).catch(() => {
+
+        });
+        return false;
+      }
+
+      document.getElementsByClassName('excel-upload-input')[that.useIndex].click()
+
+    },
+    handkeFileChange(e) {
+      const files = e.target.files
+      const itemFile = files[0] // only use files[0]
+      if (!itemFile) return
+        console.log(itemFile.name)
+      this.readerData(itemFile)
+      this.$refs['excel-upload-input'+this.currentIndex].value = null // fix can't select the same excel
+    },
+    readerData(itemFile) {
+      var that = this;
+      console.log(itemFile.name)
+      var fileName = itemFile.name;
+      const reader = new FileReader()
+      reader.onload = e => {
+        const data = e.target.result
+        const fixedData = this.fixdata(data)
+
+        const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
+        const firstSheetName = workbook.SheetNames[0]
+        const worksheet = workbook.Sheets[firstSheetName]
+        // console.log(Object.keys(worksheet).indexOf('!ref'),typeof(worksheet))
+        if (Object.keys(worksheet).indexOf('!ref') == -1) {
+          that.$message.error({
+            duration: 1000,
+            message: "文档内容为空"
+          })
+          return false;
+        }
+        const header = this.get_header_row(worksheet)
+        const results = XLSX.utils.sheet_to_json(worksheet)
+
+        if (results.length>5000) {
+          that.$message.error({
+            duration: 1000,
+            message: "上传数据大于 5000 条,请重新上传文件"
+          })
+          return false;
+        }
+        this.generateDate({ header, results, fileName })
+      }
+      reader.readAsArrayBuffer(itemFile)
+    },
+    fixdata(data) {
+      let o = ''
+      let l = 0
+      const w = 10240
+      for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
+      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
+      return o
+    },
+    get_header_row(sheet) {
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r /* start in the first row */
+      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
+        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
+        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
+      }
+      return headers
+    },
+
+    /**
+     * 导出 excel
+     */
+    handleDownload() {
+      const that = this
+      console.log(that.currentExcelTagItemId)
+
+      const para = {
+        tagItemId: that.tagItemId,
+      }
+
+      getRequest('/memberTag/queryImportErrorData',para)
+      .then((res) => {
+        // console.log(res,res.data,res.data.errorCode)
+        var resData = res.data
+        if (resData.errorCode == 1) {
+          // showMsg.showmsg('保存成功','success')
+          if (!!resData.result && !!resData.result.length) {
+            let header = Object.keys(resData.result[0])
+            //获取数据后执行 excel 导出
+            that.exportExcel(header,resData.result)
+          }else {
+            that.$message.error({
+              duration: 1000,
+              message: "暂无失败数据"
+            })
+          }
+
+          return;
+        }
+
+        errMsg.errorMsg(resData)
+
+      })
+      .catch(function (error) {
+        console.log(error);
+
+        that.$message.error({
+          duration: 1000,
+          message: error.message
+        })
+      });
+    },
+
+    /**
+     * 导出 excel 方法
+     */
+    exportExcel(header,currentExcelData) {
+      const that = this
+      require.ensure([], () => {
+        const { export_json_to_excel } = require('@/vendor/Export2Excel')
+        const tHeader = header; // ['phoneNum']
+        const filterVal = header; //['phoneNum']
+        const list = currentExcelData;
+        console.log(list)
+        if (!list.length) {
+          that.$message.error({
+            duration: 1000,
+            message: "数据为空"
+          })
+          return false;
+        }
+        const data = that.formatJson(filterVal, list)
+        console.log(data)
+        export_json_to_excel(tHeader, data, '导出列表');
+
+      })
+    },
+
+    formatJson(filterVal, jsonData) {
+        return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+  },
+  watch: {
+    currentIndex: function(newdata,oldData){
+      console.log("watch:",newdata)
+      this.useIndex = newdata
+    },
+    // failData: function(newdata,oldData){
+    //   console.log("watch:",newdata)
+    //   this.failedData = newdata
+    // },
+    currentExcelTagItemId: function(newdata,oldData){
+      console.log("watch:",newdata)
+      this.tagItemId = newdata
+    },
+
+    status: function(newdata,oldData){
+      console.log("watch:",newdata)
+      this.tagItemStatus = newdata
+    },
+  },
+  mounted() {
+    console.log(this.currentIndex)
+    this.useIndex = this.currentIndex;
+    // this.failedData = this.failData
+    this.tagItemId = this.currentExcelTagItemId;
+  }
+}
+</script>
+
+<style scoped>
+#excel-upload-input{
+  display: none;
+  z-index: -9999;
+}
+#drop{
+  /*border: 2px dashed #bbb;
+  width: 600px;
+  height: 160px;
+  line-height: 160px;*/
+  margin: 0 auto;
+  /*font-size: 24px;*/
+  /*border-radius: 5px;*/
+  /*text-align: center;*/
+  /*color: #bbb;*/
+  position: relative;
+
+
+}
+
+.excel-upload__tip {
+  margin-left: 16px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.color-e55858 {
+  color: #e55858;
+}
+</style>

src/views/contacts/employeeIo.vue

@@ -11,33 +11,12 @@
             <li class="tip">确保导入的表头字段和后台配置表头字段的名称一致（模板下载时间不可修改）</li>
             <li class="tip">由于数据量可能较大，每次最多导入2000条员工档案，若超过只取前2000条，可以分多次导入</li>
         </ul>
-        <el-radio-group v-model="type" class="m-t-20">
+        <el-radio-group v-model="type" class="m-t-20" @change="resetList">
             <el-radio-button label="import">导入通讯录</el-radio-button>
             <el-radio-button label="export">导出/修改通讯录</el-radio-button>
             <el-radio-button label="note">错误记录</el-radio-button>
         </el-radio-group>
-        <div class="handle-area import">
-            <!-- <el-steps direction="vertical" :active="2" style="height: 200px;">
-                <el-step>
-                    <template slot="title">
-                        <div>
-                            下载员工通讯录模板，统一收集员工信息<a href="http://www.gicdev.com/haoban-manage-web/excel/通讯录-行政架构导入模板.xls"><span class="download-btn">下载<i class="iconfont icon-icon_yunxiazai"></i></span></a>
-                        </div>
-                    </template>
-                    <el-button type="primary">下载<i class="iconfont icon-icon_yunxiazai"></i></el-button>
-                </el-step>
-                <el-step>
-                    <template slot="title">
-                        <div>
-                            上传收集完毕的员工信息表
-                            <div style="display:inline-block;vertical-align: middle;">
-                                <span class="download-btn">选择文件</span>
-                                <p class="warming">文件格式必须为xls或xlsx格式</p>
-                            </div>
-                        </div>
-                    </template>
-                </el-step>
-            </el-steps> -->
+        <div class="handle-area import" v-if="type == 'import'">
             <div class="step-div" style="margin-bottom :90px;">
                 <span class="ft-large">①</span>下载员工通讯录模板，统一收集员工信息
                 <a href="http://www.gicdev.com/haoban-manage-web/excel/通讯录-行政架构导入模板.xls" class="d-u-btn">
@@ -46,24 +25,129 @@
             </div>
             <div class="step-div">
                 <span class="ft-large">②</span>上传收集完毕的员工信息表
-                    <div class="d-u-btn m-t-30">
-                        <el-button type="primary">选择文件</el-button>
-                        <p class="warming">文件格式必须为xls或xlsx格式</p>
+                    <div class="d-u-btn m-t-20">
+                        <!-- <el-button type="primary" @click.stop="handleUpload">选择文件</el-button> -->
+                        <el-upload
+                            class="upload-demo"
+                            ref="upload"
+                            action="http://www.gicdev.com/haoban-manage-web/emp/upload"
+                            :on-preview="handlePreview"
+                            :on-remove="handleRemove"
+                            :on-change="getChange"
+                            :multiple="false"
+                            :file-list="fileList"
+                            :auto-upload="false">
+                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+                            <div slot="tip" class="el-upload__tip">文件格式必须为xls或xlsx格式</div>
+                        </el-upload>
+                        <!-- <p class="warming">文件格式必须为xls或xlsx格式</p> -->
                     </div>
             </div>
             <div class="up-btn-div">
-                <el-button type="primary">上传</el-button>
+                <el-button type="primary" @click="submitUpload" :disabled="fileList.length == 0">上传</el-button>
+            </div>
+        </div>
+        <div class="handle-area import" v-else-if="type == 'export'">
+            <div class="step-div" style="margin-bottom :90px;">
+                <span class="ft-large">①</span>导出所有员工信息
+                <a class="d-u-btn">
+                    <el-button type="primary" @click="downloadClerks">下载<i class="iconfont icon-icon_yunxiazai m-l-5"></i></el-button>
+                </a>
+                批量修改员工信息
+
+            </div>
+            <div class="step-div">
+                <span class="ft-large">②</span>上传修改好的员工信息表
+                    <div class="d-u-btn m-t-20">
+                        <!-- <el-button type="primary" @click.stop="handleUpload">选择文件</el-button> -->
+                        <el-upload
+                            class="upload-demo"
+                            ref="uploadEdit"
+                            action="http://www.gicdev.com/haoban-manage-web/emp/upload"
+                            :on-preview="handlePreview"
+                            :on-remove="handleRemove"
+                            :on-change="getChange"
+                            :multiple="false"
+                            :file-list="fileList"
+                            :auto-upload="false">
+                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+                            <div slot="tip" class="el-upload__tip">文件格式必须为xls或xlsx格式</div>
+                        </el-upload>
+                        <!-- <p class="warming">文件格式必须为xls或xlsx格式</p> -->
+                    </div>
+            </div>
+            <div class="up-btn-div">
+                <el-button type="primary" @click="submitUpload" :disabled="fileList.length == 0">上传</el-button>
             </div>
         </div>
     </div>
 </template>
 <script>
+import uploadExcelComponent from "components/uploadExcel/index";
+import { getRequest, postRequest, postJsonRequest } from '@/api/api';
 export default {
     name: "employee-io",
+    components: {
+        uploadExcelComponent
+    },
     data() {
         return {
-            type: "import"
+            type: "note",
+            fileList: []
         };
+    },
+    methods: {
+        resetList(val) {
+            this.fileList = [];
+            this.$refs.upload.clearFiles();
+            this.$refs.uploadEdit.clearFiles();
+        },
+        getErrorNote() {
+            let ths = this;
+            let params = {
+                departmentId: ths.$route.query.departmentId
+            };
+            getRequest("/haoban-manage-web/error-log-page", params)
+            .then(res => {
+                console.log(res);
+            })
+            .catch(e => {
+                ths.$message.error({
+                    message: e.message
+                })
+            });
+        },
+        handleRemove(file, fileList) {
+            console.log(file, fileList);
+        },
+        handlePreview(file) {
+            console.log(file);
+        },
+        submitUpload() {
+            this.$refs.upload.submit();
+        },
+        getChange(file, fileList) {
+            console.log(file, fileList);
+            this.fileList = fileList;
+        },
+        downloadClerks() {
+            let ths = this;
+            let params = {
+                departmentId: ths.$route.query.departmentId
+            };
+            getRequest("/haoban-manage-web/emp/export", params)
+            .then(res => {
+                console.log(res);
+            })
+            .catch(e => {
+                ths.$message.error({
+                    message: e.message
+                })
+            });
+        }
+    },
+    beforeMount() {
+        this.getErrorNote();
     }
 }
 </script>
@@ -121,7 +205,11 @@ export default {
             .d-u-btn {
                 display:inline-block;
                 margin-left: 10px;
+                margin-right: 10px;
                 vertical-align: middle;
+                .iconfont {
+                    margin-left: 5px;
+                }
                 .warming {
                     font-size:12px;
                     font-weight:400;
@@ -136,36 +224,6 @@ export default {
                 color: #909399;
             }
         }
-        // .el-step__title {
-        //     font-size:16px;
-        //     font-family:PingFangSC-Regular;
-        //     font-weight:400;
-        //     color:rgba(96,98,102,1);
-        //     .download-btn {
-        //         display: inline-block;
-        //         width:89px;
-        //         height:36px;
-        //         background:rgba(64,158,255,1);
-        //         border-radius:4px;
-        //         color: #fff;
-        //         text-align: center;
-        //         line-height: 36px;
-        //         margin-left: 10px;
-        //         cursor: pointer;
-        //         .iconfont {
-        //             margin-left: 5px;
-        //         }
-        //     }
-        //     .warming {
-        //         font-size:12px;
-        //         font-weight:400;
-        //         color:rgba(96,98,102,1);
-        //     }
-        // }
-        // .el-step__head.is-finish {
-        //     color: rgba(96,98,102,1);
-        //     border-color: rgba(96,98,102,1);
-        // }
         .up-btn-div {
             text-align: center;
             margin-top: 20px;

src/views/contacts/shareContact.vue

@@ -206,9 +206,14 @@
                 let _this = this;
                 let params = {
                     sharedContactGroupId: _this.groupInfo.departmentId,
-                    findChildren: _this.showChildMember * 1
+                    findChildren: _this.showChildMember * 1,
+                    page: {
+                        count: true,
+                        pageNum: 1,
+                        pageSize: 100
+                    }
                 };
-                getRequest("/haoban-manage-web/shared-contact/find-shared-member", params)
+                postRequest("/haoban-manage-web/shared-contact/find-shared-member", params)
                 .then(res => {
                     console.log(res, "menmers");
                     let list = [];