config/routes.ts

@@ -1,4 +1,6 @@
export default [
import { access } from "fs";

export default [
  {
    path: '/user',
    layout: false,
@@ -103,17 +105,18 @@
      { path: '/humanResourceManagement/employeeInformation', name: '员工信息', component: './Admin' },
      { path: '/humanResourceManagement/contractManagement', name: '合同管理', component: './HumanResourceManagement/contractManagement' },
      { path: '/humanResourceManagement/nominationForAppointment', name: '任职提名', component: './HumanResourceManagement/nominationForAppointment' },
      { path: '/humanResourceManagement/dismissalApplication', name: '免职申请', component: './Admin' },
      { path: '/humanResourceManagement/dismissalApplication', name: '免职申请', component: './HumanResourceManagement/dismissalApplication' },

      { path: '/humanResourceManagement/transferApplication', name: '调入申请', component: './Admin' },
      { path: '/humanResourceManagement/transferOutApplication', name: '调出申请', component: './Admin' },
      { path: '/humanResourceManagement/changeRequest', name: '变动申请', component: './Admin' },
      { path: '/humanResourceManagement/changeRequest', name: '变动申请', component: './HumanResourceManagement/changeRequest' },
      // { path: '/humanResourceManagement/transferApplication', name: '转任申请', component: './Admin' }, 
      { path: '/humanResourceManagement/applicationForSecondment', name: '挂职申请', component: './Admin' },
      { path: '/humanResourceManagement/challengeForCause', name: '回避申请', component: './Admin' },
      { path: '/humanResourceManagement/resignationApplication', name: '离职申请', component: './Admin' },
      { path: '/humanResourceManagement/applicationForSecondment', name: '挂职申请', component: './HumanResourceManagement/applicationForSecondment' },
      { path: '/humanResourceManagement/challengeForCause', name: '回避申请', component: './HumanResourceManagement/challengeForCause' },
      { path: '/humanResourceManagement/resignationApplication', name: '离职申请', component: './HumanResourceManagement/resignationApplication' },
      // { path: '/humanResourceManagement/dismissalApplication', name: '辞退申请', component: './Admin' }, 
      // { path: '/humanResourceManagement/retirementManagement', name: '离休管理', component: './Admin' }, 
      { path: '/humanResourceManagement/retirementManagement', name: '退休管理', component: './Admin' },
      { path: '/humanResourceManagement/retirementManagement', name: '退休管理', component: './HumanResourceManagement/retirementManagement' },
      { path: '/humanResourceManagement/compulsoryRetirementApplication', name: '强制退休申请', component: './Admin' },
    ],
  },

 src/access.ts

@@ -7,6 +7,6 @@
  const { currentUser } = initialState ?? {};
  console.log(currentUser, "currentUser");
  return {
    canAdmin: currentUser && currentUser.id === 0,
    canAdmin: currentUser && currentUser.id === 1,
  };
}

 src/app.tsx

@@ -64,6 +64,7 @@
      appInfo,
      roleList,
      selectRole: {},
      fetchUserInfo,
      settings: defaultSettings as Partial<LayoutSettings>,
    };
  }

 src/components/ApplyIndex/components/apply.tsx

New file
@@ -0,0 +1,153 @@
import {
  Button,
  Col,
  DatePicker,
  Divider,
  Form,
  Input,
  Modal,
  Row,
  Select,
} from "antd";
import React, { useEffect, useState } from "react";

interface ApplyProps {
  visible: boolean;
  onCancel?: () => void;
  setFormData: (data: any) => void;
  applyType: string;
  title: string;
  formItems: any[];
}

const Apply: React.FC<ApplyProps> = (props) => {
  const { visible, setFormDat, onCancel, applyType, title, formItems } = props;

  const [staffVisible, setStaffVisible] = useState(false);

  const onFinish = (values: any) => {
    console.log(values);
    // setFormDat(values);
  };

  // 打开员工列表
  const onStaffVisible = () => {
    setStaffVisible(true);
  };

  // 设置选中员工
  const onSetStaff = (val: any) => {
    console.log(val);
  };

  useEffect(() => {
    if (visible) {
      setStaffVisible(false);
    }
  }, [visible]);

  return (
    <Modal
      width={910}
      title={title + "申请"}
      open={visible}
      onCancel={onCancel}
      footer={null}
      className="ModelForm"
    >
      <Form
        name="basic"
        initialValues={{ remember: true }}
        style={{ paddingTop: 20 }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Row>
          {formItems?.length &&
            formItems.map((item, index) => {
              if (item.type === "input") {
                return (
                  <Col span={item.width > 300 ? 24 : 12} key={index}>
                    <Form.Item
                      labelCol={{ span: item.labelCol }}
                      label={item.label}
                      name={item.name}
                      rules={item.rules}
                    >
                      <Input style={{ width: item.width }} />
                    </Form.Item>
                  </Col>
                );
              } else if (item.type === "select") {
                return (
                  <Col span={12} key={index}>
                    <Form.Item
                      labelCol={{ span: item.labelCol }}
                      label={item.label}
                      name={item.name}
                      rules={item.rules}
                    >
                      <Select
                        options={item?.options}
                        style={{ width: item.width }}
                      />
                    </Form.Item>
                  </Col>
                );
              } else if (item.type === "textArea") {
                return (
                  <Col span={24} key={index}>
                    <Form.Item
                      labelCol={{ span: item.labelCol }}
                      label={item.label}
                      name={item.name}
                      rules={item.rules}
                    >
                      <Input.TextArea
                        style={{ width: item.width }}
                        showCount
                        maxLength={item?.maxLength || 100}
                      />
                    </Form.Item>
                  </Col>
                );
              } else if (item.type === "divider") {
                return (
                  <Col span={24} key={index}>
                    <Divider orientation="left" style={{ marginBottom: 20 }}>
                      {item.label}
                    </Divider>
                  </Col>
                );
              } else if (item.type === "date") {
                return (
                  <Col span={12} key={index}>
                    <Form.Item
                      labelCol={{ span: item.labelCol }}
                      label={item.label}
                      name={item.name}
                      rules={item.rules}
                    >
                      <DatePicker style={{ width: item.width }} />
                    </Form.Item>
                  </Col>
                );
              } else {
                return null;
              }
            })}
        </Row>
        <Form.Item label={null}>
          <div className="functionBtn">
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button onClick={onCancel}>关闭</Button>
          </div>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Apply;

 src/components/ApplyIndex/components/staff.tsx

 src/components/ApplyIndex/index.less

New file
@@ -0,0 +1,62 @@
.ApplyIndex {
  min-width: 900px;

  .searchTitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .searchBox {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .searchItem {
      margin-right: 20px;
    }

    .searchBtn {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      button {
        margin-left: 10px;
      }
    }
  }

  .paginationCard {
    .ant-card-body {
      padding: 10px !important;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

}


.functionBtn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  button {
    margin: 10px 0 0 10px;
  }
}

.ModelForm {
  .ant-modal-content {
    padding-bottom: 1px !important;
  }
}

 src/components/ApplyIndex/index.tsx

New file
@@ -0,0 +1,322 @@
import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Card,
  Input,
  Pagination,
  Select,
  Table,
  TableProps,
  Tabs,
} from "antd";
import React, { useEffect, useRef, useState } from "react";
import Apply from "./components/apply";
import "./index.less";

interface ApplyIndexParams {
  title: string; // 当前申请表单名称
  applyType: string; // 当前申请类型 如：离职、变动、任职
  formItems: any[]; // 自定义表单
}

const ApplyIndex: React.FC<ApplyIndexParams> = (props) => {
  const { title, applyType, formItems } = props;
  const [activeKey, setActiveKey] = useState("wait"); // tabs选中
  const tableRef = useRef<any>(null); // ref

  // 申请
  const [visible, setVisible] = useState(false);
  const [formData, setFormData] = useState<any>({});

  // tableData
  const [tableData, setTableData] = useState<any>([]);

  // 部门查询值
  const [departmentValue, setDepartmentValue] = useState<string>();
  // 职位查询值
  const [positionValue, setPositionValue] = useState<string>();
  // 姓名查询值
  const [userNameValue, setUserNameValue] = useState<string>();

  // checkBox选中值
  const [checkedRows, setCheckedRows] = useState<React.Key[]>([]);

  // Tab选项卡数据
  const TabsItems = [
    {
      label: `待处理的`,
      key: `wait`,
      children: "",
    },
    {
      label: `所有的`,
      key: `all`,
      children: "",
    },
  ];

  // 部门名称数据
  const departmentOptions = [
    {
      value: "jack",
      label: "Jack",
    },
    {
      value: "lucy",
      label: "Lucy",
    },
    {
      value: "tom",
      label: "Tom",
    },
  ];

  // 职位名称数据
  const positionOptions = [
    {
      value: "jack",
      label: "Jack",
    },
    {
      value: "lucy",
      label: "Lucy",
    },
    {
      value: "tom",
      label: "Tom",
    },
  ];

  // 打开申请
  const openApply = () => {
    setVisible(true);
  };

  // 关闭申请
  const onCancelApply = () => {
    setVisible(false);
    setFormData({});
  };

  const columns: any[] = [
    {
      title: "任职提名名称",
      key: "name",
      dataIndex: "name",
      align: "center",
    },
    {
      title: "员工姓名",
      key: "employeeName",
      dataIndex: "employeeName",
      align: "center",
    },
    {
      title: "任职方式",
      key: "applyType",
      dataIndex: "applyType",
      align: "center",
    },
    {
      title: "执行时间",
      key: "executeTime",
      dataIndex: "executeTime",
      align: "center",
    },
    {
      title: "状态",
      key: "state",
      dataIndex: "state",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "operation",
      align: "center",
    },
  ];

  // Tabs切换
  const onChangeTabs = (key: string) => {
    setActiveKey(key);
  };

  // 职位名称查询
  const onChangeSelectPosition = (value: string) => {
    setPositionValue(value);
  };

  // 部门名称查询
  const onChangeSelectDepartment = (value: string) => {
    setDepartmentValue(value);
  };

  // 姓名查询
  const changeUserName = (e: any) => {
    setUserNameValue(e.target.value);
  };

  // 获取人员数据
  const getPersonalData = async () => {
    const res = await new Promise((resolve, reject) => {
      // Simulate an asynchronous operation, such as an API call
      setTimeout(() => {
        const success = true;
        if (success) {
          // If the operation is successful, resolve the Promise with data
          const data = [
            {
              name: "Nomination 1",
              employeeName: "John",
              applyType: "Full-time",
              executeTime: "2025-07-21",
              state: "Pending",
              key: "1",
            },
            {
              name: "Nomination 2",
              employeeName: "Jane",
              applyType: "Part-time",
              executeTime: "2025-07-22",
              state: "Approved",
              key: "2",
            },
          ];
          resolve(data);
        } else {
          // If the operation fails, reject the Promise with an error
          reject(new Error("Failed to fetch data"));
        }
      }, 1000);
    });
    setTableData(res);
  };

  const rowSelection: TableProps["rowSelection"] = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
      setCheckedRows(selectedRows);
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
  };

  useEffect(() => {
    if (applyType) {
      getPersonalData();
    }
  }, [applyType]);

  return (
    <PageContainer className="ApplyIndex">
      <Tabs
        defaultActiveKey={activeKey}
        items={TabsItems}
        onChange={onChangeTabs}
      />
      <div className="searchTitle">{title}查询</div>
      <Card style={{ marginBottom: 20 }}>
        <div className="searchBox">
          <div className="searchItem">
            <span>部门名称：</span>
            <Select
              style={{ width: 200 }}
              value={departmentValue}
              onChange={onChangeSelectDepartment}
              options={departmentOptions}
              allowClear
            />
          </div>
          <div className="searchItem">
            <span>职位名称：</span>
            <Select
              style={{ width: 200 }}
              value={positionValue}
              onChange={onChangeSelectPosition}
              options={positionOptions}
              allowClear
            />
          </div>
          <div className="searchItem">
            <span>员工姓名（或拼音首字母）：</span>
            <Input
              style={{ width: 200 }}
              value={userNameValue}
              onChange={changeUserName}
              allowClear
            />
          </div>
          <div className="searchBtn">
            <Button
              type="primary"
              onClick={() => {
                tableRef?.current?.reload();
              }}
            >
              查询
            </Button>
            <Button
              onClick={() => {
                tableRef?.current?.reload();
                setDepartmentValue("");
                setPositionValue("");
                setUserNameValue("");
              }}
            >
              重置
            </Button>
          </div>
        </div>
      </Card>
      <div className="searchTitle">
        <span>{title}管理</span>
        <div className="btnClass">
          {checkedRows.length > 0 && (
            <Button
              type="primary"
              danger
              onClick={() => {
                console.log("批量删除", checkedRows);
                // 执行批量删除操作
              }}
            >
              批量删除
            </Button>
          )}
          <Button style={{ marginLeft: 10 }} type="primary" onClick={openApply}>
            申请
          </Button>
          <Apply
            visible={visible}
            setFormData={setFormData}
            onCancel={onCancelApply}
            applyType={applyType}
            title={title}
            formItems={formItems}
          />
        </div>
      </div>
      <Card style={{ marginBottom: 5 }}>
        <Table
          rowSelection={{ type: "checkbox", ...rowSelection }}
          columns={columns}
          dataSource={tableData}
          pagination={false}
        />
      </Card>
      <Card className="paginationCard">
        <Pagination
          total={50}
          current={1}
          pageSize={10}
          size="small"
          // onChange={handlePageChange}
        />
      </Card>
    </PageContainer>
  );
};

export default ApplyIndex;

 src/pages/HumanResourceManagement/applicationForSecondment/index.less

 src/pages/HumanResourceManagement/applicationForSecondment/index.tsx

New file
@@ -0,0 +1,119 @@
import Apply from "@/components/ApplyIndex";
import React from "react";

const NominationForAppointment: React.FC = () => {
  const params = {
    title: "挂职",
    applyType: "applicationForSecondment",
    formItems: [
      {
        label: "名称",
        name: "applyName",
        rules: [{ required: true, message: "请输入名称!" }],
        type: "input",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "员工姓名",
        name: "employeeName",
        rules: [{ required: true, message: "请输入员工姓名!" }],
        type: "input",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "挂职单位类型",
        name: "secondmentUnitType",
        type: "select",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "挂职单位",
        name: "secondmentUnit",
        rules: [{ required: true, message: "请选择挂职单位!" }],
        type: "select",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "岗位",
        name: "post",
        type: "select",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "挂职职位",
        name: "secondmentPosition",
        rules: [{ required: true, message: "请选择挂职职位!" }],
        type: "select",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "挂职部门",
        name: "secondmentDepartment",
        rules: [{ required: true, message: "请输入挂职部门!" }],
        type: "input",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "挂职职级",
        name: "secondmentRank",
        rules: [{ required: true, message: "请选择挂职职级!" }],
        type: "select",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "开始时间",
        name: "startTime",
        rules: [{ required: true, message: "请选择开始时间!" }],
        type: "date",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "结束时间",
        name: "endTime",
        rules: [{ required: true, message: "请选择结束时间!" }],
        type: "date",
        pageType: "applicationForSecondment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "区域",
        name: "domain",
        type: "textArea",
        pageType: "applicationForSecondment",
        labelCol: 3,
        width: 730,
      },
      {
        label: "挂职原由",
        name: "reason",
        type: "textArea",
        pageType: "applicationForSecondment",
        labelCol: 3,
        width: 730,
      },
    ],
  };

  return <Apply {...params} />;
};

export default NominationForAppointment;

 src/pages/HumanResourceManagement/challengeForCause/index.less

 src/pages/HumanResourceManagement/challengeForCause/index.tsx

New file
@@ -0,0 +1,78 @@
import Apply from "@/components/ApplyIndex";
import React from "react";

const ChallengeForCause: React.FC = () => {
  const params = {
    title: "回避",
    applyType: "challengeForCause",
    formItems: [
      {
        label: "名称",
        name: "applyName",
        rules: [{ required: true, message: "请输入名称!" }],
        type: "input",
        pageType: "challengeForCause",
        labelCol: 6,
        width: 300,
      },
      {
        label: "员工姓名",
        name: "employeeName",
        rules: [{ required: true, message: "请输入员工姓名!" }],
        type: "input",
        pageType: "challengeForCause",
        labelCol: 6,
        width: 300,
      },
      {
        label: "开始时间",
        name: "startTime",
        rules: [{ required: true, message: "请输入开始时间!" }],
        type: "date",
        pageType: "challengeForCause",
        labelCol: 6,
        width: 300,
      },
      {
        label: "结束时间",
        name: "endTime",
        rules: [{ required: true, message: "请输入结束时间!" }],
        type: "date",
        pageType: "challengeForCause",
        labelCol: 6,
        width: 300,
      },
      {
        label: "替代人员",
        name: "substitute",
        rules: [{ required: true, message: "请输入替代人员!" }],
        type: "input",
        pageType: "challengeForCause",
        labelCol: 6,
        width: 300,
      },
      {
        label: "回避原由",
        name: "reason",
        rules: [{ required: true, message: "请输入回避原由!" }],
        type: "textArea",
        pageType: "challengeForCause",
        labelCol: 3,
        width: 730,
      },
      {
        label: "回避内容",
        name: "avoidContent",
        rules: [{ required: true, message: "请输入回避内容!" }],
        type: "textArea",
        pageType: "challengeForCause",
        labelCol: 3,
        width: 730,
      },
    ],
  };

  return <Apply {...params} />;
};

export default ChallengeForCause;

 src/pages/HumanResourceManagement/changeRequest/index.less

 src/pages/HumanResourceManagement/changeRequest/index.tsx

New file
@@ -0,0 +1,168 @@
import Apply from "@/components/ApplyIndex";
import React from "react";

const ChangeRequest: React.FC = () => {
  const params = {
    title: "变动",
    applyType: "changeRequest",
    formItems: [
      {
        label: "名称",
        name: "applyName",
        rules: [{ required: true, message: "请输入名称!" }],
        type: "input",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "员工姓名",
        name: "employeeName",
        rules: [{ required: true, message: "请输入员工姓名!" }],
        type: "input",
        pageType: "dismissalApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "变动日期",
        name: "changeTime",
        rules: [{ required: true, message: "请选择变动日期!" }],
        type: "date",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调动类型",
        name: "changeType",
        rules: [{ required: true, message: "请选择调动类型!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调前部门",
        name: "changeBeforeDepartment",
        rules: [{ required: true, message: "请选择调前部门!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调后部门",
        name: "changeAfterDepartment",
        rules: [{ required: true, message: "请选择调后部门!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调前职位",
        name: "changeBeforePosition",
        rules: [{ required: true, message: "请选择调前职位!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调后职位",
        name: "changeAfterPosition",
        rules: [{ required: true, message: "请选择调后职位!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调前职级",
        name: "changeBeforeRank",
        rules: [{ required: true, message: "请选择调前职级!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调后职级",
        name: "changeAfterRank",
        rules: [{ required: true, message: "请选择调后职级!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调前基本工资",
        name: "changeBeforeMoney",
        rules: [{ required: true, message: "请输入调前基本工资!" }],
        type: "input",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调后基本工资",
        name: "changeAfterMoney",
        rules: [{ required: true, message: "请输入调后基本工资!" }],
        type: "input",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调前工种",
        name: "changeBeforeJob",
        rules: [{ required: true, message: "请选择调前工种!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调后工种",
        name: "changeAfterJob",
        rules: [{ required: true, message: "请选择调后工种!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调前状态",
        name: "changeBeforeStatus",
        rules: [{ required: true, message: "请选择调前状态!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调后状态",
        name: "changeAfterStatus",
        rules: [{ required: true, message: "请选择调后状态!" }],
        type: "select",
        pageType: "changeRequest",
        labelCol: 6,
        width: 300,
      },
      {
        label: "调动原因",
        name: "reason",
        rules: [{ required: true, message: "请输入调动原因!" }],
        type: "textArea",
        pageType: "changeRequest",
        labelCol: 3,
        width: 730,
      },
    ],
  };

  return <Apply {...params} />;
};

export default ChangeRequest;

 src/pages/HumanResourceManagement/dismissalApplication/index.less

 src/pages/HumanResourceManagement/dismissalApplication/index.tsx

New file
@@ -0,0 +1,69 @@
import Apply from "@/components/ApplyIndex";
import React from "react";

const DismissalApplication: React.FC = () => {
  const params = {
    title: "免职",
    applyType: "dismissalApplication",
    formItems: [
      {
        label: "名称",
        name: "applyName",
        rules: [{ required: true, message: "请输入名称!" }],
        type: "input",
        pageType: "dismissalApplication",
        labelCol: 3,
        width: 730,
      },
      {
        label: "员工姓名",
        name: "employeeName",
        rules: [{ required: true, message: "请输入员工姓名!" }],
        type: "input",
        pageType: "dismissalApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "所属部门",
        name: "department",
        rules: [{ required: true, message: "请选择所属部门!" }],
        type: "select",
        pageType: "dismissalApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "所属职位",
        name: "position",
        rules: [{ required: true, message: "请选择所属职位!" }],
        type: "select",
        pageType: "dismissalApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "所在城市",
        name: "address",
        rules: [{ required: true, message: "请选择所在城市!" }],
        type: "select",
        pageType: "dismissalApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "免职原由",
        name: "reason",
        rules: [{ required: true, message: "请输入免职原由!" }],
        type: "textArea",
        pageType: "dismissalApplication",
        labelCol: 3,
        width: 730,
      },
    ],
  };

  return <Apply {...params} />;
};

export default DismissalApplication;

 src/pages/HumanResourceManagement/nominationForAppointment/components/apply.tsx

File was deleted

 src/pages/HumanResourceManagement/nominationForAppointment/index.less

@@ -1,56 +0,0 @@
.nominationForAppointmentBox {
  min-width: 900px;

  .searchTitle {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .searchBox {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .searchItem {
      margin-right: 20px;
    }

    .searchBtn {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      button {
        margin-left: 10px;
      }
    }
  }

  .paginationCard {
    .ant-card-body {
      padding: 10px !important;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

}


.functionBtn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  button {
    margin: 0 10px;
  }
}

 src/pages/HumanResourceManagement/nominationForAppointment/index.tsx

@@ -1,289 +1,84 @@
import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Input, Pagination, Select, Table, TableProps, Tabs } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import Apply from './components/apply';
import './index.less';
import Apply from "@/components/ApplyIndex";
import React from "react";

const NominationForAppointment: React.FC = () => {
  const [activeKey, setActiveKey] = useState('wait'); // tabs选中
  const tableRef = useRef<any>(null); // ref

  // 申请
  const [visible, setVisible] = React.useState(false);
  const [formData, setFormData] = React.useState<any>({});

  // tableData
  const [tableData, setTableData] = useState([]);

  // 部门查询值
  const [departmentValue, setDepartmentValue] = useState<string>();
  // 职位查询值
  const [positionValue, setPositionValue] = useState<string>();
  // 姓名查询值
  const [userNameValue, setUserNameValue] = useState<string>();

  // checkBox选中值
  const [checkedRows, setCheckedRows] = useState<React.Key[]>([]);

  // Tab选项卡数据
  const TabsItems = [
    {
      label: `待处理的`,
      key: `wait`,
      children: '',
    },
    {
      label: `所有的`,
      key: `all`,
      children: '',
    },
  ];

  // 部门名称数据
  const departmentOptions = [
    {
      value: 'jack',
      label: 'Jack',
    },
    {
      value: 'lucy',
      label: 'Lucy',
    },
    {
      value: 'tom',
      label: 'Tom',
    },
  ];

  // 职位名称数据
  const positionOptions = [
    {
      value: 'jack',
      label: 'Jack',
    },
    {
      value: 'lucy',
      label: 'Lucy',
    },
    {
      value: 'tom',
      label: 'Tom',
    },
  ];

  // 打开申请
  const openApply = () => {
    setVisible(true);
  const params = {
    title: "任职提名",
    applyType: "nominationForAppointment",
    formItems: [
      {
        label: "名称",
        name: "applyName",
        rules: [{ required: true, message: "请输入名称!" }],
        type: "input",
        pageType: "nominationForAppointment",
        labelCol: 3,
        width: 730,
      },
      {
        label: "员工姓名",
        name: "employeeName",
        rules: [{ required: true, message: "请输入员工姓名!" }],
        type: "input",
        pageType: "dismissalApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "任职方式",
        name: "applyType",
        rules: [{ required: true, message: "请选择任职方式!" }],
        type: "select",
        pageType: "nominationForAppointment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "所属职位",
        name: "position",
        rules: [{ required: true, message: "请选择所属职位!" }],
        type: "select",
        pageType: "nominationForAppointment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "执行时间",
        name: "executionTime",
        rules: [{ required: true, message: "请选择执行时间!" }],
        type: "date",
        pageType: "nominationForAppointment",
        labelCol: 6,
        width: 300,
      },
      {
        label: "详细信息",
        name: "detailInfo",
        type: "textArea",
        pageType: "nominationForAppointment",
        labelCol: 3,
        width: 730,
      },
      {
        label: "考核信息",
        name: "assessInfo",
        type: "textArea",
        pageType: "nominationForAppointment",
        labelCol: 3,
        width: 730,
      },
      {
        label: "任职原由",
        name: "reason",
        type: "textArea",
        pageType: "nominationForAppointment",
        labelCol: 3,
        width: 730,
      },
    ],
  };

  // 关闭申请
  const onCancelApply = () => {
    setVisible(false);
    setFormData({});
  };

  const columns: any[] = [
    {
      title: '任职提名名称',
      key: 'name',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '员工姓名',
      key: 'employeeName',
      dataIndex: 'employeeName',
      align: 'center',
    },
    {
      title: '任职方式',
      key: 'applyType',
      dataIndex: 'applyType',
      align: 'center',
    },
    {
      title: '执行时间',
      key: 'executeTime',
      dataIndex: 'executeTime',
      align: 'center',
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
    },
  ];

  // Tabs切换
  const onChangeTabs = (key: string) => {
    setActiveKey(key);
  };

  // 职位名称查询
  const onChangeSelectPosition = (value: string) => {
    setPositionValue(value);
  };

  // 部门名称查询
  const onChangeSelectDepartment = (value: string) => {
    setDepartmentValue(value);
  };

  // 姓名查询
  const changeUserName = (e: any) => {
    setUserNameValue(e.target.value);
  };

  // 获取人员数据
  const getPersonalData = async () => {
    const res = await new Promise((resolve, reject) => {
      // Simulate an asynchronous operation, such as an API call
      setTimeout(() => {
        const success = true;
        if (success) {
          // If the operation is successful, resolve the Promise with data
          const data = [
            {
              name: 'Nomination 1',
              employeeName: 'John',
              applyType: 'Full-time',
              executeTime: '2025-07-21',
              state: 'Pending',
              key: '1',
            },
            {
              name: 'Nomination 2',
              employeeName: 'Jane',
              applyType: 'Part-time',
              executeTime: '2025-07-22',
              state: 'Approved',
              key: '2',
            },
          ];
          resolve(data);
        } else {
          // If the operation fails, reject the Promise with an error
          reject(new Error('Failed to fetch data'));
        }
      }, 1000);
    });
    setTableData(res);
  };

  const rowSelection: TableProps['rowSelection'] = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
      setCheckedRows(selectedRows);
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };

  useEffect(() => {
    getPersonalData();
  }, []);

  return (
    <PageContainer className="nominationForAppointmentBox">
      <Tabs defaultActiveKey={activeKey} items={TabsItems} onChange={onChangeTabs} />
      <div className="searchTitle">任职提名查询</div>
      <Card style={{ marginBottom: 20 }}>
        <div className="searchBox">
          <div className="searchItem">
            <span>部门名称：</span>
            <Select
              style={{ width: 200 }}
              value={departmentValue}
              onChange={onChangeSelectDepartment}
              options={departmentOptions}
              allowClear
            />
          </div>
          <div className="searchItem">
            <span>职位名称：</span>
            <Select
              style={{ width: 200 }}
              value={positionValue}
              onChange={onChangeSelectPosition}
              options={positionOptions}
              allowClear
            />
          </div>
          <div className="searchItem">
            <span>员工姓名（或拼音首字母）：</span>
            <Input
              style={{ width: 200 }}
              value={userNameValue}
              onChange={changeUserName}
              allowClear
            />
          </div>
          <div className="searchBtn">
            <Button
              type="primary"
              onClick={() => {
                tableRef?.current?.reload();
              }}
            >
              查询
            </Button>
            <Button
              onClick={() => {
                tableRef?.current?.reload();
                setDepartmentValue('');
                setPositionValue('');
                setUserNameValue('');
              }}
            >
              重置
            </Button>
          </div>
        </div>
      </Card>
      <div className="searchTitle">
        <span>任职提名管理</span>
        <div className="btnClass">
          {checkedRows.length > 0 && (
            <Button
              type="primary"
              danger
              onClick={() => {
                console.log('批量删除', checkedRows);
                // 执行批量删除操作
              }}
            >
              批量删除
            </Button>
          )}
          <Button style={{ marginLeft: 10 }} type="primary" onClick={openApply}>
            申请
          </Button>
          <Apply visible={visible} setFormData={setFormData} onCancel={onCancelApply} />
        </div>
      </div>
      <Card style={{ marginBottom: 5 }}>
        <Table
          rowSelection={{ type: 'checkbox', ...rowSelection }}
          columns={columns}
          dataSource={tableData}
          pagination={false}
        />
      </Card>
      <Card className="paginationCard">
        <Pagination
          total={50}
          current={1}
          pageSize={10}
          size="small"
          // onChange={handlePageChange}
        />
      </Card>
    </PageContainer>
  );
  return <Apply {...params} />;
};

export default NominationForAppointment;

 src/pages/HumanResourceManagement/resignationApplication/index.less

 src/pages/HumanResourceManagement/resignationApplication/index.tsx

New file
@@ -0,0 +1,96 @@
import Apply from "@/components/ApplyIndex";
import React from "react";

const NominationForAppointment: React.FC = () => {
  const params = {
    title: "离职",
    applyType: "resignationApplication",
    formItems: [
      {
        label: "名称",
        name: "applyName",
        rules: [{ required: true, message: "请输入名称!" }],
        type: "input",
        pageType: "resignationApplication",
        labelCol: 3,
        width: 730,
      },
      {
        label: "员工姓名",
        name: "employeeName",
        rules: [{ required: true, message: "请输入员工姓名!" }],
        type: "input",
        pageType: "resignationApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "所属部门",
        name: "department",
        rules: [{ required: true, message: "请输入所属部门!" }],
        type: "input",
        pageType: "resignationApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "所属职位",
        name: "position",
        rules: [{ required: true, message: "请输入所属部门!" }],
        type: "input",
        pageType: "resignationApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "所在城市",
        name: "address",
        rules: [{ required: true, message: "请输入所在城市!" }],
        type: "input",
        pageType: "resignationApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "离职类型",
        name: "resignationType",
        rules: [{ required: true, message: "请选择离职类型!" }],
        type: "select",
        pageType: "resignationApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "申请时间",
        name: "resignationTime",
        rules: [{ required: true, message: "请输入申请时间!" }],
        type: "date",
        pageType: "resignationApplication",
        labelCol: 6,
        width: 300,
      },
      {
        label: "离职原因",
        name: "reason",
        rules: [{ required: true, message: "请输入离职原因!" }],
        type: "textArea",
        pageType: "resignationApplication",
        labelCol: 3,
        width: 730,
      },
      {
        label: "备注",
        name: "remarks",
        rules: [{ required: true, message: "请输入备注!" }],
        type: "textArea",
        pageType: "resignationApplication",
        labelCol: 3,
        width: 730,
      },
    ],
  };

  return <Apply {...params} />;
};

export default NominationForAppointment;

 src/pages/HumanResourceManagement/retirementManagement/index.less

 src/pages/HumanResourceManagement/retirementManagement/index.tsx

New file
@@ -0,0 +1,253 @@
import Apply from "@/components/ApplyIndex";
import React from "react";

const NominationForAppointment: React.FC = () => {
  const params = {
    title: "退休",
    applyType: "retirementManagement",
    formItems: [
      {
        label: "选择员工",
        name: "selectStaff",
        type: "select",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "基础信息",
        type: "divider",
        pageType: "retirementManagement",
      },
      {
        label: "员工姓名",
        name: "employeeName",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "部门名称",
        name: "departmentName",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "身份证号",
        name: "idCardNumber",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "性别",
        name: "sex",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "籍贯",
        name: "origin",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "雇佣类型",
        name: "employmentType",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "出生年月",
        name: "birthDate",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "民族",
        name: "nationality",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "婚姻状况",
        name: "maritalStatus",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "政治面貌",
        name: "politicalStatus",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "毕业院校",
        name: "graduationSchool",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "专业",
        name: "major",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "文化程度",
        name: "culturalDegree",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "工种",
        name: "workType",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "职称",
        name: "workTitle",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "手机",
        name: "mobile",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "联系地址",
        name: "contactAddress",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "电子邮件",
        name: "email",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "家庭住址",
        name: "homeAddress",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "联系电话",
        name: "contactPhone",
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "备注",
        name: "remarks",
        type: "textArea",
        pageType: "retirementManagement",
        labelCol: 3,
        width: 730,
      },
      {
        label: "退休待遇",
        type: "divider",
        pageType: "retirementManagement",
      },
      {
        label: "申请名称",
        name: "applyName",
        rules: [{ required: true, message: "请填写申请名称!" }],
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "津贴",
        name: "allowance",
        rules: [{ required: true, message: "请填写津贴!" }],
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "每月工资",
        name: "monthlySalary",
        rules: [{ required: true, message: "请填写每月工资!" }],
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "福利",
        name: "welfare",
        rules: [{ required: true, message: "请填写福利!" }],
        type: "input",
        pageType: "retirementManagement",
        labelCol: 6,
        width: 300,
      },
      {
        label: "退休原因",
        name: "retirementReason",
        type: "textArea",
        pageType: "retirementManagement",
        labelCol: 3,
        width: 730,
      },
      {
        label: "备注",
        name: "retirementRemarks",
        type: "textArea",
        pageType: "retirementManagement",
        labelCol: 3,
        width: 730,
      },
    ],
  };

  return <Apply {...params} />;
};

export default NominationForAppointment;

 src/pages/organizationDesign/DepartmentalInformationConfiguration/index.tsx

@@ -5,6 +5,7 @@
import TextArea from 'antd/es/input/TextArea';
import React, { useRef, useState } from 'react';
import styles from './index.less';
import { postOaDepartmentGetDepartmentList } from '@/services/WebApi/oaDepartment';

const DepartmentalInformationConfiguration: React.FC = () => {
  const [dialogTitle, setDialogTitle] = useState('');
@@ -82,7 +83,7 @@
      filterList: [],
      searchList: [],
    };
    return postOaContractGetContractList(body).then((res) => {
    return postOaDepartmentGetDepartmentList(body).then((res) => {
      console.log(res, 'res');
      return {
        data: res.datas,