@pisell/materials 1.0.449 → 1.0.451

package/lowcode/data-source-form/snippets.ts

@@ -0,0 +1,130 @@
+export default [
+  {
+    title: '表单(添加)',
+    screenshot:
+      'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/form-1.png',
+    schema: {
+      title: '表单(添加)',
+      componentName: 'DataSourceForm',
+      props: {
+        mode: 'add',
+        groupInfoPosition: 'top',
+        labelWrap: true,
+        layout: 'vertical',
+        showDescription: true,
+        showTitle: true,
+        scrollToFirstError: true,
+        labelCol: {
+          span: 24,
+        },
+        wrapperCol: {
+          span: 24,
+        },
+        size: 'large',
+        onValuesChange: {
+          type: 'JSFunction',
+          value:
+            "function onValuesChange(changedValues, allValues) {\n  console.log('onValuesChange', changedValues, allValues);\n}",
+        },
+        onFinish: {
+          type: 'JSFunction',
+          value:
+            "function onFinish(values) {\n  console.log('onFinish', values);\n}",
+        },
+        onFinishFailed: {
+          type: 'JSFunction',
+          value:
+            "function onFinishFailed({ values, errorFields, outOfDate }) {\n  console.log('onFinishFailed', values, errorFields, outOfDate);\n}",
+        },
+        name: 'basic',
+      },
+      children: [],
+    },
+  },
+  {
+    title: '表单(编辑)',
+    screenshot:
+      'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/form-1.png',
+    schema: {
+      title: '表单(编辑)',
+      componentName: 'DataSourceForm',
+      props: {
+        mode: 'edit',
+        groupInfoPosition: 'top',
+        labelWrap: true,
+        layout: 'vertical',
+        showDescription: true,
+        showTitle: true,
+        scrollToFirstError: true,
+        currentValue: 'server',
+        labelCol: {
+          span: 24,
+        },
+        wrapperCol: {
+          span: 24,
+        },
+        size: 'large',
+        onValuesChange: {
+          type: 'JSFunction',
+          value:
+            "function onValuesChange(changedValues, allValues) {\n  console.log('onValuesChange', changedValues, allValues);\n}",
+        },
+        onFinish: {
+          type: 'JSFunction',
+          value:
+            "function onFinish(values) {\n  console.log('onFinish', values);\n}",
+        },
+        onFinishFailed: {
+          type: 'JSFunction',
+          value:
+            "function onFinishFailed({ values, errorFields, outOfDate }) {\n  console.log('onFinishFailed', values, errorFields, outOfDate);\n}",
+        },
+        name: 'basic',
+      },
+      children: [],
+    },
+  },
+  {
+    title: '详情',
+    screenshot:
+      'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/form-1.png',
+    schema: {
+      title: '详情',
+      componentName: 'DataSourceForm',
+      props: {
+        mode: 'view',
+        groupInfoPosition: 'top',
+        labelWrap: true,
+        layout: 'vertical',
+        showDescription: true,
+        showTitle: true,
+        scrollToFirstError: true,
+        currentValue: 'server',
+        labelCol: {
+          span: 24,
+        },
+        wrapperCol: {
+          span: 24,
+        },
+        size: 'large',
+        onValuesChange: {
+          type: 'JSFunction',
+          value:
+            "function onValuesChange(changedValues, allValues) {\n  console.log('onValuesChange', changedValues, allValues);\n}",
+        },
+        onFinish: {
+          type: 'JSFunction',
+          value:
+            "function onFinish(values) {\n  console.log('onFinish', values);\n}",
+        },
+        onFinishFailed: {
+          type: 'JSFunction',
+          value:
+            "function onFinishFailed({ values, errorFields, outOfDate }) {\n  console.log('onFinishFailed', values, errorFields, outOfDate);\n}",
+        },
+        name: 'basic',
+      },
+      children: [],
+    },
+  },
+];

package/lowcode/data-source-form/utils.ts

@@ -0,0 +1,343 @@
+import {
+  nocobaseCpt2PisellCptMap,
+  pisellCptMap,
+  systemFields,
+} from './constants';
+
+type UiSchema = {
+  title: string;
+  default?: string;
+  enum: { label: string; value: string }[];
+  'x-component': string;
+  'x-component-props': Record<string, any>;
+  'x-read-pretty': boolean;
+  'x-validator'?: string;
+  type: 'string' | 'number' | 'boolean' | 'array' | 'object';
+};
+
+// 创建表单组
+export const createFormGroup = (children: any[]) => {
+  return {
+    children,
+    componentName: 'FormGroup',
+    props: {
+      title: 'Group',
+      showTitle: true,
+      showDescription: true,
+      showBackgroundColor: true,
+      backgroundColor: '#F9FAFB',
+    },
+  };
+};
+
+// 创建提交按钮
+export const createSubmitButton = (props: any = {}) => {
+  return {
+    componentName: 'SubmitButton',
+    props: {
+      type: 'primary',
+      size: 'large',
+      status: 'normal',
+      children: 'Submit',
+      confirmConfig: {
+        enable: false,
+      },
+      toastConfig: {
+        enable: true,
+        title: '提交成功',
+      },
+      refreshData: true,
+      afterSubmitType: 'none',
+      ...props,
+    },
+  };
+};
+
+// 创建表单项子项
+export const createFormItemChildren = (item: {
+  name: string;
+  uiSchema: UiSchema;
+}) => {
+  let props: Record<string, any> = item.uiSchema['x-component-props'] || {};
+  let componentName = item.uiSchema['x-component'];
+  if (
+    ['Select', 'Radio.Group', 'Checkbox.Group'].includes(
+      item.uiSchema['x-component']
+    ) &&
+    item.uiSchema.enum.length > 0
+  ) {
+    if (
+      ['Radio.Group', 'Checkbox.Group'].includes(item.uiSchema['x-component'])
+    ) {
+      props.direction = 'horizontal';
+    }
+    props.options = item.uiSchema.enum;
+  }
+
+  if (item.uiSchema['x-read-pretty']) {
+    props.disabled = item.uiSchema['x-read-pretty'];
+  }
+
+  if (item.uiSchema['x-component'] === 'ColorPicker') {
+    props.defaultValue = item.uiSchema.default;
+  }
+
+  return {
+    componentName,
+    props,
+  };
+};
+
+// 创建表单项
+export const createFormItemSchema = (
+  item: {
+    name: string;
+    uiSchema: UiSchema;
+  },
+  mode: string
+) => {
+  let props: Record<string, any> = {
+    label: item.uiSchema.title,
+    name: item.name,
+    mode,
+  };
+  let componentName = item.uiSchema['x-component'];
+
+  if (
+    item.uiSchema['x-validator'] &&
+    item.uiSchema['x-validator'] !== 'integer'
+  ) {
+    props.typeobj = {
+      type: item.uiSchema['x-validator'],
+      enabled: true,
+    };
+  }
+  if (item.uiSchema['x-component'] === 'Input.JSON') {
+    props.normalize = {
+      type: 'JSExpression',
+      value:
+        '(value) => {\n  try {\n    return JSON.parse(value);\n  } catch(error) {\n    console.log(error)\n  }\n  return value\n}',
+    };
+    props.getValueProps = {
+      type: 'JSExpression',
+      value:
+        '(value) => {\n  try {\n   return { value: value != "" && typeof value === \'object\' ? JSON.stringify(value) : value};\n  } catch(error) {\n    console.log(error)\n  }\n  return {value: value}\n}',
+    };
+    props.validator = {
+      type: 'JSExpression',
+      value:
+        "async (value) => {\n try {\n    if (typeof value === 'string' && value.trim() !== '') {\n      JSON.parse(value);\n    }\n  } catch (err) {\n    return Promise.reject(new Error(err.message));\n  }\n}",
+    };
+  }
+
+  if (
+    ['Select', 'Radio.Group', 'Checkbox.Group'].includes(
+      item.uiSchema['x-component']
+    ) &&
+    item.uiSchema.enum.length > 0
+  ) {
+    if (
+      ['Radio.Group', 'Checkbox.Group'].includes(item.uiSchema['x-component'])
+    ) {
+      props.direction = 'horizontal';
+    }
+    props.options = item.uiSchema.enum;
+  }
+
+  // 如果设置了x-read-pretty，则设置为只读
+  if (item.uiSchema['x-read-pretty']) {
+    props.mode = 'view';
+  }
+
+  if (item.uiSchema['x-component'] === 'ColorPicker') {
+    props.defaultValue = item.uiSchema.default;
+  }
+
+  return {
+    componentName: nocobaseCpt2PisellCptMap[componentName],
+    props,
+  };
+};
+
+type FieldOption = {
+  isGroup: boolean;
+  label: string;
+  value: string;
+  isShow: boolean;
+  children: FieldOption[];
+};
+
+// 表单schema转换为字段选项
+export const formSchema2PisellFieldsOptions = (
+  formSchema: any,
+  allFields: any[]
+) => {
+  if (!['DataSourceForm', 'FormGroup'].includes(formSchema.componentName)) {
+    return [];
+  }
+
+  const allFieldMap = allFields.reduce((acc, item) => {
+    acc[item.name] = item;
+    return acc;
+  }, {});
+
+  let fieldsOptions: FieldOption[] = [];
+  const showFields: any[] = [];
+
+  const hiddenFields: FieldOption[] = [];
+
+  formSchema.children.forEach((item: any) => {
+    // 是基础formItem组件
+    if (pisellCptMap[item.componentName]) {
+      showFields.push(item.props.name);
+      fieldsOptions.push({
+        isGroup: false,
+        label:
+          item.props.label ||
+          allFieldMap[item.props.name]?.uiSchema?.title ||
+          item.props.name,
+        value: item.id,
+        isShow: true,
+        children: [],
+      });
+    } else if (item.componentName === 'FormGroup') {
+      fieldsOptions.push({
+        isGroup: true,
+        label: item.props.title,
+        value: item.id,
+        isShow: true,
+        children: item?.children?.map((children: any) => {
+          showFields.push(children.props.name);
+          return {
+            isGroup: false,
+            label:
+              children.props.label ||
+              allFieldMap[children.props.name]?.uiSchema?.title ||
+              children.props.name,
+            value: children.id,
+            isShow: true,
+            children: [],
+          };
+        }),
+      });
+    }
+  });
+
+  allFields.forEach((item) => {
+    if (!showFields.includes(item.name)) {
+      hiddenFields.push({
+        isGroup: false,
+        label:
+          item.uiSchema?.title ||
+          allFieldMap[item.name]?.uiSchema?.title ||
+          item.name,
+        value: item.name,
+        isShow: false,
+        children: [],
+      });
+    }
+  });
+
+  fieldsOptions = [
+    ...fieldsOptions,
+    {
+      isGroup: true,
+      label: 'Hidden',
+      value: 'hidden',
+      isShow: true,
+      children: hiddenFields,
+    },
+  ];
+
+  return fieldsOptions;
+};
+
+// 字段转换为schema
+export const fields2ChildrenSchemas = (fields: any[], mode: string) => {
+  return fields
+    .filter(
+      (field: any) =>
+        field.uiSchema &&
+        !field.uiSchema['x-read-pretty'] &&
+        !systemFields.includes(field.name)
+    )
+    .map((field: any) => {
+      return createFormItemSchema(field, mode);
+    })
+    .filter((item: any) => !!item.componentName);
+};
+
+// 设置变量
+export const setVariables = (
+  target: any,
+  {
+    label,
+    value,
+  }: {
+    label: string;
+    value: any;
+  }
+) => {
+  const variables = target.getProps().getPropValue('_variables');
+  target.getProps().setPropValue('_variables', {
+    ...variables,
+    [label]: value,
+  });
+};
+
+// 批量设置变量
+export const setBatchVariables = (
+  target: any,
+  variables: Array<{
+    label: string;
+    value: any;
+  }>
+) => {
+  const existingVariables = target.getProps().getPropValue('_variables') || {};
+  const newVariables = variables.reduce((acc, { label, value }) => ({
+    ...acc,
+    [label]: value,
+  }), existingVariables);
+  
+  target.getProps().setPropValue('_variables', newVariables);
+};
+
+
+export const getAllVariables = (target: any) => {
+  return target.getProps().getPropValue('_variables');
+};
+
+export const getVariable = (target: any, label: string) => {
+  return target.getProps().getPropValue('_variables')?.[label];
+};
+
+export const clearVariables = (target: any) => {
+  return target.getProps().setPropValue('_variables', null);
+};
+
+const getParentVariables = (target: any) => {
+  let parent = target.node.parent;
+  while (parent && !parent.getProps().getPropValue('_variables')) {
+    parent = parent.parent;
+  }
+  return parent ? getAllVariables(parent) : {};
+}
+
+export const getDataSourceVariables = (target: any) => {
+  const variables = getParentVariables(target);
+  return variables?.dataSourceVariables || [];
+};
+
+export const getCurrentValueVariables = (target: any) => {
+  const variables = getParentVariables(target);
+  const currentDataSourceTitle = getVariable(target, 'dataSourceTitle');
+
+  const currentValueVariables = [
+    {
+      label: currentDataSourceTitle,
+      value: 'server',
+    },
+  ];
+
+  return currentValueVariables.concat(variables?.currentValueVariables || []);
+};