fix : 解决codemirror选择后会关闭rightbox的问题 修改功能代码

nezha-fronted/src/components/common/js/tools.js

@@ -4,7 +4,7 @@ import i18n from '../i18n'
 import bus from '@/libs/bus'
 import moment from 'moment-timezone'
 /* 弹窗点击外部后关闭 */
-const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'el-dropdown-menu', 'el-select-dropdown'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'el-dropdown-menu', 'el-select-dropdown','no-close'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
   // 初始化指令
   bind (el, binding, vnode) {

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -77,6 +77,7 @@
           @click="dropDownVisible = false"
         >
         <div id="editor"
+        class="not-fixed-height no-resize no-close"
         >
         </div>
           <!-- <el-input
@@ -227,7 +228,7 @@
               v-if="plugins.indexOf('metric-input') > -1"
             >
             <div id="editor"
-            class="not-fixed-height no-resize"
+            class="not-fixed-height no-resize no-close"
                 ref="elInput"
 
             ></div>
@@ -450,7 +451,8 @@ export default {
   },
   data () {
     return {
-      a: 'a',
+      newView:null,
+      codeMirrorValue: '',
       dropDownVisible: false,
       // metricStore:[],
       metricOptions: [],
@@ -516,6 +518,13 @@ export default {
     }
   },
   mounted () {
+    this.initCodeMirror()
+    if (!this.fromFatherData && this.type !== 'logs') {
+      this.queryMetrics()
+    }
+  },
+  methods: {
+    initCodeMirror(){
       const self = this
     const promQL = new PromQLExtension().setComplete(
       {
@@ -539,7 +548,7 @@ export default {
       promQL.asExtension(),
       baseTheme
     ]
-    // const dynamicConfigCompartment = new Compartment();
+    if(!this.newView){
       const EditorViewstate = EditorState.create({
         extensions: [
           baseTheme,
@@ -592,27 +601,49 @@ export default {
             self.newChange(update.state.doc.toString())
           })
         ],
-      doc: self.a,
+        doc: self.codeMirrorValue,
         editorState: {
           changeByRange: self.newChange(),
           changes: self.newDoc(),
           facet: self.newChange()
         }
       })
-    new EditorView({
+      const view = new EditorView({
         state: EditorViewstate,
         parent: document.getElementById('editor')
       })
-    if (!this.fromFatherData && this.type !== 'logs') {
+      self.newView = view
-      this.queryMetrics()
+    }else{
+      console.log('viewIsOk');
+      self.newView.dispatch(
+        self.newView.state.update({
+          effects: dynamicConfigCompartment.reconfigure(dynamicConfig),
+        })
+      );
+    }
+const insertAtCursor = (value) => {
+    const view = this.newView;
+    if (view === null) {
+      return;
+    }
+    const { from, to } = view.state.selection.ranges[0];
+    console.log(from,to);
+    view.dispatch(
+      view.update({
+        changes: { from, to, insert: value },
+      })
+    );
   }
     },
-  methods: {
     newChange (val) {
-      console.log(val)
+      this.codeMirrorValue = val
+      this.metricKeyDown(val)
+      console.log('change',val)
+      console.log(this.newView);
+
     },
     newDoc (val) {
-      console.log(val)
+      console.log('doc',val)
     },
     closeDropdown () {
       this.dropDownVisible = false
@@ -688,6 +719,7 @@ export default {
     },
     metricChange: function (value) {
       this.expressionList[this.index] = value
+      this.codeMirrorValue = value
       this.dropDownVisible = false
       this.$emit('change', value)
       this.$forceUpdate()
@@ -700,6 +732,7 @@ export default {
       this.$emit('change', value)
       this.$forceUpdate()
       this.cascaderValue = ''
+      this.initCodeMirror()
     },
     logLabelChange (value) {
       if (!value || value.length === 0) return
@@ -947,21 +980,24 @@ export default {
     },
     insertText (insertTxt) {
       // 获取el-input中的input元素
-      const elInput = this.$refs.elInput.$el.firstElementChild
+      // const elInput = this.$refs.elInput.$el.firstElementChild
       // 获取el-input的值
-      const txt = elInput.value
+      // const txt = elInput.value
       // 获取选区开始位置
-      const startPos = elInput.selectionStart
+      // const startPos = elInput.selectionStart
       // 获取选区结束位置
-      const endPos = elInput.selectionEnd
+      // const endPos = elInput.selectionEnd
-      if (startPos === undefined || endPos === undefined) return
+      // if (startPos === undefined || endPos === undefined) return
-
       // 将文本插入光标位置
-      this.expressionList[this.index] = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
+      // this.expressionList[this.index] = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
       // 将光标移至文本末尾
-      elInput.focus()
+      // elInput.focus()
-      elInput.selectionStart = startPos + insertTxt.length
+      // elInput.selectionStart = startPos + insertTxt.length
-      elInput.selectionEnd = startPos + insertTxt.length
+      // elInput.selectionEnd = startPos + insertTxt.length
+      this.expressionList[this.index]= insertTxt
+      this.codeMirrorValue = insertTxt
+      console.log('inserttext',this.codeMirrorValue);
+      this.initCodeMirror()
     }
     /* setMsg:function(){
         this.appendMsg
@@ -976,9 +1012,10 @@ export default {
         }
       }
     },
-    a () {
+    // codeMirrorValue () {
-      console.log(this.a)
+    //   console.log('watch',this.codeMirrorValue)
-    },
+
+    // },
     metricOptionsParent: {
       deep: true,
       immediate: true,