op-admin-ui/src/pages/egress/api/table/component/UpsertApiModalForm.tsx

import React from 'react';
import { history } from 'umi';
import { ModalForm, ProForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { querySysUser } from '@/services/op-admin/system/user';
import { message, Modal } from 'antd';
import { saveEgressApi } from '@/services/op-admin/gateway/egress';
import { ExclamationCircleOutlined } from '@ant-design/icons';

/**
 * @author bianlanzhou
 * @since 2024-09-24
 * @desc 创建API modal窗口
 */

class UpsertApiModalForm extends React.Component<UpsertApiModalFormProp> {

  render() {
    /**处理查询用户 */
    const handleQuerySysUser = () => {
      return querySysUser().then((resp) => {
        if (resp.success) {
          return resp.data;
        }
        return []
      }).catch(
        (err) => {
          console.log(err)
          message.error('查询用户失败!')
        }
      )
    }

    /** 处理跳转 */
    const handleJump = (content: string, okPath: string, cancelPath: string, data: any) => {
      Modal.confirm({
        title: '创建通道',
        icon: <ExclamationCircleOutlined
        />,
        content: content,
        okText: '是',
        onOk: () => {
          history.push(
            {
              pathname: okPath,
            },
            data,
          )
        },
        onCancel: () => {
          history.push(
            {
              pathname: cancelPath,
            },
          )
        },
        cancelText: '否',
      })
    }

    /** 提交方法 */
    const handleSubmit = (data: any) => {
      return saveEgressApi(data).then((resp) => {
        let content = '', okPath = '', cancelPath = '/ui/gateway/egress/api';
        if (resp.success) {
          message.success('保存成功!')
          if (this.props.data?.id !== null && this.props.data?.id !== undefined) {
            this.props.callback();
            return true;
          }
          if (data.apiType === 'loan') {
            content = '是否直接跳转助贷对接流程?'
            okPath = '/ui/gateway/egress/loan-integration'
          } else {
            content = '当前只支持助贷对接流程,是否跳转到API列表页面?'
            okPath = '/ui/gateway/egress/api'
          }
          handleJump(content, okPath, cancelPath, { id: resp.data, from: 'api' });
        }
      }).catch((err) => {
        console.log(err)
        return false;
      })
    }

    return (
      <ModalForm<UpsertApiModalFormItem>
        trigger={this.props.trigger}
        title="创建API"
        onFinish={
          async (value) => {
            return handleSubmit({
              ...value,
              ...{ id: this.props.data?.id }
            });
          }
        }
        initialValues={
          this.props.data
        }
      >
        <ProForm.Group >
          <ProFormText
            width="md"
            name="apiName"
            label="api名称"
            placeholder="请输入api名称"
            required
          />
          <ProFormText
            width="md"
            name="apiCode"
            label="api编码"
            placeholder="请输入api编码"
            required
          />
        </ProForm.Group>
        <ProForm.Group >
          <ProFormSelect
            name="apiType"
            label="API类型"
            width="md"
            options={
              [
                {
                  label: '助贷API',
                  value: 'loan',
                  disabled: false,
                },
                {
                  label: '产品API',
                  value: 'product',
                  disabled: true,
                },
                {
                  label: '三方数据API',
                  value: 'data',
                  disabled: true,
                }
              ]
            }
            placeholder="请选择API类型"
            rules={[
              {
                required: true,
                message: '请选择API类型',
              },
            ]}
          />
          <ProFormSelect
            width="md"
            name="techOwnerUserid"
            label="技术负责人"
            placeholder="请选择技术负责人"
            request={handleQuerySysUser}
            fieldProps={
              {
                fieldNames: {
                  label: 'username',
                  value: 'id'
                }
              }
            }
            required
          />
        </ProForm.Group>
        <ProFormTextArea
          name="memo"
          label="备注"
          placeholder="请输入备注"
        />
      </ModalForm >
    );
  }
}

export default UpsertApiModalForm;