algorithm-platform-vue/src/views/modules/alg/templs-file-watch.vue

<template>
  <div class="">

    <div>
      <codemirror
        ref="cm"
        v-model="code"
        :options="cmOptions"
      ></codemirror>
    
    </div>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取消</el-button>
      <!-- <el-button type="primary" @click="writeCode()">确定</el-button> -->
    </span>
  </div>
</template>
<script>
// 全局引入vue-codemirror
  import {codemirror} from 'vue-codemirror';
  // 引入css文件
  import 'codemirror/lib/codemirror.css'
  // 引入主题 可以从 codemirror/theme/ 下引入多个
  import 'codemirror/theme/idea.css'
  // 引入语言模式 可以从 codemirror/mode/ 下引入多个
  import 'codemirror/mode/sql/sql.js';
  import 'codemirror/mode/python/python.js'
  import 'codemirror/mode/javascript/javascript.js'

  // 搜索功能
  // find：Ctrl-F (PC), Cmd-F (Mac)
  // findNext：Ctrl-G (PC), Cmd-G (Mac)
  // findPrev：Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)
  // replace：Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)
  // replaceAll：Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)
  import 'codemirror/addon/dialog/dialog.css'
  import 'codemirror/addon/dialog/dialog'
  import 'codemirror/addon/search/searchcursor'
  import 'codemirror/addon/search/search'
  import 'codemirror/addon/search/jump-to-line'
  import 'codemirror/addon/search/matchesonscrollbar'
  import 'codemirror/addon/search/match-highlighter'


  // 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
  import 'codemirror/addon/hint/show-hint.css';
  import 'codemirror/addon/hint/show-hint';
  import 'codemirror/addon/hint/sql-hint';
  import 'codemirror/addon/hint/anyword-hint';
  import "codemirror/addon/hint/javascript-hint.js";
  import "codemirror/addon/lint/javascript-lint.js"; 
  import 'codemirror/addon/lint/lint'
  import 'codemirror/addon/lint/lint.css'

  // 高亮行功能
  import 'codemirror/addon/selection/active-line'
  import 'codemirror/addon/selection/selection-pointer'

  // 调整scrollbar样式功能
  import 'codemirror/addon/scroll/simplescrollbars.css'
  import 'codemirror/addon/scroll/simplescrollbars'

  // 自动括号匹配功能
  import 'codemirror/addon/edit/matchbrackets'
  import 'codemirror/addon/edit/closebrackets'

  // 全屏功能 由于项目复杂，自带的全屏功能一般不好使
  import 'codemirror/addon/display/fullscreen.css'
  import 'codemirror/addon/display/fullscreen'

  // 显示自动刷新
  import 'codemirror/addon/display/autorefresh'

  // 多语言支持？
  import 'codemirror/addon/mode/overlay'
  import 'codemirror/addon/mode/multiplex'


  // 代码段折叠功能
  import 'codemirror/addon/fold/foldcode'
  import 'codemirror/addon/fold/foldgutter'
  import 'codemirror/addon/fold/foldgutter.css'

  import 'codemirror/addon/fold/brace-fold.js'
  import 'codemirror/addon/fold/comment-fold.js'
  import 'codemirror/addon/fold/xml-fold.js';
  import 'codemirror/addon/fold/indent-fold.js';
  import 'codemirror/addon/fold/markdown-fold.js';
  import 'codemirror/addon/fold/comment-fold.js';

  // merge功能
  import 'codemirror/addon/merge/merge.css'
  import 'codemirror/addon/merge/merge'
  // google DiffMatchPatch
  import DiffMatchPatch from 'diff-match-patch'
  // DiffMatchPatch config with global
  window.diff_match_patch = DiffMatchPatch;
  window.DIFF_DELETE = -1;
  window.DIFF_INSERT = 1;
  window.DIFF_EQUAL = 0;
export default {
  name:'Simple',
  components:{
    codemirror
  },
  data() {
    return {
      code:'',
      temId:null,
      fileName:'',
      cmOptions: {
          // 语言及语法模式
          mode: 'text/x-python',
          // 主题
          theme: 'idea',
          readOnly:'nocursor',
          // 显示行数
          line: true,
          lineNumbers: true,
          // 软换行
          lineWrapping: true,
          // tab宽度
          tabSize: 4,
          
          foldGutter: true, // 启用行槽中的代码折叠
          
          autoCloseBrackets: true, // 自动闭合符号
          styleActiveLine: true, // 显示选中行的样式
          
          
          lint: true,
          gutters: [
              "CodeMirror-lint-markers",//代码错误检测
              "CodeMirror-linenumbers",
              "CodeMirror-foldgutter",//展开收起
          ],
          hintOptions: {
            // 避免由于提示列表只有一个提示信息时，自动填充
            completeSingle: false,
            // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息，用于代码提示
            tables: {
              "table1": ["c1", "c2"],
            },
          },
          
          // 高亮行功能
          styleActiveLine: true,
          // 调整scrollbar样式功能
          scrollbarStyle: 'overlay',
          // 自动括号匹配功能
          matchBrackets: true
        }
    };
  },
  activated() {
    //   处理参数，根据参数初始化数据
    let temId=this.$route.query.temId;
    let fileName=this.$route.query.fileName;
    this.init(temId,fileName);
  },
  methods: {
    init(temId,fileName) {
      this.temId=temId;
      this.fileName=fileName;
      this.$http({
          url:this.$http.adornUrl('/algs/templs/watchTemFile'),
          method:'get',
          params:this.$http.adornParams({
            temId:this.temId,
            fileName:this.fileName
          }),
        }).then(({data})=>{
          this.code=data.content;
        });
      
    }, 
 
    //点击取消按钮，跳转回原路径
    cancel(){
      
      this.$router.replace({ path: '/alg-templs'});
    }
    
  },
  mounted(){
    this.$refs.cm.codemirror.setSize("auto", (document.documentElement.clientHeight - 200) + "px")
    this.$nextTick(() => {
    window.addEventListener('resize', () => {
        //监听浏览器窗口大小改变
        //浏览器变化执行动作
        this.$refs.cm.codemirror.setSize("auto", (document.documentElement.clientHeight - 200) + "px")
      });
    });

    this.$http({
          url:this.$http.adornUrl('/algs/templs/watchTemFile'),
          method:'get',
          params:this.$http.adornParams({
            temId:this.temId,
            fileName:this.fileName
          }),
        }).then(({data})=>{
          this.code=data
    });
  }
  
};
</script>