Pre Merge pull request !262 from momo7/dev

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -58,11 +58,11 @@
               <n-input v-model:value="item.mapping" type="text" size="small" placeholder="小" />
             </td>
             <!-- <td>
-              <n-space style="width: 70px" :size="4">
-                <n-badge dot :type="item.result === 1 ? 'success' : 'error'"></n-badge>
-                <n-text>匹配{{ item.result === 1 ? '成功' : '失败' }}</n-text>
-              </n-space>
-            </td> -->
+                <n-space style="width: 70px" :size="4">
+                  <n-badge dot :type="item.result === 1 ? 'success' : 'error'"></n-badge>
+                  <n-text>匹配{{ item.result === 1 ? '成功' : '失败' }}</n-text>
+                </n-space>
+              </td> -->
           </tr>
         </tbody>
       </n-table>
@@ -113,7 +113,15 @@
           </div>
         </n-space>
         <n-card size="small">
-          <n-code :code="toString(source)" language="json"></n-code>
+          <!-- <n-code :code="toString(source)" language="json"></n-code> -->
+          <monaco-editor
+            :modelValue="JSON.stringify(source, null, 2)"
+            @update:modelValue="handleEditorUpdate"
+            language="json"
+            width="100%"
+            height="520px"
+          />
+          <n-button class="sourceBtn-item" @click="handleRun"> 运行 </n-button>
         </n-card>
       </n-space>
     </n-timeline-item>
@@ -130,6 +138,7 @@ import { ChartDataMonacoEditor } from '../ChartDataMonacoEditor'
 import { useFile } from '../../hooks/useFile.hooks'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { toString, isArray } from '@/utils'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 
 const { targetData } = useTargetData()
 defineProps({
@@ -240,6 +249,21 @@ const initFieldListHandle = () => {
   }
 }
 
+// 处理编辑器内容更新
+const handleEditorUpdate = (val: string) => {
+  try {
+    if (!val) return (source.value = '此组件无数据源')
+    source.value = JSON.parse(val)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 监听点击运行按钮的事件
+const handleRun = () => {
+  targetData.value.option.dataset = source.value
+}
+
 watch(
   () => targetData.value?.option?.dataset,
   (