import React, { useState, useImperativeHandle, forwardRef, useMemo, useRef } from 'react' import { Select, message } from 'antd' import Drag from '../../../components/Drag' import FormRender from '../../../FormRender' import { isJson, isObject } from '../../../../utils/index' import { BatchEditTableDataInfo } from '../../../../apis/process' const BatchEdit = (props, ref) => { useImperativeHandle(ref, () => ({ open, })) const { config } = props const { editFieldGroup, formJson } = config const [value, setValue] = useState('') const [params, setParams] = useState({ accountTable: '', id: '' }) const [visible, setVisible] = useState(false) const [confirmLoading, setConfirmLoading] = useState(false) const formRenderRef = useRef() const filedArr = useMemo(() => { let array = editFieldGroup ? editFieldGroup.split(',').filter(v => v) : [] setValue(array.length ? array[0] : '') return array }, [editFieldGroup]) const schemaValues = useMemo(() => { let properties = {} let schema = formJson.properties if (isObject(schema)) { Object.keys(schema).forEach(v => { if (isObject(schema[v]?.properties)) { Object.keys(schema[v].properties).forEach(s => { if (s === value) { properties = { [v]: { ...schema[v], properties: { [s]: schema[v].properties[s] } } } } }) } }) } return { formJson: { ...formJson, column: 1, properties: properties }, values: [] } }, [editFieldGroup, formJson, value]) const onSelect = (value) => { setValue(value) } const open = (values) => { setParams(values) setVisible(true) } const onOk = async () => { setConfirmLoading(true) const { formValue, errors } = await formRenderRef.current.getValues() let values = formValue.filter(v => v.fieldName === value) || [] if (errors.length) { return message.error('请完善表单内容') } const { code, data, msg } = await BatchEditTableDataInfo({ ...params, values: values }) if (code === 0) { message.success('批量修改成功!') setVisible(false) props.onOk && props.onOk() } else { message.error(msg) } setConfirmLoading(false) } return ( <Drag width={700} title='批量修改' visible={visible} bodyStyle={{ height: '300px', overflow: 'auto' }} onOk={onOk} onCancel={() => setVisible(false)} confirmLoading={confirmLoading} getContainer={false} destroyOnClose > <div style={{ display: 'flex', alignItems: 'center' }}> 列字段选择: <Select style={{ minWidth: '250px' }} placeholder='请选择字段' showArrow showSearch value={value} onSelect={onSelect} > {filedArr.map(v => <Select.Option key={v} value={v}>{v}</Select.Option>)} </Select> </div> <div style={{ marginTop: '10px' }}> <FormRender schemaValues={schemaValues} ref={formRenderRef} /> </div> </Drag> ) } export default forwardRef(BatchEdit)