fix(Authorization): Authorization Component

src/components/Authorization/autz.ts

@@ -0,0 +1,39 @@
+import { model } from '@formily/reactive';
+
+const autzModel = model<{
+  autzTarget: {
+    id: string;
+    name: string;
+    type: 'user' | 'role';
+  };
+  visible: boolean;
+}>({
+  autzTarget: {
+    id: '',
+    name: '',
+    type: 'user',
+  },
+  visible: false,
+});
+
+export default autzModel;
+
+export const AuthorizationModel = model<{
+  data: PermissionItem[];
+  checkedPermission: Map<string, Set<string>>;
+  filterParam: {
+    type: string;
+    name: string;
+  };
+  checkAll: boolean;
+  spinning: boolean;
+}>({
+  data: [],
+  checkedPermission: new Map(),
+  filterParam: {
+    type: 'all',
+    name: '',
+  },
+  checkAll: false,
+  spinning: true,
+});

src/components/Authorization/index.less

@@ -0,0 +1,15 @@
+.action {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 10px 16px;
+  text-align: right;
+  background: 10px 16px;
+  border-top: 1px solid #e9e9e9;
+}
+
+.actionTable {
+  height: 75vh;
+  overflow: auto;
+}

src/components/Authorization/index.tsx

@@ -0,0 +1,277 @@
+import { observer } from '@formily/react';
+import type { TableColumnsType } from 'antd';
+import { Button, Checkbox, Col, Form, Input, message, Row, Select, Spin, Table } from 'antd';
+import { useCallback, useEffect, useMemo } from 'react';
+import encodeQuery from '@/utils/encodeQuery';
+import { map, scan, takeLast } from 'rxjs/operators';
+import { toArray } from 'rxjs';
+import db from '@/db';
+import Service from '@/components/Authorization/service';
+import styles from './index.less';
+import _ from 'lodash';
+import { AuthorizationModel } from '@/components/Authorization/autz';
+
+const service = new Service();
+
+const permissionType = [
+  { label: '全部', value: 'all' },
+  { label: '默认', value: 'default' },
+  { label: '系统', value: 'system' },
+  { label: '业务功能', value: 'business' },
+  { label: 'OpenAPI', value: 'open-api' },
+  { label: '多租户', value: 'tenant' },
+];
+
+const tableName = 'permission';
+
+const Authorization = observer((props: AuthorizationProps) => {
+  const [form] = Form.useForm();
+  const { target, close } = props;
+
+  const calculationSelectAll = useMemo(
+    () => (permissionDB: PermissionItem[], data: Record<string, any>) => {
+      // 计算是否全选
+      const permissionCount = Object.values(data)
+        .filter((item) => typeof item !== 'boolean')
+        .reduce((acc, cur) => (cur as string[])?.length + (acc as number), 0);
+      const autzCount = permissionDB
+        .map((item) => item.actions.map((ac) => ac.action))
+        .reduce((acc, cur) => (cur as string[])?.length + (acc as number), 0);
+      return permissionCount === autzCount;
+    },
+    [target.id],
+  );
+
+  const queryDB = () => db.table(tableName).reverse().sortBy('name');
+
+  const insertDB = useCallback(
+    async (permission: PermissionItem[]) => {
+      db.table(tableName).clear();
+      db.table(tableName).bulkAdd(permission);
+      AuthorizationModel.data = await queryDB();
+    },
+    [AuthorizationModel.data],
+  );
+
+  const initAutzInfo = useCallback(async () => {
+    if (!target.id) {
+      message.error('被授权对象数据缺失!');
+      return;
+    }
+    const permissionDB: PermissionItem[] = await queryDB();
+    service
+      .getAutzSetting(
+        encodeQuery({
+          paging: false,
+          terms: {
+            dimensionTarget: target.id,
+          },
+        }),
+      )
+      .pipe(
+        map((item: AuthorizationItem) => ({ key: item.permission, actions: item.actions })),
+        scan((result, value) => {
+          // eslint-disable-next-line no-param-reassign
+          result[value.key] = value.actions;
+          // 计算是否是全选
+          // 总权限数
+          const actionCount = permissionDB.find((item) => item.id === value.key)?.actions?.length;
+          const haveCount = value.actions?.length;
+          // eslint-disable-next-line no-param-reassign
+          result[`_${value.key}`] = actionCount === haveCount;
+          return result;
+        }, {}),
+        takeLast(1),
+      )
+      .subscribe((data) => {
+        form.setFieldsValue(data);
+        AuthorizationModel.checkAll = calculationSelectAll(permissionDB, data);
+        AuthorizationModel.spinning = false;
+      });
+  }, [target.id]);
+
+  const initPermission = useCallback(() => {
+    service
+      .getPermission()
+      .pipe(
+        map((item) => {
+          const type = item.properties?.type;
+          return { ...item, type };
+        }),
+        toArray(),
+      )
+      .subscribe({
+        next: insertDB,
+        error: () => {},
+        complete: initAutzInfo,
+      });
+  }, []);
+
+  useEffect(() => {
+    initPermission();
+    return () => {
+      db.table(tableName).clear();
+      AuthorizationModel.spinning = true;
+    };
+  }, [target.id]);
+
+  const searchPermission = async (name: string, type: string) => {
+    AuthorizationModel.filterParam.name = name;
+    AuthorizationModel.filterParam.type = type;
+    AuthorizationModel.data = await db
+      .table(tableName)
+      .where('name')
+      .startsWith(name)
+      .filter((item) => (type === 'all' ? item : (item.type || []).includes(type)))
+      .distinct()
+      .reverse()
+      .sortBy('name');
+  };
+
+  const setAutz = (data: unknown[]) => {
+    const permissions = Object.keys(data)
+      .filter((i) => !i.startsWith('_'))
+      .map((item) => ({
+        id: item,
+        actions: data[item],
+      }));
+    service
+      .setAutzInfo({
+        targetId: target.id,
+        targetType: target.type,
+        permissionList: permissions,
+      })
+      .subscribe(async () => {
+        await message.success('授权成功');
+      });
+  };
+
+  const columns: TableColumnsType<PermissionItem> = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      width: 200,
+    },
+    {
+      title: '权限操作',
+      dataIndex: 'actions',
+      render: (text: { action: string; name: string; id: string }[], record) => (
+        <Form.Item name={record.id}>
+          <Checkbox.Group
+            name={record.id}
+            onChange={(data) => {
+              AuthorizationModel.checkedPermission.set(
+                record.id,
+                new Set<string>(data as string[]),
+              );
+              form.setFieldsValue({
+                [`_${record.id}`]: text.length === data.length,
+              });
+            }}
+            options={text.map((item) => ({
+              label: item.name,
+              value: item.action,
+              key: item.id,
+            }))}
+          />
+        </Form.Item>
+      ),
+    },
+    {
+      title: (
+        <Checkbox
+          checked={AuthorizationModel.checkAll}
+          onChange={async (e) => {
+            const permissionDB: PermissionItem[] = await db
+              .table(tableName)
+              .reverse()
+              .sortBy('name');
+            const tempForm = _.cloneDeep(form.getFieldsValue());
+            permissionDB.forEach((item) => {
+              tempForm[item.id] = e.target.checked ? item.actions.map((i) => i.action) : [];
+              tempForm[`_${item.id}`] = e.target.checked;
+            });
+            AuthorizationModel.checkAll = 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.actions.map((item) => `${item.action}`) : [],
+                [`_${record.id}`]: e.target.checked,
+              });
+            }}
+          >
+            全选
+          </Checkbox>
+        </Form.Item>
+      ),
+    },
+  ];
+
+  return (
+    <Spin spinning={AuthorizationModel.spinning} tip="数据加载中...">
+      <Form
+        onFinish={setAutz}
+        size={'small'}
+        form={form}
+        wrapperCol={{ span: 20 }}
+        labelCol={{ span: 3 }}
+      >
+        <Form.Item label="被授权主体">
+          <Input value={target.name} disabled={true} />
+        </Form.Item>
+        <Form.Item label="筛选权限">
+          <Input.Group>
+            <Row>
+              <Col span={4}>
+                <Select
+                  onSelect={(type: string) =>
+                    searchPermission(AuthorizationModel.filterParam.name, type)
+                  }
+                  style={{ width: '100%' }}
+                  defaultValue={'all'}
+                  options={permissionType}
+                />
+              </Col>
+              <Col span={20}>
+                <Input.Search
+                  placeholder="请输入权限名称"
+                  onSearch={(name: string) =>
+                    searchPermission(name, AuthorizationModel.filterParam?.type)
+                  }
+                />
+              </Col>
+            </Row>
+          </Input.Group>
+        </Form.Item>
+        <Table
+          className={styles.actionTable}
+          size={'small'}
+          rowKey="id"
+          pagination={false}
+          columns={columns}
+          dataSource={AuthorizationModel.data}
+        />
+      </Form>
+      <div className={styles.action}>
+        <Button onClick={close} style={{ marginRight: 8 }}>
+          关闭
+        </Button>
+        <Button onClick={form.submit} type="primary">
+          保存
+        </Button>
+      </div>
+    </Spin>
+  );
+});
+
+export default Authorization;

src/pages/system/User/Authorization/service.ts

@@ -26,7 +26,7 @@ class Service extends BaseService<unknown> {
       mergeMap((item) => item.result as PermissionItem[]),
     );
 
-  public getAutzSetting = (params?: Record<string, any>) =>
+  public getAutzSetting = (params?: Record<string, unknown>) =>
     defer(() =>
       from(
         request(`/${SystemConst.API_BASE}/autz-setting/_query/no-paging`, {
@@ -38,6 +38,16 @@ class Service extends BaseService<unknown> {
       filter((item) => item.status === 200),
       mergeMap((item) => item.result as AuthorizationItem[]),
     );
+
+  public setAutzInfo = (data?: Record<string, unknown>) =>
+    defer(() =>
+      from(
+        request(`/${SystemConst.API_BASE}/autz-setting/detail/_save`, {
+          method: 'POST',
+          data,
+        }),
+      ),
+    ).pipe(filter((item) => item.status === 200));
 }
 
 export default Service;

src/pages/system/User/Authorization/typings.d.ts

@@ -29,3 +29,12 @@ type AuthorizationItem = {
   priority: number;
   state: number;
 };
+
+interface AuthorizationProps {
+  target: {
+    id: string;
+    name: string;
+    type: string;
+  };
+  close: () => void;
+}

src/pages/system/OpenAPI/index.tsx

@@ -4,7 +4,7 @@ import type { ProColumns, ActionType } from '@jetlinks/pro-table';
 import type { OpenApiItem } from '@/pages/system/OpenAPI/typings';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import { CurdModel } from '@/components/BaseCrud/model';
-import { message, Popconfirm, Tooltip } from 'antd';
+import { Drawer, message, Popconfirm, Tooltip } from 'antd';
 import {
   CloseCircleOutlined,
   EditOutlined,
@@ -13,9 +13,12 @@ import {
 } from '@ant-design/icons';
 import BaseCrud from '@/components/BaseCrud';
 import BaseService from '@/utils/BaseService';
+import autzModel from '@/components/Authorization/autz';
+import Authorization from '@/components/Authorization';
+import { observer } from '@formily/react';
 
 const service = new BaseService<OpenApiItem>('open-api');
-const OpenAPI: React.FC = () => {
+const OpenAPI: React.FC = observer(() => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
 
@@ -28,13 +31,14 @@ const OpenAPI: React.FC = () => {
     {
       title: 'clientId',
       dataIndex: 'id',
+      width: 200,
     },
     {
       title: intl.formatMessage({
         id: 'pages.table.name',
         defaultMessage: '名称',
       }),
-      dataIndex: 'Name',
+      dataIndex: 'clientName',
     },
     {
       title: intl.formatMessage({
@@ -98,7 +102,14 @@ const OpenAPI: React.FC = () => {
             <EditOutlined />
           </Tooltip>
         </a>,
-        <a onClick={() => console.log('授权')}>
+        <a
+          key="auth"
+          onClick={() => {
+            autzModel.autzTarget.id = record.id;
+            autzModel.autzTarget.name = record.clientName;
+            autzModel.visible = true;
+          }}
+        >
           <Tooltip
             title={intl.formatMessage({
               id: 'pages.data.option.authorize',
@@ -108,7 +119,7 @@ const OpenAPI: React.FC = () => {
             <KeyOutlined />
           </Tooltip>
         </a>,
-        <a href={record.id} target="_blank" rel="noopener noreferrer" key="view">
+        <a key="state">
           <Popconfirm
             title={intl.formatMessage({
               id: 'pages.data.option.disabled.tips',
@@ -337,8 +348,23 @@ const OpenAPI: React.FC = () => {
         modelConfig={{ width: 900 }}
         actionRef={actionRef}
       />
+      <Drawer
+        title="授权"
+        width="70vw"
+        visible={autzModel.visible}
+        onClose={() => {
+          autzModel.visible = false;
+        }}
+      >
+        <Authorization
+          close={() => {
+            autzModel.visible = false;
+          }}
+          target={autzModel.autzTarget}
+        />
+      </Drawer>
     </PageContainer>
   );
-};
+});
 
 export default OpenAPI;

src/pages/system/Role/index.tsx

@@ -1,13 +1,15 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import React, { useRef } from 'react';
 import { EditOutlined, KeyOutlined, MinusOutlined, UserAddOutlined } from '@ant-design/icons';
-import { Menu, message, Popconfirm, Tooltip } from 'antd';
+import { Drawer, Menu, message, Popconfirm, Tooltip } from 'antd';
 import type { ProColumns, ActionType } from '@jetlinks/pro-table';
 import BaseCrud from '@/components/BaseCrud';
 import { CurdModel } from '@/components/BaseCrud/model';
 import BaseService from '@/utils/BaseService';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import { observer } from '@formily/react';
+import autzModel from '@/components/Authorization/autz';
+import Authorization from '@/components/Authorization';
 
 const menu = (
   <Menu>
@@ -97,7 +99,15 @@ const Role: React.FC = observer(() => {
             <EditOutlined />
           </Tooltip>
         </a>,
-        <a onClick={() => console.log('授权')}>
+        <a
+          key="autz"
+          onClick={() => {
+            autzModel.autzTarget.id = record.id;
+            autzModel.autzTarget.name = record.name;
+            autzModel.autzTarget.type = 'role';
+            autzModel.visible = true;
+          }}
+        >
           <Tooltip
             title={intl.formatMessage({
               id: 'pages.data.option.authorize',
@@ -109,6 +119,7 @@ const Role: React.FC = observer(() => {
         </a>,
 
         <a
+          key="bind"
           onClick={() => {
             console.log('绑定用户');
             actionRef.current?.reload();
@@ -123,7 +134,7 @@ const Role: React.FC = observer(() => {
             <UserAddOutlined />
           </Tooltip>
         </a>,
-        <a>
+        <a key="delete">
           <Popconfirm
             title={intl.formatMessage({
               id: 'pages.data.option.remove.tips',
@@ -225,6 +236,21 @@ const Role: React.FC = observer(() => {
         schema={schema}
         defaultParams={{ typeId: 'role' }}
       />
+      <Drawer
+        title="授权"
+        width="70vw"
+        visible={autzModel.visible}
+        onClose={() => {
+          autzModel.visible = false;
+        }}
+      >
+        <Authorization
+          close={() => {
+            autzModel.visible = false;
+          }}
+          target={autzModel.autzTarget}
+        />
+      </Drawer>
     </PageContainer>
   );
 });

src/pages/system/User/Authorization/index.tsx

@@ -1,204 +0,0 @@
-import { observer } from '@formily/react';
-import type { TableColumnsType } from 'antd';
-import { Button, Checkbox, Col, Form, Input, Row, Select, Table } from 'antd';
-import Service from '@/pages/system/User/Authorization/service';
-import { useEffect } from 'react';
-import { model } from '@formily/reactive';
-import encodeQuery from '@/utils/encodeQuery';
-import { map, scan, takeLast } from 'rxjs/operators';
-import db from '@/pages/system/User/Authorization/db';
-import { toArray } from 'rxjs';
-
-const service = new Service();
-
-const AuthorizationModel = model<{
-  data: PermissionItem[];
-  checkedPermission: Map<string, Set<string>>;
-}>({
-  data: [],
-  checkedPermission: new Map(),
-});
-const Authorization = observer(() => {
-  const [form] = Form.useForm();
-  useEffect(() => {
-    service
-      .getPermission()
-      .pipe(
-        map((item) => {
-          const type = item.properties?.type;
-          return { ...item, type };
-        }),
-        toArray(),
-      )
-      .subscribe(async (permission: any) => {
-        db.table('permission').clear();
-        db.table('permission').bulkAdd(permission);
-        AuthorizationModel.data = await db.table('permission').reverse().sortBy('name');
-      });
-    service
-      .getAutzSetting(
-        encodeQuery({
-          paging: false,
-          terms: {
-            dimensionTarget: '11f0075aa18835be6217f52902985c75',
-          },
-        }),
-      )
-      .pipe(
-        map((item: AuthorizationItem) => ({ key: item.permission, actions: item.actions })),
-        scan((result, value) => {
-          // eslint-disable-next-line no-param-reassign
-          result[value.key] = value.actions.map((ac) => `${value.key}@${ac}`);
-          return result;
-        }, {}),
-        takeLast(1),
-      )
-      .subscribe((data) => {
-        form.setFieldsValue(data);
-      });
-  }, []);
-
-  const columns: TableColumnsType<PermissionItem> = [
-    {
-      title: '名称',
-      dataIndex: 'name',
-      width: 200,
-    },
-    {
-      title: '权限操作',
-      dataIndex: 'actions',
-      render: (text: { action: string; name: string; id: string }[], record) => (
-        <Form.Item name={record.id}>
-          <Checkbox.Group
-            name={record.id}
-            onChange={(data) => {
-              AuthorizationModel.checkedPermission.set(
-                record.id,
-                new Set<string>(data as string[]),
-              );
-            }}
-            options={text.map((item) => ({
-              label: item.name,
-              value: `${record.id}@${item.action}`,
-              key: item.id,
-            }))}
-          />
-        </Form.Item>
-      ),
-    },
-    {
-      title: '操作',
-      width: 200,
-      dataIndex: 'option',
-      render: (text, record) => (
-        <>
-          <Checkbox
-            onChange={(e) => {
-              form.setFieldsValue({
-                [record.id]: e.target.checked
-                  ? record.actions.map((item) => `${record.id}@${item.action}`)
-                  : [],
-              });
-            }}
-          >
-            全选
-          </Checkbox>
-        </>
-      ),
-    },
-  ];
-  return (
-    <>
-      <Form
-        onFinish={(data) => {
-          console.log(data, 'd');
-        }}
-        size={'small'}
-        form={form}
-        wrapperCol={{ span: 20 }}
-        labelCol={{ span: 2 }}
-      >
-        <Form.Item label="被授权主体">
-          <Select mode="multiple" />
-        </Form.Item>
-        <Form.Item label="筛选权限">
-          <Input.Group>
-            <Row>
-              <Col span={4}>
-                <Select
-                  onSelect={async (value: string) => {
-                    AuthorizationModel.data = await db
-                      .table('permission')
-                      .filter((item) =>
-                        value === 'all' ? item : (item.type || []).includes(value),
-                      )
-                      .distinct()
-                      .reverse()
-                      .sortBy('name');
-                  }}
-                  style={{ width: '100%' }}
-                  options={[
-                    { label: '全部', value: 'all' },
-                    { label: '默认', value: 'default' },
-                    { label: '系统', value: 'system' },
-                    { label: '业务功能', value: 'business' },
-                    { label: 'OpenAPI', value: 'open-api' },
-                    { label: '多租户', value: 'tenant' },
-                  ]}
-                />
-              </Col>
-              <Col span={20}>
-                <Input.Search
-                  placeholder="请输入权限名称"
-                  onSearch={async (value) => {
-                    AuthorizationModel.data = await db
-                      .table('permission')
-                      .where('name')
-                      .startsWith(value)
-                      .distinct()
-                      .reverse()
-                      .sortBy('name');
-                  }}
-                />
-              </Col>
-            </Row>
-          </Input.Group>
-        </Form.Item>
-        <Table
-          style={{ height: '75vh', overflow: 'auto' }}
-          size={'small'}
-          rowKey="id"
-          pagination={false}
-          columns={columns}
-          dataSource={AuthorizationModel.data}
-        />
-      </Form>
-      <div
-        style={{
-          position: 'absolute',
-          right: 0,
-          bottom: 0,
-          width: '100%',
-          borderTop: '1px solid #e9e9e9',
-          padding: '10px 16px',
-          background: '#fff',
-          textAlign: 'right',
-        }}
-      >
-        <Button
-          onClick={async () => {
-            // props.close();
-          }}
-          style={{ marginRight: 8 }}
-        >
-          关闭
-        </Button>
-        <Button onClick={form.submit} type="primary">
-          保存
-        </Button>
-      </div>
-    </>
-  );
-});
-
-export default Authorization;

src/pages/system/User/index.tsx

@@ -6,7 +6,7 @@ import {
   CloseCircleOutlined,
   PlayCircleOutlined,
 } from '@ant-design/icons';
-import { Menu, Tooltip, Popconfirm, message, Drawer } from 'antd';
+import { Tooltip, Popconfirm, message, Drawer } from 'antd';
 import type { ProColumns, ActionType } from '@jetlinks/pro-table';
 import BaseCrud from '@/components/BaseCrud';
 import { CurdModel } from '@/components/BaseCrud/model';
@@ -16,22 +16,15 @@ import { Store } from 'jetlinks-store';
 import SystemConst from '@/utils/const';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import type { ISchema } from '@formily/json-schema';
-import Authorization from '@/pages/system/User/Authorization';
-
-const menu = (
-  <Menu>
-    <Menu.Item key="1">1st item</Menu.Item>
-    <Menu.Item key="2">2nd item</Menu.Item>
-    <Menu.Item key="3">3rd item</Menu.Item>
-  </Menu>
-);
+import Authorization from '@/components/Authorization';
+import autzModel from '@/components/Authorization/autz';
 
 export const service = new BaseService<UserItem>('user');
 const User = observer(() => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
 
-  const [model, setModel] = useState(CurdModel.model);
+  const [model1, setModel] = useState(CurdModel.model);
 
   useEffect(() => {
     const modelSubscription = Store.subscribe(SystemConst.BASE_CURD_MODEL, setModel);
@@ -156,7 +149,14 @@ const User = observer(() => {
             <EditOutlined />
           </Tooltip>
         </a>,
-        <a key="auth" onClick={() => console.log('授权')}>
+        <a
+          key="auth"
+          onClick={() => {
+            autzModel.autzTarget.id = record.id;
+            autzModel.autzTarget.name = record.name;
+            autzModel.visible = true;
+          }}
+        >
           <Tooltip
             title={intl.formatMessage({
               id: 'pages.data.option.authorize',
@@ -212,7 +212,7 @@ const User = observer(() => {
         'x-decorator': 'FormItem',
         'x-component': 'Input',
         'x-component-props': {
-          disabled: model === 'edit',
+          disabled: model1 === 'edit',
         },
         'x-decorator-props': {},
         name: 'username',
@@ -298,11 +298,22 @@ const User = observer(() => {
           id: 'pages.system.user',
           defaultMessage: '用户管理',
         })}
-        menu={menu}
         schema={schema}
       />
-      <Drawer title="授权" width="70vw" visible={true}>
-        <Authorization />
+      <Drawer
+        title="授权"
+        width="50vw"
+        visible={autzModel.visible}
+        onClose={() => {
+          autzModel.visible = false;
+        }}
+      >
+        <Authorization
+          close={() => {
+            autzModel.visible = false;
+          }}
+          target={autzModel.autzTarget}
+        />
       </Drawer>
     </PageContainer>
   );