amis-editor 5.3.0 → 5.4.0

package/esm/plugin/Form/InputTable.js

@@ -1,12 +1,13 @@
 /**
- * amis-editor v5.3.0
+ * amis-editor v5.4.0
  * Copyright 2018-2023 @fex
  */
 
 import { __extends, __assign, __awaiter, __generator, __values } from 'tslib';
-import { getI18nEnabled, getSchemaTpl, tipedLabel, defaultValue, mockValue, repeatArray, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
+import { getSchemaTpl, getI18nEnabled, tipedLabel, defaultValue, mockValue, repeatArray, BasePlugin, registerEditorPlugin } from 'amis-editor-core';
 import { setVariable } from 'amis-core';
 import { ValidatorTag } from '../../validator.js';
+import { getArgsWrapper, getEventControlConfig } from '../../renderer/event-control/helper.js';
 import cloneDeep from 'lodash/cloneDeep';
 import { resolveArrayDatasource } from '../../util.js';
 import { i18n } from 'i18n-runtime';
@@ -92,276 +93,398 @@ var TableControlPlugin = /** @class */function (_super) {
     _this.notRenderFormZone = true;
     _this.panelJustify = true;
     _this.panelTitle = i18n("13c250c68608118463871ce7cd8b292c");
-    _this.events = [
-      // {
-      //   eventName: 'addConfirm',
-      //   eventLabel: '确认添加',
-      //   description: '开启needConfirm，点击添加按钮，填入数据后点击“保存”按钮后触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '添加项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'number',
-      //           title: '添加项的行索引'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'addSuccess',
-      //   eventLabel: '添加成功',
-      //   description: '开启needConfirm并且配置addApi，点击“保存”后调用接口成功时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '添加项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'number',
-      //           title: '添加项所在的行索引'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'addFail',
-      //   eventLabel: '添加失败',
-      //   description: '开启needConfirm并且配置addApi，点击“保存”后调用接口失败时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '添加项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'number',
-      //           title: '添加项所在的行索引'
-      //         },
-      //         'event.data.error': {
-      //           type: 'object',
-      //           title: 'addApi请求失败后接口返回的错误信息'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'edit',
-      //   eventLabel: '编辑行',
-      //   description: '点击某一行右侧操作栏“编辑”按钮时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '编辑项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'number',
-      //           title: '编辑项所在的行索引'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'editConfirm',
-      //   eventLabel: '编辑确认',
-      //   description: '开启needConfirm，点击“编辑”按钮，填入数据后点击“保存”按钮后触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '编辑项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'number',
-      //           title: '编辑项所在的行索引'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'editSuccess',
-      //   eventLabel: '编辑成功',
-      //   description: '开启needConfirm并且配置updateApi，点击“保存”后调用接口成功时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '编辑项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'number',
-      //           title: '编辑项所在的行索引'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'editFail',
-      //   eventLabel: '编辑失败',
-      //   description: '开启needConfirm并且配置updateApi，点击“保存”后调用接口失败时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '编辑项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'number',
-      //           title: '编辑项所在的行索引'
-      //         },
-      //         'event.data.error': {
-      //           type: 'object',
-      //           title: 'updateApi请求错误后返回的错误信息'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'delete',
-      //   eventLabel: '删除行',
-      //   description: '点击某一行右侧操作栏“删除”按钮时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '删除项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'object',
-      //           title: '删除项所在的行索引'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'deleteSuccess',
-      //   eventLabel: '删除成功',
-      //   description: '配置了deleteApi，调用接口成功时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '删除项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'object',
-      //           title: '删除项所在的行索引'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'deleteFail',
-      //   eventLabel: '删除失败',
-      //   description: '配置了deleteApi，调用接口失败时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         },
-      //         'event.data.item': {
-      //           type: 'object',
-      //           title: '编辑项数据'
-      //         },
-      //         'event.data.index': {
-      //           type: 'object',
-      //           title: '编辑项所在的行索引'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
-      // {
-      //   eventName: 'change',
-      //   eventLabel: '值变化',
-      //   description: '组件数据发生改变时触发',
-      //   dataSchema: [
-      //     {
-      //       type: 'object',
-      //       properties: {
-      //         'event.data.value': {
-      //           type: 'array',
-      //           title: '表格数据'
-      //         }
-      //       }
-      //     }
-      //   ]
-      // }
-    ];
+    _this.events = [{
+      eventName: 'add',
+      eventLabel: '添加行',
+      description: '点击左下角添加按钮 或 某一行右侧操作栏添加按钮时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.index': {
+            type: 'array',
+            title: '新增行记录索引'
+          }
+        }
+      }]
+    }, {
+      eventName: 'addConfirm',
+      eventLabel: '确认添加',
+      description: '开启”确认模式“，点击添加按钮，填入数据后点击“保存”按钮后触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '新增行记录'
+          },
+          'event.data.index': {
+            type: 'number',
+            title: '新增行记录索引'
+          }
+        }
+      }]
+    }, {
+      eventName: 'addSuccess',
+      eventLabel: '添加成功',
+      description: '开启”确认模式“并且配置”新增接口“，点击“保存”后成功添加时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '新增行记录'
+          },
+          'event.data.index': {
+            type: 'number',
+            title: '新增行记录索引'
+          }
+        }
+      }]
+    }, {
+      eventName: 'addFail',
+      eventLabel: '添加失败',
+      description: '开启”确认模式“并且配置”新增接口“，点击“保存”后调用接口失败时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '新增行记录'
+          },
+          'event.data.index': {
+            type: 'number',
+            title: '新增行记录索引'
+          },
+          'event.data.error': {
+            type: 'object',
+            title: '请求失败后接口返回的错误信息'
+          }
+        }
+      }]
+    }, {
+      eventName: 'edit',
+      eventLabel: '编辑行',
+      description: '点击某一行右侧操作栏“编辑”按钮时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '所在行记录'
+          },
+          'event.data.index': {
+            type: 'number',
+            title: '所在行记录索引'
+          }
+        }
+      }]
+    }, {
+      eventName: 'editConfirm',
+      eventLabel: '确认编辑',
+      description: '开启”确认模式“，点击“编辑”按钮，填入数据后点击“保存”按钮后触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '所在行记录'
+          },
+          'event.data.index': {
+            type: 'number',
+            title: '所在行记录索引'
+          }
+        }
+      }]
+    }, {
+      eventName: 'editSuccess',
+      eventLabel: '编辑成功',
+      description: '开启”确认模式“并且配置”编辑接口“，点击“保存”后成功编辑时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '所在行记录'
+          },
+          'event.data.index': {
+            type: 'number',
+            title: '所在行记录索引'
+          }
+        }
+      }]
+    }, {
+      eventName: 'editFail',
+      eventLabel: '编辑失败',
+      description: '开启”确认模式“并且配置”编辑接口“，点击“保存”后调用接口失败时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '所在行记录'
+          },
+          'event.data.index': {
+            type: 'number',
+            title: '所在行记录索引'
+          },
+          'event.data.error': {
+            type: 'object',
+            title: '请求错误后返回的错误信息'
+          }
+        }
+      }]
+    }, {
+      eventName: 'delete',
+      eventLabel: '删除行',
+      description: '点击某一行右侧操作栏“删除”按钮时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '所在行记录'
+          },
+          'event.data.index': {
+            type: 'object',
+            title: '所在行记录索引'
+          }
+        }
+      }]
+    }, {
+      eventName: 'deleteSuccess',
+      eventLabel: '删除成功',
+      description: '配置了“删除接口”，调用接口成功时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '所在行记录'
+          },
+          'event.data.index': {
+            type: 'object',
+            title: '所在行记录索引'
+          }
+        }
+      }]
+    }, {
+      eventName: 'deleteFail',
+      eventLabel: '删除失败',
+      description: '配置了“删除接口”，调用接口失败时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          },
+          'event.data.item': {
+            type: 'object',
+            title: '所在行记录'
+          },
+          'event.data.index': {
+            type: 'object',
+            title: '所在行记录索引'
+          },
+          'event.data.error': {
+            type: 'object',
+            title: '请求失败后接口返回的错误信息'
+          }
+        }
+      }]
+    }, {
+      eventName: 'change',
+      eventLabel: i18n("755955372bcc0c7ebf161a656bc389b3"),
+      description: '表格数据发生改变时触发',
+      dataSchema: [{
+        type: 'object',
+        properties: {
+          'event.data.value': {
+            type: 'array',
+            title: '列表记录'
+          }
+        }
+      }]
+    }];
     _this.actions = [{
       actionType: 'setValue',
       actionLabel: i18n("8f40db3b25528063f1b6a59602a05cd5"),
       description: i18n("0310aa5a05fe07147d8b7ef20616f659")
+    }, {
+      actionType: 'addItem',
+      actionLabel: '添加行',
+      description: '添加行数据',
+      innerArgs: ['item', 'index'],
+      schema: getArgsWrapper({
+        type: 'container',
+        body: [{
+          type: 'input-number',
+          name: 'index',
+          mode: 'horizontal',
+          horizontal: {
+            leftFixed: 4 // 需要设置下leftFixed，否则这个字段的控件没有与其他字段的控件左对齐
+          },
+
+          label: '插入位置',
+          size: 'lg',
+          placeholder: '请输入行号，为空则在头部插入'
+        }, {
+          type: 'combo',
+          name: 'value',
+          label: i18n("e7af71fb102cc86ab3be6a2fb32b5e3f"),
+          multiple: true,
+          removable: true,
+          required: true,
+          addable: true,
+          strictMode: false,
+          canAccessSuperData: true,
+          mode: 'horizontal',
+          size: 'lg',
+          addButtonText: '新增一行',
+          items: [{
+            type: 'combo',
+            name: 'item',
+            label: false,
+            renderLabel: false,
+            multiple: true,
+            removable: true,
+            required: true,
+            addable: true,
+            strictMode: false,
+            canAccessSuperData: true,
+            className: 'm-l',
+            size: 'lg',
+            mode: 'horizontal',
+            addButtonText: '新增字段',
+            items: [{
+              name: 'key',
+              type: 'input-text',
+              source: '${__setValueDs}',
+              labelField: 'label',
+              valueField: 'value',
+              required: true
+            }, getSchemaTpl('formulaControl', {
+              name: 'val',
+              variables: '${variables}'
+            })]
+          }]
+        }]
+      })
+    }, {
+      actionType: 'deleteItem',
+      actionLabel: '删除行',
+      description: '删除某一行数据',
+      innerArgs: ['condition', 'index'],
+      schema: getArgsWrapper({
+        type: 'container',
+        body: [{
+          type: 'radios',
+          name: '__deleteType',
+          inputClassName: 'event-action-radio',
+          mode: 'horizontal',
+          label: '删除方式',
+          pipeIn: function (value, store) {
+            if (store.data.__deleteType === undefined) {
+              var deleteType = store.data.condition ? 'conditionExpression' : 'rowIndex';
+              store.updateData({
+                __deleteType: deleteType
+              });
+              return deleteType;
+            }
+            return value;
+          },
+          horizontal: {
+            leftFixed: 4 // 需要设置下leftFixed，否则这个字段的控件没有与其他字段的控件左对齐
+          },
+
+          options: [{
+            label: '指定行号',
+            value: 'rowIndex'
+          }, {
+            label: '条件表达式',
+            value: 'conditionExpression'
+          }],
+          onChange: function (value, oldVal, data, form) {
+            form.setValueByName('index', undefined);
+            form.setValueByName('condition', undefined);
+          }
+        }, {
+          type: 'input-text',
+          name: 'index',
+          mode: 'horizontal',
+          horizontal: {
+            leftFixed: 4 // 需要设置下leftFixed，否则这个字段的控件没有与其他字段的控件左对齐
+          },
+
+          required: true,
+          label: '删除范围',
+          size: 'lg',
+          placeholder: '请输入行号，输入多个则用英文逗号分隔',
+          hiddenOn: 'data.__deleteType !== "rowIndex"'
+        }, getSchemaTpl('formulaControl', {
+          name: 'condition',
+          variables: '${variables}',
+          label: '删除条件',
+          hiddenOn: 'data.__deleteType !== "conditionExpression"',
+          mode: 'horizontal',
+          required: true,
+          horizontal: {
+            leftFixed: 4 // 需要设置下leftFixed，否则这个字段的控件没有与其他字段的控件左对齐
+          },
+
+          size: 'lg'
+        })]
+      })
+    },
+    // {
+    //   actionType: 'reset',
+    //   actionLabel: '重置',
+    //   description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    // },
+    {
+      actionType: 'clear',
+      actionLabel: i18n("288f0c404c4e546aa3683ff5054e85e2"),
+      description: '清空组件数据'
     }];
     _this.panelBodyCreator = function (context) {
       context.schema.type === 'crud';
@@ -534,6 +657,12 @@ var TableControlPlugin = /** @class */function (_super) {
             label: i18n("53a9db06d0b7e3482dc21e53f150e257")
           })]
         })])
+      }, {
+        title: i18n("10b2761db5a8e089049df39675abc550"),
+        className: 'p-none',
+        body: [getSchemaTpl('eventControl', __assign({
+          name: 'onEvent'
+        }, getEventControlConfig(_this.manager, context)))]
       }]);
     };
     return _this;