64 lines
4.0 KiB
JavaScript
64 lines
4.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Input, Switch, Form, Button, Select, Flex, AutoComplete, } from 'antd';
|
|
import Styles from './web.pc.module.less';
|
|
export default function render(props) {
|
|
const { path, isCreate, entities, recursivable, legalSourceEntity, oakExecutable, destEntityFixed } = props.data;
|
|
const { t, updateDestEntity, selectPath, resetPath, clearDestEntity, update, confirm } = props.methods;
|
|
if (path && entities) {
|
|
const [options, setOptions] = useState(entities.map(ele => ({ value: ele })));
|
|
const { pathChoice, pathChosen } = props.data;
|
|
const currentPath = pathChosen.map(ele => ele.path).join('.');
|
|
return (<>
|
|
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} layout="horizontal" style={{ width: '100%' }} colon={false}>
|
|
<Form.Item label={t('path:attr.destEntity')}>
|
|
{isCreate && !destEntityFixed ? <AutoComplete options={options} disabled={!isCreate} onSelect={(value) => {
|
|
updateDestEntity(value);
|
|
setOptions(entities.map(ele => ({ value: ele })));
|
|
}} onSearch={(value) => setOptions(entities.filter(ele => ele.startsWith(value)).map(ele => ({ value: ele })))} onChange={(value) => {
|
|
if (!entities.includes(value)) {
|
|
clearDestEntity();
|
|
}
|
|
}}/> : <Input disabled={true} value={path.destEntity}/>}
|
|
</Form.Item>
|
|
{path.destEntity && <Form.Item label={t('path:attr.value')}>
|
|
{isCreate ? (<Flex style={{ width: '100%' }} vertical align="stretch" gap="middle">
|
|
<Flex justify="flex-start" align="center" gap="small">
|
|
<Select style={{ width: 260 }} options={pathChoice.map(ele => ({
|
|
label: ele.path,
|
|
value: ele.path
|
|
}))} onSelect={(value) => selectPath(value)} value={t('tips.value')}/>
|
|
<Button size="small" onClick={resetPath}>
|
|
{t('common::reset')}
|
|
</Button>
|
|
</Flex>
|
|
<Input.TextArea rows={3} style={{ flex: 1 }} disabled value={currentPath}/>
|
|
</Flex>) : <Input value={path.value} disabled={true}/>}
|
|
</Form.Item>}
|
|
{path.destEntity && <Form.Item label={t('path:attr.sourceEntity')} help={!legalSourceEntity && <span className={Styles.warning}>{t('tips.sourceEntity')}</span>}>
|
|
<Input disabled value={path.sourceEntity}/>
|
|
</Form.Item>}
|
|
{legalSourceEntity && <Form.Item label={t('path:attr.recursive')} help={!recursivable && <span className={Styles.warning}>{t('tips.recursive')}</span>}>
|
|
<Switch checked={path.recursive} onChange={(checked) => {
|
|
update({
|
|
recursive: checked,
|
|
});
|
|
}} disabled={!recursivable}/>
|
|
</Form.Item>}
|
|
{legalSourceEntity && <Form.Item label={t('path:attr.desc')}>
|
|
<Input.TextArea rows={3} placeholder={t('tips.desc')} value={path.desc || undefined} onChange={({ currentTarget }) => {
|
|
const { value } = currentTarget;
|
|
update({
|
|
desc: value || null,
|
|
});
|
|
}}/>
|
|
</Form.Item>}
|
|
</Form>
|
|
<Flex justify="end" style={{ padding: 10 }}>
|
|
<Button type="primary" onClick={() => confirm()} disabled={!legalSourceEntity || !oakExecutable}>
|
|
{t('common::action.confirm')}
|
|
</Button>
|
|
</Flex>
|
|
</>);
|
|
}
|
|
}
|