|
@@ -1,22 +1,34 @@
|
|
|
/*
|
|
|
* @Author: your name
|
|
|
* @Date: 2022-01-13 15:22:48
|
|
|
- * @LastEditTime: 2022-03-03 14:27:58
|
|
|
- * @LastEditors: Please set LastEditors
|
|
|
+ * @LastEditTime: 2023-03-21 11:23:55
|
|
|
+ * @LastEditors: code4eat awesomedema@gmail.com
|
|
|
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
|
* @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/hospManage/index.tsx
|
|
|
*/
|
|
|
|
|
|
-import { FC } from 'react';
|
|
|
+import { FC, useEffect, useState } from 'react';
|
|
|
import { roleManageModelState, ConnectProps, Loading, connect } from 'umi';
|
|
|
-import { Button, Divider, Popconfirm } from 'antd';
|
|
|
+import {Checkbox, Divider, Dropdown, Input, Popconfirm, Table, TreeProps } from 'antd';
|
|
|
import KCTable from '@/components/kcTable';
|
|
|
import type { ProColumns } from '@ant-design/pro-table';
|
|
|
-import { getAllRoles, getRoleHasBindMenus, getRoleHasBindUsers } from '@/service/role';
|
|
|
+import { getAllRoles, getRoleHasBindMenus, getRoleHasBindUsers, getRolePermRelaMenu, initRoleFunc, saveRoleRelaApiPerm } from '@/service/role';
|
|
|
import { TableRequestParamsType } from '@/typings';
|
|
|
import ActModal from './modals/modal';
|
|
|
import './style.less';
|
|
|
import type { RoleItemType as TableListItem } from '@/service/role';
|
|
|
+import { KCInput } from '@/components/KCInput';
|
|
|
+import { createFromIconfontCN, DownOutlined } from '@ant-design/icons';
|
|
|
+import { getMenuRelaPerm, saveHospMenuApiPerm } from '@/service/hospList';
|
|
|
+import { getTreeData, getTreeDataRespType } from '../systemNavMana/service';
|
|
|
+import { CheckboxValueType } from 'antd/lib/checkbox/Group';
|
|
|
+import { getDeepestTreeData } from '@/utils';
|
|
|
+import { DrawerForm } from '@ant-design/pro-form';
|
|
|
+import { DataNode } from 'antd/es/tree';
|
|
|
+
|
|
|
+import expandedIcon from '../../../../../public/images/treenode_open.png';
|
|
|
+import closeIcon from '../../../../../public/images/treenode_collapse.png';
|
|
|
+import DirectoryTree from 'antd/es/tree/DirectoryTree';
|
|
|
|
|
|
export enum TableActType {
|
|
|
NOACT,
|
|
@@ -32,9 +44,17 @@ interface PageProps extends ConnectProps {
|
|
|
loading: boolean;
|
|
|
}
|
|
|
|
|
|
+const SearchIcon = createFromIconfontCN({
|
|
|
+ scriptUrl: '//at.alicdn.com/t/c/font_1927152_g1njmm1kh7b.js',
|
|
|
+});
|
|
|
+
|
|
|
const RoleManage: FC<PageProps> = ({ roleManageModel: state, dispatch }) => {
|
|
|
const { reloadTable } = state;
|
|
|
|
|
|
+ const [tableDataFilterParams, set_tableDataFilterParams] = useState<any | undefined>();
|
|
|
+ const [tableDataSearchKeywords, set_tableDataSearchKeywords] = useState<string>('');
|
|
|
+ const [drawerVisible, set_drawerVisible] = useState(false);
|
|
|
+
|
|
|
const columns: ProColumns<TableListItem>[] = [
|
|
|
{
|
|
|
title: 'ID',
|
|
@@ -76,10 +96,6 @@ const RoleManage: FC<PageProps> = ({ roleManageModel: state, dispatch }) => {
|
|
|
用户
|
|
|
</a>,
|
|
|
<Divider key="3" type="vertical" style={{ margin: '0 1px' }} />,
|
|
|
- <a key="link3" onClick={() => editMenuBind(record)}>
|
|
|
- 菜单
|
|
|
- </a>,
|
|
|
- <Divider key="2" type="vertical" style={{ margin: '0 1px' }} />,
|
|
|
<a key="link" onClick={() => editHandle(record)}>
|
|
|
编辑
|
|
|
</a>,
|
|
@@ -94,10 +110,527 @@ const RoleManage: FC<PageProps> = ({ roleManageModel: state, dispatch }) => {
|
|
|
>
|
|
|
<a>删除</a>
|
|
|
</Popconfirm>,
|
|
|
+ <Divider key="9" type="vertical" style={{ margin: '0 1px' }} />,
|
|
|
+ <Dropdown key='4' menu={{
|
|
|
+ items: [
|
|
|
+ { key:'0',label: <a key="link3" onClick={() => editMenuBind(record)}>菜单</a>},
|
|
|
+ { key: '5', label: <DrawerActBtn key="link7" record={record} /> },
|
|
|
+ { key: '2', label: <a key="link4" onClick={() => initRoleData('func',record)} >初始化功能</a> },
|
|
|
+ //{ key: '6', label: <a key="link6" onClick={() => initRoleData('read',record)}>初始化只读</a> },
|
|
|
+ ]
|
|
|
+ }}>
|
|
|
+ <a>
|
|
|
+ 更多 <DownOutlined />
|
|
|
+ </a>
|
|
|
+ </Dropdown>
|
|
|
],
|
|
|
},
|
|
|
+
|
|
|
];
|
|
|
|
|
|
+ const DrawerActBtn = ({ record }: { record: any }) => {
|
|
|
+
|
|
|
+
|
|
|
+ const [treeData, set_treeData] = useState<getTreeDataRespType[]>([]);
|
|
|
+ const [currentSelectedTreeNode, set_currentSelectedTreeNode] = useState<any | undefined>(undefined);
|
|
|
+ const [drawerTablereload, set_drawerTablereload] = useState(false);
|
|
|
+ const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
|
|
|
+ const [searchValue, setSearchValue] = useState('');
|
|
|
+ const [autoExpandParent, setAutoExpandParent] = useState(true);
|
|
|
+ const [drawerTableDataFilterParams, set_drawerTableDataFilterParams] = useState<any | undefined>();
|
|
|
+
|
|
|
+ const [checkBoxCodes, set_checkBoxCodes] = useState<any[]>([]);
|
|
|
+
|
|
|
+
|
|
|
+ const [drawerTableDataSearchKeywords, set_drawerTableDataSearchKeywords] = useState<string>('');
|
|
|
+
|
|
|
+ const [checkedTableMenuIds, set_checkedTableMenuIds] = useState<any[]>([]);
|
|
|
+
|
|
|
+ const columnsData: ProColumns<TableListItem>[] = [
|
|
|
+ {
|
|
|
+ title: '名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ width: 300,
|
|
|
+ ellipsis: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '类型',
|
|
|
+ width: 50,
|
|
|
+ dataIndex: 'contentType',
|
|
|
+ key: 'contentType',
|
|
|
+ render: (_: any, record: any) => {
|
|
|
+ //console.log({ record });
|
|
|
+ switch (record.type) {
|
|
|
+ case 0:
|
|
|
+ return '目录'
|
|
|
+ case 1:
|
|
|
+ return '菜单'
|
|
|
+ case 2:
|
|
|
+ return 'api'
|
|
|
+ case 3:
|
|
|
+ return '系统'
|
|
|
+ case 4:
|
|
|
+ return '有数bi'
|
|
|
+ case 5:
|
|
|
+ return '体系'
|
|
|
+ case 6:
|
|
|
+ return '中心层'
|
|
|
+ case 7:
|
|
|
+ return '平台层'
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '功能',
|
|
|
+ dataIndex: 'deptName',
|
|
|
+ key: 'deptName',
|
|
|
+ render: (_: any, record: any) => {
|
|
|
+
|
|
|
+ if (record.functionList) {
|
|
|
+ const options = record.functionList.map((item: any, index: number) => ({ label: item.name, value: item.code }))
|
|
|
+
|
|
|
+ const needItem = checkBoxCodes.filter(a => a.menuId == record.menuId);
|
|
|
+
|
|
|
+ const codes = needItem && needItem.length > 0 ? needItem[0].function.map((a: any) => a.code) : [];
|
|
|
+
|
|
|
+ const onCheckGroupChange = (checkedValue: CheckboxValueType[]) => {
|
|
|
+
|
|
|
+ if (checkedValue.length > 0) {
|
|
|
+ const _temp = checkBoxCodes;
|
|
|
+ const index = checkBoxCodes.findIndex((item) => item.menuId == record.menuId);
|
|
|
+
|
|
|
+
|
|
|
+ const needed = options.filter((item: any) => checkedValue.includes(item.value));
|
|
|
+ const transfered = needed.map((item: any) => ({ name: item.label, code: item.value }));
|
|
|
+
|
|
|
+ if (index >= 0) {
|
|
|
+ //先去除旧的的对象
|
|
|
+ _temp.splice(index, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ _temp.push({
|
|
|
+ menuId: record.menuId,
|
|
|
+ function: transfered
|
|
|
+ });
|
|
|
+
|
|
|
+ const menuIdsArr = _temp.map((item: any) => item.menuId);
|
|
|
+
|
|
|
+ set_checkedTableMenuIds([...menuIdsArr])
|
|
|
+
|
|
|
+ set_checkBoxCodes([..._temp]);
|
|
|
+ } else {
|
|
|
+ //取消选择
|
|
|
+ const _temp = checkBoxCodes;
|
|
|
+ const index = checkBoxCodes.findIndex((item) => item.menuId == record.menuId);
|
|
|
+
|
|
|
+ _temp.splice(index, 1);
|
|
|
+
|
|
|
+ const menuIdsArr = _temp.map((item: any) => item.menuId);
|
|
|
+ set_checkedTableMenuIds([...menuIdsArr])
|
|
|
+ set_checkBoxCodes([..._temp]);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Checkbox.Group
|
|
|
+ options={options}
|
|
|
+ value={codes}
|
|
|
+ onChange={(checkedValue: CheckboxValueType[]) => onCheckGroupChange(checkedValue)}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return '-'
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const getTreeReqFunc = async (name?: string) => {
|
|
|
+ const resp = await getTreeData();
|
|
|
+ set_treeData(resp);
|
|
|
+ }
|
|
|
+
|
|
|
+ const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
|
|
|
+ //console.log('selected', selectedKeys, info);
|
|
|
+ const { node } = info;
|
|
|
+ set_currentSelectedTreeNode(node);
|
|
|
+ };
|
|
|
+
|
|
|
+ const dataList: any[] = [];
|
|
|
+
|
|
|
+ const getParentKey = (key: React.Key, tree: any[]): React.Key => {
|
|
|
+ let parentKey: React.Key;
|
|
|
+ for (let i = 0; i < tree.length; i++) {
|
|
|
+ const node = tree[i];
|
|
|
+ if (node.children) {
|
|
|
+ if (node.children.some((item: { code: React.Key; }) => item.code === key)) {
|
|
|
+ parentKey = node.code;
|
|
|
+ } else if (getParentKey(key, node.children)) {
|
|
|
+ parentKey = getParentKey(key, node.children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return parentKey!;
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ const onTreeSearchKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+
|
|
|
+ const { value } = e.target;
|
|
|
+ const newExpandedKeys = dataList
|
|
|
+ .map((item) => {
|
|
|
+ if (item.name.indexOf(value) > -1) {
|
|
|
+ return getParentKey(item.code, treeData);
|
|
|
+ }
|
|
|
+ return null;
|
|
|
+ });
|
|
|
+
|
|
|
+ const b = newExpandedKeys.filter((item, i, self) => item && self.indexOf(item) === i);
|
|
|
+
|
|
|
+ setExpandedKeys(newExpandedKeys as React.Key[]);
|
|
|
+ setSearchValue(value);
|
|
|
+ setAutoExpandParent(true);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const onExpand = (newExpandedKeys: React.Key[]) => {
|
|
|
+ setExpandedKeys(newExpandedKeys);
|
|
|
+ setAutoExpandParent(false);
|
|
|
+ };
|
|
|
+
|
|
|
+ const generateList = (data: getTreeDataRespType[]) => {
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ const node = data[i];
|
|
|
+ const { code, name } = node;
|
|
|
+ dataList.push({ code, name: name });
|
|
|
+ if (node.children) {
|
|
|
+ generateList(node.children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ generateList(treeData as any);
|
|
|
+
|
|
|
+
|
|
|
+ const getTableData = async (params: any, sort: any, filter: any) => {
|
|
|
+
|
|
|
+ set_drawerTablereload(false);
|
|
|
+ if (currentSelectedTreeNode) {
|
|
|
+ // console.log({params,record});
|
|
|
+ const resp = await getRolePermRelaMenu({ ...params, hospId: record.hospId,roleId:record.roleId});
|
|
|
+ if (resp) {
|
|
|
+ let temp: { menuId: any; function: any; }[] = [];
|
|
|
+ const setTreeRecursion = (data: any) => {
|
|
|
+ data.map((item: any, index: number) => {
|
|
|
+
|
|
|
+
|
|
|
+ if (item.type == 1 && item.functionCheckList) {
|
|
|
+ //菜单
|
|
|
+ temp.push({
|
|
|
+ menuId: item.menuId,
|
|
|
+ function: item.functionCheckList
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.children && item.children.length != 0) {
|
|
|
+ setTreeRecursion(item.children);
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ set_checkBoxCodes(temp);
|
|
|
+ set_checkedTableMenuIds(temp.map((a: any) => a.menuId));
|
|
|
+ return data;
|
|
|
+ }
|
|
|
+
|
|
|
+ setTreeRecursion(resp)
|
|
|
+
|
|
|
+ return {
|
|
|
+ data: resp,
|
|
|
+ success: true,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ data: [],
|
|
|
+ success: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return []
|
|
|
+ }
|
|
|
+
|
|
|
+ const saveResult = async () => {
|
|
|
+ const result = checkBoxCodes.map((item: any) => ({ ...item, hospId: record.hospId,roleId:record.roleId }))
|
|
|
+ const resp = await saveRoleRelaApiPerm(result);
|
|
|
+ if (resp) {
|
|
|
+ set_drawerTablereload(true);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const onCancel = () => {
|
|
|
+ set_drawerVisible(false);
|
|
|
+ }
|
|
|
+
|
|
|
+ const drawerTableDataSearchHandle = (paramName: string) => {
|
|
|
+
|
|
|
+
|
|
|
+ set_drawerTableDataFilterParams({
|
|
|
+ ...drawerTableDataFilterParams,
|
|
|
+ [`${paramName}`]: drawerTableDataSearchKeywords
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const oneKeySetReadOnly = (bool:boolean)=>{
|
|
|
+
|
|
|
+ if(bool){
|
|
|
+ const _temp = checkBoxCodes.map((item:any)=>{
|
|
|
+ const needed = item.function.filter((a:any)=>a.code == 'search');
|
|
|
+ return {...item,function:needed}
|
|
|
+ })
|
|
|
+ set_checkBoxCodes([..._temp]);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (currentSelectedTreeNode) {
|
|
|
+ set_drawerTableDataFilterParams({ ...tableDataFilterParams, systemId: currentSelectedTreeNode.code })
|
|
|
+ }
|
|
|
+
|
|
|
+ //切换系统清空数据
|
|
|
+ set_checkBoxCodes([]);
|
|
|
+ set_checkedTableMenuIds([]);
|
|
|
+
|
|
|
+ }, [currentSelectedTreeNode]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ //初始化左侧树结构数据后
|
|
|
+
|
|
|
+ if (treeData?.length > 0) {
|
|
|
+
|
|
|
+ if (treeData[0].children && treeData[0].children.length > 0) {
|
|
|
+ const [node, nodeParent] = getDeepestTreeData(treeData[0], 'children');
|
|
|
+
|
|
|
+ set_currentSelectedTreeNode(node);
|
|
|
+ setExpandedKeys([nodeParent.code]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, [treeData]);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getTreeReqFunc();
|
|
|
+
|
|
|
+ }, []);
|
|
|
+
|
|
|
+
|
|
|
+ return (
|
|
|
+ <DrawerForm
|
|
|
+ trigger={
|
|
|
+ <a key="link3" onClick={(e) => { set_drawerVisible(true); }}>功能</a>
|
|
|
+ }
|
|
|
+ width={908}
|
|
|
+ // visible={drawerVisible}
|
|
|
+ drawerProps={{
|
|
|
+ open: drawerVisible,
|
|
|
+ closable: false,
|
|
|
+ destroyOnClose: true,
|
|
|
+ extra: <div>anniu</div>,
|
|
|
+ }}
|
|
|
+ submitter={false}
|
|
|
+ >
|
|
|
+ <div className='setApiPermDrawer'>
|
|
|
+ <div className='topbar'>
|
|
|
+ <div className='title'>{`院区功能权限设置(${record.hospName})`}</div>
|
|
|
+ <div className='btnGroup'>
|
|
|
+ <span className='cancel' onClick={() => onCancel()}>取消</span>
|
|
|
+ <span className='save' onClick={() => saveResult()}>保存</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className='content'>
|
|
|
+ <div className='leftTree'>
|
|
|
+ <div className='search'>
|
|
|
+ <Input
|
|
|
+ className='searchInput'
|
|
|
+ placeholder="请输入"
|
|
|
+ size='small'
|
|
|
+ allowClear
|
|
|
+
|
|
|
+ style={{ marginBottom: 16 }}
|
|
|
+ onChange={onTreeSearchKeyChange}
|
|
|
+ suffix={
|
|
|
+ <SearchIcon type='iconsousuo' />
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ treeData && treeData.length > 0 && (
|
|
|
+ <DirectoryTree
|
|
|
+ fieldNames={{ title: 'name', key: 'code' }}
|
|
|
+ rootStyle={{ height: '100%', paddingBottom: 50, overflowY: 'scroll', overflowX: 'hidden' }}
|
|
|
+ onSelect={onSelect}
|
|
|
+ onExpand={onExpand}
|
|
|
+ expandedKeys={expandedKeys}
|
|
|
+ autoExpandParent={autoExpandParent}
|
|
|
+ selectedKeys={currentSelectedTreeNode ? [currentSelectedTreeNode.code] : []}
|
|
|
+ blockNode={true}
|
|
|
+ icon={() => null}
|
|
|
+ titleRender={
|
|
|
+ (nodeData: any) => {
|
|
|
+
|
|
|
+ const strTitle = nodeData.name as string;
|
|
|
+ const index = strTitle.indexOf(searchValue);
|
|
|
+ const beforeStr = strTitle.substring(0, index);
|
|
|
+ const afterStr = strTitle.slice(index + searchValue.length);
|
|
|
+ const title =
|
|
|
+ index > -1 ? (
|
|
|
+ <span>
|
|
|
+ {beforeStr}
|
|
|
+ <span className="site-tree-search-value" style={{ color: 'red', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{searchValue}</span>
|
|
|
+ {afterStr}
|
|
|
+ </span>
|
|
|
+ ) : (
|
|
|
+ <span className='strTitle'>{strTitle}</span>
|
|
|
+ );
|
|
|
+ return <div style={{
|
|
|
+ display: 'flex', flexDirection: 'row',
|
|
|
+ width: '100%',
|
|
|
+ justifyContent: 'flex-start', alignItems: 'center', height: 32,
|
|
|
+ borderRadius: '4px',
|
|
|
+ overflow: 'hidden',
|
|
|
+ color: '#17181A',
|
|
|
+ textOverflow: 'ellipsis',
|
|
|
+ whiteSpace: 'nowrap'
|
|
|
+
|
|
|
+ }}>{title}</div>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ defaultSelectedKeys={[treeData[0].children[0].code]}
|
|
|
+ treeData={treeData as unknown as DataNode[]}
|
|
|
+ switcherIcon={(props: any) => {
|
|
|
+ const { expanded } = props;
|
|
|
+ //return <button className='site-table-row-expand-icon site-table-row-expand-icon-expanded'></button>
|
|
|
+ return !expanded ? <img style={{ width: 20, height: 20, position: 'relative', top: 5 }} src={expandedIcon} /> : <img style={{ width: 20, height: 20, position: 'relative', top: 5 }} src={closeIcon} />
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ {/* <div style={{width:16,height:'92vh',background:'#F5F7FA'}}></div> */}
|
|
|
+ <div className='rightContent'>
|
|
|
+ <div className='tableToolbar'>
|
|
|
+ <div className='filter'>
|
|
|
+ <div className='filterItem'>
|
|
|
+ <span className='label'>检索:</span>
|
|
|
+ <KCInput placeholder={'请输入'} style={{ width: 160 }} search allowClear
|
|
|
+ onChange={(e) => {
|
|
|
+ set_drawerTableDataSearchKeywords(e.target.value);
|
|
|
+ if (e.target.value.length == 0) {
|
|
|
+ set_drawerTableDataFilterParams({
|
|
|
+ ...drawerTableDataFilterParams,
|
|
|
+ name: ''
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onSearch={() => drawerTableDataSearchHandle('name')}
|
|
|
+
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className={'btnGroup'}>
|
|
|
+ {/* <a style={{color: '#17181A'}}><Switch style={{position:'relative',marginRight:4}} size='small' onChange={(bool)=>oneKeySetReadOnly(bool)} />只读</a> */}
|
|
|
+ {/* <UpDataActBtn key={'act'} record={undefined} type='ADD' /> */}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ {currentSelectedTreeNode && <KCTable
|
|
|
+ rowSelection={{
|
|
|
+ // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
|
|
|
+ // 注释该行则默认不显示下拉选项
|
|
|
+ checkStrictly: false,
|
|
|
+ onChange(selectedRowKeys, selectedRows, info) {
|
|
|
+ //console.log({selectedRowKeys, selectedRows, info});
|
|
|
+ if (selectedRowKeys.length == 0) {
|
|
|
+ set_checkedTableMenuIds([]);
|
|
|
+ }
|
|
|
+ if (selectedRows.length == 0) {
|
|
|
+ set_checkBoxCodes([]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectedRowKeys: checkedTableMenuIds,
|
|
|
+ selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
|
|
|
+ onSelect: (record, selected, selectedRows, nativeEvent) => {
|
|
|
+ //console.log({ record, selected, selectedRows, nativeEvent });
|
|
|
+ let checkedData = checkBoxCodes;
|
|
|
+ if (selected) {
|
|
|
+ //选中
|
|
|
+ selectedRows.forEach(a => {
|
|
|
+ if (a.functionList) {
|
|
|
+ checkedData.push({
|
|
|
+ menuId: a.menuId,
|
|
|
+ function: a.functionList
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //更新表格row选中状态
|
|
|
+ if (record.type == 0) {
|
|
|
+ //选中的是目录
|
|
|
+ const ids = record.children.map((item: any) => item.menuId);
|
|
|
+ set_checkedTableMenuIds([...checkedTableMenuIds, ...ids]);
|
|
|
+ }
|
|
|
+ if (record.type == 1) {
|
|
|
+ //菜单
|
|
|
+ set_checkedTableMenuIds([...checkedTableMenuIds, record.menuId]);
|
|
|
+
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (record.type == 0) {
|
|
|
+ //目录
|
|
|
+ if (record.children) {
|
|
|
+ record.children.forEach((element: any) => {
|
|
|
+ const index = checkedData.findIndex((item) => item.menuId == record.menuId);
|
|
|
+ checkedData.splice(index, 1);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const ids = record.children.map((item: any) => item.menuId);
|
|
|
+ const leftIds = checkedTableMenuIds.filter((id: number) => !ids.includes(id)); //筛选出剩余选中项
|
|
|
+ set_checkedTableMenuIds([...leftIds]);
|
|
|
+
|
|
|
+ } else if (record.type == 1) {
|
|
|
+ //菜单
|
|
|
+ const temp = checkedTableMenuIds;
|
|
|
+ const index = checkedData.findIndex((item) => item.menuId == record.menuId);
|
|
|
+ const menuIdIndex = checkedTableMenuIds.findIndex((item) => item == record.menuId);
|
|
|
+ checkedData.splice(index, 1);
|
|
|
+ temp.splice(menuIdIndex, 1);
|
|
|
+ set_checkedTableMenuIds([...temp]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //console.log({ checkedData });
|
|
|
+
|
|
|
+ set_checkBoxCodes([...checkedData]);
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ pagination={false} reload={drawerTablereload} newVer params={drawerTableDataFilterParams} rowKey='menuId' columns={columnsData as ProColumns[]} request={(params: any, sort: any, filter: any) => getTableData(params, sort, filter)} />}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </DrawerForm>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
const getData = async (params: TableRequestParamsType) => {
|
|
|
const { current = 1, pageSize = 10, roleName } = params;
|
|
|
const resp = await getAllRoles({
|
|
@@ -164,39 +697,86 @@ const RoleManage: FC<PageProps> = ({ roleManageModel: state, dispatch }) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ const tableDataSearchHandle = (paramName: string) => {
|
|
|
+
|
|
|
+
|
|
|
+ set_tableDataFilterParams({
|
|
|
+ ...tableDataFilterParams,
|
|
|
+ [`${paramName}`]: tableDataSearchKeywords
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
const editUserBind = async (record: TableListItem) => {
|
|
|
//编辑角色与人员的绑定关系
|
|
|
- const { userIds = [],users=[] } = await getRoleHasBindUsers({
|
|
|
+ const { userIds = [], users = [] } = await getRoleHasBindUsers({
|
|
|
hospId: record.hospId,
|
|
|
roleId: record.roleId,
|
|
|
});
|
|
|
dispatch &&
|
|
|
dispatch({
|
|
|
- type: 'roleManageModel/edit',
|
|
|
+ type: 'roleManageModel/reloadTable',
|
|
|
payload: {
|
|
|
- data: { ...record, bindUserIds: userIds,allUsers:users },
|
|
|
+ data: { ...record, bindUserIds: userIds, allUsers: users },
|
|
|
act: TableActType.EDITRELAUSER,
|
|
|
isShowModal: true,
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ const initRoleData =async (type:string,record:any) => {
|
|
|
+ if(type == 'func'){
|
|
|
+ const resp = await initRoleFunc({roleId:record.roleId,hospId:record.hospId});
|
|
|
+ if(resp){
|
|
|
+ dispatch &&
|
|
|
+ dispatch({
|
|
|
+ type: 'roleManageModel/reloadTable',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
// console.log({state});
|
|
|
|
|
|
return (
|
|
|
<div className="RoleManage">
|
|
|
<ActModal {...state} dispatch={dispatch} />
|
|
|
|
|
|
+ <div className='toolBar'>
|
|
|
+ <div className='filter'>
|
|
|
+ <div className='filterItem'>
|
|
|
+ <span className='label'>检索:</span>
|
|
|
+ <KCInput placeholder={'请输入角色名称'} style={{ width: 160 }} search allowClear
|
|
|
+ onChange={(e) => {
|
|
|
+ set_tableDataSearchKeywords(e.target.value);
|
|
|
+ if (e.target.value.length == 0) {
|
|
|
+ set_tableDataFilterParams({
|
|
|
+ ...tableDataFilterParams,
|
|
|
+ hospName: ''
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ onSearch={() => tableDataSearchHandle('hospName')}
|
|
|
+
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className='btnGroup'>
|
|
|
+ <span className='add' onClick={addHandle}>新增</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<KCTable
|
|
|
rowKey="roleId"
|
|
|
- headerTitle="查询表格"
|
|
|
columns={columns}
|
|
|
+ options={false}
|
|
|
+ newVer
|
|
|
reload={reloadTable}
|
|
|
- toolBarRender={() => [
|
|
|
- <Button key="3" type="primary" onClick={addHandle}>
|
|
|
- 新增角色
|
|
|
- </Button>,
|
|
|
- ]}
|
|
|
+ // toolBarRender={() => [
|
|
|
+ // <Button key="3" type="primary" onClick={addHandle}>
|
|
|
+ // 新增角色
|
|
|
+ // </Button>,
|
|
|
+ // ]}
|
|
|
request={(params) => getData(params)}
|
|
|
/>
|
|
|
</div>
|