From 03df7542cd456dc3e63a33cdd1f4cced5364f867 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 27 二月 2024 13:27:17 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/system/user/index.jsx | 526 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 355 insertions(+), 171 deletions(-)
diff --git a/zy-asrs-flow/src/pages/system/user/index.jsx b/zy-asrs-flow/src/pages/system/user/index.jsx
index 56fc45c..0f89bb7 100644
--- a/zy-asrs-flow/src/pages/system/user/index.jsx
+++ b/zy-asrs-flow/src/pages/system/user/index.jsx
@@ -1,16 +1,23 @@
-
import React, { useState, useRef, useEffect } from 'react';
-import { Button, message, Modal } from 'antd';
+import { Button, message, Modal, Row, Col, Card, Tree, Input, Tag, Skeleton } from 'antd';
import {
FooterToolbar,
PageContainer,
ProTable,
LightFilter,
+ TableDropdown
} from '@ant-design/pro-components';
-import { PlusOutlined, ExportOutlined } from '@ant-design/icons';
+import { PlusOutlined, ExportOutlined, DownOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import Http from '@/utils/http';
import Edit from './components/edit'
+import Pwd from './components/pwd'
+import AssignRole from './components/assignRole'
import { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter } from '@/components/TableSearch'
+import { transformTreeData, getTreeAllKeys } from '@/utils/tree-util'
+import { statusMap } from '@/utils/enum-util'
+import { repairBug } from '@/utils/common-util';
+
+const TABLE_KEY = "pro-table-user";
const handleSave = async (val) => {
const hide = message.loading('姝ｅ湪娣诲姞');
@@ -86,6 +93,25 @@
}
};
+const handlePwd = async (val) => {
+ const hide = message.loading('姝ｅ湪閲嶇疆');
+ try {
+ const resp = await Http.doPost('api/user/reset/pwd', val);
+ if (resp.code === 200) {
+ message.success('閲嶇疆鎴愬姛');
+ return true;
+ } else {
+ message.error(resp.msg);
+ return false;
+ }
+ } catch (error) {
+ message.error('閲嶇疆澶辫触璇烽噸璇曪紒');
+ return false;
+ } finally {
+ hide();
+ }
+};
+
const Main = () => {
const formTableRef = useRef();
@@ -95,8 +121,39 @@
const [currentRow, setCurrentRow] = useState();
const [searchParam, setSearchParam] = useState({});
- useEffect(() => {
+ const [boxHeight, setBoxHeight] = useState();
+ const [deptTreeLoading, setDeptTreeLoading] = useState(false);
+ const [deptTreeData, setDeptTreeData] = useState([]);
+ const [deptExpandedKeys, setDeptExpandedKeys] = useState([]);
+ const [pwdModalVisible, setPwdModalVisible] = useState(false);
+
+ const [assignModalVisible, setAssignModalVisible] = useState(false);
+
+ const loadDeptTreeData = (param) => {
+ setDeptTreeLoading(true);
+ Http.doPostPromise('/api/dept/tree', param, (res) => {
+ setDeptTreeLoading(false);
+ const rootMenu = { id: 0, name: '鍏ㄩ儴', value: 0, children: [] };
+ rootMenu.children = res.data;
+ // const treeData = transformTreeData([rootMenu]);
+ const treeData = transformTreeData(res.data);
+ setDeptTreeData(treeData);
+ const treeAllKeys = getTreeAllKeys(treeData);
+ setDeptExpandedKeys(treeAllKeys);
+ }).catch((err) => {
+ setDeptTreeLoading(false);
+ })
+ }
+
+ useEffect(() => {
+ const handleResize = () => setBoxHeight(window.innerHeight - 320);
+ window.addEventListener('resize', handleResize);
+ handleResize();
+
+ loadDeptTreeData();
+
+ return () => window.removeEventListener('resize', handleResize);
}, []);
const columns = [
@@ -107,40 +164,63 @@
width: 48,
},
{
- title: '璐﹀彿',
+ title: '閮ㄩ棬',
+ dataIndex: 'deptId$',
+ valueType: 'text',
+ hidden: false,
+ render: (_, record) => {
+ if (_ && _ !== '-') {
+ return <Tag color={""}>{_}</Tag>
+ } else {
+ return '-'
+ }
+ },
+ // filterDropdown: (props) => <LinkFilter
+ // name='deptId'
+ // major='dept'
+ // {...props}
+ // actionRef={actionRef}
+ // setSearchParam={setSearchParam}
+ // />,
+ },
+ {
+ title: '鐧诲綍璐﹀彿',
dataIndex: 'username',
valueType: 'text',
hidden: false,
- width: 140,
+ copyable: true,
filterDropdown: (props) => <TextFilter
name='username'
{...props}
actionRef={actionRef}
setSearchParam={setSearchParam}
/>,
+ render: (_, record) => {
+ return <span style={{ fontWeight: "bold" }}>{_}</span>
+ }
+ },
+ {
+ title: '鍚嶇О',
+ dataIndex: 'nickname',
+ valueType: 'text',
+ hidden: false,
+ filterDropdown: (props) => <TextFilter
+ name='nickname'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ render: (_, record) => {
+ return <span style={{ fontWeight: "bold" }}>{_}</span>
+ }
},
{
title: '瀵嗙爜',
dataIndex: 'password',
valueType: 'password',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='password'
- {...props}
- actionRef={actionRef}
- setSearchParam={setSearchParam}
- />,
- },
- {
- title: '鏄电О',
- dataIndex: 'nickname',
- valueType: 'text',
- hidden: false,
- width: 140,
- copyable: true,
- filterDropdown: (props) => <TextFilter
- name='nickname'
{...props}
actionRef={actionRef}
setSearchParam={setSearchParam}
@@ -151,7 +231,6 @@
dataIndex: 'avatar',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='avatar'
{...props}
@@ -164,7 +243,6 @@
dataIndex: 'code',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='code'
{...props}
@@ -177,7 +255,6 @@
dataIndex: 'sex$',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <SelectFilter
name='sex'
{...props}
@@ -195,7 +272,6 @@
dataIndex: 'phone',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='phone'
{...props}
@@ -208,7 +284,6 @@
dataIndex: 'email',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='email'
{...props}
@@ -221,7 +296,6 @@
dataIndex: 'emailVerified$',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <SelectFilter
name='emailVerified'
{...props}
@@ -233,26 +307,26 @@
]}
/>,
},
- {
- title: '鎵�灞為儴闂�',
- dataIndex: 'deptId$',
- valueType: 'text',
- hidden: false,
- width: 140,
- filterDropdown: (props) => <LinkFilter
- name='deptId'
- major='dept'
- {...props}
- actionRef={actionRef}
- setSearchParam={setSearchParam}
- />,
- },
+ // {
+ // title: '瑙掕壊',
+ // valueType: 'text',
+ // hidden: false,
+ // width: 100,
+ // render: (_, record) => {
+ // if (record.roleIds && record.roleIds.length > 0) {
+ // Http.doGetPromise('api/role/list/name/' + record.roleIds.join(','), null, (res) => {
+ // return '-'
+ // });
+ // } else {
+ // return '-'
+ // }
+ // },
+ // },
{
title: '鐪熷疄濮撳悕',
dataIndex: 'realName',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='realName'
{...props}
@@ -265,7 +339,6 @@
dataIndex: 'idCard',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='idCard'
{...props}
@@ -278,7 +351,6 @@
dataIndex: 'birthday',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='birthday'
{...props}
@@ -291,7 +363,6 @@
dataIndex: 'introduction',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='introduction'
{...props}
@@ -304,7 +375,10 @@
dataIndex: 'status$',
valueType: 'text',
hidden: false,
- width: 140,
+ render: (_, record) => {
+ const status = statusMap[record.status]
+ return <Tag color={status.color}>{status.text}</Tag>
+ },
filterDropdown: (props) => <SelectFilter
name='status'
{...props}
@@ -321,23 +395,8 @@
dataIndex: 'createTime$',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <DatetimeRangeFilter
name='createTime'
- {...props}
- actionRef={actionRef}
- setSearchParam={setSearchParam}
- />,
- },
- {
- title: '娣诲姞浜哄憳',
- dataIndex: 'createBy$',
- valueType: 'text',
- hidden: false,
- width: 140,
- filterDropdown: (props) => <LinkFilter
- name='createBy'
- major='user'
{...props}
actionRef={actionRef}
setSearchParam={setSearchParam}
@@ -348,7 +407,6 @@
dataIndex: 'updateTime$',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <DatetimeRangeFilter
name='updateTime'
{...props}
@@ -361,7 +419,6 @@
dataIndex: 'updateBy$',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <LinkFilter
name='updateBy'
major='user'
@@ -375,7 +432,6 @@
dataIndex: 'memo',
valueType: 'text',
hidden: false,
- width: 140,
filterDropdown: (props) => <TextFilter
name='memo'
{...props}
@@ -387,12 +443,13 @@
{
title: '鎿嶄綔',
dataIndex: 'option',
- width: 140,
valueType: 'option',
+ width : 180,
render: (_, record) => [
<Button
type="link"
key="edit"
+ style={{ padding: '2px 3px' }}
onClick={() => {
setModalVisible(true);
setCurrentRow(record);
@@ -402,8 +459,20 @@
</Button>,
<Button
type="link"
+ key="pwd"
+ style={{ padding: '2px 2px' }}
+ onClick={() => {
+ setPwdModalVisible(true);
+ setCurrentRow(record);
+ }}
+ >
+ 閲嶇疆瀵嗙爜
+ </Button>,
+ <Button
+ type="link"
danger
- key="batchRemove"
+ style={{ padding: '4px' }}
+ key="remove"
onClick={async () => {
Modal.confirm({
title: '鍒犻櫎',
@@ -421,124 +490,189 @@
>
鍒犻櫎
</Button>,
+ <TableDropdown
+ key="actionGroup"
+ name="dropdown"
+ onSelect={(key) => {
+ if (key === 'assign') {
+ setAssignModalVisible(true);
+ setCurrentRow(record);
+ }
+ }}
+ menus={[
+ { key: 'assign', name: '鍒嗛厤瑙掕壊' },
+ ]}
+ />,
],
},
];
return (
- <PageContainer>
- <div style={{ width: '100%', float: 'right' }}>
- <ProTable
- key="user"
- rowKey="id"
- actionRef={actionRef}
- formRef={formTableRef}
- columns={columns}
- cardBordered
- scroll={{ x: 1300 }}
- dateFormatter="string"
- pagination={{ pageSize: 20 }}
- search={false}
- toolbar={{
- search: {
- onSearch: (value) => {
- setSearchParam(prevState => ({
- ...prevState,
+ <PageContainer
+ header={{
+ breadcrumb: {},
+ }}
+ >
+ <Row gutter={[16, 24]}>
+ <Col lg={6} md={24}>
+ <Card title="閮ㄩ棬" style={{ width: '100%', height: 'calc(100vh - 160px)' }}>
+ <Input
+ style={{ marginBottom: 10 }}
+ placeholder="璇疯緭鍏�"
+ onChange={(e) => {
+ const { value } = e.target;
+ loadDeptTreeData({
condition: value
- }));
- actionRef.current?.reload();
- },
- },
- filter: (
- <LightFilter
- onValuesChange={(val) => {
- }}
- >
- </LightFilter>
- ),
- actions: [
- <Button
- type="primary"
- key="save"
- onClick={async () => {
- setModalVisible(true)
- }}
- >
- <PlusOutlined />
- 娣诲姞
- </Button>,
- <Button
- key="export"
- onClick={async () => {
- handleExport();
- }}
- >
- <ExportOutlined />
- 瀵煎嚭
- </Button>,
- ],
- }}
- request={(params, sorter, filter) =>
- Http.doPostPromise('/api/user/page', { ...params, ...searchParam }, (res) => {
- return {
- data: res.data.records,
- total: res.data.total,
- success: true,
- }
- })
- }
- rowSelection={{
- onChange: (ids, rows) => {
- setSelectedRows(rows);
- }
- }}
- columnsState={{
- persistenceKey: 'pro-table-user',
- persistenceType: 'localStorage',
- defaultValue: {
- option: { fixed: 'right', disable: true },
- },
- onChange(value) {
- },
- }}
- />
- </div>
-
- {selectedRows?.length > 0 && (
- <FooterToolbar
- extra={
- <div>
- 宸查�夋嫨
- <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
- 椤�
+ })
+ }}
+ />
+ <div style={{ height: 'calc(100vh - 325px)', overflowY: 'auto' }}>
+ {deptTreeLoading ? (
+ <Skeleton active />
+ ) : (
+ <Tree
+ showLine
+ blockNode
+ defaultExpandAll // 寮傛鍔犺浇澶辨晥
+ expandedKeys={deptExpandedKeys}
+ onExpand={setDeptExpandedKeys}
+ treeData={deptTreeData}
+ switcherIcon={<DownOutlined />}
+ onSelect={(selectedKeys, info) => {
+ const deptId = selectedKeys[0];
+ setSearchParam(prevState => ({
+ ...prevState,
+ deptId: deptId
+ }));
+ actionRef.current?.reload();
+ }}
+ />
+ )}
</div>
- }
- >
- <Button
- key="remove"
- danger
- onClick={async () => {
- Modal.confirm({
- title: '鍒犻櫎',
- content: '纭畾鍒犻櫎璇ラ」鍚楋紵',
- onOk: async () => {
- const success = await handleRemove(selectedRows);
- if (success) {
- setSelectedRows([]);
- actionRef.current?.reloadAndRest?.();
- }
+ </Card>
+ </Col>
+ <Col lg={18} md={24}>
+ <ProTable
+ key="user"
+ rowKey="id"
+ actionRef={actionRef}
+ formRef={formTableRef}
+ columns={columns}
+ cardBordered
+ size='small'
+ // scroll={{ y: boxHeight }}
+ dateFormatter="string"
+ pagination={{ pageSize: 12 }}
+ search={false}
+ toolbar={{
+ search: {
+ onSearch: (value) => {
+ setSearchParam(prevState => ({
+ ...prevState,
+ condition: value
+ }));
+ actionRef.current?.reload();
},
- });
+ },
+ filter: (
+ <LightFilter
+ onValuesChange={(val) => {
+ }}
+ >
+ </LightFilter>
+ ),
+ actions: [
+ <Button
+ type="primary"
+ danger
+ key="removeBatch"
+ hidden={selectedRows?.length === 0}
+ onClick={async () => {
+ Modal.confirm({
+ title: '鏄惁纭鍒犻櫎鎵�閫夋暟鎹」?',
+ icon: <ExclamationCircleOutlined />,
+ content: '璇疯皑鎱庢搷浣�',
+ async onOk() {
+ const success = await handleRemove(selectedRows);
+ if (success) {
+ setSelectedRows([]);
+ actionRef.current.reload();
+ }
+ },
+ onCancel() { },
+ });
+ }}
+ >
+ <DeleteOutlined />
+ 鍒犻櫎
+ </Button>,
+ <Button
+ type="primary"
+ key="save"
+ onClick={async () => {
+ setModalVisible(true)
+ }}
+ >
+ <PlusOutlined />
+ 娣诲姞
+ </Button>,
+ <Button
+ key="export"
+ onClick={async () => {
+ handleExport();
+ }}
+ >
+ <ExportOutlined />
+ 瀵煎嚭
+ </Button>,
+ ],
}}
- >
- 鎵归噺鍒犻櫎
- </Button>
- </FooterToolbar>
- )}
+ request={(params, sorter, filter) =>
+ Http.doPostPromise('/api/user/page1', { ...params, ...searchParam }, (res) => {
+ return {
+ data: res.data.records,
+ total: res.data.total,
+ success: true,
+ }
+ })
+ }
+ tableAlertRender={false}
+ rowSelection={{
+ onChange: (ids, rows) => {
+ setSelectedRows(rows);
+ }
+ }}
+ columnsState={{
+ persistenceKey: TABLE_KEY,
+ persistenceType: 'localStorage',
+ defaultValue: {
+ password: { show: repairBug(TABLE_KEY, 'password', false) },
+ avatar: { show: repairBug(TABLE_KEY, 'avatar', false) },
+ code: { show: repairBug(TABLE_KEY, 'code', false) },
+ phone: { show: repairBug(TABLE_KEY, 'phone', false) },
+ email: { show: repairBug(TABLE_KEY, 'email', false) },
+ emailVerified$: { show: repairBug(TABLE_KEY, 'emailVerified$', false) },
+ realName: { show: repairBug(TABLE_KEY, 'realName', false) },
+ idCard: { show: repairBug(TABLE_KEY, 'idCard', false) },
+ birthday: { show: repairBug(TABLE_KEY, 'birthday', false) },
+ introduction: { show: repairBug(TABLE_KEY, 'introduction', false) },
+ createTime$: { show: repairBug(TABLE_KEY, 'createTime$', false) },
+ updateTime$: { show: repairBug(TABLE_KEY, 'updateTime$', false) },
+ updateBy$: { show: repairBug(TABLE_KEY, 'updateBy$', false) },
+ memo: { show: repairBug(TABLE_KEY, 'memo', false) },
+ option: { fixed: 'right', disable: true },
+ },
+ onChange(value) {
+ },
+ }}
+ />
+ </Col>
+ </Row>
<Edit
open={modalVisible}
values={currentRow || {}}
+ treeData={deptTreeData}
onCancel={
() => {
setModalVisible(false);
@@ -562,6 +696,56 @@
}
}
/>
+
+ <Pwd
+ open={pwdModalVisible}
+ values={currentRow || {}}
+ onCancel={
+ () => {
+ setPwdModalVisible(false);
+ setCurrentRow(undefined);
+ }
+ }
+ onSubmit={async (values) => {
+ let ok = false;
+ if (values.id) {
+ ok = await handlePwd({ ...values })
+ }
+ if (ok) {
+ setPwdModalVisible(false);
+ setCurrentRow(undefined);
+ if (actionRef.current) {
+ actionRef.current.reload();
+ }
+ }
+ }
+ }
+ />
+
+ <AssignRole
+ open={assignModalVisible}
+ values={currentRow || {}}
+ onCancel={
+ () => {
+ setAssignModalVisible(false);
+ setCurrentRow(undefined);
+ }
+ }
+ onSubmit={async (values) => {
+ let ok = false;
+ if (values.id) {
+ ok = await handleUpdate({ ...values })
+ }
+ if (ok) {
+ setAssignModalVisible(false);
+ setCurrentRow(undefined);
+ if (actionRef.current) {
+ actionRef.current.reload();
+ }
+ }
+ }}
+ />
+
</PageContainer>
);
};
--
Gitblit v1.9.1