OAManage.git - Gitblit

import { postOaContractGetContractList } from '@/services/WebApi/contract';
import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Col, Form, Input, message, Modal, Row, Select, Space } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
import { postOaJobDelJob, postOaJobGetJobList, postOaJobNewJob, postOaJobUpdateJob } from '@/services/WebApi/oaJob';
import { useModel } from '@umijs/max';
import modal from 'antd/es/modal';
 
const JobInformationConfiguration: React.FC = () => {
 
  const { initialState, setInitialState } = useModel('@@initialState');
  const [dialogTitle, setDialogTitle] = useState('');
  const [addDialogVisible, setAddDialogVisible] = useState(false);
  const [currentEditJob, setCurrentEditJob] = useState<any>(null);
 
  const actionRef = useRef(null);
  const [formRef] = Form.useForm();
 
  const columns = [
    {
      title: '职位编号',
      key: 'code',
      dataIndex: 'code',
      align: 'center',
      search: false,
    },
    {
      title: '职位名称',
      key: 'name',
      dataIndex: 'name',
      align: 'center',
      search: false,
    },
    {
      title: '职级下限',
      key: 'type',
      dataIndex: 'type',
      align: 'center',
      search: false,
    },
    {
      title: '职级上限',
      key: 'date1',
      dataIndex: 'date1',
      align: 'center',
      search: false,
    },
    {
      title: '上级部门',
      key: 'parentJobId',
      dataIndex: 'parentJobId',
      align: 'center',
      search: false,
    },
 
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      align: 'center',
      search: false,
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      search: false,
      render: (_, rowData) => (
        <Space size="middle">
          <a onClick={() => {
            formRef.setFieldsValue(rowData);
            setDialogTitle('编辑职位');
            setCurrentEditJob(rowData);
            setAddDialogVisible(true);
          }} style={{ cursor: 'pointer', margin: ' 0 5px' }}>
            编辑
          </a>
          <a onClick={() => {
            handleDelete(rowData.id)
          }} style={{ cursor: 'pointer', margin: ' 0 5px', color: 'red' }}> 删除</a>
        </Space>
      ),
    },
  ];
 
  useEffect(() => {
    if (!addDialogVisible) {
      formRef.resetFields();
    }
  }, [addDialogVisible])
 
 
  //删除部门
  const handleDelete = (id: number) => {
    modal.confirm({
      title: '删除',
      icon: <ExclamationCircleOutlined />,
      content: '是否删除该职位？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        postOaJobDelJob({ ids: [id] }).then((res) => {
          message.success('删除成功');
          actionRef.current?.reload();
        })
      },
    });
  }
 
 
  const handleOk = () => {
    formRef.validateFields().then((values) => {
      const body = {
        ...values,
        orgId: initialState?.appInfo?.org?.id,
      };
      console.log(body, 'body');
      body.parentJobId = null;
      body.type = 'Normal';
 
      if (dialogTitle === '新建职位') {
        postOaJobNewJob(body).then((res) => {
          console.log(res, 'res');
          actionRef.current?.reload();
          setAddDialogVisible(false);
          message.success('添加成功');
        })
      } else {
        body.id = currentEditJob.id
        postOaJobUpdateJob(body).then((res) => {
          actionRef.current?.reload();
          setAddDialogVisible(false);
          message.success('编辑成功');
        })
      }
 
    })
  };
  const handleCancel = () => {
    setAddDialogVisible(false);
  };
  const getTableData = (params: { current: number; pageSize: number }) => {
    console.log(params, 'params');
    const body = {
      start: (params.current - 1) * params.pageSize,
      size: params.pageSize,
      filterList: [],
      searchList: [],
      orgId: initialState?.appInfo?.org?.id,
    };
    return postOaJobGetJobList(body).then((res) => {
      console.log(res, 'res');
      return {
        data: res.datas,
        total: res.totalSize,
      };
    });
  };
  return (
    <PageContainer>
      <ProTable
        headerTitle="职位信息配置"
        actionRef={actionRef}
        rowKey="id"
        search={false}
        columns={columns}
        request={getTableData}
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setAddDialogVisible(true);
              setDialogTitle('新建职位');
            }}
            type="primary"
          >
            新建
          </Button>,
        ]}
      />
 
      <Modal
        title={dialogTitle}
        width={900}
        onOk={handleOk}
        open={addDialogVisible}
        // confirmLoading={confirmLoading}
        onCancel={handleCancel}
      >
        <div className={styles.addDialog}>
          <Form form={formRef} layout="vertical" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <Row>
              <Col span={12}>
                <Form.Item label="职位编号" name="code" rules={[{ required: true, message: '请输入职位编号' }]}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="职位名称" name="name" rules={[{ required: true, message: '请输入职位名称' }]}>
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="上级职位" name="parentJobId">
                  <Select
                    defaultValue="lucy"
                    options={[
                      {
                        value: 'jack',
                        label: 'Jack',
                      },
                      {
                        value: 'lucy',
                        label: 'Lucy',
                      },
                      {
                        value: 'disabled',
                        disabled: true,
                        label: 'Disabled',
                      },
                      {
                        value: 'Yiminghe',
                        label: 'yiminghe',
                      },
                    ]}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="职位下限" name="name">
                  <Input disabled />
                </Form.Item>
              </Col>
            </Row>
 
            <Row>
              <Col span={12}>
                <Form.Item label="职位上限" name="name">
                  <Input disabled />
                </Form.Item>
              </Col>
 
              <Col span={12}>
                <Form.Item label="工资详情" name="baseSalary">
                  {/* <TextArea rows={4} /> */}
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <Form.Item label="基本工资参考" name="baseSalary" rules={[{ required: true, message: '请输入基本工资参考' }]}>
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <Form.Item label="职位分类" name="type" rules={[{ required: true, message: '请选择职位分类' }]}>
                  <Select
                    defaultValue="lucy"
                    options={[
                      {
                        value: 'jack',
                        label: 'Jack',
                      },
                      {
                        value: 'lucy',
                        label: 'Lucy',
                      },
                      {
                        value: 'disabled',
                        disabled: true,
                        label: 'Disabled',
                      },
                      {
                        value: 'Yiminghe',
                        label: 'yiminghe',
                      },
                    ]}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <Form.Item label="备注" name="remarks">
                  <TextArea rows={4} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
    </PageContainer>
  );
};
 
export default JobInformationConfiguration;