拓展实践 - 2

[aspirantzhang]

本节学习手册：https://www.yuque.com/aspirantzhang/antdprov5/fp081n

本节代码
fc68d76?branch=fc68d766d1e08316783d9192fd8677dfa33901ff&diff=split

请发与本节课有关的讨论。

[SaxonWan]

张老师好，
我的实现方法为，添加modalFooterLayout函数如下：

  const modalFooterLayout = () => {
    return (
      <Space>
        <Tag className={styles.tagUpdateTime}>
          update_time:  {moment(init?.data?.dataSource?.update_time).format('YYYY-MM-DD HH:mm:ss')}
        </Tag>
        {ActionBuilder(init.data?.layout?.actions[0]?.data, actionHandler, request.loading)}
      </Space>
    )
  };

其中，tagUpdateTime设置的Stype为font-size:15px
最终呈现效果如下：

最后，感谢您精彩的课程
一切祝好！
Saxon

[lensv]

老师，问一个课程的外的问题，新版的页面中的水印怎么去掉呢

[aspirantzhang]

有同学分享了方法：
#36

[lensv]

好的，谢谢老师！

[mavenge]

老师，我直接把tag标签放到modal的footer里渲染了

footer={[
  <Tag key="id" className="modal-footer-tags">
    Update Time: {moment(init?.data?.dataSource?.update_time).format('YYYY-MM-DD HH:ss:mm')}
  </Tag>,
  ActionsBuilder(init?.data?.layout?.actions[0]?.data, actionHandler, request.loading),
]}

样式是这样的，感觉很方便

.ant-modal-footer {
  .modal-footer-tags {
    position: relative;
    top: 5px;
    float: left;
  }
}

[aspirantzhang]

这样也好，用style那种方式导入进来主要是怕重名和多余的样式问题。

[ythsfzjk]

请问老师和同学们，Update Time 字段不在formBuiler中显示在哪里处理的？

[ythsfzjk]

在 FormBuilder 里 case 'datetime': if (field.key !== 'update_time')

[yangzi0210]

Modal.tsx

<Tag className={styles.formUpdateTime} color="geekblue">
              Update Time: &nbsp;
              {dayjs(form.getFieldValue('update_time')).format(
                'YYYY-MM-DD HH:mm:ss',
              )}
            </Tag>

Formbuilder.tsx

 case 'datetime':
        return field.key === 'update_time' ? (
          <></>
        ) : (
          <Form.Item label={field.title} name={field.key} key={field.key}>
            <DatePicker showTime disabled={field.disabled} />
          </Form.Item>
        );

index.less

.formUpdateTime {
  padding-top: 4px;
  font-size: 0.8rem;
  position: absolute;
  bottom: 20px;
  height: 32px;
}