修复 了编辑器代码加载

添加样例数据选择功能

src/views/biz/algo/index.vue

@@ -154,7 +154,12 @@
                 </el-tabs>
               </el-tab-pane>
             </el-tabs>   
-            <div v-if="activeTabsName=='200'"><el-button type="primary" @click="checkJS">验 证</el-button></div>       
+            <div class="data_exp_list" v-if="showExpList">
+              <div v-for="item in explist">
+                <el-checkbox :key="item.dataId" :label="item.dataName" @change="selecedData(item)"></el-checkbox>
+              </div>
+            </div>
+            <div v-if="activeTabsName=='200'"><el-button @click="selectDataExp">选择数据样例</el-button><el-button type="primary" @click="checkJS">验 证</el-button></div>       
         </el-form-item>
         <el-form-item label="算法验证结果" label-width="100px">
           <div class="width:100%;height:50px">{{ jsCheckResult }}</div>
@@ -191,6 +196,7 @@
 </template>
 
 <script setup name="Algo">
+import {onUnmounted} from "vue"
 import { listAlgo, getAlgo, delAlgo, addAlgo, updateAlgo } from "@/api/biz/algo";
 import { listData, getData } from "@/api/biz/data";
 import { EditorView, keymap } from '@codemirror/view'
@@ -217,7 +223,9 @@ const currweek_value = ref("");
 
 const editorContainer  =  ref(null);
 let editorView = null;
-const modelValue = ref('这是一段js脚本 ！');
+const modelValue = ref('');
+const showExpList = ref(false);
+const explist = ref([]);
 const data = reactive({
   form: {algoPara: "1"},
   queryParams: {
@@ -245,6 +253,17 @@ const handleTabClick=()=>{
 
 }
 
+const selectDataExp=()=>{
+  showExpList.value = !showExpList.value;
+  if(showExpList.value) getDataExp();
+}
+
+const selecedData=(item)=>{
+  lastweek_value.value = item["currData"];
+  currweek_value.value = item["lastData"];
+  showExpList.value = false
+}
+
 const checkJS=()=>{
   let scriptStr=editorView.state.doc.toString();
   if(scriptStr==''){
@@ -296,16 +315,23 @@ const createEditorState = (content) => {
 
   // 添加语言支持
   extensions.push(javascript());
-  extensions.push(oneDark)
-
+  extensions.push(oneDark);
   return EditorState.create({
     doc: content,
     extensions
   })
 }
 
+const destroy=() => {
+  if (editorView) {
+    editorView.destroy()
+    editorView = null
+  }
+}
+
 // 初始化编辑器
  const initEditor = () => {
+  destroy();
   if (editorContainer.value) {
     editorView = new EditorView({
       state: createEditorState(modelValue.value),
@@ -326,6 +352,7 @@ function getList() {
 
 function getDataExp(){
   listData({}).then(res=>{
+    explist.value = res.rows;
     lastweek_value.value = res.rows[0]["currData"];
     currweek_value.value = res.rows[0]["lastData"];
   })
@@ -396,7 +423,7 @@ function handleUpdate(row) {
     modelValue.value = form.value.algoScript;
     setTimeout(() => {
       initEditor();
-    }, 100);
+    }, 300);
   });
 }
 
@@ -445,9 +472,31 @@ function handleExport() {
   }, `algo_${new Date().getTime()}.xlsx`)
 }
 getList();
-getDataExp();
 </script>
 <style scoped>
+
+.data_exp_list{
+    position: absolute;
+    z-index: 100;
+    height: 200px;
+    width: 109px;
+    left: 8%;
+    top: 60%;
+    margin-top: -100px;
+    margin-left: -50px;
+    border: 1px solid #f1eded;
+    border-radius: 5px;
+    background-color: #f9f6f6;
+    padding-left: 5px;
+    overflow: auto;
+}
+.triangle-down {
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid #333;
+}
 .code-editor {
   border: 1px solid #ccc;
   border-radius: 4px;