index.jsx

/* 角色管理
 * @Author: Li Hanlin
 * @Date: 2022-11-09 14:44:44
 * @Last Modified by: Li Hanlin
 * @Last Modified time: 2022-12-30 14:10:29
 */

import * as React from 'react';
import { useState, useMemo, useRef } from 'react';
import DrawerPro from '@/components/DrawerPro';
import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';
import getcolumns from './columns';
import { doFetch } from '@/utils/doFetch';
import { message } from 'antd';
import { Drawer } from 'antd';
import PermissionTree from '@/components/PermissionTree/Permissiontree';

function Role(props) {
  const actionRef = useRef(),
    formRef = useRef();
  const [drawer, setDrawer] = useState({
    visible: false,
    authorityOpen: false,
  });

  const urlParams = {
    save: '/auth/sysRole/save',
    remove: '/auth/sysRole/deleteById',
    list: '/auth/sysRole/queryList',
    detail: '/auth/sysFactory/getById',
    person: '/auth/sysUser/queryPageByRoleId',
  };

  const detailPerson = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: 'small',
          // type: 'link',
          onClick: () => {
            setDrawer((s) => ({
              ...s,
              visible: true,
              item: row,
              title: '详情',
              val: 'only',
              type: 'person',
              title: row.roleName + ' - 人员列表',
            }));
          },
        }}
      >
        查看人员
      </PremButton>
    );
  };

  const edit = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: 'small',
          onClick: () => {
            setDrawer((s) => ({
              ...s,
              visible: true,
              item: row,
              title: '编辑',
              val: 'edit',
              onFinish: async (vals) => {
                let params = {
                  ...vals,
                  id: row.id,
                };
                let res = await doFetch({
                  url: urlParams.save,
                  params,
                });
                if (res.code === '0000') {
                  message.success('编辑成功！');
                  setDrawer((s) => ({
                    ...s,
                    visible: false,
                  }));
                  actionRef.current.reload();
                }
              },
            }));
          },
        }}
      >
        编辑
      </PremButton>
    );
  };

  const remove = (text, row, _, action) => {
    return (
      <PremButton
        pop={{
          title: '是否删除该工厂?',
          okText: '确认',
          cancelText: '取消',
          onConfirm: async () => {
            let res = await doFetch({ url: urlParams.remove, params: { id: row.id } });
            if (res.code === '0000') {
              message.success('删除成功！');
              setDrawer((s) => ({
                ...s,
                visible: false,
              }));
              actionRef.current.reload();
            }
          },
        }}
        btn={{
          size: 'small',
          type: 'danger',
        }}
      >
        删除
      </PremButton>
    );
  };

  // 权限配置
  const authority = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: 'small',
          onClick: () => {
            // const { data } = doFetch({
            //   url: '/sysRolePermission/queryAll',
            //   params: { roleId: row.id },
            // });
            // //console.log(data);
            //console.log(row);
            setDrawer((s) => ({
              ...s,
              authorityOpen: true,
              item: row,
              onFinish: async (vals) => {
                //console.log(vals);
                let res = await doFetch({
                  url: '/auth/sysRolePermission/save',
                  params: { ...vals },
                });
                //console.log(res);
                if (res.code === '0000') {
                  message.success('修改成功！');
                  setDrawer((s) => ({
                    ...s,
                    visible: false,
                  }));
                  actionRef.current.reload();
                }
              },
            }));
          },
        }}
      >
        权限配置
      </PremButton>
    );
  };

  const PersonTable = () => {
    return (
      <>
        <AutoTable
          pagetitle={false}
          columns={[
            {
              title: '用户名',
              dataIndex: 'username',
              key: 'username',
              formItemProps: { rules: [{ required: true, message: '此项为必填项' }] },
            },
            {
              title: '姓名',
              dataIndex: 'fullName',
              key: 'fullName',
              formItemProps: { rules: [{ required: true, message: '此项为必填项' }] },
            },
            {
              title: '公司名称',
              dataIndex: 'organizationName',
              key: 'organizationId',
              valueType: 'select',
              options: { path: '/auth/sysDepartment/query/organization/selectbox', params: {} },
              formItemProps: { rules: [{ required: true, message: '此项为必填项' }] },
            },
            {
              title: '部门名称',
              dataIndex: 'departmentName',
              valueType: 'treeSelect',
              key: 'departmentId',
              options: {
                path: '/auth/sysDepartment/query/children/tree',
                linkParams: {
                  organizationId: 'parentId',
                },
              },
              formItemProps: { rules: [{ required: true, message: '此项为必填项' }] },
            },
            {
              title: '工厂名称',
              dataIndex: 'factoryNames',
              key: 'factoryNames',
              formItemProps: { rules: [{ required: true, message: '此项为必填项' }] },
            },
            {
              title: '负责车间',
              dataIndex: 'shopNames',
              key: 'shopNames',
              formItemProps: { rules: [{ required: true, message: '此项为必填项' }] },
            },
          ]}
          path={urlParams.person}
          params={{ roleId: drawer?.item?.id }}
          actionRef={actionRef}
          resizeable={false}
        />
      </>
    );
  };
  // 数据分权
  const distribution = (text, row, _, action) => {};

  const columns = useMemo(() => {
    let defcolumn = getcolumns(setDrawer);
    return defcolumn.concat({
      title: '操作',
      valueType: 'option',
      width: 150,
      render: (text, row, _, action) => [
        authority(text, row, _, action),
        edit(text, row, _, action),
        remove(text, row, _, action),
        detailPerson(text, row, _, action),
      ],
    });
  }, []);

  return (
    <div style={{ position: 'relative' }}>
      <AutoTable
        pagetitle={<h3 className="page-title">角色管理</h3>}
        columns={columns}
        path={urlParams.list}
        actionRef={actionRef}
        pageextra={'add'}
        resizeable={false}
        addconfig={{
          // access: 'sysDepartment_save',
          btn: {
            type: 'primary',
            disabled: false,
            onClick: () => {
              setDrawer((s) => ({
                ...s,
                visible: true,
                item: null,
                detailpath: null,
                title: '新增',
                val: 'add',
                onFinish: async (vals) => {
                  //console.log(1);
                  let params = {
                    ...vals,
                  };
                  let res = await doFetch({
                    url: urlParams.save,
                    params,
                  });
                  if (res.code === '0000') {
                    message.success('新增成功！');
                    setDrawer((s) => ({
                      ...s,
                      visible: false,
                    }));
                    actionRef.current.reload();
                  }
                },
              }));
            },
          },
        }}
      />

      <DrawerPro
        fields={columns}
        // detailpath={urlParams.detail}
        // params={{ id: drawer?.item?.id }}
        defaultFormValue={drawer?.item ?? {}}
        formRef={formRef}
        placement="right"
        onClose={() => {
          setDrawer((s) => ({
            ...s,
            visible: false,
          }));
        }}
        {...drawer}
      >
        {drawer.type == 'person' ? <PersonTable /> : null}
      </DrawerPro>

      <Drawer
        title="角色权限"
        onClose={() => {
          setDrawer((s) => ({
            ...s,
            authorityOpen: false,
          }));
        }}
        open={drawer.authorityOpen}
        destroyOnClose
      >
        <PermissionTree
          id={drawer?.item?.id}
          close={() => {
            setDrawer((s) => ({
              ...s,
              authorityOpen: false,
              item: null,
            }));
            actionRef.current.reload();
          }}
          treeType="auth"
        />
      </Drawer>
    </div>
  );
}

export default Role;