静态数据编辑器基本完成

packages/bigscreen/designer/components/configItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="configItem">
+  <section class="configItem" :class="{topLabel}">
     <label v-text="label"/>
     <div class="content fill">
       <slot v-if="$slots.default"/>
@@ -12,12 +12,9 @@ export default {
   name: "configItem",
   props: {
     label: String,
-    value: {default: null}
+    value: {default: null},
+    topLabel: Boolean
   },
-  data() {
-    return {}
-  },
-  methods: {},
 }
 </script>
 <style scoped lang="scss">
@@ -27,6 +24,7 @@ export default {
   justify-content: space-between;
   margin-bottom: 10px;
 
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -52,7 +50,7 @@ export default {
     color: #fff;
   }
 
-  .el-select,.ai-select {
+  .el-select, .ai-select {
     width: 100%;
 
     &:last-child {
@@ -82,5 +80,20 @@ export default {
     text-align: right;
     margin-left: 30px;
   }
+
+  &.topLabel {
+    flex-direction: column;
+    align-items: normal;
+
+    & > label {
+      margin-bottom: 8px;
+    }
+
+    .content {
+      flex-shrink: 0;
+      width: 100%;
+      margin-left: 0;
+    }
+  }
 }
 </style>

packages/bigscreen/designer/components/datasourcePicker.vue

@@ -11,14 +11,7 @@
       </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>
+      <table-editor label="设置数据" v-model="tableData" :configs.sync="colConfigs" @data="changeData"/>
     </template>
     <config-item v-else-if="source.dataType === 'dynamicData'" label="数据源">
       <ai-select v-model="source.sourceDataId" placeholder="请选择数据源" :instance="instance"
@@ -57,6 +50,7 @@ export default {
       dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
       content: "",
       loading: false,
+      tableData: [],
       colConfigs: []
     }
   },
@@ -78,8 +72,27 @@ export default {
           new DvCompData(this.source.dataType, this.source, this.instance).getData().then(data => {
             this.source[this.source.dataType] = data
           })
+    },
+    initStaticDataProps() {
+      const columnProp = "name"
+      this.options.staticData.map((row, i) => {
+        const prop = `c${i || ""}`
+        this.colConfigs.push({label: row[columnProp], prop})
+        Object.entries(row).map(([k, v]) => {
+          if (/^v/.test(k)) {
+            const item = this.tableData[k.substring(1) || 0] || {}
+            item[prop] = v
+            this.tableData[k.substring(1) || 0] = item
+          }
+        })
+      })
+      this.tableData = this.tableData.map(e => ({...e, $cellEdit: false}))
     }
   },
+  created() {
+    //新版静态数据
+    this.initStaticDataProps()
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -88,9 +101,5 @@ export default {
     position: relative;
     padding-left: 10px;
   }
-
-  .tableStyle {
-    align-items: normal;
-  }
 }
 </style>

packages/bigscreen/designer/components/tableEditor.vue

@@ -1,7 +1,6 @@
 <script>
 import Vue from 'vue'
 
-console.log(window.AVUE)
 export default {
   name: "tableEditor",
   model: {
@@ -9,34 +8,126 @@ export default {
     prop: "tableData"
   },
   props: {
+    label: String,
     tableData: {default: () => []},
     configs: {default: () => []}
   },
+  data() {
+    return {
+      records: []
+    }
+  },
   computed: {
-    columns: v => v.configs
+    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}
+        })
+      }
+    },
+  },
+  methods: {
+    rowSave(form, done) {
+      this.$emit("input", this.records)
+      this.$emit("data", this.getFormatData())
+      done()
+    },
+    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
+      })
+    }
   },
   created() {
     Vue.use(window.AVUE, {
-      size: 'small',
-      tableSize: 'small',
-      calcHeight: 48,
+      size: 'mini',
+      tableSize: 'mini',
+      calcHeight: 36,
     })
+    this.records = this.tableData.map(e => ({$cellEdit: true, ...e}))
   }
 }
 </script>
 
 <template>
   <section class="tableEditor">
-    <avue-crud/>
+    <avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave">
+      <template v-if="label" v-slot:menuLeft>
+        <div class="label" v-text="label"/>
+      </template>
+      <template v-slot:menuRight>
+        <div class="el-icon-plus pointer" @click="records.push({$cellEdit: true})">增加数据</div>
+      </template>
+    </avue-crud>
   </section>
 </template>
 <style scoped lang="scss">
 .tableEditor {
   width: 100%;
   height: auto;
+  margin-bottom: 10px;
 
-  .ag-theme-balham {
-    height: 300px;
+  :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: transparent;
+
+      input:disabled {
+        background-color: transparent;
+        border-color: transparent;
+        color: white;
+        padding: 0;
+      }
+    }
+
+    .label {
+      width: 60px;
+      color: #FFFFFF;
+      font-size: 12px;
+      text-align: right;
+    }
+
+    .el-icon-plus {
+      font-size: 12px;
+      color: $primaryColor;
+
+      &:before {
+        margin-right: 4px;
+      }
+    }
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
   }
 }
 </style>