scrm.antd/src/pages/DepartmentsList/index.tsx

import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
import { post } from '@/services/ajax';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Col, Form, Input, Pagination, Row, Spin, Table, Tree } from 'antd';
import { stringify } from 'qs';
import React, { useEffect, useState } from 'react';
import styles from './index.module.scss';

interface IDepartment {
  children: null | IDepartment[];
  department_leader: string;
  id: number;
  name: string;
  parent_id: number;
  sort: number;
}

interface IStaffsItem {
  user_id: string | number;
  name: string;
  telephone: string;
  dep_name: string[];
  position: string;
}

interface IStaffsData {
  count: number;
  data?: IStaffsItem[];
}

type Param = {
  curr_page: number;
  page_count: number;
  dep_id: number;
  name?: string;
  position?: string;
  telephone?: string;
};

const DepartmentsList: React.FC = () => {
  const [param] = useState<Param>({
    curr_page: 1,
    page_count: 20,
    dep_id: 0,
  });

  const [departmentID, setDepartmentsID] = useState<number>(0);
  const [departmentsList, setDepartmentsList] = useState<IDepartment[]>([]);
  const [staffsData, setStaffsData] = useState<IStaffsData>({ count: 0, data: [] });
  const [loadingL, setLoadingL] = useState(false);
  const [loading, setLoading] = useState(false);

  const getDepartmentsList = () => {
    setLoadingL(true);
    post({ url: '/Departments/List' }).then((res) => {
      setLoadingL(false);
      if (res.err_code == 0) {
        if (Array.isArray(res.data)) {
          param.dep_id = res.data[0].id;
          setDepartmentsID(param.dep_id);
          setDepartmentsList(res.data);
          getStaffsList();
        }
      }
    });
  };
  const getStaffsList = () => {
    setLoading(true);
    post({ url: '/Staffs/List', data: stringify(param) }).then((res) => {
      setLoading(false);
      if (res.err_code == 0) {
        if (!Array.isArray(res.data)) {
          res.data = [];
        }
        setStaffsData(res as IStaffsData);
      }
    });
  };

  const page = (page: number) => {
    param.curr_page = page;
    getStaffsList();
  };

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

  // const [open, setOpen] = useState(false);
  // const [popOpen, setPopOpen] = useState(-1);

  return (
    <PageContainer>
      <div style={{ display: 'flex' }}>
        <div
          style={{
            width: 260,
            flexShrink: 0,
            minHeight: 'calc(100vh - 55px - 60px - 96px)',
            maxHeight: 'calc(100vh - 55px - 60px)',
            overflow: 'auto',
            marginRight: 12,
            background: '#fff',
            position: 'sticky',
            top: 64,
            padding: '12px 0',
          }}
        >
          <Spin spinning={loadingL} style={{ display: 'block' }}>
            {departmentsList.length ? (
              <Tree
                className={'department-tree'}
                blockNode
                selectedKeys={[departmentID]}
                defaultExpandAll
                treeData={departmentsList}
                fieldNames={{ title: 'name', key: 'id' }}
                onSelect={(selectedKeys) => {
                  if (selectedKeys.length) {
                    setDepartmentsID(Number(selectedKeys[0]));
                    param.dep_id = Number(selectedKeys[0]);
                    page(1);
                  }
                }}
                titleRender={(nodeData: any) => {
                  // console.log(nodeData);
                  return (
                    <div className={styles.departmentItem}>
                      <div className={styles.name} title={nodeData.name}>
                        {nodeData.name}
                      </div>
                      {/* <div className={styles.btnsBox}>
                    <FormOutlined
                      title="修改"
                      onClick={(e) => {
                        e.stopPropagation();
                        setOpen(true);
                      }}
                      className={styles.edit}
                    />
                    <Popconfirm
                      title="确认删除?"
                      open={popOpen == nodeData.id}
                      onCancel={(e) => {
                        setPopOpen(-1);
                        e?.stopPropagation();
                      }}
                      onConfirm={(e) => {
                        e?.stopPropagation();
                        console.log(nodeData.id);
                      }}
                    >
                      <DeleteOutlined
                        title="删除"
                        onClick={(e) => {
                          e.stopPropagation();
                          setPopOpen(nodeData.id);
                        }}
                        className={styles.del}
                      />
                    </Popconfirm>
                  </div> */}
                    </div>
                  );
                }}
              ></Tree>
            ) : null}
          </Spin>
        </div>
        {/* <Modal
          open={open}
          title="修改部门"
          onCancel={() => setOpen(false)}
          centered
          onOk={() => {}}
        >
          <Form>
            <Form.Item label="名称">
              <Input type="text"></Input>
            </Form.Item>
          </Form>
        </Modal> */}
        <div style={{ flexGrow: 1, minWidth: 0 }}>
          <SearchBarPlugin>
            <Form autoComplete="off">
              <Row gutter={{ xs: 0, sm: 16 }}>
                <Col xs={24} sm={12} md={8}>
                  <Form.Item label="姓名">
                    <Input
                      autoComplete="off"
                      onChange={(e) => {
                        param.name = e.target.value.trim();
                      }}
                      allowClear
                      onPressEnter={() => page(1)}
                    ></Input>
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={8}>
                  <Form.Item label="职位">
                    <Input
                      autoComplete="off"
                      onChange={(e) => {
                        param.position = e.target.value.trim();
                      }}
                      allowClear
                      onPressEnter={() => page(1)}
                    ></Input>
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={8}>
                  <Form.Item label="手机号">
                    <Input
                      autoComplete="off"
                      onChange={(e) => {
                        param.telephone = e.target.value.trim();
                      }}
                      allowClear
                      onPressEnter={() => page(1)}
                    ></Input>
                  </Form.Item>
                </Col>
                {/* <Col xs={24} sm={12} md={6}>
                  <Form.Item label="用户名">
                    <Select
                      defaultValue="lucy"
                      style={{ width: '100%' }}
                      onChange={() => {}}
                      options={[
                        { value: 'jack', label: 'Jack' },
                        { value: 'lucy', label: 'Lucy' },
                        { value: 'Yiminghe', label: 'yiminghe' },
                      ]}
                    />
                  </Form.Item>
                </Col> */}
              </Row>
            </Form>
          </SearchBarPlugin>
          <SearchBottonsCardPlugin>
            <Row justify={'center'}>
              <Button
                type="primary"
                onClick={() => {
                  page(1);
                }}
              >
                搜索
              </Button>
            </Row>
          </SearchBottonsCardPlugin>
          <Table
            tableLayout="fixed"
            size="middle"
            dataSource={staffsData.data}
            style={{ padding: 16, borderRadius: 6, background: '#fff', marginTop: 16 }}
            pagination={false}
            bordered={true}
            rowKey={'user_id'}
            loading={loading}
          >
            <Table.Column title="姓名" dataIndex={'name'}></Table.Column>
            <Table.Column title="职位" dataIndex={'position'}></Table.Column>
            <Table.Column title="部门" dataIndex={'dep_name'}></Table.Column>
            <Table.Column title="手机号" dataIndex={'telephone'}></Table.Column>
          </Table>

          <Pagination
            style={{
              background: '#fff',
              borderRadius: 6,
              marginTop: 16,
              padding: 16,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
            current={param.curr_page}
            pageSize={param.page_count}
            total={staffsData.count}
            pageSizeOptions={[10, 20, 50, 100]}
            onShowSizeChange={(current, size) => {
              param.page_count = size;
              // setParam({ ...param });
              page(1);
            }}
            showTotal={(total, range) => {
              return <span style={{ lineHeight: 1 }}>共{total}条</span>;
            }}
            onChange={(curr, pageSize) => {
              page(curr);
            }}
          />
        </div>
      </div>
    </PageContainer>
  );
};

export default DepartmentsList;