表头字段自定义渲染

表头字段自定义渲染

作者:


表单中配置masterRender可以实现表头字段的自定义渲染,但是外键字段不能通过masterRender处理。

在MasterRendererController.tsx中有一段代码

const after: IMasterFieldRender[] = [new LinkRender(), new ForeignKeyLinkRender(), new CommonFieldRender()];

外键字段会走到ForeignKeyLinkRender组件,而masterRender只在CommonFieldRender中才有使用。

protected getDisplayOptions(): DisplayOptions {

  return {
    masterRender: {
      ['project']: props => {
        const LinkDiv = styled.div`
          height: 100%;
          display: flex;
          align-items: center;
          padding-left: 8px;

          cursor: pointer;
          color: var(--primary-500);
          text-decoration: underline;
          text-underline-position: under;
        `

        return (
          <MSTFormElement
            label={props.template.title}
            path={'project'}
            colspan={1}
            disableError={true}
            disabled={true}
            isRequired={false}
            labelResolver={value => value['project']} // value 对应的 path={...}中的值
            contentRenderer={() => {
              const data = props.form.value.project
              return (
                <LinkDiv>
                  <span onClick={async () => {
                    const hash = appRouterHashManager.generateHash(EN_Project, PageModeEnum.Form, {
                      mode: BizFormModeEnum.View,
                      copyId: data.id,
                      id: data.id,
                      data: data,
                      billTypeId: this.formValue.billType.id,
                      queryStringParams: {
                        [F_ProjectSchedule_isTemplateBill]: this.isTemplateBill,
                      },
                    });
                    proxyHistory.push(hash)
                  }}>{data.code}</span>
                </LinkDiv>
              )
            }}
          />
        );
      },
    }
  }
}