- 描述：只有选择了账目后，才会弹出计量输入框，且下面的金额由账目中的金额转换比例和计量自动算出结果。没有选择账目，则需要手动输入金额。
- 正常情况，如图：
- 问题：点击编辑后，原本数据中有选择账目，但是在弹窗中，没有显示计量。在编辑数据成功后，点击新增按钮，弹窗中计量会直接显示。
- 编辑问题：
- 新增问题：
代码如下：
- 获取账目列表
const [account, setAccount] = useState(null);
const state = useStore().getState();
const accountList = state.financial.accountList;
- 计量金额处理
const handleValueChange = (e) => {
//e.value;
//事件委托 event.target=>获取到输入框input,.value获取到输入框的值
if (account) {
form.setFieldValue('amount', e.target.value * account.ratio);
console.log(e.value);
}
};
//===账目列表遍历
const financingCategorysMap = {};
accountList?.forEach((a) => {
financingCategorysMap[a.sid] = { text: a.name, ratio: a.ratio };
console.log('账目a==>', a);
});
const ops: any = {};
if (account) {
if (account.suffix) {
ops.suffix = account.unit;
} else {
ops.prefix = account.unit;
}
}
- 账目表格
{
title: '账目',
search: false,
dataIndex: 'accountId',
render: (text) => {
const account = accountList.find((a) => a.sid === text);
return account ? account.name : '无';
},
},
{
title: '计量',
search: false,
dataIndex: 'value',
},
{
title: '金额',
search: false,
dataIndex: 'amount',
},
- 弹窗代码
<>
<Form.Item
label={
<span>
账目
<Tooltip title="若没有账目可以选择，请先在账目页面进行添加">
<QuestionCircleOutlined style={{ marginLeft: 8 }} />
</Tooltip>
</span>
}
name="accountId"
>
<Select
style={{ width: 120 }}
allowClear
onChange={handleCategoryChange}
options={accountList?.map((a) => ({
value: a.sid,
label: a.name,
}))}
/>
</Form.Item>
{account && (
<Form.Item
label="计量"
name="value"
rules={[{ required: true }]}
>
<Input
onChange={(e) => handleValueChange(e)}
style={{ width: '100%' }}
min={1}
{...ops}
/>
</Form.Item>
)}
</>
<Form.Item
label="金额"
name="amount"
rules={[{ required: true }]}
>
<InputNumber
style={{ width: '100%' }}
min={1}
prefix="￥"
/>
</Form.Item>
