feat: 支持在表格页编辑column字段

Author: xggaxlc

src/plugin/components/form/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="handleShowDialog">
+  <div @click.stop="handleShowDialog">
     <slot />
     <el-dialog
       :visible="visible"

src/plugin/components/source-page/index.vue

@@ -11,6 +11,7 @@
       :table-events="tablePageEvents"
       :table-props="tableProps"
       :action-column-props="actionColumnProps"
+      :on-table-cell-form-submit="handleTableCellFormSubmit"
       ref="tablePage"
     >
       <template #after-filter>
@@ -49,7 +50,7 @@
       :columns="sourcePageFormColumns"
       :loading="formLoading"
       v-model="state.data"
-      @submit="handleSubmit"
+      @submit="handleFormPageSubmit"
     >
       <template v-slot:action="{ value }">
         <slot name="form-action" :value="value" />
@@ -285,10 +286,19 @@ export default class AdminSourcePage extends Vue {
     }
   }
 
-  async handleSubmit(data) {
+  handleTableCellFormSubmit({ data, scope }) {
+    const originData = scope.row;
+    return this.handleSubmit({ data: { id: originData.id, ...data }, originData });
+  }
+
+  handleFormPageSubmit(data) {
+    return this.handleSubmit({ data });
+  }
+
+  async handleSubmit({ data, originData = this.originData, state = this.state } = {}) {
     try {
       this.formLoading = true;
-      const hookParams = { data, originData: this.originData, state: this.state, type: this.type, resource: this.resource, namespace: this.namespace };
+      const hookParams = { data, originData, state, type: this.type, resource: this.resource, namespace: this.namespace };
       if (_.isFunction(this.onFormSubmit)) {
         await this.onFormSubmit(hookParams);
       } else {
@@ -305,7 +315,9 @@ export default class AdminSourcePage extends Vue {
         if (_.isFunction(this.afterSubmit)) {
           this.afterSubmit(hookParams, newData)
         } else {
-          this.$router.push({ name: `${this.resource}.show`, params: { id: data.id } });
+          if (this.type !== 'index') {
+            this.$router.push({ name: `${this.resource}.show`, params: { id: data.id } });
+          }
         }
       }
     } finally {

src/plugin/components/source-page/table.vue

@@ -22,6 +22,7 @@
           :actions="actions"
           :action-column-props="actionColumnProps"
           :default-sort="defaultSort"
+          :on-table-cell-form-submit="onTableCellFormSubmit"
           @sort-change="handleSortChange"
         />
       </div>
@@ -62,6 +63,7 @@ export default class AdminSourcePageTable extends Vue {
   @Prop({ type: Object, default: () => ({}) }) filterProps;
   @Prop({ type: Object, default: () => ({}) }) paginationProps;
   @Prop({ type: Object, default: () => ({}) }) tableEvents;
+  @Prop({ type: Function, default: _.noop }) onTableCellFormSubmit;
 
   filterForm = {};
   defaultSort = {};

src/plugin/components/table.vue

@@ -1,13 +1,15 @@
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import _ from 'lodash';
+import DialogForm from './form/dialog';
 
 @Component
 export default class AdminTable extends Vue {
   @Prop({ type: Array, default: () => [] }) columns;
   @Prop({ type: Array, default: () => [] }) value;
   @Prop({ type: [Function, Array] }) actions;
   @Prop({ type: Object, default: () => ({}) }) actionColumnProps;
+  @Prop({ type: Function, default: _.noop }) onTableCellFormSubmit;
 
   get actionColumn() {
     const ColumnRender = require('./column-render').default;
@@ -60,24 +62,65 @@ export default class AdminTable extends Vue {
     ));
   }
 
+  renderCellForm({ column, scope }) {
+    const formColumn = _.isFunction(column.form) ? column.form(scope) : column.form;
+    if (formColumn) {
+      const formColumns = [
+        {
+          prop: column.prop,
+          label: column.label,
+          ...formColumn
+        }
+      ];
+      const submitHandler = async (data) => {
+        if (_.isFunction(formColumn.submitHandler)) {
+          await formColumn.submitHandler({ data, scope })
+        } else {
+          await this.onTableCellFormSubmit({ data, scope });
+        }
+        Object.assign(scope.row, data);
+      }
+      return (
+        <DialogForm
+          columns={formColumns}
+          value={_.pick(scope.row, column.prop)}
+          title={column.label}
+          submitHandler={submitHandler}
+          label-position="top"
+        >
+          <el-button
+            icon="el-icon-edit"
+            size="mini"
+            style="margin-left: 5px; padding: 4px"
+            circle
+          />
+        </DialogForm>
+      )
+    }
+    return null;
+  }
+
   renderCell(column) {
     const ColumnRender = require('./column-render').default;
     return scope => {
-      return <ColumnRender
-        key={column.prop}
-        value={_.get(scope.row, column.prop)}
-        scope={scope}
-        column={column}
-        renderCell={column.renderCell}
-      />
+      return (
+        <div class="table-cell">
+          <ColumnRender
+            key={column.prop}
+            value={_.get(scope.row, column.prop)}
+            scope={scope}
+            column={column}
+            renderCell={column.renderCell || (() => <span>{_.get(scope, `row.${column.prop}`, '/')}</span>)}
+          />
+          {this.renderCellForm({ column, scope })}
+        </div>
+      )
     }
   }
 
   renderTableColumn(column) {
     const scopedSlots = {};
-    if (column.renderCell) {
-      scopedSlots.default = this.renderCell(column);
-    }
+    scopedSlots.default = this.renderCell(column);
     return (
       <el-table-column
         key={column.prop}

src/plugin/styles/table.scss

@@ -53,5 +53,11 @@
         margin-bottom: 10px;
       }
     }
+
+    .table-cell {
+      display: inline-flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
   }
 }