codemirror复制代码

<template>
  <codemirror
   ref="myCm"
   class="codemirror-box"
   :value="formula"
   :options="cmOptions">
  </codemirror>
  <span id="copy"></span>
</template>

<script>
import '../SqlModel/sqldevelop/codemirror.js';
import 'codemirror/theme/monokai.css';
import {mapGetters} from 'vuex';

export default {
  data () {
    return {
      isBp: true,
      treeData: null, // 表关系树形数据结构
      loading: false,
      cmOptions: {
        readOnly: true,
        tabSize: 2,
        mode: 'text/x-mysql',
        theme: 'darcula', // 主题
        indentWithTabs: false,
        lineNumbers: true, // 是否显示行号
        smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进
        lineWrapping: 'wrap',
        matchBrackets: true, // 括号匹配
        extraKeys: {'Alt': 'autocomplete'} // 是否自动提示
      },
      formula: ` SELECT left(settle_biz_date, 4) as year,
       COUNT(distinct create_shop_id) AS store_count,
        count(distinct id) AS bs_count,
        count(distinct group_code) 
FROM  
    ( SELECT id,
        create_shop_id,
      settle_biz_date
    FROM  
        ( SELECT id,
        create_shop_id,
         settle_biz_date,
         ROW_NUMBER ()
             OVER ( PARTITION BY ID 
        ORDER BY  last_time DESC ) AS _rank 
        FROM hdfs_src_cy7_biz_bs_v2 
        WHERE ( ( partition_time >='2017-01-01' 
                 AND partition_time<'2020-01-01' )
                 OR partition_time = '1970-01-01' ) ) T 
        WHERE T ._rank = 1 and settle_biz_date >= '2017-01-01' and settle_biz_date < '2020-01-01') a left 
    JOIN cy7_3.shop_temp shop
     ON a.create_shop_id=shop.store_code
group by  left(settle_biz_date, 4) `
    };
  },
  computed: {
    ...mapGetters({theme: 'theme'})
  },
  watch: {
    theme (val) {
      this.$refs.tableRelation.refresh();
    }
  },
  mounted () {
    // 获取生成过程
    // this.getModelGenProcess();
  },
  methods: {
    // 获取生成过程
    getModelGenProcess () {

    },
    // 编辑SQL
    editSQL () {
      this.$store.commit('sqlModel/SET_SQL_CODE', this.formula);
      this.$router.push({
        path: '/sqlModel',
        query: {
          tableId: this.$route.query.tableId,
          isEdit: true
        }
      });
    },
    // 复制SQL语句
    copySQL () {
      // 创建textArea
      var textA = document.createElement('textarea');
      textA.id = 'sqlCode';
      textA.value = this.formula;
      // 追加
      document.getElementById('copy').appendChild(textA);
      // 选中【复制内容】
      document.getElementById('sqlCode').select();
      try {
        // window.document.execCommand【不能复制隐藏域】
        window.document.execCommand('Copy');
        // 移除
        document.getElementById('copy').innerHTML = '';
        this.$message({
          type: 'success',
          message: '复制成功',
          center: true
        });
      } catch (error) {
        this.$message({
          type: 'error',
          message: '您的浏览器不支持此操作，请您扫描二维码',
          center: true
        });
      }
    }
  }
};
</script>