@pisell/materials 1.0.471 → 1.0.473

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

@@ -6,6 +6,9 @@ export default [
     schema: {
       componentName: 'DataSourceTable',
       props: {
+        style: {
+          padding: '24px',
+        },
         dataSource: [],
         columns: [],
         rowKey: 'id',
@@ -13,18 +16,19 @@ export default [
           pageSize: 10,
           total: 15,
           current: 1,
+          localPagination: false,
         },
         view: {
           defaultViewMode: 'grid',
           multiple: false,
         },
         columnSetting: {
-          show: false,
-          storageMode: '',
+          show: true,
+          storageMode: 'localStorage',
         },
         sort: {
           show: false,
-          storageMode: '',
+          storageMode: 'localStorage',
         },
         dataSourceGroup: {
           show: false,
@@ -71,13 +75,15 @@ export default [
         showHeader: true,
         bordered: true,
         size: 'default',
-        tableLayout: '',
+        tableLayout: 'auto',
         virtual: true,
         scroll: {
           autoCalc: false,
           scrollToFirstRowOnChange: true,
         },
         dragSort: false,
+        showTitle: true,
+        showSubTitle: true,
       },
     },
   },

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

@@ -2,6 +2,14 @@ import {
   nocobaseCpt2PisellCptMap,
   systemFields,
 } from '../data-source-form/constants';
+import { clearVariables } from '../data-source-form/utils';
+import {
+  getVariable,
+  getAllVariables,
+  createSubmitButton,
+  fields2ChildrenSchemas,
+} from '../data-source-form/utils';
+import { omit } from '../_utils/utils';
 
 const createRenderSchema = (field: any) => {
   let props: Record<string, any> = {
@@ -143,3 +151,249 @@ export const columns2Options = (columns: any[], allFields: any[] = []) => {
 export const genDataSourceValueKey = (target: any, key: string) => {
   return `{{${target.node.id}.value.${key}}}`;
 };
+
+// 获取当前target下的所有columns的dataIndex
+export const getColumnsDataIndex = (target: any) => {
+  return target
+    .getProps()
+    .getPropValue('columns')
+    .map((column: any) => column.dataIndex);
+};
+
+// 重置表格的props
+export const resetTableProps = (target: any) => {
+  target.getProps().setPropValue('columns', []);
+  target.getProps().setPropValue('title', '');
+  target.getProps().setPropValue('operationContent', {});
+  target.getProps().setPropValue('filter', {
+    show: false,
+    sortButtonShow: false,
+    storageMode: '',
+    quickFilterMaxLength: 3,
+    list: [],
+  });
+  target.getProps().setPropValue('sort', {
+    show: false,
+    storageMode: 'localStorage',
+  });
+  clearVariables(target);
+};
+
+export const getJsSlot = () => {
+  return {
+    type: 'JSSlot',
+    params: [],
+    value: [],
+  };
+};
+
+export const getFormContent = (target: any, mode: 'add' | 'edit' | 'view') => {
+  const fields = getVariable(target, 'currentFields');
+  let childrenSchemas = fields2ChildrenSchemas(fields, mode);
+  const titleMap = {
+    add: '表单(添加)',
+    edit: '编辑',
+    view: '详情',
+  };
+  const title = titleMap[mode];
+
+  if (['add', 'edit'].includes(mode)) {
+    childrenSchemas = childrenSchemas.concat(
+      createSubmitButton({
+        afterSubmitType: 'close',
+      })
+    );
+  }
+
+  // 过滤不需要继承的变量
+  const variables = omit(getAllVariables(target), [
+    'currentValueVariables',
+    'dataSourceVariables',
+  ]);
+
+  return {
+    type: 'JSSlot',
+    params: [],
+    value: [
+      {
+        componentName: 'DataSourceForm',
+        title,
+        props: {
+          _variables: variables,
+          dataSource: genDataSourceValueKey(target, 'currentDataSource'),
+          showTitle: false,
+          showDescription: false,
+          groupInfoPosition: 'top',
+          layout: 'vertical',
+          size: 'large',
+          mode,
+          currentValue:
+            mode !== 'add'
+              ? genDataSourceValueKey(target, 'currentRecord')
+              : undefined,
+        },
+        children: childrenSchemas,
+      },
+    ],
+  };
+};
+
+// 生成默认的operation和content
+export const setDefaultOperationAndTitleButtons = (target: any) => {
+  const operation = {
+    show: true,
+    title: '操作',
+    align: 'center',
+    fixed: false,
+    type: 'link',
+    items: [
+      {
+        label: '查看',
+        openMode: 'drawer',
+        openContentSize: 'middle',
+        openTitle: '详情',
+        actionType: 'view',
+        key: 'view',
+      },
+      {
+        label: '编辑',
+        openMode: 'drawer',
+        openContentSize: 'middle',
+        openTitle: '编辑',
+        actionType: 'edit',
+        key: 'edit',
+      },
+      {
+        label: '删除',
+        actionType: 'delete',
+      },
+    ],
+  };
+
+  const titleButtons = {
+    show: true,
+    items: [
+      {
+        label: '添加',
+        openMode: 'drawer',
+        openContentSize: 'middle',
+        openTitle: '添加',
+        actionType: 'add',
+        key: 'add',
+        buttonProps: {
+          type: 'primary',
+          title: '添加',
+        },
+      },
+    ],
+    maxCount: 3,
+  };
+
+  target.getProps().setPropValue('titleButtons', titleButtons);
+  target.getProps().setPropValue('operation', operation);
+
+  const operationContent = {
+    view: getFormContent(target, 'view'),
+    edit: getFormContent(target, 'edit'),
+    add: getFormContent(target, 'add'),
+  };
+
+  target.getProps().setPropValue('operationContent', operationContent);
+};
+
+// 默认显示的filter组件
+const defaultShowFilterComponent = [
+  'Select',
+  'DatePicker',
+  'Checkbox',
+  'Radio.Group',
+  'Checkbox.Group',
+]
+
+// 选择数据源后 生成默认的filter
+export const setDefaultSearchFilter = (target: any, fields: any[]) => {
+  const filterFields = fields
+    .filter(
+      (field) => !systemFields.includes(field.name) && field.type !== 'json'
+    )
+    .map((field) => {
+      return {
+        name: field.name,
+        isCustom: false,
+        label: field.uiSchema.title,
+        value: field.name,
+        isHidden: defaultShowFilterComponent.includes(field.uiSchema['x-component']) ? false : true,
+      };
+    });
+
+  target.getProps().setPropValue('search', {
+    show: true,
+    placeholder: 'Search',
+  });
+
+  target.getProps().setPropValue('filter', {
+    show: true,
+    storageMode: 'localStorage',
+    mode: 'simple',
+    quickFilterMaxLength: 3,
+    items: filterFields,
+  });
+};
+
+const sortTypeMap: Record<string, string> = {
+  float: 'number',
+  bigInt: 'number',
+};
+
+// 生成默认的排序
+export const setDefaultSort = (target: any, fields: any[]) => {
+  target.getProps().setPropValue('sort', {
+    show: true,
+    type: 'simple',
+    storageMode: 'localStorage',
+    list: fields
+      .filter(
+        (field) =>
+          !systemFields.includes(field.name) &&
+          ['string', 'number', 'date', 'bigInt', 'float'].includes(field.type)
+      )
+      .map((field) => ({
+        label: field.uiSchema.title,
+        type: sortTypeMap[field.type] || field.type,
+        name: field.name,
+        isHidden: false,
+        localFilter: false,
+      })),
+  });
+};
+
+// 根据当前fields格式化 filter筛选字段的select options
+export const fields2TableFilterOptions = (
+  fields: any[],
+  useFields: string[]
+) => {
+  if (!fields || !fields.length) return [];
+
+  return fields
+    .filter((field) => !systemFields.includes(field.name))
+    .map((field) => ({
+      title: field.uiSchema.title,
+      value: field.name,
+      disabled: useFields.includes(field.name),
+    }));
+};
+
+export const filterTypes = [
+  {
+    label: '输入框',
+    value: 'Input',
+  },
+  {
+    label: '日期范围选择',
+    value: 'DateRangePicker',
+  },
+  {
+    label: '下拉选择',
+    value: 'Select',
+  },
+];

package/lowcode/data-source-typography/meta.ts

@@ -0,0 +1,54 @@
+
+const DataSourceTypographyMeta = {
+  "componentName": "DataSourceTypography",
+  "title": "DataSourceTypography",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@pisell/materials",
+    "version": "3.0.55",
+    "exportName": "DataSourceTypography",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "dataSourceKey",
+            "zh-CN": "dataSourceKey"
+          }
+        },
+        "name": "dataSourceKey",
+        "setter": {
+          "componentName": "StringSetter",
+          "isRequired": true,
+          "initialValue": ""
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets = [
+  {
+    "title": "DataSourceTypography",
+    "screenshot": "",
+    "schema": {
+      "componentName": "DataSourceTypography",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...DataSourceTypographyMeta,
+  snippets
+};

package/lowcode/data-source-typography.text/meta.ts

@@ -0,0 +1,212 @@
+import { MetaType } from '../_utils/type';
+import {
+  genGeneralVariablesSetting,
+} from '../_utils/defaultSchema';
+import snippets from './snippets';
+
+const DataSourceTypographyText: MetaType = {
+  snippets,
+  componentName: 'DataSourceTypography.Text',
+  title: '文本',
+  category: '数据展示',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'DataSourceTypography',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: 'Text',
+  },
+  generalProps: [
+    genGeneralVariablesSetting({
+      name: 'children',
+      title: { label: '内容', tip: '内容' },
+    }),
+  ],
+  configure: {
+    props: [
+      {
+        name: 'children',
+        title: { label: '内容', tip: '内容' },
+        setter: {
+          componentName: 'PisellI18nSetter',
+        },
+        defaultValue: '',
+        supportVariable: true,
+      },
+      {
+        name: 'code',
+        title: { label: '添加代码样式', tip: '添加代码样式' },
+        defaultValue: false,
+      },
+      {
+        name: 'delete',
+        title: { label: '添加删除线样式', tip: '添加删除线样式' },
+        defaultValue: false,
+      },
+      {
+        name: 'disabled',
+        title: { label: '是否禁用', tip: '是否为禁用状态' },
+        defaultValue: false,
+      },
+
+      {
+        name: 'mark',
+        title: { label: '添加标记样式', tip: '添加标记样式' },
+        defaultValue: false,
+      },
+      {
+        name: 'keyboard',
+        title: { label: '添加键盘样式', tip: '添加键盘样式' },
+        defaultValue: false,
+      },
+      {
+        name: 'underline',
+        title: { label: '添加下划线样式', tip: '添加下划线样式' },
+        defaultValue: false,
+      },
+      {
+        name: 'strong',
+        title: { label: '是否加粗', tip: '是否加粗' },
+        defaultValue: false,
+      },
+      {
+        name: 'type',
+        title: { label: '文本类型', tip: '文本类型' },
+        setter: {
+          componentName: 'SelectSetter',
+          props: {
+            options: [
+              {
+                title: '默认',
+                value: 'default',
+              },
+              {
+                title: '弱提示',
+                value: 'secondary',
+              },
+              {
+                title: '成功',
+                value: 'success',
+              },
+              {
+                title: '警告',
+                value: 'warning',
+              },
+              {
+                title: '错误',
+                value: 'danger',
+              },
+            ],
+          },
+        },
+      },
+      {
+        title: '高级',
+        type: 'group',
+        display: 'accordion',
+        items: [
+          {
+            name: 'copyable',
+            title: { label: '是否可拷贝', tip: '是否可拷贝' },
+            setter: [
+              {
+                componentName: 'BoolSetter',
+                isRequired: false,
+                initialValue: false,
+              },
+              {
+                componentName: 'JsonSetter',
+                isRequired: false,
+              },
+            ],
+          },
+          {
+            name: 'editable',
+            title: { label: '是否可编辑', tip: '是否可编辑' },
+            setter: [
+              {
+                componentName: 'BoolSetter',
+                isRequired: false,
+                initialValue: false,
+              },
+              {
+                componentName: 'JsonSetter',
+                isRequired: false,
+              },
+            ],
+          },
+          {
+            name: 'ellipsis',
+            title: {
+              label: '自动溢出省略',
+              tip: '设置自动溢出省略，需要设置元素宽度',
+            },
+            setter: [
+              {
+                componentName: 'BoolSetter',
+                isRequired: false,
+                initialValue: false,
+              },
+              {
+                componentName: 'JsonSetter',
+                isRequired: false,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onClick',
+          template:
+            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
+        },
+        {
+          name: 'copyable.onCopy',
+          template:
+            "onCopy(${extParams}){\n// 拷贝成功的回调函数\nconsole.log('onCopy');}",
+        },
+        {
+          name: 'editable.onStart',
+          template:
+            "onStart(${extParams}){\n// 进入编辑中状态时触发\nconsole.log('onStart');}",
+        },
+        {
+          name: 'editable.onChange',
+          template:
+            "onChange(event,${extParams}){\n// 文本域编辑时触发\nconsole.log('onChange', event);}",
+        },
+        {
+          name: 'editable.onEnd',
+          template:
+            "onEnd(${extParams}){\n// 按 ENTER 结束编辑状态时触发\nconsole.log('onEnd');}",
+        },
+        {
+          name: 'editable.onCancel',
+          template:
+            "onCancel(${extParams}){\n// 按 ESC 退出编辑状态时触发\nconsole.log('onCancel');}",
+        },
+        {
+          name: 'ellipsis.onEllipsis',
+          template:
+            "onEllipsis(ellipsis,${extParams}){\n// 触发省略时的回调\nconsole.log('onEllipsis', ellipsis);}",
+        },
+        {
+          name: 'ellipsis.onExpand',
+          template:
+            "onExpand(event,${extParams}){\n// 点击展开时的回调\nconsole.log('onExpand', event);}",
+        },
+      ],
+    },
+  },
+};
+
+export default DataSourceTypographyText;

package/lowcode/data-source-typography.text/snippets.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '文本',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/typography-text-1.png',
+    schema: {
+      componentName: 'DataSourceTypography.Text',
+      props: {
+        children: 'text',
+      },
+    },
+  },
+];