最近有一个需求, 做资产的批量属性更新

所以在前端的呈现就是, 用户可以自己选择某个属性,然后根据选择的属性, 渲染出这个属性可以输入的值

下面视频就是实际效果

下面是代码

export default ({ data }) => {
    const [form] = Form.useForm();
    const [editableKeys, setEditableRowKeys] = useState([]);
    const [dataSource, setDataSource] = useState([]);
    const [fliedMap, setFliedMap] = useState({})
    const formRef = useRef()
    const editFormRef = useRef()
    const columns = [
        {
            title: <FormattedMessage id="DMT63" />,
            dataIndex: 'Name',
            width: '40%',
            renderFormItem: (record,_) => {
                return (
                    <Select onSelect={(v) => {
                        let newData = fliedMap
                        newData[record.index] = v
                        setFliedMap(newData)
                        editFormRef?.current?.setRowData(record.entity.id, {  Value: undefined })
                    }} showSearch style={{ width: "150px" }} options={deviceFliedOptions} allowClear />
                )
            },
            render: (v) => {
                return SMaxDeviceFeildNamei18Map[v]
            },
            formItemProps: {
                rules: [
                    {
                        required: true,
                        message: <FormattedMessage id="CR1" />,
                    },
                ],
            },
        },
        {
            title: <FormattedMessage id="wt_value" />,
            dataIndex: 'Value',
            width: '40%',
            formItemProps: {
                rules: [
                    {
                        required: true,
                        message: <FormattedMessage id="CR1" />,
                    },
                ],
            },
            renderFormItem: (v) => {
                switch (fliedMap[v.index]) {
                    case "Status":
                        return <ProFormSelect showSearch options={DeviceStatusOptions} />
                    case "Type":
                        return <ProFormSelect showSearch options={[{ label: <FormattedMessage id="DMT5" />, value: 0 }, { label: <FormattedMessage id="DMT6" />, value: 1 }]} />
                    case "Model":
                        return <ProFormSelect showSearch request={async () => { return await options.options("SMaxModel") }} debounceTime={500000} />
                    case "Role":
                        return <ProFormSelect showSearch options={DeviceRoleOptions} />
                    case "InvoicingEntity":
                        return <ProFormSelect showSearch request={async () => { return await options.options("SMaxInvoicingEntity") }} debounceTime={500000} />
                    case "Location":
                        return <ProFormSelect showSearch request={async () => { return await options.options("SMaxLocation") }} debounceTime={500000} />
                    case "CostCenter":
                        return <ProFormSelect showSearch request={async () => { return await options.options("SMaxCostCenter") }} debounceTime={500000} />
                    case "PersonProfile":
                        return <ProFormSelect showSearch request={async () => { return await options.options("SMaxPerson") }} debounceTime={500000} />
                    case "WarrantyEndDate":
                        return <ProFormDatePicker />
                    case "ProductLifetime":
                        return <ProFormSelect showSearch options={[{ label: 3, value: 3 }, { label: 5, value: 5 }]} />
                    case "Comments":
                        return <ProFormTextArea />
                    default:
                        return <Input disabled={true}/>
                }
            },
            render: (v) => {
                return v
            },
        },
        {
            title: <FormattedMessage id="AT45" />,
            valueType: 'option',
            width: '20%',
            render: (text, record, dom, action) => [
                <a
                    key="editable"
                    onClick={() => {
                        action?.startEditable?.(record.id);
                    }}
                >
                    <FormattedMessage id="AT48" />
                </a>,
                <a key="delete" onClick={() => {
                    const newD = dataSource.filter((item) => item.id !== record.id)
                    setDataSource(newD);
                    formRef?.current?.setFieldsValue({ fields: newD })
                }}>
                    <FormattedMessage id="AT49" />
                </a>,
            ],
        },

    ]


    return (<ModalForm
        formRef={formRef}
        title={<FormattedMessage id="DMT29" />}
        trigger={
            <Button type='link'><FormattedMessage id="DMT29" /></Button>
        }
        form={form}
        modalProps={{
            destroyOnClose: true,
            onCancel: () => console.log('run'),
        }}
        onFinish={(values)=> {
            let l  = []
            for (let i of values.fields){
                let flag = false
                for (let x of l){
                    if (i.Name === x){
                        showError("Please do not repeat the same field")
                        return
                    }
                    flag = true
                }
                if(!flag){
                    l.push(i.Name)
                }
            } 
        }}
        autoFocusFirstInput
        submitTimeout={2000}
    >
        <ProFormItem name="fields">

            <EditableProTable
                editableFormRef={editFormRef}
                columns={columns}
                rowKey='id'
                recordCreatorProps={{
                    position: 'bottom',
                    record: () => ({ id: (Math.random() * 1000000).toFixed(0) })
                }}
                onChange={setDataSource}
                editable={{
                    type: 'multiple',
                    editableKeys,
                    onChange: setEditableRowKeys,
                }}

            >

            </EditableProTable>
        </ProFormItem>
    </ModalForm>)
}

简单来说,我们有一个叫fliedMap的字典,当我们在A列选择的时候, 会把这一行的索引作为key, 选择的值作为value存进去,然后B列的渲染就会根据fliedMap里面value的值,去渲染不同的组件,当然 我们也需要在每一次选择的时候清除掉B列的值.否则会造成错误的属性值