web/src/components/table/models/modals/EditVendorModal.jsx

/*

Copyright (C) 2025 QuantumNous



This program is free software: you can redistribute it and/or modify

it under the terms of the GNU Affero General Public License as

published by the Free Software Foundation, either version 3 of the

License, or (at your option) any later version.



This program is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

GNU Affero General Public License for more details.



You should have received a copy of the GNU Affero General Public License

along with this program. If not, see <https://www.gnu.org/licenses/>.



For commercial licensing, please contact support@quantumnous.com

*/

import React, { useState, useRef, useEffect } from 'react';
import { Modal, Form, Col, Row } from '@douyinfe/semi-ui';
import { API, showError, showSuccess } from '../../../../helpers';
import { Typography } from '@douyinfe/semi-ui';
import { IconLink } from '@douyinfe/semi-icons';
import { useTranslation } from 'react-i18next';
import { useIsMobile } from '../../../../hooks/common/useIsMobile';

const EditVendorModal = ({ visible, handleClose, refresh, editingVendor }) => {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const formApiRef = useRef(null);

  const isMobile = useIsMobile();
  const isEdit = editingVendor && editingVendor.id !== undefined;

  const getInitValues = () => ({
    name: '',
    description: '',
    icon: '',
    status: true,
  });

  const handleCancel = () => {
    handleClose();
    formApiRef.current?.reset();
  };

  const loadVendor = async () => {
    if (!isEdit || !editingVendor.id) return;

    setLoading(true);
    try {
      const res = await API.get(`/api/vendors/${editingVendor.id}`);
      const { success, message, data } = res.data;
      if (success) {
        // 将数字状态转为布尔值
        data.status = data.status === 1;
        if (formApiRef.current) {
          formApiRef.current.setValues({ ...getInitValues(), ...data });
        }
      } else {
        showError(message);
      }
    } catch (error) {
      showError(t('加载供应商信息失败'));
    }
    setLoading(false);
  };

  useEffect(() => {
    if (visible) {
      if (isEdit) {
        loadVendor();
      } else {
        formApiRef.current?.setValues(getInitValues());
      }
    } else {
      formApiRef.current?.reset();
    }
  }, [visible, editingVendor?.id]);

  const submit = async (values) => {
    setLoading(true);
    try {
      // 转换 status 为数字
      const submitData = {
        ...values,
        status: values.status ? 1 : 0,
      };

      if (isEdit) {
        submitData.id = editingVendor.id;
        const res = await API.put('/api/vendors/', submitData);
        const { success, message } = res.data;
        if (success) {
          showSuccess(t('供应商更新成功！'));
          refresh();
          handleClose();
        } else {
          showError(t(message));
        }
      } else {
        const res = await API.post('/api/vendors/', submitData);
        const { success, message } = res.data;
        if (success) {
          showSuccess(t('供应商创建成功！'));
          refresh();
          handleClose();
        } else {
          showError(t(message));
        }
      }
    } catch (error) {
      showError(error.response?.data?.message || t('操作失败'));
    }
    setLoading(false);
  };

  return (
    <Modal

      title={isEdit ? t('编辑供应商') : t('新增供应商')}

      visible={visible}

      onOk={() => formApiRef.current?.submitForm()}

      onCancel={handleCancel}

      confirmLoading={loading}

      size={isMobile ? 'full-width' : 'small'}

    >

      <Form

        initValues={getInitValues()}

        getFormApi={(api) => (formApiRef.current = api)}

        onSubmit={submit}

      >

        <Row gutter={12}>

          <Col span={24}>

            <Form.Input

              field='name'

              label={t('供应商名称')}

              placeholder={t('请输入供应商名称，如：OpenAI')}

              rules={[{ required: true, message: t('请输入供应商名称') }]}

              showClear

            />

          </Col>

          <Col span={24}>

            <Form.TextArea

              field='description'

              label={t('描述')}

              placeholder={t('请输入供应商描述')}

              rows={3}

              showClear

            />

          </Col>

          <Col span={24}>

            <Form.Input

              field='icon'

              label={t('供应商图标')}

              placeholder={t('请输入图标名称')}

              extraText={

                <span>

                  {t(

                    "图标使用@lobehub/icons库，如：OpenAI、Claude.Color，支持链式参数：OpenAI.Avatar.type={'platform'}、OpenRouter.Avatar.shape={'square'}，查询所有可用图标请 ",

                  )}

                  <Typography.Text

                    link={{

                      href: 'https://icons.lobehub.com/components/lobe-hub',

                      target: '_blank',

                    }}

                    icon={<IconLink />}

                    underline

                  >

                    {t('请点击我')}

                  </Typography.Text>

                </span>

              }

              showClear

            />

          </Col>

          <Col span={24}>

            <Form.Switch field='status' label={t('状态')} initValue={true} />

          </Col>

        </Row>

      </Form>

    </Modal>
  );
};

export default EditVendorModal;