import React , { useEffect , useState } from 'react' ; import { Modal , message , Input , Form , Select } from 'antd' ; import { request } from '@/utils/http' ; import config from '@/utils/config' ; const { Option } = Select ; const EditScriptNameModal = ( { handleCancel , treeData , visible , } ) => { const [ form ] = Form . useForm ( ) ; const [ loading , setLoading ] = useState ( false ) ; const [ dirs , setDirs ] = useState < any [ ] > ( [ ] ) ; const handleOk = async ( values ) => { setLoading ( true ) ; values . path = values . path || '' ; request . post ( `${ config . apiPrefix }scripts` , { data : { filename : values . filename , path : values . path , content : '' } , } ) . then ( ( { code , data } ) => { if ( code === 200 ) { message . success ( '保存文件成功' ) ; handleCancel ( { filename : values . filename , path : values . path , key : `${ values . path }-${ values . filename }` , } ) ; } else { message . error ( data ) ; } setLoading ( false ) ; } ) . finally ( ( ) => setLoading ( false ) ) ; } ; useEffect ( ( ) => { form . resetFields ( ) ; const originDirs = treeData . filter ( ( x ) => x . disabled ) ; setDirs ( [ { key : '' } , ... originDirs ] ) ; } , [ visible ] ) ; return ( < Modal title = "新建文件" visible = { visible } forceRender onOk = { ( ) => { form . validateFields ( ) . then ( ( values ) => { handleOk ( values ) ; } ) . catch ( ( info ) => { console . log ( 'Validate Failed:' , info ) ; } ) ; } } onCancel = { ( ) => handleCancel ( ) } confirmLoading = { loading } > < Form form = { form } layout = "vertical" name = "edit_name_modal" > < Form . Item name = "filename" label = "文件名" rules = { [ { required : true , message : '请输入文件名' } ] } > < Input placeholder = "请输入文件名" / > < /Form.Item> < Form . Item label = "父目录" name = "path" initialValue = { dirs && dirs . length > 0 ? dirs [ 0 ] . key : '' } > < Select placeholder = "请选择父目录" > { dirs . map ( ( x ) => ( < Option value = { x . key } > { x . key || '根' } < /Option>))} < /Select> < /Form.Item> < /Form> < /Modal>); } ; export default EditScriptNameModal ;