落日与鲸
2025-02-28 573193bb8ba686b06b5132cd233f953cc06d310d
management/src/pages/setting/user/index.jsx
@@ -1,26 +1,44 @@
import { buildProTableDataSource, sendRequest, showDelConfirm } from '@/utils/antdUtils';
import { buildProTableDataSource, sendRequest, showDelConfirm, showConfirm } from '@/utils/antdUtils';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import { PageContainer, ProFormText, ProTable, QueryFilter } from '@ant-design/pro-components';
import { Button, Col, Menu, Row, Space } from 'antd';
import { Button, Cascader, Col, Menu, Row, Select, Space } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { Access, useAccess } from 'umi';
import AddAndEdit from './components/addAndEdit';
import { add, del, edit, getList, getUnitList } from './service';
import AddUnit from './components/addUnit';
import {
  addSystemUserInfo,
  addUnit,
  del,
  delUnit,
  editSystemUserInfo,
  editUnit,
  getList,
  getUnitList,
  systemRoleList,
  unfreezeApi,
  freezeApi,
} from './service';
const Role = () => {
  const actionRef = useRef();
  const addViewRef = useRef();
  const [modalVisible, handleModalVisibles] = useState(true);
  const addViewRef1 = useRef();
  const [modalVisible, handleModalVisibles] = useState(false);
  const [modalVisible1, handleModalVisibles1] = useState(false);
  const [roleList, setRoleList] = useState([]);
  const [unitId, setUnitId] = useState('');
  const access = useAccess();
  const [items, setItems] = useState([]);
  const { SubMenu } = Menu;
  useEffect(() => {
    getUnitList().then((res) => {
      console.log(res);
    fetchUnit();
    systemRoleList({ pageNum: 1, pageSize: 10000 }).then((res) => {
      setRoleList(() => res.data.records);
    });
  }, []);
  const items = [
    {
      key: '1',
      icon: (
  const node = (item) => {
    return (
        <div
          style={{
            display: 'flex',
@@ -29,53 +47,213 @@
            width: '100%',
          }}
        >
          <span>组织部</span>
        <span>{item.name}</span>
          <div>
          {item.tier < 4 && (
            <Access accessible={access['/system_setting/unit_management/add']}>
            <PlusOutlined
              onClick={(e) => {
                e.stopPropagation();
                console.log(e);
                  addViewRef1.current.refreshData({ ...item, type: 'add' });
                  handleModalVisibles1(true);
              }}
            />
            </Access>
          )}
          <Access accessible={access['/system_setting/unit_management/edit']}>
            <EditOutlined
              onClick={(e) => {
                e.stopPropagation();
                console.log(e);
                addViewRef1.current.refreshData({ ...item, type: 'edit' });
                handleModalVisibles1(true);
              }}
            />
          </Access>
          <Access accessible={access['/system_setting/unit_management/del']}>
            <DeleteOutlined
              onClick={(e) => {
                e.stopPropagation();
                console.log(e);
                showDelConfirm(async () => {
                  let status = await sendRequest(delUnit, item.id);
                  if (status) {
                    fetchUnit();
                  }
                }, '确认删除该单位吗?');
              }}
            />
          </Access>
          </div>
        </div>
      ),
      children: [
        {
          key: '11',
          label: 'Option 1',
        },
        {
          key: '12',
          label: 'Option 2',
        },
        {
          key: '13',
          label: 'Option 3',
        },
        {
          key: '14',
          label: 'Option 4',
        },
      ],
    },
  ];
    );
  };
  const renderMenuItems = (items) => {
    return items.map((item) => {
      if (item.children && item.children.length > 0) {
        return (
          <SubMenu
            key={item.key}
            title={node(item)}
            onTitleClick={(item) => {
              setUnitId(item.key);
              actionRef.current.reload();
            }}
          >
            {renderMenuItems(item.children)}
          </SubMenu>
        );
      }
      return (
        <Menu.Item
          onClick={(item) => {
            setUnitId(item.key);
            actionRef.current.reload();
          }}
          key={item.key}
        >
          {node(item)}
        </Menu.Item>
      );
    });
  };
  const fetchUnit = (params) => {
    getUnitList(params).then((res) => {
      if (res.code == 200 && res.data) {
        const traverseItems = (items) => {
          return items.map((item) => {
            item.key = item.id;
            item.title = '1';
            if (item.child && item.child.length > 0) {
              item.children = traverseItems(item.child);
            }
            return item;
          });
        };
        setItems(traverseItems(res.data));
      }
    });
  };
  const columns = [
    {
      title: '角色名称',
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
    },
    {
      title: '所在单位',
      dataIndex: 'departmentName',
      hideInSearch: true,
      renderFormItem: () => {
        return (
          <Cascader
            options={items}
            fieldNames={{ value: 'key', label: 'name' }}
            placeholder="请选择"
            displayRender={(label) => label[label.length - 1]}
            changeOnSelect={true}
          />
        );
      },
    },
    {
      hideInTable: true,
      title: '所在单位',
      dataIndex: 'departmentId',
      renderFormItem: () => {
        return (
          <Cascader
            options={items}
            fieldNames={{ value: 'key', label: 'name' }}
            placeholder="请选择"
            displayRender={(label) => label[label.length - 1]}
            changeOnSelect={true}
          />
        );
      },
    },
    {
      title: '所属职位',
      dataIndex: 'systemPostName',
      hideInSearch: true,
    },
    {
      title: '所属角色',
      dataIndex: 'systemRoleName',
      hideInSearch: true,
    },
    {
      title: '所属角色',
      dataIndex: 'systemRoleId',
      hideInTable: true,
      renderFormItem: () => {
        return (
          <Select
            key="searchSelect"
            allowClear
            placeholder="请选择"
            options={roleList}
            fieldNames={{ label: 'name', value: 'id' }}
            filterOption={false}
          ></Select>
        );
      },
    },
    {
      title: '账号层级',
      dataIndex: 'accountLevel',
      // (1=市级账号,2=区县账号,3=街道账号,4=社区账号)
      render: (text, record) => {
        let role = '';
        switch (record.accountLevel) {
          case 1:
            role = '市';
            break;
          case 2:
            role = '区县';
            break;
          case 3:
            role = '街道';
            break;
          case 4:
            role = '社区';
            break;
          case 5:
            role = '党员';
            break;
          default:
            role = '';
        }
        return role;
      },
      valueEnum: {
        1: '市',
        2: '区县',
        3: '街道',
        4: '社区',
        5: '党员',
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      // (1=使用中,2=已冻结)
      hideInSearch: true,
      render: (text, record) => {
        let status = '';
        switch (record.status) {
          case 1:
            status = '使用中';
            break;
          case 2:
            status = '已冻结';
            break;
          default:
            status = '';
        }
        return status;
      },
    },
    {
      title: '操作',
@@ -84,22 +262,20 @@
        return (
          <Space>
            {record.roleId != 1 && (
              <Access accessible={access['/system_setting/role_management/edit']}>
                <Button
                  type="link"
              <Access accessible={access['/system_setting/people_management/edit']}>
                <a
                  onClick={() => {
                    addViewRef.current.refreshData(record);
                    addViewRef.current.refreshData({ ...record, type: 'edit' },items);
                    handleModalVisibles(true);
                  }}
                >
                  编辑
                </Button>
                </a>
              </Access>
            )}
            {record.roleId != 1 && (
              <Access accessible={access['/system_setting/role_management/del']}>
                <Button
                  type="link"
              <Access accessible={access['/system_setting/people_management/del']}>
                <a
                  onClick={() => {
                    showDelConfirm(async () => {
                      let status = await sendRequest(del, record.id);
@@ -110,19 +286,35 @@
                  }}
                >
                  删除
                </Button>
                </a>
              </Access>
            )}
            <Access accessible={access['/system_setting/role_management/detail'] || false}>
              <Button
                type="link"
            <Access accessible={access['/system_setting/people_management/detail']}>
              <a
                onClick={() => {
                  addViewRef.current.refreshData(record, true);
                  addViewRef.current.refreshData({ ...record, type: 'detail' },items);
                  handleModalVisibles(true);
                }}
              >
                查看详情
              </Button>
              </a>
            </Access>
            <Access accessible={access['/system_setting/people_management/freeze']}>
              <a
                onClick={() => {
                  showConfirm(`确认${record.status === 1 ? '冻结' : '解冻'}该人员吗?`,'', async () => {
                    let status = await sendRequest(
                      record.status === 1 ? freezeApi : unfreezeApi,
                      record.id,
                    );
                    if (status) {
                      actionRef.current.reload();
                    }
                  });
                }}
              >
                {record.status === 1 ? '冻结' : '解冻'}
              </a>
            </Access>
          </Space>
        );
@@ -134,24 +326,41 @@
    <PageContainer
      header={{
        breadcrumb: {},
        title: '人员管理',
      }}
    >
      <div style={{ background: '#fff' }}>
        <QueryFilter>
        <QueryFilter
          onReset={(values) => {
            fetchUnit(values);
            setUnitId('');
            actionRef.current.reload();
          }}
          onFinish={(values) => {
            fetchUnit(values);
            setUnitId('');
            actionRef.current.reload();
          }}
        >
          <ProFormText name="name" label="单位名称" />
        </QueryFilter>
      </div>
      <Row style={{ marginTop: 20, background: '#fff' }}>
        <Col span={4}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['231']}
            style={{
              //   width: 256,
              height: '100%',
          <Space style={{ margin: '10px 0' }}>
            <span style={{ margin: '0 27px' }}>单位管理</span>
            <Button
              type="primary"
              onClick={() => {
                addViewRef1.current.refreshData({});
                handleModalVisibles1(true);
            }}
            items={items}
          />
            >
              添加
            </Button>
          </Space>
          <Menu mode="inline">{renderMenuItems(items)}</Menu>
        </Col>
        <Col span={20} style={{ minHeight: 650 }}>
          <ProTable
@@ -163,14 +372,28 @@
              showQuickJumper: true,
              defaultPageSize: 10,
            }}
            // request={(params) => buildProTableDataSource(getList, params)}
            search={{
              labelWidth: 'auto',
              span: 6,
              defaultCollapsed: false, // 默认是否收起
            }}
            request={(params) => {
              let obj = { ...params };
              if (unitId) {
                obj.departmentId = unitId;
              }
              if (params.departmentId) {
                obj.departmentId = params.departmentId[params.departmentId.length - 1];
              }
              return buildProTableDataSource(getList, obj);
            }}
            toolBarRender={(action, selectRows) => [
              <Access accessible={access['/system_setting/role_management/add']}>
              <Access accessible={access['/system_setting/people_management/add']}>
                <Space>
                  <Button
                    type="primary"
                    onClick={() => {
                      addViewRef.current.refreshData({});
                      addViewRef.current.refreshData({ type: 'add', unitId : unitId  },items);
                      handleModalVisibles(true);
                    }}
                  >
@@ -187,7 +410,7 @@
        ref={addViewRef}
        visible={modalVisible}
        onSave={async (fileds) => {
          let success = await sendRequest(add, fileds);
          let success = await sendRequest(addSystemUserInfo, fileds);
          if (success) {
            handleModalVisibles(false);
            actionRef.current.reload();
@@ -195,7 +418,7 @@
          addViewRef.current.clean();
        }}
        onUpdate={async (fileds) => {
          let success = await sendRequest(edit, fileds);
          let success = await sendRequest(editSystemUserInfo, fileds);
          if (success) {
            handleModalVisibles(false);
            actionRef.current.reload();
@@ -204,6 +427,25 @@
        }}
        onCancel={() => handleModalVisibles(false)}
      />
      <AddUnit
        ref={addViewRef1}
        visible={modalVisible1}
        onSave={async (fileds) => {
          let success = await sendRequest(addUnit, fileds);
          if (success) {
            handleModalVisibles1(false);
            fetchUnit();
          }
        }}
        onUpdate={async (fileds) => {
          let success = await sendRequest(editUnit, fileds);
          if (success) {
            handleModalVisibles1(false);
            fetchUnit();
          }
        }}
        onCancel={() => handleModalVisibles1(false)}
      />
    </PageContainer>
  );
};