vue-apps/com.actionsoft.apps.coe.pal.batch/src/views/create/save.vue

<template>
  <div v-loading="loading" :style="{height: mainHeight, 'background-color': '#2c2c2c'}">
    <codemirror
        id="mycode"
        ref="mycode"
        style="height: auto"
        v-model="curCode"
        :options="cmOptions"
        class="code"
    />
  </div>
</template>

<script>
import awsuiAxios from "../../awsuiAxios";
import {codemirror} from 'vue-codemirror'
import "codemirror/theme/ambiance.css";  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

export default {
  name: "check-process",
  props: {
    param: {// 文件名称
      type: Object,
      default: function () {
        return {}
      }
    },
    totalHeight: {
      type: String,
      default: 0
    }
  },
  components: {codemirror},
  data() {
    return {
      loading: false,
      wsId: wsId,
      teamId: teamId,
      processFileValue: processFileValue,
      methodCategory: methodCategory,
      msgHeight: '20px',
      mainHeight: parseInt(this.totalHeight) + 'px',
      curCode: '正在导入',
      cmOptions: {
        value: '',
        mode: "text/html",
        theme: "ambiance",
        lineNumbers: false,
        styleActiveLine: true,
        tabSize: 4,
        autofocus: true,
        scrollbarStyle: "null",
        readOnly: true,
      },
      result: {// 保存结果
        path: '',
        type: '',
        logId: '',
        count: 0,
        executeDone: false,
        interval: null, // 查询日志定时器
        timer: 0, // 时间戳记录
      }
    }
  },
  mounted() {
    this.save();
  },
  methods: {
    save() {// 上传
      const that = this;
      const data = {
        url: 'jd',
        data: {
          cmd: "com.actionsoft.apps.coe.pal.batch_create_data_save",
          param: JSON.stringify(that.param),
          methodCategory: methodCategory
        }
      };
      awsuiAxios.post(data).then(function (ro) {
        if (ro.result == 'ok') {
          // 获取导入日志信息
          that.result.path = ro.data.path;
          that.result.logId = ro.data.logId;
          that.result.type = ro.data.type;
          that.result.count = 0;
          that.getImportInfoEvent();
        } else if (ro.result == 'warning') {
          that.$message({message: ro.msg, type: 'warning'});
        } else {
          that.$message.error(ro.msg);
        }
      }).catch(error => {
        console.log(error);
      })
    },
    getImportInfoEvent() {// 定时器查询导入日志
      this.result.interval = setInterval(this.queryLog, 1000)
    },
    queryLog() {
      const that = this;
      that.result.timer = new Date().getTime();
      const data = {
        url: 'jd',
        data: {
          cmd: "com.actionsoft.apps.coe.pal.batch_create_log_query",
          type: that.result.type,
          logId: that.result.logId,
          path: that.result.path,
          timer: that.result.timer
        }
      };
      awsuiAxios.post(data).then(function (ro) {
        if (ro.result == 'ok') {
          if (ro.data.timer == '') {
            that.curCode = ro.data.content;
            // 添加内容后定位到行尾
            that.$nextTick(() => {
              that.$refs.mycode.codemirror.scrollIntoView(that.$refs.mycode.codemirror.lineCount() - 1);
            });
            that.result.executeDone = true;
            that.clearInterval();
          } else if (parseInt(ro.data.timer) <= that.result.timer) {// axios异步，以时间戳对比获取最新日至内容
            that.curCode = ro.data.content;
            // 添加内容后定位到行尾
            that.$nextTick(() => {
              that.$refs.mycode.codemirror.scrollIntoView(that.$refs.mycode.codemirror.lineCount() - 1);
            });
          }
        } else if (ro.result == 'warning') {
          that.$message({message: ro.msg, type: 'warning'});
        } else {
          that.$message.error(ro.msg);
        }
      }).catch(error => {
        console.log(error);
      })
    },
    clearInterval() {
      clearInterval(this.result.interval);
    },
    downloadLog() {
      const that = this;
      if (that.result.path == '') {
        that.$message({message: '获取报告失败', type: 'warning'});
        return;
      }
      if (!that.result.executeDone) {
        that.$message({message: '正在导入，请稍等', type: 'warning'});
        return;
      }
      const data = {
        url: 'jd',
        data: {
          cmd: "com.actionsoft.apps.coe.pal.batch_create_log_download",
          type: that.result.type,
          path: that.result.path
        }
      };
      awsuiAxios.post(data).then(function (ro) {
        if (ro.result == 'ok') {
          window.open(ro.data.url);
          parent.closeBatchCreateFn([]);
        } else if (ro.result == 'warning') {
          that.$message({message: ro.msg, type: 'warning'});
        } else {
          that.$message.error(ro.msg);
        }
      }).catch(error => {
        console.log(error);
      })
    }
  }
}
</script>

<style scoped>
#mycode >>> .CodeMirror-lines {
  background-color: #2c2c2c;
  color: #58A0F0;
}

#mycode >>> .CodeMirror {
  height: auto !important;
}
</style>