From b8413d198fa68bd543cbde6543f90886bacfdc5b Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Fri, 27 Dec 2019 18:15:36 +0800
Subject: [PATCH] 新式表格支持行内新增编辑

---
 examples/views/page/other.vue                   |  14 ++++++++------
 examples/views/page/table-new/cell-editable.vue |  18 ++++++++++++++++--
 examples/views/page/table-new/index.vue         | 117 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------
 3 files changed, 129 insertions(+), 20 deletions(-)

diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 76583d0..b368448 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -13,7 +13,7 @@
 <template>
   <div>
     <pre>{{ model }}</pre>
-    <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable>
+    <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 }">
         <el-tag v-if="value" size="mini" disable-transitions>{{ value }}</el-tag>
@@ -27,10 +27,8 @@
         </el-table-column>
       </template> -->
     </eg-table>
-    <!-- <p>这是一个非markdown页面</p>
-    <pre>{{ model }}</pre>
     <el-button size="mini" @click="handleGetValue">校验</el-button>
-    <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> -->
+    <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> -->
     <eg-form
       ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4"
       form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
@@ -73,9 +71,10 @@ export default {
               {
                 group: { key: 'district' },
                 list: [
-                  { type: 'eagle-select', label: '省', key: 'province', props: { dataSource: [{ label: '上海', value: '上海' }, { label: '北京', value: '北京' }] }, rules: [{ required: true, message: '请输入省', trigger: 'change' }], minWidth: 120 },
+                  { type: 'eagle-select', label: '省', key: 'province', props: { dataSource: [{ label: '新疆', value: '新疆' }, { label: '四川', value: '四川' }] }, rules: [{ required: true, message: '请输入省', trigger: 'change' }], minWidth: 120 },
                   // { type: 'el-input', label: '市', key: 'city', render: { type: 'el-tag', props: { type: 'danger', size: 'mini' } } },
-                  { type: 'el-input', label: '市', key: 'city',
+                  { type: 'eagle-select', label: '市', key: 'city',
+                    props: { dataSource: [{ label: '上海', value: '上海' }, { label: '北京', value: '北京' }] },
                     render: {
                       type: 'a', props: { href: 'https:///www.baidu.com/', target: '_blank' }, style: { color: 'red' },
                       children({ row }) {
@@ -161,6 +160,9 @@ export default {
     },
     handleGetValue() {
       this.$refs.form.validate();
+    },
+    onCellEdit(e) {
+      console.log(e)
     }
   }
 }
diff --git a/examples/views/page/table-new/cell-editable.vue b/examples/views/page/table-new/cell-editable.vue
index 51ab543..b6c1147 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', { value: v, row, key: item.fullKey })"
+        @input="v => $emit('update', { oldValue, value: v, row, key: item.key, fullKey: item.fullKey })"
       ></component>
-      <span @click="$emit('done')">
+      <span v-if="btnVisible !== false" @click="$emit('done')">
         <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>
@@ -49,9 +49,23 @@ export default {
     row: Object,
     item: Object,
     editable: Boolean,
+    btnVisible: Boolean,
   },
   methods: {
     $_get: get,
+  },
+  data() {
+    return {
+      oldValue: undefined,
+    }
+  },
+  watch: {
+    editable: {
+      handler() {
+        this.oldValue = get(this.row, this.item.agentKey || this.item.fullKey);
+      },
+      immediate: true,
+    }
   }
 }
 </script>
\ No newline at end of file
diff --git a/examples/views/page/table-new/index.vue b/examples/views/page/table-new/index.vue
index 4687867..225d188 100644
--- a/examples/views/page/table-new/index.vue
+++ b/examples/views/page/table-new/index.vue
@@ -5,8 +5,16 @@
 </style>
 
 <template>
-  <div @keyup.enter="editCell = {}">
-    <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }" v-on="tableEvents" @cell-dblclick="onCellDblclick">
+  <div @keyup.enter="tableEditCell = {}">
+    <div style="padding-bottom: 10px;">
+      <el-button @click="handleNew" size="mini">新增</el-button>
+      <el-button @click="handleEdit" size="mini" v-if="!rowEditable && tableSelection.length > 0">编辑</el-button>
+      <el-button @click="handleSave" size="mini" type="primary" v-if="rowEditable">完成</el-button>
+      <el-button @click="handleCancel" size="mini" type="plain" v-if="rowNew">取消</el-button>
+    </div>
+    <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }"
+      v-on="tableEvents" @cell-dblclick="onCellDblclick" @selection-change="onSelectionChange"
+    >
       <!-- 默认表格插槽 -->
       <slot name="default"></slot>
       <!-- 根据配置列表生成表格列 -->
@@ -16,11 +24,11 @@
             <!-- 如果有表格列具名插槽 -->
             <slot v-if="$scopedSlots[item.keyPath.join('-')]" :name="item.keyPath.join('-')" v-bind="item"></slot>
             <!-- 默认表格列渲染 -->
-            <el-table-column v-else v-bind="item" :prop="item.agentKey || item.fullKey || item.key" :key="index" :min-width="item.minWidth || item['min-width'] || 140">
+            <el-table-column v-else v-bind="item" :prop="item.fullKey || item.key" :key="index" :min-width="minWidth || item.minWidth || item['min-width'] || (editable ? 140 : undefined)">
               <template #default="{ row, column, $index }">
                 <cell-editable
-                  :editable="editable && (editCell.index === row.$index && editCell.key === (item.agentKey || item.fullKey || item.key))"
-                  :row="row" :item="item" @update="onCellUpdate" @done="editCell = {}"
+                  :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"
                 >
                   <!-- 如果有表格列值渲染具名插槽 -->
                   <slot v-if="$scopedSlots[`value-${item.keyPath.join('-')}`]" :name="`value-${item.keyPath.join('-')}`" v-bind="item"
@@ -69,12 +77,16 @@ export default {
     tableEvents: Object,
     // 是否可编辑
     editable: Boolean,
+    // 列宽
+    minWidth: Number,
   },
   data() {
     return {
-      tableList: [],
-      tableData: [],
-      editCell: {},
+      tableList: [], // 表格配置列表
+      tableData: [], // 表格数据
+      tableRowTemplate: { $editable: true }, // 行数据模板
+      tableEditCell: {}, // 正在编辑的单元格
+      tableSelection: [], // 表格已选中
     };
   },
   computed: {
@@ -83,6 +95,28 @@ export default {
       get() {
         return this.$refs.table;
       }
+    },
+    // 行编辑状态
+    rowEditable() {
+      let result = false;
+      for (const row of this.tableData) {
+        if (row.$editable) {
+          result = true;
+          break;
+        }
+      }
+      return result;
+    },
+    // 存在新行
+    rowNew() {
+      let result = false;
+      for (const row of this.tableData) {
+        if (row.$new) {
+          result = true;
+          break;
+        }
+      }
+      return result;
     }
   },
   watch: {
@@ -115,6 +149,7 @@ export default {
         generateFullKey(newList);
         // 创建输出列表
         const result = [];
+        const tableRowTemplate = {};
         // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
         const generateFlatList = (list) => {
           list.forEach(item => {
@@ -122,17 +157,59 @@ export default {
               generateFlatList(item.list);
             } else if (!item.group && !item.list) {
               result.push({ ...item, keyPath: item.fullKey.split('.') });
+              set(tableRowTemplate, item.fullKey, undefined);
+              tableRowTemplate.$editable = true;
             }
           });
         };
         generateFlatList(newList);
         this.tableList = result;
+        this.tableRowTemplate = tableRowTemplate;
       },
       immediate: true
     }
   },
   methods: {
     $_get: get,
+    handleNew() {
+      const tableData = cloneDeep(this.tableData);
+      tableData.push({ ...this.tableRowTemplate, $new: true });
+      this.tableEditCell = {};
+      this.emitTableData(tableData);
+    },
+    handleEdit() {
+      const tableData = cloneDeep(this.tableData);
+      const selectionIndexArr = this.tableSelection.map(i => i.$index);
+      tableData.forEach((r, i) => {
+        if (selectionIndexArr.includes(r.$index)) {
+          tableData[i].$editable = true;
+        }
+      });
+      this.tableEditCell = {};
+      this.emitTableData(tableData);
+    },
+    handleSave() {
+      const tableData = cloneDeep(this.tableData);
+      tableData.forEach((r, i) => {
+        delete tableData[i].$editable;
+        delete tableData[i].$new;
+      });
+      this.tableEditCell = {};
+      this.emitTableData(tableData);
+    },
+    handleCancel() {
+      let tableData = cloneDeep(this.tableData);
+      tableData = tableData.filter(row => !row.$new);
+      this.emitTableData(tableData);
+    },
+    // 更新表格数据
+    emitTableData(tableData) {
+      if (this.$listeners['input']) {
+        this.$emit('input', tableData);
+      } else {
+        this.tableData = tableData;
+      }
+    },
     // 绑定表格列显示隐藏状态
     bindItemVisible(visible = true) {
       let result = visible;
@@ -147,19 +224,35 @@ export default {
     },
     // 双击单元格
     onCellDblclick(row, column, cell, event) {
-      this.editCell = { index: row.$index, key: column.property };
+      if (this.editable) {
+        this.tableEditCell = { index: row.$index, key: column.property };
+      }
     },
     // 编辑表格更新值
-    onCellUpdate({ value, row, key }) {
+    onCellUpdate({ oldValue, value, row, key, fullKey }) {
       const tableData = cloneDeep(this.tableData);
       const tableRow = tableData[row.$index];
-      set(tableRow, key, value);
+      set(tableRow, fullKey, value);
       tableData[row.$index] = tableRow;
       if (this.$listeners['input']) {
-        this.$emit('input', tableData);
+        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);
       }
+    },
+    // 编辑表格确认
+    onCellUpdateDone() {
+      this.tableEditCell = {}
+    },
+    // 表格选中
+    onSelectionChange(selection) {
+      this.tableSelection = selection;
+      this.$emit('selection', selection);
     }
   }
 };
--
libgit2 0.21.0