拿到版本开发前，先理清思路，再动手！！！切勿边写边思考！！！
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}