fix: router修改

config/proxy.ts

@@ -9,8 +9,12 @@
 export default {
   dev: {
     '/jetlinks': {
-      target: 'http://192.168.33.222:8844/',
-      ws: 'ws://192.168.33.222:8844/',
+      // target: 'http://192.168.33.222:8844/',
+      // ws: 'ws://192.168.33.222:8844/',
+      target: 'http://120.79.18.123:8844/',
+      ws: 'ws://120.79.18.123:8844/',
+      // target: 'http://192.168.66.5:8844/',
+      // ws: 'ws://192.168.66.5:8844/',
       // ws: 'ws://demo.jetlinks.cn/jetlinks',
       // target: 'http://demo.jetlinks.cn/jetlinks',
       changeOrigin: true,

config/routes.ts

@@ -58,13 +58,6 @@
         component: './system/Permission',
       },
       {
-        path: '/system/org',
-        name: 'org',
-        icon: 'smile',
-        access: 'organization',
-        component: './system/Org',
-      },
-      {
         path: '/system/open-api',
         name: 'open-api',
         icon: 'smile',

src/pages/system/Role/Edit/Permission/ChooseDepartment.tsx

@@ -0,0 +1,92 @@
+import { Modal, Transfer, Tree } from "antd"
+import { useState } from "react";
+interface Props {
+    visible: boolean;
+    data: any;
+    cancel: () => void;
+}
+
+const ChooseDepartment = (props: Props) => {
+    const isChecked = (selectedKeys, eventKey) => selectedKeys.indexOf(eventKey) !== -1;
+
+    const generateTree = (treeNodes = [], checkedKeys = []) =>
+        treeNodes.map(({ children, ...props }) => ({
+            ...props,
+            disabled: checkedKeys.includes(props.key),
+            children: generateTree(children, checkedKeys),
+        }));
+
+    const TreeTransfer = ({ dataSource, targetKeys, ...restProps }) => {
+        const transferDataSource: any[] = [];
+        function flatten(list = []) {
+            list.forEach(item => {
+                transferDataSource.push(item);
+                flatten(item.children);
+            });
+        }
+        flatten(dataSource);
+
+        return (
+            <Transfer
+                {...restProps}
+                showSearch
+                titles={['选择', '已选']}
+                targetKeys={targetKeys}
+                dataSource={transferDataSource}
+                className="tree-transfer"
+                render={item => item.title}
+                showSelectAll={false}
+            >
+                {({ direction, onItemSelect, selectedKeys }) => {
+                    if (direction === 'left') {
+                        const checkedKeys = [...selectedKeys, ...targetKeys];
+                        return (
+                            <Tree
+                                blockNode
+                                checkable
+                                checkStrictly
+                                defaultExpandAll
+                                checkedKeys={checkedKeys}
+                                treeData={generateTree(dataSource, targetKeys)}
+                                onCheck={(_, { node: { key } }) => {
+                                    onItemSelect(key, !isChecked(checkedKeys, key));
+                                }}
+                                onSelect={(_, { node: { key } }) => {
+                                    onItemSelect(key, !isChecked(checkedKeys, key));
+                                }}
+                            />
+                        );
+                    }
+                }}
+            </Transfer>
+        );
+    };
+
+    const treeData = [
+        { key: '0-0', title: '0-0' },
+        {
+            key: '0-1',
+            title: '0-1',
+            children: [
+                { key: '0-1-0', title: '0-1-0' },
+                { key: '0-1-1', title: '0-1-1' },
+            ],
+        },
+        { key: '0-2', title: '0-3' },
+    ];
+
+    const [targetKeys, setTargetKeys] = useState([]);
+    const onChange = (keys: any) => {
+        setTargetKeys(keys);
+    };
+
+    return (
+        <Modal title="选择部门" width={900} visible={props.visible} onCancel={() => {
+            props.cancel()
+        }}>
+            <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />
+        </Modal>
+    )
+}
+
+export default ChooseDepartment

src/pages/system/Role/Edit/Permission/index.less

@@ -0,0 +1,13 @@
+.rolePermission {
+    :global {
+        .ant-table-cell {
+            .ant-form-item {
+                margin: 0;
+            }
+        }
+        .ant-table-cell-with-append {
+            display: flex;
+            align-items: center;
+        }
+    }
+}

src/pages/system/Role/Edit/Permission/index.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useState } from 'react'
+import { SettingOutlined } from '@ant-design/icons';
+import { Button, Card, Checkbox, Form, Input, message, Select, Steps, Table, TableColumnsType } from 'antd';
+import ChooseDepartment from './ChooseDepartment'
+import Service from '@/pages/system/Role/service'
+import styles from './index.less'
+import _ from 'lodash';
+
+const Permission = () => {
+    const service = new Service('role')
+    const [form] = Form.useForm();
+    const [current, setCurrent] = useState<number>(0);
+    const [visible, setVisible] = useState<boolean>(false);
+    const [dataSource, setDataSource] = useState<any[]>([])
+    const [checkAll, setCheckAll] = useState<boolean>(false);
+    const [checkedPermission, setCheckedPermission] = useState<any>()
+
+    useEffect(() => {
+        service.queryMenuList({}).subscribe(resp => {
+            if (resp.status === 200) {
+                // setDataSource(resp.result)
+                const data = [
+                    {
+                        "id": "1",
+                        "parentId": "0",
+                        "path": "",
+                        "name": "test1",
+                        "buttons": [],
+                        children: [
+                            {
+                                "id": "11",
+                                "parentId": "1",
+                                "path": "",
+                                "name": "test11",
+                                "buttons": [
+                                    {
+                                        "id": "but11",
+                                        "name": "but11",
+                                        "options": {}
+                                    },
+                                    {
+                                        "id": "but21",
+                                        "name": "but21",
+                                        "options": {}
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                    {
+                        "id": "2",
+                        "parentId": "0",
+                        "path": "",
+                        "name": "test2",
+                        "buttons": [
+                            {
+                                "id": "but6",
+                                "name": "but6",
+                                "options": {}
+                            },
+                            {
+                                "id": "but8",
+                                "name": "but8",
+                                "options": {}
+                            }
+                        ],
+                        children: []
+                    }
+                ]
+                setDataSource(data)
+            }
+        })
+    }, [])
+
+    const menuColumns: TableColumnsType<any> = [
+        {
+            title: (
+                <Checkbox
+                    checked={checkAll}
+                    onChange={(e) => {
+                        setCheckAll(e.target.checked)
+                        const tempForm = _.cloneDeep(form.getFieldsValue());
+                        dataSource.forEach((item) => {
+                            tempForm[item.id] = e.target.checked ? item.buttons.map((i) => i.id) : [];
+                            tempForm[`_${item.id}`] = e.target.checked;
+                        });
+                        form.setFieldsValue(tempForm);
+                    }}
+                >菜单权限</Checkbox>
+            ),
+            width: 200,
+            dataIndex: 'option',
+            render: (text, record) => (
+                <Form.Item name={`_${record.id}`} valuePropName="checked">
+                    <Checkbox
+                        onChange={(e) => {
+                            form.setFieldsValue({
+                                [record.id]: e.target.checked ? record.buttons.map((item: any) => `${item.id}`) : [],
+                                [`_${record.id}`]: e.target.checked,
+                            });
+                        }}
+                    >{record.name}</Checkbox>
+                </Form.Item>
+            ),
+        },
+        {
+            title: "",
+            dataIndex: 'buttons',
+            render: (text: { name: string; id: string }[], record) => (
+                <Form.Item name={record.id}>
+                    <Checkbox.Group
+                        name={record.id}
+                        onChange={(data) => {
+                            const list = Array.from(new Set<string>(data as string[]))
+                            // const allButtons = _.map(_.flatten(_.map(dataSource, 'buttons')), 'id')
+                            // setCheckAll(allButtons.length === list.length)
+                            // console.log(form.getFieldsValue())
+                            // console.log(allButtons)
+                            setCheckedPermission(list)
+                            form.setFieldsValue({
+                                [`_${record.id}`]: text.length === data.length,
+                            });
+                        }}
+                        options={text.map((item) => ({
+                            label: item.name,
+                            value: item.id,
+                            key: item.id
+                        }))}
+                    />
+                </Form.Item>
+            ),
+        }
+    ];
+
+    const dataColumns: TableColumnsType<PermissionItem> = [
+        {
+            title: '数据权限',
+            dataIndex: 'actions',
+            render: (text: { action: string; name: string; id: string }[], record) => (
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <Checkbox style={{ width: '150px' }}>
+                        {record.name}
+                    </Checkbox>
+                    <Select style={{ width: '200px' }}
+                        showSearch
+                        placeholder="请选择"
+                        onChange={() => { }}
+                        filterOption={(input, option) =>
+                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                        }
+                    >
+                        <Select.Option value="jack">Jack</Select.Option>
+                        <Select.Option value="lucy">Lucy</Select.Option>
+                        <Select.Option value="tom">Tom</Select.Option>
+                    </Select>
+                    <div style={{ marginLeft: '15px', display: 'flex', alignItems: 'center' }}>
+                        <div style={{ width: '100px' }}>特定部门：</div>
+                        <Input addonAfter={<SettingOutlined onClick={() => {
+                            setVisible(true)
+                        }} />} defaultValue="mysite" />
+                    </div>
+                </div>
+            )
+        }
+    ];
+
+    return (
+        <Card className={styles.rolePermission}>
+            <Steps current={current}>
+                <Steps.Step title="菜单权限" />
+                <Steps.Step title="数据权限" />
+            </Steps>
+            <div style={{ marginTop: '15px' }}>
+                {
+                    current === 0 &&
+                    <div>
+                        <Input.Search enterButton placeholder="请输入权限名称" onSearch={() => { }} style={{ width: 300, marginBottom: '15px' }} />
+                        <Form
+                            onFinish={(data: unknown[]) => {
+                                // const permissions = Object.keys(data)
+                                //     .filter((i) => !i.startsWith('_'))
+                                //     .map((item) => ({
+                                //         id: item,
+                                //         buttons: data[item],
+                                //     }));
+                                // console.log(_.flatten(_.map(permissions, 'buttons')).length)
+                                // if (permissions.length === 0) {
+                                //     message.error('请勾选菜单权限')
+                                // } else {
+                                    setCurrent(1)
+                                // }
+
+                            }}
+                            form={form}
+                            wrapperCol={{ span: 20 }}
+                            labelCol={{ span: 3 }}
+                        >
+                            <Table
+                                rowKey="id"
+                                pagination={false}
+                                columns={menuColumns}
+                                dataSource={dataSource}
+                            />
+                        </Form>
+                    </div>
+                }
+                {
+                    current === 1 &&
+                    <div>
+                        <Input.Search enterButton placeholder="请输入权限名称" onSearch={() => { }} style={{ width: 300, marginBottom: '15px' }} />
+                        <Table
+                            rowKey="id"
+                            pagination={false}
+                            columns={dataColumns}
+                            dataSource={dataSource}
+                        />
+                    </div>
+                }
+            </div>
+            <div style={{ marginTop: '15px' }}>
+                {current === 0 && (
+                    <Button type="primary" onClick={form.submit}>
+                        下一步
+                    </Button>
+                )}
+                {current === 1 && (
+                    <>
+                        <Button style={{ margin: '0 8px' }} onClick={() => {
+                            setCurrent(0)
+                        }}>
+                            上一步
+                        </Button>
+                        <Button type="primary" onClick={() => {
+
+                        }}>
+                            保存
+                        </Button>
+                    </>
+                )}
+            </div>
+            <ChooseDepartment visible={visible} data={{}} cancel={() => {
+                setVisible(false)
+            }} />
+        </Card>
+    );
+};
+export default Permission;