oak-general-business/es/components/application/upsert/web.pc.js

import React, { useState, useRef } from 'react';
import { Form, Flex, Tag, Tooltip, Select, Input, theme } from 'antd';
import { PlusOutlined, CloseOutlined } from '@ant-design/icons';
function renderVersions(props) {
    const { versions, onChange, t } = props;
    const [inputVisible, setInputVisible] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const inputRef = useRef(null);
    const tagInputStyle = {
        width: 64,
        height: 22,
        marginInlineEnd: 8,
        verticalAlign: 'top',
    };
    const { token } = theme.useToken();
    const tagPlusStyle = {
        height: 22,
        background: token.colorBgContainer,
        borderStyle: 'dashed',
    };
    const handleInputChange = (e) => {
        setInputValue(e.target.value);
    };
    const handleInputConfirm = () => {
        if (inputValue && !versions?.includes(inputValue)) {
            onChange([...versions || [], inputValue]);
        }
        setInputVisible(false);
        setInputValue('');
    };
    const handleClose = (removedTag) => {
        const versions2 = versions.filter((tag) => tag !== removedTag);
        onChange(versions2);
    };
    const showInput = () => {
        setInputVisible(true);
    };
    return (<Flex gap="4px 0" wrap="wrap">
            {(versions || []).map((tag, index) => {
            const isLongTag = tag.length > 20;
            const tagElem = (<Tag closeIcon={<CloseOutlined />} key={tag} onClose={() => handleClose(tag)}>
                        <span>
                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                        </span>
                    </Tag>);
            return isLongTag ? (<Tooltip title={tag} key={tag}>
                        {tagElem}
                    </Tooltip>) : (tagElem);
        })}
            {inputVisible ? (<Input ref={inputRef} type="text" size="small" style={tagInputStyle} value={inputValue} onChange={handleInputChange} onBlur={handleInputConfirm} onPressEnter={handleInputConfirm}/>) : (<Tag style={tagPlusStyle} icon={<PlusOutlined />} onClick={showInput}>
                    {t('common::action.add')}
                </Tag>)}
        </Flex>);
}
export default function Render(props) {
    const { systemId, name, description, type, typeArr, $$createAt$$, domainId, domains, dangerousVersions, warningVersions, soaVersion, } = props.data;
    const { t, update, confirm, getDomains } = props.methods;
    return (<Form colon={true} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
            <Form.Item label={t('application:attr.name')} required>
                <>
                    <Input onChange={(e) => {
            update({
                name: e.target.value,
            });
        }} value={name}/>
                </>
            </Form.Item>
            <Form.Item label={t('application:attr.soaVersion')} required>
                <>
                    <Input onChange={(e) => {
            update({
                soaVersion: e.target.value,
            });
        }} value={soaVersion}/>
                </>
            </Form.Item>
            <Form.Item label={t('application:attr.dangerousVersions')}>
                {renderVersions({
            versions: dangerousVersions,
            onChange: (v) => update({
                dangerousVersions: v
            }),
            t,
        })}
            </Form.Item>
            <Form.Item label={t('application:attr.warningVersions')}>
                {renderVersions({
            versions: warningVersions,
            onChange: (v) => update({
                warningVersions: v
            }),
            t,
        })}
            </Form.Item>
            <Form.Item label={t('application:attr.description')}>
                <>
                    <Input.TextArea onChange={(e) => {
            update({
                description: e.target.value,
            });
        }} value={description}/>
                </>
            </Form.Item>
            <Form.Item label={t('application:attr.type')} required>
                <>
                    <Select value={type} style={{ width: 120 }} disabled={$$createAt$$ > 1} options={typeArr.map((ele) => ({
            label: t(`application:v.type.${ele.value}`),
            value: ele.value,
        }))} onChange={(value) => {
            update({
                type: value,
            });
        }}/>
                </>
            </Form.Item>
            <Form.Item label={t('domain:name')}>
                <>
                    <Select allowClear value={domainId} style={{ width: 120 }} options={domains?.map((ele) => ({
            label: ele.url,
            value: ele.id,
        }))} onChange={(value) => {
            if (!value) {
                update({
                    domainId: null,
                });
                return;
            }
            update({
                domainId: value,
            });
        }} onClick={() => {
            getDomains(systemId);
        }}/>
                </>
            </Form.Item>
        </Form>);
}