Aris数据迁移前端增加日志部分
This commit is contained in:
446052889@qq.com
parent
f188649688
commit
ff48acac1b
@ -7,23 +7,28 @@
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-html": "^6.1.0",
|
||||
"@codemirror/lang-javascript": "^6.0.1",
|
||||
"@codemirror/lang-json": "^6.0.0",
|
||||
"@codemirror/theme-one-dark": "^6.0.0",
|
||||
"core-js": "^3.6.5",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"vue": "^3.2.19",
|
||||
"vue-codemirror": "^6.0.0",
|
||||
"vue-router": "^4.0.2",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"fs-extra": "^10.0.0",
|
||||
"@types/fs-extra": "^9.0.12",
|
||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||
"@typescript-eslint/parser": "^4.18.0",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"@vitejs/plugin-vue": "^1.9.2",
|
||||
"@vue/compiler-sfc": "^3.2.19",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"fs-extra": "^10.0.0",
|
||||
"less": "^3.0.4",
|
||||
"less-loader": "^5.0.0",
|
||||
"typescript": "^4.3.2",
|
||||
|
||||
@ -1,174 +1,354 @@
|
||||
<template>
|
||||
<div class="data-migration">
|
||||
<div class="top-box">
|
||||
<div class="title-box">数据迁移</div>
|
||||
<div class="step-box">
|
||||
<el-steps :active="info.activeStep" finish-status="success">
|
||||
<el-step :title="item.title" v-for="item in info.steps" />
|
||||
</el-steps>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div class="empty-box" v-if="info.fileList.length === 0">
|
||||
<el-empty></el-empty>
|
||||
<div class="upload-box">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="info.uploadAction"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
:limit="1"
|
||||
:on-exceed="handleExceed"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button type="primary" @click="handleUploadBtn">导入XML文件</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
仅支持XML格式文本
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-list-box" v-else>
|
||||
<el-scrollbar height="400px">
|
||||
<div v-for="item in info.fileList" :key="item" class="scrollbar-demo-item">
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="action-box">
|
||||
<el-button style="cursor: pointer" type="primary" @click="next">下一步</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-migration">
|
||||
<div class="top-box">
|
||||
<div class="title-box">数据迁移</div>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div class="empty-box" v-if="info.fileList.length === 0">
|
||||
<el-empty></el-empty>
|
||||
<div class="upload-box">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="info.uploadAction"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
:limit="1"
|
||||
:on-exceed="handleExceed"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button type="primary" @click="handleUploadBtn">导入ARIS XML文件</el-button>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
仅支持XML格式文本
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-list-box" v-else>
|
||||
<el-scrollbar height="400px">
|
||||
<div v-for="item in info.fileList" :key="item" class="scrollbar-demo-item">
|
||||
<div>{{ item.name }} <i class="awsui-iconfont" style="cursor: pointer; position: relative; top: 2px;" @click="removeFile"></i></div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="action-box" v-if="info.fileList.length > 0">
|
||||
<el-button style="cursor: pointer" type="primary" @click="next">执行导入</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="提示"
|
||||
v-model="dlg.visible"
|
||||
width="800px"
|
||||
height="500px"
|
||||
destroy-on-close
|
||||
@close="dlgClose">
|
||||
<div style="width: 100%;height: 500px;">
|
||||
<log-codemirror ref="dataCodemirrorRef" :width="logCodemirror.width" :height="logCodemirror.height" :log-str="logCodemirror.logStr" ></log-codemirror>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<awsui-button type="primary" @click="downloadLog">下载日志</awsui-button>
|
||||
<awsui-button @click="dlg.visible = false">关闭</awsui-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,getCurrentInstance,reactive,ref } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: "data-migration",
|
||||
setup() {
|
||||
const { proxy: $this } = getCurrentInstance();
|
||||
let info = reactive({
|
||||
activeStep: 0,
|
||||
steps: [{title:"上传"},{title:"校验"},{title:"结果"}],
|
||||
fileList: [],
|
||||
uploadAction: '',
|
||||
repositoryName: 'migration',
|
||||
groupValue: 'yili',
|
||||
fileValue: '',
|
||||
appId: 'com.actionsoft.apps.coe.pal.datamigration',
|
||||
fileName: ''
|
||||
});
|
||||
const handlePreview = () => {}
|
||||
const handleRemove = () => {}
|
||||
const beforeRemove = () => {}
|
||||
const handleExceed = () => {}
|
||||
const handleSuccess = (res: any,uploadFile: any,uploadFiles: any) => {
|
||||
console.log(res,'---',uploadFile,'----',uploadFiles)
|
||||
info.fileName = res.files.name
|
||||
let tempFileObj = {id: uploadFile.uid,name: res.files.name,downloadUrl: res.data.data.attrs.downloadUrl}
|
||||
info.fileList.push(tempFileObj)
|
||||
console.info('fileList',info.fileList)
|
||||
import {defineComponent, getCurrentInstance, reactive, ref, nextTick} from 'vue';
|
||||
import LogCodemirror from "./log-codemirror";
|
||||
export default defineComponent({
|
||||
name: "data-migration",
|
||||
components: {
|
||||
LogCodemirror,
|
||||
},
|
||||
setup() {
|
||||
const {proxy: $this} = getCurrentInstance();
|
||||
const dataCodemirrorRef = ref();
|
||||
let info = reactive({
|
||||
activeStep: 0,
|
||||
steps: [{title: "上传"}, {title: "校验"}, {title: "结果"}],
|
||||
fileList: [],
|
||||
uploadAction: '',
|
||||
repositoryName: 'arisXML',
|
||||
groupValue: 'upfile',
|
||||
fileValue: '',
|
||||
appId: 'com.actionsoft.apps.coe.pal.datamigration',
|
||||
fileName: ''
|
||||
});
|
||||
let dlg = reactive({
|
||||
visible: false
|
||||
})
|
||||
let logCodemirror = reactive({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
logStr: ''
|
||||
})
|
||||
const result = reactive({
|
||||
path: '',
|
||||
logId : '',
|
||||
totalCount : 0,
|
||||
importingCount: 0,
|
||||
resultStatus: 0,
|
||||
interval: null, // 查询日志定时器
|
||||
timer:0, // 时间戳记录
|
||||
})
|
||||
const handleClose = (done: () => void) => {
|
||||
done();
|
||||
}
|
||||
const handlePreview = () => {
|
||||
}
|
||||
const handleRemove = () => {
|
||||
}
|
||||
const beforeRemove = () => {
|
||||
}
|
||||
const handleExceed = () => {
|
||||
}
|
||||
const handleSuccess = (res: any, uploadFile: any, uploadFiles: any) => {
|
||||
console.log(res, '---', uploadFile, '----', uploadFiles)
|
||||
info.fileName = res.files.name
|
||||
let tempFileObj = {id: uploadFile.uid, name: res.files.name, downloadUrl: res.data.data.attrs.downloadUrl}
|
||||
info.fileList.push(tempFileObj)
|
||||
console.info('fileList', info.fileList)
|
||||
}
|
||||
const dlgClose = () => {
|
||||
if (result.resultStatus == 0) {
|
||||
$this.$message({message: '导入正在进行中，关闭窗口不影响导入的执行', type: 'warning',})
|
||||
}
|
||||
const next = () => {
|
||||
if (info.fileList.length === 0) {
|
||||
$this.$message({type:'warning',message:'请上传文件'});
|
||||
return;
|
||||
clearResult();
|
||||
logCodemirror.logStr = '';
|
||||
}
|
||||
const clearResult = () => {
|
||||
if (result.interval != null) {
|
||||
removeInterval();
|
||||
}
|
||||
result.path = '';
|
||||
result.logId = '';
|
||||
result.totalCount = 0;
|
||||
result.importingCount = 0;
|
||||
result.resultStatus = 0;
|
||||
result.interval = null; // 查询日志定时器
|
||||
result.timer = 0; // 时间戳记录
|
||||
}
|
||||
const next = () => {
|
||||
if (info.fileList.length === 0) {
|
||||
$this.$message({type: 'warning', message: '请上传文件'});
|
||||
return;
|
||||
}
|
||||
dlg.visible = true;
|
||||
const param = {
|
||||
url: './jd',
|
||||
data: {
|
||||
cmd: 'com.actionsoft.apps.coe.pal.datamigration_data_migrate',
|
||||
sid: settingParam.sessionId,
|
||||
wsId: settingParam.wsId ? settingParam.wsId : 'd2f7c8d3-d5c6-4867-9dc8-bbaef5c11ce7',
|
||||
groupValue: info.groupValue,
|
||||
fileValue: info.fileValue,
|
||||
fileName: info.fileName
|
||||
}
|
||||
let param = {
|
||||
url: './jd',
|
||||
data: {
|
||||
cmd: 'com.actionsoft.apps.coe.pal.datamigration_data_migrate',
|
||||
sid: settingParam.sessionId,
|
||||
wsId: settingParam.wsId ? settingParam.wsId : '6f4e292c-1b90-4dd2-8c20-7da159cb20a5',
|
||||
groupValue: info.groupValue,
|
||||
fileValue: info.fileValue,
|
||||
fileName: info.fileName
|
||||
}
|
||||
}
|
||||
$this.awsuiaxios.post(param)
|
||||
}
|
||||
$this.awsuiaxios.post(param)
|
||||
.then((ro: any) => {
|
||||
result.path = ro.data.path;
|
||||
result.logId = ro.data.logId;
|
||||
result.resultStatus = ro.data.resultStatus;
|
||||
if (ro.result == 'ok') {
|
||||
result.totalCount = ro.data.totalCount;
|
||||
result.importingCount = ro.data.importingCount;
|
||||
} else {
|
||||
// $this.$message.error(ro.msg);
|
||||
}
|
||||
getImportInfoEvent();
|
||||
})
|
||||
.catch((err: any) => {
|
||||
})
|
||||
}
|
||||
// 获取导入进度
|
||||
const getImportInfoEvent = () => {
|
||||
result.interval = setInterval(queryLog, 1000);
|
||||
}
|
||||
const queryLog = () => {
|
||||
const that = $this;
|
||||
result.timer = new Date().getTime();
|
||||
const param = {
|
||||
url: './jd',
|
||||
data: {
|
||||
cmd: 'com.actionsoft.apps.coe.pal.datamigration_data_migrate_log_query',
|
||||
sid: settingParam.sessionId,
|
||||
logId: result.logId,
|
||||
path: result.path,
|
||||
timer: result.timer
|
||||
}
|
||||
}
|
||||
that.awsuiaxios.post(param)
|
||||
.then((ro: any) => {
|
||||
console.log(ro)
|
||||
if (ro.result === 'ok') {
|
||||
$this.$message({type:'warning',message:'数据【流程图】完毕'});
|
||||
if (parseInt(ro.data.timer) <= result.timer) {
|
||||
logCodemirror.logStr = ro.data.content;
|
||||
// 添加内容后定位到行尾
|
||||
nextTick(()=> {
|
||||
moveLogEnd();
|
||||
});
|
||||
result.resultStatus = ro.data.resultStatus;
|
||||
if (result.resultStatus != 0) {
|
||||
removeInterval();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
that.$message.error(ro.msg);
|
||||
removeInterval();
|
||||
}
|
||||
})
|
||||
.catch((err: any) => {})
|
||||
}
|
||||
const handleUploadBtn = () => {
|
||||
debugger;
|
||||
info.fileValue = 'XMLType' + new Date().getTime()
|
||||
info.uploadAction = axiosBaseUrl +'uf?sid='+settingParam.sessionId+'&repositoryName='+info.repositoryName+'&groupValue='
|
||||
+ info.groupValue+'&fileValue='+info.fileValue+'&appId='+ info.appId;
|
||||
}
|
||||
return {
|
||||
info,
|
||||
handlePreview,
|
||||
handleRemove,
|
||||
beforeRemove,
|
||||
handleExceed,
|
||||
handleUploadBtn,
|
||||
handleSuccess,
|
||||
next
|
||||
}
|
||||
.catch((err: any) => {
|
||||
})
|
||||
}
|
||||
})
|
||||
// log-codemirror日志内容移动到行尾部
|
||||
const moveLogEnd = () => {
|
||||
dataCodemirrorRef.value.moveTextToEnd();
|
||||
}
|
||||
const removeInterval= () => {
|
||||
clearInterval(result.interval);
|
||||
}
|
||||
const downloadLog = () => {
|
||||
// 下载日志
|
||||
const that = $this;
|
||||
if (result.path == '') {
|
||||
that.$message({message: '获取日志失败', type: 'warning'});
|
||||
return;
|
||||
}
|
||||
if (result.resultStatus == 0) {
|
||||
that.$message({message: '正在导入，请稍等', type: 'warning'});
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
url:'./jd',
|
||||
data:{
|
||||
cmd : "com.actionsoft.apps.coe.pal.datamigration_data_migrate_log_download",
|
||||
path: result.path,
|
||||
logId: result.logId
|
||||
}
|
||||
};
|
||||
that.awsuiaxios.post(param)
|
||||
.then((ro: any) => {
|
||||
if (ro.result === 'ok') {
|
||||
window.open(ro.data.url);
|
||||
} else {
|
||||
that.$message.error(ro.msg);
|
||||
}
|
||||
})
|
||||
.catch((err: any) => {
|
||||
})
|
||||
}
|
||||
const removeFile = () => {
|
||||
info.fileList = [];
|
||||
}
|
||||
const handleUploadBtn = () => {
|
||||
info.fileValue = 'arisXML-' + transDate(new Date());
|
||||
info.uploadAction = axiosBaseUrl + 'uf?sid=' + settingParam.sessionId + '&repositoryName=' + info.repositoryName + '&groupValue='
|
||||
+ info.groupValue + '&fileValue=' + info.fileValue + '&appId=' + info.appId;
|
||||
}
|
||||
const transDate = (date: Date) => {
|
||||
var ndate = new Date(date);
|
||||
let type = 'yyyy-MM-dd-hhmmss';
|
||||
const o = {
|
||||
'M+': ndate.getMonth() + 1, // 月份
|
||||
'd+': ndate.getDate(), // 日
|
||||
'h+': ndate.getHours(), // 小时
|
||||
'm+': ndate.getMinutes(), // 分
|
||||
's+': ndate.getSeconds(), // 秒
|
||||
'q+': Math.floor((ndate.getMonth() + 3) / 3), // 季度
|
||||
'S': ndate.getMilliseconds() // 毫秒
|
||||
}
|
||||
if (/(y+)/.test(type)) type = type.replace(RegExp.$1, (ndate.getFullYear() + '').substr(4 - RegExp.$1.length))
|
||||
for (const k in o) {
|
||||
if (new RegExp('(' + k + ')').test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
|
||||
}
|
||||
return type;
|
||||
}
|
||||
return {
|
||||
dataCodemirrorRef,
|
||||
info,
|
||||
dlg,
|
||||
logCodemirror,
|
||||
result,
|
||||
handlePreview,
|
||||
handleRemove,
|
||||
beforeRemove,
|
||||
handleExceed,
|
||||
handleUploadBtn,
|
||||
handleSuccess,
|
||||
next,
|
||||
removeFile,
|
||||
handleClose,
|
||||
dlgClose,
|
||||
downloadLog
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.data-migration {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F7F7FB;
|
||||
.top-box {
|
||||
height: 75px;
|
||||
margin: 0 35px 0 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.title-box {
|
||||
line-height: 75px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.step-box {
|
||||
width: 45%;
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
.bottom-box {
|
||||
height: 650px;
|
||||
margin: 0 35px 0 35px;
|
||||
background-color: rgb(255,255,255);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.empty-box {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
.upload-box {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.file-list-box {
|
||||
width: 100%;
|
||||
:deep(.el-scrollbar) {
|
||||
padding: 0 25px;
|
||||
}
|
||||
.scrollbar-demo-item {
|
||||
font-size: 16px;
|
||||
height: 35px;
|
||||
margin: 10px;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-migration {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F7F7FB;
|
||||
|
||||
.top-box {
|
||||
height: 75px;
|
||||
margin: 0 35px 0 35px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title-box {
|
||||
line-height: 75px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.step-box {
|
||||
width: 45%;
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
height: 650px;
|
||||
margin: 0 35px 0 35px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.empty-box {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
|
||||
.upload-box {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.file-list-box {
|
||||
width: 100%;
|
||||
|
||||
:deep(.el-scrollbar) {
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.scrollbar-demo-item {
|
||||
font-size: 16px;
|
||||
height: 35px;
|
||||
margin: 10px;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,2 @@
|
||||
import LogCodemirror from './log-codemirror.vue'
|
||||
export default LogCodemirror
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<codemirror
|
||||
ref="codeMirror"
|
||||
v-model="logStr"
|
||||
placeholder="正在导入，请稍等"
|
||||
:style="{ height: height, width: width }"
|
||||
:autofocus="true"
|
||||
:indent-with-tab="true"
|
||||
:tab-size="2"
|
||||
:extensions="extensions"
|
||||
@ready="log('ready', $event)"
|
||||
@change="log('change', $event)"
|
||||
@focus="log('focus', $event)"
|
||||
@blur="log('blur', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineComponent, getCurrentInstance, reactive, ref} from 'vue';
|
||||
import { Codemirror } from 'vue-codemirror'
|
||||
import { javascript } from '@codemirror/lang-javascript'
|
||||
import { oneDark } from '@codemirror/theme-one-dark'
|
||||
export default {
|
||||
components: {
|
||||
Codemirror
|
||||
},
|
||||
name: "logcodemirror",
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
logStr: {
|
||||
type: String,
|
||||
default: '正在导入，请稍等'
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const codeMirror = ref()
|
||||
const code = ref()
|
||||
const extensions = [javascript(), oneDark]
|
||||
const moveTextToEnd = () => {
|
||||
debugger;
|
||||
codeMirror.value.scrollIntoView(codeMirror.value.lineCount() - 1);
|
||||
// that.$refs.mycode.codemirror.scrollIntoView(that.$refs.mycode.codemirror.lineCount() - 1);
|
||||
}
|
||||
return {
|
||||
codeMirror,
|
||||
code,
|
||||
extensions,
|
||||
log: console.log,
|
||||
moveTextToEnd
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user