2023/05/05-笔记

数字字典

数字字典就是一张表！
功能由两张表组成，字典类型表、字典数据表

 

借用某大佬写的文章便于自己复习：

场景分析：

  关于一些表单的数据，比如性别、人员、角色、部门等等，这些数据都不是在前端写死的，而是在后端以数字字典的方式存储的，在数据库中存储的是键值，而不是汉字，当需要修改某些字段时，直接在后台管理系统中进行修改就可以了，不需要从新开发部署

功能组成：字典类型表、字典数据表

字典类型表： 字典数据表： 表的关联：

前端只需要查询表的类型，便可以查询到对应的数据：

Qs库

Qs是npm下的一个库。内部有stringify、parse两个方法，
qs.stringify() 方法可以将一个json对象直接转为以？和&符连接的形式，
qs.parse() 将URL解析成对象的形式。

• 源码如下：*

export = QueryString;
export as namespace qs;

declare namespace QueryString {
    type defaultEncoder = (str: any, defaultEncoder?: any, charset?: string) => string;
    type defaultDecoder = (str: string, decoder?: any, charset?: string) => string;

    interface IStringifyOptions {
        delimiter?: string | undefined;
        strictNullHandling?: boolean | undefined;
        skipNulls?: boolean | undefined;
        encode?: boolean | undefined;
        encoder?: ((str: any, defaultEncoder: defaultEncoder, charset: string, type: 'key' | 'value') => string) | undefined;
        filter?: Array<string | number> | ((prefix: string, value: any) => any) | undefined;
        arrayFormat?: 'indices' | 'brackets' | 'repeat' | 'comma' | undefined;
        indices?: boolean | undefined;
        sort?: ((a: any, b: any) => number) | undefined;
        serializeDate?: ((d: Date) => string) | undefined;
        format?: 'RFC1738' | 'RFC3986' | undefined;
        encodeValuesOnly?: boolean | undefined;
        addQueryPrefix?: boolean | undefined;
        allowDots?: boolean | undefined;
        charset?: 'utf-8' | 'iso-8859-1' | undefined;
        charsetSentinel?: boolean | undefined;
    }

    interface IParseOptions {
        comma?: boolean | undefined;
        delimiter?: string | RegExp | undefined;
        depth?: number | false | undefined;
        decoder?: ((str: string, defaultDecoder: defaultDecoder, charset: string, type: 'key' | 'value') => any) | undefined;
        arrayLimit?: number | undefined;
        parseArrays?: boolean | undefined;
        allowDots?: boolean | undefined;
        plainObjects?: boolean | undefined;
        allowPrototypes?: boolean | undefined;
        parameterLimit?: number | undefined;
        strictNullHandling?: boolean | undefined;
        ignoreQueryPrefix?: boolean | undefined;
        charset?: 'utf-8' | 'iso-8859-1' | undefined;
        charsetSentinel?: boolean | undefined;
        interpretNumericEntities?: boolean | undefined;
    }

    interface ParsedQs { [key: string]: undefined | string | string[] | ParsedQs | ParsedQs[] }

    function stringify(obj: any, options?: IStringifyOptions): string;
    function parse(str: string, options?: IParseOptions & { decoder?: never | undefined }): ParsedQs;
    function parse(str: string | Record<string, string>, options?: IParseOptions): { [key: string]: unknown };
}

qs.stringify()

 import Qs from 'qs';
...
 const obj = {
    method: 'query_sql_dataset_data',

    projectId: '82',

    appToken: '7d34e-5343-1e23-84b1-cd6a324',

    datasetId: ' 100010',
  };
 console.log('stringify', Qs.stringify(obj));
 // stringify method=query_sql_dataset_data&projectId=82&appToken=7d34e-5343-1e23-84b1-cd6a324&datasetId=%20100010

qs.parse()

 import Qs from 'qs';
...
 const url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
 console.log('parse()', Qs.parse(url));

console.group(); and console.groupEnd();

控制台消息组，开头使用console.group();后面的console.log会在同一组内，使用console.groupEnd();来结束该消息组。

效果展示如下：

AntD UI库之Form

官方文档搬迁：

type Form.useForm = (): [FormInstance]

创建 Form 实例，用于管理所有数据状态。

Form.useFormInstance

type Form.useFormInstance = (): FormInstance

4.20.0 新增，获取当前上下文正在使用的 Form 实例，常见于封装子组件消费无需透传 Form 实例：

const Sub = () => {
  const form = Form.useFormInstance();
  
  return <Button onClick={() => form.setFieldsValue({})} />;
};

export default () => {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Sub />
    </Form>
  );
};

setFieldValue

设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）

// (name: [NamePath], value: any) => void
form.setFieldValue('assetDetail', assetRows);

shouldUpdate

Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。大部分场景下，你只需要编写代码或者与 dependencies 属性配合校验即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 shouldUpdate 修改 Form.Item 的更新逻辑。

当 shouldUpdate 为 true 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助：

<Form.Item shouldUpdate>
  {() => {
    return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
  }}
</Form.Item>

你可以参考示例查看具体使用场景。

当 shouldUpdate 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：

<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>
  {() => {
    return (
      <Form.Item name="other">
        <Input />
      </Form.Item>
    );
  }}
</Form.Item>

validateFields

触发表单验证
(nameList?: [NamePath][]) => Promise

validateFields 返回示例

validateFields()
  .then((values) => {
    /*
  values:
    {
      username: 'username',
      password: 'password',
    }
  */
  })
  .catch((errorInfo) => {
    /*
    errorInfo:
      {
        values: {
          username: 'username',
          password: 'password',
        },
        errorFields: [
          { name: ['password'], errors: ['Please input your Password!'] },
        ],
        outOfDate: false,
      }
    */
  });