后管系统CRM线索管理

在开发CRM线索管理模块的时候, 遇到的几个问题记录一下:

问题1:

从线索列表可以进入新增,编辑,和复制线索页面,这几个页面都是公用一个页面.表单页面又拆分了基本信息表单组件和数据配置信息表单组件.

从列表页面进入新增,编辑/复制页面,有传入参数区分当前页面是编辑/复制操作的.然后在页面内部进行差别处理.

新增/编辑/复制页面,有些下拉选项的数据需要调用接口获取数据,为了保证和编辑,复制页面统一.我们在填充下拉选项数据和表单信息回填的时候,要确保接口数据请求完成后,然后在进行设置值,否则可能会导致赋值不对.

使用Promise.all方法包住页面的一些异步请求方法,然后在.then里面去进行拿到返回的值进行设置下拉选项和表单值回填.

另外有一点就是对于编辑/复制操作,我们需要调用详情接口,请求接口拿到返回数据后,传递到子组件,然后组件初始化的时候表单赋值.新增操作的时候就不需要调用详情接口啦.这里也需要单独的判断一下.

对于下拉框的赋值,我们既需要整个list的数据,同时也需要当前选中项的id值,当前的id值在list中能找到,才能进行赋上对应的值.

问题2:

在dva+umi项目中,我们可以在一个组件的模板里面,调用另外一个model中的异步方法.例如:我新增数据成功啦.需要跳转到列表页面更新列表数据.

问题3:

每个Form.Item里面只能有一个子元素,在调试选择客群那个弹框的时候,由于自己把那个选择的按钮写在了Form.Item里面,然后设置客群Id一直设置不上去.还郁闷了好久,没找到具体原因.最后同事帮忙找到了原因,是由于写在了这个里面导致的.

问题4:

页面中调用Model中的异步方法,需要加上Model中的命名空间,否则不生效.

问题5:

在antd的form表单中,onValuesChange方法用代码触发字段值的改变不会触发这个方法.

一个页面有多个表单组件:

在开发线索配置管理页面的时候,一个页面进行拆分了多个子组件,每个子组件均为表单组件,也就是一个页面有多个表单组件要进行处理,我们可以将form传递到子组件,子组件单独进行表单控制.父组件拿到表单对象的值,(多个表单的话,拿到表单对象的值进行合并),去提交.

    const [form1] = Form.useForm();
    const [form2] = Form.useForm();

    let fval1 = form1.getFieldsValue();
    let fval2 = form2.getFieldsValue();

    <BasicForm
        form={form1}
        targetList={targetList}
        duplicatedList={duplicatedList}
        businessType={businessType}
        detailInfo={detailObj}
        setSelectVal={setSelectVal}
        id={id}
        optType={optType}
      >
    </BasicForm>

    <DataconfigForm
          form={form2}
         ...
       >
    </DataconfigForm>

合并两个数组中的对象:

基于defaults创建新的对象数组，其中每个元素都是将默认值与actuals中找到的相应实际数据合并的结果，基于匹配的platform.

做A/B分流测试时候遇到过相关的问题.

const defaults = [
  {configurationOption: 'X provisioning', platform: 'X', value: true}, 
  {configurationOption: 'Y provisioning', platform: 'Y', value: true}, 
  {configurationOption: 'Z provisioning', platform: 'Z', value: true}];

const actuals = [
  {platform: 'X', value: false}, 
  {platform: 'Y', value: true}];

var result = defaults.map(deflt => Object.assign(
  {}, 
  deflt, 
  actuals.find(actual => actual.platform === deflt.platform)));

console.log(result);