@pisell/materials 1.0.449 → 1.0.451

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

@@ -0,0 +1,84 @@
+export default [
+  {
+    title: '表格',
+    screenshot:
+      'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/table-1.png',
+    schema: {
+      componentName: 'DataSourceTable',
+      props: {
+        dataSource: [],
+        columns: [],
+        rowKey: 'id',
+        pagination: {
+          pageSize: 10,
+          total: 15,
+          current: 1,
+        },
+        view: {
+          defaultViewMode: 'grid',
+          multiple: false,
+        },
+        columnSetting: {
+          show: false,
+          storageMode: '',
+        },
+        sort: {
+          show: false,
+          storageMode: '',
+        },
+        dataSourceGroup: {
+          show: false,
+          storageMode: '',
+        },
+        filter: {
+          show: false,
+          sortButtonShow: false,
+          storageMode: '',
+          quickFilterMaxLength: 3,
+          list: [],
+        },
+        gallery: {
+          cardMinWidth: 260,
+          cardMaxWidth: 340,
+          horizontalGutter: 32,
+          verticalGutter: 32,
+          cover: {
+            show: true,
+            height: 230,
+            objectFit: 'fill',
+          },
+          title: {
+            line: 2,
+          },
+          header: {
+            fields: {
+              show: false,
+            },
+          },
+          content: {},
+          footer: {},
+        },
+        exportImport: {
+          show: false,
+          selectLists: [],
+          templateFileUrl: '',
+          title: '',
+          hiddenKeys: [],
+          otherParams: {},
+        },
+        showDeleteButton: false,
+        loading: false,
+        showHeader: true,
+        bordered: true,
+        size: 'default',
+        tableLayout: '',
+        virtual: true,
+        scroll: {
+          autoCalc: false,
+          scrollToFirstRowOnChange: true,
+        },
+        dragSort: false,
+      },
+    },
+  },
+];

package/lowcode/data-source-table/utils.tsx

@@ -0,0 +1,140 @@
+import {
+  nocobaseCpt2PisellCptMap,
+  systemFields,
+} from '../data-source-form/constants';
+
+const createRenderSchema = (field: any) => {
+  let props: Record<string, any> = {
+    mode: 'view',
+    noStyle: true,
+    value: {
+      type: 'JSExpression',
+      value: 'this.text',
+    },
+  };
+
+  let componentName = field.uiSchema['x-component'];
+
+  if (
+    field.uiSchema['x-validator'] &&
+    field.uiSchema['x-validator'] !== 'integer'
+  ) {
+    props.typeobj = {
+      type: field.uiSchema['x-validator'],
+      enabled: true,
+    };
+  }
+  if (field.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(
+      field.uiSchema['x-component']
+    ) &&
+    field.uiSchema.enum.length > 0
+  ) {
+    if (
+      ['Radio.Group', 'Checkbox.Group'].includes(field.uiSchema['x-component'])
+    ) {
+      props.direction = 'horizontal';
+    }
+    props.options = field.uiSchema.enum;
+  }
+
+  // 如果设置了x-read-pretty，则设置为只读
+  if (field.uiSchema['x-read-pretty']) {
+    props.mode = 'view';
+  }
+
+  if (field.uiSchema['x-component'] === 'ColorPicker') {
+    props.defaultValue = field.uiSchema.default;
+  }
+
+  return {
+    componentName: nocobaseCpt2PisellCptMap[componentName],
+    props,
+  };
+};
+
+export const fields2Columns = (fields: any[]) => {
+  if (!fields || !fields.length) return [];
+
+  return fields
+    .filter((field) => !systemFields.includes(field.name))
+    .map((field) => ({
+      title: field.uiSchema.title,
+      dataIndex: field.name,
+      key: field.name,
+      align: 'left',
+      fixed: '',
+      // render: {
+      //   type: 'JSSlot',
+      //   params: ['text', 'record', 'index'],
+      //   value: [createRenderSchema(field)],
+      //   id: 'node_ocm49b0bm71',
+      // },
+      fieldComponent: field.uiSchema['x-component'],
+    }));
+};
+
+export const columns2Options = (columns: any[], allFields: any[] = []) => {
+  const showFields: any[] = [];
+
+  const hiddenFields: any[] = [];
+
+  const columnsMap = columns.reduce((acc, column) => {
+    acc[column.dataIndex] = column;
+    return acc;
+  }, {});
+
+  allFields.forEach((field) => {
+    if (columnsMap[field.name]) {
+      showFields.push({
+        isGroup: false,
+        label: field.uiSchema.title,
+        value: field.name,
+        isShow: true,
+        children: [],
+      });
+    } else {
+      hiddenFields.push({
+        isGroup: false,
+        label: field.uiSchema.title,
+        value: field.name,
+        isShow: false,
+        children: [],
+      });
+    }
+  });
+
+  return [
+    {
+      isGroup: true,
+      label: '显示',
+      value: 'show',
+      isShow: true,
+      children: showFields,
+    },
+    {
+      isGroup: true,
+      label: '隐藏',
+      value: 'hidden',
+      children: hiddenFields,
+    },
+  ];
+};

package/lowcode/form/meta.ts

@@ -1,41 +1,135 @@
 import snippets from './snippets';
-import { uuid } from '../_utils/utils'
+import { uuid } from '../_utils/utils';
+
+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 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'] === 'Percent') {
+    componentName = 'InputNumber';
+  }
+
+  if (item.uiSchema['x-component'] === 'Password') {
+    componentName = 'Input.Password';
+  }
+
+  if (item.uiSchema['x-component'] === 'ColorPicker') {
+    props.defaultValue = item.uiSchema.default;
+  }
+
+  return {
+    componentName,
+    props,
+  };
+};
+
+export const createFormItemSchema = (item: {
+  name: string;
+  uiSchema: UiSchema;
+}) => {
+  let props: Record<string, any> = {
+    // label: item.uiSchema.title,
+    name: item.name,
+  };
+  if (
+    item.uiSchema['x-validator'] &&
+    item.uiSchema['x-validator'] !== 'integer'
+  ) {
+    props.typeobj = {
+      type: item.uiSchema['x-validator'],
+    };
+  }
+  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}",
+    };
+  }
+
+  return {
+    componentName: 'Form.Item',
+    props,
+    children: [createFormItemChildren(item)],
+  };
+};
 
 export default {
   snippets,
   componentName: 'Form',
   title: '表单容器',
   category: '表单',
-  docUrl: "",
-  screenshot: "",
-  devMode: "proCode",
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
   npm: {
-    package: "@pisell/materials",
-    version: "1.0.1",
-    exportName: "Form",
-    main: "src/index.tsx",
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'Form',
+    main: 'src/index.tsx',
     destructuring: true,
-    subName: "",
+    subName: '',
   },
   props: [
     {
       name: 'ref',
       title: {
         label: 'ref',
-        tip: 'ref | 通过 this.$(\'xxx\') 获取到组件实例',
+        tip: "ref | 通过 this.$('xxx') 获取到组件实例",
       },
       defaultValue: () => {
-        return `form_${uuid()}`
+        return `form_${uuid()}`;
       },
       setter: 'StringSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'values',
       title: { label: '表单数据源', tip: '表单数据源' },
       propType: 'object',
       setter: 'JsonSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'colon',
@@ -43,7 +137,7 @@ export default {
       propType: 'bool',
       defaultValue: true,
       setter: 'BoolSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'hideRequiredMark',
@@ -51,7 +145,7 @@ export default {
       propType: 'bool',
       defaultValue: false,
       setter: 'BoolSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       type: 'group',
@@ -131,7 +225,8 @@ export default {
               },
             },
           },
-          description: '需要为输入控件设置布局样式时，使用该属性，用法同 labelCol',
+          description:
+            '需要为输入控件设置布局样式时，使用该属性，用法同 labelCol',
         },
       ],
     },
@@ -192,7 +287,7 @@ export default {
       },
       propType: 'string',
       setter: 'StringSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'preserve',
@@ -203,7 +298,7 @@ export default {
       propType: 'bool',
       defaultValue: true,
       setter: 'BoolSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'scrollToFirstError',
@@ -214,7 +309,7 @@ export default {
       propType: 'bool',
       defaultValue: true,
       setter: 'BoolSetter',
-      supportVariable: true
+      supportVariable: true,
     },
     {
       name: 'size',
@@ -248,7 +343,6 @@ export default {
       name: 'validateMessages',
       title: { label: '验证提示模板', tip: '验证提示模板' },
       setter: 'JsonSetter',
-      defaultValue: { required: "'${name}' 不能为空" },
     },
     {
       name: 'validateTrigger',
@@ -350,7 +444,9 @@ export default {
             !dragment.componentMeta ||
             !dragment.componentMeta.npm ||
             !dragment.componentMeta.npm.package ||
-            dragment.componentMeta.npm.package.indexOf('@alilc/antd-lowcode-materials') === -1 ||
+            dragment.componentMeta.npm.package.indexOf(
+              '@alilc/antd-lowcode-materials'
+            ) === -1 ||
             comps.every((comp) => dragment.componentName.indexOf(comp) === -1)
           ) {
             return;
@@ -370,7 +466,7 @@ export default {
               dragment,
               layoutPNode.exportSchema(),
               // 避免生成新的 nodeId
-              { reserveSchemaNodeId: true },
+              { reserveSchemaNodeId: true }
             );
           }, 1);
         },