zhongshujie
2025-08-01 07d1135a1913a919679dc23f0a38b9b61987171f
src/pages/organizationDesign/DepartmentalInformationConfiguration/index.tsx
@@ -1,24 +1,34 @@
import { postOaContractGetContractList } from '@/services/WebApi/contract';
import { PlusOutlined, UserOutlined } from '@ant-design/icons';
import { ExclamationCircleOutlined, PlusOutlined, UserOutlined } from '@ant-design/icons';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Col, Form, Input, Modal, Row, Select, Space } from 'antd';
import { Button, Col, Form, Input, message, Modal, Row, Select, Space } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import React, { useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
import { postOaDepartmentGetDepartmentList } from '@/services/WebApi/oaDepartment';
import { postOaDepartmentDelDepartment, postOaDepartmentGetDepartmentList, postOaDepartmentNewDepartment, postOaDepartmentUpdateDepartment } from '@/services/WebApi/oaDepartment';
import { useModel } from '@umijs/max';
import { postOaOrgGetOrgList } from '@/services/WebApi/oaOrg';
import { postIdentityDepartmentNewDepartment } from '@/services/WebApi/department';
import SelectUser from '@/components/selectUser';
import modal from 'antd/es/modal';
const DepartmentalInformationConfiguration: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const [dialogTitle, setDialogTitle] = useState('');
  const [addDialogVisible, setAddDialogVisible] = useState(false);
  const [selectUserDialogVisible, setSelectUserDialogVisible] = useState(false);
  const [userDialogTitle, setUserDialogTitle] = useState("选择部门领导");
  const [depLeader, setDepLeader] = useState<any>(null);
  const [currentEditDepartment, setCurrentEditDepartment] = useState<any>(null);
  const actionRef = useRef(null);
  const [formRef] = Form.useForm();
  const columns = [
    {
      title: '部门名称',
      key: 'code',
      dataIndex: 'code',
      key: 'name',
      dataIndex: 'name',
      align: 'center',
    },
    {
@@ -27,6 +37,9 @@
      dataIndex: 'name',
      align: 'center',
      search: false,
      render: (_, rowData) => {
        return rowData?.manager?.name || "-"
      }
    },
    {
      title: '部门类型',
@@ -37,17 +50,20 @@
    },
    {
      title: '部门电话',
      key: 'date1',
      dataIndex: 'date1',
      key: 'phone',
      dataIndex: 'phone',
      align: 'center',
      search: false,
    },
    {
      title: '上级部门',
      key: 'date2',
      dataIndex: 'date2',
      key: 'parent',
      dataIndex: 'parent',
      align: 'center',
      search: false,
      render: (_, rowData) => {
        return rowData?.parent?.name || "-"
      }
    },
    {
@@ -64,33 +80,116 @@
      search: false,
      render: (_, rowData) => (
        <Space size="middle">
          <a onClick={() => {}} style={{ cursor: 'pointer', margin: ' 0 5px' }}>
          <a onClick={() => {
            formRef.setFieldsValue(rowData);
            setDepLeader(rowData.manager)
            formRef.setFieldValue('managerId', rowData.manager.name)
            setDialogTitle('编辑部门');
            setCurrentEditDepartment(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>
      ),
    },
  ];
  const handleOk = () => {};
  useEffect(() => {
    if (!addDialogVisible) {
      formRef.resetFields();
    }
  }, [addDialogVisible])
  //删除部门
  const handleDelete = (id: number) => {
    modal.confirm({
      title: '删除',
      icon: <ExclamationCircleOutlined />,
      content: '是否删除该部门?',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        postOaDepartmentDelDepartment({ ids: [id] }).then((res) => {
          message.success('删除成功');
          actionRef.current?.reload();
        })
      },
    });
  }
  //新增or编辑
  const handleOk = () => {
    formRef.validateFields().then((values) => {
      const body = {
        orgId: initialState?.appInfo?.org?.id,
        ...values
      }
      for (let key in body) {
        if (body[key] === undefined) {
          body[key] = ''
        }
      }
      body.parentId = 14
      body.type = "Normal"
      body.managerId = depLeader.id
      if (dialogTitle == '编辑部门') {
        body.id = currentEditDepartment.id
        postOaDepartmentUpdateDepartment(body).then((res) => {
          console.log(res, 'res');
          setAddDialogVisible(false);
          message.success('编辑成功');
          actionRef.current?.reload();
        })
      } else {
        postOaDepartmentNewDepartment(body).then((res) => {
          console.log(res, 'res');
          setAddDialogVisible(false);
          message.success('添加成功');
          actionRef.current?.reload();
        })
      }
    })
  };
  const handleCancel = () => {
    setAddDialogVisible(false);
  };
  const getTableData = (params: { current: number; pageSize: number }) => {
    console.log(params, 'params');
    let searchList = [];
    if (params?.name) {
      searchList = [{
        field: 'name', keywords: params.name, compareType: 'Contains', domain: "",
        type: "",
        fieldBaseType: "",
        subSearches: [
        ]
      }];
    }
    const body = {
      start: (params.current - 1) * params.pageSize,
      size: params.pageSize,
      filterList: [],
      searchList: [],
      searchList,
      orgId: initialState?.appInfo?.org?.id,
    };
    return postOaDepartmentGetDepartmentList(body).then((res) => {
      console.log(res, 'res');
      return {
        data: res.datas,
        total: res.data.totalSize,
        total: res.totalSize,
      };
    });
  };
  return (
    <PageContainer>
      <ProTable
@@ -119,22 +218,21 @@
        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="name">
                <Form.Item label="部门名称" name="name" rules={[{ required: true, message: '请输入部门名称' }]}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="部门类型"
                  name="name"
                  rules={[{ required: true, message: '请输入机构名称' }]}
                  name="type"
                  rules={[{ required: true, message: '请选择部门类型' }]}
                >
                  <Select
                    defaultValue="lucy"
@@ -163,12 +261,14 @@
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item label="部门领导" name="name">
                  <Input suffix={<UserOutlined className="site-form-item-icon" />} />
                <Form.Item label="部门领导" name="managerId">
                  <Input suffix={<UserOutlined onClick={() => {
                    setSelectUserDialogVisible(true)
                  }} className="site-form-item-icon" />} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="上级部门" name="name">
                <Form.Item label="上级部门" name="parentId">
                  <Select
                    defaultValue="lucy"
                    options={[
@@ -197,14 +297,14 @@
            <Row>
              <Col span={24}>
                <Form.Item label="部门电话" name="name">
                <Form.Item label="部门电话" name="phone">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <Form.Item label="部门描述" name="name">
                <Form.Item label="部门描述" name="description">
                  <TextArea rows={4} />
                </Form.Item>
              </Col>
@@ -212,6 +312,17 @@
          </Form>
        </div>
      </Modal>
      {
        selectUserDialogVisible && <SelectUser title={userDialogTitle} onConfirm={(user) => {
          formRef.setFieldValue('managerId', user.name)
          setDepLeader(user)
          setSelectUserDialogVisible(false)
        }} onCancel={() => {
          setSelectUserDialogVisible(false)
        }} />
      }
    </PageContainer>
  );
};