AddPrivatePocketModal.tsx 3.02 KB
import {
  postCanrdPrivatePocketSave,
  postServiceOrderQuerySalesCode,
} from '@/services';
import { getUserInfo } from '@/utils/user';
import { Form, Input, Modal, Select, message } from 'antd';
import React, { useEffect, useState } from 'react';

interface AddPrivatePocketModalProps {
  visible: boolean;
  onCancel: () => void;
  onSuccess: () => void;
}

interface SalesCodeItem {
  number: string | null;
  userName: string;
}

const AddPrivatePocketModal: React.FC<AddPrivatePocketModalProps> = ({
  visible,
  onCancel,
  onSuccess,
}) => {
  const [form] = Form.useForm();
  const [salesCodeList, setSalesCodeList] = useState<SalesCodeItem[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const userInfo = getUserInfo();
  const userName = userInfo?.username || '';

  const fetchSalesCodeList = async () => {
    try {
      const res = await postServiceOrderQuerySalesCode();
      if (res?.data) {
        setSalesCodeList(res.data);
      }
    } catch (error) {
      console.error('获取销售编码列表失败:', error);
      message.error('获取销售编码列表失败');
    }
  };

  useEffect(() => {
    if (visible) {
      fetchSalesCodeList();
      form.resetFields();
    }
  }, [visible, form]);

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);

      const res = await postCanrdPrivatePocketSave({
        data: {
          account: values.account,
          salesCode: values.salesCode,
          createByName: userName,
        },
      });

      if (res?.code === 200 || res?.success) {
        message.success('添加隐私钱包成功');
        onSuccess();
      } else {
        message.error(res?.message || '添加失败');
      }
    } catch (error) {
      console.error('添加隐私钱包失败:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title="添加隐私钱包"
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      confirmLoading={loading}
      destroyOnClose
    >
      <Form form={form} layout="vertical">
        <Form.Item
          name="account"
          label="绑定普通账户"
          rules={[{ required: true, message: '请输入手机号' }]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          name="salesCode"
          label="负责销售"
          rules={[{ required: true, message: '请选择负责销售' }]}
        >
          <Select
            placeholder="请选择负责销售"
            showSearch
            optionFilterProp="children"
            filterOption={(input, option) =>
              (option?.label?.toString() || '')
                .toLowerCase()
                .includes(input.toLowerCase())
            }
            options={salesCodeList.map((item) => ({
              value: item.userName,
              label: item.userName,
            }))}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddPrivatePocketModal;