【后台管理系统】—— Ant Design Pro 页面相关（三）

一、卡片Card分类

• 与普通卡片使用区别：底部按钮及内容样式

  <Card
          hoverable
          bodyStyle={{ paddingBottom: 20 }}
          actions={[          // 卡片操作组，位置在卡片底部
             <Button size='large' onClick={() => this.showEditModal(item)}>修改</Button>,
              <Popconfirm title="是否要删除此孵化企业？" onConfirm={() => this.deleteItem(item)}>
                   <Button type='danger' size='large'>删除</Button>
               </Popconfirm>
          ]}
   >
          <Card.Meta avatar={<Avatar size="small" src={`${setFileHost() + item.comLogo}`} />} title={item.comName} />   //头像、类名、描述等，位置在卡片左侧
              <div className={styles.cardItemContent}>
              <CardInfo
                        productCount={item.productCount}
               />
               </div>
  </Card>

• 动态添加卡片分类：List的dataSource数组第一个位置为空串，遍历时，遇到item渲染卡片，否则ListItem中包裹自定义按钮

  <List
         rowKey="id"
         loading={loading}
         grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
         dataSource={['', ...list]}    // 构建第一个位置为空串的list数组
         renderItem={item =>
                item ? (
                  <List.Item key={item.id}>
                    <Card hoverable className={styles.card}
                          actions={[ <a onClick={() => this.editCategory(item)}>修改</a>,
                            <Popconfirm title="是否要删除此分类？" onConfirm={() => this.deleteCategory(item)}>
                              <a style={{color: 'red'}}>删除</a>
                            </Popconfirm>
                          ]}>
                      <Card.Meta
                        avatar={<img alt="" className={styles.cardAvatar} src={`${setFileHost() + item.categoryLogo }`} />}
                        title={<a style={{ fontWeight: 600 }}>{item.categoryName}</a>}
                        description={
                          <Ellipsis className={styles.item} lines={3}>
                            {`共 ${item.productCount}个商品`}
                          </Ellipsis>
                        }
                      />
                    </Card>
                  </List.Item>
                ) : (
                  <List.Item>       // 空串位置 渲染按钮
                    <Button type="dashed" className={styles.newButton} onClick={() => this.addCategory()}>
                      <Icon type="plus" /> 新增分类
                    </Button>
                  </List.Item>
                )
  />
  

　　

二、分布表单

• <Step/>步骤条组件的使用，current指定当前步骤，从 0 开始记数

  export default class StepForm extends PureComponent {
    getCurrentStep() {
      const { location } = this.props;
      const { pathname } = location;
      const pathList = pathname.split('/');
      switch (pathList[pathList.length - 1]) {
        case 'info':
          return 0;
        case 'confirm':
          return 1;
        case 'result':
          return 2;
        default:
          return 0;
      }
    }
  
    render() {
      const { location, children } = this.props;
  
      return (
        <PageHeaderWrapper
          title="分步表单"
          tabActiveKey={location.pathname}
          content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
        >
          <Card bordered={false}>
            <Fragment>
              <Steps current={this.getCurrentStep()} className={styles.steps}>
                <Step title="填写转账信息" />
                <Step title="确认转账信息" />
                <Step title="完成" />
              </Steps>
              {children}    // 可直接写为三个状态对应的三个表单子组件
            </Fragment>
          </Card>
        </PageHeaderWrapper>
      );
    }
  }
  

  有个疑问：框架自带Mock页面Form->StepForm->index.js、step1.js、step2.js、step3.js实现切换表单的方式还没弄明白。。。　

---

注：转载请注明出处