bs temp

.umirc.ts

@@ -19,6 +19,13 @@ export default defineConfig({
     },
   ],
   npmClient: 'yarn',
+  proxy: {
+    '/api': {
+      target: 'http://47.96.12.136:8788/',
+      // target: 'http://47.96.12.136:8888/',
+      // target: 'http://120.55.44.4:8900/',
+    },
+  },
 });
 
 // axios配置

src/Engine/Drag/index.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import './index.less';
 import Loading from '@/loading';
+import { getDvaApp } from 'umi';
+
+const app = getDvaApp();
 
 const defaultOptions: GT.IPageOptions = {
   limit: true,
@@ -393,11 +396,20 @@ class DragComponent extends React.PureComponent<any> {
     );
   }
 }
-
 export default function SysPage(RouteOption: GT.IRouterOptions) {
-  const { component, options } = RouteOption;
+  const { component, options, models } = RouteOption;
+
+  const DynamicComponent = React.lazy(async () => {
+    if (models) {
+      let model = (await models()).default;
+      // 防止models多次注册
+      if (!app._models.find((item: any) => item.namespace == model.namespace)) {
+        app.model(model);
+      }
+    }
+    return component();
+  });
 
-  const DynamicComponent = React.lazy(() => component());
   return (props: any) => {
     const {
       params,
@@ -419,11 +431,7 @@ export default function SysPage(RouteOption: GT.IRouterOptions) {
         zoomOut={zoomOut}
       >
         <React.Suspense fallback={<Loading />}>
-          <DynamicComponent
-            params={params}
-            router={router}
-            id={id}
-          />
+          <DynamicComponent params={params} router={router} id={id} />
         </React.Suspense>
       </DragComponent>
     );

src/Engine/typings.d.ts

@@ -33,8 +33,9 @@ declare namespace GT {
   interface IRouterOptions {
     // 异步组件地址
     component: () => Promise<any>;
+    models?: () => Promise<any>;
     // 页面唯一标识符
-    key: PAGE_KEY;
+    key: number;
     options?: IPageOptions;
   }
 
@@ -60,13 +61,8 @@ declare namespace GT {
   }
 }
 
-declare enum PAGE_KEY {
-  Home,
-  Access,
-}
-
 interface IStateHandler {
   onStart: () => void;
   onUpdate: () => void;
   onStop: () => void;
-}
+}

src/Frameworks/SysPage.ts

@@ -1,4 +1,5 @@
 import System from '@/Engine/ECS/System';
+import { PAGE_KEY } from '@/Project/constants';
 import { getDvaApp } from 'umi';
 
 class SysRouter extends System {
@@ -37,7 +38,7 @@ class SysRouter extends System {
   // 根据pageId删除页面
   removeByKey(key?: PAGE_KEY) {
     this.dispatch({
-      type: 'page/remove',
+      type: 'page/removeByKey',
       payload: { key },
     });
   }

src/Frameworks/SysRouter.ts

@@ -1,7 +1,7 @@
 import Drag from '@/Engine/Drag';
+import { PAGE_KEY } from '@/Project/constants';
 import React from 'react';
 
-
 export const route: GT.IRouterOptions[] = [
   {
     key: PAGE_KEY.Home,
@@ -25,6 +25,20 @@ export const route: GT.IRouterOptions[] = [
       height: 500,
     },
   },
+  {
+    key: PAGE_KEY.Login,
+    //@ts-ignore
+    component: () => import('@/Project/pages/Login'),
+    //@ts-ignore
+    models:() => import('@/Project/pages/Login/models/login'),
+    options: {
+      name: '登录页',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+    },
+  },
 ];
 
 let Pages: { [key: string]: any } = {};

src/Frameworks/typing.d.ts

@@ -2,7 +2,6 @@ import Os from "@/Project/Os";
 
 declare global {
   interface Window {
-    SysRouter: any;
     GT_APP: Os;
   }
 }

src/Project/Functions/Handlers/AppPlatformHandle.ts

@@ -1,7 +1,8 @@
 import StateHandler from '@/Engine/StateMahines/StateHandler';
 import SysPage from '@/Frameworks/SysPage';
+import { PAGE_KEY } from '@/Project/constants';
 import { FuncMainState } from '../FuncMain';
-
+window.GT_APP
 export default class AppPlatformHandle implements StateHandler<FuncMainState> {
   stateIn(): void {
     SysPage.add(PAGE_KEY.Access);

src/Project/Functions/LevelAFunctions/FuncAppPlatform.ts

@@ -4,7 +4,7 @@ export enum FuncAppPlatformState {
   ModuleMenu,
 }
 
-export class FuncAppPlatform extends Func<FuncAppPlatformState>{
+export default class FuncAppPlatform extends Func<FuncAppPlatformState>{
   constructor(name: string) {
     super(name);
     super.initStates(sm => {

src/Project/Functions/LevelAFunctions/FuncLogin.ts

@@ -1,22 +1,31 @@
-import Func from "@/Engine/ECS/Function";
-import SysPage from "@/Frameworks/SysPage";
+import Func from '@/Engine/ECS/Function';
+import SysPage from '@/Frameworks/SysPage';
+import { PAGE_KEY } from '@/Project/constants';
+import { FuncMainState } from '../FuncMain';
 
 export enum FuncLoginState {
   idle,
 }
 
-export class FuncLogin extends Func<FuncLoginState>{
+export default class FuncLogin extends Func<FuncLoginState> {
   constructor(name: string) {
     super(name);
-    super.initStates(sm => {
-      sm.addState(FuncLoginState.idle, this.onIdleStateIn, null, this.onIdleStateExit);
-    })
+    super.initStates((sm) => {
+      sm.addState(
+        FuncLoginState.idle,
+        this.onIdleStateIn,
+        null,
+        this.onIdleStateExit,
+      );
+    });
   }
   onIdleStateIn(): void {
-    SysPage.add(PAGE_KEY.Home);
+    SysPage.add(PAGE_KEY.Login, {
+      test: 11111,
+      gotoA: () => window.GT_APP.funcMain.changeState(FuncMainState.AppPlatform),
+    });
   }
   onIdleStateExit(): void {
-
-    SysPage.removeByKey(PAGE_KEY.Home);
+    SysPage.removeByKey(PAGE_KEY.Login);
   }
-}
+}

src/Project/Os.ts

@@ -1,14 +1,15 @@
 import FuncMain from './Functions/FuncMain';
-import { FuncLogin } from './Functions/LevelAFunctions/FuncLogin';
+import FuncLogin from './Functions/LevelAFunctions/FuncLogin';
+import FuncAppPlatform from './Functions/LevelAFunctions/FuncAppPlatform';
 
 class Os {
   funcMain: FuncMain;
   funcLogin: FuncLogin;
+  funcAppPlatform: FuncAppPlatform;
   constructor() {
     this.funcMain = new FuncMain('FuncMain');
-    this.funcMain.setActive(true);
-
-    this.funcLogin = new FuncLogin("FuncLogin")
+    this.funcLogin = new FuncLogin('FuncLogin');
+    this.funcAppPlatform = new FuncAppPlatform('FuncAppPlatform');
   }
 }
 

src/Project/constants/index.ts

@@ -1 +1,5 @@
-export const DEFAULT_NAME = 'Umi Max';
+export enum PAGE_KEY {
+  Home,
+  Access,
+  Login,
+}

src/Project/pages/Access/index.tsx

@@ -39,6 +39,7 @@ const AccessPage: React.FC<GT.IPageProps> = (props) => {
         title: '权限示例',
       }}
     >
+      1231213123213123
       {/* <Access accessible={access.canSeeAdmin}>
         <Button>只有 Admin 可以看到这个按钮</Button>
       </Access> */}

src/Project/pages/Login/index.js

@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import { connect } from 'umi';
+import { Checkbox, Form, Select, Input, Button } from 'antd';
+import { queryDepList } from '@/Project/services/user';
+const { Option } = Select;
+
+class LoginPage extends Component {
+  formRef = null;
+  state = {
+    type: 'account',
+    depList: [],
+    hasName: false,
+  };
+  constructor(props) {
+    super(props);
+    this.formRef = React.createRef();
+  }
+  componentDidMount = () => {
+    console.log(this.props);
+    this.props.params.callback('123213213')
+  };
+  onHandleChange = async (name) => {
+    var res = await queryDepList(name);
+    this.setState({
+      depList: res.data,
+      hasName: true,
+    });
+    this.formRef.current.setFieldsValue({
+      DepId: res.data[0]?.ID + '',
+    });
+  };
+
+  handleSubmit = (values) => {
+    const { type } = this.state;
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'login/login',
+      payload: {
+        ...values,
+        // 防止浏览器自动填充
+        password: values.password2,
+        type,
+      },
+      callback: () => {
+        this.props.params.gotoA()
+      }
+    });
+  };
+
+  render() {
+    const { depList, hasName } = this.state;
+    const { submitting, form } = this.props;
+    return (
+      <div style={{ margin: '200px auto', width: '40%' }}>
+        <Form
+          name="basic"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 16 }}
+          onFinish={this.handleSubmit}
+          autoComplete="new-password"
+          ref={this.formRef}
+        >
+          <Form.Item
+            label="用户名"
+            name="username"
+            autoComplete="off"
+            rules={[{ required: true, message: '请输入用户名' }]}
+          >
+            <Input
+              autoComplete="new-password"
+              onBlur={(e) => this.onHandleChange(e.target.value)}
+            />
+          </Form.Item>
+          {hasName && (
+            <Form.Item
+              label="部门"
+              name="DepId"
+              rules={[{ required: true, message: '请输入用户名' }]}
+            >
+              <Select placeholder="请选择部门">
+                {depList.map((item) => (
+                  <Option value={item.ID + ''} key={item.ID}>
+                    {item.Name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          )}
+
+          <Form.Item
+            label="密码"
+            // 不使用password，防止浏览器自动填充表单
+            name="password2"
+            rules={[{ required: true, message: '请输入密码' }]}
+          >
+            <Input.Password autoComplete="new-password" />
+          </Form.Item>
+
+          {/* <Form.Item
+            name="remember"
+            valuePropName="checked"
+            wrapperCol={{ offset: 8, span: 16 }}
+          >
+            <Checkbox>自动登录</Checkbox>
+          </Form.Item> */}
+
+          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+            <Button loading={submitting} type="primary" htmlType="submit">
+              登录
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    );
+  }
+}
+
+export default connect(({ login, loading }) => ({
+  login,
+  submitting: loading.effects['login/login'],
+}))(LoginPage);

src/Project/pages/Login/index.less

@@ -0,0 +1,58 @@
+// @import '~antd/lib/style/themes/default.less';
+
+.main {
+  width: 428px;
+  height: 495px;
+  border-radius: 8px;
+  padding-top: 162px;
+  // background: #fff url('../../assets/login-box-top.png') no-repeat top center;
+  @media screen and (max-width: 576px) {
+    width: 95%;
+  }
+
+  .inp_box {
+    width: 80%;
+    margin: 0 auto;
+    padding-top: 40px;
+    a {
+      color: #999;
+    }
+  }
+
+  .inp {
+    input {
+      border: 0 none;
+      outline-style: none;
+      border-bottom: 1px solid #D8D8D8;
+      border-radius: 0px;
+      padding-left: 38px !important;
+    }
+    i {
+      color: #42a0e0;
+      font-size: 18px;
+    }
+  }
+
+  .icon {
+    margin-left: 16px;
+    color: rgba(0, 0, 0, 0.2);
+    font-size: 24px;
+    vertical-align: middle;
+    cursor: pointer;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  .other {
+    margin-top: 24px;
+    line-height: 22px;
+    text-align: left;
+
+    .register {
+      float: right;
+    }
+  }
+}

src/Project/pages/Login/models/login.js

@@ -0,0 +1,28 @@
+import { Login } from '@/Project/services/user';
+import { FuncMainState } from '@/Project/Functions/FuncMain';
+
+export default {
+  namespace: 'login',
+
+  state: {},
+
+  effects: {
+    *login({ payload, callback }, { call, put }) {
+      try {
+        let response = null;
+        response = yield call(Login, payload);
+        const { user, token } = response.data;
+        
+        callback?.();
+        // yield put({
+        //   type: 'changeLoginStatus',
+        //   payload: response,
+        // });
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+
+  reducers: {},
+};

src/Project/pages/home.tsx

@@ -5,6 +5,7 @@ import Router from '@/Frameworks/SysRouter';
 import Os from '../Os';
 
 window.GT_APP = new Os();
+window.GT_APP.funcMain.setActive(true);
 
 const Home: React.FC = (props: any) => {
   const {
@@ -32,7 +33,15 @@ const Home: React.FC = (props: any) => {
   };
 
   return (
-    <div style={{ position: 'fixed', height: '100vh', width: '100vw' }}>
+    <div
+      style={{
+        position: 'fixed',
+        height: '100vh',
+        width: '100vw',
+        top: 0,
+        left: 0,
+      }}
+    >
       <div>
         {active.map((aItem: GT.IActive, index: number) => {
           const { key, params = {}, id, options } = aItem;

src/Project/services/user.ts

@@ -3,7 +3,7 @@ import { request } from 'umi';
 export async function Login(data: {
   username: string;
   pwd: string;
-  depId: string;
+  DepId: string;
 }) {
   return request('/api/v2/user/login', {
     method: 'POST',
@@ -16,6 +16,11 @@ export async function Logout() {
     method: 'POST',
   });
 }
+export async function queryDepList(userName: string) {
+  return request(`/api/v2/user/dep`, {
+    data: { userName },
+  });
+}
 
 export async function queryCurrent(): Promise<Api.IUser> {
   return request('/api/v2/user/current-user');

src/models/global.ts

@@ -1,9 +1,8 @@
 // 全局共享数据示例
-import { DEFAULT_NAME } from '@/Project/constants';
 import { useState } from 'react';
 
 const useUser = () => {
-  const [name, setName] = useState<string>(DEFAULT_NAME);
+  const [name, setName] = useState<string>('');
   return {
     name,
     setName,

src/models/pages.js

@@ -57,6 +57,18 @@ export default {
       }
       return state;
     },
+    removeByKey(state, { payload: { key } }) {
+      const { active } = state;
+      let newAcitve = active.filter((item) => item.key != key);
+
+      if (newAcitve.length != active.length) {
+        return {
+          ...state,
+          active: [...newAcitve],
+        };
+      }
+      return state;
+    },
     replace(state, { payload: { key, params, id } }) {
       const { active } = state;
       pageId++;

tsconfig.json

@@ -1,3 +1,10 @@
 {
-  "extends": "./src/.umi/tsconfig.json"
+  "extends": "./src/.umi/tsconfig.json",
+  "compilerOptions": {
+    /* Experimental Options */
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    /* Advanced Options */
+    "forceConsistentCasingInFileNames": true
+  }
 }