@tmagic/table 1.7.2 → 1.7.4

package/dist/tmagic-table.js

@@ -1,7 +1,8 @@
-import { defineComponent, createElementBlock, openBlock, Fragment, withDirectives, renderList, createBlock, unref, withCtx, createVNode, createElementVNode, vShow, createTextVNode, resolveDynamicComponent, mergeProps, toHandlers, createCommentVNode, normalizeProps, toDisplayString, resolveComponent, computed, useTemplateRef, ref, resolveDirective, h } from 'vue';
+import { defineComponent, createElementBlock, openBlock, Fragment, withDirectives, renderList, createBlock, unref, withCtx, createVNode, createElementVNode, vShow, createTextVNode, resolveDynamicComponent, mergeProps, toHandlers, createCommentVNode, normalizeProps, toDisplayString, computed, useTemplateRef, ref, resolveDirective, h } from 'vue';
 import { cloneDeep } from 'lodash-es';
-import { TMagicTooltip, TMagicButton, tMagicMessage, TMagicPopover, TMagicForm, TMagicTag, TMagicTable } from '@tmagic/design';
+import { TMagicTooltip, TMagicButton, tMagicMessage, TMagicPopover, TMagicTag, TMagicTable } from '@tmagic/design';
 import { MForm, datetimeFormatter } from '@tmagic/form';
+import { setValueByKeyPath } from '@tmagic/utils';
 
 const _hoisted_1$2 = ["innerHTML"];
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
@@ -17,7 +18,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     row: {},
     index: {}
   },
-  emits: ["after-action"],
+  emits: ["after-action", "after-action-cancel"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -48,7 +49,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const actionHandler = async (action, row, index) => {
       await action.before?.(row, index);
       if (action.type === "edit") {
-        props.editState[index] = row;
+        props.editState[index] = cloneDeep(row);
       } else {
         await action.handler?.(row, index);
       }
@@ -57,28 +58,30 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const save = async (index, config) => {
       const action = config.actions?.find((item) => item.type === "edit")?.action;
       if (!action) return;
-      const data = {};
-      const row = props.editState[index];
-      props.columns.filter((item) => item.type).forEach((column) => {
-        if (column.prop) {
-          data[column.prop] = row[column.prop];
-        }
-      });
       const res = await action({
-        data
+        data: props.editState[index],
+        index
       });
       if (res) {
         if (res.ret === 0) {
           tMagicMessage.success("保存成功");
           props.editState[index] = void 0;
-          emit("after-action");
+          emit("after-action", { index });
         } else {
           tMagicMessage.error(res.msg || "保存失败");
         }
       } else {
         props.editState[index] = void 0;
-        emit("after-action");
+        emit("after-action", { index });
+      }
+    };
+    const cancel = async (index, config) => {
+      props.editState[index] = void 0;
+      const cancel2 = config.actions?.find((item) => item.type === "edit")?.cancel;
+      if (cancel2) {
+        await cancel2({ index });
       }
+      emit("after-action-cancel", { index });
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
@@ -153,9 +156,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             {
               class: "action-btn",
               link: "",
-              type: "primary",
+              type: "danger",
               size: "small",
-              onClick: _cache[1] || (_cache[1] = ($event) => __props.editState[__props.index] = void 0)
+              onClick: _cache[1] || (_cache[1] = ($event) => cancel(__props.index, __props.config))
             },
             {
               default: withCtx(() => [..._cache[3] || (_cache[3] = [
@@ -356,31 +359,30 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     index: {}
   },
   setup(__props) {
+    const props = __props;
+    const formChangeHandler = (v, eventData) => {
+      if (eventData.changeRecords?.length) {
+        for (const record of eventData.changeRecords) {
+          if (record.propPath) {
+            setValueByKeyPath(record.propPath, record.value, props.editState[props.index]);
+          }
+        }
+      }
+    };
     return (_ctx, _cache) => {
-      const _component_m_form_container = resolveComponent("m-form-container");
       return __props.config.type === "index" ? (openBlock(), createElementBlock(
         "div",
         _hoisted_1,
         toDisplayString(__props.config.pageIndex && __props.config.pageSize ? __props.config.pageIndex * __props.config.pageSize + __props.index + 1 : __props.index + 1),
         1
         /* TEXT */
-      )) : __props.config.type && __props.editState[__props.index] ? (openBlock(), createBlock(unref(TMagicForm), {
+      )) : (__props.config.type || __props.config.editInlineFormConfig) && __props.editState[__props.index] ? (openBlock(), createBlock(unref(MForm), {
         key: 1,
         "label-width": "0",
-        model: __props.editState[__props.index]
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_m_form_container, {
-            prop: __props.config.prop,
-            rules: __props.config.rules,
-            config: __props.config,
-            name: __props.config.prop,
-            model: __props.editState[__props.index]
-          }, null, 8, ["prop", "rules", "config", "name", "model"])
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["model"])) : __props.config.action === "actionLink" && __props.config.prop ? (openBlock(), createBlock(unref(TMagicButton), {
+        config: __props.config.editInlineFormConfig ?? [__props.config],
+        "init-values": __props.editState[__props.index],
+        onChange: formChangeHandler
+      }, null, 8, ["config", "init-values"])) : __props.config.action === "actionLink" && __props.config.prop ? (openBlock(), createBlock(unref(TMagicButton), {
         key: 2,
         link: "",
         type: "primary",
@@ -480,6 +482,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: [
     "sort-change",
     "after-action",
+    "after-action-cancel",
     "select",
     "select-all",
     "selection-change",
@@ -510,7 +513,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           index: $index,
           rowkeyName: props.rowkeyName,
           editState: editState.value,
-          columns: props.columns
+          columns: props.columns,
+          onAfterAction: (payload) => emit("after-action", payload),
+          onAfterActionCancel: (payload) => emit("after-action-cancel", payload)
         });
       }
       if (config.type === "popover") {

package/dist/tmagic-table.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@tmagic/design'), require('@tmagic/form')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@tmagic/design', '@tmagic/form'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicTable = {}, global.Vue, global.design, global.form));
-})(this, (function (exports, vue, design, form) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/utils')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@tmagic/design', '@tmagic/form', '@tmagic/utils'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicTable = {}, global.Vue, global.design, global.form, global.utils));
+})(this, (function (exports, vue, design, form, utils) { 'use strict';
 
   /** Detect free variable `global` from Node.js. */
   var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
@@ -2042,7 +2042,7 @@
       row: {},
       index: {}
     },
-    emits: ["after-action"],
+    emits: ["after-action", "after-action-cancel"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -2073,7 +2073,7 @@
       const actionHandler = async (action, row, index) => {
         await action.before?.(row, index);
         if (action.type === "edit") {
-          props.editState[index] = row;
+          props.editState[index] = cloneDeep(row);
         } else {
           await action.handler?.(row, index);
         }
@@ -2082,28 +2082,30 @@
       const save = async (index, config) => {
         const action = config.actions?.find((item) => item.type === "edit")?.action;
         if (!action) return;
-        const data = {};
-        const row = props.editState[index];
-        props.columns.filter((item) => item.type).forEach((column) => {
-          if (column.prop) {
-            data[column.prop] = row[column.prop];
-          }
-        });
         const res = await action({
-          data
+          data: props.editState[index],
+          index
         });
         if (res) {
           if (res.ret === 0) {
             design.tMagicMessage.success("保存成功");
             props.editState[index] = void 0;
-            emit("after-action");
+            emit("after-action", { index });
           } else {
             design.tMagicMessage.error(res.msg || "保存失败");
           }
         } else {
           props.editState[index] = void 0;
-          emit("after-action");
+          emit("after-action", { index });
+        }
+      };
+      const cancel = async (index, config) => {
+        props.editState[index] = void 0;
+        const cancel2 = config.actions?.find((item) => item.type === "edit")?.cancel;
+        if (cancel2) {
+          await cancel2({ index });
         }
+        emit("after-action-cancel", { index });
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(
@@ -2178,9 +2180,9 @@
               {
                 class: "action-btn",
                 link: "",
-                type: "primary",
+                type: "danger",
                 size: "small",
-                onClick: _cache[1] || (_cache[1] = ($event) => __props.editState[__props.index] = void 0)
+                onClick: _cache[1] || (_cache[1] = ($event) => cancel(__props.index, __props.config))
               },
               {
                 default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
@@ -2381,31 +2383,30 @@
       index: {}
     },
     setup(__props) {
+      const props = __props;
+      const formChangeHandler = (v, eventData) => {
+        if (eventData.changeRecords?.length) {
+          for (const record of eventData.changeRecords) {
+            if (record.propPath) {
+              utils.setValueByKeyPath(record.propPath, record.value, props.editState[props.index]);
+            }
+          }
+        }
+      };
       return (_ctx, _cache) => {
-        const _component_m_form_container = vue.resolveComponent("m-form-container");
         return __props.config.type === "index" ? (vue.openBlock(), vue.createElementBlock(
           "div",
           _hoisted_1,
           vue.toDisplayString(__props.config.pageIndex && __props.config.pageSize ? __props.config.pageIndex * __props.config.pageSize + __props.index + 1 : __props.index + 1),
           1
           /* TEXT */
-        )) : __props.config.type && __props.editState[__props.index] ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicForm), {
+        )) : (__props.config.type || __props.config.editInlineFormConfig) && __props.editState[__props.index] ? (vue.openBlock(), vue.createBlock(vue.unref(form.MForm), {
           key: 1,
           "label-width": "0",
-          model: __props.editState[__props.index]
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(_component_m_form_container, {
-              prop: __props.config.prop,
-              rules: __props.config.rules,
-              config: __props.config,
-              name: __props.config.prop,
-              model: __props.editState[__props.index]
-            }, null, 8, ["prop", "rules", "config", "name", "model"])
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["model"])) : __props.config.action === "actionLink" && __props.config.prop ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          config: __props.config.editInlineFormConfig ?? [__props.config],
+          "init-values": __props.editState[__props.index],
+          onChange: formChangeHandler
+        }, null, 8, ["config", "init-values"])) : __props.config.action === "actionLink" && __props.config.prop ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
           key: 2,
           link: "",
           type: "primary",
@@ -2505,6 +2506,7 @@
     emits: [
       "sort-change",
       "after-action",
+      "after-action-cancel",
       "select",
       "select-all",
       "selection-change",
@@ -2535,7 +2537,9 @@
             index: $index,
             rowkeyName: props.rowkeyName,
             editState: editState.value,
-            columns: props.columns
+            columns: props.columns,
+            onAfterAction: (payload) => emit("after-action", payload),
+            onAfterActionCancel: (payload) => emit("after-action-cancel", payload)
           });
         }
         if (config.type === "popover") {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.2",
+  "version": "1.7.4",
   "name": "@tmagic/table",
   "type": "module",
   "sideEffects": [
@@ -44,8 +44,9 @@
   "peerDependencies": {
     "vue": "^3.5.24",
     "typescript": "^5.9.3",
-    "@tmagic/design": "1.7.2",
-    "@tmagic/form": "1.7.2"
+    "@tmagic/form": "1.7.4",
+    "@tmagic/utils": "1.7.4",
+    "@tmagic/design": "1.7.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/ActionsColumn.vue

@@ -32,14 +32,16 @@
     class="action-btn"
     v-show="editState[index]"
     link
-    type="primary"
+    type="danger"
     size="small"
-    @click="editState[index] = undefined"
+    @click="cancel(index, config)"
     >取消</TMagicButton
   >
 </template>
 
 <script lang="ts" setup>
+import { cloneDeep } from 'lodash-es';
+
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
 
 import { ColumnActionConfig, ColumnConfig } from './schema';
@@ -65,7 +67,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['after-action']);
+const emit = defineEmits<{
+  'after-action': [{ index: number }];
+  'after-action-cancel': [{ index: number }];
+}>();
 
 const display = (fuc: boolean | Function | undefined, row: any) => {
   if (typeof fuc === 'function') {
@@ -97,7 +102,7 @@ const formatter = (fuc: string | Function | undefined, row: any) => {
 const actionHandler = async (action: ColumnActionConfig, row: any, index: number) => {
   await action.before?.(row, index);
   if (action.type === 'edit') {
-    props.editState[index] = row;
+    props.editState[index] = cloneDeep(row);
   } else {
     await action.handler?.(row, index);
   }
@@ -108,31 +113,31 @@ const save = async (index: number, config: ColumnConfig) => {
   const action = config.actions?.find((item) => item.type === 'edit')?.action;
   if (!action) return;
 
-  const data: any = {};
-  const row = props.editState[index];
-  props.columns
-    .filter((item) => item.type)
-    .forEach((column) => {
-      if (column.prop) {
-        data[column.prop] = row[column.prop];
-      }
-    });
-
   const res: any = await action({
-    data,
+    data: props.editState[index],
+    index,
   });
 
   if (res) {
     if (res.ret === 0) {
       tMagicMessage.success('保存成功');
       props.editState[index] = undefined;
-      emit('after-action');
+      emit('after-action', { index });
     } else {
       tMagicMessage.error(res.msg || '保存失败');
     }
   } else {
     props.editState[index] = undefined;
-    emit('after-action');
+    emit('after-action', { index });
+  }
+};
+
+const cancel = async (index: number, config: ColumnConfig) => {
+  props.editState[index] = undefined;
+  const cancel = config.actions?.find((item) => item.type === 'edit')?.cancel;
+  if (cancel) {
+    await cancel({ index });
   }
+  emit('after-action-cancel', { index });
 };
 </script>

package/src/Table.vue

@@ -73,6 +73,7 @@ const props = withDefaults(
 const emit = defineEmits([
   'sort-change',
   'after-action',
+  'after-action-cancel',
   'select',
   'select-all',
   'selection-change',
@@ -102,6 +103,8 @@ const cellRender = (config: ColumnConfig, { row = {}, $index }: any) => {
       rowkeyName: props.rowkeyName,
       editState: editState.value,
       columns: props.columns,
+      onAfterAction: (payload: { index: number }) => emit('after-action', payload),
+      onAfterActionCancel: (payload: { index: number }) => emit('after-action-cancel', payload),
     });
   }
   if (config.type === 'popover') {

package/src/TextColumn.vue

@@ -2,15 +2,13 @@
   <div v-if="config.type === 'index'">
     {{ config.pageIndex && config.pageSize ? config.pageIndex * config.pageSize + index + 1 : index + 1 }}
   </div>
-  <TMagicForm v-else-if="config.type && editState[index]" label-width="0" :model="editState[index]">
-    <m-form-container
-      :prop="config.prop"
-      :rules="config.rules"
-      :config="config"
-      :name="config.prop"
-      :model="editState[index]"
-    ></m-form-container>
-  </TMagicForm>
+  <MForm
+    v-else-if="(config.type || config.editInlineFormConfig) && editState[index]"
+    label-width="0"
+    :config="config.editInlineFormConfig ?? [config]"
+    :init-values="editState[index]"
+    @change="formChangeHandler"
+  ></MForm>
 
   <TMagicButton
     v-else-if="config.action === 'actionLink' && config.prop"
@@ -46,7 +44,10 @@
 </template>
 
 <script lang="ts" setup>
-import { TMagicButton, TMagicForm, TMagicTag, TMagicTooltip } from '@tmagic/design';
+import { TMagicButton, TMagicTag, TMagicTooltip } from '@tmagic/design';
+import { type ContainerChangeEventData, MForm } from '@tmagic/form';
+import type { FormValue } from '@tmagic/form-schema';
+import { setValueByKeyPath } from '@tmagic/utils';
 
 import { ColumnConfig } from './schema';
 import { formatter } from './utils';
@@ -55,7 +56,7 @@ defineOptions({
   name: 'MTableColumn',
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     config: ColumnConfig;
     editState?: any;
@@ -67,4 +68,14 @@ withDefaults(
     editState: () => ({}),
   },
 );
+
+const formChangeHandler = (v: FormValue, eventData: ContainerChangeEventData) => {
+  if (eventData.changeRecords?.length) {
+    for (const record of eventData.changeRecords) {
+      if (record.propPath) {
+        setValueByKeyPath(record.propPath, record.value, props.editState[props.index]);
+      }
+    }
+  }
+};
 </script>

package/src/schema.ts

@@ -31,7 +31,8 @@ export interface ColumnActionConfig {
   handler?: (row: any, index: number) => Promise<any> | any;
   before?: (row: any, index: number) => Promise<void> | void;
   after?: (row: any, index: number) => Promise<void> | void;
-  action?: (data: { data: any }) => Promise<void> | void;
+  action?: (data: { data: any; index: number }) => Promise<void> | void;
+  cancel?: (data: { index: number }) => Promise<void> | void;
 }
 
 export interface ColumnConfig<T = any> {
@@ -52,6 +53,7 @@ export interface ColumnConfig<T = any> {
   name?: string;
   showHeader?: boolean;
   table?: ColumnConfig[];
+  editInlineFormConfig?: FormConfig;
   formatter?: 'datetime' | ((item: any, row: T, data: { index: number }) => any);
   popover?: {
     placement?:

package/types/index.d.ts

@@ -17,6 +17,10 @@ interface ColumnActionConfig {
     after?: (row: any, index: number) => Promise<void> | void;
     action?: (data: {
         data: any;
+        index: number;
+    }) => Promise<void> | void;
+    cancel?: (data: {
+        index: number;
     }) => Promise<void> | void;
 }
 interface ColumnConfig<T = any> {
@@ -37,6 +41,7 @@ interface ColumnConfig<T = any> {
     name?: string;
     showHeader?: boolean;
     table?: ColumnConfig[];
+    editInlineFormConfig?: FormConfig;
     formatter?: 'datetime' | ((item: any, row: T, data: {
         index: number;
     }) => any);
@@ -95,6 +100,7 @@ declare const __VLS_export: _vue_runtime_core.DefineComponent<__VLS_Props, {
     "expand-change": (...args: any[]) => void;
     "cell-click": (...args: any[]) => void;
     "after-action": (...args: any[]) => void;
+    "after-action-cancel": (...args: any[]) => void;
     "select-all": (...args: any[]) => void;
     "selection-change": (...args: any[]) => void;
 }, string, _vue_runtime_core.PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -103,6 +109,7 @@ declare const __VLS_export: _vue_runtime_core.DefineComponent<__VLS_Props, {
     "onExpand-change"?: ((...args: any[]) => any) | undefined;
     "onCell-click"?: ((...args: any[]) => any) | undefined;
     "onAfter-action"?: ((...args: any[]) => any) | undefined;
+    "onAfter-action-cancel"?: ((...args: any[]) => any) | undefined;
     "onSelect-all"?: ((...args: any[]) => any) | undefined;
     "onSelection-change"?: ((...args: any[]) => any) | undefined;
 }>, {