前端代码所有涉及 .html文件修改的，告知下郑建超

不影响功能和美观的情况下，页面尽量紧凑，不出现滚动条

搜索条件 少于九个 三列一行

image

搜索条件 多于九个四列一行

image

具体使用方法参考前端项目test文件夹

//调整列数 spanCol 为6 是四行 
  <Row>
<Col span={6}></Col>
<Col span={6}></Col>
<Col span={6}></Col>
<Col span={6}></Col>
  </Row>
//调整列数 spanCol 为8 是三行 中间放
  <Row>
<Col span={8></Col>
<Col span={8}></Col>
<Col span={8}></Col>
  </Row>

这个调整输入框label和输入框的比例

//from表单样式  默认的比例 label8 输入框占16
const  formItemLayout = {
    labelCol: {
        span: 8
    },
    wrapperCol: {
        span: 16
    },
};
//用法
<FormItem {...formItemLayout} label='账套'>
{getFieldDecorator('kZtbm', {initialValue: this.state.ztCode})(
 <Select placeholder="请选择账套编码">{this.getOwnZtList()}</Select>) }
 </FormItem>

所有的代码错误提示都使用antd 官方的提示方式

message.success('This is a message of success');

message.error('This is a message of error');

 message.warning('This is message of warning');

表头显示隐藏

进页面不查询数据的不显示表头

//添加一个父级div id自定义
<div id="table" style={{ display: "none" }}>
</div>

// 显示table的js
            document.getElementById("table").style.display = "block";
// 隐藏table的js
            document.getElementById("table").style.display = "none";

条件满足时显示表格

校验

//详细用法参见项目checkDemo文件夹
rules: [{required: true, whitespace: true, message: '请填写密码'} ]

用法截图

校验.png

整体样式

留白.png

四周留1rem

行与行之间留1rem

//上下左右，哪边需要加哪边
{
margin-top: 1rem;
margin-bottom: 1rem;
margin-left: 1rem;
margin-right: 1rem; 
}
//四周都要直接
{
margin：1rem；
}

按钮长度不一的问题

//按钮长短不一的情况下，长度不够的中间添加空格统一撑开到四个中文字符长度，字数较多的先不管了，还是觉得不协调的再想办法
  ==   == en空格 
（半个中文宽度）
  ==   == em空格 
（一个中文宽度）
  == 四分之一em空格 
（四分之一中文宽度）

清空按钮统一改为重置

按钮偏置统一居右

查询重置按钮

//放按钮的 Col所占比例视情况自定
              <Row>
                <Col span={24} />
              
                  <Button
                    type="primary"
                    htmlType="submit"
className={styles.buttonStyle}
                    className={"login-form-button"}
                  >
                    查询
                  </Button>
                  <Button
                    onClick={this.handleFilterClear}
                    className={styles.buttonStyle}
                    type="ghost"
                  >
                    重置
                  </Button>
                </Col>
              </Row>

//按钮间距2rem
.buttonStyle{
    float: right;
    margin-left:2rem;
}
//浮动居右后按钮顺序会调换，要反向放置按钮

table中文字居左 数字（仅限金额）居右 表头标题居中

.td__center{
    text-align:center;
}
.td__left{
    text-align:left;
}
.td__right{
    text-align:right;
}
th.td__center{
    text-align: center !important;
}

th.td__left{
    text-align: center !important;
}

th.td__right{
    text-align: center !important;
}

table属性中添加,缩小行间距，默认间距太大

//中尺寸
size="middle"
//小尺寸，small下表头背景色会掉，自行添加
size=“small”