KC-MiddlePlatform/src/pages/platform/setting/roleManage/modals/modal.tsx

import React from 'react';
import KCModal from '@/components/KCModal';
import KCProSelect from '@/components/KCProSelect';
import { roleManageModelState, Dispatch } from 'umi';

import { ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import { getHospList, getShareHospList } from '@/service/hospList';
import { AddUsersDataType, getYoushuUsers } from '@/service/user';

import { TableActType } from '..';
import { Form } from 'antd';
import MenuEditer from '@/pages/platform/components/menuEditer/menu';
import UserEditer from '@/pages/platform/components/usersEditer';

interface ActModalProps extends roleManageModelState {
  dispatch: Dispatch | undefined;
}

const ActModal: React.FC<ActModalProps> = ({ dispatch, isShowModal, tableAct, currentEdit, hospId }) => {

  const setInitialValues = () => {
    if (tableAct === TableActType.EDIT) {
      return { ...currentEdit };
    }
    if (tableAct === TableActType.ADD) {
      return { hospId: hospId };
    }
    if (tableAct === TableActType.EDITMENU || tableAct === TableActType.EDITRELAUSER) {
      return { ...currentEdit };
    }
  };

  const initialValues = setInitialValues(); // 在表单渲染之前设置初始值

  const onVisibleChangeHandle = (bool: boolean) => {
    if (!bool) {
      dispatch &&
        dispatch({
          type: 'roleManageModel/cancelTableAct',
        });
    }
  };

  const onFinishHandle = (data: any & AddUsersDataType) => {
    console.log({initialValues});
    

    if (tableAct === TableActType.ADD) {
      dispatch &&
        dispatch({
          type: 'roleManageModel/postAddData',
          payload: data,  // 使用合并后的数据
        });
    }

    if (tableAct === TableActType.EDIT || tableAct === TableActType.EDITMENU || tableAct === TableActType.EDITRELAUSER) {
      dispatch &&
        dispatch({
          type: 'roleManageModel/postEditData',
          payload: data,  // 使用合并后的数据
        });
    }

    return true;
  };

  const setModalTitle = () => {
    if (tableAct === TableActType.EDIT) {
      return '编辑角色';
    }
    if (tableAct === TableActType.ADD) {
      return '新增角色';
    }
    if (tableAct === TableActType.EDITMENU) {
      return `绑定菜单(${currentEdit?.roleName})`;
    }
    if (tableAct === TableActType.EDITRELAUSER) {
      return `绑定人员(${currentEdit?.roleName})`;
    }
  };

  

  return (
    <KCModal
      visible={isShowModal}
      onVisibleChange={onVisibleChangeHandle}
      layout="horizontal"
      width={500}
      initialValues={initialValues}
      title={setModalTitle()}
      labelCol={{
        span: 5,
      }}
      onFinish={async (data) => onFinishHandle({...data})}
    >
      {tableAct === TableActType.EDITMENU && (
        <Form.Item name="bindMenuIds">
          <MenuEditer noAction={true} hospId={currentEdit?.hospId} />
        </Form.Item>
      )}

      {tableAct === TableActType.EDITRELAUSER && (
        <Form.Item name="bindUserIds">
          <UserEditer total={currentEdit ? currentEdit.allUsers : []} noAction={true} />
        </Form.Item>
      )}

      {(tableAct === TableActType.ADD || tableAct === TableActType.EDIT) && (
        <>
          <KCProSelect
            label="选择院区"
            width="md"
            name="hospId"
            disabled
            fieldProps={{size:'small'}}
            request={async () => {
              const hospList = await getShareHospList();
              if (hospList) {
                return hospList.map((t) => ({
                  label: t.name,
                  value: t.id,
                }));
              }
              return [];
            }}
          />
          <ProFormText
            width="md"
            name="roleName"
            label="角色名称"
            placeholder="请输入"
            rules={[
              {
                required: true,
                message: '请输入角色名称!',
              },
            ]}
          />
           <ProFormText
            width="md"
            name="roleCode"
            label="角色编码"
            placeholder="请输入"
            rules={[
              {
                required: true,
                message: '请输入角色编码!',
              },
            ]}
          />

          <KCProSelect
            label="关联有数账号"
            width="md"
            name="youshuUserId"
            request={async () => {
              const resp = await getYoushuUsers();
              if (resp) {
                return resp.map((t) => ({
                  label: t.name,
                  value: t.id,
                }));
              }
              return [];
            }}
          />

          <ProFormTextArea name="remark" label="备注" placeholder="请输入名称" width="md" fieldProps={{}} />
        </>
      )}
    </KCModal>
  );
};

export default ActModal;