|
|
@@ -1,322 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <el-dialog :close-on-click-modal="false" :width="dialogWidth" :visible="visible" :title="title" @close="close">
|
|
|
- <div class="import-file-box">
|
|
|
- <div class="box-left">
|
|
|
- <div class="box-tips">
|
|
|
- <div class="box-text">
|
|
|
- <slot name="tipText"></slot>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-btn" style="padding-top: 10px">
|
|
|
- <div class="btn-s">
|
|
|
- <el-button style="width: 100%" type="success" @click="downloadFn">模板下载</el-button>
|
|
|
- </div>
|
|
|
- <div class="btn-s" style="padding-top: 10px">
|
|
|
- <div class="upload-box">
|
|
|
- <el-upload
|
|
|
- :file-list="fileList"
|
|
|
- :headers="upload.headers"
|
|
|
- :action="upload.action"
|
|
|
- :data="upload.extraData"
|
|
|
- :name="upload.fieldName"
|
|
|
- :on-success="handleSuccess"
|
|
|
- :on-error="handleError"
|
|
|
- :before-upload="handleBeforeUpload"
|
|
|
- >
|
|
|
- <el-button style="width: 100%" type="primary">导入文件</el-button>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- <div class="error-show-btn">
|
|
|
- <el-button style="width: 100%" plain type="primary" @click="viewShowError(!errorTable)">
|
|
|
- {{ errorBtnText }}
|
|
|
- <i class="el-icon-arrow-right el-icon--right"></i>
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="box-right" v-if="errorTable">
|
|
|
- <div class="process-msg">
|
|
|
- 总记录数:{{ totalSize }}, 已处理记录数: {{ processedSize }}, 保存成功记录数: {{ savedSize }}
|
|
|
- </div>
|
|
|
- <el-table class="error-table-box" ref="errorTable" stripe border tooltip-effect="dark" :data="data">
|
|
|
- <el-table-column type="index" label="序号" align="center" width="50" />
|
|
|
- <el-table-column prop="errorPosition" label="错误位置" align="left" width="200" />
|
|
|
- <el-table-column prop="errorMessage" label="错误信息" align="left" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { download } from '@api/api';
|
|
|
-import { uuid } from '@utils/util';
|
|
|
-export default {
|
|
|
- name: 'importFile',
|
|
|
- props: {
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: '导入功能'
|
|
|
- },
|
|
|
- visible: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- tips: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- uploadParams: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {};
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- upload() {
|
|
|
- return {
|
|
|
- action: `${process.env.VUE_APP_API_PREFIX}` + this.uploadParams.url || '',
|
|
|
- headers: {
|
|
|
- Authorization: `Bearer ${this.$store.getters.accessToken}`
|
|
|
- },
|
|
|
- extraData: this.uploadParams.extraData || {},
|
|
|
- fieldName: this.uploadParams.fieldName || 'file',
|
|
|
- showProcess: this.uploadParams.showProcess || false
|
|
|
- };
|
|
|
- },
|
|
|
- template() {
|
|
|
- return {
|
|
|
- templateUrl: this.uploadParams.templateUrl || '',
|
|
|
- templateParams: this.uploadParams.templateParams || {}
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- data: [],
|
|
|
- columns: [
|
|
|
- {
|
|
|
- type: 'index',
|
|
|
- width: 60,
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '错误位置',
|
|
|
- width: 300,
|
|
|
- key: 'errorPosition'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '错误信息',
|
|
|
- tooltip: true,
|
|
|
- key: 'errorMessage'
|
|
|
- }
|
|
|
- ],
|
|
|
- fileList: [],
|
|
|
- errorTable: false,
|
|
|
- errorBtnText: '打开导入情况详情',
|
|
|
- dialogWidth: '400px',
|
|
|
- wsClient: null,
|
|
|
- totalSize: 0,
|
|
|
- processedSize: 0,
|
|
|
- savedSize: 0
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- close() {
|
|
|
- this.data = [];
|
|
|
- this.$emit('close');
|
|
|
- },
|
|
|
- downloadFn() {
|
|
|
- download({
|
|
|
- url: this.template.templateUrl,
|
|
|
- params: this.template.templateParams
|
|
|
- });
|
|
|
- },
|
|
|
- handleBeforeUpload(file) {
|
|
|
- let vm = this;
|
|
|
- vm.upload.headers['x-requestId'] = uuid();
|
|
|
- vm.upload.headers['x-timestamp'] = new Date().getTime();
|
|
|
- vm.totalSize = 0;
|
|
|
- vm.processedSize = 0;
|
|
|
- vm.savedSize = 0;
|
|
|
- vm.data = [];
|
|
|
- if (vm.upload.showProcess) {
|
|
|
- vm.wsInit();
|
|
|
- }
|
|
|
- },
|
|
|
- handleSuccess(res, file, fileList) {
|
|
|
- let vm = this;
|
|
|
- vm.fileList = [file];
|
|
|
- let result = res.data;
|
|
|
- if (result instanceof Object) {
|
|
|
- vm.totalSize = result.totalSize;
|
|
|
- vm.processedSize = result.totalSize;
|
|
|
- vm.savedSize = result.savedSize;
|
|
|
- let hasErrors = result.tableErrorMessages.length > 0;
|
|
|
- vm.$message({
|
|
|
- showClose: true,
|
|
|
- duration: 10000,
|
|
|
- message: hasErrors ? '导入完成, 有数据错误' : res.msg,
|
|
|
- type: hasErrors ? 'warning' : 'success'
|
|
|
- });
|
|
|
- vm.data = result.tableErrorMessages;
|
|
|
- vm.viewShowError(hasErrors);
|
|
|
- }
|
|
|
- if (typeof result === 'boolean' && result) {
|
|
|
- vm.$message({
|
|
|
- showClose: true,
|
|
|
- duration: 10000,
|
|
|
- message: '上传完成,正在处理数据,请稍候....',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
- vm.viewShowError(result);
|
|
|
- }
|
|
|
- },
|
|
|
- handleError(e, file, fileList) {
|
|
|
- let vm = this;
|
|
|
- let error = JSON.parse(e.message);
|
|
|
- vm.$message.error(error.data);
|
|
|
- if (vm.upload.showProcess) {
|
|
|
- vm.wsClose();
|
|
|
- }
|
|
|
- },
|
|
|
- async wsInit() {
|
|
|
- let vm = this;
|
|
|
- let wsToken = vm.$store.getters.wsToken;
|
|
|
- let token = vm.$store.getters.accessToken;
|
|
|
- // 获取域名和端口, 然后做处理
|
|
|
- let wsProtocol = 'ws://';
|
|
|
- if (window.location.protocol === 'https:') {
|
|
|
- wsProtocol = 'wss://';
|
|
|
- }
|
|
|
- let httpUrl = `${wsProtocol}${window.location.host}${process.env.VUE_APP_API_PREFIX}/recruit-common/ws/file/${wsToken}?token=${token}`;
|
|
|
- // httpUrl替换成wsUrl
|
|
|
- let wsUrl = httpUrl;
|
|
|
- vm.wsClient = new WebSocket(wsUrl);
|
|
|
- vm.wsClient.onopen = await vm.wsOpen;
|
|
|
- vm.wsClient.onclose = vm.wsClose;
|
|
|
- vm.wsClient.onerror = vm.wsError;
|
|
|
- vm.wsClient.onmessage = vm.wsMessage;
|
|
|
- },
|
|
|
- // 开始连接
|
|
|
- wsOpen() {
|
|
|
- let vm = this;
|
|
|
- // 监听事件
|
|
|
- console.log('websocket 已连接 ...');
|
|
|
- // 发送心跳
|
|
|
- vm.wsSend({ type: 'ping' });
|
|
|
- },
|
|
|
- // 关闭连接
|
|
|
- wsClose(e) {
|
|
|
- console.log('websocket 已关闭 ...', e);
|
|
|
- },
|
|
|
- // 连接错误
|
|
|
- wsError() {
|
|
|
- console.log('websocket 连接错误...');
|
|
|
- },
|
|
|
- // 接收信息, 并处理
|
|
|
- wsMessage(res) {
|
|
|
- let vm = this;
|
|
|
- console.log(res.data);
|
|
|
- let result = JSON.parse(res.data);
|
|
|
- if (result.data === 'pong') {
|
|
|
- return;
|
|
|
- }
|
|
|
- vm.data.push(...result.data.tableErrorMessages);
|
|
|
- vm.totalSize = result.data.totalSize;
|
|
|
- vm.processedSize++;
|
|
|
- vm.savedSize += result.data.savedSize;
|
|
|
- if (vm.totalSize === vm.processedSize) {
|
|
|
- vm.wsClient.close();
|
|
|
- }
|
|
|
- },
|
|
|
- wsSend(message) {
|
|
|
- let vm = this;
|
|
|
- vm.wsClient.send(JSON.stringify(message));
|
|
|
- },
|
|
|
- viewShowError(isOpen) {
|
|
|
- if (isOpen) {
|
|
|
- this.errorBtnText = '关闭导入情况详情';
|
|
|
- this.dialogWidth = '1000px';
|
|
|
- } else {
|
|
|
- this.errorBtnText = '打开导入情况详情';
|
|
|
- this.dialogWidth = '400px';
|
|
|
- }
|
|
|
- this.errorTable = isOpen;
|
|
|
- }
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- if (this.wsClient) {
|
|
|
- this.wsClient.close();
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-:deep(.el-dialog__body) {
|
|
|
- padding-top: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.import-file-box {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .box-left {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- max-width: 400px;
|
|
|
-
|
|
|
- .box-tips {
|
|
|
- max-height: 300px;
|
|
|
- padding: 10px 16px;
|
|
|
- background-color: @theme-light-color + 10;
|
|
|
- border: 1px solid @theme-gray-color + 50;
|
|
|
- border-radius: 4px;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .box-text {
|
|
|
- line-height: 1.8;
|
|
|
- text-align: justify;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-btn {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .btn-s {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .upload-box {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- :deep(.el-upload) {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .error-show-btn {
|
|
|
- flex: 1;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-right {
|
|
|
- flex: 1;
|
|
|
- padding-left: 20px;
|
|
|
-
|
|
|
- .process-msg {
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .error-table-box {
|
|
|
- height: 92%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|