import React , { useEffect } from 'react' ; import { Button , FormInstance , Tabs , Form , Checkbox } from 'antd' ; import TagInput from './TagInput' ; import { addInputList , changeInputList , deleteInputList , judgeIsTagConfig , } from '@/utils/tool/editTool' ; import MonacoEditor from 'react-monaco-editor' ; import { useTranslation } from 'react-i18next' ; import i18n from '@/i18n' ; const { TabPane } = Tabs ; interface IProps { form ? : FormInstance ; } const EDIT_SUBSELECTED = true ; export interface IInputList { isMulti ? : Boolean ; key : string ; value : string ; subSelected ? : IInfoList [ ] ; } interface IInfoList { isDefault ? : any ; key : string ; value : string ; } const initInputList = [ { key : '类别1' , value : 'class-1' , isMulti : false , subSelected : [ { key : '选项1-1' , value : 'option1-1' , isDefault : false } ] , } , ] ; const initInputList_EN = [ { key : 'className1' , value : 'class-1' , isMulti : false , subSelected : [ { key : 'optionName1-1' , value : 'option1-1' , isDefault : false } ] , } , ] ; const options = { selectOnLineNumbers : true , renderSideBySide : false , } ; const ToolConfig = ( { form } ) => { const { t } = useTranslation ( ) ; const changeInputInfo = ( e , target , index , subIndex ? ) => { if ( e ?. target ?. value ?. indexOf ( '@' ) > - 1 && ! [ 'isMulti' , 'isDefault' ] . includes ( target ) ) { return ; } const inputList = form ?. getFieldValue ( 'inputList' ) ; form ?. setFieldsValue ( { inputList : changeInputList ( e , target , inputList , index , subIndex ) } ) ; } ; const addInputInfo = ( i ? ) => { const inputList = form ?. getFieldValue ( 'inputList' ) ; form ?. setFieldsValue ( { inputList : addInputList ( inputList , EDIT_SUBSELECTED , i , { isMulti : true , lang : i18n . language , } ) , } ) ; } ; const deleteInputInfo = ( i , subIndex ? ) => { const inputList = form ?. getFieldValue ( 'inputList' ) ; form ?. setFieldsValue ( { inputList : deleteInputList ( inputList , i , subIndex ) } ) ; } ; const editorChange = ( v ) => { try { const newInputList = JSON . parse ( v ) ; if ( judgeIsTagConfig ( newInputList ) ) { form ?. setFieldsValue ( { inputList : newInputList } ) ; } } catch ( e ) { } } ; useEffect ( ( ) => { let inputList = initInputList ; if ( i18n . language === 'en' ) { inputList = initInputList_EN ; } form ?. setFieldsValue ( { inputList } ) ; } , [ ] ) ; return ( < React . Fragment > { } < Form . Item valuePropName = 'checked' style = { { display : 'none' } } name = 'showConfirm' initialValue = { true } > < Checkbox /> < /Form.Item> < Form . Item valuePropName = 'checked' style = { { display : 'none' } } name = 'skipWhileNoDependencies' initialValue = { true } > < Checkbox /> < /Form.Item> < Form . Item labelCol = { { span : 0 } } wrapperCol = { { span : 24 } } shouldUpdate > { ( ) => { let inputList = form ?. getFieldValue ( 'inputList' ) ; return ( < Tabs > < TabPane tab = { t ( 'Form' ) } key = '1' > < div > { inputList ?. map ( ( info , i ) => ( < TagInput inputInfo = { info } isAllReadOnly = { false } changeInputInfo = { changeInputInfo } addInputInfo = { addInputInfo } deleteInputInfo = { deleteInputInfo } inputIndex = { i } key = { i } / > ) ) } < Button style = { { marginTop : 10 } } onClick = { ( ) => addInputInfo ( ) } > { t ( 'New' ) } < /Button> < /div> < /TabPane> < TabPane tab = 'JSON' key = '2' > < MonacoEditor width = '800' height = '300' language = 'json' theme = 'vs-dark' value = { JSON . stringify ( inputList , null , 2 ) } options = { options } onChange = { editorChange } / > < /TabPane> < /Tabs>); } } < /Form.Item> < /React.Fragment>); } ; export default ToolConfig ;