更换json编辑器

packages/bigscreen/designer/components/datasourcePicker.vue

@@ -11,7 +11,9 @@
       </ai-dialog-btn>
     </div>
     <template v-else-if="source.dataType === 'staticData'">
-      <table-editor label="设置数据" v-model="staticDataOps.tableData" :configs.sync="staticDataOps.colConfigs" @data="changeData"/>
+      <config-item label="设置数据" topLabel>
+        <json-editor v-model="options.staticData" mainMenuBar/>
+      </config-item>
     </template>
     <config-item v-else-if="source.dataType === 'dynamicData'" label="数据源">
       <ai-select v-model="source.sourceDataId" placeholder="请选择数据源" :instance="instance"
@@ -32,11 +34,11 @@ import 'brace/mode/json'
 import 'brace/snippets/json';
 import 'brace/theme/github';
 import 'brace/theme/monokai';
-import TableEditor from "./tableEditor.vue";
+import JsonEditor from "./jsonEditor.vue";
 
 export default {
   name: "datasourcePicker",
-  components: {TableEditor, ConfigItem, AiDialogBtn, CodeEditor},
+  components: {JsonEditor, ConfigItem, AiDialogBtn, CodeEditor},
   model: {
     event: "input",
     prop: "options"

packages/bigscreen/designer/components/jsonEditor.vue

@@ -0,0 +1,95 @@
+<script>
+export default {
+  name: "jsonEditor",
+  model: {
+    event: "input",
+    prop: "value"
+  },
+  props: {
+    value: {default: () => ({})}
+  },
+  data() {
+    return {
+      editor: null,
+      fullscreen: false
+    }
+  },
+  watch: {
+    value(v) {
+      this.editor.set(v)
+    }
+  },
+  methods: {
+    init() {
+      const {JSONEditor} = window
+      if (!this.editor && JSONEditor) {
+        const {mode, search, mainMenuBar, navigationBar} = this.$attrs
+        this.editor = new JSONEditor(this.$el, {
+          modes: ['code', 'form', 'tree'],
+          language: 'zh-CN', mode, search, mainMenuBar, navigationBar, statusBar: true,
+          onChangeJSON: json => {
+            this.$emit("input", json)
+          }
+        }, this.value)
+      } else setTimeout(() => this.init(), 500)
+      const fullscreenBtn = document.querySelector(".fullscreenBtn")
+      if (!fullscreenBtn) {
+        const btn = document.createElement("div")
+        btn.className = "fullscreenBtn el-icon-full-screen"
+        btn.onclick = evt => {
+          evt.stopPropagation()
+          this.fullscreen = !this.fullscreen
+        }
+        this.$el.appendChild(btn)
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    this.editor?.destroy()
+  }
+}
+</script>
+
+<template>
+  <section class="jsoneditor" @contextmenu.stop :class="{fullscreen}"/>
+</template>
+
+<style scoped lang="scss">
+.jsoneditor {
+  position: relative;
+
+  &.fullscreen {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 80vw;
+    height: 80vh;
+    z-index: 202403221146;
+  }
+
+  :deep(.ace-jsoneditor) {
+    font-size: 14px !important;
+  }
+
+  :deep(.fullscreenBtn) {
+    position: absolute;
+    z-index: 202403221132;
+    right: 6px;
+    top: 0;
+    height: 35px;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover {
+      color: rgba(white, .6);
+    }
+  }
+}
+</style>

packages/bigscreen/designer/components/tableEditor.vue

@@ -1,168 +0,0 @@
-<script>
-import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
-
-export default {
-  name: "tableEditor",
-  components: {AiDialogBtn},
-  model: {
-    event: "input",
-    prop: "tableData"
-  },
-  props: {
-    label: String,
-    tableData: {default: () => []},
-    configs: {default: () => []}
-  },
-  data() {
-    return {
-      form: {}
-    }
-  },
-  computed: {
-    option() {
-      return {
-        size: 'mini',
-        filterDic: true,
-        cellBtn: true,
-        menuWidth: 120,
-        addBtn: false,
-        columnBtn: false,
-        refreshBtn: false,
-        border: true,
-        delBtnText: " ",
-        editBtnText: " ",
-        saveBtnText: " ",
-        saveBtnIcon: "el-icon-check",
-        cancelBtnText: " ",
-        cancelBtnIcon: "el-icon-close",
-        column: this.configs.map(e => {
-          const item = this.$copy(e)
-          delete item.$index
-          delete item.$cellEdit
-          return {...item, cell: true}
-        })
-      }
-    },
-    columns: v => v.configs,
-    records: v => v.tableData.map(e => ({$cellEdit: true, ...e}))
-  },
-  methods: {
-    rowSave(form, done) {
-      this.$emit("input", this.records)
-      this.$emit("data", this.getFormatData())
-      done()
-    },
-    rowDel(form, index) {
-      this.$confirm("是否要删除该行?").then(() => {
-        this.records.splice(index, 1)
-        this.$emit("data", this.getFormatData())
-      }).catch(() => 0)
-    },
-    getFormatData() {
-      return this.configs.map((c, i) => {
-        const item = {name: c.label}
-        this.records.map((row, j) => item[`v${j || ""}`] = row[`c${i || ""}`])
-        return item
-      })
-    },
-    addColumn() {
-      return this.$refs.addColumn.validate().then(() => {
-        const cols = this.$copy(this.configs)
-        const prop = `c${cols.length}`
-        cols.push({label: this.form.label, prop})
-        return this.$emit("update:configs", cols)
-      })
-    }
-  },
-}
-</script>
-
-<template>
-  <section class="tableEditor">
-    <avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave" @row-del="rowDel">
-      <template v-for="col in columns" :slot="`${col.prop}Header`" slot-scope="{column = {}}">
-        <el-input class="headerInput" v-model="column.label" clearable placeholder="请输入列名" @change="$emit('update:configs', columns)"/>
-      </template>
-      <template v-if="label" v-slot:menuLeft>
-        <div class="label" v-text="label"/>
-      </template>
-      <template v-slot:menuRight>
-        <div class="flex">
-          <ai-dialog-btn dialogTitle="增加列" appendToBody :submit="addColumn" @closed="form={}" width="400px">
-            <div slot="btn" class="el-icon-plus pointer">增加列</div>
-            <el-form ref="addColumn" :model="form" size="small" labelWidth="60px">
-              <el-form-item label="列名" :rule="{required:true, message:'请输入列名'}">
-                <el-input v-model="form.label" clearable placeholder="请输入列名"/>
-              </el-form-item>
-            </el-form>
-          </ai-dialog-btn>
-          <div class="el-icon-plus pointer mar-l8" @click="records.push({$cellEdit: true})">增加数据</div>
-        </div>
-      </template>
-    </avue-crud>
-  </section>
-</template>
-<style scoped lang="scss">
-.tableEditor {
-  width: 100%;
-  height: auto;
-  margin-bottom: 10px;
-
-  :deep(.avue-crud__body) {
-    background-color: transparent;
-
-    .avue-crud__header, .el-table, tr {
-      background-color: transparent;
-    }
-
-    .avue-crud__header {
-      min-height: unset;
-    }
-
-    .el-table__cell {
-      color: white;
-      background-color: #1D2127;
-
-      input:disabled {
-        background-color: transparent;
-        border-color: transparent;
-        color: white;
-        padding: 0;
-      }
-
-      &:last-of-type {
-        border-left: 1px solid #fff;
-      }
-    }
-
-    .label {
-      width: 60px;
-      color: #FFFFFF;
-      font-size: 12px;
-      text-align: right;
-    }
-
-    .el-icon-plus {
-      font-size: 12px;
-      color: $primaryColor;
-      line-height: 18px;
-
-      &:before {
-        margin-right: 4px;
-      }
-    }
-  }
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-
-  :deep(.headerInput) {
-    .el-input__inner {
-      padding: 0;
-      border: none;
-      background: transparent;
-    }
-  }
-}
-</style>