From d18b879873f31d10f0aac923cf6d8e6c538ab185 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 24 Jan 2024 10:03:09 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E6=95=B0=E6=8D=AE=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=94=B9=E9=80=A0=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../designer/components/tableEditor.vue       | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/bigscreen/designer/components/tableEditor.vue b/packages/bigscreen/designer/components/tableEditor.vue
index 51839514..2e4f04a0 100644
--- a/packages/bigscreen/designer/components/tableEditor.vue
+++ b/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;