服务查看

Author: lirenhao

config/config.ts

@@ -111,6 +111,12 @@ export default {
               component: './Admin',
               authority: ['admin'],
             },
+            {
+              name: '服务',
+              icon: 'smile',
+              path: '/svc',
+              component: './svc',
+            },
             {
               name: 'permit',
               icon: 'smile',

mock/svr.ts

@@ -0,0 +1,82 @@
+import { Request, Response } from 'express';
+
+const data = [
+  {
+    id: "service-1",
+    resources: [
+      {
+        uri: "/merchant",
+        ops: ["READ", "CREATE", "UPDATE", "DELETE"],
+      },
+      {
+        uri: "/terminal",
+        ops: ["READ", "CREATE", "UPDATE", "DELETE"],
+      },
+      {
+        uri: "/trans",
+        ops: ["READ"],
+      },
+    ],
+  },
+  {
+    id: "service-2",
+    resources: [
+      {
+        uri: "/merchant",
+        ops: ["READ"],
+      },
+      {
+        uri: "/terminal",
+        ops: ["READ"],
+      },
+      {
+        uri: "/trans",
+        ops: ["READ"],
+      },
+    ],
+  },
+  {
+    id: "service-3",
+    resources: [
+      {
+        uri: "/merchant",
+        ops: ["CREATE"],
+      },
+      {
+        uri: "/terminal",
+        ops: ["CREATE"],
+      },
+      {
+        uri: "/trans",
+        ops: ["READ"],
+      },
+    ],
+  },
+  {
+    id: "service-4",
+    resources: [
+      {
+        uri: "/merchant",
+        ops: ["UPDATE"],
+      },
+      {
+        uri: "/terminal",
+        ops: ["UPDATE"],
+      },
+      {
+        uri: "/trans",
+        ops: ["READ"],
+      },
+    ],
+  },
+]
+
+export default {
+  'GET  /api/permit/svc': (req: Request, resp: Response) => {
+    resp.send(data.map(item => item.id));
+  },
+  'GET  /api/permit/svc/:id': (req: Request, resp: Response) => {
+    const { id } = req.params;
+    resp.send(data.filter(item => item.id === decodeURIComponent(id))[0]);
+  }
+}

src/pages/svc/_mock.ts

@@ -0,0 +1,16 @@
+export enum Operator {
+  READ = "READ",
+  CREATE = "CREATE",
+  UPDATE = "UPDATE",
+  DELETE = "DELETE",
+}
+
+export interface ResData {
+  uri: String;
+  ops: Operator[];
+}
+
+export interface SvcData {
+  id: String;
+  resources: ResData[];
+}

src/pages/svc/data.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Dispatch } from 'redux';
+import { GridContent } from '@ant-design/pro-layout';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Spin, Menu, List } from 'antd';
+import { connect } from 'dva';
+import { SvcData, ResData } from './data.d';
+import { ModelState } from './model';
+
+import styles from './style.less';
+
+const { Item } = Menu;
+
+interface SvcProps {
+  dispatch: Dispatch<any>;
+  ids: string[];
+  info: SvcData;
+  loading: boolean;
+}
+
+const SvcView: React.FC<SvcProps> = props => {
+
+  const [id, setId] = React.useState<string>("");
+  const [info, setInfo] = React.useState<Partial<SvcData>>({});
+
+  React.useEffect(() => {
+    props.dispatch({ type: 'svc/fetchIds' });
+  }, []);
+
+  const selectKey = (key: string) => {
+    setId(key);
+    props.dispatch({
+      type: 'svc/fetchInfo',
+      payload: key,
+      callback: (info: SvcData) => setInfo(info),
+    });
+  }
+
+  const { ids, loading } = props;
+
+  return (
+    <PageHeaderWrapper>
+      <Spin spinning={loading}>
+        <GridContent>
+          <div className={styles.main} >
+            <div className={styles.leftMenu}>
+              <Menu
+                mode="inline"
+                selectedKeys={[id]}
+                onClick={({ key }) => selectKey(key)}
+              >
+                {ids.map(id => <Item key={id}>{id}</Item>)}
+              </Menu>
+            </div>
+            <div className={styles.right}>
+              <div className={styles.title}>{id}</div>
+              <List
+                loading={loading}
+                itemLayout="horizontal"
+                dataSource={info.resources}
+                renderItem={(item: ResData) => (
+                  <List.Item>
+                    <List.Item.Meta title={item.uri} description={item.ops.join(' | ')} />
+                  </List.Item>
+                )}
+              />
+            </div>
+          </div>
+        </GridContent>
+      </Spin>
+    </PageHeaderWrapper>
+  )
+}
+
+export default connect(
+  ({ svc,
+    loading,
+  }: {
+    svc: ModelState,
+    loading: { models: { [key: string]: boolean } };
+  }) => ({
+    ids: svc.ids,
+    loading: loading.models.svc,
+  }),
+)(SvcView);

src/pages/svc/index.tsx

@@ -0,0 +1,48 @@
+import { Effect } from 'dva';
+import { Reducer } from 'redux';
+import { getAllIds, getInfo } from './service';
+
+export interface ModelState {
+  ids: string[];
+}
+
+export interface ModelType {
+  namespace: string;
+  state: ModelState;
+  effects: {
+    fetchIds: Effect;
+    fetchInfo: Effect;
+  };
+  reducers: {
+    setIds: Reducer<ModelState>;
+  };
+}
+
+const Model: ModelType = {
+  namespace: 'svc',
+  state: {
+    ids: [],
+  },
+  effects: {
+    *fetchIds(_, { call, put }) {
+      const ids = yield call(getAllIds);
+      yield put({
+        type: 'setIds',
+        payload: ids,
+      });
+    },
+    *fetchInfo({ payload, callback }, { call }) {
+      const info = yield call(getInfo, payload);
+      if (callback) callback(info);
+    },
+  },
+  reducers: {
+    setIds(_, action) {
+      return {
+        ids: action.payload,
+      };
+    },
+  }
+}
+
+export default Model;

src/pages/svc/model.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export async function getAllIds() {
+  return request('/api/permit/svc');
+}
+
+export async function getInfo(id: string) {
+  return request(`/api/permit/svc/${encodeURIComponent(id)}`);
+}

src/pages/svc/service.ts

@@ -0,0 +1,97 @@
+@import '~antd/es/style/themes/default.less';
+
+.main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  overflow: auto;
+  background-color: @menu-bg;
+  .leftMenu {
+    width: 224px;
+    border-right: @border-width-base @border-style-base @border-color-split;
+    :global {
+      .ant-menu-inline {
+        border: none;
+      }
+      .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+        font-weight: bold;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    padding-top: 8px;
+    padding-right: 40px;
+    padding-bottom: 8px;
+    padding-left: 40px;
+    .title {
+      margin-bottom: 12px;
+      color: @heading-color;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+  :global {
+    .ant-list-split .ant-list-item:last-child {
+      border-bottom: 1px solid @border-color-split;
+    }
+    .ant-list-item {
+      padding-top: 14px;
+      padding-bottom: 14px;
+    }
+  }
+}
+:global {
+  .ant-list-item-meta {
+    // 账号绑定图标
+    .taobao {
+      display: block;
+      color: #ff4000;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: @border-radius-base;
+    }
+    .dingding {
+      margin: 2px;
+      padding: 6px;
+      color: #fff;
+      font-size: 32px;
+      line-height: 32px;
+      background-color: #2eabff;
+      border-radius: @border-radius-base;
+    }
+    .alipay {
+      color: #2eabff;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: @border-radius-base;
+    }
+  }
+
+  // 密码强度
+  font.strong {
+    color: @success-color;
+  }
+  font.medium {
+    color: @warning-color;
+  }
+  font.weak {
+    color: @error-color;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .main {
+    flex-direction: column;
+    .leftMenu {
+      width: 100%;
+      border: none;
+    }
+    .right {
+      padding: 40px;
+    }
+  }
+}