静态数据编辑器基本完成

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>