静态数据编辑器改造完成

packages/bigscreen/designer/components/tableEditor.vue

@@ -1,8 +1,10 @@
 <script>
 import Vue from 'vue'
+import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 
 export default {
   name: "tableEditor",
+  components: {AiDialogBtn},
   model: {
     event: "input",
     prop: "tableData"
@@ -14,7 +16,8 @@ export default {
   },
   data() {
     return {
-      records: []
+      records: [],
+      form: {}
     }
   },
   computed: {
@@ -49,12 +52,26 @@ export default {
       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)
+      })
     }
   },
   created() {
@@ -70,12 +87,22 @@ export default {
 
 <template>
   <section class="tableEditor">
-    <avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave">
+    <avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave" @row-del="rowDel">
       <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>
+        <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>
@@ -99,7 +126,7 @@ export default {
 
     .el-table__cell {
       color: white;
-      background-color: transparent;
+      background-color: #1D2127;
 
       input:disabled {
         background-color: transparent;
@@ -107,6 +134,10 @@ export default {
         color: white;
         padding: 0;
       }
+
+      &:last-of-type {
+        border-left: 1px solid #fff;
+      }
     }
 
     .label {
@@ -119,6 +150,7 @@ export default {
     .el-icon-plus {
       font-size: 12px;
       color: $primaryColor;
+      line-height: 18px;
 
       &:before {
         margin-right: 4px;