Skip to content

O
office-web
Commit f1eda1db by xiaohai
Options

数据联调

parent a78c762a
Showing with 436 additions and 60 deletions
src/components/uploadExcel/index.vue 0 → 100644
<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 @@ ...@@ -11,33 +11,12 @@
<li class="tip">确保导入的表头字段和后台配置表头字段的名称一致（模板下载时间不可修改）</li> <li class="tip">确保导入的表头字段和后台配置表头字段的名称一致（模板下载时间不可修改）</li>
<li class="tip">由于数据量可能较大，每次最多导入2000条员工档案，若超过只取前2000条，可以分多次导入</li> <li class="tip">由于数据量可能较大，每次最多导入2000条员工档案，若超过只取前2000条，可以分多次导入</li>
</ul> </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="import">导入通讯录</el-radio-button>
<el-radio-button label="export">导出/修改通讯录</el-radio-button> <el-radio-button label="export">导出/修改通讯录</el-radio-button>
<el-radio-button label="note">错误记录</el-radio-button> <el-radio-button label="note">错误记录</el-radio-button>
</el-radio-group> </el-radio-group>
<div class="handle-area import"> <div class="handle-area import" v-if="type == '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="step-div" style="margin-bottom :90px;"> <div class="step-div" style="margin-bottom :90px;">
<span class="ft-large">①</span>下载员工通讯录模板，统一收集员工信息 <span class="ft-large">①</span>下载员工通讯录模板，统一收集员工信息
<a href="http://www.gicdev.com/haoban-manage-web/excel/通讯录-行政架构导入模板.xls" class="d-u-btn"> <a href="http://www.gicdev.com/haoban-manage-web/excel/通讯录-行政架构导入模板.xls" class="d-u-btn">
...@@ -46,24 +25,129 @@ ...@@ -46,24 +25,129 @@
</div> </div>
<div class="step-div"> <div class="step-div">
<span class="ft-large">②</span>上传收集完毕的员工信息表 <span class="ft-large">②</span>上传收集完毕的员工信息表
<div class="d-u-btn m-t-30"> <div class="d-u-btn m-t-20">
<el-button type="primary">选择文件</el-button> <!-- <el-button type="primary" @click.stop="handleUpload">选择文件</el-button> -->
<p class="warming">文件格式必须为xls或xlsx格式</p> <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> </div>
<div class="up-btn-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> </div>
</div> </div>
</template> </template>
<script> <script>
import uploadExcelComponent from "components/uploadExcel/index";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default { export default {
name: "employee-io", name: "employee-io",
components: {
uploadExcelComponent
},
data() { data() {
return { 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> </script>
...@@ -121,7 +205,11 @@ export default { ...@@ -121,7 +205,11 @@ export default {
.d-u-btn { .d-u-btn {
display:inline-block; display:inline-block;
margin-left: 10px; margin-left: 10px;
margin-right: 10px;
vertical-align: middle; vertical-align: middle;
.iconfont {
margin-left: 5px;
}
.warming { .warming {
font-size:12px; font-size:12px;
font-weight:400; font-weight:400;
...@@ -136,36 +224,6 @@ export default { ...@@ -136,36 +224,6 @@ export default {
color: #909399; 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 { .up-btn-div {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
......
src/views/contacts/shareContact.vue
...@@ -206,9 +206,14 @@ ...@@ -206,9 +206,14 @@
let _this = this; let _this = this;
let params = { let params = {
sharedContactGroupId: _this.groupInfo.departmentId, 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 => { .then(res => {
console.log(res, "menmers"); console.log(res, "menmers");
let list = []; let list = [];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment