C7N 开发注意事项

1.DataSet 中定义的submit 方法，只有当数据变化时才会被触发

2.当 type='date' 时，日期格式会默认添加 HH:mm:ss

3.给 form 添加 spin 效果，外层 包裹Spin，绑定 form的 ds

例如：

import { Spin } from 'choerodon-ui/pro';
...
return (
  <Spin dataSet={detailDs}>
    <Form dataSet={detailDs} columns={3}>
      <Output name="ruleCode" />
      <IntlField name="ruleName" disabled={isTenant && !custom} />
      <Output name="tenantName" hidden={isTenant} />
      <TextArea name="description" newLine colSpan={2} disabled={isTenant && !custom} />
    </Form>
  </Spin>
);

4.form 表单数据处理

例如：

ds

import { FieldProps } from 'choerodon-ui/pro/lib/data-set/Field';
import { DataSetSelection, FieldType } from 'choerodon-ui/pro/lib/data-set/enum';

const createFormDS: () => DataSetProps = () => ({
  selection: DataSetSelection.single,
  autoQuery: false,
  fields: [
    {
      name: 'username',
      type: FieldType.string,
      label: intl.get('hzero.demo.model.username').d('用户名'),
      required: true,
    },
    isTenant && {
      name: 'email',
      type: FieldType.email,
      label: intl.get('hzero.demo.model.email').d('邮箱'),
    },
    {
      name: 'password',
      type: FieldType.string,
      label: intl.get('hzero.demo.model.password').d('密码'),
      maxLength: 110,
    },
  ].filter(Boolean) as FieldProps[],
  transport: {
    submit: ({ data }): AxiosRequestConfig => {
      const { _status, __id, ...otherData } = data[0];
      return {
        url: 'XXX',
        method: 'POST',
        params: {},
        data: otherData,
      };
    },
  },
});

tsx

import { DataSet, Form, TextField, EmailField, Password } from 'choerodon-ui/pro';
import createFormDs = useMemo(() => new DataSet(createFormDS()), []);

return (
  <Form dataSet={createFormDs} columns={2}>
    <TextField name="username" />
    <EmailField name="email" />
    <Password name="password" />
  </Form>
);

5.table 表格数据处理

例如：

ds

const demoListDS: () => DataSetProps = () => ({
  autoQuery: false,
  autoQueryAfterSubmit: false,
  selection: DataSetSelection.multiple,
  queryFields: [
    {
      label: intl.get('hzero.demo.model.username').d('用户名'),
      name: 'username',
      type: FieldType.string,
    },
    {
      label: intl.get('hzero.demo.model.meaning').d('含义'),
      name: 'meaning',
      type: FieldType.string,
    },
  ],
  fields: [
    {
      label: intl.get('hzero.demo.model.username').d('用户名'),
      name: 'username',
      type: FieldType.string,
    },
    {
      label: intl.get('hzero.demo.model.meaning').d('含义'),
      name: 'meaning',
      type: FieldType.intl,
    },
    ...
  ],
  transport: {
    read: ({ data = {}, params = {} }): AxiosRequestConfig => {
      return {
        url: 'XXX',
        method: 'GET',
        data: { ...data, ...params },
      };
    },
  },
});

tsx

import { ColumnProps } from 'choerodon-ui/pro/lib/table/Column';
import { TableQueryBarType } from 'choerodon-ui/pro/lib/table/enum';
...
const columns: ColumnProps[] = useMemo(
  () => [
    { name: 'username' },
    { name: 'meaning' },
    { name: 'tag' },
    { name: 'description' },
  ],
  []
);
...
return (
  <Table
    dataSet={demoListDs}
    columns={columns}
    queryBar={TableQueryBarType.filterBar}
    queryBarProps={{
      fuzzyQueryPlaceholder: '关键字1,关键字2',
    }}
    buttons={[
      <Button disabled={!demoListDs.selected.length}>
        {intl.get('hzero.common.button.delete').d('删除')}
      </Button>,
      <Button>
        {intl.get('hzero.common.button.create').d('新建')}
      </Button>,
    ]}
  />
);

6.tree 树结构数据处理 -- 扁平化(数据格式)

7.DataSet table 获取选中某项值，全选状态

8.如何监听 table select 变化

events: {
  select: () => handleSelect(),
  unSelect: () => handleSelect(),
  selectAll: ({ dataSet }) => handleSelect(dataSet.selected),
  unSelectAll: () => handleSelect([]),
},

9.DataSet updated 获取所有变更的数据
10.给 Lov 组件传参的方式

// 方式一
ds.current?.getField('userLov')?.setLovPara('code', 'XXX');
// 方式二
ds.current?.set('code', 'XXX');
...
computedProps: {
  lovPara: ({ record }) => ({
    code: record.get('code'),
  }),
},

11.如何判断 dataSet 里面的值是否修改？dirty

// dirty = false 数据无变动
if (!listDs.dirty) resolve(true);

12.Lov 的 name 对应的 type 为 Object

13.dataset未改变情况下触发 validate 校验

record.set('timestamp', new Date().valueOf());

14.Table 选中状态 复显

15.设置 table 不要 模糊查询框 和 tbody

<Form dataSet={paramsFormDs}>
  <Table.DynamicFilterBar
    key="toolbar"
    fuzzyQuery={false}
    queryFieldsLimit={3}
    dataSet={tableDs}
    queryDataSet={tableDs.queryDataSet}
    buttons={[]}
    queryFields={fields}
    onReset={() => paramsFormDs.reset()}
  />
</Form>

16.去除 Table 的复选框/单选框 selection

selection: false

17.dataSet Form 默认值失效，通过 ruleDetailDs.create({}, 0); 实现

18.table 动态设置 queryField

19.手动清除Lov 缓存

import { Stores } from 'choerodon-ui/pro';

// 重置Lov -- 场景：修改值集视图的内容,预览时需要清除缓存
const handleResetLov = (code) => {
  Stores.LovCodeStore.clearCache([code]);
};

20.在 Stores 上如何获取值

21.判断数据是否修改

localDataSet.current.status = "sync";
localDataSet.current.pristineData = replacedObj;

22.form 表单联动 disable cascadeMap 级联
23.TextField 禁止中文输入

pattern: CODE_UPPER,
format: 'uppercase',

24.设置table 不要 模糊查询框

queryBarProps={{
  fuzzyQuery: false,
}}

25.复显table 的 selected 状态

tableDataSet.query().then(() => {
  if (list?.length) {
    list.map((val) => {
      tableDataSet.map((v) => {
        if (val.code === v.get('code')) {
          // 方式一
          tableDataSet.select(v);
          // eslint-disable-next-line
          // 方式二
          // v.isSelected = true;
        }
        return v;
      });
      return val;
    });
  }
});

26.动态设置 lovQueryAxiosConfig

lovQueryAxiosConfig: () => {
  return {
    url: 'XXX',
    method: 'GET',
    transformResponse: (data, headers) => {
      const newData = [];
      const getNewData = (collections = []) => {
        ...
      };
      getNewData(JSON.parse(data));
      return {
        content: newData,
        headers,
      };
    },
  };
},

27.自定义 Lov 与 C7N Lov 对比
Lov -- queryParams
C7NLov -- lovPara

Lov -- lovCode/lovPara -- c7nUiConfig -- loadConfig --
进入页面之前 会调用 info 接口

28.openTab -- title 规范,需要放在 hzero.common 里面

hzero.common.title.demo

openTab({
  key: 'XXX/path',
  title: 'hzero.common.title.demo',
  closable: true,
})

29. 手动创建 Record

import Record from 'choerodon-ui/pro/lib/data-set/Record';
emailPropertyDs.push(new Record({...extraData, ...emailPropertyDs?.current?.toData()}));

30.两个 ds 绑定在一起

const serverListDs = useMemo(() => new DataSet(serverListDS()), []);
const sendDetailDs = useMemo(() =>
  new DataSet({
    ...sendDetailDS(),
    children: {
      serverList: serverListDs,
    },
  })
, []);

31.多语言规范
1、在ds里定义多语言编码：模块简称.页面简称.model.字段编码，例如：hmsg.notice.model.receiverType
2、页面中使用多语言编码：模块简称.页面简称.页面类型.描述，例如：hmsg.notice.list.title
32.Modal 中获取 父级变化的数据？
(1)update
33.Form

columns -- 分几列
colSpan -- 占几列
newLine -- 自成一行

34.NumberField 取消千分位

<NumberField name="paperWidth" numberGrouping={false} />

35.Modal 在子级调用 handleOk 方法

modal.handleOk(XXX)

36.Form 自定义验证

{
  label: intl.get('XXX').d('XXX'),
  name: 'scope',
  type: FieldType.string,
  validator: (value, name, record) => {
    if (!value) return true;
    const reg = new RegExp(/^[A-Za-z]+$/);
    if (!reg.test(value)) {
      return intl.get('XXX').d('只能包含英文字母');
    } else if (record?.get(name)?.length > 6) {
      return intl.get('XXX').d('最多只能输入6个');
    }
    return true;
  },
},

37.修改控件的显示内容 renderer / optionRenderer

<Select
  name="timeFormat"
  renderer={({ value }) => moment().format(value)}
  optionRenderer={({ value }) => moment().format(value)}
/>

38.Form help

import { ShowHelp } from 'choerodon-ui/pro/lib/field/enum';
<SelectBox
  name="status"
  help={intl.get('XXX').d('XXX')}
  showHelp={ShowHelp.label}
/>

.