@bit-sun/business-component 2.1.1-alpha.21 → 2.1.1-alpha.22

package/src/components/Business/JsonQueryTable/jsonEditor/lint/index.js

@@ -0,0 +1,389 @@
+import * as basicTypes from './basicType';
+let monaco;
+let editor;
+
+const {
+  isArrayType,
+  isStringType,
+  isNumberType,
+  isBooleanType,
+  isNameType,
+  isFieldRenderType,
+  isLayoutType,
+  isObjectType,
+  isMethodType,
+  isFunctionType,
+  isModeType,
+  isColumnRender,
+  isActionType,
+} = basicTypes;
+
+const errorMarks = (node, message = '类型错误') => {
+  const name = node?.key?.name || node?.key?.value || node.value || '';
+  const { loc } = node;
+
+  monaco.editor.setModelMarkers(editor.getModel(), 'propFunc', [
+    {
+      startLineNumber: loc.start.line,
+      startColumn: loc.start.column + 1,
+      endLineNumber: loc.end.line,
+      endColumn: loc.end.column + 1,
+      message: `${name} ${message}`,
+      severity: monaco.MarkerSeverity.Error,
+    },
+  ]);
+};
+
+function requiredValidate(field, name) {
+  const nameList = Array.isArray(name) ? name : [name];
+  const { properties } = field;
+  if (!properties) return;
+  if (
+    !properties.some(item => {
+      const itemName = item?.key?.name || item?.key?.value || item.value;
+      return nameList.some(v => itemName === v);
+    })
+  ) {
+    errorMarks(field, `缺少必填项${name}`);
+  }
+}
+
+export default (data, _monaco, _editor) => {
+  if (!data) return;
+  monaco = _monaco;
+  editor = _editor;
+  const { properties = [] } = data;
+
+  properties.forEach(node => {
+    const { key } = node;
+    const name = key?.name || key?.value;
+    if (node?.loc?.start?.column < 5) {
+      // 仅对最外层校验，内部校验直接处理外部字段
+      validate(node, name);
+    }
+  });
+};
+
+function validate(node, name) {
+  return true
+  /**
+   * fields字段校验
+   */
+  const fieldTypes = ['fields'];
+  if (fieldTypes.includes(name)) {
+    if (!isArrayType(node)) {
+      errorMarks(node, '应为数组类型');
+      return;
+    }
+    const { elements } = node.value || {};
+    elements.forEach(field => {
+      if (!isObjectType(field)) {
+        errorMarks(field, '应为对象类型');
+        return;
+      }
+
+      const { properties } = field;
+      if (!properties) return;
+      if (
+        !properties.some(item => {
+          const itemName = item?.key?.name || item?.key?.value || item.value;
+          return itemName === 'fields';
+        })
+      ) {
+        requiredValidate(field, 'name');
+        requiredValidate(field, ['field', 'render']);
+      }
+
+      properties.forEach(item => {
+        const itemName = item?.key?.name || item?.key?.value || item.value;
+        if (itemName === 'name' && !isNameType(item)) {
+          errorMarks(item);
+          return;
+        }
+        if (itemName === 'label') {
+          if (!isStringType(item)) {
+            errorMarks(item);
+            return;
+          }
+        }
+        if (itemName === 'field') {
+          if (!isFieldRenderType(item)) {
+            errorMarks(item);
+            return;
+          }
+          if (isObjectType(item)) {
+            const { properties: renderProperties } = item.value;
+            if (!renderProperties) return;
+            renderProperties.forEach(renderItem => {
+              const renderItemName =
+                renderItem.key.name || renderItem.key.value;
+              if (renderItemName === 'type') {
+                if (!isStringType(renderItem) && !isFunctionType(renderItem)) {
+                  errorMarks(renderItem);
+                  return;
+                }
+              }
+            });
+          }
+        }
+
+        if (itemName === 'valuePropName' && !isStringType(item)) {
+          errorMarks(item);
+          return;
+        }
+        if (itemName === 'rules' && !isArrayType(item)) {
+          errorMarks(item);
+          return;
+        }
+        if (itemName === 'wrapFormItem' && !isBooleanType(item)) {
+          errorMarks(item);
+          return;
+        }
+        if (itemName === 'initialDisabled' && !isBooleanType(item)) {
+          errorMarks(item);
+          return;
+        }
+        if (itemName === 'initialVisible' && !isBooleanType(item)) {
+          errorMarks(item);
+          return;
+        }
+        if (itemName === 'dependency') {
+          if (!isObjectType(item)) {
+            errorMarks(item);
+            return;
+          }
+          const { properties: depProperties } = item.value;
+          if (!depProperties) return;
+          depProperties.forEach(depItem => {
+            const depName = depItem.key.name || depItem.key.value;
+            const depType = ['value', 'source', 'disabled', 'visible'];
+            if (!depType.includes(depName)) {
+              errorMarks(
+                depType,
+                'dependency 只可以包含value source disabled visible四种类型',
+              );
+              return;
+            }
+            if (!isObjectType(depItem)) {
+              errorMarks(depItem);
+              return;
+            }
+            const { properties: depItemProperties } = depItem.value;
+            if (!depItemProperties) return;
+            depItemProperties.forEach(depNode => {
+              const depNodeName = depNode.key.name || depNode.key.value;
+              const allowDepTypes = [
+                'relates',
+                'inputs',
+                'cases',
+                'ignores',
+                'type',
+                'output',
+                'defaultOutput',
+              ];
+              if (!allowDepTypes.includes(depNodeName)) {
+                errorMarks(depNode, '多余类型');
+                return;
+              }
+
+              if (depNodeName === 'relates') {
+                if (!isArrayType(depNode)) {
+                  errorMarks(depNode);
+                  return;
+                }
+              }
+              if (depNodeName === 'inputs') {
+                if (!isArrayType(depNode)) {
+                  errorMarks(depNode);
+                  return;
+                }
+              }
+              if (depNodeName === 'cases') {
+                if (!isArrayType(depNode)) {
+                  errorMarks(depNode);
+                  return;
+                }
+              }
+              if (depNodeName === 'ignores') {
+                if (!isArrayType(depNode)) {
+                  errorMarks(depNode);
+                  return;
+                }
+              }
+            });
+          });
+        }
+
+        if (itemName === 'render' && !isFieldRenderType(item)) {
+          errorMarks(item);
+          return;
+        }
+      });
+    });
+  }
+
+  /**
+   * layout
+   */
+  if (name === 'layout') {
+    if (!isLayoutType(node)) {
+      errorMarks(node);
+      return;
+    }
+  }
+
+  /**
+   * 请求校验
+   */
+  const fetchType = [
+    'remoteSource',
+    'remoteDataSource',
+    'remoteValues',
+    'submit',
+  ];
+  if (fetchType.includes(name)) {
+    if (!isObjectType(node)) {
+      errorMarks(node, '应为对象类型');
+      return;
+    }
+    requiredValidate(node.value, 'url');
+    const { properties } = node.value;
+    if (!properties) return;
+    properties.forEach(item => {
+      const itemName = item.key.name || item.key.value;
+      if (itemName === 'url' && !isStringType(item)) {
+        errorMarks(item);
+        return;
+      }
+      if (itemName === 'method' && !isMethodType(item)) {
+        errorMarks(item);
+        return;
+      }
+      if (itemName === 'params' && !isObjectType(item)) {
+        errorMarks(item);
+        return;
+      }
+      if (itemName === 'extraParams' && !isObjectType(item)) {
+        errorMarks(item);
+        return;
+      }
+      if (itemName === 'convertParams' && !isFunctionType(item)) {
+        errorMarks(item);
+        return;
+      }
+      if (itemName === 'converter' && !isFunctionType(item)) {
+        errorMarks(item);
+        return;
+      }
+    });
+  }
+
+  /**
+   * columns
+   */
+  if (name === 'columns') {
+    if (!isArrayType(node)) {
+      errorMarks(node);
+      return;
+    }
+
+    const { elements } = node.value || {};
+    elements.forEach(column => {
+      if (!isObjectType(column)) {
+        errorMarks(column, '应为对象类型');
+        return;
+      }
+
+      const { properties } = column;
+      if (!properties) return;
+      properties.forEach(item => {
+        const itemName = item?.key?.name || item?.key?.value || item.value;
+        if (itemName === 'key') {
+          if (!isStringType(item)) {
+            errorMarks(item, '应为字符串类型');
+            return;
+          }
+        }
+        if (itemName === 'title') {
+          if (!isStringType(item)) {
+            errorMarks(item, '应为字符串类型');
+            return;
+          }
+        }
+        if (itemName === 'render') {
+          if (!isColumnRender(item)) {
+            errorMarks(item);
+            return;
+          }
+        }
+      });
+    });
+  }
+
+  /**
+   * mode
+   */
+
+  if (name === 'mode') {
+    if (!isModeType(node)) {
+      errorMarks(node, 'mode可选类型为view create edit');
+      return;
+    }
+  }
+
+  /**
+   * action
+   */
+  if (name === 'actionsRender' || name === 'leftActionsRender') {
+    if (!isActionType(node)) {
+      errorMarks(node);
+      return;
+    }
+  }
+
+  /**
+   * formItem
+   */
+  if (name === 'itemLayout') {
+    if (!isObjectType(node)) {
+      errorMarks(node);
+      return;
+    }
+
+    const { properties } = node.value;
+    properties.forEach(item => {
+      const itemName = item?.key?.name || item?.key?.value || item.value;
+      if (itemName === 'span') {
+        if (!isNumberType(item)) {
+          errorMarks(item);
+          return;
+        }
+      }
+      if (itemName === 'gutter') {
+        if (!isNumberType(item)) {
+          errorMarks(item);
+          return;
+        }
+      }
+      if (itemName === 'offset') {
+        if (!isNumberType(item)) {
+          errorMarks(item);
+          return;
+        }
+      }
+
+      if (itemName === 'labelCol') {
+        if (!isObjectType(item)) {
+          errorMarks(item);
+          return;
+        }
+      }
+      if (itemName === 'wrapperCol') {
+        if (!isObjectType(item)) {
+          errorMarks(item);
+          return;
+        }
+      }
+    });
+  }
+}

package/src/components/Business/JsonQueryTable/jsonEditor/suggestions/actions.js

@@ -0,0 +1,118 @@
+export default monaco => [
+  {
+    type: 'action',
+    label: 'back',
+    detail: '返回上一级',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText: "'back'",
+    documentation: {
+      value: ``,
+    },
+  },
+  {
+    type: 'action',
+    label: 'request',
+    detail: '请求',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText:
+      '{\n  type: "request",\n  url: "${1:\u002Fsula.json}",\n  method: "${2:get}",\n},',
+    documentation: {
+      value: ``,
+    },
+  },
+  {
+    type: 'action',
+    label: 'forward',
+    detail: '前进一级',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText: "'forward'",
+    documentation: {
+      value: ``,
+    },
+  },
+  {
+    type: 'action',
+    label: 'modalform',
+    detail: '弹框表单插件',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText:
+      '{\n  type: "modalform",\n  title: "Title",\n  mode: "edit",\n  fields: [\n    {\n      name: "input",\n      label: "input",\n      field: {\n        type: "input",\n        props: {\n          placeholder: "请输入"\n        }\n      },\n      rules: [\n        {\n          required: true,\n          message: "请输入"\n        }\n      ]\n    }\n  ],\n  remoteValues: {\n    url: "\u002Fdetail.json",\n    method: "post",\n    params: {\n      id: 1,\n    },\n  },\n  submit: {\n    url: "\u002Fadd.json",\n    method: "post"\n  },\n},',
+    documentation: {
+      value: `
+属性名 | 描述 | 类型
+---|:--:|---:
+fields | 表单配置 | -
+title | 弹框标题 | -
+mode | 表单模式 | -
+remoteValues | 远程表单值的请求配置 | -
+submit | 提交表单数据的请求配置 | -
+`,
+    },
+  },
+  {
+    type: 'action',
+    label: 'drawerform',
+    detail: '弹框表单插件',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText:
+      '{\n  type: "drawerform",\n  title: "Title",\n  mode: "edit",\n  fields: [\n    {\n      name: "input",\n      label: "input",\n      field: {\n        type: "input",\n        props: {\n          placeholder: "请输入"\n        }\n      },\n      rules: [\n        {\n          required: true,\n          message: "请输入"\n        }\n      ]\n    }\n  ],\n  remoteValues: {\n    url: "\u002Fdetail.json",\n    method: "post",\n    params: {\n      id: 1,\n    },\n  },\n  submit: {\n    url: "\u002Fadd.json",\n    method: "post"\n  },\n},',
+    documentation: {
+      value: `
+属性名 | 描述 | 类型
+---|:--:|---:
+fields | 表单配置 | -
+title | 抽屉标题 | -
+mode | 表单模式 | -
+remoteValues | 远程表单值的请求配置 | -
+submit | 提交表单数据的请求配置 | -
+`,
+    },
+  },
+  {
+    type: 'action',
+    label: 'refreshtable',
+    detail: '刷新表格',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText: "'refreshtable'",
+    documentation: {
+      value: ``,
+    },
+  },
+  {
+    type: 'action',
+    label: 'resettable',
+    detail: '重置表格',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText: "'resettable'",
+    documentation: {
+      value: ``,
+    },
+  },
+  {
+    type: 'action',
+    label: 'route',
+    detail: '路由跳转',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText:
+      '{\n  type: "route",\n  path: "${1:\u002Fcreate}",\n  params: {\n    "${2:mode}": "${3:create}"\n  },\n},',
+    documentation: {
+      value: ``,
+    },
+  },
+];

package/src/components/Business/JsonQueryTable/jsonEditor/suggestions/dependency.js

@@ -0,0 +1,22 @@
+export default monaco => [
+  {
+    type: 'dependency',
+    label: 'dependency',
+    detail: '级联插件',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText:
+      'dependency: {\n  ${1:value}: {\n    relates: ["${2:relateName}"],\n    inputs: [["${3:relateValue}"]],\n    output: ${4:"outputValue"},\n    ignores: [[${5:"ignoreValue"}]],\n    defaultOutput: ${6:"value"},\n  },\n},',
+    documentation: {
+      value: `### 表单级联配置 [文档](https://doc.sula.now.sh/zh/plugin/form-dependency.html)
+  #### 可选value visible source disabled 配置
+  * **relates** 受哪项表单影响
+  * **inputs** relates数组对应的表单值
+  * **output** 匹配到inputs时 输出值
+  * **ignores** relates忽略的值
+  * **defaultOutput** 匹配ignores或未匹配到inputs时，输出值
+  `,
+    },
+  },
+];

package/src/components/Business/JsonQueryTable/jsonEditor/suggestions/index.js

@@ -0,0 +1,21 @@
+import dependency from './dependency';
+import actions from './actions';
+import request from './request';
+
+function registerSuggestions(monaco) {
+  monaco.languages.registerCompletionItemProvider('javascript', {
+    // @ts-ignore
+    provideCompletionItems(model, position) {
+      // 其他提示
+      return {
+        suggestions: [
+          ...dependency(monaco),
+          ...actions(monaco),
+          ...request(monaco),
+        ],
+      };
+    },
+  });
+}
+
+export default registerSuggestions;

package/src/components/Business/JsonQueryTable/jsonEditor/suggestions/request.js

@@ -0,0 +1,65 @@
+export default monaco => [
+  {
+    type: 'fetch',
+    label: 'remoteDataSource',
+    detail: '远程表单值',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText:
+      "remoteDataSource: {\n  url: '${1:\u002Fsula.json}',\n  method: '${2:GET}',\n  params: {\n    '${3:name}': '${4:sula}'\n  },\n  convertParams({ params }) {\n    return params;\n  },\n  converter({ data }) {\n    return data;\n  },\n},",
+    documentation: {
+      value: `
+属性名 | 描述 | 类型
+---|:--:|---:
+url | 请求地址 |string
+method| 请求方法 |'post' 'get'
+params | 请求参数 | object
+convertParams | 请求参数转换方法 | (ctx, config) => params
+converter | 返回参数转换方法 | (ctx, config) => any
+`,
+    },
+  },
+  {
+    type: 'fetch',
+    label: 'remoteSource',
+    detail: '远程数据源',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText:
+      "remoteSource: {\n  url: '${1:\u002Fsula.json}',\n  method: '${2:GET}',\n  params: {\n    '${3:name}': '${4:sula}'\n  },\n  convertParams({ params }) {\n    return params\n  },\n  converter({ data }) {\n    return data;\n  },\n},",
+    documentation: {
+      value: `
+属性名 | 描述 | 类型
+---|:--:|---:
+url | 请求地址 |string
+method| 请求方法 |'post' 'get'
+params | 请求参数 | object
+convertParams | 请求参数转换方法 | (ctx, config) => params
+converter | 返回参数转换方法 | (ctx, config) => any
+`,
+    },
+  },
+  {
+    type: 'fetch',
+    label: 'remoteValues',
+    detail: '远程数据值',
+    kind: monaco.languages.CompletionItemKind.Property,
+    insertTextRules:
+      monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    insertText:
+      "remoteValues: {\n  url: '${1:\u002Fsula.json}',\n  method: '${2:GET}',\n  params: {\n    '${3:name}': '${4:sula}'\n  },\n  convertParams({ params }) {\n    return params\n  },\n  converter({ data }) {\n    return data;\n  },\n},",
+    documentation: {
+      value: `
+属性名 | 描述 | 类型
+---|:--:|---:
+url | 请求地址 |string
+method| 请求方法 |'post' 'get'
+params | 请求参数 | object
+convertParams | 请求参数转换方法 | (ctx, config) => params
+converter | 返回参数转换方法 | (ctx, config) => any
+`,
+    },
+  },
+];