From 3215e24a462ee364ead6709b0ef238b1f43015c4 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 21 二月 2024 16:15:14 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/system/user/index.jsx | 819 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 654 insertions(+), 165 deletions(-)
diff --git a/zy-asrs-flow/src/pages/system/user/index.jsx b/zy-asrs-flow/src/pages/system/user/index.jsx
index 096a38a..70fe28f 100644
--- a/zy-asrs-flow/src/pages/system/user/index.jsx
+++ b/zy-asrs-flow/src/pages/system/user/index.jsx
@@ -1,186 +1,675 @@
-import React, { useState } from 'react';
-import {
- PageContainer,
-} from '@ant-design/pro-components';
-import { EllipsisOutlined, SearchOutlined } from '@ant-design/icons';
-import { ProTable, TableDropdown } from '@ant-design/pro-components';
-import { Button, Dropdown, Input } from 'antd';
-const valueEnum = {
- 0: 'close',
- 1: 'running',
- 2: 'online',
- 3: 'error',
+import React, { useState, useRef, useEffect } from 'react';
+import { Button, message, Modal, Row, Col, Card, Tree, Input, Tag } from 'antd';
+import {
+ FooterToolbar,
+ PageContainer,
+ ProTable,
+ LightFilter,
+} from '@ant-design/pro-components';
+import { PlusOutlined, ExportOutlined, DownOutlined } from '@ant-design/icons';
+import Http from '@/utils/http';
+import Edit from './components/edit'
+import Pwd from './components/pwd'
+import { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter } from '@/components/TableSearch'
+import { transformTreeData, getTreeAllKeys } from '@/utils/tree-util'
+import { statusMap } from '@/utils/enum-util'
+
+const handleSave = async (val) => {
+ const hide = message.loading('姝ｅ湪娣诲姞');
+ try {
+ const resp = await Http.doPost('api/user/save', 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 tableListDataSource = [];
+const handleUpdate = async (val) => {
+ const hide = message.loading('姝ｅ湪鏇存柊');
+ try {
+ const resp = await Http.doPost('api/user/update', 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 creators = ['浠樺皬灏�', '鏇蹭附涓�', '鏋椾笢涓�', '闄堝竻甯�', '鍏兼煇鏌�'];
+const handleRemove = async (rows) => {
+ if (!rows) return true;
+ const hide = message.loading('姝ｅ湪鍒犻櫎');
+ try {
+ const resp = await Http.doPost('api/user/remove/' + rows.map((row) => row.id).join(','));
+ if (resp.code === 200) {
+ message.success('鍒犻櫎鎴愬姛');
+ return true;
+ } else {
+ message.error(resp.msg);
+ return false;
+ }
+ } catch (error) {
+ message.error('鍒犻櫎澶辫触锛岃閲嶈瘯');
+ return false;
+ } finally {
+ hide();
+ }
+};
-for (let i = 0; i < 25; i += 1) {
- tableListDataSource.push({
- key: i,
- name: 'AppName',
- containers: Math.floor(Math.random() * 20),
- creator: creators[Math.floor(Math.random() * creators.length)],
- status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '')],
- createdAt: Date.now() - Math.floor(Math.random() * 2000),
- money: Math.floor(Math.random() * 2000) * i,
- progress: Math.ceil(Math.random() * 100) + 1,
- memo:
- i % 2 === 1
- ? '寰堥暱寰堥暱寰堥暱寰堥暱寰堥暱寰堥暱寰堥暱鐨勬枃瀛楄灞曠ず浣嗘槸瑕佺暀涓嬪熬宸�'
- : '绠�鐭娉ㄦ枃妗�',
- });
-}
+const handleExport = async () => {
+ const hide = message.loading('姝ｅ湪瀵煎嚭');
+ try {
+ const resp = await Http.doPostBlob('api/user/export');
+ const blob = new Blob([resp], { type: 'application/vnd.ms-excel' });
+ window.location.href = window.URL.createObjectURL(blob);
+ message.success('瀵煎嚭鎴愬姛');
+ return true;
+ } catch (error) {
+ message.error('瀵煎嚭澶辫触锛岃閲嶈瘯');
+ return false;
+ } finally {
+ hide();
+ }
+};
-const columns = [
- {
- title: '鎺掑簭',
- dataIndex: 'index',
- valueType: 'indexBorder',
- width: 48,
- },
- {
- title: '搴旂敤鍚嶇О',
- dataIndex: 'name',
- render: (_) => <a>{_}</a>,
- // 鑷畾涔夌瓫閫夐」鍔熻兘鍏蜂綋瀹炵幇璇峰弬鑰� https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
- filterDropdown: () => (
- <div style={{ padding: 8 }}>
- <Input style={{ width: 188, marginBlockEnd: 8, display: 'block' }} />
- </div>
- ),
- filterIcon: (filtered) => (
- <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
- ),
- },
- {
- title: '鍒涘缓鑰�',
- dataIndex: 'creator',
- valueEnum: {
- all: { text: '鍏ㄩ儴' },
- 浠樺皬灏�: { text: '浠樺皬灏�' },
- 鏇蹭附涓�: { text: '鏇蹭附涓�' },
- 鏋椾笢涓�: { text: '鏋椾笢涓�' },
- 闄堝竻甯�: { text: '闄堝竻甯�' },
- 鍏兼煇鏌�: { text: '鍏兼煇鏌�' },
+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();
+ const actionRef = useRef();
+ const [selectedRows, setSelectedRows] = useState([]);
+ const [modalVisible, setModalVisible] = useState(false);
+ const [currentRow, setCurrentRow] = useState();
+ const [searchParam, setSearchParam] = useState({});
+ const [boxHeight, setBoxHeight] = useState();
+ const [deptTreeData, setDeptTreeData] = useState([]);
+ const [deptExpandedKeys, setDeptExpandedKeys] = useState([]);
+ const [pwdModalVisible, setPwdModalVisible] = useState(false);
+
+ useEffect(() => {
+ const handleResize = () => setBoxHeight(window.innerHeight - 368);
+ window.addEventListener('resize', handleResize);
+ handleResize();
+
+ Http.doPostPromise('/api/dept/tree', {}, (res) => {
+ const rootMenu = { id: 0, name: '鍏ㄩ儴', value: 0, children: [] };
+ rootMenu.children = res.data;
+ const treeData = transformTreeData([rootMenu]);
+ setDeptTreeData(treeData);
+ const treeAllKeys = getTreeAllKeys(treeData);
+ setDeptExpandedKeys(treeAllKeys);
+ })
+
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ const columns = [
+ {
+ title: 'No',
+ dataIndex: 'index',
+ valueType: 'indexBorder',
+ width: 30,
},
- },
- {
- title: '鐘舵��',
- dataIndex: 'status',
- initialValue: 'all',
- filters: true,
- onFilter: true,
- valueEnum: {
- all: { text: '鍏ㄩ儴', status: 'Default' },
- close: { text: '鍏抽棴', status: 'Default' },
- running: { text: '杩愯涓�', status: 'Processing' },
- online: { text: '宸蹭笂绾�', status: 'Success' },
- error: { text: '寮傚父', status: 'Error' },
+ {
+ title: '鍚嶇О',
+ dataIndex: 'nickname',
+ valueType: 'text',
+ hidden: false,
+ width: 100,
+ filterDropdown: (props) => <TextFilter
+ name='nickname'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
},
- },
- {
- title: '澶囨敞',
- dataIndex: 'memo',
- ellipsis: true,
- copyable: true,
- },
- {
- title: '鎿嶄綔',
- width: 180,
- key: 'option',
- valueType: 'option',
- render: () => [
- <a key="link">閾捐矾</a>,
- <a key="link2">鎶ヨ</a>,
- <a key="link3">鐩戞帶</a>,
- <TableDropdown
- key="actionGroup"
- menus={[
- { key: 'copy', name: '澶嶅埗' },
- { key: 'delete', name: '鍒犻櫎' },
+ {
+ title: '鐧诲綍璐﹀彿',
+ dataIndex: 'username',
+ valueType: 'text',
+ hidden: false,
+ width: 100,
+ filterDropdown: (props) => <TextFilter
+ name='username'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '瀵嗙爜',
+ dataIndex: 'password',
+ valueType: 'password',
+ hidden: true,
+ width: 100,
+ filterDropdown: (props) => <TextFilter
+ name='password'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '澶村儚',
+ dataIndex: 'avatar',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='avatar'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '宸ュ彿',
+ dataIndex: 'code',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='code'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '鎬у埆',
+ dataIndex: 'sex$',
+ valueType: 'text',
+ hidden: false,
+ width: 80,
+ filterDropdown: (props) => <SelectFilter
+ name='sex'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ data={[
+ { label: '鏈煡', value: 0 },
+ { label: '鐢�', value: 1 },
+ { label: '濂�', value: 2 },
]}
/>,
- ],
- },
-];
+ },
+ {
+ title: '鎵嬫満鍙�',
+ dataIndex: 'phone',
+ valueType: 'text',
+ hidden: false,
+ width: 100,
+ filterDropdown: (props) => <TextFilter
+ name='phone'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '閭',
+ dataIndex: 'email',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='email'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '閭楠岃瘉',
+ dataIndex: 'emailVerified$',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <SelectFilter
+ name='emailVerified'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ data={[
+ { label: '鍚�', value: 0 },
+ { label: '鏄�', value: 1 },
+ ]}
+ />,
+ },
+ {
+ title: '鎵�灞為儴闂�',
+ dataIndex: 'deptId$',
+ valueType: 'text',
+ hidden: false,
+ width: 100,
+ render: (_, record) => {
+ if (_ && _ !== '-') {
+ return <Tag color={""}>{_}</Tag>
+ } else {
+ return '-'
+ }
+ },
+ // filterDropdown: (props) => <LinkFilter
+ // name='deptId'
+ // major='dept'
+ // {...props}
+ // actionRef={actionRef}
+ // setSearchParam={setSearchParam}
+ // />,
+ },
+ {
+ title: '鐪熷疄濮撳悕',
+ dataIndex: 'realName',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='realName'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '韬唤璇佸彿',
+ dataIndex: 'idCard',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='idCard'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '鍑虹敓鏃ユ湡',
+ dataIndex: 'birthday',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='birthday'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '涓汉绠�浠�',
+ dataIndex: 'introduction',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='introduction'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '鐘舵��',
+ dataIndex: 'status$',
+ valueType: 'text',
+ hidden: false,
+ width: 80,
+ render: (_, record) => {
+ const status = statusMap[record.status]
+ return <Tag color={status.color}>{status.text}</Tag>
+ },
+ filterDropdown: (props) => <SelectFilter
+ name='status'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ data={[
+ { label: '姝ｅ父', value: 1 },
+ { label: '绂佺敤', value: 0 },
+ ]}
+ />,
+ },
+ {
+ title: '娣诲姞鏃堕棿',
+ dataIndex: 'createTime$',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <DatetimeRangeFilter
+ name='createTime'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '淇敼鏃堕棿',
+ dataIndex: 'updateTime$',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <DatetimeRangeFilter
+ name='updateTime'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '淇敼浜哄憳',
+ dataIndex: 'updateBy$',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <LinkFilter
+ name='updateBy'
+ major='user'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '澶囨敞',
+ dataIndex: 'memo',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='memo'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
-const App = () => {
- return (
- <>
- <PageContainer>
- <ProTable
- columns={columns}
- request={(params, sorter, filter) => {
- // 琛ㄥ崟鎼滅储椤逛細浠� params 浼犲叆锛屼紶閫掔粰鍚庣鎺ュ彛銆�
- console.log(params, sorter, filter);
- return Promise.resolve({
- data: tableListDataSource,
- success: true,
+ {
+ title: '鎿嶄綔',
+ dataIndex: 'option',
+ width: 150,
+ valueType: 'option',
+ render: (_, record) => [
+ <Button
+ type="link"
+ key="edit"
+ onClick={() => {
+ setModalVisible(true);
+ setCurrentRow(record);
+ }}
+ >
+ 缂栬緫
+ </Button>,
+ <Button
+ type="link"
+ key="pwd"
+ onClick={() => {
+ setPwdModalVisible(true);
+ setCurrentRow(record);
+ }}
+ >
+ 閲嶇疆瀵嗙爜
+ </Button>,
+ <Button
+ type="link"
+ danger
+ key="batchRemove"
+ onClick={async () => {
+ Modal.confirm({
+ title: '鍒犻櫎',
+ content: '纭畾鍒犻櫎璇ラ」鍚楋紵',
+ onOk: async () => {
+ const success = await handleRemove([record]);
+ if (success) {
+ if (actionRef.current) {
+ actionRef.current.reload();
+ }
+ }
+ },
});
}}
- rowKey="key"
- pagination={{
- showQuickJumper: true,
- }}
- search={{
- layout: 'vertical',
- defaultCollapsed: false,
- }}
- dateFormatter="string"
- toolbar={{
- title: '楂樼骇琛ㄦ牸',
- tooltip: '杩欐槸涓�涓爣棰樻彁绀�',
- }}
- toolBarRender={() => [
- <Button key="danger" danger>
- 鍗遍櫓鎸夐挳
- </Button>,
- <Button key="show">鏌ョ湅鏃ュ織</Button>,
- <Button type="primary" key="primary">
- 鍒涘缓搴旂敤
- </Button>,
+ >
+ 鍒犻櫎
+ </Button>,
+ ],
+ },
+ ];
- <Dropdown
- key="menu"
- menu={{
- items: [
- {
- label: '1st item',
- key: '1',
+ return (
+ <PageContainer
+ header={{
+ breadcrumb: {},
+ }}
+ >
+ <Row gutter={[16, 24]}>
+ <Col lg={6} md={24}>
+ <Card title="閮ㄩ棬" style={{ width: '100%', height: 'calc(100vh - 200px)' }}>
+ <Input
+ style={{ marginBottom: 10 }}
+ placeholder="Search"
+ onChange={(e) => {
+ const { value } = e.target;
+ console.log(value);
+ }}
+ />
+ <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();
+ }}
+ />
+ </Card>
+ </Col>
+ <Col lg={18} md={24}>
+ <ProTable
+ key="user"
+ rowKey="id"
+ actionRef={actionRef}
+ formRef={formTableRef}
+ columns={columns}
+ cardBordered
+ scroll={{ y: boxHeight }}
+ dateFormatter="string"
+ pagination={{ pageSize: 20 }}
+ search={false}
+ toolbar={{
+ search: {
+ onSearch: (value) => {
+ setSearchParam(prevState => ({
+ ...prevState,
+ 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/page1', { ...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) {
+ },
+ }}
+ />
+ </Col>
+
+ {selectedRows?.length > 0 && (
+ <FooterToolbar
+ extra={
+ <div>
+ 宸查�夋嫨
+ <a style={{ fontWeight: 600 }}>{selectedRows.length}</a>
+ 椤�
+ </div>
+ }
+ >
+ <Button
+ key="remove"
+ danger
+ onClick={async () => {
+ Modal.confirm({
+ title: '鍒犻櫎',
+ content: '纭畾鍒犻櫎璇ラ」鍚楋紵',
+ onOk: async () => {
+ const success = await handleRemove(selectedRows);
+ if (success) {
+ setSelectedRows([]);
+ actionRef.current?.reloadAndRest?.();
+ }
},
- {
- label: '2nd item',
- key: '2',
- },
- {
- label: '3rd item',
- key: '3',
- },
- ],
+ });
}}
>
- <Button>
- <EllipsisOutlined />
- </Button>
- </Dropdown>,
- ]}
+ 鎵归噺鍒犻櫎
+ </Button>
+ </FooterToolbar>
+ )}
+
+ <Edit
+ open={modalVisible}
+ values={currentRow || {}}
+ treeData={deptTreeData}
+ onCancel={
+ () => {
+ setModalVisible(false);
+ setCurrentRow(undefined);
+ }
+ }
+ onSubmit={async (values) => {
+ let ok = false;
+ if (values.id) {
+ ok = await handleUpdate({ ...values })
+ } else {
+ ok = await handleSave({ ...values })
+ }
+ if (ok) {
+ setModalVisible(false);
+ setCurrentRow(undefined);
+ if (actionRef.current) {
+ actionRef.current.reload();
+ }
+ }
+ }
+ }
/>
- </PageContainer>
- </>
+
+ <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();
+ }
+ }
+ }
+ }
+ />
+ </Row>
+ </PageContainer>
);
};
-const User = () => {
- return (
- <>
- <PageContainer>
- <h1>User Hello world</h1>
- </PageContainer>
- </>
- )
-}
-
-export default App;
+export default Main;
--
Gitblit v1.9.1