From dca78d5fd0c67fd841d6841ef2cd94a10669c356 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 21 二月 2024 15:40:48 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/system/menu/index.jsx | 581 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 571 insertions(+), 10 deletions(-)
diff --git a/zy-asrs-flow/src/pages/system/menu/index.jsx b/zy-asrs-flow/src/pages/system/menu/index.jsx
index 5081bb7..d2ad362 100644
--- a/zy-asrs-flow/src/pages/system/menu/index.jsx
+++ b/zy-asrs-flow/src/pages/system/menu/index.jsx
@@ -1,16 +1,577 @@
-import React from 'react';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Button, message, Modal, Tag } from 'antd';
import {
+ FooterToolbar,
PageContainer,
+ ProTable,
+ LightFilter,
} from '@ant-design/pro-components';
+import { PlusOutlined, ExportOutlined } from '@ant-design/icons';
+import Http from '@/utils/http';
+import Edit from './components/edit'
+import { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter } from '@/components/TableSearch'
+import { transformTreeData } from '@/utils/tree-util'
+import { createIcon } from '@/utils/icon-util'
+import { statusMap } from '@/utils/enum-util'
-const User = () => {
+const typeMap = {
+ 0: {
+ color: 'blue',
+ text: '鑿滃崟',
+ },
+ 1: {
+ color: '',
+ text: '鎸夐挳',
+ },
+};
+
+const handleSave = async (val) => {
+ const hide = message.loading('姝ｅ湪娣诲姞');
+ try {
+ const resp = await Http.doPost('api/menu/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 handleUpdate = async (val) => {
+ const hide = message.loading('姝ｅ湪鏇存柊');
+ try {
+ const resp = await Http.doPost('api/menu/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 handleRemove = async (rows) => {
+ if (!rows) return true;
+ const hide = message.loading('姝ｅ湪鍒犻櫎');
+ try {
+ const resp = await Http.doPost('api/menu/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();
+ }
+};
+
+const handleExport = async () => {
+ const hide = message.loading('姝ｅ湪瀵煎嚭');
+ try {
+ const resp = await Http.doPostBlob('api/menu/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 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 [treeData, setTreeData] = useState([]);
+
+ useEffect(() => {
+
+ }, []);
+
+ const columns = [
+ {
+ title: '鑿滃崟鍚嶇О',
+ dataIndex: 'name',
+ valueType: 'text',
+ hidden: false,
+ width: 240,
+ filterDropdown: (props) => <TextFilter
+ name='name'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '涓婄骇鑿滃崟',
+ dataIndex: 'parentId',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='parentId'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '涓婄骇鑿滃崟鍚�',
+ dataIndex: 'parentName',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='parentName'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '鍏宠仈璺緞',
+ dataIndex: 'path',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='path'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '鍏宠仈璺緞鍚�',
+ dataIndex: 'pathName',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='pathName'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '璺敱鍦板潃',
+ dataIndex: 'route',
+ valueType: 'text',
+ hidden: false,
+ width: 200,
+ filterDropdown: (props) => <TextFilter
+ name='route'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '椤甸潰缁勪欢',
+ dataIndex: 'component',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='component'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '绠�杩�',
+ dataIndex: 'brief',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='brief'
+ {...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: 'type$',
+ valueType: 'text',
+ hidden: false,
+ width: 100,
+ render: (_, record) => {
+ const type = typeMap[record.type]
+ return <Tag color={type.color}>{type.text}</Tag>
+ },
+ filterDropdown: (props) => <SelectFilter
+ name='type'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ data={[
+ { label: '鑿滃崟', value: 0 },
+ { label: '鎸夐挳', value: 1 },
+ ]}
+ />,
+ },
+ {
+ title: '鏉冮檺鏍囪瘑',
+ dataIndex: 'authority',
+ valueType: 'text',
+ hidden: false,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='authority'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '鑿滃崟鍥炬爣',
+ dataIndex: 'icon',
+ valueType: 'text',
+ hidden: false,
+ width: 140,
+ render: (_, record) => {
+ return createIcon(_);
+ }
+ },
+ {
+ title: '鎺掑簭',
+ dataIndex: 'sort',
+ valueType: 'text',
+ hidden: false,
+ width: 100,
+ render: (_, record) => {
+ return <span style={{ fontWeight: "bold" }}>{_}</span>
+ }
+ },
+ {
+ title: '鍏冧俊鎭�',
+ dataIndex: 'meta',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <TextFilter
+ name='meta'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '鐘舵��',
+ 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}
+ 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: 'createBy$',
+ valueType: 'text',
+ hidden: true,
+ width: 140,
+ filterDropdown: (props) => <LinkFilter
+ name='createBy'
+ major='user'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '淇敼鏃堕棿',
+ dataIndex: 'updateTime$',
+ valueType: 'text',
+ hidden: false,
+ width: 140,
+ filterDropdown: (props) => <DatetimeRangeFilter
+ name='updateTime'
+ {...props}
+ actionRef={actionRef}
+ setSearchParam={setSearchParam}
+ />,
+ },
+ {
+ title: '淇敼浜哄憳',
+ dataIndex: 'updateBy$',
+ valueType: 'text',
+ hidden: false,
+ 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}
+ />,
+ },
+
+ {
+ title: '鎿嶄綔',
+ dataIndex: 'option',
+ width: 140,
+ valueType: 'option',
+ render: (_, record) => [
+ <Button
+ type="link"
+ key="edit"
+ onClick={() => {
+ setModalVisible(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();
+ }
+ }
+ },
+ });
+ }}
+ >
+ 鍒犻櫎
+ </Button>,
+ ],
+ },
+ ];
+
return (
- <>
- <PageContainer>
- <h1>Hello world</h1>
- </PageContainer>
- </>
- )
-}
+ <PageContainer>
+ <div style={{ width: '100%', float: 'right' }}>
+ <ProTable
+ key="menu"
+ rowKey="id"
+ actionRef={actionRef}
+ formRef={formTableRef}
+ columns={columns}
+ cardBordered
+ scroll={{ x: 1300 }}
+ dateFormatter="string"
+ pagination={{ pageSize: 100 }}
+ 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/menu/tree', { ...params, ...searchParam }, (res) => {
+ const rootMenu = { id: 0, name: '鏍圭洰褰�', value: 0, children: [] };
+ rootMenu.children = res.data;
+ const treeData = transformTreeData([rootMenu]);
+ setTreeData(treeData);
+ return {
+ data: res.data,
+ success: true,
+ }
+ })
+ }
+ rowSelection={{
+ onChange: (ids, rows) => {
+ setSelectedRows(rows);
+ }
+ }}
+ columnsState={{
+ persistenceKey: 'pro-table-menu',
+ persistenceType: 'localStorage',
+ defaultValue: {
+ option: { fixed: 'right', disable: true },
+ },
+ onChange(value) {
+ },
+ }}
+ />
+ </div>
-export default User;
+ {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?.();
+ }
+ },
+ });
+ }}
+ >
+ 鎵归噺鍒犻櫎
+ </Button>
+ </FooterToolbar>
+ )}
+
+ <Edit
+ open={modalVisible}
+ values={currentRow || {}}
+ treeData={treeData}
+ 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>
+ );
+};
+
+export default Main;
--
Gitblit v1.9.1