/** * 徐立 * 2019年9月29日 * 该组件为按钮设计汇总,通过传入get值调取对应组件 * btn+数字,为对应按钮方法,从左到右计算 * 以下为样式类名说明 * .btn_margin 按钮右边距 * .btn 按钮通用样式 * .btn_no 不通过专属样式 * .btn_reject 驳回专属样式 * 以下为自定义按钮数组说明 * btnList 为传入数组,具体参数参考为以下 * [ * { * type:primary, // 按钮基础样式 参考antd * click:()=>{}, // 点击事件 * style:{}, // 自定义按钮样式,传入为对象 * content: '', // 自定义按钮内容 * margin: boolean, // 是否使用默认margin * } * ] */ import React from 'react'; import { Button } from 'antd'; import Item from 'antd-mobile/lib/popover/Item'; import styles from './styles.less'; export default function pagesBtn(props) { const { get, btnOne, disabled, // 按钮控制状态 btnTwo, btnThree, btnList, // 自定义按钮时使用,传入数组进行按钮组装 style, // 自定义单个按钮样式 text, // 自定义按钮文本 isSumbitLoading, // 提交状态 } = props; switch (get) { /** * 常用于发起流程底部按钮 */ case '1': return ( <div className={styles.btn_page}> <Button shape="round" className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')} disabled={disabled} onClick={btnOne} loading={isSumbitLoading}> 暂存草稿 </Button> <Button shape="round" loading={isSumbitLoading} className={styles.btn} onClick={btnTwo} disabled={disabled} type="primary"> 提交 </Button> </div> ); /** * 常用于审核用底部按钮 */ case '2': return ( <div className={styles.btn_page}> <Button shape="round" disabled={disabled} className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')} onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}> 不通过 </Button> <Button shape="round" disabled={disabled} loading={isSumbitLoading && isSumbitLoading} className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ')} onClick={btnTwo}> 驳回 </Button> <Button shape="round" disabled={disabled} className={styles.btn} type="primary" loading={isSumbitLoading && isSumbitLoading} onClick={btnThree}> 通过 </Button> </div> ); /** * 查询类底部按钮 */ case '3': return ( <div className={styles.btn_page}> <Button shape="round" disabled={disabled} className={styles.btn} type="primary" onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}> 查询 </Button> </div> ); /** * 模态框常用底部按钮 */ case '4': return ( <div className={styles.btn_page}> <Button shape="round" disabled={disabled} className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')} onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}> 取消 </Button> <Button shape="round" disabled={disabled} className={styles.btn} type="primary" onClick={btnTwo} loading={isSumbitLoading && isSumbitLoading}> 确定 </Button> </div> ); /** * 常用于审核底部按钮 驳回 通过 */ case '5': return ( <div className={styles.btn_page}> <Button shape="round" disabled={disabled} className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ')} onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}> 驳回 </Button> <Button shape="round" disabled={disabled} className={styles.btn} loading={isSumbitLoading && isSumbitLoading} type="primary" onClick={btnTwo}> 通过 </Button> </div> ); /** * 常用于审核底部按钮 驳回 通过 */ case '6': return ( <div className={styles.btn_page}> <Button shape="round" disabled={disabled} className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')} onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}> 拒绝 </Button> <Button shape="round" disabled={disabled} className={styles.btn} loading={isSumbitLoading && isSumbitLoading} type="primary" onClick={btnTwo}> 通过 </Button> </div> ); /** * 自定义按钮数量 样式 以及按钮内容 */ case '7': return ( <div className={styles.btn_page}> {btnList.length > 0 ? btnList.map((item, index) => { return ( <Button shape="round" disabled={disabled} key={index} type={Item.type} style={item.style} onClick={item.click} loading={isSumbitLoading && isSumbitLoading} className={[`${item.margin ? styles.btn_margin : ''}`, `${styles.btn}`].join( ' ', )}> {item.content} </Button> ); }) : ''} </div> ); /** * 自定义单个组件按钮 */ case '8': return ( <Button shape="round" type={style === 'deafalut' ? 'primary' : ''} className={style !== 'deafalut' ? style : ''} style={{ minHeight: 32, minWidth: 90, marginLeft: style === 'deafalut' ? 16 : '' }} onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}> {text} </Button> ); default: return null; } }