codemirror

<template>
  <div
    class='sqlcontent'
    v-if="weDataRecord?.scriptContent"
  >
    <Codemirror
      v-model:value="weDataRecord.scriptContent"
      :options="cmOptions"
      border
      ref="cmRef"
      @change="onChange"
      @input="onInput"
    > </Codemirror>
      </div>
</template>
<script >
import {
  reactive,
  ref,
  onBeforeMount,
  onMounted,
  onUnmounted,
  defineComponent,
  watch
} from "vue";
import "codemirror/mode/javascript/javascript.js";
import Codemirror from "codemirror-editor-vue3";
export default defineComponent({
  name: "ETL",
  components: { Editor, Codemirror },
  props: { weData: { type: Object, default: () => {} } },
  emits: ["copy"],
  setup(props, { emit }) {
    const weDataRecord = ref(props.weData || {});
    const copycontent = value => {
      emit("copy", value);
    };
    const code = ref();
    const cmRef = ref();
    const cmOptions = { mode: "default", readOnly: true, lineWrapping: true };
    const onChange = (val, cm) => {
      console.log(val);
      console.log(cm.getValue());
    };
    const onInput = val => {
      console.log(val);
    };
    onMounted(() => {
      setTimeout(() => {
        cmRef.value?.refresh();
      }, 1000);
      setTimeout(() => {
        cmRef.value.resize("auto", "auto");
      }, 2000);
      setTimeout(() => {
        cmRef.value?.cminstance.isClean();
      }, 3000);
    });
    onUnmounted(() => {
      cmRef.value?.destroy();
    });
    watch(
      () => props.weData,
      newVal => {
        weDataRecord.value = newVal;
      }
    );
    return {
      weDataRecord,
      copycontent,
      code,
      cmRef,
      cmOptions,
      onChange,
      onInput
    };
  }
});
</script><style scoped lang='less'>
.table-type {
  padding: 6px;
  display: flex;
  flex-direction: row;
}
.table-left {
  display: flex;
  flex-direction: column;
}
.table-right {
  display: flex;
  margin-left: 300px;
  flex-direction: column;
}
.table-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 10px;
}
.label-desc {
  width: 100px;
  text-align: left;
  color: #bbbaba;
}
.table-sheet {
  display: flex;
  flex-direction: row;
}
.hint {
  text-align: left;
  margin: 6px;
  font-weight: 700;
  font-size: 20px;
}
.ant-tabs {
  color: #808080 !important;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #2c3e50 !important;
  font-weight: 500;
}
.ant-tabs-ink-bar {
  position: absolute;
  background: #2c3e50;
  pointer-events: none;
}
.table-sheet-outline {
  display: flex;
  flex-direction: row;
  margin-right: 20px;
}
.label-desc-outline {
  width: 110px;
  text-align: left;
  color: #bbbaba;
}
.label-desc-outline1 {
  width: 100px;
  text-align: left;
  color: #bbbaba;
}
.copy {
  margin-left: 8px;
}
.sqlcontent {
  max-height: 800px;
  overflow: auto;
  padding: 6px;
}
</style>