1149 lines
40 KiB
TypeScript
1149 lines
40 KiB
TypeScript
/*
|
||
* @Author: cclu
|
||
* @Date: 2021-12-13 11:01:23
|
||
* @LastEditTime: 2024-08-30 10:20:24
|
||
* @LastEditors: cclu 1106109051@qq.com
|
||
* @Description: 角色管理
|
||
* @FilePath: \cloud-platform\src\pages\Setting\Roles\index.tsx
|
||
*/
|
||
|
||
import ProTable from "@ant-design/pro-table";
|
||
import useRequest from "@ahooksjs/use-request";
|
||
import React, { useState, useRef } from "react";
|
||
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
|
||
import { PageContainer } from "@ant-design/pro-layout";
|
||
import ProDescriptions from "@ant-design/pro-descriptions";
|
||
import {
|
||
Button,
|
||
Drawer,
|
||
Form,
|
||
message,
|
||
Popconfirm,
|
||
TreeSelect,
|
||
Switch,
|
||
Row,
|
||
Col,
|
||
Tree,
|
||
Card,
|
||
Space,
|
||
Badge,
|
||
Tabs
|
||
} from 'antd';
|
||
import { ModalForm, ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form";
|
||
|
||
import type { FormInstance } from 'antd';
|
||
import type { SystemRoleModel } from "./data";
|
||
import type { CurrentUser } from '@/models/user';
|
||
import type { ConnectState } from "@/models/connect";
|
||
import type { ProColumns, ActionType } from '@ant-design/pro-table';
|
||
import type { ProDescriptionsItemProps } from "@ant-design/pro-descriptions"
|
||
|
||
import {
|
||
deleteRole,
|
||
getRoleList,
|
||
updataRole,
|
||
getSystemMenuTree,
|
||
getSystemRoleDetail,
|
||
getSystemRoleCount,
|
||
handleSynchroUserSystemRoleDetailList,
|
||
newUpdataRole, handleGetUserList, handleGetSYSTEMROLEDetail
|
||
} from './service'
|
||
|
||
import { connect } from "umi";
|
||
import { getOnwer } from "@/services/options";
|
||
import ProCard from "@ant-design/pro-card";
|
||
import { getUserList, getUserTypeTree } from "@/pages/Setting/Users/service";
|
||
import type { UserModel } from "@/pages/Setting/Users/data";
|
||
import './style.less'
|
||
import moment from "moment";
|
||
import { synchroBehaviorRecord } from "@/services/user";
|
||
import session from "@/utils/session";
|
||
|
||
/**
|
||
* @description: 新增或更新角色信息
|
||
* @param {item} 角色对象
|
||
* @return {boolean} 是否成功
|
||
*/
|
||
const handleAddUpdate = async (item: SystemRoleModel) => {
|
||
const loading = message.loading("正在提交...")
|
||
|
||
const result = await newUpdataRole(item as SystemRoleModel)
|
||
loading()
|
||
if (result.Result_Code !== 100) {
|
||
message.error(`${result.Result_Desc}` || `${result.Result_Code}:提交失败`)
|
||
return false
|
||
}
|
||
|
||
|
||
|
||
message.success(item.SYSTEMROLE_ID ? "更新成功！" : "新建成功！")
|
||
return result
|
||
}
|
||
/**
|
||
* @description: 删除角色
|
||
* @param {string} SYSTEMROLE_ID 角色id
|
||
* @return {boolean}
|
||
*/
|
||
const handleDelete = async (SYSTEMROLE_ID: number) => {
|
||
const hide = message.loading('正在删除...');
|
||
try {
|
||
const result = await deleteRole(SYSTEMROLE_ID)
|
||
|
||
hide();
|
||
if (result.Result_Code !== 100) {
|
||
message.error(`${result.Result_Code}:删除失败`)
|
||
return false
|
||
}
|
||
message.success("删除成功！")
|
||
return true
|
||
} catch (error) {
|
||
hide();
|
||
message.error("删除失败")
|
||
return false
|
||
}
|
||
}
|
||
|
||
// 数字角标生成
|
||
const renderBadge = (count: number, active = false) => {
|
||
return (
|
||
<Badge
|
||
count={count}
|
||
style={{
|
||
marginTop: -2,
|
||
marginLeft: 4,
|
||
color: active ? '#1890FF' : '#999',
|
||
backgroundColor: active ? '#E6F7FF' : '#eee',
|
||
}}
|
||
/>
|
||
);
|
||
};
|
||
|
||
// 角色管理 页面主体函数
|
||
const RoleList: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
|
||
|
||
const { currentUser } = props
|
||
const actionRef = useRef<ActionType>();
|
||
const actionUserRef = useRef<ActionType>();
|
||
const formRef = useRef<FormInstance>();
|
||
const formUserRef = useRef<FormInstance>();
|
||
const [roleTree, setRoleTree] = useState<any[]>(); // 树结构数据菜单 用于弹出编辑时选择上级角色
|
||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||
const [currentRow, setCurrentRow] = useState<SystemRoleModel | any>(); // 当前选中的行 角色
|
||
const [rowDetail, setRowDetail] = useState<any>(); // 当前选中的行 角色
|
||
const [roleCheckedMenu, setRoleCheckedMenu] = useState<React.Key[]>(); // 当前选中的行 角色 roleCheckedMenu 格式为[2-x,1-x] 2-为模块，1-为menu
|
||
const [createModalVisible, handleModalVisible] = useState<boolean>(false); // 分布更新窗口的弹窗
|
||
|
||
// 判断是否点击了表格的查询按钮
|
||
const clickTableBtnRef = useRef<boolean>(false)
|
||
|
||
const [activeKey, setActiveKey] = useState<React.Key>(`${currentUser?.UserPattern}`); // 树结构数据分类 用于弹出编辑时选择上级
|
||
// 更上一层的tab选择
|
||
const [bigTabSelect, setBigTabSelect] = useState<string>('1')
|
||
// 查询系统角色数量
|
||
const { loading: typeCountLoading, data: typeCount } = useRequest(getSystemRoleCount)
|
||
// 根据角色id查询权限树
|
||
const { run: getRoleMenu, data: roleMenuTree } = useRequest(async (SystemRoleId?: number) => {
|
||
const data = await getSystemMenuTree(SystemRoleId ? `${SystemRoleId}` : '')
|
||
return data
|
||
}, { manual: true })
|
||
|
||
// const ueserCloudTab = currentUser?.UserPattern === 9000 ? leftTab : currentUser?.UserPattern === 1000 ?[{ key: `1000`, name: '业主' },{ key: `4000`, name: '供应商' }]:leftTab.filter(n => n.key === `${currentUser?.UserPattern}`)
|
||
// const { run: getUserTypeMenu, loading: typeLoading, data: userTypeTree } = useRequest((type) => getUserTypeTree({ UserTypePattern: type }))
|
||
const [userTypeId, setUserTypeId] = useState<any>();
|
||
// 请求角色树的loading
|
||
const [roleLoading, setRoleLoading] = useState<boolean>(false)
|
||
// 角色树数据
|
||
const [roleTreeData, setRoleTreeData] = useState<any>()
|
||
// 角色类型树默认选择
|
||
const [defaultRoleTree, setDefaultRoleTree] = useState<any>()
|
||
// 选择行的详情
|
||
const [selectRowDetail, setSelectRowDetail] = useState<any>()
|
||
// 默认选择的人
|
||
const [defaultSelectRole, setDefaultSelectRole] = useState<any>()
|
||
// 用戶列表
|
||
const [userList, setUserList] = useState<any>()
|
||
// 搜索条件
|
||
const [searchParams, setSearchParams] = useState<any>()
|
||
// 用戶列表数据
|
||
const [userTableData, setUserTableData] = useState<any>()
|
||
// loading
|
||
const [tableLoading, setTableLoading] = useState<boolean>(false)
|
||
// 表格配置列数据
|
||
const columns: ProColumns<SystemRoleModel>[] = [
|
||
{
|
||
title: '角色名称',
|
||
dataIndex: 'SYSTEMROLE_NAME',
|
||
hideInDescriptions: true,
|
||
render: (_, record) => {
|
||
return <a key="fname" onClick={() => {
|
||
getRoleMenu(record.SYSTEMROLE_ID)
|
||
setCurrentRow(record)
|
||
setShowDetail(true)
|
||
}}>{_}</a>
|
||
}
|
||
},
|
||
{
|
||
title: '业主单位',
|
||
dataIndex: 'SYSTEMROLE_PROVINCE',
|
||
hideInSearch: activeKey !== '1000',
|
||
hideInTable: activeKey !== '1000',
|
||
request: async () => {
|
||
const options = await getOnwer()
|
||
return options;
|
||
},
|
||
span: 2,
|
||
},
|
||
{
|
||
title: '显示顺序',
|
||
dataIndex: 'SYSTEMROLE_INDEX',
|
||
hideInSearch: true
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'ShowStatus',
|
||
// hideInSearch: true,
|
||
hideInTable: true,
|
||
filters: true,
|
||
valueType: 'select',
|
||
initialValue: "1",
|
||
valueEnum: {
|
||
"all": { text: '全部', status: 'Default' },
|
||
"0": { text: '无效', status: 'Default' },
|
||
"1": { text: '有效', status: 'Processing' },
|
||
},
|
||
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'SYSTEMROLE_STATUS',
|
||
hideInSearch: true,
|
||
filters: true,
|
||
valueType: 'select',
|
||
initialValue: "1",
|
||
valueEnum: {
|
||
"all": { text: '全部', status: 'Default' },
|
||
"0": { text: '无效', status: 'Default' },
|
||
"1": { text: '有效', status: 'Processing' },
|
||
},
|
||
|
||
},
|
||
{
|
||
title: '说明',
|
||
dataIndex: 'SYSTEMROLE_DESC',
|
||
hideInSearch: true,
|
||
span: 2,
|
||
},
|
||
{
|
||
title: '操作',
|
||
valueType: 'option',
|
||
dataIndex: 'option',
|
||
hideInDescriptions: true,
|
||
render: (text, record) => {
|
||
if (currentUser?.UserPattern === 9000 || (record?.SYSTEMROLE_PROVINCE && record?.SYSTEMROLE_ID !== currentUser?.TopSystemRoleId) || bigTabSelect === '2')
|
||
return (<Space>
|
||
<a
|
||
key="editable"
|
||
onClick={async () => {
|
||
if (showDetail) {
|
||
setShowDetail(false);
|
||
}
|
||
getRoleMenu(record?.SYSTEMROLE_PID)
|
||
const roleDetail = await getSystemRoleDetail(record.SYSTEMROLE_ID) // 获取当前角色的 权限配置
|
||
|
||
const rolekeys = roleDetail.SystemModuleList ? roleDetail?.SystemModuleList.map((n: number) => `2-${n}`) : []
|
||
setRoleCheckedMenu(rolekeys);
|
||
console.log('currentRow', { ...roleDetail })
|
||
setCurrentRow({ ...roleDetail });
|
||
handleModalVisible(true);
|
||
|
||
}}
|
||
>
|
||
编辑
|
||
</a>
|
||
<a
|
||
key="editable"
|
||
onClick={async () => {
|
||
handleModalVisible(true);
|
||
if (showDetail) {
|
||
|
||
setShowDetail(false);
|
||
}
|
||
setCurrentRow({ SYSTEMROLE_PID: record?.SYSTEMROLE_ID, SYSTEMROLE_STATUS: 1 }); // 配置子角色的父级id为当前行id
|
||
getRoleMenu(record?.SYSTEMROLE_ID) // 获取当前父级的可使用权限
|
||
setRoleCheckedMenu([])
|
||
}}
|
||
>
|
||
添加子角色
|
||
</a>
|
||
<Popconfirm // 删除按钮功能
|
||
title="确认删除该项目记录吗?"
|
||
onConfirm={async () => {
|
||
if (record) {
|
||
|
||
const { SYSTEMROLE_ID } = record
|
||
const success = (SYSTEMROLE_ID ? await handleDelete(SYSTEMROLE_ID) : false)
|
||
if (success) {
|
||
if (actionRef.current) {
|
||
actionRef.current.reload();
|
||
}
|
||
handleModalVisible(false)
|
||
setCurrentRow(undefined)
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
<a>无效</a>
|
||
</Popconfirm>
|
||
</Space>
|
||
)
|
||
return (<a
|
||
key="editable"
|
||
onClick={async () => {
|
||
handleModalVisible(true);
|
||
if (showDetail) {
|
||
|
||
setShowDetail(false);
|
||
}
|
||
setCurrentRow({ SYSTEMROLE_PID: record?.SYSTEMROLE_ID, SYSTEMROLE_STATUS: 1 }); // 配置子角色的父级id为当前行id
|
||
getRoleMenu(record?.SYSTEMROLE_ID) // 获取当前父级的可使用权限
|
||
setRoleCheckedMenu([])
|
||
}}
|
||
>
|
||
添加子角色
|
||
</a>)
|
||
}
|
||
}
|
||
]
|
||
|
||
// 选择人表格的columns
|
||
const userColumns = [
|
||
{
|
||
title: '查询账号',
|
||
dataIndex: 'searchKey',
|
||
hideInDescriptions: true,
|
||
hideInTable: true,
|
||
fieldProps: {
|
||
placeholder: '请输入账号/用户名称/业主单位/手机号'
|
||
}
|
||
},
|
||
{
|
||
title: '账号',
|
||
dataIndex: 'USER_PASSPORT',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '用户名称',
|
||
dataIndex: 'USER_NAME',
|
||
hideInDescriptions: true,
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
title: '手机号',
|
||
dataIndex: 'USER_MOBILEPHONE',
|
||
hideInSearch: true
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'USER_STATUS',
|
||
// hideInSearch: true,
|
||
filters: true,
|
||
onFilter: true,
|
||
valueType: 'select',
|
||
initialValue: "1",
|
||
valueEnum: {
|
||
"all": { text: '全部', status: 'Default' },
|
||
"0": { text: '无效', status: 'Default' },
|
||
"1": { text: '有效', status: 'Processing' },
|
||
},
|
||
},
|
||
{
|
||
title: '业主单位',
|
||
dataIndex: 'PROVINCE_UNIT',
|
||
hideInSearch: true,
|
||
width: 150,
|
||
ellipsis: true,
|
||
},
|
||
]
|
||
|
||
// 拿到角色的左边树
|
||
const handleGetRoleTree = async (type: any) => {
|
||
if (!type) {
|
||
return
|
||
}
|
||
setRoleLoading(true)
|
||
const data = await getUserTypeTree({ UserTypePattern: type })
|
||
setRoleLoading(false)
|
||
console.log('data', data)
|
||
if (data && data.length > 0) {
|
||
setRoleTreeData(data)
|
||
} else {
|
||
setRoleTreeData([])
|
||
}
|
||
}
|
||
// 拿到用户列表数据
|
||
const handleGetUserTableData = async (tableTab?: any, typeId?: any, params?: any) => {
|
||
if (!typeId) {
|
||
return
|
||
}
|
||
setTableLoading(true)
|
||
const req = {
|
||
...params,
|
||
USER_PATTERN: tableTab,
|
||
UserTypeIds: typeId || '',
|
||
current: 1,
|
||
pageSize: 999999,
|
||
keyWord: params?.searchKey ? { key: "USER_PASSPORT,USER_NAME,USER_MOBILEPHONE,PROVINCE_UNIT", value: params?.searchKey } : null, // 关键词查询
|
||
}
|
||
const data = await getUserList(req)
|
||
if (data.data && data.data.length > 0) {
|
||
setUserTableData(data.data)
|
||
console.log('data.data', data.data)
|
||
if (currentRow?.UserIds && currentRow?.UserIds.length > 0) {
|
||
const list: any = []
|
||
currentRow?.UserIds.forEach((item: any) => {
|
||
data.data.forEach((subItem: any) => {
|
||
if (item === subItem.USER_ID) {
|
||
list.push(subItem)
|
||
}
|
||
})
|
||
})
|
||
setSelectRowDetail(list)
|
||
}
|
||
} else {
|
||
setUserTableData([])
|
||
}
|
||
setTableLoading(false)
|
||
clickTableBtnRef.current = false
|
||
}
|
||
|
||
// 记录用户操作行为
|
||
const handleRecordUser = () => {
|
||
const baseInfo = session.get('basicInfo')
|
||
const browser = session.get('browserVersion')
|
||
const systemInfo = session.get('systemBasin')
|
||
synchroBehaviorRecord({
|
||
USER_ID: currentUser?.ID,
|
||
USER_NAME: currentUser?.Name,
|
||
USER_PASSPORT: currentUser?.UserName,
|
||
USER_MOBILEPHONE: currentUser?.UserMobilephone,
|
||
BEHAVIORRECORD_TYPE: 1001,
|
||
BEHAVIORRECORD_EXPLAIN: '修改了角色',
|
||
BEHAVIORRECORD_TIME: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
SOURCE_PLATFORM: '驿商云平台',
|
||
USER_LOGINIP: baseInfo?.ip ? baseInfo?.ip : '',
|
||
USER_LOGINPLACE: `${baseInfo?.prov ? baseInfo?.prov : ''}${baseInfo?.prov && baseInfo?.city ? '-' : ''}${baseInfo?.city ? baseInfo?.city : ''}${baseInfo?.prov && baseInfo?.city && baseInfo?.district ? '-' : ''}${baseInfo?.district ? baseInfo?.district : ''}`,
|
||
BROWSER_VERSION: browser || '',
|
||
OPERATING_SYSTEM: systemInfo || '',
|
||
})
|
||
}
|
||
|
||
|
||
return (<PageContainer header={{
|
||
title: '',
|
||
breadcrumb: {},
|
||
}}>
|
||
<ProTable<SystemRoleModel>
|
||
headerTitle={<div>
|
||
<div style={{ width: '100%', marginBottom: '16px' }}>
|
||
<Tabs
|
||
activeKey={bigTabSelect}
|
||
onChange={(e) => {
|
||
console.log('e', e)
|
||
setBigTabSelect(e)
|
||
actionRef.current?.reload()
|
||
}}
|
||
items={[{ label: '模块角色', key: '1' }, { label: '用户角色', key: '2' }]}
|
||
/>
|
||
</div>
|
||
<div style={{ width: '100%', boxSizing: 'border-box', paddingLeft: '16px' }}>
|
||
<Tabs
|
||
activeKey={activeKey}
|
||
onChange={(e) => {
|
||
console.log('e', e)
|
||
setActiveKey(e as string)
|
||
}}
|
||
items={bigTabSelect === '1' ? currentUser?.UserPattern === 9000 ?
|
||
[
|
||
{
|
||
key: '1000',
|
||
label: <span>业主{renderBadge(!typeCountLoading ? typeCount?.OwnerUnitCount : '', activeKey === '1000')}</span>,
|
||
},
|
||
{
|
||
key: '4000',
|
||
label: <span>供应商{renderBadge(!typeCountLoading ? typeCount?.SupplierCount : '', activeKey === '4000')}</span>,
|
||
},
|
||
{
|
||
key: '2000',
|
||
label: <span>商户{renderBadge(!typeCountLoading ? typeCount?.MerchantCount : '', activeKey === '2000')}</span>,
|
||
},
|
||
{
|
||
key: '3000',
|
||
label: <span>游客{renderBadge(!typeCountLoading ? typeCount?.TouristCount : '', activeKey === '3000')}</span>,
|
||
},
|
||
|
||
{
|
||
key: '9000',
|
||
label: <span>内部人员{renderBadge(!typeCountLoading ? typeCount?.AdminCount : '', activeKey === '9000')}</span>,
|
||
},
|
||
] : currentUser?.UserPattern === 1000 ? [
|
||
{
|
||
key: '1000',
|
||
label: <span>业主{renderBadge(!typeCountLoading ? typeCount?.OwnerUnitCount : '', activeKey === '1000')}</span>,
|
||
},
|
||
{
|
||
key: '4000',
|
||
label: <span>供应商{renderBadge(!typeCountLoading ? typeCount?.SupplierCount : '', activeKey === '4000')}</span>,
|
||
}
|
||
] : [] : [
|
||
{
|
||
key: '1000',
|
||
label: <span>业主</span>,
|
||
},
|
||
{
|
||
key: '4000',
|
||
label: <span>供应商</span>,
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</div>}
|
||
rowKey="SYSTEMROLE_ID"
|
||
actionRef={actionRef}
|
||
request={async (params) => {
|
||
// , SystemRolePID: currentUser?.TopSystemRoleId
|
||
console.log('bigTabSelect', bigTabSelect)
|
||
let req: any = {}
|
||
if (bigTabSelect === '2') {
|
||
req = {
|
||
ShowStatus: params.ShowStatus === '1' ? true : params.ShowStatus === '0' ? false : '',
|
||
SYSTEMROLE_TYPE: 2000,
|
||
SystemRolePattern: params.SystemRolePattern,
|
||
ProvinceCode: "530000"
|
||
}
|
||
} else {
|
||
req = {
|
||
ShowStatus: params.ShowStatus === '1' ? true : params.ShowStatus === '0' ? false : '',
|
||
// current: 1,
|
||
// pageSize: 20,
|
||
SystemRolePattern: params.SystemRolePattern,
|
||
ProvinceCode: "530000"
|
||
}
|
||
}
|
||
|
||
const list = await getRoleList(req)
|
||
console.log('list', list)
|
||
if (list && list.length > 0) {
|
||
list.forEach((item: any) => {
|
||
item.label = item.SYSTEMROLE_NAME
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem: any) => {
|
||
subItem.label = subItem.SYSTEMROLE_NAME
|
||
})
|
||
}
|
||
})
|
||
}
|
||
setRoleTree(list)
|
||
return { data: list, success: true };
|
||
}}
|
||
params={{ SystemRolePattern: activeKey, SYSTEMROLE_TYPE: bigTabSelect }}
|
||
pagination={false}
|
||
columns={columns}
|
||
toolbar={{
|
||
actions: [
|
||
<Button
|
||
key="new"
|
||
icon={<PlusOutlined />}
|
||
type="primary"
|
||
onClick={() => {
|
||
getRoleMenu(currentUser?.TopSystemRoleId)
|
||
// 新增角色时，若账号为内部账号则默认角色父级为-1 ，否则则为账号所属角色的父级角色
|
||
setCurrentRow({ SYSTEMROLE_PID: bigTabSelect === '1' ? currentUser?.TopSystemRoleId : '-1', SYSTEMROLE_STATUS: 1 })
|
||
handleModalVisible(true)
|
||
}}
|
||
>角色</Button>,
|
||
],
|
||
// menu: {
|
||
// type: 'tab',
|
||
// activeKey,
|
||
// items: currentUser?.UserPattern === 9000 ? [
|
||
// {
|
||
// key: '1000',
|
||
// label: <span>业主{renderBadge(!typeCountLoading ? typeCount?.OwnerUnitCount : '', activeKey === '1000')}</span>,
|
||
// },
|
||
// {
|
||
// key: '4000',
|
||
// label: <span>供应商{renderBadge(!typeCountLoading ? typeCount?.SupplierCount : '', activeKey === '4000')}</span>,
|
||
// },
|
||
// {
|
||
// key: '2000',
|
||
// label: <span>商户{renderBadge(!typeCountLoading ? typeCount?.MerchantCount : '', activeKey === '2000')}</span>,
|
||
// },
|
||
// {
|
||
// key: '3000',
|
||
// label: <span>游客{renderBadge(!typeCountLoading ? typeCount?.TouristCount : '', activeKey === '3000')}</span>,
|
||
// },
|
||
//
|
||
// {
|
||
// key: '9000',
|
||
// label: <span>内部人员{renderBadge(!typeCountLoading ? typeCount?.AdminCount : '', activeKey === '9000')}</span>,
|
||
// },
|
||
// ] : currentUser?.UserPattern === 1000 ?[
|
||
// {
|
||
// key: '1000',
|
||
// label: <span>业主{renderBadge(!typeCountLoading ? typeCount?.OwnerUnitCount : '', activeKey === '1000')}</span>,
|
||
// },
|
||
// {
|
||
// key: '4000',
|
||
// label: <span>供应商{renderBadge(!typeCountLoading ? typeCount?.SupplierCount : '', activeKey === '4000')}</span>,
|
||
// }
|
||
// ]:[],
|
||
// onChange: (key) => {
|
||
// setActiveKey(key as string);
|
||
// },
|
||
// }
|
||
}}
|
||
/>
|
||
{/* 角色信息编辑弹出框 */}
|
||
<ModalForm
|
||
layout={'horizontal'}
|
||
wrapperCol={{ span: 16 }}
|
||
labelCol={{ span: 6 }}
|
||
title={currentRow ? '角色编辑' : '角色新增'}
|
||
width={bigTabSelect === '1' ? 1024 : 1400}
|
||
visible={createModalVisible}
|
||
formRef={formRef}
|
||
onVisibleChange={(value) => {
|
||
handleModalVisible(value)
|
||
console.log('currentRow', currentRow)
|
||
if (value) {
|
||
formRef.current?.setFieldsValue(
|
||
currentRow ? { ...currentRow, SYSTEMROLE_PID: currentRow.SYSTEMROLE_PID === -1 ? null : currentRow.SYSTEMROLE_PID } : { SYSTEMROLE_STATUS: 1 },
|
||
);
|
||
if (bigTabSelect === '2') {
|
||
console.log('currentRow?.UserTypeIds', currentRow?.UserTypeIds)
|
||
if (currentRow?.SYSTEMROLE_ID) {
|
||
handleGetUserTableData(currentRow?.SYSTEMROLE_PATTERN, currentRow?.UserTypeIds.toString(), searchParams)
|
||
if (currentRow?.UserIds && currentRow?.UserIds.length > 0) {
|
||
const list: any = []
|
||
currentRow?.UserIds.forEach((item: any) => {
|
||
list.push(item.toString())
|
||
})
|
||
setDefaultSelectRole(currentRow?.UserIds)
|
||
}
|
||
if (currentRow?.UserTypeIds && currentRow?.UserTypeIds.length > 0) {
|
||
const list: any = []
|
||
currentRow?.UserTypeIds.forEach((item: any) => {
|
||
list.push(item.toString())
|
||
})
|
||
setDefaultRoleTree(list)
|
||
}
|
||
handleGetRoleTree(currentRow?.SYSTEMROLE_PATTERN)
|
||
}
|
||
}
|
||
} else {
|
||
setRoleCheckedMenu([])
|
||
formRef.current?.resetFields();
|
||
formUserRef.current?.resetFields()
|
||
setCurrentRow(undefined);
|
||
setRoleTreeData([])
|
||
setSelectRowDetail([])
|
||
setUserTableData([])
|
||
setDefaultSelectRole([])
|
||
setDefaultRoleTree([])
|
||
}
|
||
}}
|
||
onFinish={async (value) => {
|
||
|
||
let newValue: any = { ...value, SYSTEMROLE_PROVINCE: value?.SYSTEMROLE_PROVINCE || '' }
|
||
if (currentRow) { // 编辑数据
|
||
newValue = { ...currentRow, ...newValue, SYSTEMROLE_PID: value.SYSTEMROLE_PID || -1 }
|
||
}
|
||
newValue.SYSTEMROLE_PROVINCE = "530000"
|
||
// newValue.SYSTEMROLE_PROVINCE = !currentUser?.SuperAdmin ? currentUser?.ProvinceCode : newValue.SYSTEMROLE_PROVINCE // 当操作员是正常用户 则所属业主为他的账号归属的业主；若为内部账号，则所属业主为他所选择的业主
|
||
newValue.SYSTEMROLE_STATUS = newValue.SYSTEMROLE_STATUS ? 1 : 0 // 当操作员是正常用户 则所属业主为他的账号归属的业主；若为内部账号，则所属业主为他所选择的业主
|
||
if (roleCheckedMenu) { // 编辑角色时 是否配置了角色的权限 若配置 则取出配置的模块id
|
||
const moduleKey = roleCheckedMenu.filter(n => n.indexOf('2-') > -1)
|
||
newValue.SystemModuleList = moduleKey.map(n => Number(n.replace('2-', '')))
|
||
} else {
|
||
newValue.SystemModuleList = []
|
||
}
|
||
|
||
console.log('newValue', newValue)
|
||
if (bigTabSelect === '2') {
|
||
newValue.SYSTEMROLE_TYPE = 2000
|
||
}
|
||
|
||
const success = await handleAddUpdate(newValue);
|
||
handleRecordUser()
|
||
console.log('success', success)
|
||
if (success) {
|
||
if (bigTabSelect === '2') {
|
||
console.log('selectRowDetail', selectRowDetail)
|
||
const req: any = {
|
||
SYSTEMROLE_ID: success.Result_Data.SYSTEMROLE_ID,
|
||
DetailList: []
|
||
}
|
||
const list: any = []
|
||
if (selectRowDetail && selectRowDetail.length > 0) {
|
||
selectRowDetail.forEach((item: any) => {
|
||
list.push({ USER_ID: item.USER_ID, SYSTEMROLE_ID: success.Result_Data.SYSTEMROLE_ID, OPERATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss'), SYSTEMROLE_TYPE: 2000 })
|
||
})
|
||
}
|
||
req.DetailList = list
|
||
const data = await handleSynchroUserSystemRoleDetailList(req)
|
||
console.log('data213123', data)
|
||
}
|
||
|
||
|
||
if (actionRef.current) {
|
||
actionRef.current.reload();
|
||
}
|
||
|
||
// handleModalVisible(false);
|
||
return true
|
||
}
|
||
return false
|
||
}}
|
||
>
|
||
{
|
||
bigTabSelect === '1' ?
|
||
<Row>
|
||
<Col span={12}>
|
||
<ProFormText
|
||
name="SYSTEMROLE_NAME"
|
||
label="角色名称"
|
||
placeholder="请输入角色名称"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入角色名称',
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<Form.Item
|
||
name="SYSTEMROLE_PID"
|
||
label="父级角色"
|
||
>
|
||
<TreeSelect
|
||
placeholder="请选择父级角色"
|
||
dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
|
||
treeData={roleTree}
|
||
onSelect={(value: any) => {
|
||
getRoleMenu(value)
|
||
return value
|
||
}}
|
||
fieldNames={{
|
||
label: 'SYSTEMROLE_NAME',
|
||
value: "SYSTEMROLE_ID",
|
||
children: "children"
|
||
}}
|
||
allowClear
|
||
>
|
||
</TreeSelect >
|
||
</Form.Item>
|
||
<ProFormSelect
|
||
name="SYSTEMROLE_PATTERN"
|
||
label="角色类型"
|
||
placeholder="请选择角色类型"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请选择角色类型',
|
||
},
|
||
]}
|
||
|
||
options={
|
||
// [
|
||
// { label: '业主', value: 1000 },
|
||
// { label: '商户', value: 2000 },
|
||
// { label: '游客', value: 3000 },
|
||
// { label: '供应商', value: 4000 },
|
||
// { label: '内部人员', value: 9000 }
|
||
// ]
|
||
bigTabSelect === '1' ? currentUser?.UserPattern === 9000 ?
|
||
[
|
||
{
|
||
key: '1000',
|
||
label: "业主",
|
||
},
|
||
{
|
||
key: '4000',
|
||
label: "供应商",
|
||
},
|
||
{
|
||
key: '2000',
|
||
label: "商户",
|
||
},
|
||
{
|
||
key: '3000',
|
||
label: "游客",
|
||
},
|
||
|
||
{
|
||
key: '9000',
|
||
label: "内部人员",
|
||
},
|
||
] : currentUser?.UserPattern === 1000 ? [
|
||
{
|
||
key: '1000',
|
||
label: "业主",
|
||
},
|
||
{
|
||
key: '4000',
|
||
label: "供应商",
|
||
}
|
||
] : [] : [
|
||
{
|
||
key: '1000',
|
||
label: "业主",
|
||
},
|
||
{
|
||
key: '4000',
|
||
label: "供应商",
|
||
},
|
||
]
|
||
|
||
|
||
}></ProFormSelect>
|
||
{currentUser?.UserPattern === 9000 && <ProFormSelect
|
||
name="SYSTEMROLE_PROVINCE"
|
||
label="业主单位"
|
||
placeholder="请选择业主单位"
|
||
request={async () => {
|
||
const options = await getOnwer()
|
||
return options;
|
||
}}
|
||
allowClear
|
||
fieldProps={{
|
||
fieldNames: {
|
||
title: 'label',
|
||
// key: "value"
|
||
}
|
||
}}
|
||
|
||
/>}
|
||
<ProFormDigit
|
||
name="SYSTEMROLE_INDEX"
|
||
label="显示顺序"
|
||
placeholder="请输入显示顺序"
|
||
min={0}
|
||
max={9999}
|
||
fieldProps={{ precision: 0 }}
|
||
/>
|
||
|
||
<Form.Item
|
||
name="SYSTEMROLE_STATUS"
|
||
label="是否有效"
|
||
>
|
||
<Switch
|
||
checkedChildren="有"
|
||
unCheckedChildren="无"
|
||
defaultChecked={currentRow ? !!currentRow.SYSTEMROLE_STATUS : true}
|
||
/>
|
||
</Form.Item>
|
||
<ProFormTextArea
|
||
name="SYSTEMROLE_DESC"
|
||
label="备注说明"
|
||
placeholder="请输入说明"
|
||
/>
|
||
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item label="角色权限" labelCol={{ span: 6 }} name="SystemModuleList">
|
||
<Card style={{ borderColor: "#97D6FE", height: 386 }}
|
||
size="small"
|
||
title="可选模块权限" headStyle={{ backgroundColor: '#E7F7FF' }}
|
||
extra={<a onClick={() => {
|
||
setRoleCheckedMenu([])
|
||
formRef.current?.setFieldsValue({ SystemModuleList: [] })
|
||
}}>取消选择</a>}>
|
||
|
||
<Tree
|
||
checkable
|
||
checkedKeys={roleCheckedMenu}
|
||
defaultCheckedKeys={roleCheckedMenu}
|
||
defaultExpandedKeys={roleCheckedMenu}
|
||
height={330}
|
||
treeData={roleMenuTree}
|
||
onCheck={(checkedKeys: React.Key[] | any) => {
|
||
|
||
setRoleCheckedMenu(checkedKeys)
|
||
return checkedKeys
|
||
}}
|
||
fieldNames={
|
||
{ title: "label" }
|
||
}
|
||
/>
|
||
</Card>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row> :
|
||
<Row>
|
||
<Col span={8}>
|
||
<ProFormSelect
|
||
name="SYSTEMROLE_PATTERN"
|
||
label="角色类型"
|
||
placeholder="请选择角色类型"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请选择角色类型',
|
||
},
|
||
]}
|
||
options={[
|
||
{ label: '业主', value: 1000 },
|
||
{ label: '商户', value: 2000 },
|
||
{ label: '游客', value: 3000 },
|
||
{ label: '供应商', value: 4000 },
|
||
{ label: '内部人员', value: 9000 }
|
||
]}
|
||
fieldProps={{
|
||
onChange: (e) => {
|
||
handleGetRoleTree(e)
|
||
}
|
||
}}
|
||
></ProFormSelect>
|
||
{currentUser?.UserPattern === 9000 && <ProFormSelect
|
||
name="SYSTEMROLE_PROVINCE"
|
||
label="业主单位"
|
||
placeholder="请选择业主单位"
|
||
request={async () => {
|
||
const options = await getOnwer()
|
||
return options;
|
||
}}
|
||
allowClear
|
||
fieldProps={{
|
||
fieldNames: {
|
||
title: 'label',
|
||
// key: "value"
|
||
}
|
||
}}
|
||
|
||
/>}
|
||
</Col>
|
||
|
||
<Col span={8}>
|
||
<ProFormText
|
||
name="SYSTEMROLE_NAME"
|
||
label="角色名称"
|
||
placeholder="请输入角色名称"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请输入角色名称',
|
||
},
|
||
]}
|
||
/>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="SYSTEMROLE_PID"
|
||
label="父级角色"
|
||
>
|
||
<TreeSelect
|
||
placeholder="请选择父级角色"
|
||
dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
|
||
treeData={roleTree}
|
||
onSelect={(value: any) => {
|
||
getRoleMenu(value)
|
||
return value
|
||
}}
|
||
fieldNames={{
|
||
label: 'SYSTEMROLE_NAME',
|
||
value: "SYSTEMROLE_ID",
|
||
children: "children"
|
||
}}
|
||
allowClear
|
||
>
|
||
</TreeSelect >
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<ProFormDigit
|
||
name="SYSTEMROLE_INDEX"
|
||
label="显示顺序"
|
||
placeholder="请输入显示顺序"
|
||
min={0}
|
||
max={9999}
|
||
fieldProps={{ precision: 0 }}
|
||
/>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="SYSTEMROLE_STATUS"
|
||
label="是否有效"
|
||
>
|
||
<Switch
|
||
checkedChildren="有"
|
||
unCheckedChildren="无"
|
||
defaultChecked={currentRow ? !!currentRow.SYSTEMROLE_STATUS : true}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<ProFormTextArea
|
||
name="SYSTEMROLE_DESC"
|
||
label="备注说明"
|
||
placeholder="请输入说明"
|
||
/>
|
||
</Col>
|
||
<Col span={24}>
|
||
<div style={{ width: '100%', display: 'flex', height: '500px' }}>
|
||
<ProCard
|
||
style={{ width: "300px" }}
|
||
className="pageTable-leftnav pageTable-leftnav-role"
|
||
bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: "300px" }}
|
||
colSpan={"300px"}
|
||
headerBordered
|
||
>
|
||
{roleTreeData && roleTreeData.length > 0 ? <Tree
|
||
checkable
|
||
treeData={roleTreeData}
|
||
fieldNames={{
|
||
title: "label",
|
||
key: "key"
|
||
}}
|
||
defaultCheckedKeys={currentRow?.SYSTEMROLE_ID ? defaultRoleTree : []}
|
||
blockNode
|
||
defaultExpandedKeys={["205"]}
|
||
onCheck={(checkedKeys: React.Key[] | any, info) => {
|
||
console.log('info', info)
|
||
const selectedIds = info.checkedNodes.filter(n => n?.type === 1)
|
||
setUserTypeId(selectedIds.map(n => n?.value)?.toString() || '')
|
||
}}
|
||
/> : ''}
|
||
</ProCard>
|
||
<div style={{
|
||
width: 'calc(100% - 300px)',
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0
|
||
}}>
|
||
<ProTable<UserModel>
|
||
// headerTitle="账号管理"
|
||
rowKey="USER_ID"
|
||
className={'rolesTableBox'}
|
||
actionRef={actionUserRef}
|
||
formRef={formUserRef}
|
||
options={false}
|
||
scroll={{ y: 340 }}
|
||
loading={tableLoading}
|
||
search={{
|
||
span: 8,
|
||
optionRender: ({ searchText }, { form }) => {
|
||
return [
|
||
<Button
|
||
key="sub"
|
||
type={'primary'}
|
||
onClick={() => {
|
||
// const tableTab = formRef.current?.getFieldValue('SYSTEMROLE_PATTERN')
|
||
// handleGetUserTableData(tableTab,userTypeId)
|
||
clickTableBtnRef.current = true
|
||
formUserRef.current?.submit();
|
||
}}
|
||
>
|
||
搜索
|
||
</Button>
|
||
]
|
||
}
|
||
}}
|
||
pagination={false}
|
||
request={async (params) => {
|
||
setSearchParams(params)
|
||
if (clickTableBtnRef.current) {
|
||
const tableTab = formRef.current?.getFieldValue('SYSTEMROLE_PATTERN')
|
||
handleGetUserTableData(tableTab, userTypeId, params)
|
||
}
|
||
}}
|
||
dataSource={userTableData}
|
||
onReset={() => {
|
||
actionRef.current?.reload()
|
||
}}
|
||
columns={userColumns}
|
||
rowSelection={{ // 可选择的表格配置
|
||
type: "checkbox", // 该表格为单选
|
||
selectedRowKeys: defaultSelectRole,
|
||
onChange: (selectedRowKeys, selectedRows) => {
|
||
console.log('selectedRowKeys', selectedRowKeys)
|
||
console.log('selectedRows', selectedRows)
|
||
setDefaultSelectRole(selectedRowKeys)
|
||
setSelectRowDetail(selectedRows)
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
}
|
||
|
||
|
||
</ModalForm>
|
||
{/* 角色详情抽屉 */}
|
||
<Drawer
|
||
width={600}
|
||
visible={showDetail}
|
||
onClose={() => {
|
||
setCurrentRow(undefined);
|
||
setRowDetail(undefined);
|
||
setShowDetail(false);
|
||
}}
|
||
closable={false}
|
||
afterOpenChange={async (open) => {
|
||
console.log('open', open)
|
||
if (open && bigTabSelect === '2') {
|
||
console.log('currentRow', currentRow)
|
||
const req: any = {
|
||
SYSTEMROLEId: currentRow?.SYSTEMROLE_ID
|
||
}
|
||
const data = await handleGetSYSTEMROLEDetail(req)
|
||
setRowDetail(data)
|
||
}
|
||
}}
|
||
>
|
||
{currentRow?.SYSTEMROLE_NAME && (
|
||
<>
|
||
<ProDescriptions<SystemRoleModel>
|
||
column={2}
|
||
title={currentRow?.SYSTEMROLE_NAME}
|
||
request={async () => ({
|
||
data: currentRow || {},
|
||
})}
|
||
params={{
|
||
id: currentRow?.SYSTEMROLE_NAME,
|
||
}}
|
||
columns={columns as ProDescriptionsItemProps<SystemRoleModel>[]}
|
||
>
|
||
{
|
||
bigTabSelect === '2' ?
|
||
<ProDescriptions.Item label="所选人员">
|
||
{rowDetail?.UserNames && rowDetail?.UserNames.length > 0 ? rowDetail?.UserNames.toString() : ''}
|
||
</ProDescriptions.Item> :
|
||
<ProDescriptions.Item label="角色权限">
|
||
<Tree
|
||
defaultExpandAll
|
||
style={{ backgroundColor: '#FDFCFC', paddingRight: 24 }}
|
||
treeData={bigTabSelect === '2' ? roleTree : roleMenuTree}
|
||
fieldNames={
|
||
{ title: "label" }
|
||
}>
|
||
|
||
</Tree>
|
||
</ProDescriptions.Item>
|
||
}
|
||
|
||
</ProDescriptions>
|
||
</>
|
||
)}
|
||
</Drawer>
|
||
</PageContainer >
|
||
)
|
||
}
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser,
|
||
|
||
}))(RoleList);
|
||
|