接入avue

packages/bigscreen/designer/components/datasourcePicker.vue

@@ -3,15 +3,23 @@
     <config-item label="数据类型">
       <ai-select v-model="source.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
     </config-item>
-    <config-item label="静态数据" v-if="source.dataType === 'staticData'">
-    </config-item>
-    <div class="codeEditor" v-if="['htmlData','staticData'].includes(source.dataType)">
+    <div class="codeEditor" v-if="['htmlData'].includes(source.dataType)">
       <ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
                      @confirm="changeData(JSON.parse(content))" @open="content=contentstr">
         <code-editor slot="btn" readonly :value="contentstr" :lang="dataLang" theme="github" width="100%" height="250"/>
         <code-editor v-model="content" :lang="dataLang" theme="github" width="100%" height="440" wrap/>
       </ai-dialog-btn>
     </div>
+    <template v-else-if="source.dataType === 'staticData'">
+      <config-item label="设置列" class="tableStyle">
+        <div class="fill">
+          <table-editor v-model="colConfigs" :configs="[{field:'field',headerName:'属性',width:100},{field:'headerName',headerName:'名称',width:100}]"/>
+        </div>
+      </config-item>
+      <config-item label="设置数据" class="tableStyle" v-if="colConfigs.length>0">
+        <table-editor v-model="content" :configs="colConfigs"/>
+      </config-item>
+    </template>
     <config-item v-else-if="source.dataType === 'dynamicData'" label="数据源">
       <ai-select v-model="source.sourceDataId" placeholder="请选择数据源" :instance="instance"
                  :prop="{label:'description'}" @change="changeData"
@@ -31,10 +39,11 @@ import 'brace/mode/json'
 import 'brace/snippets/json';
 import 'brace/theme/github';
 import 'brace/theme/monokai';
+import TableEditor from "./tableEditor.vue";
 
 export default {
   name: "datasourcePicker",
-  components: {ConfigItem, AiDialogBtn, CodeEditor},
+  components: {TableEditor, ConfigItem, AiDialogBtn, CodeEditor},
   model: {
     event: "input",
     prop: "options"
@@ -47,7 +56,8 @@ export default {
     return {
       dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
       content: "",
-      loading: false
+      loading: false,
+      colConfigs: []
     }
   },
   computed: {
@@ -78,5 +88,9 @@ export default {
     position: relative;
     padding-left: 10px;
   }
+
+  .tableStyle {
+    align-items: normal;
+  }
 }
 </style>

packages/bigscreen/designer/components/tableEditor.vue

@@ -1,23 +1,42 @@
 <script>
-import {AgGridVue} from "ag-grid-vue";
-import "ag-grid-community/styles/ag-grid.min.css"
-import "ag-grid-community/styles/ag-theme-balham.min.css"
+import Vue from 'vue'
 
+console.log(window.AVUE)
 export default {
   name: "tableEditor",
+  model: {
+    event: "input",
+    prop: "tableData"
+  },
   props: {
     tableData: {default: () => []},
     configs: {default: () => []}
   },
-  components: {AgGridVue},
   computed: {
     columns: v => v.configs
   },
+  created() {
+    Vue.use(window.AVUE, {
+      size: 'small',
+      tableSize: 'small',
+      calcHeight: 48,
+    })
+  }
 }
 </script>
 
 <template>
   <section class="tableEditor">
-    <ag-grid-vue class="ag-theme-balham" :columnDefs="columns" :rowData="tableData"/>
+    <avue-crud/>
   </section>
 </template>
+<style scoped lang="scss">
+.tableEditor {
+  width: 100%;
+  height: auto;
+
+  .ag-theme-balham {
+    height: 300px;
+  }
+}
+</style>