From 6ea3186144ed917ebcc8c8de7de18d8830d8cb8c Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Mon, 30 Dec 2019 11:57:50 +0800
Subject: [PATCH] 优化可编辑单元格事件推送

---
 examples/views/page/other.vue                   |  2 +-
 examples/views/page/table-new/cell-editable.vue | 40 +++++++++++++++++++++++++++++++---------
 examples/views/page/table-new/index.vue         | 35 +++++++++++++++++++++--------------
 3 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index b368448..b013d2f 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -12,7 +12,7 @@
 
 <template>
   <div>
-    <pre>{{ model }}</pre>
+    <pre>{{ tableData }}</pre>
     <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable @cell-edit="onCellEdit">
       <el-table-column type="selection"></el-table-column>
       <template #value-location-locationMin="{ value }">
diff --git a/examples/views/page/table-new/cell-editable.vue b/examples/views/page/table-new/cell-editable.vue
index b6c1147..bd7d102 100644
--- a/examples/views/page/table-new/cell-editable.vue
+++ b/examples/views/page/table-new/cell-editable.vue
@@ -18,9 +18,9 @@
       <component
         :value="$_get(row, item.fullKey)"
         :is="item.type" v-bind="item.props" :style="item.style" size="mini"
-        @input="v => $emit('update', { oldValue, value: v, row, key: item.key, fullKey: item.fullKey })"
+        @input="onInput"
       ></component>
-      <span v-if="btnVisible !== false" @click="$emit('done')">
+      <span v-if="btnVisible !== false" @click="onConfirm">
         <svg class="eagle-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24">
           <path d="M235.946667 472.938667l-45.226667 45.312 210.090667 209.514666 432.362666-427.690666-45.013333-45.482667-387.157333 382.976z"></path>
         </svg>
@@ -51,20 +51,42 @@ export default {
     editable: Boolean,
     btnVisible: Boolean,
   },
-  methods: {
-    $_get: get,
-  },
   data() {
     return {
       oldValue: undefined,
+      value: undefined,
+      confirm: false,
     }
   },
   watch: {
-    editable: {
-      handler() {
+    editable(val) {
+      if (val) {
+        this.confirm = false;
         this.oldValue = get(this.row, this.item.agentKey || this.item.fullKey);
-      },
-      immediate: true,
+      } else {
+        if (!this.confirm) {
+          this.$emit('cancel', this.emitData);
+        }
+      }
+    }
+  },
+  computed: {
+    emitData() {
+      const { oldValue, value, row, item } = this;
+      return { oldValue, value, row, key: item.key, fullKey: item.fullKey };
+    }
+  },
+  methods: {
+    $_get: get,
+    // 组件出发input事件
+    onInput(value) {
+      this.value = value;
+      this.$emit('update', this.emitData)
+    },
+    // 当点击确认
+    onConfirm() {
+      this.confirm = true;
+      this.$emit('done', this.emitData);
     }
   }
 }
diff --git a/examples/views/page/table-new/index.vue b/examples/views/page/table-new/index.vue
index 225d188..50a258e 100644
--- a/examples/views/page/table-new/index.vue
+++ b/examples/views/page/table-new/index.vue
@@ -28,7 +28,7 @@
               <template #default="{ row, column, $index }">
                 <cell-editable
                   :editable="row.$editable || (editable && (tableEditCell.index === row.$index && tableEditCell.key === (item.agentKey || item.fullKey || item.key)))"
-                  :row="row" :item="item" @update="onCellUpdate" @done="onCellUpdateDone" :btn-visible="!row.$editable"
+                  :row="row" :item="item" @update="onCellUpdate" @done="onCellUpdateDone" @cancel="onCellUpdateCancel" :btn-visible="!row.$editable"
                 >
                   <!-- 如果有表格列值渲染具名插槽 -->
                   <slot v-if="$scopedSlots[`value-${item.keyPath.join('-')}`]" :name="`value-${item.keyPath.join('-')}`" v-bind="item"
@@ -230,24 +230,31 @@ export default {
     },
     // 编辑表格更新值
     onCellUpdate({ oldValue, value, row, key, fullKey }) {
-      const tableData = cloneDeep(this.tableData);
-      const tableRow = tableData[row.$index];
-      set(tableRow, fullKey, value);
-      tableData[row.$index] = tableRow;
-      if (this.$listeners['input']) {
+      this.setCellValue({ value, row, key, fullKey });
+    },
+    // 编辑表格确认
+    onCellUpdateDone({ oldValue, value, row, key, fullKey }) {
+      this.tableEditCell = {};
+      if (this.$listeners['cell-edit']) {
+        const { tableData } = this.setCellValue({ value, row, key, fullKey });
         if (this.$listeners['input']) {
-          this.$set(this.tableData, row.$index, tableRow);
-          this.$emit('cell-edit', { row: tableRow, key, fullKey, oldValue, value });
-        } else {
           this.$emit('input', tableData);
         }
-      } else {
-        this.$set(this.tableData, row.$index, tableRow);
+        this.$emit('cell-edit', { row, key, fullKey, value });
       }
     },
-    // 编辑表格确认
-    onCellUpdateDone() {
-      this.tableEditCell = {}
+    // 表格取消编辑
+    onCellUpdateCancel({ oldValue, value, row, key, fullKey }) {
+      this.setCellValue({ value: oldValue, row, key, fullKey });
+    },
+    // 设置表格值
+    setCellValue({ value, row, key, fullKey }) {
+      const tableData = cloneDeep(this.tableData);
+      const tableRow = tableData[row.$index];
+      set(tableRow, fullKey, value);
+      tableData[row.$index] = tableRow;
+      this.$set(this.tableData, row.$index, tableRow);
+      return { tableData, tableRow };
     },
     // 表格选中
     onSelectionChange(selection) {
--
libgit2 0.21.0