版本中注意的问题

拿到版本开发前，先理清思路，再动手！！！切勿边写边思考！！！

1、按照千分位显示

Number(record.extra_charges_money).toLocaleString()

数值.toFixed(2)保留两位小数后，会将Number类型的值转为String类型，按照千分位显示的数值会自动过滤0

2、是否重复选择？先定义一个flag的变量

const review = review_list || [];
                let flag = true;
                for (const item of review) {
                    if (item.review_user_id === data.review_user_id) {
                        message.error('该审批人已被选择');
                        flag = false;
                    }
                }
                if (flag) {
                    review.push({ review_user_id: data.review_user_id, name: data.approver.name });
                }

                dispatch({
                    type: 'StatementsDetail/updateStateProps',
                    payload: {
                        name: 'statementsDetail',
                        value: {
                            review_list: review,
                        },
                    },
                });

3、若筛选项是联动的，可在handleChange中进行统一处理和调接口

 const handleChange = (key, values) => {
            if (key === 'project_id' || key === 'dates') {
                setFieldsValue({ provider_tenant: '' });
            }
            const fields = getFieldsValue();
            fields[key] = values;
            const params = handleFields(fields);
            let start_dt = '';
            let end_dt = '';
            if (params.dates) {
                start_dt = params.dates[0].format('YYYY-MM-DD');
                end_dt = params.dates[1].format('YYYY-MM-DD');
            }

            this.props.dispatch({
                type: 'StatementsDetail/updateStateProps',
                payload: {
                    name: 'addInfoDetail',
                    value: {
                        start_dt,
                        end_dt,
                        project_id: params.project_id,
                        provider_tenant: params.provider_tenant,
                    },
                },
            });
            if (params.dates && params.project_id) {
                this.props.dispatch({
                    type: 'StatementsDetail/getProviderTenantList',
                    payload: {
                        start_dt,
                        end_dt,
                        project_id: params.project_id,
                    },
                });
            }
            if (params.dates && params.project_id && params.provider_tenant) {
                const detail = {};
                providerTenantList.map(item => {
                    if (item.provider_tenant === params.provider_tenant) {
                        detail.is_show = item.is_show;
                        detail.provider_tenant = item.provider_tenant;
                        detail.provider_tenant_id = item.provider_tenant_id;
                        detail.provider_tenant_user_id = item.user_id;
                        detail.user_name = item.user_name;
                        detail.user_phone = item.user_phone;
                    }
                    return item;
                });
                this.props.dispatch({
                    type: 'StatementsDetail/overrideStateProps',
                    payload: {
                        equipmentDetail: detail,
                    },
                });
                this.props.dispatch({
                    type: 'StatementsDetail/getStatementsMachine',
                    payload: {
                        project_id: params.project_id,
                        provider_tenant: params.provider_tenant,
                        start_dt,
                        end_dt,
                    },
                });
            }
        };

4、针对多种状态的显示，抽离成组件写在最外面

@services

	static AWAITING_CHECK = 'awaiting_check';
    static CHECKING = 'checking';
    static CHECK_COMPLETED = 'check_completed';
    static CHECK_FAIL = 'check_fail';
    
  static APPROVE_STATE = {
        [Statements.AWAITING_CHECK]: '未审批',
        [Statements.CHECKING]: '审批中',
        [Statements.CHECK_COMPLETED]: '审批完成',
        [Statements.CHECK_FAIL]: '审批失败',
    };

@js
import Statements from '../../../services/Statements';


function getState(state) {
    let states = '';
    switch (state) {
        case Statements.AWAITING_CHECK:
            states = styles.await;
            break;
        case Statements.CHECKING:
            states = styles.warning;
            break;
        case Statements.CHECK_COMPLETED:
            states = styles.default;
            break;
        case Statements.CHECK_FAIL:
            states = styles.error;
            break;
        default:
            break;
    }
    return <div className={states}>{Statements.APPROVE_STATE[state]}</div>;
}

@jsx
 getState(check_status)

5、针对多次调用，写成方法放在最上面或外面

const getUnit = (state, type) => {
            let text = '';
            switch (state) {
                case 'month':
                    text = type === 'number' ? '月' : '/月';
                    break;
                case 'train':
                    text = type === 'number' ? '趟' : '/趟';
                    break;
                case 'team':
                    text = type === 'number' ? '台班' : '/台班';
                    break;
                default:
                    break;
            }
            return text;
        };
        
        getUnit(record.settlement_type, 'way')

6、表单的正则校验

const regex = /^([\+\-]?(([1-9]d*)|(0)))([.]d{0,2})?$/;
{getFieldDecorator('settlement_price', {
                                        rules: [
                                            {
                                                required: true,
                                                pattern: regex,
                                                message: '请填写不超过两位小数的结算单价!',
                                            },
                                        ],
                                    })
                                    

7、文本输入框显示输入字数

<div className={styles.textarea_wrapper}>
                        <TextArea
                            value={remarks}
                            disabled={check_status === 'check_completed'}
                            onChange={e => {
                                dispatch({
                                    type: 'StatementsDetail/updateStateProps',
                                    payload: {
                                        name: 'statementsDetail',
                                        value: {
                                            remarks: e.target.value,
                                        },
                                    },
                                });
                            }}
                            maxlength={100}
                            placeholder="请填写备注"
                        />
                        <div className={styles.count}>{remarks?.length || 0}/100</div>
                    </div>

8、数组对象中某个字段的求和

export function sumKey(arr, key) {

​    let result = 0;

​    for (let i = 0; i < arr.length; i++) {

​        result += Number(arr[i][key]);// 点开看 有两个值

​    }

​    return result;

}



const settlement_money_all = sumKey(machine_list, 'settlement_money');

const extra_charges_money_all = sumKey(machine_list, 'extra_charges_money');

const final_settlement_money_all = sumKey(machine_list, 

19、若列表的数据需要进行处理或者增加处理后的字段，可在第一次调接口获取到数据时进行处理，以保证后续多处使用时不用重复处理

const response = yield call(Statements.getMachines, params);
            if (!response.XCmdrCode) {
                const list = response.XCmdrResult;
                // 在此处理数据，列表不必重复处理
                if (list.length) {
                    list.forEach(item => {
                        const type = item.settlement_style?.settlement_type;
                        const work_unit = item.settlement_style?.settlement_unit;
                        const work_quantity =
                            item.total_work_quantity_stere || item.total_work_quantity_ton;
                        item.unit = work_unit ? unit[work_unit] : unit[type];
                        item.work_quantity = work_quantity;
                        const hour = item.total_work_time ? Number(item.total_work_time) / 3600 : 0;
                        switch (type) {
                            case 'hour':
                            case 'temporary':
                                item.number = hour;
                                break;
                            case 'month':
                                item.number = hour / 24 / 30;
                                break;
                            case 'team':
                                item.number = hour / 8;
                                break;
                            case 'workload':
                                item.number = work_quantity;
                                break;
                            case 'train':
                                break;
                            default:
                                break;
                        }
                        if (item.settlement_style && item.settlement_style.settlement_unit_price) {
                            item.settlement_money = Number(
                                item.number * item.settlement_style.settlement_unit_price,
                            ).toFixed(2);
                        } else {
                            item.settlement_money = null;
                        }
                        item.extra_charges_money = item.extra_charges;
                        if (item.settlement_money !== null) {
                            if (item.extra_charges_money !== null) {
                                item.final_settlement_money =
                                    Number(item.settlement_money) +
                                    Number(item.extra_charges_money);
                            } else {
                                item.final_settlement_money = item.settlement_money;
                            }
                        }
                    });
                }
                yield put({
                    type: 'overrideStateProps',
                    payload: {
                        machines: list,
                    },
                })

10、defaultFileList、defaultValue、initalValue等值只在第一次渲染时生效，后续再改值则不会跟着改变。

可以定义一个flag

{flag ? (
                            <Attachment
                                file_ids={extension_list}
                                formData={statementsDetail}
                                extension_name={extension_name}
                                type="edit"
                            />
                        ) : null}