Aris数据迁移前端增加日志部分

com.actionsoft.apps.coe.pal.datamigration/package.json

@@ -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",

com.actionsoft.apps.coe.pal.datamigration/src/components/data-migration.vue

@@ -1,174 +1,354 @@
 <template>
-    <div class="data-migration">
+  <div class="data-migration">
-        <div class="top-box">
+    <div class="top-box">
-            <div class="title-box">数据迁移</div>
+      <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>
+    <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">&#xe626;</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';
+import {defineComponent, getCurrentInstance, reactive, ref, nextTick} from 'vue';
-
+import LogCodemirror from "./log-codemirror";
-  export default defineComponent({
+export default defineComponent({
-    name: "data-migration",
+  name: "data-migration",
-    setup() {
+  components: {
-      const { proxy: $this } = getCurrentInstance();
+    LogCodemirror,
-      let info = reactive({
+  },
-        activeStep: 0,
+  setup() {
-        steps: [{title:"上传"},{title:"校验"},{title:"结果"}],
+    const {proxy: $this} = getCurrentInstance();
-        fileList: [],
+    const dataCodemirrorRef = ref();
-        uploadAction: '',
+    let info = reactive({
-        repositoryName: 'migration',
+      activeStep: 0,
-        groupValue: 'yili',
+      steps: [{title: "上传"}, {title: "校验"}, {title: "结果"}],
-        fileValue: '',
+      fileList: [],
-        appId: 'com.actionsoft.apps.coe.pal.datamigration',
+      uploadAction: '',
-        fileName: ''
+      repositoryName: 'arisXML',
-      });
+      groupValue: 'upfile',
-      const handlePreview = () => {}
+      fileValue: '',
-      const handleRemove = () => {}
+      appId: 'com.actionsoft.apps.coe.pal.datamigration',
-      const beforeRemove = () => {}
+      fileName: ''
-      const handleExceed = () => {}
+    });
-      const handleSuccess = (res: any,uploadFile: any,uploadFiles: any) => {
+    let dlg = reactive({
-        console.log(res,'---',uploadFile,'----',uploadFiles)
+      visible: false
-        info.fileName = res.files.name
+    })
-        let tempFileObj = {id: uploadFile.uid,name: res.files.name,downloadUrl: res.data.data.attrs.downloadUrl}
+    let logCodemirror = reactive({
-        info.fileList.push(tempFileObj)
+      height: '100%',
-        console.info('fileList',info.fileList)
+      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 = () => {
+      clearResult();
-        if (info.fileList.length === 0) {
+      logCodemirror.logStr = '';
-          $this.$message({type:'warning',message:'请上传文件'});
+    }
-          return;
+    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',
+      $this.awsuiaxios.post(param)
-          data: {
+          .then((ro: any) => {
-            cmd: 'com.actionsoft.apps.coe.pal.datamigration_data_migrate',
+            result.path = ro.data.path;
-            sid: settingParam.sessionId,
+            result.logId = ro.data.logId;
-            wsId: settingParam.wsId ? settingParam.wsId : '6f4e292c-1b90-4dd2-8c20-7da159cb20a5',
+            result.resultStatus = ro.data.resultStatus;
-            groupValue: info.groupValue,
+            if (ro.result == 'ok') {
-            fileValue: info.fileValue,
+              result.totalCount = ro.data.totalCount;
-            fileName: info.fileName
+              result.importingCount = ro.data.importingCount;
-          }
+            } else {
-        }
+              // $this.$message.error(ro.msg);
-        $this.awsuiaxios.post(param)
+            }
+            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) => {})
+          .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
-      }
     }
-  })
+    // 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 {
+.data-migration {
-        width: 100%;
+  width: 100%;
-        height: 100%;
+  height: 100%;
-        background-color: #F7F7FB;
+  background-color: #F7F7FB;
-        .top-box {
+
-            height: 75px;
+  .top-box {
-            margin: 0 35px 0 35px;
+    height: 75px;
-            display: flex;
+    margin: 0 35px 0 35px;
-            justify-content: space-between;
+    display: flex;
-            .title-box {
+    justify-content: space-between;
-                line-height: 75px;
+
-                font-size: 18px;
+    .title-box {
-            }
+      line-height: 75px;
-            .step-box {
+      font-size: 18px;
-                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;
-                }
-            }
-        }
     }
+
+    .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>

com.actionsoft.apps.coe.pal.datamigration/src/components/log-codemirror/index.ts

@@ -0,0 +1,2 @@
+import LogCodemirror from './log-codemirror.vue'
+export default LogCodemirror

com.actionsoft.apps.coe.pal.datamigration/src/components/log-codemirror/log-codemirror.vue

@@ -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>