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

/*
 * @Author: your name
 * @Date: 2022-01-12 17:11:11
 * @LastEditTime: 2022-03-09 17:11:50
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/userManage/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 } 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 onVisibleChangeHandle = (bool: boolean) => {
    // console.log({bool});
    if (!bool) {
      dispatch &&
        dispatch({
          type: 'roleManageModel/cancelTableAct',
        });
    }
  };

  const onFinishHandle = (data: any & AddUsersDataType) => {
    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 '绑定菜单';
    }
    if (tableAct == TableActType.EDITRELAUSER) {
      return '绑定人员';
    }
  };

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

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

      {tableAct == TableActType.EDITRELAUSER && (
        <Form.Item name="bindUserIds">
          <UserEditer noAction={true} />
        </Form.Item>
      )}

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

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

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

export default ActModal;