ISCS-Client-V1.0/src/components/user/UserAssignRoleForm.tsx

import React, { useState, useImperativeHandle, forwardRef } from 'react';
import { Modal, Form, Input, Select, message } from 'antd';
import { userPermissionApi } from '../../api/user/permission';
import { systemApi } from '../../api/System';
import { UserVO, RoleVO } from '../../types';

interface UserAssignRoleFormProps {
  onSuccess?: () => void;
}

export interface UserAssignRoleFormRef {
  open: (row: UserVO) => void;
}

const UserAssignRoleForm = forwardRef<UserAssignRoleFormRef, UserAssignRoleFormProps>(({ onSuccess }, ref) => {
  const [dialogVisible, setDialogVisible] = useState(false);
  const [formLoading, setFormLoading] = useState(false);
  const [form] = Form.useForm();
  const [roleList, setRoleList] = useState<RoleVO[]>([]);

  // 打开弹窗
  const open = async (row: UserVO) => {
    setDialogVisible(true);
    form.resetFields();

    // 设置用户信息
    form.setFieldsValue({
      id: row.id,
      username: row.username,
      nickname: row.nickname,
      roleIds: [],
    });

    // 加载角色列表
    try {
      const roles = await systemApi.getSimpleRoleList();
      setRoleList(roles || []);
    } catch (error) {
      console.error('加载角色列表失败:', error);
      message.error('加载角色列表失败');
    }

    // 获取用户角色列表
    setFormLoading(true);
    try {
      const roleIds = await userPermissionApi.getUserRoleList(row.id);
      form.setFieldsValue({
        roleIds: roleIds || [],
      });
    } catch (error: any) {
      console.error('获取用户角色失败:', error);
      message.error(error.message || '获取用户角色失败');
    } finally {
      setFormLoading(false);
    }
  };

  useImperativeHandle(ref, () => ({
    open,
  }));

  // 提交表单
  const submitForm = async () => {
    try {
      const values = await form.validateFields();
      
      setFormLoading(true);
      try {
        await userPermissionApi.assignUserRole({
          userId: values.id,
          roleIds: values.roleIds,
        });
        message.success('分配成功');
        setDialogVisible(false);
        onSuccess?.();
      } catch (error: any) {
        message.error(error.message || '分配失败');
      } finally {
        setFormLoading(false);
      }
    } catch (error) {
      // 表单验证失败
    }
  };

  return (
    <Modal
      title="分配角色"
      open={dialogVisible}
      onCancel={() => setDialogVisible(false)}
      onOk={submitForm}
      confirmLoading={formLoading}
      destroyOnClose
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          roleIds: [],
        }}
      >
        <Form.Item label="用户名称" name="username">
          <Input disabled />
        </Form.Item>

        <Form.Item label="用户昵称" name="nickname">
          <Input disabled />
        </Form.Item>

        <Form.Item label="角色" name="roleIds">
          <Select
            mode="multiple"
            placeholder="请选择角色"
            options={roleList.map(role => ({
              label: role.name,
              value: role.id,
            }))}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
});

UserAssignRoleForm.displayName = 'UserAssignRoleForm';

export default UserAssignRoleForm;