From 8104d35f08d3dec4ac51d9c2f604181275bfe37a Mon Sep 17 00:00:00 2001
From: liuhanchen <liuhanchen@zeyihuoyun.com>
Date: Sun, 11 Jun 2023 22:49:36 +0800
Subject: [PATCH] feat: 兼容旧版表格编辑器

---
 packages/index.js                |   2 ++
 packages/table/editable copy.vue | 217 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 packages/table/editable.vue      |  38 ++++++++++++++++++++++++++++++++++++--
 packages/table/editor.vue        | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/table/index.vue         |   7 +++++--
 packages/table/normal.vue        |   6 ++++++
 packages/utils/vnode.js          |   2 +-
 7 files changed, 180 insertions(+), 222 deletions(-)
 delete mode 100644 packages/table/editable copy.vue
 create mode 100644 packages/table/editor.vue

diff --git a/packages/index.js b/packages/index.js
index 4b1e71f..0ee6398 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import ZTable from './table/index.vue';
 import ZTableNormal from './table/normal';
 import ZTableEditable from './table/editable';
+import ZTableEditor from './table/editor';
 import ElImageViewer from './upload/image-viewer';
 
 let components = {};
@@ -17,6 +18,7 @@ const install = function(Vue, opts = {}) {
   components[ZTable.name] = ZTable;
   components[ZTableNormal.name] = ZTableNormal;
   components[ZTableEditable.name] = ZTableEditable;
+  components[ZTableEditor.name] = ZTableEditor;
   Object.values(components).forEach(component => {
     // 组件前缀
     const prefix = opts.name || 'z';
diff --git a/packages/table/editable copy.vue b/packages/table/editable copy.vue
deleted file mode 100644
index 99efbb6..0000000
--- a/packages/table/editable copy.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<style lang="scss">
-.z-table-column__cell-editable {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  .el-icon-edit {
-    color: rgba(151, 151, 151, 0.5);
-    &:hover {
-      color: $primary;
-    }
-  }
-  .el-icon-check {
-    color: $green;
-  }
-  .el-icon-close {
-    color: $red;
-  }
-  .el-icon-edit,
-  .el-icon-check,
-  .el-icon-close {
-    cursor: pointer;
-    margin-left: 5px;
-    font-size: 14px;
-  }
-}
-</style>
-
-<template>
-  <el-table :data="tableData | tableDataFilter" :size="_elSize" v-bind="bindProps" v-on="$listeners" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
-    <slot name="left"></slot>
-    <template v-for="(item, index) in columns">
-      <el-table-column v-bind="item" :key="index">
-        <slot :name="`header-${item.prop}`" slot="header"></slot>
-        <template #default="{ row, column, $index }">
-          <cell-editor
-            :disabled="item.editalways || editall || disabled || item.editable === false"
-            :editable="item.editalways || editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))"
-            :component="item.component"
-            :value="row[column.property]"
-            @input="value => onCellInput(value, row, column, $index)"
-            @edit-click="setRowEditor(row, column, $index)"
-            @edit-confirm="value => onEditConfirm(value, row, column, $index)"
-          >
-            <template v-if="$scopedSlots[`editor-${item.prop}`]" slot="editor">
-              <slot :name="`editor-${item.prop}`" :value="row[column.property]" :row="row" :index="$index" :onInput="value => onCellInput(value, row, column, $index)"></slot>
-            </template>
-            <template v-if="$scopedSlots[`cell-${item.prop}`]">
-              <slot :name="`cell-${item.prop}`" :value="row[column.property]" :row="row" :index="$index"></slot>
-            </template>
-            <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
-              <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
-            </template>
-          </cell-editor>
-        </template>
-      </el-table-column>
-    </template>
-    <slot></slot>
-    <slot name="append"></slot>
-  </el-table>
-</template>
-
-<script>
-import TableNormal from './normal';
-import tableProps from './props';
-import { cloneDeep, get, set } from '../utils';
-
-export default {
-  name: 'TableEditable',
-  extends: TableNormal,
-  components: {
-    cellEditor: {
-      props: {
-        value: [String, Number, Array, Object, Boolean],
-        component: { type: String, default: 'el-input' },
-        editable: Boolean,
-        disabled: Boolean,
-      },
-      watch: {
-        editable(val) {
-          if (!this.disabled && val && this.component === 'el-input') {
-            this.$nextTick(() => {
-              this.$children[0] && this.$children[0].focus && this.$children[0].focus();
-            });
-          }
-        },
-      },
-      render(h) {
-        if (this.editable) {
-          let editorRender = [
-            h(this.component, {
-              props: { value: this.value, size: 'mini' },
-              on: {
-                input: value => {
-                  this.$emit('input', value);
-                },
-              },
-            }),
-          ];
-          if (this.$scopedSlots.editor) {
-            editorRender = [this.$scopedSlots.editor()];
-          }
-          if (!this.disabled) {
-            const handlerItems = [h('i', { attrs: { title: '确定', class: 'el-icon-check' }, on: { click: () => this.$emit('edit-confirm', this.value) } })];
-            // handlerItems.push(h('i', { attrs: { title: '取消', class: 'el-icon-close' }, on: { click: () => this.$emit('edit-confirm') } }));
-            const handler = h('span', handlerItems);
-            editorRender.push(handler);
-          }
-          return h('span', { class: 'z-table-column__cell-editable' }, editorRender);
-        }
-        let valueRender = [h('span', this.value)];
-        if (this.$scopedSlots.default) {
-          valueRender = [this.$scopedSlots.default()];
-        }
-        if (!this.disabled) {
-          valueRender.push(h('i', { attrs: { title: '编辑', class: 'el-icon-edit' }, on: { click: () => this.$emit('edit-click') } }));
-        }
-        return h('span', { class: 'z-table-column__cell-editable' }, valueRender);
-      },
-    },
-  },
-  props: {
-    value: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    columns: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    editall: Boolean,
-    clickable: Boolean,
-    disabled: Boolean,
-    ...tableProps,
-  },
-  watch: {
-    value(val) {
-      this.tableData = val || [];
-    },
-    data(val) {
-      this.tableData = val || [];
-    },
-    tableData(val) {
-      this.$emit('input', val || []);
-    },
-  },
-  data() {
-    return {
-      tableData: this.value,
-    };
-  },
-  filters: {
-    tableDataFilter(value) {
-      return value.map((item, index) => ({ ...item, $index: index }));
-    },
-  },
-  methods: {
-    onHeaderClick() {
-      if (this.clickable) {
-        this.cancelEditCell();
-      }
-    },
-    onCellClick(row, column) {
-      if (this.clickable) {
-        const prop = column.property;
-        let tableData = cloneDeep(this.tableData);
-        tableData.forEach((item, index) => {
-          if (!(index === row.$index && item.$editor && item.$editor.includes(prop))) {
-            item.$editor = [];
-          }
-        });
-        this.tableData = tableData;
-      }
-    },
-    onCellDblclick(row, column) {
-      if (this.clickable) {
-        this.setRowEditor(row, column, row.$index);
-      }
-    },
-    setRowEditor(row, column, index) {
-      this.cancelEditCell();
-      let tableRow = this.tableData[index];
-      if (tableRow) {
-        if (tableRow.$editor) {
-          tableRow.$editor = [...tableRow.$editor, column.property];
-        } else {
-          tableRow.$editor = [column.property];
-        }
-        this.$set(this.tableData, index, tableRow);
-      }
-    },
-    onEditConfirm(value, row, column, index) {
-      this.$emit('cell-edit-confirm', { row, index, prop: column.property, value });
-      this.cancelEditCell();
-    },
-    cancelEditCell() {
-      this.tableData = this.tableData.map((item, index) => {
-        const newItem = cloneDeep(item);
-        delete newItem.$index;
-        delete newItem.$editor;
-        return newItem;
-      });
-    },
-    onCellInput(value, row, column, index) {
-      const tableData = cloneDeep(this.tableData);
-      const tableRow = tableData[index];
-      set(tableRow, column.property, value);
-      tableData[index] = tableRow;
-      this.$set(this.tableData, index, tableRow);
-    },
-  },
-};
-</script>
diff --git a/packages/table/editable.vue b/packages/table/editable.vue
index 99efbb6..d48d53b 100644
--- a/packages/table/editable.vue
+++ b/packages/table/editable.vue
@@ -61,14 +61,21 @@
 </template>
 
 <script>
-import TableNormal from './normal';
 import tableProps from './props';
 import { cloneDeep, get, set } from '../utils';
 
 export default {
   name: 'TableEditable',
-  extends: TableNormal,
   components: {
+    CellRender: {
+      functional: true,
+      render(h, context) {
+        const props = context.props;
+        const item = props.item || {};
+        const content = item.render(props.value, props.row, h, props.index);
+        return typeof content === 'string' ? h('span', {}, [content]) : content;
+      },
+    },
     cellEditor: {
       props: {
         value: [String, Number, Array, Object, Boolean],
@@ -119,6 +126,14 @@ export default {
       },
     },
   },
+  inject: {
+    elForm: {
+      default: '',
+    },
+    elFormItem: {
+      default: '',
+    },
+  },
   props: {
     value: {
       type: Array,
@@ -153,12 +168,31 @@ export default {
       tableData: this.value,
     };
   },
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    _elSize() {
+      return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
+    },
+    bindProps() {
+      const tablePropsKeys = Object.keys(tableProps);
+      let props = {};
+      Object.keys(this._props).forEach(key => {
+        if (tablePropsKeys.includes(key)) {
+          props[key] = this._props[key];
+        }
+      });
+      return props;
+    },
+  },
   filters: {
     tableDataFilter(value) {
       return value.map((item, index) => ({ ...item, $index: index }));
     },
   },
   methods: {
+    get,
     onHeaderClick() {
       if (this.clickable) {
         this.cancelEditCell();
diff --git a/packages/table/editor.vue b/packages/table/editor.vue
new file mode 100644
index 0000000..863480f
--- /dev/null
+++ b/packages/table/editor.vue
@@ -0,0 +1,130 @@
+<script>
+import { get, set, cloneDeep } from '../utils';
+import { renderContext } from '../utils/vnode';
+
+// 标题渲染
+function headerRender(h, context, item) {
+  const headerSlot = context.scopedSlots[`header-${item.prop}`];
+  return function(scope) {
+    // 自定义具名插槽
+    if (headerSlot) {
+      return headerSlot(scope);
+    }
+    // 自定义渲染函数
+    if (item.header) {
+      return item.header(item, h, scope);
+    }
+    // 默认取值
+    return item.label;
+  };
+}
+
+// 单元格渲染
+function cellRender(h, context, item) {
+  const cellSlot = context.scopedSlots[`cell-${item.prop}`];
+  return function(scope) {
+    const value = get(scope.row, item.prop);
+    // 自定义具名插槽
+    if (cellSlot) {
+      return cellSlot({ item, value, index: scope.$index, ...scope });
+    }
+    // 自定义渲染函数
+    if (item.render) {
+      return item.render(value, scope.row, h, scope.$index);
+    }
+    // 默认取值
+    return get(scope.row, item.prop);
+  };
+}
+
+// 编辑器渲染
+function editorRender(h, context, item) {
+  const editorSlot = context.scopedSlots[`editor-${item.prop}`];
+  const contentProps = context.props || {};
+  return function(scope) {
+    const value = get(scope.row, item.prop);
+    // 自定义具名插槽
+    if (editorSlot) {
+      return editorSlot({ item, value, index: scope.$index, ...scope });
+    }
+    // 默认
+    const vnode = h(item.is, {
+      attrs: item.attrs,
+      props: { ...(item.props || {}), value },
+      on: {
+        input(val) {
+          if (get(contentProps, 'editor.deep') === true) {
+            if (item.prop.indexOf('.') > -1 || item.prop.indexOf('[') > -1) {
+              let separator = '';
+              if (item.prop.indexOf('.') > -1) {
+                separator = '.';
+              } else if (item.prop.indexOf('[') > -1) {
+                separator = '[';
+              }
+              const path = item.prop.split(separator);
+              const bindProp = path[0];
+              const propValue = cloneDeep(scope.row);
+              set(propValue, item.prop, val);
+              vnode.componentInstance.$set(scope.row, bindProp, propValue[bindProp]);
+            } else {
+              // set(scope.row, item.prop, val);
+              scope.row[item.prop] = val;
+            }
+          } else {
+            scope.row[item.prop] = val;
+            // set(contentProps.data, `[${[scope.$index]}]${item.prop}`, val);
+          }
+          if (item.on && item.on.input) {
+            item.on.input(val);
+          }
+        },
+      },
+    });
+    return vnode;
+  };
+}
+
+// 跟进columns生成列
+function createElTableColumns(h, context, columns) {
+  const props = context.props || {};
+  const editorConfig = props.editor || {};
+  return columns.map((item, index) => {
+    const { attrs, on, ...props } = item;
+    const editorMatch = editorConfig.inputs.find(i => i.prop === item.prop);
+    // 处理插槽
+    const scopedSlots = {
+      header: headerRender(h, context, item),
+      default: editorMatch ? editorRender(h, context, editorMatch) : cellRender(h, context, item),
+    };
+    return h('el-table-column', { key: index, attrs, props, on, scopedSlots });
+  });
+}
+
+export default {
+  name: 'TableEditor',
+  functional: true,
+  render(h, context) {
+    console.log(context);
+    const props = context.props || {};
+    let scopedSlots = context.scopedSlots || {};
+    // 如有默认插槽则相当于直接写el-table
+    if (scopedSlots.default) {
+      return h('el-table', context);
+    }
+    const columns = props.columns || [];
+    // 通过columns快速生成el-table-column
+    const elTableColumns = createElTableColumns(h, context, columns);
+    // 前置插槽
+    const prependSlot = scopedSlots.prepend ? scopedSlots.prepend() : '';
+    // 左侧插槽
+    const leftSlot = scopedSlots.left ? scopedSlots.left() : '';
+    // 右侧插槽
+    const rightSlot = scopedSlots.right ? scopedSlots.right() : '';
+    // 后置插槽
+    const appendSlot = scopedSlots.append ? scopedSlots.append() : '';
+    // 渲染组件时移除当前组件特有的props，避免透传不必要的参数
+    delete context.columns;
+    return h('el-table', renderContext(context), [prependSlot, leftSlot, ...elTableColumns, rightSlot, appendSlot]);
+  },
+};
+</script>
diff --git a/packages/table/index.vue b/packages/table/index.vue
index 6355c72..fdd4c3e 100644
--- a/packages/table/index.vue
+++ b/packages/table/index.vue
@@ -6,8 +6,11 @@ export default {
   functional: true,
   render(h, context) {
     const props = context.props || {};
-    if (props.editable) {
-      return ref('z-table-editable', context);
+    if (Object.prototype.hasOwnProperty.call(props, 'editable') && props.editable !== false) {
+      return h('z-table-editable', { props, scopedSlots: context.scopedSlots, on: context.listeners });
+    }
+    if (props.editor) {
+      return ref('z-table-editor', context);
     }
     return ref('z-table-normal', context);
   },
diff --git a/packages/table/normal.vue b/packages/table/normal.vue
index 4144968..7bf0741 100644
--- a/packages/table/normal.vue
+++ b/packages/table/normal.vue
@@ -6,9 +6,15 @@ import { renderContext } from '../utils/vnode';
 function headerRender(h, context, item) {
   const headerSlot = context.scopedSlots[`header-${item.prop}`];
   return function(scope) {
+    // 自定义具名插槽
     if (headerSlot) {
       return headerSlot(scope);
     }
+    // 自定义渲染函数
+    if (item.header) {
+      return item.header(item, h, scope);
+    }
+    // 默认取值
     return item.label;
   };
 }
diff --git a/packages/utils/vnode.js b/packages/utils/vnode.js
index bdf35cb..82f5fde 100644
--- a/packages/utils/vnode.js
+++ b/packages/utils/vnode.js
@@ -1,6 +1,6 @@
 // 注册函数式组件ref
 export function registerRef(vnode, context) {
-  if (!context.data.ref) {
+  if (!context.data.ref || !vnode.data.hook) {
     return vnode;
   }
   // 备份vnode原有的insert周期函数
--
libgit2 0.21.0