391 lines
16 KiB
TypeScript
391 lines
16 KiB
TypeScript
/*
|
|
* @Author: cclu
|
|
* @Date: 2021-12-13 11:01:23
|
|
* @LastEditTime: 2024-08-30 18:54:12
|
|
* @LastEditors: cclu 1106109051@qq.com
|
|
* @Description: 账号管理
|
|
* @FilePath: \cloud-platform\src\pages\Setting\Users\index.tsx
|
|
*/
|
|
import { connect } from "umi";
|
|
import React, { useState, useRef } from "react";
|
|
import { Button, Drawer, Tree } from 'antd';
|
|
import ProTable from "@ant-design/pro-table";
|
|
import { PageContainer } from "@ant-design/pro-layout";
|
|
import { PlusOutlined } from "@ant-design/icons";
|
|
|
|
import type { UserModel } from "./data";
|
|
import type { ProColumns, ActionType } from '@ant-design/pro-table';
|
|
import type { ProDescriptionsItemProps } from "@ant-design/pro-descriptions";
|
|
import type { ConnectState } from "@/models/connect";
|
|
import type { CurrentUser } from '@/models/user';
|
|
|
|
import Edit from './components/edit';
|
|
import ProCard from "@ant-design/pro-card";
|
|
import useRequest from "@ahooksjs/use-request";
|
|
import ProDescriptions from "@ant-design/pro-descriptions";
|
|
|
|
import { getUserSystemRole, getUserList, getUserTypeTree } from './service'
|
|
import { getOnwer } from "@/services/options";
|
|
|
|
const UserList: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
|
|
const { currentUser } = props
|
|
const actionRef = useRef<ActionType>();
|
|
const [showDetail, setShowDetail] = useState<boolean>(false);
|
|
const [userTypeId, setUserTypeId] = useState<Record<number, []>>();
|
|
const [tableTab, setTableTab] = useState<React.Key>(`${currentUser?.UserPattern}`);
|
|
const [openType, setOpenType] = useState<any>()// 打开是编辑还是新增
|
|
const [collapsible, setCollapsible] = useState<boolean>(false) // 是否显示账号分类查询树
|
|
const [currentRow, setCurrentRow] = useState<UserModel>(); // 当前选中行
|
|
const [createModalVisible, handleModalVisible] = useState<boolean>(false); // 分布更新窗口的弹窗
|
|
const [userTypeObj, setUserTypeObj] = useState<any>()
|
|
const selectTab = useRef(`${currentUser?.UserPattern}`)
|
|
const { loading: treeLoading, data: treeViews } = useRequest(async () => {
|
|
const req: any = {
|
|
ProvinceCode: currentUser?.UserPattern === 2000 ? currentUser?.BusinessManID : currentUser?.ProvinceCode,
|
|
}
|
|
const data = await getUserTypeTree(req)
|
|
let res: any = []
|
|
if (data && data.length > 0) {
|
|
data.forEach((item: any) => {
|
|
res.push(item)
|
|
if (item.children && item.children.length > 0) {
|
|
item.children.forEach((subItem: any) => {
|
|
res.push(subItem)
|
|
if (subItem.children && subItem.children.length > 0) {
|
|
subItem.children.forEach((thirdItem: any) => {
|
|
res.push(thirdItem)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
console.log('res', res);
|
|
|
|
let obj: any = {}
|
|
if (res && res.length > 0) {
|
|
res.forEach((item: any) => {
|
|
obj[item.value] = item.label
|
|
})
|
|
}
|
|
console.log('obj', obj);
|
|
|
|
setUserTypeObj(obj)
|
|
})
|
|
// 请求账号部门tree
|
|
const { run: getUserTypeMenu, loading: typeLoading, data: userTypeTree } = useRequest((type) => getUserTypeTree({ UserTypePattern: type || tableTab, ShowStatus: true }))
|
|
|
|
// const [userTypeMenu, setUserTypeMenu] = useState<{1000: {}, 2000: {}}>(()=>getUserTypeTree(tableTab)); // 分布更新窗口的弹窗
|
|
// 根据角色id查询权限树
|
|
const { run: getRoleMenu, data: roleMenuTree } = useRequest(async (SystemRoleId?: number) => {
|
|
const data = await getUserSystemRole(SystemRoleId ? `${SystemRoleId}` : '')
|
|
return data
|
|
}, { manual: true })
|
|
const leftTab = [{ key: `1000`, name: '业主' }, { key: `4000`, name: '供应商' }, { key: `2000`, name: '商户' }, { key: `3000`, name: '游客' }, { key: `9000`, name: '内部' }]
|
|
const ueserCloudTab = currentUser?.UserPattern === 9000 ? leftTab : currentUser?.UserPattern === 1000 ? [{ key: `1000`, name: '业主' }, { key: `4000`, name: '供应商' }] : leftTab.filter(n => n.key === `${currentUser?.UserPattern}`)
|
|
// const ueserCloudTab = leftTab
|
|
// 表格列数据显示配置
|
|
const columns: ProColumns<UserModel>[] = [
|
|
{
|
|
title: '查询账号',
|
|
dataIndex: 'searchKey',
|
|
hideInDescriptions: true,
|
|
hideInTable: true,
|
|
fieldProps: {
|
|
placeholder: '请输入账号/用户名称/业主单位/手机号/经营单位'
|
|
}
|
|
},
|
|
{
|
|
title: '有效状态',
|
|
dataIndex: 'USER_STATUS',
|
|
hideInTable: true,
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
"": "全部",
|
|
"1": "有效",
|
|
"0": "无效"
|
|
},
|
|
initialValue: "1"
|
|
},
|
|
{
|
|
title: '经营单位',
|
|
dataIndex: 'BUSINESSMAN_NAME',
|
|
sorter: (a, b) => {
|
|
return (a.BUSINESSMAN_NAME || '').localeCompare((b.BUSINESSMAN_NAME || ''))
|
|
},
|
|
hideInSearch: true,
|
|
hideInTable: tableTab !== '2000',
|
|
hideInDescriptions: tableTab !== '2000',
|
|
},
|
|
{
|
|
title: '账号部门',
|
|
dataIndex: 'USERTYPE_ID',
|
|
hideInTable: tableTab === '3000' || tableTab === '9000',
|
|
hideInSearch: true,
|
|
hideInDescriptions: true,
|
|
valueType: "treeSelect",
|
|
fieldProps: {
|
|
options: userTypeTree,
|
|
},
|
|
},
|
|
{
|
|
title: '账号',
|
|
dataIndex: 'USER_PASSPORT',
|
|
sorter: (a, b) => {
|
|
return (a.USER_PASSPORT || '').localeCompare((b.USER_PASSPORT || ''))
|
|
},
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '用户名称',
|
|
dataIndex: 'USER_NAME',
|
|
sorter: (a, b) => {
|
|
return (a.USER_NAME || '').localeCompare((b.USER_NAME || ''))
|
|
},
|
|
hideInDescriptions: true,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
|
|
return <a key="fname" onClick={() => {
|
|
getRoleMenu(record.USER_ID)
|
|
setCurrentRow(record)
|
|
setShowDetail(true)
|
|
}}>{_}</a>
|
|
}
|
|
},
|
|
{
|
|
title: '手机号',
|
|
dataIndex: 'USER_MOBILEPHONE',
|
|
hideInSearch: true
|
|
},
|
|
// {
|
|
// title: '账号类型',
|
|
// dataIndex: 'USER_PATTERN',
|
|
// hideInSearch: true,
|
|
// valueType: 'select',
|
|
// valueEnum: {
|
|
|
|
// 1000: { text: '业主' },
|
|
// 2000: { text: '商户' },
|
|
// },
|
|
// },
|
|
{
|
|
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,
|
|
sorter: (a, b) => {
|
|
return (a.PROVINCE_UNIT || '').localeCompare((b.PROVINCE_UNIT || ''))
|
|
},
|
|
hideInTable: tableTab === '2000',
|
|
// valueType: "treeSelect",
|
|
valueType: "select",
|
|
request: async () => {
|
|
let data = await getOnwer({ ProvinceCode: "530000", DataType: 1 })
|
|
if (data && data.length > 0) {
|
|
data.forEach((item: any) => {
|
|
item.value = item.value.toString()
|
|
})
|
|
}
|
|
return data
|
|
}
|
|
},
|
|
{
|
|
title: '备注',
|
|
dataIndex: 'USER_DESC',
|
|
hideInSearch: true,
|
|
hideInTable: tableTab === '2000',
|
|
render: (_, record) => {
|
|
return record?.USER_DESC
|
|
}
|
|
},
|
|
{
|
|
title: '操作',
|
|
valueType: 'option',
|
|
hideInDescriptions: true,
|
|
// width: 180,
|
|
render: (text, record) => [
|
|
<a
|
|
key="editable"
|
|
onClick={() => {
|
|
handleModalVisible(true);
|
|
setOpenType('edit')
|
|
setCurrentRow({ ...record });
|
|
}}
|
|
>
|
|
编辑
|
|
</a>,
|
|
]
|
|
}
|
|
]
|
|
return (<PageContainer header={{
|
|
title: '',
|
|
breadcrumb: {},
|
|
}}>
|
|
<ProCard split="vertical" style={{ backgroundColor: '#fff' }}>
|
|
{/* 左侧树筛选 */}
|
|
<ProCard
|
|
className="pageTable-leftnav"
|
|
bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20 }}
|
|
// extra={<MenuFoldOutlined onClick={() => { setCollapsible(!collapsible) }} />}
|
|
colSpan={!collapsible ? "360px" : "60px"}
|
|
// title={!collapsible ? "请选择账号部门" : ""}
|
|
// headerBordered
|
|
// collapsed={collapsible}
|
|
tabs={{
|
|
activeKey: tableTab,
|
|
onChange: (key) => {
|
|
console.log('key', key)
|
|
setTableTab(key as string);
|
|
selectTab.current = key
|
|
getUserTypeMenu(key)
|
|
},
|
|
}}
|
|
>
|
|
{ueserCloudTab.map(n => {
|
|
return <ProCard.TabPane key={n.key} tab={n.name}>
|
|
<Tree
|
|
checkable
|
|
style={{ padding: '20px' }}
|
|
// eslint-disable-next-line no-nested-ternary
|
|
// 虽然不知道前面为啥要[0].children 但是 领导说 按照下面那行的走 那就遵命
|
|
// treeData={!typeLoading ? (currentUser?.UserPattern === 9000 ? userTypeTree : userTypeTree[0]?.children) : []}
|
|
treeData={!typeLoading ? (currentUser?.UserPattern === 9000 ? userTypeTree : userTypeTree) : []}
|
|
fieldNames={{
|
|
title: "label",
|
|
// key: "USERTYPE_ID"
|
|
}}
|
|
blockNode
|
|
// onSelect={onSelect}
|
|
onCheck={(checkedKeys: React.Key[] | any) => {
|
|
setUserTypeId({ [n.key]: checkedKeys })
|
|
if (actionRef.current) {
|
|
// actionRef.current?.reset()
|
|
actionRef.current?.reload()
|
|
}
|
|
}}
|
|
>
|
|
</Tree>
|
|
</ProCard.TabPane>
|
|
})}
|
|
</ProCard>
|
|
{/* 右侧表格主体 */}
|
|
<ProCard bodyStyle={{ paddingTop: 0, paddingBottom: 0, paddingRight: 0 }}>
|
|
<ProTable<UserModel>
|
|
headerTitle="账号管理"
|
|
rowKey="USER_ID"
|
|
actionRef={actionRef}
|
|
request={async (params, sorter) => {
|
|
console.log('params', params);
|
|
|
|
const sortstr = Object.keys(sorter).map(n => {
|
|
const value = sorter[n]
|
|
return value ? `${n} ${value.replace('end', '')}` : ''
|
|
})
|
|
const data = await getUserList({
|
|
...params,
|
|
USER_STATUS: params?.USER_STATUS,
|
|
USER_PATTERN: tableTab,
|
|
PROVINCE_UNIT: '911',
|
|
UserTypeIds: userTypeId && userTypeId[tableTab] ? userTypeId[tableTab].toString() : '',
|
|
SortStr: sortstr ? sortstr.toString() : 'USER_INDEX',
|
|
keyWord: params.searchKey ? { key: "USER_PASSPORT,USER_NAME,USER_MOBILEPHONE,PROVINCE_UNIT,BUSINESSMAN_NAME", value: params.searchKey } : null, // 关键词查询
|
|
})
|
|
return data
|
|
}}
|
|
onReset={() => {
|
|
actionRef.current?.reload()
|
|
}}
|
|
params={{ USER_PATTERN: tableTab }}
|
|
columns={columns}
|
|
toolbar={{
|
|
actions:
|
|
currentUser?.UserPattern === 1000 || currentUser?.UserPattern === 9000 ?
|
|
[
|
|
<Button
|
|
key="new"
|
|
icon={<PlusOutlined />}
|
|
type="primary"
|
|
onClick={() => {
|
|
console.log('currentUser?.UserPattern', currentUser?.UserPattern)
|
|
handleModalVisible(true)
|
|
setOpenType('add')
|
|
}}
|
|
>账号</Button>,
|
|
] : []
|
|
}}
|
|
pagination={{ defaultPageSize: 10 }}
|
|
|
|
/>
|
|
</ProCard>
|
|
</ProCard>
|
|
{/* 用户详情 */}
|
|
<Drawer
|
|
// eslint-disable-next-line no-nested-ternary
|
|
width={showDetail ? 600 : (createModalVisible ? '73%' : undefined)}
|
|
visible={showDetail || createModalVisible}
|
|
onClose={() => {
|
|
setCurrentRow(undefined);
|
|
setShowDetail(false);
|
|
handleModalVisible(false)
|
|
setOpenType('')
|
|
}}
|
|
closable={false}
|
|
bodyStyle={createModalVisible ? { backgroundColor: "#f9f9f9", padding: 0 } : {}}
|
|
>
|
|
{/* 编辑或新增账号 */}
|
|
{createModalVisible && <Edit selectTab={selectTab.current} tableTab={tableTab} openType={openType} detail={currentRow} currentUser={currentUser} reloadTable={(success: boolean) => {
|
|
if (success) {
|
|
if (actionRef.current) {
|
|
actionRef.current.reload();
|
|
}
|
|
}
|
|
}} />}
|
|
{/* 查看账号详情 */}
|
|
{showDetail && <ProDescriptions<UserModel>
|
|
column={1}
|
|
title={currentRow?.USER_NAME}
|
|
request={async () => ({
|
|
data: currentRow || {},
|
|
})}
|
|
params={{
|
|
id: currentRow?.USER_NAME,
|
|
}}
|
|
columns={columns as ProDescriptionsItemProps<UserModel>[]}
|
|
>
|
|
<ProDescriptions.Item label="用户角色权限">
|
|
{roleMenuTree?.length ? <Tree
|
|
style={{ backgroundColor: '#FDFCFC', paddingRight: 24 }}
|
|
treeData={roleMenuTree}
|
|
defaultExpandAll={true}
|
|
fieldNames={
|
|
{ title: "label", key: 'value' }
|
|
}>
|
|
</Tree> : '-'}
|
|
</ProDescriptions.Item>
|
|
</ProDescriptions>
|
|
}
|
|
</Drawer>
|
|
</PageContainer>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser,
|
|
}))(UserList);
|
|
|