Merge pull request #1563 from alibaba/fix-list-drawer-confirm

Fix list drawer confirm

docs/form-render/disaply-search.md

@@ -185,4 +185,5 @@ export default () => {
 | resetText | 自定义 重置按钮文案 | `string` | 重置 |
 | searchOnMount | 组件初次挂载时，是否默认执行查询动作 | `boolean` | true | 
 | searchWithError | 表单校验失败时，是否继续执行查询操作 | `boolean` | true |
+|closeReturnSearch | 关闭回车查询 | `boolean` | - |
 | `...` | 详见 formRender [Props](/form-render/api-props) | | |

packages/form-render/src/derivative/SearchForm/index.tsx

@@ -204,7 +204,7 @@ const SearchForm: <RecordType extends object = any>(props: SearchProps<RecordTyp
  className={classnames('fr-search', {[className]: !!className, 'fr-column-search': isColumn })}
  style={style}
  ref={containerRef}
- onKeyDown={!closeReturnSearch && handleKeyDown}
+ onKeyDown={!closeReturnSearch ? handleKeyDown : undefined}
  >
  <FormRender
  displayType='row'

packages/form-render/src/models/bindValues.ts

@@ -34,8 +34,8 @@ const transformValueToBind = (data: any, path: any, bind: false | string | strin
  if (bind === false) {
  unset(data, path);
  return;
- } 
- 
+ }
+
  if (typeof bind === 'string') {
  let value = get(data, path);
  const preValue = get(data, bind);
@@ -45,8 +45,8 @@ const transformValueToBind = (data: any, path: any, bind: false | string | strin
  set(data, bind, value);
  unset(data, path);
  return;
- } 
- 
+ }
+
  // The array is converted to multiple fields.
  if (isMultiBind(bind)) {
  const value = get(data, path);
@@ -71,8 +71,8 @@ const transformBindToValue = (data: any, path: any, bind: any) => {
  set(data, path, value);
  unset(data, bind);
  return;
- } 
- 
+ }
+
  // The array is converted to multiple fields.
  if (isMultiBind(bind)) {
  const value = [];
@@ -102,7 +102,7 @@ export const parseValuesToBind = (values: any, flatten: any) => {
 
  const dealFieldList = (obj: any, [path, ...rest]: any, bind: any) => {
  if (rest.length === 1) {
- const list = get(obj, path, []);
+ const list = get(obj, path, [])||[];
  list.forEach((item: any, index: number) => {
  const value = get(item, rest[0]);
  if (bind === 'root') {
@@ -120,7 +120,7 @@ export const parseValuesToBind = (values: any, flatten: any) => {
  dealFieldList(value, rest, bind);
  }
  };
- 
+
  Object.keys(flatten).forEach(key => {
  const bind = flatten[key]?.schema?.bind;
  if (bind === undefined) {
@@ -158,7 +158,7 @@ export const parseBindToValues = (values: any, flatten: any) => {
  dealFieldList(value, rest, bind);
  }
  };
- 
+
  Object.keys(flatten).forEach(key => {
  const bind = flatten[key]?.schema?.bind;
  if (bind === undefined) {

packages/form-render/src/models/expression.ts

@@ -49,14 +49,38 @@ export const isHasExpression = (schema: any) => {
  return result;
 };
 
-export const parseExpression = (func: any, formData = {}, parentPath: string | []) => {
+const parseFunc = (funcBody: string) => {
+ const funcBodyTemp = funcBody.replace(/(\.|\?\.)/g, '?.'); // 将. 和 ?. 统一替换为?.
+ const funcBodyStr = funcBodyTemp.replace(/(\d+)\?\.(\d+)/g, '$1.$2'); // 排除数字中的?.
+ const result = [...funcBodyStr].reduce((acc, char, index) => {
+ if (char === '[') {
+ if (index > 0 && funcBodyStr[index - 1] !== '\n') {
+ // 排除开头[]
+ return `${acc}?.${char}`;
+ }
+ }
+ return `${acc}${char}`;
+ }, '');
+ return result;
+};
+
+export const parseExpression = (
+ func: any,
+ formData = {},
+ parentPath: string | []
+) => {
  const parentData = get(formData, parentPath) || {};
 
  if (typeof func === 'string') {
- const formatFunc = func.replace(/\[(\w+)\]/g, '.$1'); // 将[]替换为.xxxxx
- const funcBody = formatFunc.replace(/^{\s*{/g, '').replace(/}\s*}$/g, '').trim();
- const funcBodyTemp = funcBody.replace(/(\.|\?\.)/g, '?.'); // 将. 和 ?. 统一替换为?.
- const funcBodyStr = funcBodyTemp.replace(/(\d+)\?\.(\d+)/, '$1.$2'); // 排除数字中的?.
+ const funcBody = func
+ .replace(/^{\s*{/g, '')
+ .replace(/}\s*}$/g, '')
+ .trim();
+ let isHandleData =
+ funcBody?.startsWith('formData') || funcBody?.startsWith('rootValue');
+
+ let funcBodyStr = isHandleData ? parseFunc(funcBody) : funcBody;
+
  const funcStr = `
  return ${funcBodyStr
  .replace(/formData/g, JSON.stringify(formData))

packages/form-render/src/models/fieldShouldUpdate.ts

@@ -10,9 +10,7 @@ const extractFormDataStrings = (list: string[]) => {
  const matches = str.match(regex);
  if (matches) {
  result = result.concat(
- matches.map(
- match => match.replace(/\[(\w+)\]/g, '.$1') // 2.将中括号替换为点号
- )
+ matches
  );
  }
  });
@@ -29,9 +27,7 @@ const extractRootValueStrings = (list: string[]) => {
  const matches = str.match(regex);
  if (matches) {
  result = result.concat(
- matches.map(
- match => match.replace(/\[(\w+)\]/g, '.$1') // 将中括号替换为点号
- )
+ matches
  );
  }
  });
@@ -66,19 +62,19 @@ const getListEveryResult = (list: string[], preValue: any, nextValue: any, dataP
 };
 
 export default (str: string, dataPath: string, dependencies: any[], shouldUpdateOpen: boolean) => (preValue: any, nextValue: any) => {
- // dependencies 先不处理
- if (dependencies) {
- return true;
- }
+  // dependencies 先不处理
+  if (dependencies) {
+  return true;
+  }
 
- const formDataList = findStrList(str, 'formData');
- const rootValueList = findStrList(str, 'rootValue');
- const formDataRes = getListEveryResult(formDataList, preValue, nextValue, dataPath);
- const rootValueRes = getListEveryResult(rootValueList, preValue, nextValue, dataPath);
+  const formDataList = findStrList(str, 'formData');
+  const rootValueList = findStrList(str, 'rootValue');
+  const formDataRes = getListEveryResult(formDataList, preValue, nextValue, dataPath);
+  const rootValueRes = getListEveryResult(rootValueList, preValue, nextValue, dataPath);
 
- if (formDataRes && rootValueRes) {
- return false;
- }
+  if (formDataRes && rootValueRes) {
+  return false;
+  }
 
- return true;
-};
+  return true;
+ };

packages/form-render/src/widgets/listDrawer/index.tsx

@@ -96,15 +96,26 @@ const TableList: React.FC<Props> = (props: any) => {
  } else {
  form.setFieldValue([...rootPath, indexRef.current], itemData);
  }
- hanldeConfirm();
+ handleCloseDrawer();
  };
 
- const hanldeConfirm = () => {
+ const handleCloseDrawer = () => {
  setItemData(null);
  setVisible(false);
  indexRef.current = null;
  };
 
+ const hanldeConfirm = () => {
+ form
+ .validateFields()
+ .then(res => {
+ handleCloseDrawer();
+ })
+ .catch(error => {
+ console.log('表单校验错误', error);
+ });
+ };
+
  const columns: any = sortProperties(Object.entries(columnSchema))
  .map(([dataIndex, item]) => {
  const { required, title, tooltip, width, columnHidden } = item;
@@ -259,7 +270,7 @@ const TableList: React.FC<Props> = (props: any) => {
  )}
  {visible && (
  <FormDrawer
- {...drawerProps}
+  {...drawerProps}
  schema={schema}
  data={itemData}
  widgets={widgets}