├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── AppMain.ts ├── api │ ├── ArticleT.ts │ ├── BaseApiT.ts │ ├── ExpandApiT.ts │ ├── MenuApiT.ts │ ├── TodoApi.ts │ └── UserApi.ts ├── assets │ └── logo.png ├── components │ ├── base │ │ ├── form │ │ │ ├── BaseForm.module.scss │ │ │ ├── BaseForm.tsx │ │ │ ├── BaseFormController.ts │ │ │ └── IBaseFormController.ts │ │ └── table │ │ │ ├── BaseTable.tsx │ │ │ ├── BaseTableController.tsx │ │ │ └── IBaseTableController.ts │ ├── factory │ │ ├── MyFormFactory.tsx │ │ ├── decorator │ │ │ └── FormComponentDecorator.ts │ │ ├── enum │ │ │ └── FormEnum.ts │ │ └── interface │ │ │ ├── IFormDecoratorBase.ts │ │ │ ├── IFormDecoratorExtend.ts │ │ │ ├── IFormDecoratorParam.ts │ │ │ ├── IFormTemplate.ts │ │ │ └── IFormWight.ts │ ├── myeditor │ │ ├── MyEditor.module.scss │ │ └── MyEditor.tsx │ ├── myinput │ │ ├── MyInput.module.scss │ │ └── MyInput.tsx │ ├── myloading │ │ ├── IMyLoadingController.ts │ │ ├── MyLoading.tsx │ │ └── MyLoadingController.ts │ └── myswitch │ │ ├── IMySwitchOption.ts │ │ ├── MySwitch.tsx │ │ └── MySwitchOption.ts ├── config │ ├── GlobalConfig.ts │ ├── axios │ │ └── AxiosConfig.ts │ └── style │ │ └── global.scss ├── enum │ ├── feedback │ │ ├── ActionMessageEnum.ts │ │ └── MessageEnum.ts │ └── validate │ │ └── ValidateDialogEnum.ts ├── infrastructure │ ├── decorator │ │ ├── Authorize.ts │ │ └── ValidateDecorator.ts │ ├── global │ │ └── GlobalVue.ts │ ├── ioccontainer │ │ ├── IOCContainer.ts │ │ ├── enum │ │ │ ├── ApiEnum.ts │ │ │ ├── ContextEnum.ts │ │ │ ├── InjectTypeEnum.ts │ │ │ ├── RouterEnum.ts │ │ │ ├── ServiceEnum.ts │ │ │ ├── UIEnum.ts │ │ │ └── UtilsEnum.ts │ │ ├── interface │ │ │ ├── IBaseIOCModel.ts │ │ │ └── IIOCModel.ts │ │ ├── models │ │ │ └── IOCModel.ts │ │ ├── options │ │ │ └── UIOptions.ts │ │ └── type │ │ │ └── IOCType.ts │ └── utils │ │ ├── authorize │ │ ├── IMyAuthorize.ts │ │ ├── MyAuthorize.ts │ │ └── enum │ │ │ └── AuthorizeEnum.ts │ │ └── message │ │ ├── IMyMessage.ts │ │ └── MyMessage.ts ├── interface │ ├── api │ │ ├── IApi.ts │ │ ├── IArticleApiT.ts │ │ ├── IBaseApiT.ts │ │ ├── IExpandApiT.ts │ │ ├── IMenuApiT.ts │ │ ├── IService.ts │ │ ├── ITodoApi.ts │ │ └── IUserApi.ts │ ├── components │ │ ├── IComponents.ts │ │ └── ITableViewModel.ts │ ├── models │ │ ├── IBaseDTO.ts │ │ ├── IBaseViewModel.ts │ │ ├── IValidateModel.ts │ │ └── dto │ │ │ ├── IArticleDTO.ts │ │ │ ├── IArticleSelectDTO.ts │ │ │ ├── IMenuDTO.ts │ │ │ ├── IMenuSelectDTO.ts │ │ │ ├── ITodoDTO.ts │ │ │ └── IUserDTO.ts │ └── services │ │ ├── IArticleService.ts │ │ ├── IExpandService.ts │ │ ├── IMenuService.ts │ │ ├── IMyUserService.ts │ │ ├── ITodoService.ts │ │ └── IUserService.ts ├── main.ts ├── models │ ├── abstract │ │ ├── AbsBaseDTO.ts │ │ └── AbsValidateModel.ts │ ├── dto │ │ ├── ArticleDTO.ts │ │ ├── MenuDTO.ts │ │ ├── MyUserDTO.ts │ │ ├── TestDTO.ts │ │ ├── TodoDTO.ts │ │ ├── UserDTO.ts │ │ └── UserResultDTO.ts │ ├── validate │ │ └── ValidateModelT.ts │ └── viewmodel │ │ ├── ArticleViewModel.ts │ │ ├── LoginViewModel.ts │ │ ├── MenuViewModel.tsx │ │ ├── MyUserViewModel.ts │ │ ├── TableTodoViewModel.ts │ │ ├── TestViewModel.ts │ │ └── TodoViewModel.ts ├── router │ ├── IRouter.ts │ ├── Router.ts │ ├── RouterPathEnum.ts │ └── index.ts ├── services │ ├── ArticleService.ts │ ├── ExpandService.ts │ ├── MenuService.ts │ ├── MyUserService.ts │ ├── TodoService.ts │ └── UserService.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts ├── type │ └── BaseType.ts ├── utils │ ├── axios │ │ ├── AxiosHelper.ts │ │ ├── enum │ │ │ └── StatusCode.ts │ │ ├── interface │ │ │ ├── IAxiosHelper.ts │ │ │ ├── IAxiosMiddleware.ts │ │ │ └── IAxiosPiple.ts │ │ ├── middleware │ │ │ ├── AxiosResultMessageMiddleware.ts │ │ │ └── AxiosResultMiddleware.ts │ │ ├── model │ │ │ └── AxiosResultT.ts │ │ ├── param │ │ │ └── Querstring.ts │ │ └── piple │ │ │ └── AxiosPiple.ts │ └── datetime │ │ ├── DatetimeHelper.ts │ │ └── IDatetimeHelper.ts └── views │ ├── article │ ├── ArticleForm.tsx │ ├── ArticleFormController.ts │ ├── ArticleTable.tsx │ └── ArticleTableController.ts │ ├── common │ └── Page404.tsx │ ├── layout │ ├── ILayoutController.ts │ ├── Layout.module.scss │ ├── Layout.tsx │ └── LayoutController.ts │ ├── login │ ├── ILoginController.ts │ ├── Login.module.scss │ ├── Login.tsx │ └── LoginController.ts │ ├── menu │ ├── MenuForm.tsx │ ├── MenuFormController.ts │ ├── MenuTable.tsx │ └── MenuTableController.tsx │ ├── test │ ├── TestForm.tsx │ ├── TestFormController.ts │ ├── TestTable.tsx │ └── TestTableController.ts │ ├── todo │ ├── ITodoController.ts │ ├── ITodoFormController.ts │ ├── Todo.module.scss │ ├── Todo.tsx │ ├── TodoController.ts │ ├── TodoForm.module.scss │ ├── TodoForm.tsx │ └── TodoFormController.ts │ └── user │ ├── MyUserForm.tsx │ ├── MyUserFormController.ts │ ├── MyUserTable.tsx │ └── MyUserTableController.tsx ├── tsconfig.json ├── vue.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### vue-mobx-framework 2 | - mobx替代vuex 实现mvvm分离框架 -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/app"], 3 | plugins: [ 4 | [ 5 | "import", 6 | { libraryName: "Antd", libraryDirectory: "es", style: true }, 7 | ], 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-mobx-framework", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "ant-design-vue": "^1.7.1", 12 | "axios": "^0.21.0", 13 | "class-validator": "^0.12.2", 14 | "core-js": "^3.6.5", 15 | "dayjs": "^1.9.6", 16 | "inversify-props": "^2.2.6", 17 | "linqts": "^1.14.3", 18 | "mobx": "^5.0.3", 19 | "mobx-vue": "^2.0.11", 20 | "reflect-metadata": "^0.1.13", 21 | "vue": "^2.6.11", 22 | "vue-class-component": "^7.2.6", 23 | "vue-property-decorator": "^8.4.2", 24 | "vue-quill-editor": "^3.0.6", 25 | "vue-router": "^3.2.0" 26 | }, 27 | "devDependencies": { 28 | "@typescript-eslint/eslint-plugin": "^2.33.0", 29 | "@typescript-eslint/parser": "^2.33.0", 30 | "@vue/cli-plugin-babel": "~4.5.0", 31 | "@vue/cli-plugin-eslint": "~4.5.0", 32 | "@vue/cli-plugin-router": "~4.5.0", 33 | "@vue/cli-plugin-typescript": "~4.5.0", 34 | "@vue/cli-service": "~4.5.0", 35 | "@vue/eslint-config-typescript": "^5.0.2", 36 | "babel-plugin-import": "^1.13.1", 37 | "eslint": "^6.7.2", 38 | "eslint-plugin-vue": "^6.2.2", 39 | "less": "^3.12.2", 40 | "less-loader": "^7.0.2", 41 | "node-sass": "^4.12.0", 42 | "sass-loader": "^8.0.2", 43 | "typescript": "~3.9.3", 44 | "vue-template-compiler": "^2.6.11" 45 | }, 46 | "eslintConfig": { 47 | "root": true, 48 | "env": { 49 | "node": true 50 | }, 51 | "extends": [ 52 | "plugin:vue/essential", 53 | "eslint:recommended", 54 | "@vue/typescript/recommended" 55 | ], 56 | "parserOptions": { 57 | "ecmaVersion": 2020 58 | }, 59 | "rules": {} 60 | }, 61 | "browserslist": [ 62 | "> 1%", 63 | "last 2 versions", 64 | "not dead" 65 | ] 66 | } 67 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Not996NotOT/vue-mobx-framework/272bf9e6a386fbb595216bdc5ab78a41f0eaa4ba/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 14 | 15 | 16 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 15 | 23 | -------------------------------------------------------------------------------- /src/AppMain.ts: -------------------------------------------------------------------------------- 1 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 2 | import GlobalVue from './infrastructure/global/GlobalVue'; 3 | export default class AppMain { 4 | vueInstance: Vue; 5 | myMessage: IMyMessage | undefined; 6 | constructor(vueInstance: Vue) { 7 | this.vueInstance = vueInstance; 8 | } 9 | start() { 10 | GlobalVue.createInstance(this.vueInstance); 11 | } 12 | } -------------------------------------------------------------------------------- /src/api/ArticleT.ts: -------------------------------------------------------------------------------- 1 | import IArticleDTO from '@/interface/models/dto/IArticleDTO'; 2 | import ExpandApi from '@/api/ExpandApiT'; 3 | import IArticleApi from '@/interface/api/IArticleApiT'; 4 | import IArticleSelectDTO from '@/interface/models/dto/IArticleSelectDTO'; 5 | export default class ArticleApi extends ExpandApi implements IArticleApi { 6 | getArticleSelectList(): IArticleSelectDTO[] { 7 | let ArticleSelectDTO: IArticleSelectDTO[] = []; 8 | ArticleSelectDTO = this.axios.get("menu/select"); 9 | return ArticleSelectDTO; 10 | } 11 | } -------------------------------------------------------------------------------- /src/api/BaseApiT.ts: -------------------------------------------------------------------------------- 1 | import { UtilsEnum } from '@/infrastructure/ioccontainer/enum/UtilsEnum'; 2 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 3 | import IBaseDTO from '@/interface/models/IBaseDTO'; 4 | import IAxiosHelper from '@/utils/axios/interface/IAxiosHelper'; 5 | import { List } from 'linqts'; 6 | export default class BaseApi { 7 | axios: IAxiosHelper; 8 | constructor() { 9 | this.axios = IOCContainer.getInstance(UtilsEnum.Axios); 10 | } 11 | id: any; 12 | async update(path: string, t: T): Promise { 13 | return await this.axios.put(`${path}/${t.id}`, t); 14 | } 15 | async getById(path: string, t: T): Promise { 16 | return await this.axios.get(`${path}/${t.id}`, t); 17 | } 18 | async delete(path: string, t: T): Promise { 19 | return await this.axios.delete(`${path}/${t.id}`); 20 | } 21 | async add(path: string, t: T): Promise { 22 | return await this.axios.post(`${path}/${t.id}`); 23 | } 24 | async getList(path: string): Promise> { 25 | return new List(await this.axios.get(path)); 26 | } 27 | 28 | } -------------------------------------------------------------------------------- /src/api/ExpandApiT.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import { UtilsEnum } from '@/infrastructure/ioccontainer/enum/UtilsEnum'; 3 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 4 | import IAxiosHelper from '@/utils/axios/interface/IAxiosHelper'; 5 | import { List } from 'linqts'; 6 | import IExpandApi from '@/interface/api/IExpandApiT'; 7 | export default class ExpandApi implements IExpandApi { 8 | axios: IAxiosHelper; 9 | constructor() { 10 | this.axios = IOCContainer.getInstance(UtilsEnum.Axios); 11 | } 12 | async update(path: string, t: T): Promise { 13 | return await this.axios.put(`${path}/${t.id}`, t); 14 | } 15 | async getById(path: string, id: any): Promise { 16 | return await this.axios.get(`${path}/${id}`); 17 | } 18 | async delete(path: string, id: any): Promise { 19 | return await this.axios.delete(`${path}/${id}`); 20 | } 21 | async add(path: string, t: T): Promise { 22 | return await this.axios.post(`${path}`, t); 23 | } 24 | async getList(path: string): Promise> { 25 | return new List(await this.axios.get(path)); 26 | } 27 | 28 | } -------------------------------------------------------------------------------- /src/api/MenuApiT.ts: -------------------------------------------------------------------------------- 1 | import IMenuDTO from '@/interface/models/dto/IMenuDTO'; 2 | import ExpandApi from '@/api/ExpandApiT'; 3 | import IMenuApi from '@/interface/api/IMenuApiT'; 4 | import IMenuSelectDTO from '@/interface/models/dto/IMenuSelectDTO'; 5 | export default class MenuApi extends ExpandApi implements IMenuApi { 6 | getMenuSelectList(): IMenuSelectDTO[] { 7 | let menuSelectDTO: IMenuSelectDTO[] = []; 8 | menuSelectDTO = this.axios.get("menu/select"); 9 | return menuSelectDTO; 10 | } 11 | } -------------------------------------------------------------------------------- /src/api/TodoApi.ts: -------------------------------------------------------------------------------- 1 | import { UtilsEnum } from '@/infrastructure/ioccontainer/enum/UtilsEnum'; 2 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 3 | import ITodoApi from '@/interface/api/ITodoApi'; 4 | import ITodoDTO from '@/interface/models/dto/ITodoDTO'; 5 | import IAxiosHelper from '@/utils/axios/interface/IAxiosHelper'; 6 | export default class TodoApi implements ITodoApi { 7 | axios: IAxiosHelper; 8 | constructor() { 9 | this.axios = IOCContainer.getInstance(UtilsEnum.Axios); 10 | } 11 | async update(todoDTO: ITodoDTO): Promise { 12 | return await this.axios.put("/todo/" + todoDTO.id, todoDTO); 13 | } 14 | async getById(todoId: string): Promise { 15 | return await this.axios.get("/todo/" + todoId); 16 | } 17 | async delete(todoId: string): Promise { 18 | return await this.axios.delete("/todo/" + todoId); 19 | } 20 | async add(todoDTO: ITodoDTO): Promise { 21 | return await this.axios.post("/todo", todoDTO); 22 | } 23 | async getList(): Promise { 24 | return await this.axios.get("/todo"); 25 | } 26 | } -------------------------------------------------------------------------------- /src/api/UserApi.ts: -------------------------------------------------------------------------------- 1 | import UserDTO from '@/models/dto/UserDTO'; 2 | import ExpandApi from './ExpandApiT'; 3 | import UserResult from '@/models/dto/UserResultDTO'; 4 | import IUserApi from '@/interface/api/IUserApi'; 5 | export default class UserApi extends ExpandApi implements IUserApi { 6 | login(userDTO: UserDTO): Promise { 7 | return this.axios.post("/login",userDTO); 8 | } 9 | } -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Not996NotOT/vue-mobx-framework/272bf9e6a386fbb595216bdc5ab78a41f0eaa4ba/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/base/form/BaseForm.module.scss: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: start; 5 | align-content: center; 6 | height: 100%; 7 | width: 100%; 8 | padding: 24px; 9 | .form { 10 | height: 100%; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: space-evenly; 14 | .formItem { 15 | margin-bottom: 20px; 16 | display: flex; 17 | .formLabel { 18 | width: 80px; 19 | display: flex; 20 | align-items: center; 21 | justify-content: flex-end; 22 | } 23 | .formComponent { 24 | } 25 | } 26 | .inputError { 27 | color: #f5222d; 28 | } 29 | .borderError { 30 | border: 1px solid #f5222d; 31 | } 32 | } 33 | .action { 34 | display: flex; 35 | justify-content: center; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/components/base/form/BaseForm.tsx: -------------------------------------------------------------------------------- 1 | import IFormDecoratorDefine from '@/components/factory/interface/IFormDecoratorExtend'; 2 | import MyFormFactory from '@/components/factory/MyFormFactory'; 3 | import MyLoading from "@/components/myloading/MyLoading"; 4 | import IBaseDTO from '@/interface/models/IBaseDTO'; 5 | import IBaseViewModel from '@/interface/models/IBaseViewModel'; 6 | import { IValidateModel } from '@/interface/models/IValidateModel'; 7 | import { Observer } from "mobx-vue"; 8 | import Vue from "vue"; 9 | import Component from "vue-class-component"; 10 | import { Prop } from 'vue-property-decorator'; 11 | //@ts-ignore 12 | import style from "./BaseForm.module.scss"; 13 | import BaseFormController from './BaseFormController'; 14 | @Observer 15 | @Component 16 | export default class BaseForm extends Vue { 17 | @Prop() controller!: BaseFormController, IBaseDTO, any>; 18 | baseFormController: BaseFormController, IBaseDTO, any>; 19 | constructor() { 20 | super(); 21 | this.baseFormController = this.controller; 22 | } 23 | render(h: any) { 24 | let formInstance = Reflect.getMetadata(this.baseFormController.viewModel.constructor.name, this.baseFormController.viewModel) 25 | return ( 26 | 27 |
28 |
29 | { 30 | formInstance.map((item: IFormDecoratorDefine) => { 31 | let component; 32 | if (item.template) { 33 | component = item.render(h, this.baseFormController.viewModel, this.baseFormController.viewModel[item.key]); 34 | } 35 | else { 36 | component = MyFormFactory.getFormComponent(h, { 37 | instance: this.baseFormController.viewModel, 38 | property: this.baseFormController.viewModel[item.key], 39 | metaInfo: item 40 | }) 41 | } 42 | return
43 |
44 |
{item.title}：
45 |
46 |
47 |
48 | {component} 49 |
50 |
51 | {this.baseFormController.viewModel[item.key + "ErrorMessage"] && this.baseFormController.viewModel[item.key + "ErrorMessage"]} 52 |
53 |
54 |
55 | }) 56 | } 57 |
58 |
59 | this.baseFormController.addAndUpdate()} 62 | > 63 | 保存 64 | 65 | this.baseFormController.deleteById()} 68 | > 69 | 删除 70 | 71 |
72 |
73 | 74 | ); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/components/base/form/BaseFormController.ts: -------------------------------------------------------------------------------- 1 | import { IValidateModel } from '@/interface/models/IValidateModel'; 2 | import IExpandService from '@/interface/services/IExpandService'; 3 | import IBaseDTO from '@/interface/models/IBaseDTO'; 4 | import IBaseViewModel from '@/interface/models/IBaseViewModel'; 5 | import { RouterEnum } from '@/infrastructure/ioccontainer/enum/RouterEnum'; 6 | import IRouter from '@/router/IRouter'; 7 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 8 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 9 | import { UIEnum } from '@/infrastructure/ioccontainer/enum/UIEnum'; 10 | import { ActionMessageEnum } from '@/enum/feedback/ActionMessageEnum'; 11 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 12 | import { Dictionary } from 'vue-router/types/router'; 13 | import { isNotEmpty } from 'class-validator'; 14 | import ExpandService from '@/services/ExpandService'; 15 | 16 | type VConstructor = new (...args: any[]) => V; 17 | type TConstructor> = new (...args: any[]) => T; 18 | type RConstructor = new (...args: any[]) => R; 19 | 20 | export default class BaseFormController, R extends IBaseDTO, S extends IExpandService = IExpandService> { 21 | viewModel: any; 22 | v: VConstructor 23 | t: TConstructor 24 | r: RConstructor 25 | expandService: S; 26 | myMessage: IMyMessage; 27 | router: IRouter; 28 | dialogTitle: string; 29 | listRouterPath: RouterPathEnum; 30 | constructor(param: { 31 | urlReqeustPath: string, 32 | listRouterPath: RouterPathEnum, 33 | expandService?: any, 34 | v: new (...args: any[]) => any, 35 | t: new (...args: any[]) => any, 36 | r: new (...args: any[]) => any, 37 | }) { 38 | 39 | this.router = IOCContainer.getInstance(RouterEnum.VueRouter) 40 | this.myMessage = IOCContainer.getInstance(UIEnum.IMessage); 41 | this.expandService = param?.expandService ?? new ExpandService(param.urlReqeustPath); 42 | this.listRouterPath = param.listRouterPath; 43 | this.v = param.v; 44 | this.t = param.t; 45 | this.r = param.r; 46 | 47 | this.viewModel = new param.v(); 48 | this.initialData(); 49 | this.dialogTitle = ""; 50 | } 51 | async initialData() { 52 | let routerDic = this.router.getQueryParam() as Dictionary; 53 | let id: string = routerDic["id"]; 54 | let ivo = await this.initialViewmodel(); 55 | if (id) { 56 | let vo = Object.assign(ivo, (await this.expandService.getById(id))); 57 | this.viewModel = vo; 58 | } 59 | else { 60 | this.viewModel = ivo; 61 | } 62 | 63 | } 64 | 65 | async initialViewmodel(): Promise { 66 | return new this.v(); 67 | } 68 | 69 | async selectById(): Promise { 70 | if (this.viewModel.id) { 71 | this.expandService.getById(this.viewModel.id); 72 | } 73 | } 74 | 75 | async deleteById() { 76 | if (isNotEmpty(this.viewModel.id)) { 77 | this.myMessage.showConfirm({ 78 | content: "是否确定删除", onOk: async () => { 79 | await this.expandService.delete(this.viewModel.id); 80 | this.router.push(this.listRouterPath) 81 | }, onCancel: () => { } 82 | }) 83 | } 84 | } 85 | 86 | async addAndUpdate(): Promise { 87 | if (this.viewModel.id) { 88 | console.log("update"); 89 | this.update(); 90 | } 91 | else { 92 | console.log("add"); 93 | this.add(); 94 | } 95 | } 96 | private async update() { 97 | let t: T = new this.t!(this.viewModel); 98 | if (await t.validate({ viewModel: this.viewModel })) { 99 | let data = await this.expandService.update(t.toPureDTO()); 100 | if (data) { 101 | this.myMessage.showDefualtMessage({ 102 | messsage: this.dialogTitle, actionMesssageEnum: ActionMessageEnum.Update, onOk: () => { 103 | this.router.push(this.listRouterPath!); 104 | } 105 | }) 106 | } 107 | } 108 | else { 109 | t.mergeErrorToViewModel(this.viewModel); 110 | } 111 | } 112 | 113 | public async add() { 114 | let t: T = new this.t!(this.viewModel); 115 | console.log("add method") 116 | console.log(this.viewModel) 117 | console.log(await t.validate({ viewModel: this.viewModel })) 118 | if (await t.validate({ viewModel: this.viewModel })) { 119 | console.log("add success"); 120 | let data = await this.expandService.add(t.toPureDTO()); 121 | if (data) { 122 | this.myMessage.showDefualtMessage({ 123 | messsage: this.dialogTitle, actionMesssageEnum: ActionMessageEnum.Add, onOk: () => { 124 | this.router.push(this.listRouterPath!); 125 | } 126 | }) 127 | } 128 | } 129 | else { 130 | t.mergeErrorToViewModel(this.viewModel); 131 | } 132 | } 133 | } -------------------------------------------------------------------------------- /src/components/base/form/IBaseFormController.ts: -------------------------------------------------------------------------------- 1 | import { IValidateModel } from '@/interface/models/IValidateModel'; 2 | import IBaseDTO from '@/interface/models/IBaseDTO'; 3 | import IBaseViewModel from '@/interface/models/IBaseViewModel'; 4 | 5 | export default interface IBaseFormController, R extends IBaseDTO> { 6 | viewModel: any; 7 | selectById(): Promise; 8 | deleteById(): Promise; 9 | addAndUpdate(): Promise; 10 | update(): Promise; 11 | add(): Promise; 12 | } -------------------------------------------------------------------------------- /src/components/base/table/BaseTable.tsx: -------------------------------------------------------------------------------- 1 | import MyLoading from "@/components/myloading/MyLoading"; 2 | import IBaseDTO from '@/interface/models/IBaseDTO'; 3 | import IBaseViewModel from '@/interface/models/IBaseViewModel'; 4 | import { Observer } from "mobx-vue"; 5 | import Vue from "vue"; 6 | import Component from "vue-class-component"; 7 | import { Prop } from 'vue-property-decorator'; 8 | import IBaseTableController from './IBaseTableController'; 9 | @Observer 10 | @Component 11 | export default class BaseTable extends Vue { 12 | @Prop() controller!: IBaseTableController; 13 | baseController: IBaseTableController; 14 | baseTitle: string; 15 | constructor() { 16 | super(); 17 | this.baseController = this.controller; 18 | this.baseTitle = this.controller.title; 19 | } 20 | 21 | render() { 22 | return 23 | this.baseController.addAndUpdate()} 27 | > 28 | 新增 29 | 30 | 31 | { 36 | return ( 37 |
38 | { 40 | this.baseController.selectById(item.id); 41 | }} 42 | > 43 | 查看 44 | 45 | { 48 | this.baseController.deleteById(item.id); 49 | }} 50 | > 51 | 删除 52 | 53 |
54 | ); 55 | } 56 | }]} 57 | data-source={this.baseController.dataList} 58 | > 59 | 60 | 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/components/base/table/BaseTableController.tsx: -------------------------------------------------------------------------------- 1 | import { RouterEnum } from '@/infrastructure/ioccontainer/enum/RouterEnum'; 2 | import { UIEnum } from '@/infrastructure/ioccontainer/enum/UIEnum'; 3 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 4 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 5 | import IService from '@/interface/api/IService'; 6 | import IBaseDTO from '@/interface/models/IBaseDTO'; 7 | import IExpandService from '@/interface/services/IExpandService'; 8 | import IRouter from '@/router/IRouter'; 9 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 10 | import ExpandService from '@/services/ExpandService'; 11 | import IBaseTableController from './IBaseTableController'; 12 | 13 | export default class BaseTableController = IExpandService> implements IBaseTableController{ 14 | title: string = ""; 15 | formRouterPath: RouterPathEnum | undefined; 16 | dataList: R[]; 17 | router: IRouter 18 | baseService: S; 19 | myMessage: IMyMessage; 20 | urlReqeustPath: string = ""; 21 | columns: any[]; 22 | constructor(param: { urlReqeustPath: string, baseService?: any }) { 23 | this.columns = []; 24 | this.dataList = []; 25 | this.router = IOCContainer.getInstance(RouterEnum.VueRouter) 26 | this.myMessage = IOCContainer.getInstance(UIEnum.IMessage); 27 | this.baseService = param?.baseService ?? new ExpandService(param.urlReqeustPath); 28 | this.initialData(); 29 | } 30 | 31 | addAndUpdate(): void { 32 | if (this.formRouterPath) { 33 | this.router.push(this.formRouterPath); 34 | } 35 | } 36 | async initialData(): Promise { 37 | console.log(this.urlReqeustPath); 38 | this.dataList = await this.baseService.getList(); 39 | } 40 | selectById(id: string): void { 41 | if (this.formRouterPath) { 42 | this.router.push({ path: this.formRouterPath, query: { id } }) 43 | } 44 | } 45 | deleteById(id: string): void { 46 | this.myMessage.showConfirm({ 47 | content: "是否确定删除", onOk: async () => { 48 | await this.baseService.delete(id); 49 | this.initialData(); 50 | }, onCancel: () => { } 51 | }) 52 | } 53 | 54 | } -------------------------------------------------------------------------------- /src/components/base/table/IBaseTableController.ts: -------------------------------------------------------------------------------- 1 | import IApi from '@/interface/api/IApi'; 2 | import IBaseDTO from '@/interface/models/IBaseDTO'; 3 | 4 | export default interface IBaseTableController { 5 | title:string; 6 | dataList: R[] 7 | columns:any[]; 8 | addAndUpdate(): void; 9 | initialData(): void; 10 | selectById(id: string): void; 11 | deleteById(id: string): void; 12 | } -------------------------------------------------------------------------------- /src/components/factory/MyFormFactory.tsx: -------------------------------------------------------------------------------- 1 | import { FormEnum } from './enum/FormEnum'; 2 | import IFormTemplate from './interface/IFormTemplate'; 3 | import MyInput from '../myinput/MyInput' 4 | import MyEditor from '../myeditor/MyEditor'; 5 | import MySwitch from '../myswitch/MySwitch'; 6 | import { toJS } from 'mobx'; 7 | 8 | export default class MyFormFactory { 9 | public static getFormComponent(h: any, formTemplate: IFormTemplate) { 10 | let component; 11 | switch (formTemplate.metaInfo.component?.type) { 12 | case FormEnum.Input: 13 | component = formTemplate.instance[formTemplate.metaInfo.key] = e.target.value, 18 | ...formTemplate.metaInfo.component.param 19 | }} /> 20 | break; 21 | case FormEnum.TextArea: 22 | component = 28 | break; 29 | case FormEnum.DatePicker: 30 | component = { 34 | formTemplate.instance[formTemplate.metaInfo.key] = value; 35 | }} {...formTemplate.metaInfo.component.param} /> 36 | break; 37 | case FormEnum.Editor: 38 | console.log(formTemplate.instance[formTemplate.metaInfo.key]) 39 | component = { 43 | formTemplate.instance[formTemplate.metaInfo.key] = html; 44 | } 45 | }} /> 46 | break; 47 | case FormEnum.Cascader: 48 | component = { 55 | formTemplate.instance[formTemplate.metaInfo.key] = toJS(value); 56 | }} 57 | /> 58 | break; 59 | case FormEnum.Switch: 60 | component = { 64 | formTemplate.instance[formTemplate.metaInfo.key] = checked ? 1 : 0; 65 | } 66 | }} /> 67 | break; 68 | default: 69 | break; 70 | } 71 | return component; 72 | } 73 | } -------------------------------------------------------------------------------- /src/components/factory/decorator/FormComponentDecorator.ts: -------------------------------------------------------------------------------- 1 | import { FormEnum } from "../enum/FormEnum"; 2 | import IFormDecoratorExtend from '../interface/IFormDecoratorExtend'; 3 | import IFormDecoratorParam from '../interface/IFormDecoratorParam'; 4 | export const Form = (param?: IFormDecoratorParam): PropertyDecorator => { 5 | return (target: Object, propertyKey: string | symbol) => { 6 | let name = target.constructor.name; 7 | let key = propertyKey as string; 8 | if (Reflect.hasMetadata(target.constructor.name, target)) { 9 | const typeArray: IFormDecoratorExtend[] = Reflect.getMetadata(name, target) as IFormDecoratorExtend[]; 10 | let type = { 11 | key, 12 | primaryKey: param?.primaryKey ?? false, 13 | title: param?.title ?? key, 14 | component: param?.component ?? { type: FormEnum.Input }, 15 | defaultValue: param?.defaultValue ?? undefined, 16 | showErrorMessage: param?.showErrorMessage ?? true 17 | }; 18 | typeArray.push({ 19 | ...type, template: param?.template ?? undefined, 20 | render: (h: any, instance: any, property: any) => param?.template ? param?.template(h, { instance, property, metaInfo: type }) : undefined 21 | }) 22 | } 23 | else { 24 | const typeArray: IFormDecoratorExtend[] = []; 25 | let type = { 26 | key, 27 | primaryKey: param?.primaryKey ?? false, 28 | title: param?.title ?? key, 29 | component: param?.component ?? { type: FormEnum.Input }, 30 | defaultValue: param?.defaultValue ?? undefined, 31 | showErrorMessage: param?.showErrorMessage ?? true 32 | }; 33 | typeArray.push({ 34 | ...type, template: param?.template ?? undefined, 35 | render: (h: any, instance: any, property: any) => param?.template ? param?.template(h, { instance, property, metaInfo: type }) : undefined 36 | }) 37 | Reflect.defineMetadata(target.constructor.name, typeArray, target); 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /src/components/factory/enum/FormEnum.ts: -------------------------------------------------------------------------------- 1 | export enum FormEnum { 2 | Input = "Input", 3 | TextArea = "TextArea", 4 | DatePicker = "DatePicker", 5 | Editor = "Editor", 6 | Cascader = "Cascader", 7 | Switch = "Switch" 8 | } -------------------------------------------------------------------------------- /src/components/factory/interface/IFormDecoratorBase.ts: -------------------------------------------------------------------------------- 1 | import { FormEnum } from '../enum/FormEnum'; 2 | import IFormWight from './IFormWight'; 3 | 4 | export default interface IFormDecoratorBase { 5 | key: string; 6 | primaryKey?: boolean 7 | component?: IFormWight; 8 | title?: string; 9 | defaultValue?: any; 10 | showErrorMessage?: boolean; 11 | } -------------------------------------------------------------------------------- /src/components/factory/interface/IFormDecoratorExtend.ts: -------------------------------------------------------------------------------- 1 | import IFormDecoratorBase from './IFormDecoratorBase'; 2 | 3 | export default interface IFormDecoratorExtend extends IFormDecoratorBase{ 4 | template?: (h: any, param: { instance: any, property: any, metaInfo: IFormDecoratorBase }) => any | undefined; 5 | render: (h: any,instance: any, property: any) => any 6 | } -------------------------------------------------------------------------------- /src/components/factory/interface/IFormDecoratorParam.ts: -------------------------------------------------------------------------------- 1 | import { FormEnum } from "../enum/FormEnum"; 2 | import IFormDecoratorBase from './IFormDecoratorBase'; 3 | import IFormWight from './IFormWight'; 4 | 5 | export default interface IFormDecoratorParam { 6 | primaryKey?: boolean 7 | component?: IFormWight; 8 | title?: string; 9 | defaultValue?: any; 10 | showErrorMessage?:boolean; 11 | template?: (h: any, param: { instance: any, property: any, metaInfo: IFormDecoratorBase }) => any | undefined; 12 | } -------------------------------------------------------------------------------- /src/components/factory/interface/IFormTemplate.ts: -------------------------------------------------------------------------------- 1 | import IFormDecoratorBase from './IFormDecoratorBase'; 2 | 3 | export default interface IFormTemplate { 4 | instance: any 5 | property: any 6 | metaInfo: IFormDecoratorBase 7 | } -------------------------------------------------------------------------------- /src/components/factory/interface/IFormWight.ts: -------------------------------------------------------------------------------- 1 | import { FormEnum } from '@/components/factory/enum/FormEnum'; 2 | import IComponents from '@/interface/components/IComponents'; 3 | export default interface IFormWight { 4 | type?: FormEnum; 5 | param?: IComponents; 6 | } -------------------------------------------------------------------------------- /src/components/myeditor/MyEditor.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../config/style/global.scss"; 2 | .main { 3 | border: 1px solid $formBorder; 4 | .text { 5 | //z-index: -100 !important; 6 | height: 400px; 7 | } 8 | // .toolbar{ 9 | // z-index: -100!important; 10 | // } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/myeditor/MyEditor.tsx: -------------------------------------------------------------------------------- 1 | import Component from "vue-class-component"; 2 | import Vue from "vue"; 3 | //@ts-ignore 4 | import style from './MyEditor.module.scss'; 5 | import { Prop, Watch } from 'vue-property-decorator'; 6 | @Component 7 | export default class MyEditor extends Vue { 8 | @Prop() value!: string; 9 | @Prop() onChange!: (html: any) => void; 10 | content: string = ''; 11 | editorOption: any = { 12 | placeholder: '编辑文章内容' 13 | }; 14 | @Watch('value', { immediate: true, deep: true }) 15 | onValueChanged(value: string, oldValue: string) { 16 | if(value!==oldValue){ 17 | this.content = this.value; 18 | } 19 | } 20 | mounted() { 21 | console.log(this.value) 22 | } 23 | updated() { 24 | this.onChange(this.content); 25 | } 26 | constructor() { 27 | super(); 28 | } 29 | render() { 30 | return
31 | 32 |
33 | } 34 | } -------------------------------------------------------------------------------- /src/components/myinput/MyInput.module.scss: -------------------------------------------------------------------------------- 1 | @import "../../config/style/global.scss"; 2 | .main { 3 | .input { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | font-variant: tabular-nums; 8 | list-style: none; 9 | font-feature-settings: "tnum"; 10 | position: relative; 11 | display: inline-block; 12 | width: 100%; 13 | height: 32px; 14 | padding: 4px 11px; 15 | color: rgba(0, 0, 0, 0.65); 16 | font-size: 14px; 17 | line-height: 1.5; 18 | background-color: #fff; 19 | background-image: none; 20 | border: 1px solid #d9d9d9; 21 | border-radius: 2px; 22 | transition: all 0.3s; 23 | display: inline-block; 24 | &:focus { 25 | outline: none; 26 | border: none; 27 | border: 1px $primaryColor solid; 28 | } 29 | &::-webkit-input-placeholder { 30 | /* WebKit browsers */ 31 | color: #d9d9d9; 32 | } 33 | 34 | &::-moz-placeholder { 35 | /* Mozilla Firefox 19+ */ 36 | color: #d9d9d9; 37 | } 38 | 39 | &:-ms-input-placeholder { 40 | /* Internet Explorer 10+ */ 41 | color: #d9d9d9; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/myinput/MyInput.tsx: -------------------------------------------------------------------------------- 1 | import Component from "vue-class-component"; 2 | import Vue from "vue"; 3 | import { Prop } from 'vue-property-decorator'; 4 | //@ts-ignore 5 | import style from './MyInput.module.scss'; 6 | 7 | @Component 8 | export default class MyInput extends Vue { 9 | @Prop() placeholder!: string; 10 | @Prop() value!: any; 11 | @Prop() disabled!: boolean; 12 | @Prop() onChange!:(e:any)=>any; 13 | constructor() { 14 | super(); 15 | } 16 | render() { 17 | return ( 18 |
19 | this.onChange(e)} 23 | disabled={this.disabled} 24 | /> 25 |
26 | 27 | ); 28 | } 29 | } -------------------------------------------------------------------------------- /src/components/myloading/IMyLoadingController.ts: -------------------------------------------------------------------------------- 1 | export default interface IMyLoadingController{ 2 | isLoading:boolean; 3 | loading():void; 4 | } -------------------------------------------------------------------------------- /src/components/myloading/MyLoading.tsx: -------------------------------------------------------------------------------- 1 | import Component from "vue-class-component"; 2 | import Vue from "vue"; 3 | import { Prop } from "vue-property-decorator"; 4 | import IMyLoadingController from "./IMyLoadingController"; 5 | import MyLoadingControllerSingle from "./MyLoadingController"; 6 | import IOCContainer from "@/infrastructure/ioccontainer/IOCContainer"; 7 | import { UIEnum } from "@/infrastructure/ioccontainer/enum/UIEnum"; 8 | 9 | @Component 10 | export default class MyLoading extends Vue { 11 | myLoadingController: IMyLoadingController; 12 | constructor() { 13 | super(); 14 | this.myLoadingController = IOCContainer.getInstance(UIEnum.IMyLoading); 15 | } 16 | render() { 17 | return ( 18 | 19 | {this.$scopedSlots.default && this.$scopedSlots.default({})} 20 | 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/myloading/MyLoadingController.ts: -------------------------------------------------------------------------------- 1 | import { observable } from 'mobx'; 2 | 3 | export default class MyLoadingController { 4 | @observable isLoading = false; 5 | loading() { 6 | this.isLoading = !this.isLoading; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/myswitch/IMySwitchOption.ts: -------------------------------------------------------------------------------- 1 | import IComponents from '@/interface/components/IComponents'; 2 | 3 | export default interface IMySwitchOption extends IComponents { 4 | checkedChildren: string; 5 | unCheckedChildren: string; 6 | defaultChecked:boolean; 7 | } -------------------------------------------------------------------------------- /src/components/myswitch/MySwitch.tsx: -------------------------------------------------------------------------------- 1 | import Component from "vue-class-component"; 2 | import Vue from "vue"; 3 | import { Prop } from 'vue-property-decorator'; 4 | import { Observer } from "mobx-vue"; 5 | import MySwitchProps from './MySwitchOption'; 6 | import { observable } from 'mobx'; 7 | //@ts-ignore 8 | 9 | @Observer 10 | @Component 11 | export default class MySwitch extends Vue { 12 | @Prop() mySwitchProps: MySwitchProps | undefined; 13 | @Prop() defaultValue!: number; 14 | @Prop() onChange!: (checked: boolean) => void; 15 | mySwitchPropsBind: MySwitchProps; 16 | constructor() { 17 | super(); 18 | this.mySwitchPropsBind = this.mySwitchProps ?? new MySwitchProps(); 19 | } 20 | render() { 21 | return ( 22 | this.onChange(checked)} 27 | checked={this.defaultValue === 1} 28 | /> 29 | ); 30 | } 31 | } -------------------------------------------------------------------------------- /src/components/myswitch/MySwitchOption.ts: -------------------------------------------------------------------------------- 1 | import IMySwitchOption from './IMySwitchOption'; 2 | 3 | export default class MySwitchOption implements IMySwitchOption { 4 | checkedChildren: string; 5 | unCheckedChildren: string; 6 | defaultChecked: boolean; 7 | constructor(param?: { 8 | checkedChildren?: string, 9 | unCheckedChildren?: string, 10 | defaultChecked?: boolean 11 | }) { 12 | this.checkedChildren = param?.checkedChildren ?? "是" 13 | this.unCheckedChildren = param?.unCheckedChildren ?? "否" 14 | this.defaultChecked = param?.defaultChecked ?? true; 15 | } 16 | } -------------------------------------------------------------------------------- /src/config/GlobalConfig.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 请求Api的域名例如http://www.xxxtest.com/api/ 3 | */ 4 | const APIDOMAIN = "http://localhost:3100" 5 | export { APIDOMAIN }; 6 | -------------------------------------------------------------------------------- /src/config/axios/AxiosConfig.ts: -------------------------------------------------------------------------------- 1 | import { APIDOMAIN } from "../GlobalConfig"; 2 | /** 3 | * 请求Api的域名例如http://www.xxxtest.com/api/ 4 | */ 5 | const baseURL = APIDOMAIN; 6 | /** 7 | * 请求超时事件毫秒计算 8 | */ 9 | const timeout = 5000; 10 | /** 11 | * 是否开启拦截器 12 | */ 13 | const isEnableInterceptor = true; 14 | export { baseURL, timeout, isEnableInterceptor }; 15 | -------------------------------------------------------------------------------- /src/config/style/global.scss: -------------------------------------------------------------------------------- 1 | $primaryColor: #1d8f76; 2 | $formBorder: #d9d9d9; 3 | -------------------------------------------------------------------------------- /src/enum/feedback/ActionMessageEnum.ts: -------------------------------------------------------------------------------- 1 | export enum ActionMessageEnum { 2 | Add, 3 | Update, 4 | Delete 5 | } -------------------------------------------------------------------------------- /src/enum/feedback/MessageEnum.ts: -------------------------------------------------------------------------------- 1 | export enum MessageEnum { 2 | Info, 3 | Warning, 4 | Error, 5 | Success, 6 | } 7 | -------------------------------------------------------------------------------- /src/enum/validate/ValidateDialogEnum.ts: -------------------------------------------------------------------------------- 1 | export enum ValidateDialogEnum { 2 | Single, 3 | Mulit 4 | } -------------------------------------------------------------------------------- /src/infrastructure/decorator/Authorize.ts: -------------------------------------------------------------------------------- 1 | import { MessageEnum } from './../../enum/feedback/MessageEnum'; 2 | import { RouterPathEnum } from './../../router/RouterPathEnum'; 3 | import { RouterEnum } from './../ioccontainer/enum/RouterEnum'; 4 | import IRouter from '@/router/IRouter'; 5 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 6 | import { UtilsEnum } from '../ioccontainer/enum/UtilsEnum'; 7 | import IMyAuthorize from "../utils/authorize/IMyAuthorize"; 8 | import { UIEnum } from '../ioccontainer/enum/UIEnum'; 9 | import IMyMessage from '../utils/message/IMyMessage'; 10 | 11 | 12 | export const authorize = (isAuthorize: boolean = true): MethodDecorator => { 13 | return (target: Object, propertyKey: string | symbol, descriptor: any) => { 14 | 15 | let method = descriptor.value; 16 | descriptor.value = function (...arg: []) { 17 | if (isAuthorize) { 18 | const myAuthorize: IMyAuthorize = IOCContainer.getInstance(UtilsEnum.Authorize); 19 | const router: IRouter = IOCContainer.getInstance(RouterEnum.VueRouter); 20 | const myMessage: IMyMessage = IOCContainer.getInstance(UIEnum.IMessage); 21 | if (myAuthorize.checkIsLogin()) { 22 | myMessage.showConfirm({ 23 | type: MessageEnum.Error, 24 | title: "权限", 25 | content: "你没有权限,请重新登录", 26 | onOk: () => router.push(RouterPathEnum.Login) 27 | }) 28 | return; 29 | } 30 | } 31 | return method.apply(this, arg); 32 | }; 33 | } 34 | } -------------------------------------------------------------------------------- /src/infrastructure/decorator/ValidateDecorator.ts: -------------------------------------------------------------------------------- 1 | export const ValidateViewModel = (): ClassDecorator => { 2 | return (target: any) => { 3 | } 4 | } -------------------------------------------------------------------------------- /src/infrastructure/global/GlobalVue.ts: -------------------------------------------------------------------------------- 1 | export default class GlobalVue { 2 | private static vueInstance: Vue; 3 | private constructor() { } 4 | public static createInstance(vueInstance: Vue) { 5 | if (vueInstance !== undefined) { 6 | this.vueInstance = vueInstance; 7 | } 8 | } 9 | public static getVueInstance(): Vue { 10 | return this.vueInstance; 11 | } 12 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/IOCContainer.ts: -------------------------------------------------------------------------------- 1 | import { container } from 'inversify-props'; 2 | import { InjectTypeEnum } from './enum/InjectTypeEnum'; 3 | import IBaseIOCModel from './interface/IBaseIOCModel'; 4 | import IOCModel from './models/IOCModel'; 5 | import { IOCEnum } from './type/IOCType'; 6 | import 'reflect-metadata'; 7 | 8 | export default class IOCContainer { 9 | private constructor() { } 10 | private static injectToIOCContainer(iOCModel: IOCModel): void { 11 | switch (iOCModel.iocInjectType) { 12 | case InjectTypeEnum.Request: 13 | container.addRequest(iOCModel.iocObject, iOCModel.iocName); 14 | break; 15 | case InjectTypeEnum.Singleton: 16 | container.addSingleton(iOCModel.iocObject, iOCModel.iocName); 17 | break; 18 | case InjectTypeEnum.Transient: 19 | container.addTransient(iOCModel.iocObject, iOCModel.iocName); 20 | break; 21 | } 22 | } 23 | 24 | 25 | public static getInstance(iOCEnum: IOCEnum) { 26 | return container.get(iOCEnum); 27 | } 28 | 29 | public static addUtils(utilsIOCModel: IOCModel): void { 30 | this.injectToIOCContainer(utilsIOCModel); 31 | } 32 | 33 | public static addContext(contextIOCModel: IOCModel): void { 34 | this.injectToIOCContainer(contextIOCModel); 35 | } 36 | 37 | public static addUI(uiIOCModel: IOCModel): void { 38 | this.injectToIOCContainer(uiIOCModel); 39 | } 40 | public static addService(serviceIOCModel: IOCModel): void { 41 | this.injectToIOCContainer(serviceIOCModel); 42 | } 43 | public static addApi(apiIOCModel: IOCModel) { 44 | this.injectToIOCContainer(apiIOCModel); 45 | } 46 | 47 | public static addRouter(routerIOCModel: IOCModel) { 48 | this.injectToIOCContainer(routerIOCModel); 49 | } 50 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/enum/ApiEnum.ts: -------------------------------------------------------------------------------- 1 | export enum ApiEnum { 2 | TodoApi = "TodoApi", 3 | UserApi = "UserApi" 4 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/enum/ContextEnum.ts: -------------------------------------------------------------------------------- 1 | export enum ContextEnum{ 2 | Context = "Context" 3 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/enum/InjectTypeEnum.ts: -------------------------------------------------------------------------------- 1 | import { container } from 'inversify-props'; 2 | 3 | export enum InjectTypeEnum { 4 | Request, 5 | Singleton, 6 | Transient 7 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/enum/RouterEnum.ts: -------------------------------------------------------------------------------- 1 | export enum RouterEnum { 2 | VueRouter="VueRouter" 3 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/enum/ServiceEnum.ts: -------------------------------------------------------------------------------- 1 | export enum ServiceEnum { 2 | IUserService = "IUserService", 3 | ITodoService = "ITodoService" 4 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/enum/UIEnum.ts: -------------------------------------------------------------------------------- 1 | export enum UIEnum { 2 | IMessage = "Message", 3 | IMyLoading = "IMyLoading" 4 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/enum/UtilsEnum.ts: -------------------------------------------------------------------------------- 1 | export enum UtilsEnum { 2 | Axios = "Axios", 3 | Authorize = "Authorize", 4 | DateTime = "DateTime" 5 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/interface/IBaseIOCModel.ts: -------------------------------------------------------------------------------- 1 | export default interface IBaseIOCModel { 2 | 3 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/interface/IIOCModel.ts: -------------------------------------------------------------------------------- 1 | import { InjectTypeEnum } from '../enum/InjectTypeEnum'; 2 | import { Constructor, IOCEnum } from '../type/IOCType'; 3 | 4 | export default interface IIOCModel { 5 | iocObject: Constructor; 6 | iocName: IOCEnum; 7 | iocInjectType: InjectTypeEnum; 8 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/models/IOCModel.ts: -------------------------------------------------------------------------------- 1 | import { InjectTypeEnum } from './../enum/InjectTypeEnum'; 2 | import IBaseIOCModel from '../interface/IBaseIOCModel'; 3 | import IIOCModel from '../interface/IIOCModel'; 4 | import { Constructor, IOCEnum } from '../type/IOCType'; 5 | 6 | export default class IOCModel implements IIOCModel{ 7 | iocObject: Constructor; 8 | iocName: IOCEnum; 9 | iocInjectType: InjectTypeEnum; 10 | constructor(iocObject: Constructor, iocName: IOCEnum, iocInjectType?: InjectTypeEnum) { 11 | this.iocName = iocName; 12 | this.iocObject = iocObject; 13 | this.iocInjectType = iocInjectType ?? InjectTypeEnum.Singleton; 14 | } 15 | } -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/options/UIOptions.ts: -------------------------------------------------------------------------------- 1 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 2 | import MyMessage from '@/infrastructure/utils/message/MyMessage'; 3 | import { UIEnum } from '../enum/UIEnum'; 4 | import IOCModel from '../models/IOCModel'; 5 | 6 | 7 | export const UIOptions = [ 8 | new IOCModel(MyMessage,UIEnum.IMessage), 9 | ]; -------------------------------------------------------------------------------- /src/infrastructure/ioccontainer/type/IOCType.ts: -------------------------------------------------------------------------------- 1 | import { UtilsEnum } from './../enum/UtilsEnum'; 2 | import { ContextEnum } from '../enum/ContextEnum'; 3 | import { RouterEnum } from '../enum/RouterEnum'; 4 | import { ServiceEnum } from '../enum/ServiceEnum'; 5 | import { UIEnum } from '../enum/UIEnum'; 6 | import { ApiEnum } from '../enum/ApiEnum'; 7 | export declare type Constructor = { 8 | new(...args: any[]): T; 9 | } | any; 10 | export declare type IOCEnum = UIEnum | ServiceEnum | RouterEnum | ContextEnum | UtilsEnum | ApiEnum; -------------------------------------------------------------------------------- /src/infrastructure/utils/authorize/IMyAuthorize.ts: -------------------------------------------------------------------------------- 1 | export default interface IMyAuthorize { 2 | setToken(token:any): void; 3 | getToken(): string | null; 4 | checkIsLogin(): boolean; 5 | } -------------------------------------------------------------------------------- /src/infrastructure/utils/authorize/MyAuthorize.ts: -------------------------------------------------------------------------------- 1 | import { isNotEmpty } from 'class-validator'; 2 | import { AuthorizeEnum } from './enum/AuthorizeEnum'; 3 | import IMyAuthorize from './IMyAuthorize'; 4 | 5 | export default class MyAuthorize implements IMyAuthorize { 6 | setToken(token: string): void { 7 | sessionStorage.setItem(AuthorizeEnum.Token, token); 8 | } 9 | getToken(): string | null { 10 | return sessionStorage.getItem(AuthorizeEnum.Token); 11 | } 12 | checkIsLogin(): boolean { 13 | let isFlag: boolean = false; 14 | if (this.getToken() == null) { 15 | isFlag = true; 16 | } 17 | return isFlag; 18 | } 19 | } -------------------------------------------------------------------------------- /src/infrastructure/utils/authorize/enum/AuthorizeEnum.ts: -------------------------------------------------------------------------------- 1 | export enum AuthorizeEnum { 2 | Token = "AuthorizeEnumToken" 3 | } -------------------------------------------------------------------------------- /src/infrastructure/utils/message/IMyMessage.ts: -------------------------------------------------------------------------------- 1 | import { ActionMessageEnum } from '@/enum/feedback/ActionMessageEnum'; 2 | import { MessageEnum } from '@/enum/feedback/MessageEnum'; 3 | 4 | export default interface IMyMessage { 5 | showMessage(message?: { 6 | content?: string, 7 | type?: MessageEnum, 8 | }): void; 9 | 10 | showConfirm(confirm?: { 11 | type?: MessageEnum, 12 | title?: string | any; 13 | content?: string | any | ((h: any) => any); 14 | onOk?: () => void; 15 | onCancel?: () => void; 16 | okText?: string; 17 | cancelText?: string; 18 | }): void; 19 | 20 | /** 21 | * 22 | */ 23 | showDefualtMessage(param?: { 24 | messsage?: string, 25 | actionMesssageEnum?: ActionMessageEnum 26 | onOk?: () => void 27 | }): void; 28 | } -------------------------------------------------------------------------------- /src/infrastructure/utils/message/MyMessage.ts: -------------------------------------------------------------------------------- 1 | import { ActionMessageEnum } from '@/enum/feedback/ActionMessageEnum'; 2 | import { MessageEnum } from '@/enum/feedback/MessageEnum'; 3 | import GlobalVue from '@/infrastructure/global/GlobalVue'; 4 | import { ModalOptions } from 'ant-design-vue/types/modal'; 5 | import IMyMessage from './IMyMessage'; 6 | export default class MyMessage implements IMyMessage { 7 | thisInstance: Vue; 8 | constructor() { 9 | this.thisInstance = GlobalVue.getVueInstance(); 10 | } 11 | showDefualtMessage(param?: { messsage?: string, actionMesssageEnum?: ActionMessageEnum, onOk?: () => void }): void { 12 | let message = param?.messsage ?? ""; 13 | let actionMessageEnum: ActionMessageEnum = param?.actionMesssageEnum ?? ActionMessageEnum.Add; 14 | let onOk = param?.onOk ?? (() => { }); 15 | switch (actionMessageEnum) { 16 | case ActionMessageEnum.Add: 17 | message += "添加成功" 18 | break; 19 | case ActionMessageEnum.Update: 20 | message += "更新成功" 21 | break; 22 | case ActionMessageEnum.Delete: 23 | message += "删除成功" 24 | break; 25 | } 26 | this.showConfirm({ 27 | type: MessageEnum.Success, 28 | content: message, 29 | onOk: onOk 30 | }); 31 | } 32 | showMessage(message?: { 33 | content: string, 34 | type?: MessageEnum, 35 | }): void { 36 | let content = message?.content ?? ""; 37 | let type: MessageEnum = message?.type ?? MessageEnum.Info; 38 | switch (type) { 39 | case MessageEnum.Success: 40 | this.thisInstance.$message.success(content); 41 | break; 42 | case MessageEnum.Info: 43 | this.thisInstance.$message.info(content); 44 | break; 45 | case MessageEnum.Warning: 46 | this.thisInstance.$message.warn(content); 47 | break; 48 | case MessageEnum.Error: 49 | this.thisInstance.$message.error(content); 50 | break; 51 | } 52 | } 53 | 54 | showConfirm(confirm?: { 55 | type?: MessageEnum, 56 | title?: string; 57 | content: string | any | ((h: any) => any) 58 | onOk?: () => void; 59 | onCancel?: () => void; 60 | okText?: string; 61 | cancelText?: string; 62 | }): void { 63 | let type = confirm?.type ?? MessageEnum.Info; 64 | let option: ModalOptions = { 65 | title: confirm?.title ?? "", 66 | content: confirm?.content ?? "", 67 | onOk: confirm?.onOk ?? (() => { }), 68 | onCancel: confirm?.onCancel ?? (() => { }), 69 | okText: confirm?.okText ?? "确定", 70 | cancelText: confirm?.cancelText ?? "取消", 71 | }; 72 | if (typeof confirm?.content === "object") { 73 | let names = Object.getOwnPropertyNames(confirm?.content); 74 | option.content = (h: any) => h('div', {}, names.map(item => h("p", confirm?.content[item]))); 75 | } 76 | if (confirm?.onCancel !== undefined) { 77 | this.thisInstance.$confirm(option); 78 | } 79 | else { 80 | switch (type) { 81 | case MessageEnum.Success: 82 | this.thisInstance.$success(option); 83 | break; 84 | case MessageEnum.Info: 85 | this.thisInstance.$info(option); 86 | break; 87 | case MessageEnum.Warning: 88 | this.thisInstance.$warning(option); 89 | break; 90 | case MessageEnum.Error: 91 | this.thisInstance.$error(option); 92 | break; 93 | case MessageEnum.Info: 94 | this.thisInstance.$info(option); 95 | break; 96 | } 97 | } 98 | 99 | 100 | } 101 | } -------------------------------------------------------------------------------- /src/interface/api/IApi.ts: -------------------------------------------------------------------------------- 1 | export default interface IApi { 2 | 3 | } -------------------------------------------------------------------------------- /src/interface/api/IArticleApiT.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import IArticleSelectDTO from '../models/dto/IArticleSelectDTO'; 3 | import IExpandApi from './IExpandApiT'; 4 | 5 | export default interface IArticleApi extends IExpandApi { 6 | getArticleSelectList(): IArticleSelectDTO[]; 7 | } -------------------------------------------------------------------------------- /src/interface/api/IBaseApiT.ts: -------------------------------------------------------------------------------- 1 | import { List } from 'linqts'; 2 | import IBaseDTO from '../models/IBaseDTO'; 3 | 4 | export default interface BaseApi { 5 | update(path: string, t: T): Promise; 6 | getById(path: string, t: T): Promise; 7 | delete(path: string, t: T): Promise; 8 | add(path: string, t: T): Promise; 9 | getList(path: string): Promise> 10 | } -------------------------------------------------------------------------------- /src/interface/api/IExpandApiT.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import { List } from 'linqts'; 3 | import IApi from './IApi'; 4 | export default interface IExpandApi extends IApi { 5 | update(path: string, t: T): Promise; 6 | getById(path: string, id: any): Promise; 7 | delete(path: string, id: any): Promise; 8 | add(path: string, t: T): Promise; 9 | getList(path: string): Promise>; 10 | } -------------------------------------------------------------------------------- /src/interface/api/IMenuApiT.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import IMenuSelectDTO from '../models/dto/IMenuSelectDTO'; 3 | import IExpandApi from './IExpandApiT'; 4 | 5 | export default interface IMenuApi extends IExpandApi { 6 | getMenuSelectList(): IMenuSelectDTO[]; 7 | } -------------------------------------------------------------------------------- /src/interface/api/IService.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import IApi from './IApi'; 3 | import IExpandApi from './IExpandApiT'; 4 | 5 | export default interface IService { 6 | 7 | } -------------------------------------------------------------------------------- /src/interface/api/ITodoApi.ts: -------------------------------------------------------------------------------- 1 | import ITodoDTO from '@/interface/models/dto/ITodoDTO'; 2 | export default interface ITodoApi { 3 | add(todoDTO: ITodoDTO): Promise; 4 | getList(): Promise; 5 | delete(todoId: string): Promise; 6 | getById(todoId: string): Promise; 7 | update(todoDTO: ITodoDTO): Promise; 8 | } -------------------------------------------------------------------------------- /src/interface/api/IUserApi.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import IExpandApi from './IExpandApiT'; 3 | 4 | export default interface IUserApi extends IExpandApi { 5 | login(t: T):Promise 6 | } -------------------------------------------------------------------------------- /src/interface/components/IComponents.ts: -------------------------------------------------------------------------------- 1 | export default interface IComponents { 2 | 3 | } -------------------------------------------------------------------------------- /src/interface/components/ITableViewModel.ts: -------------------------------------------------------------------------------- 1 | export default interface ITableViewModel { 2 | key: string; 3 | } -------------------------------------------------------------------------------- /src/interface/models/IBaseDTO.ts: -------------------------------------------------------------------------------- 1 | export default interface IBaseDTO { 2 | id:any; 3 | } -------------------------------------------------------------------------------- /src/interface/models/IBaseViewModel.ts: -------------------------------------------------------------------------------- 1 | export default interface IBaseViewModel { 2 | id: any; 3 | } -------------------------------------------------------------------------------- /src/interface/models/IValidateModel.ts: -------------------------------------------------------------------------------- 1 | import { MessageEnum } from '@/enum/feedback/MessageEnum'; 2 | import { ValidateDialogEnum } from '@/enum/validate/ValidateDialogEnum'; 3 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 4 | import IBaseDTO from './IBaseDTO'; 5 | export interface IValidateModel extends IBaseDTO { 6 | validate(param?: { 7 | viewModel?: any 8 | }): Promise; 9 | getErrorsMessage(): { [key: string]: any }; 10 | getErrorsMessageSingle(): string | undefined; 11 | mergeToViewModel(t: T): T; 12 | mergeErrorToViewModel(t: T): T; 13 | getReturnDialog(param?: { validateDialogEnum: ValidateDialogEnum, messageEnum?: MessageEnum, title?: string }): void; 14 | toPureDTO(): any; 15 | } -------------------------------------------------------------------------------- /src/interface/models/dto/IArticleDTO.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | export default interface IArticleDTO extends IBaseDTO{ 3 | 4 | } -------------------------------------------------------------------------------- /src/interface/models/dto/IArticleSelectDTO.ts: -------------------------------------------------------------------------------- 1 | export default interface IArticleSelectDTO { 2 | value: any; 3 | label: string 4 | children: IArticleSelectDTO[] 5 | } -------------------------------------------------------------------------------- /src/interface/models/dto/IMenuDTO.ts: -------------------------------------------------------------------------------- 1 | export default interface IMenuDTO { 2 | id: number | undefined; 3 | pid: number | undefined; 4 | name: string; 5 | isenable: number; 6 | isaudit: number; 7 | } -------------------------------------------------------------------------------- /src/interface/models/dto/IMenuSelectDTO.ts: -------------------------------------------------------------------------------- 1 | export default interface IMenuSelectDTO { 2 | value: any; 3 | label: string 4 | children: IMenuSelectDTO[] 5 | } -------------------------------------------------------------------------------- /src/interface/models/dto/ITodoDTO.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '../IBaseDTO'; 2 | 3 | export default interface ITodoDTO extends IBaseDTO { 4 | id: string; 5 | item: string; 6 | author: string; 7 | datetime: string; 8 | } -------------------------------------------------------------------------------- /src/interface/models/dto/IUserDTO.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | 3 | export default interface IUserDTO extends IBaseDTO { 4 | username: string; 5 | password: string; 6 | } -------------------------------------------------------------------------------- /src/interface/services/IArticleService.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import IExpandService from './IExpandService'; 3 | 4 | export default interface IArticleService extends IExpandService { 5 | getInitialArticleSelectData(): any; 6 | } -------------------------------------------------------------------------------- /src/interface/services/IExpandService.ts: -------------------------------------------------------------------------------- 1 | import IExpandApi from '../api/IExpandApiT'; 2 | import IService from '../api/IService'; 3 | import IBaseDTO from '../models/IBaseDTO'; 4 | 5 | export default interface IExpandService> extends IService { 6 | path: string; 7 | api: A; 8 | update(t: T): Promise; 9 | getById(id: any): Promise; 10 | add(t: T): Promise; 11 | getList(): Promise; 12 | delete(id: any): Promise; 13 | } -------------------------------------------------------------------------------- /src/interface/services/IMenuService.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import IExpandService from './IExpandService'; 3 | 4 | export default interface IMenuService extends IExpandService { 5 | getInitialMenuData(): any; 6 | } -------------------------------------------------------------------------------- /src/interface/services/IMyUserService.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from "../models/IBaseDTO"; 2 | import IExpandService from "./IExpandService"; 3 | 4 | export default interface IMyUserService extends IExpandService { 5 | 6 | } -------------------------------------------------------------------------------- /src/interface/services/ITodoService.ts: -------------------------------------------------------------------------------- 1 | import TableTodoViewModel from '@/models/viewmodel/TableTodoViewModel'; 2 | import ITodoDTO from '../models/dto/ITodoDTO'; 3 | 4 | export default interface ITodoService { 5 | addTodo(todoDTO: ITodoDTO): Promise; 6 | getTodoList(): Promise 7 | delteTodo(todoId:string):any; 8 | getTodoById(id:string):Promise; 9 | updateTodo(todoDTO: ITodoDTO): Promise; 10 | } -------------------------------------------------------------------------------- /src/interface/services/IUserService.ts: -------------------------------------------------------------------------------- 1 | import UserDTO from '@/models/dto/UserDTO'; 2 | import UserResultDTO from '@/models/dto/UserResultDTO'; 3 | export default interface IUserService{ 4 | login(userDto: UserDTO): UserResultDTO | boolean; 5 | } -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import Antd from 'ant-design-vue'; 5 | import 'ant-design-vue/dist/antd.less'; 6 | import 'reflect-metadata'; 7 | import IOCContainer from './infrastructure/ioccontainer/IOCContainer'; 8 | import IOCModel from './infrastructure/ioccontainer/models/IOCModel'; 9 | import ITodoService from './interface/services/ITodoService'; 10 | import ITodoApi from './interface/api/ITodoApi'; 11 | import IAxiosHelper from './utils/axios/interface/IAxiosHelper'; 12 | import IMyAuthorize from './infrastructure/utils/authorize/IMyAuthorize'; 13 | import IRouter from './router/IRouter'; 14 | import IMyMessage from './infrastructure/utils/message/IMyMessage'; 15 | import IMyLoadingController from './components/myloading/IMyLoadingController'; 16 | import TodoService from './services/TodoService'; 17 | import { ServiceEnum } from './infrastructure/ioccontainer/enum/ServiceEnum'; 18 | import TodoApi from './api/TodoApi'; 19 | import { ApiEnum } from './infrastructure/ioccontainer/enum/ApiEnum'; 20 | import AxiosHelper from './utils/axios/AxiosHelper'; 21 | import { UtilsEnum } from './infrastructure/ioccontainer/enum/UtilsEnum'; 22 | import MyAuthorize from './infrastructure/utils/authorize/MyAuthorize'; 23 | import { RouterEnum } from './infrastructure/ioccontainer/enum/RouterEnum'; 24 | import MyMessage from './infrastructure/utils/message/MyMessage'; 25 | import { UIEnum } from './infrastructure/ioccontainer/enum/UIEnum'; 26 | import MyLoadingController from './components/myloading/MyLoadingController'; 27 | import Router from './router/Router'; 28 | import IUserApi from './interface/api/IUserApi'; 29 | import UserApi from './api/UserApi'; 30 | import IUserService from './interface/services/IUserService'; 31 | import UserService from './services/UserService'; 32 | import IDateTimeHelper from './utils/datetime/IDatetimeHelper'; 33 | import DateTimeHelper from './utils/datetime/DatetimeHelper'; 34 | //@ts-ignore 35 | import VueQuillEditor from 'vue-quill-editor'; 36 | 37 | // require styles 38 | import 'quill/dist/quill.core.css' 39 | import 'quill/dist/quill.snow.css' 40 | import 'quill/dist/quill.bubble.css' 41 | 42 | 43 | 44 | 45 | IOCContainer.addRouter(new IOCModel(Router, RouterEnum.VueRouter)); 46 | IOCContainer.addUtils(new IOCModel(AxiosHelper, UtilsEnum.Axios)); 47 | IOCContainer.addUtils(new IOCModel(DateTimeHelper, UtilsEnum.DateTime)); 48 | IOCContainer.addUtils(new IOCModel(MyAuthorize, UtilsEnum.Authorize)); 49 | IOCContainer.addApi(new IOCModel(TodoApi, ApiEnum.TodoApi)) 50 | IOCContainer.addApi(new IOCModel>(UserApi, ApiEnum.UserApi)) 51 | IOCContainer.addService(new IOCModel(TodoService, ServiceEnum.ITodoService)); 52 | IOCContainer.addService(new IOCModel(UserService, ServiceEnum.IUserService)); 53 | IOCContainer.addUI(new IOCModel(MyMessage, UIEnum.IMessage)); 54 | IOCContainer.addUI(new IOCModel(MyLoadingController, UIEnum.IMyLoading)); 55 | 56 | 57 | Vue.config.productionTip = false 58 | Vue.use(Antd); 59 | Vue.use(VueQuillEditor) 60 | 61 | const vue = new Vue({ 62 | router, 63 | render: h => h(App) 64 | }).$mount('#app') 65 | -------------------------------------------------------------------------------- /src/models/abstract/AbsBaseDTO.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import AbsValidateModel from './AbsValidateModel'; 3 | 4 | export default class AbsBaseDTO extends AbsValidateModel implements IBaseDTO { 5 | id: any; 6 | } -------------------------------------------------------------------------------- /src/models/abstract/AbsValidateModel.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import { ValidateModel } from '../validate/ValidateModelT'; 3 | 4 | export default abstract class AbsValidateModel extends ValidateModel{ 5 | 6 | } -------------------------------------------------------------------------------- /src/models/dto/ArticleDTO.ts: -------------------------------------------------------------------------------- 1 | import IArticleDTO from '@/interface/models/dto/IArticleDTO'; 2 | import { IsNotEmpty } from 'class-validator'; 3 | import AbsBaseDTO from '../abstract/AbsBaseDTO'; 4 | export default class ArticleDTO extends AbsBaseDTO implements IArticleDTO { 5 | id: number | undefined; 6 | @IsNotEmpty({ message: "所属栏目不能为空" }) 7 | mid: number | undefined; 8 | @IsNotEmpty({ message: "标题不能为空" }) 9 | title: string; 10 | @IsNotEmpty({ message: "内容不能为空"}) 11 | content: string; 12 | isaudit: number; 13 | isenable: number; 14 | constructor(param?: { 15 | id?: number, 16 | mid?: number, 17 | title?: string, 18 | content?: string, 19 | isaudit?: number, 20 | isenable?: number, 21 | }) { 22 | super(); 23 | this.id = param?.id ?? undefined; 24 | this.mid = param?.mid ?? undefined; 25 | this.title = param?.title ?? ""; 26 | this.content = param?.content ?? ""; 27 | this.isaudit = param?.isaudit ?? 1; 28 | this.isenable = param?.isenable ?? 1; 29 | } 30 | } -------------------------------------------------------------------------------- /src/models/dto/MenuDTO.ts: -------------------------------------------------------------------------------- 1 | import IMenuDTO from '@/interface/models/dto/IMenuDTO'; 2 | import { IsNotEmpty } from 'class-validator'; 3 | import AbsBaseDTO from '../abstract/AbsBaseDTO'; 4 | export default class MenuDTO extends AbsBaseDTO implements IMenuDTO { 5 | id: number | undefined; 6 | @IsNotEmpty({ message: "父编号不能为空" }) 7 | pid: number | undefined; 8 | @IsNotEmpty({ message: "栏目名称不能为空" }) 9 | name: string; 10 | isenable: number; 11 | isaudit: number; 12 | constructor(param?: { 13 | id?: number, 14 | pid?: number, 15 | name?: string, 16 | createtime?: string, 17 | isenable?: number, 18 | isaudit?: number, 19 | }) { 20 | super(); 21 | this.id = param?.id ?? undefined; 22 | this.pid = param?.pid ?? undefined; 23 | this.name = param?.name ?? ""; 24 | this.isenable = param?.isenable ?? 0; 25 | this.isaudit = param?.isaudit ?? 0; 26 | } 27 | } -------------------------------------------------------------------------------- /src/models/dto/MyUserDTO.ts: -------------------------------------------------------------------------------- 1 | import AbsBaseDTO from "../abstract/AbsBaseDTO"; 2 | 3 | export default class MyUserDTO extends AbsBaseDTO{ 4 | 5 | } -------------------------------------------------------------------------------- /src/models/dto/TestDTO.ts: -------------------------------------------------------------------------------- 1 | import ITodoDTO from '@/interface/models/dto/ITodoDTO'; 2 | import { IsNotEmpty } from 'class-validator'; 3 | import AbsBaseDTO from '../abstract/AbsBaseDTO'; 4 | export default class TestDTO extends AbsBaseDTO{ 5 | id: string; 6 | name: string; 7 | age: string; 8 | sex: string; 9 | constructor(param?: { id?: string, name?: string, age?: string, sex?: string }) { 10 | super(); 11 | this.id = param?.id ?? ""; 12 | this.name = param?.name ?? ""; 13 | this.age = param?.age ?? ""; 14 | this.sex = param?.sex ?? ""; 15 | } 16 | } -------------------------------------------------------------------------------- /src/models/dto/TodoDTO.ts: -------------------------------------------------------------------------------- 1 | import ITodoDTO from '@/interface/models/dto/ITodoDTO'; 2 | import { IsNotEmpty } from 'class-validator'; 3 | import AbsBaseDTO from '../abstract/AbsBaseDTO'; 4 | export default class TodoDTO extends AbsBaseDTO implements ITodoDTO{ 5 | id: string; 6 | @IsNotEmpty({ message: "代办事项不能为空" }) 7 | item: string; 8 | @IsNotEmpty({ message: "代办人不能为空" }) 9 | author: string; 10 | @IsNotEmpty({ message: "代办时间不能为空" }) 11 | datetime: string; 12 | constructor(param?: { id?: string, item?: string, author?: string, datetime?: string }) { 13 | super(); 14 | this.id = param?.id ?? ""; 15 | this.item = param?.item ?? ""; 16 | this.author = param?.author ?? ""; 17 | this.datetime = param?.datetime ?? ""; 18 | } 19 | } -------------------------------------------------------------------------------- /src/models/dto/UserDTO.ts: -------------------------------------------------------------------------------- 1 | import { IsNotEmpty } from 'class-validator'; 2 | import AbsBaseDTO from '../abstract/AbsBaseDTO'; 3 | import IUserDTO from '../../interface/models/dto/IUserDTO'; 4 | 5 | export default class UserDTO extends AbsBaseDTO implements IUserDTO { 6 | @IsNotEmpty({ message: `用户名不能为空` }) 7 | username: string; 8 | @IsNotEmpty({ message: `密码不能为空` }) 9 | password: string; 10 | constructor(userDto?: { 11 | username?: string, 12 | password?: string 13 | }) { 14 | super(); 15 | this.username = userDto?.username ?? ""; 16 | this.password = userDto?.password ?? ""; 17 | } 18 | id: any; 19 | } -------------------------------------------------------------------------------- /src/models/dto/UserResultDTO.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | export default class UserResultDTO implements IBaseDTO { 3 | id: string | undefined; 4 | username:string | undefined; 5 | password:string | undefined; 6 | token:string | undefined; 7 | } -------------------------------------------------------------------------------- /src/models/validate/ValidateModelT.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import { MessageEnum } from '@/enum/feedback/MessageEnum'; 3 | import { ValidateDialogEnum } from '@/enum/validate/ValidateDialogEnum'; 4 | import { UIEnum } from '@/infrastructure/ioccontainer/enum/UIEnum'; 5 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 6 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 7 | import { IValidateModel } from '@/interface/models/IValidateModel'; 8 | import { validateOrReject, ValidationArguments } from 'class-validator'; 9 | 10 | let errorsMessage: { [key: string]: any }; 11 | export class ValidateModel implements IValidateModel{ 12 | id: any; 13 | constructor() { 14 | errorsMessage = {}; 15 | } 16 | 17 | getErrorsMessage(): { [key: string]: any } { 18 | return errorsMessage; 19 | } 20 | 21 | getErrorsMessageSingle(): string | undefined { 22 | let singleError = undefined; 23 | let obj = Object.getOwnPropertyNames(errorsMessage); 24 | if (obj.length > 0) { 25 | singleError = errorsMessage[obj[0]]; 26 | } 27 | return singleError; 28 | } 29 | 30 | public async validate(param?: { 31 | viewModel?: T 32 | }): Promise { 33 | let obj: unknown = this; 34 | try { 35 | await validateOrReject(this); 36 | errorsMessage = []; 37 | this.cleanViewModelError(param?.viewModel ?? {}); 38 | return obj as T; 39 | } catch (errors) { 40 | if (errors.length > 0) { 41 | const e = errors as ValidationArguments[]; 42 | let eMessage = {}; 43 | for (let item of e) { 44 | let names = Object.getOwnPropertyNames(item.constraints); 45 | let key = names[names.length - 1]; 46 | eMessage[`${item.property}ErrorMessage`] = item.constraints[key]; 47 | } 48 | console.log(errorsMessage); 49 | errorsMessage = eMessage; 50 | } 51 | return false; 52 | } 53 | } 54 | 55 | public async getReturnDialog(param?: { 56 | validateDialogEnum?: ValidateDialogEnum, 57 | messageEnum?: MessageEnum, 58 | title?: string, 59 | onOk?: () => void 60 | onCancel?: () => void 61 | }) { 62 | let myMessage = IOCContainer.getInstance(UIEnum.IMessage); 63 | let messageEnum: MessageEnum = param?.messageEnum ?? MessageEnum.Warning; 64 | let validateDialogEnum = param?.validateDialogEnum ?? ValidateDialogEnum.Single; 65 | let title = param?.title ?? "提示信息"; 66 | 67 | let onOk: () => void = param?.onOk ?? (() => { }); 68 | let onCancel: () => void = param?.onCancel ?? (() => { }); 69 | switch (validateDialogEnum) { 70 | case ValidateDialogEnum.Single: 71 | let message = this.getErrorsMessageSingle(); 72 | myMessage.showMessage({ content: message, type: messageEnum }); 73 | break; 74 | case ValidateDialogEnum.Mulit: 75 | myMessage.showConfirm({ 76 | title: title, 77 | content: errorsMessage, 78 | onOk: onOk, 79 | onCancel: onCancel 80 | }) 81 | } 82 | 83 | } 84 | 85 | private cleanViewModelError(t: T) { 86 | for (let item of Object.getOwnPropertyNames(t)) { 87 | if (item.indexOf("ErrorMessage") !== -1) { 88 | if (t.hasOwnProperty(item)) { 89 | t[item] = ""; 90 | } 91 | } 92 | } 93 | } 94 | 95 | public mergeToViewModel(t: T): T { 96 | this.cleanViewModelError(t); 97 | for (let item of Object.getOwnPropertyNames(this)) { 98 | if (t.hasOwnProperty(item)) { 99 | t[item] = this[item] 100 | } 101 | } 102 | return t; 103 | } 104 | 105 | public mergeErrorToViewModel(t: T): T { 106 | this.cleanViewModelError(t); 107 | let errors: Object = errorsMessage as Object; 108 | for (let item of Object.getOwnPropertyNames(errors)) { 109 | if (errors.hasOwnProperty(item)) { 110 | t[item] = errorsMessage[item] 111 | } 112 | } 113 | return t; 114 | } 115 | public async autoMergeToViewModel(t: T, SuccessCallBack?: Function, ErrorCallBack?: Function): Promise { 116 | if (await this.validate()) { 117 | this.mergeToViewModel(t); 118 | if (SuccessCallBack !== undefined) { 119 | SuccessCallBack(); 120 | } 121 | return t; 122 | } 123 | else { 124 | this.mergeErrorToViewModel(t); 125 | if (ErrorCallBack !== undefined) { 126 | ErrorCallBack(); 127 | } 128 | return false; 129 | } 130 | } 131 | 132 | public toPureDTO(): any { 133 | let newObj = Object.create({}); 134 | for (let key of Reflect.ownKeys(this)) { 135 | Object.assign(newObj, { [key]: this[key] }) 136 | } 137 | return newObj; 138 | } 139 | } -------------------------------------------------------------------------------- /src/models/viewmodel/ArticleViewModel.ts: -------------------------------------------------------------------------------- 1 | import { Form } from '@/components/factory/decorator/FormComponentDecorator'; 2 | import { FormEnum } from '@/components/factory/enum/FormEnum'; 3 | import MySwitchOption from '@/components/myswitch/MySwitchOption'; 4 | import { observable } from 'mobx'; 5 | 6 | export default class MenuViewModel { 7 | @Form({ title: "编号", primaryKey: true }) 8 | @observable 9 | id: number | undefined; 10 | @observable 11 | idErrorMessage: string | undefined; 12 | @Form({ 13 | title: "所属栏目", component: { 14 | type: FormEnum.Cascader 15 | } 16 | }) 17 | @observable 18 | mid: number | number[] | undefined; 19 | @observable 20 | midInitialData: [] | undefined; 21 | @observable 22 | midErrorMessage: string | undefined; 23 | @Form({ title: "文章标题" }) 24 | @observable 25 | title: string; 26 | @observable 27 | titleErrorMessage: string | undefined; 28 | @Form({ 29 | title: "文章内容", component: { 30 | type: FormEnum.Editor 31 | } 32 | }) 33 | @observable 34 | content: string; 35 | @observable 36 | contentErrorMessage: string | undefined; 37 | 38 | @Form({ 39 | title: "禁用启用", 40 | component: { 41 | type: FormEnum.Switch, 42 | param: new MySwitchOption({ 43 | checkedChildren: "启用", 44 | unCheckedChildren: "禁用", 45 | }) 46 | } 47 | }) 48 | @observable isenable: number | undefined; 49 | 50 | @Form({ 51 | title: "审核通过", 52 | component: { 53 | type: FormEnum.Switch, 54 | } 55 | }) 56 | @observable isaudit: number | undefined; 57 | constructor(param?: { 58 | id?: number, 59 | mid?: number, 60 | title?: string, 61 | content?: string, 62 | isenable?: number; 63 | isaudit?: number; 64 | }) { 65 | this.id = param?.id ?? undefined; 66 | this.mid = param?.mid ?? undefined; 67 | this.title = param?.title ?? ""; 68 | this.content = param?.content ?? ""; 69 | this.isenable = param?.isenable ?? 1; 70 | this.isaudit = param?.isaudit ?? 1; 71 | } 72 | } -------------------------------------------------------------------------------- /src/models/viewmodel/LoginViewModel.ts: -------------------------------------------------------------------------------- 1 | export default class LoginViewModel { 2 | username: string; 3 | password: string; 4 | constructor({ username, password }: LoginViewModel = { username: "", password: "" }) { 5 | this.username = username; 6 | this.password = password; 7 | } 8 | } -------------------------------------------------------------------------------- /src/models/viewmodel/MenuViewModel.tsx: -------------------------------------------------------------------------------- 1 | import { Form } from '@/components/factory/decorator/FormComponentDecorator'; 2 | import { FormEnum } from '@/components/factory/enum/FormEnum'; 3 | import MySwitchOption from '@/components/myswitch/MySwitchOption'; 4 | import { observable } from 'mobx'; 5 | 6 | export default class MenuViewModel { 7 | @Form({ title: "编号", primaryKey: true }) 8 | @observable 9 | id: number | undefined; 10 | @observable 11 | idErrorMessage: string | undefined; 12 | @Form({ 13 | title: " 父编号", component: { 14 | type: FormEnum.Cascader 15 | } 16 | }) 17 | @observable 18 | pid: number | number[] | undefined; 19 | @observable 20 | pidInitialData: [] | undefined; 21 | @observable 22 | midErrorMessage: string | undefined; 23 | @Form({ title: "名称" }) 24 | @observable 25 | name: string; 26 | @observable 27 | nameErrorMessage: string | undefined; 28 | @observable 29 | createtimeErrorMessage: string | undefined; 30 | 31 | @Form({ 32 | title: "禁用启用", 33 | component: { 34 | type: FormEnum.Switch, 35 | param: new MySwitchOption({ 36 | checkedChildren: "启用", 37 | unCheckedChildren: "禁用", 38 | }) 39 | } 40 | }) 41 | @observable isenable: number | undefined; 42 | 43 | @Form({ 44 | title: "审核通过", 45 | component: { 46 | type: FormEnum.Switch, 47 | } 48 | }) 49 | @observable isaudit: number | undefined; 50 | constructor(param?: { 51 | id?: number, 52 | pid?: number, 53 | name?: string, 54 | isenable: number; 55 | isaudit: number; 56 | }) { 57 | this.id = param?.id ?? undefined; 58 | this.pid = param?.pid ?? undefined; 59 | this.name = param?.name ?? ""; 60 | this.isenable = param?.isenable ?? 1; 61 | this.isaudit = param?.isaudit ?? 1; 62 | } 63 | } -------------------------------------------------------------------------------- /src/models/viewmodel/MyUserViewModel.ts: -------------------------------------------------------------------------------- 1 | import { Form } from '@/components/factory/decorator/FormComponentDecorator'; 2 | import { FormEnum } from '@/components/factory/enum/FormEnum'; 3 | import MySwitchOption from '@/components/myswitch/MySwitchOption'; 4 | import { observable } from 'mobx'; 5 | 6 | export default class MyUserViewModel { 7 | @Form({ title: "编号", primaryKey: true }) 8 | @observable 9 | id:any |undefined; 10 | @Form({ title: "用户名" }) 11 | @observable 12 | username:string |undefined; 13 | 14 | @Form({ title: "密码" }) 15 | @observable 16 | password:string |undefined; 17 | 18 | @Form({ 19 | title: "禁用启用", 20 | component: { 21 | type: FormEnum.Switch, 22 | param: new MySwitchOption({ 23 | checkedChildren: "启用", 24 | unCheckedChildren: "禁用", 25 | }) 26 | } 27 | }) 28 | @observable isenable: number | undefined; 29 | 30 | @Form({ 31 | title: "审核通过", 32 | component: { 33 | type: FormEnum.Switch, 34 | } 35 | }) 36 | @observable isaudit: number | undefined; 37 | constructor(param?: { 38 | id?: number, 39 | username?:string, 40 | password?:string, 41 | content?: string, 42 | isenable?: number; 43 | isaudit?: number; 44 | }) { 45 | this.id = param?.id ?? undefined; 46 | this.isenable = param?.isenable ?? 1; 47 | this.isaudit = param?.isaudit ?? 1; 48 | } 49 | } -------------------------------------------------------------------------------- /src/models/viewmodel/TableTodoViewModel.ts: -------------------------------------------------------------------------------- 1 | import ITodoDTO from '@/interface/models/dto/ITodoDTO'; 2 | import { observable } from 'mobx'; 3 | export default class TableTodoViewModel implements ITodoDTO { 4 | @observable id: string; 5 | @observable item: string; 6 | @observable author: string; 7 | @observable datetime: string; 8 | constructor(param?: { 9 | id?: string; 10 | item?: string; 11 | author?: string; 12 | datetime?: string; 13 | }) { 14 | this.id = param?.id ?? ""; 15 | this.item = param?.item ?? ""; 16 | this.author = param?.author ?? ""; 17 | this.datetime = param?.datetime ?? ""; 18 | } 19 | } -------------------------------------------------------------------------------- /src/models/viewmodel/TestViewModel.ts: -------------------------------------------------------------------------------- 1 | import { observable } from 'mobx'; 2 | 3 | export default class TestViewModel { 4 | @observable 5 | id: string; 6 | @observable 7 | name: string; 8 | @observable 9 | age: string; 10 | @observable 11 | sex: string; 12 | constructor(param?: { id?: string, name?: string, age?: string, sex?: string }) { 13 | this.id = param?.id ?? ""; 14 | this.name = param?.name ?? ""; 15 | this.age = param?.age ?? ""; 16 | this.sex = param?.sex ?? ""; 17 | } 18 | } -------------------------------------------------------------------------------- /src/models/viewmodel/TodoViewModel.ts: -------------------------------------------------------------------------------- 1 | import { observable } from 'mobx'; 2 | export default class TodoViewModel { 3 | /**编号 */ 4 | @observable id: string; 5 | @observable item: string; 6 | @observable itemErrorMessage: string | undefined; 7 | @observable author: string; 8 | @observable authorErrorMessage: string | undefined; 9 | @observable datetime: string; 10 | @observable datetimeErrorMessage: string | undefined; 11 | constructor(param?: { id?: string, item?: string, author?: string, datetime?: string }) { 12 | this.id = param?.id ?? ""; 13 | this.item = param?.item ?? ""; 14 | this.author = param?.author ?? ""; 15 | this.datetime = param?.datetime ?? ""; 16 | } 17 | } -------------------------------------------------------------------------------- /src/router/IRouter.ts: -------------------------------------------------------------------------------- 1 | import { RawLocation } from 'vue-router'; 2 | import { Dictionary } from 'vue-router/types/router'; 3 | export default interface IRouter { 4 | push(location: RawLocation):void; 5 | getQueryParam():Dictionary; 6 | } -------------------------------------------------------------------------------- /src/router/Router.ts: -------------------------------------------------------------------------------- 1 | import GlobalVue from '@/infrastructure/global/GlobalVue' 2 | import { RawLocation } from 'vue-router'; 3 | import { Dictionary } from 'vue-router/types/router'; 4 | import IRouter from './IRouter'; 5 | 6 | export default class Router implements IRouter { 7 | vueInstance: Vue 8 | constructor() { 9 | this.vueInstance = GlobalVue.getVueInstance(); 10 | } 11 | push(location: RawLocation) { 12 | this.vueInstance.$router.push(location) 13 | } 14 | getQueryParam():Dictionary{ 15 | return this.vueInstance.$route.query; 16 | } 17 | } -------------------------------------------------------------------------------- /src/router/RouterPathEnum.ts: -------------------------------------------------------------------------------- 1 | export enum RouterPathEnum { 2 | Index = "/", 3 | Home = "/home", 4 | Login = "/login", 5 | Todo = "/todo", 6 | TodoForm = "/todoform", 7 | Null = "*", 8 | Test = "/test", 9 | TestForm = "/testform", 10 | Menu= "/menu", 11 | MenuForm = "/menuForm", 12 | Article = "/article", 13 | ArticleForm = "/articleform", 14 | MyUser="/MyUser", 15 | MyUserForm= "/MyUserForm" 16 | } -------------------------------------------------------------------------------- /src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { UtilsEnum } from './../infrastructure/ioccontainer/enum/UtilsEnum'; 2 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 3 | import Page404 from '@/views/common/Page404' 4 | import Layout from '@/views/layout/Layout' 5 | import Login from '@/views/login/Login' 6 | import Todo from '@/views/todo/Todo' 7 | import TodoForm from '@/views/todo/TodoForm' 8 | import Vue from 'vue' 9 | import VueRouter, { NavigationGuard, NavigationGuardNext, Route, RouteConfig } from 'vue-router' 10 | import { RouterPathEnum } from './RouterPathEnum' 11 | import IMyAuthorize from '@/infrastructure/utils/authorize/IMyAuthorize'; 12 | import TestTable from '@/views/test/TestTable'; 13 | import TestForm from '@/views/test/TestForm'; 14 | import MenuTable from '@/views/menu/MenuTable'; 15 | import MenuForm from '@/views/menu/MenuForm'; 16 | import ArticleForm from '@/views/article/ArticleForm'; 17 | import ArticleTable from '@/views/article/ArticleTable'; 18 | import UserForm from '@/views/user/MyUserForm'; 19 | 20 | Vue.use(VueRouter) 21 | 22 | const routes: Array = [ 23 | { 24 | path: RouterPathEnum.Index, 25 | component: Layout, 26 | children: [ 27 | { 28 | path: RouterPathEnum.Todo, 29 | component: Todo 30 | }, 31 | { 32 | path: RouterPathEnum.TodoForm, 33 | component: TodoForm 34 | }, 35 | { 36 | path: RouterPathEnum.Test, 37 | component: TestTable 38 | }, 39 | { 40 | path: RouterPathEnum.TestForm, 41 | component: TestForm 42 | }, 43 | { 44 | path: RouterPathEnum.Menu, 45 | component: MenuTable 46 | }, 47 | { 48 | path: RouterPathEnum.MenuForm, 49 | component: MenuForm 50 | }, 51 | { 52 | path: RouterPathEnum.Article, 53 | component: ArticleTable 54 | }, 55 | { 56 | path: RouterPathEnum.ArticleForm, 57 | component: ArticleForm 58 | }, 59 | { 60 | path:RouterPathEnum.MyUserForm, 61 | component:UserForm 62 | } 63 | ] 64 | }, 65 | { 66 | path: RouterPathEnum.Login, 67 | component: Login 68 | }, 69 | { 70 | path: RouterPathEnum.Null, 71 | component: Page404 72 | } 73 | ] 74 | 75 | const router = new VueRouter({ 76 | mode: 'hash', 77 | base: process.env.BASE_URL, 78 | routes 79 | }) 80 | 81 | router.beforeEach((to: Route, from: Route, next: NavigationGuardNext) => { 82 | const myAuthorize: IMyAuthorize = IOCContainer.getInstance(UtilsEnum.Authorize); 83 | // if (myAuthorize.checkIsLogin() && to.path !== RouterPathEnum.Login) { 84 | // next({ path: RouterPathEnum.Login }) 85 | // } 86 | next(); 87 | }) 88 | 89 | export default router 90 | -------------------------------------------------------------------------------- /src/services/ArticleService.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Not996NotOT/vue-mobx-framework/272bf9e6a386fbb595216bdc5ab78a41f0eaa4ba/src/services/ArticleService.ts -------------------------------------------------------------------------------- /src/services/ExpandService.ts: -------------------------------------------------------------------------------- 1 | import ExpandApi from '@/api/ExpandApiT'; 2 | import IBaseDTO from '@/interface/models/IBaseDTO'; 3 | import IExpandApi from '@/interface/api/IExpandApiT'; 4 | import { List } from 'linqts'; 5 | import IExpandService from '@/interface/services/IExpandService'; 6 | import { Contructor } from '@/type/BaseType'; 7 | export default class ExpandService = IExpandApi> implements IExpandService{ 8 | path: string; 9 | api: A; 10 | constructor(path: string, param?: { 11 | Contructor?: Contructor 12 | }) { 13 | //@ts-ignore 14 | this.api = param?.Contructor ? new param.Contructor() : new ExpandApi(); 15 | this.path = path; 16 | } 17 | async update(t: T): Promise { 18 | return await this.api.update(this.path, t); 19 | } 20 | async getById(id: any): Promise { 21 | return await this.api.getById(this.path, id); 22 | } 23 | async add(t: T): Promise { 24 | return await this.api.add(this.path, t); 25 | } 26 | async getList(): Promise { 27 | let tables: R[] = []; 28 | let data: List = await this.api.getList(this.path); 29 | if (data.Count() > 0) { 30 | data.ForEach(item => { 31 | tables.push(item as R); 32 | }); 33 | } 34 | return tables; 35 | } 36 | async delete(id: any): Promise { 37 | return await this.api.delete(this.path, id); 38 | } 39 | } -------------------------------------------------------------------------------- /src/services/MenuService.ts: -------------------------------------------------------------------------------- 1 | import IMenuApi from '@/interface/api/IMenuApiT'; 2 | import MenuApi from '@/api/MenuApiT'; 3 | import IBaseDTO from '@/interface/models/IBaseDTO'; 4 | import IMenuService from '@/interface/services/IMenuService'; 5 | import ExpandService from './ExpandService'; 6 | export default class MenuService extends ExpandService> implements IMenuService{ 7 | constructor(path:string){ 8 | super(path,{ 9 | Contructor:MenuApi 10 | }) 11 | } 12 | async getInitialMenuData() { 13 | return await this.api.getMenuSelectList() 14 | } 15 | } -------------------------------------------------------------------------------- /src/services/MyUserService.ts: -------------------------------------------------------------------------------- 1 | import IMenuApi from '@/interface/api/IMenuApiT'; 2 | import IBaseDTO from '@/interface/models/IBaseDTO'; 3 | import IMyUserService from '@/interface/services/IMyUserService'; 4 | import ExpandService from './ExpandService'; 5 | export default class MyUserService extends ExpandService> implements IMyUserService{ 6 | 7 | } -------------------------------------------------------------------------------- /src/services/TodoService.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Not996NotOT/vue-mobx-framework/272bf9e6a386fbb595216bdc5ab78a41f0eaa4ba/src/services/TodoService.ts -------------------------------------------------------------------------------- /src/services/UserService.ts: -------------------------------------------------------------------------------- 1 | import { ApiEnum } from '@/infrastructure/ioccontainer/enum/ApiEnum'; 2 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 3 | import UserResultDTO from '@/models/dto/UserResultDTO'; 4 | import UserDTO from "@/models/dto/UserDTO"; 5 | import IUserApi from '@/interface/api/IUserApi'; 6 | 7 | export default class UserService { 8 | path = ""; 9 | userApi: IUserApi 10 | constructor() { 11 | this.userApi = IOCContainer.getInstance(ApiEnum.UserApi); 12 | this.path = "/user"; 13 | } 14 | async login(userDTO: UserDTO) { 15 | var isFlag = false; 16 | let data = await this.userApi.login(userDTO); 17 | if (data) { 18 | isFlag = true; 19 | } 20 | return false; 21 | } 22 | } -------------------------------------------------------------------------------- /src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | -------------------------------------------------------------------------------- /src/type/BaseType.ts: -------------------------------------------------------------------------------- 1 | export declare type Contructor = new (...arg:any[]) => any; -------------------------------------------------------------------------------- /src/utils/axios/AxiosHelper.ts: -------------------------------------------------------------------------------- 1 | import { AxiosResultMiddleware } from './middleware/AxiosResultMiddleware'; 2 | import IAxiosHelper from '@/utils/axios/interface/IAxiosHelper'; 3 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 4 | import axios, { AxiosInstance, AxiosRequestConfig } from "axios"; 5 | import { baseURL, isEnableInterceptor, timeout } from '@/config/axios/AxiosConfig'; 6 | import Querstring from './param/Querstring'; 7 | import IBaseDTO from '@/interface/models/IBaseDTO'; 8 | import IMyLoadingController from '@/components/myloading/IMyLoadingController'; 9 | import { UIEnum } from '@/infrastructure/ioccontainer/enum/UIEnum'; 10 | import AxiosPiple from './piple/AxiosPiple'; 11 | import { IAxiosMiddleware } from './interface/IAxiosMiddleware'; 12 | import { AxiosResultMessageMiddleware } from './middleware/AxiosResultMessageMiddleware'; 13 | class AxiosHelper implements IAxiosHelper { 14 | axiosPiple: IAxiosMiddleware[] = [ 15 | AxiosResultMessageMiddleware, 16 | AxiosResultMiddleware 17 | ] 18 | loadingController: IMyLoadingController; 19 | axios: AxiosInstance; 20 | /** 21 | * 创建axios的实例 22 | * @param _baseURL 请求api的域名地址，默认从配置文件里面获取 23 | * @param _timeout 请求的超时时间，默认从配置文件里面获取 24 | */ 25 | constructor(_baseURL: string = baseURL, _timeout: number = timeout) { 26 | this.axios = axios.create({ 27 | baseURL: _baseURL, 28 | timeout: _timeout 29 | }) 30 | this.loadingController = IOCContainer.getInstance(UIEnum.IMyLoading); 31 | this.RequestInterceptors(); 32 | this.ResponseInterceptors(); 33 | } 34 | /** 35 | * 请求拦截器 36 | */ 37 | RequestInterceptors() { 38 | this.axios.interceptors.request.use( 39 | config => { 40 | this.loadingController.loading() 41 | if (isEnableInterceptor) { 42 | } 43 | return config; 44 | }, 45 | error => { 46 | alert(error); 47 | } 48 | ); 49 | return this; 50 | } 51 | 52 | /** 53 | * 响应拦截器 54 | */ 55 | ResponseInterceptors() { 56 | this.axios.interceptors.response.use( 57 | response => { 58 | this.loadingController.loading(); 59 | if (isEnableInterceptor) { 60 | return response; 61 | } 62 | else { 63 | return response; 64 | } 65 | 66 | }, 67 | error => { 68 | alert(error); 69 | } 70 | ); 71 | 72 | return this; 73 | } 74 | public async get(url: string, data?: T, config?: AxiosRequestConfig | undefined): Promise { 75 | try { 76 | if (data != undefined) { 77 | url += Querstring.ConvertToString(data); 78 | } 79 | let response = await this.axios.get(url, config); 80 | return new AxiosPiple(response). 81 | piple(this.axiosPiple).next(); 82 | } 83 | catch (error) { 84 | console.log(error) 85 | } 86 | 87 | } 88 | public async post(url: string, data?: T, config?: AxiosRequestConfig | undefined): Promise { 89 | try { 90 | let response = await this.axios.post(url, data, config); 91 | return new AxiosPiple(response). 92 | piple(this.axiosPiple).next(); 93 | } 94 | catch (error) { 95 | console.log(error) 96 | } 97 | 98 | } 99 | 100 | public async put(url: string, data?: T, config?: AxiosRequestConfig | undefined): Promise { 101 | try { 102 | console.log("axios") 103 | let response = await this.axios.put(url, data, config); 104 | return response.data; 105 | } 106 | catch (error) { 107 | console.log(error) 108 | } 109 | 110 | } 111 | 112 | public async delete(url: string, data?: T, config?: AxiosRequestConfig | undefined): Promise { 113 | try { 114 | if (data != undefined) { 115 | url += Querstring.ConvertToString(data); 116 | } 117 | let response = await this.axios.delete(url, config); 118 | return response.data; 119 | } 120 | catch (error) { 121 | console.log(error) 122 | } 123 | 124 | } 125 | } 126 | export default AxiosHelper; 127 | -------------------------------------------------------------------------------- /src/utils/axios/enum/StatusCode.ts: -------------------------------------------------------------------------------- 1 | export enum STATUSCODE { 2 | OK = "ok" 3 | } -------------------------------------------------------------------------------- /src/utils/axios/interface/IAxiosHelper.ts: -------------------------------------------------------------------------------- 1 | import IBaseDTO from '@/interface/models/IBaseDTO'; 2 | import { AxiosInstance, AxiosRequestConfig } from "axios"; 3 | export default interface IAxiosHelper { 4 | axios: AxiosInstance; 5 | get(url: string, data?: T, config?: AxiosRequestConfig | undefined): any; 6 | post(url: string, data?: T, config?: AxiosRequestConfig | undefined): any; 7 | put(url: string, data?: T, config?: AxiosRequestConfig | undefined): any; 8 | delete(url: string, data?: T, config?: AxiosRequestConfig | undefined): any; 9 | RequestInterceptors(): void; 10 | ResponseInterceptors(): void; 11 | } -------------------------------------------------------------------------------- /src/utils/axios/interface/IAxiosMiddleware.ts: -------------------------------------------------------------------------------- 1 | import { AxiosResponse } from 'axios'; 2 | export declare type IAxiosMiddleware = (axiosResponse: AxiosResponse) => any; -------------------------------------------------------------------------------- /src/utils/axios/interface/IAxiosPiple.ts: -------------------------------------------------------------------------------- 1 | export default interface IAxiosPiple { 2 | piple(chain: any[]): any; 3 | next(): any; 4 | } -------------------------------------------------------------------------------- /src/utils/axios/middleware/AxiosResultMessageMiddleware.ts: -------------------------------------------------------------------------------- 1 | import { UIEnum } from '@/infrastructure/ioccontainer/enum/UIEnum'; 2 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 3 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 4 | import { AxiosResponse } from 'axios'; 5 | import { IAxiosMiddleware } from '../interface/IAxiosMiddleware'; 6 | import AxiosResult from '../model/AxiosResultT'; 7 | 8 | 9 | export const AxiosResultMessageMiddleware: IAxiosMiddleware = (axiosResponse: AxiosResponse) => { 10 | let result: AxiosResult = axiosResponse.data as AxiosResult; 11 | const myMessage: IMyMessage = IOCContainer.getInstance(UIEnum.IMessage) 12 | if (result.message !== undefined && result.message !== "") { 13 | myMessage.showMessage({ content: result.message }); 14 | } 15 | } -------------------------------------------------------------------------------- /src/utils/axios/middleware/AxiosResultMiddleware.ts: -------------------------------------------------------------------------------- 1 | import { AxiosResponse } from 'axios'; 2 | import { IAxiosMiddleware } from '../interface/IAxiosMiddleware'; 3 | import AxiosResult from '../model/AxiosResultT'; 4 | 5 | export const AxiosResultMiddleware: IAxiosMiddleware = (axiosResponse: AxiosResponse) => { 6 | let result: AxiosResult = axiosResponse.data as AxiosResult; 7 | if (result.data !== null) { 8 | return result.data 9 | } 10 | else { 11 | return axiosResponse.data; 12 | } 13 | } -------------------------------------------------------------------------------- /src/utils/axios/model/AxiosResultT.ts: -------------------------------------------------------------------------------- 1 | export default class AxiosResult { 2 | status: any; 3 | data: any; 4 | message: any; 5 | } -------------------------------------------------------------------------------- /src/utils/axios/param/Querstring.ts: -------------------------------------------------------------------------------- 1 | export default class Querstring { 2 | private constructor() { } 3 | static ConvertToString(newClass: any): string { 4 | let param = []; 5 | for (let item of Object.getOwnPropertyNames(newClass)) { 6 | param.push(`${item}=${newClass[item]}`) 7 | } 8 | return `?${param.join('&')}`; 9 | } 10 | 11 | } -------------------------------------------------------------------------------- /src/utils/axios/piple/AxiosPiple.ts: -------------------------------------------------------------------------------- 1 | import { AxiosResponse } from 'axios'; 2 | import { IAxiosMiddleware } from '../interface/IAxiosMiddleware'; 3 | import IAxiosPiple from '../interface/IAxiosPiple'; 4 | export default class AxiosPiple implements IAxiosPiple{ 5 | chain: IAxiosMiddleware[] = []; 6 | axiosResponse: AxiosResponse; 7 | constructor(axiosResponse: AxiosResponse) { 8 | this.axiosResponse = axiosResponse; 9 | } 10 | public piple(chain: IAxiosMiddleware[]) { 11 | this.chain = chain; 12 | return this; 13 | } 14 | public next(): any { 15 | let data: any; 16 | for (let middleware of this.chain) { 17 | data = middleware(this.axiosResponse); 18 | } 19 | return data; 20 | } 21 | } -------------------------------------------------------------------------------- /src/utils/datetime/DatetimeHelper.ts: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs'; 2 | import IDateTimeHelper from './IDatetimeHelper'; 3 | export default class DateTimeHelper implements IDateTimeHelper{ 4 | getCurrentDateTime() { 5 | return dayjs().format("YYYY-MM-DD HH:mm:ss"); 6 | } 7 | } -------------------------------------------------------------------------------- /src/utils/datetime/IDatetimeHelper.ts: -------------------------------------------------------------------------------- 1 | export default interface IDateTimeHelper { 2 | getCurrentDateTime(): string; 3 | } -------------------------------------------------------------------------------- /src/views/article/ArticleForm.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | import BaseForm from '@/components/base/form/BaseForm'; 5 | import ArticleFormController from './ArticleFormController'; 6 | @Observer 7 | @Component 8 | export default class ArticleForm extends Vue { 9 | ArticleFormController:ArticleFormController; 10 | constructor() { 11 | super(); 12 | this.ArticleFormController = new ArticleFormController(); 13 | } 14 | 15 | render() { 16 | return ( 17 | 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/views/article/ArticleFormController.ts: -------------------------------------------------------------------------------- 1 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 2 | import BaseFormController from '@/components/base/form/BaseFormController'; 3 | import ArticleDTO from '@/models/dto/ArticleDTO'; 4 | import ArticleViewModel from '@/models/viewmodel/ArticleViewModel'; 5 | import ArticleService from '@/services/ArticleService'; 6 | import IArticleService from '@/interface/services/IArticleService'; 7 | 8 | export default class ArticleFormController extends BaseFormController>{ 9 | constructor() { 10 | super({ 11 | urlReqeustPath: "/article", 12 | listRouterPath: RouterPathEnum.Article, 13 | v: ArticleViewModel, 14 | t: ArticleDTO, 15 | r: ArticleDTO, 16 | expandService: new ArticleService("/article"), 17 | }); 18 | } 19 | 20 | async initialViewmodel() { 21 | let v = new ArticleViewModel; 22 | v.midInitialData = await this.expandService.getInitialArticleSelectData(); 23 | return v; 24 | } 25 | 26 | } -------------------------------------------------------------------------------- /src/views/article/ArticleTable.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | import BaseTable from '@/components/base/table/BaseTable'; 5 | import ArticleTableController from './ArticleTableController'; 6 | @Observer 7 | @Component 8 | export default class ArticleTable extends Vue { 9 | ArticleTableController: ArticleTableController; 10 | constructor() { 11 | super(); 12 | this.ArticleTableController = new ArticleTableController(); 13 | } 14 | 15 | render() { 16 | return ( 17 | 20 | 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/views/article/ArticleTableController.ts: -------------------------------------------------------------------------------- 1 | import BaseTableController from '@/components/base/table/BaseTableController'; 2 | import ArticleDTO from '@/models/dto/ArticleDTO'; 3 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 4 | 5 | export default class ArticleTableController extends BaseTableController{ 6 | constructor() { 7 | super({ 8 | urlReqeustPath: "/article" 9 | }); 10 | this.columns = [ 11 | { 12 | title: "编号", 13 | dataIndex: "id", 14 | key: "id", 15 | }, 16 | { 17 | title: "文章标题", 18 | dataIndex: "title", 19 | key: "title", 20 | }, 21 | { 22 | title: "创建时间", 23 | dataIndex: "createtime", 24 | key: "createtime", 25 | }, 26 | ]; 27 | this.formRouterPath = RouterPathEnum.ArticleForm 28 | } 29 | } -------------------------------------------------------------------------------- /src/views/common/Page404.tsx: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Component from 'vue-class-component' 3 | @Component 4 | export default class Page404 extends Vue { 5 | constructor() { 6 | super(); 7 | } 8 | render() { 9 | return
10 | 404 11 |
12 | } 13 | } -------------------------------------------------------------------------------- /src/views/layout/ILayoutController.ts: -------------------------------------------------------------------------------- 1 | import { RouterPathEnum } from './../../router/RouterPathEnum'; 2 | export default interface ILayoutcontroller { 3 | handleMenuClick(routerPathEnum: RouterPathEnum): any; 4 | } -------------------------------------------------------------------------------- /src/views/layout/Layout.module.scss: -------------------------------------------------------------------------------- 1 | 2 | .flex{ 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | } 7 | 8 | .main { 9 | height: 100vh; 10 | width: 100vw; 11 | display: flex; 12 | justify-content: center; 13 | align-items: stretch; 14 | .left{ 15 | background-color: #001529; 16 | } 17 | .right{ 18 | flex:1; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: stretch; 22 | .top{ 23 | width: 100%; 24 | height: 64px; 25 | background-color:white; 26 | } 27 | .border{ 28 | flex:1; 29 | padding: 24px; 30 | background-color: #f0f2f5; 31 | .content{ 32 | height: 100%; 33 | width: 100%; 34 | background-color: white; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/views/layout/Layout.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | //@ts-ignore 5 | import style from "./Layout.module.scss"; 6 | import { RouterPathEnum } from "@/router/RouterPathEnum"; 7 | import ILayoutcontroller from "./ILayoutController"; 8 | import LayoutController from "./LayoutController"; 9 | @Observer 10 | @Component 11 | export default class Layout extends Vue { 12 | layoutController: ILayoutcontroller; 13 | constructor() { 14 | super(); 15 | this.layoutController = new LayoutController(); 16 | } 17 | render() { 18 | return ( 19 |
20 |
21 | 22 | 45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 |
54 | ); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/views/layout/LayoutController.ts: -------------------------------------------------------------------------------- 1 | import { RouterEnum } from '@/infrastructure/ioccontainer/enum/RouterEnum'; 2 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 3 | import IRouter from '@/router/IRouter'; 4 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 5 | import ILayoutcontroller from './ILayoutController'; 6 | 7 | export default class LayoutController implements ILayoutcontroller { 8 | router: IRouter; 9 | constructor() { 10 | this.router = IOCContainer.getInstance(RouterEnum.VueRouter); 11 | } 12 | handleMenuClick(routerPathEnum: RouterPathEnum) { 13 | this.router.push(routerPathEnum); 14 | } 15 | } -------------------------------------------------------------------------------- /src/views/login/ILoginController.ts: -------------------------------------------------------------------------------- 1 | import LoginViewModel from '@/models/viewmodel/LoginViewModel'; 2 | export default interface ILoginController { 3 | loginViewModel:LoginViewModel; 4 | login(): void; 5 | } -------------------------------------------------------------------------------- /src/views/login/Login.module.scss: -------------------------------------------------------------------------------- 1 | $iconDelay: 0s; 2 | $logoDelay: 0s; 3 | $loginDelay: 0s; 4 | $primaryColor: #1d8f76; 5 | 6 | .flex { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | .globallabel { 12 | font-size: 16px; 13 | font-family: "Courier New", Courier, monospace; 14 | } 15 | .main { 16 | &::before { 17 | content: ""; 18 | background-color: $primaryColor; 19 | position: absolute; 20 | height: 100vh; 21 | width: 100vw; 22 | z-index: -2; 23 | } 24 | &::after { 25 | content: ""; 26 | z-index: -1; 27 | position: absolute; 28 | // background-image: url(../../assets/logo/iconlogo.jpg); 29 | background-repeat: no-repeat; 30 | background-position: center; 31 | opacity: 1; 32 | animation: main-before-animation 1s $iconDelay linear forwards; 33 | height: 500px; 34 | width: 500px; 35 | @keyframes main-before-animation { 36 | from { 37 | opacity: 1; 38 | } 39 | to { 40 | transform: scale(0.5); 41 | opacity: 0; 42 | } 43 | } 44 | } 45 | @extend .flex; 46 | flex-direction: column; 47 | height: 100vh; 48 | width: 100vw; 49 | .logo { 50 | // background-image: url(../../assets/logo/logo.jpg); 51 | height: 50px; 52 | width: 500px; 53 | background-position: center; 54 | background-repeat: no-repeat; 55 | position: absolute; 56 | margin-top: -330px; 57 | opacity: 0; 58 | @keyframes logo-animation { 59 | from { 60 | opacity: 0; 61 | } 62 | to { 63 | opacity: 1; 64 | } 65 | } 66 | animation: logo-animation 1s $logoDelay linear forwards; 67 | } 68 | .loginMain { 69 | height: 250px; 70 | width: 330px; 71 | @extend .flex; 72 | position: relative; 73 | overflow: hidden; 74 | opacity: 0; 75 | @keyframes loginMain-animation { 76 | from { 77 | opacity: 0; 78 | } 79 | to { 80 | opacity: 1; 81 | } 82 | } 83 | animation: loginMain-animation 1s $loginDelay linear forwards; 84 | .loginBorder { 85 | height: 420px; 86 | width: 420px; 87 | position: absolute; 88 | @keyframes loginborder-animation { 89 | from { 90 | transform: rotate(0deg); 91 | } 92 | to { 93 | transform: rotate(360deg); 94 | } 95 | } 96 | 97 | background-image: linear-gradient( 98 | to left top, 99 | red, 100 | green, 101 | blue, 102 | purple, 103 | orange 104 | ); 105 | animation: loginborder-animation 2s linear infinite; 106 | } 107 | 108 | .login { 109 | background-color: white; 110 | z-index: 99; 111 | height: 240px; 112 | width: 320px; 113 | display: flex; 114 | flex-direction: column; 115 | justify-content: space-around; 116 | padding: 20px; 117 | .inputItem { 118 | @extend.globallabel; 119 | position: relative; 120 | .label { 121 | position: absolute; 122 | color: rgba(0, 0, 0, 0.65); 123 | z-index: 98; 124 | } 125 | input { 126 | background-color: transparent; 127 | z-index: 99; 128 | position: absolute; 129 | width: 100%; 130 | border: none; 131 | border-bottom: 2px #d9d9d9 solid; 132 | &:focus { 133 | outline: none; 134 | border: none; 135 | border-bottom: 2px $primaryColor solid; 136 | } 137 | &:valid ~ .label { 138 | @keyframes input-focus-animation { 139 | from { 140 | } 141 | to { 142 | transform: scale(0.9) translateY(-25px); 143 | } 144 | } 145 | animation: input-focus-animation 0.5s ease-out forwards; 146 | } 147 | &:focus ~ .label{ 148 | @keyframes input-focus-animation { 149 | from { 150 | } 151 | to { 152 | transform: scale(0.9) translateY(-25px); 153 | } 154 | } 155 | animation: input-focus-animation 0.5s ease-out forwards; 156 | } 157 | } 158 | } 159 | .action { 160 | @extend .flex; 161 | justify-content: space-around; 162 | } 163 | } 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /src/views/login/Login.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from 'mobx-vue'; 2 | import Vue from 'vue' 3 | import Component from 'vue-class-component' 4 | import LoginController from './LoginController'; 5 | //@ts-ignore 6 | import style from './Login.module.scss'; 7 | import ILoginController from './ILoginController'; 8 | import MyLoading from '@/components/myloading/MyLoading'; 9 | @Observer 10 | @Component 11 | export default class Lgoin extends Vue { 12 | loginController: ILoginController 13 | constructor() { 14 | super(); 15 | this.loginController = new LoginController(); 16 | } 17 | render() { 18 | return
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | this.loginController.loginViewModel.username = e.target.value} required="" /> 27 |
28 | 用户名: 29 |
30 |
31 |
32 | this.loginController.loginViewModel.password = e.target.value} required="" /> 33 |
34 | 密  码: 35 |
36 |
37 |
38 | 39 | this.loginController.login()}>登录 40 | 取消 41 | 42 |
43 |
44 |
45 |
46 | } 47 | } -------------------------------------------------------------------------------- /src/views/login/LoginController.ts: -------------------------------------------------------------------------------- 1 | import { RouterPathEnum } from './../../router/RouterPathEnum'; 2 | import { RouterEnum } from './../../infrastructure/ioccontainer/enum/RouterEnum'; 3 | import IRouter from '@/router/IRouter'; 4 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 5 | import IMyAuthorize from '@/infrastructure/utils/authorize/IMyAuthorize'; 6 | import { ServiceEnum } from '@/infrastructure/ioccontainer/enum/ServiceEnum'; 7 | import IUserService from '@/interface/services/IUserService'; 8 | import UserDTO from '@/models/dto/UserDTO'; 9 | import LoginViewModel from '@/models/viewmodel/LoginViewModel'; 10 | import { UtilsEnum } from '@/infrastructure/ioccontainer/enum/UtilsEnum'; 11 | import UserResultDTO from '@/models/dto/UserResultDTO'; 12 | import { UIEnum } from '@/infrastructure/ioccontainer/enum/UIEnum'; 13 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 14 | export default class LoginController { 15 | loginViewModel: LoginViewModel; 16 | userService: IUserService; 17 | myAuthorize: IMyAuthorize; 18 | router: IRouter; 19 | myMessage: IMyMessage; 20 | constructor() { 21 | this.loginViewModel = new LoginViewModel(); 22 | this.userService = IOCContainer.getInstance(ServiceEnum.IUserService); 23 | this.myAuthorize = IOCContainer.getInstance(UtilsEnum.Authorize); 24 | this.router = IOCContainer.getInstance(RouterEnum.VueRouter); 25 | this.myMessage = IOCContainer.getInstance(UIEnum.IMessage); 26 | } 27 | async login() { 28 | const userDto: UserDTO = new UserDTO({ username: this.loginViewModel.username, password: this.loginViewModel.password }); 29 | if (await userDto.validate()) { 30 | let user: UserResultDTO | boolean = await this.userService.login(userDto.toPureDTO()); 31 | if (user) { 32 | let u = user as UserResultDTO; 33 | this.myAuthorize.setToken(u.token) 34 | this.router.push(RouterPathEnum.Index); 35 | } 36 | } 37 | else { 38 | userDto.getReturnDialog(); 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /src/views/menu/MenuForm.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | import BaseForm from '@/components/base/form/BaseForm'; 5 | import MenuFormController from './MenuFormController'; 6 | @Observer 7 | @Component 8 | export default class MenuForm extends Vue { 9 | MenuFormController:MenuFormController; 10 | constructor() { 11 | super(); 12 | this.MenuFormController = new MenuFormController(); 13 | } 14 | 15 | render() { 16 | return ( 17 | 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/views/menu/MenuFormController.ts: -------------------------------------------------------------------------------- 1 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 2 | import BaseFormController from '@/components/base/form/BaseFormController'; 3 | import MenuDTO from '@/models/dto/MenuDTO'; 4 | import MenuViewModel from '@/models/viewmodel/MenuViewModel'; 5 | import MenuService from '@/services/MenuService'; 6 | import IMenuService from '@/interface/services/IMenuService'; 7 | 8 | export default class MenuFormController extends BaseFormController>{ 9 | constructor() { 10 | super({ 11 | urlReqeustPath: "/Menu", 12 | listRouterPath: RouterPathEnum.Menu, 13 | v: MenuViewModel, 14 | t: MenuDTO, 15 | r: MenuDTO, 16 | expandService: new MenuService("/Menu"), 17 | }); 18 | } 19 | 20 | async initialViewmodel() { 21 | let v = new MenuViewModel; 22 | v.pidInitialData = await this.expandService.getInitialMenuData(); 23 | return v; 24 | } 25 | 26 | } -------------------------------------------------------------------------------- /src/views/menu/MenuTable.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | import BaseTable from '@/components/base/table/BaseTable'; 5 | import MenuTableController from './MenuTableController'; 6 | @Observer 7 | @Component 8 | export default class MenuTable extends Vue { 9 | MenuTableController: MenuTableController; 10 | constructor() { 11 | super(); 12 | this.MenuTableController = new MenuTableController(); 13 | } 14 | 15 | render() { 16 | return ( 17 | 20 | 21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/views/menu/MenuTableController.tsx: -------------------------------------------------------------------------------- 1 | import BaseTableController from '@/components/base/table/BaseTableController'; 2 | import MenuDTO from '@/models/dto/MenuDTO'; 3 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 4 | 5 | export default class MenuTableController extends BaseTableController{ 6 | constructor() { 7 | super({ 8 | urlReqeustPath: "/Menu" 9 | }); 10 | this.columns = [ 11 | { 12 | title: "编号", 13 | dataIndex: "id", 14 | key: "id", 15 | }, 16 | { 17 | title: "栏目名称", 18 | dataIndex: "name", 19 | key: "name", 20 | }, 21 | { 22 | title: "创建时间", 23 | dataIndex: "createtime", 24 | key: "createtime", 25 | }, 26 | ]; 27 | this.formRouterPath = RouterPathEnum.MenuForm 28 | } 29 | } -------------------------------------------------------------------------------- /src/views/test/TestForm.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | import TestTableController from './TestTableController'; 5 | import BaseForm from '@/components/base/form/BaseForm'; 6 | import TestFormController from './TestFormController'; 7 | @Observer 8 | @Component 9 | export default class TestForm extends Vue { 10 | testFormController:TestFormController; 11 | constructor() { 12 | super(); 13 | this.testFormController = new TestFormController(); 14 | } 15 | 16 | render() { 17 | return ( 18 | 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/views/test/TestFormController.ts: -------------------------------------------------------------------------------- 1 | import IExpandService from '@/interface/services/IExpandService'; 2 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 3 | import BaseFormController from '@/components/base/form/BaseFormController'; 4 | import TestDTO from '@/models/dto/TestDTO'; 5 | import TestViewModel from '@/models/viewmodel/TestViewModel'; 6 | 7 | export default class TestFormController extends BaseFormController>{ 8 | constructor() { 9 | super({ 10 | urlReqeustPath: "/test", 11 | listRouterPath: RouterPathEnum.Test, 12 | v: TestViewModel, 13 | t: TestDTO, 14 | r: TestDTO 15 | }); 16 | } 17 | } -------------------------------------------------------------------------------- /src/views/test/TestTable.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | import BaseTable from '@/components/base/table/BaseTable'; 5 | import TestTableController from './TestTableController'; 6 | @Observer 7 | @Component 8 | export default class TestTable extends Vue { 9 | testTableController: TestTableController; 10 | constructor() { 11 | super(); 12 | this.testTableController = new TestTableController(); 13 | } 14 | 15 | render() { 16 | return ( 17 | 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/views/test/TestTableController.ts: -------------------------------------------------------------------------------- 1 | import BaseTableController from '@/components/base/table/BaseTableController'; 2 | import TestDTO from '@/models/dto/TestDTO'; 3 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 4 | 5 | export default class TestTableController extends BaseTableController{ 6 | constructor() { 7 | super({ 8 | urlReqeustPath: "/test" 9 | }); 10 | this.columns = [ 11 | { 12 | title: "编号", 13 | dataIndex: "id", 14 | key: "id", 15 | }, 16 | { 17 | title: "姓名", 18 | dataIndex: "name", 19 | key: "name", 20 | }, 21 | { 22 | title: "年龄", 23 | dataIndex: "age", 24 | key: "age", 25 | }, 26 | { 27 | title: "性别", 28 | dataIndex: "sex", 29 | key: "sex", 30 | },]; 31 | this.formRouterPath = RouterPathEnum.TestForm 32 | } 33 | } -------------------------------------------------------------------------------- /src/views/todo/ITodoController.ts: -------------------------------------------------------------------------------- 1 | import TableTodoViewModel from '@/models/viewmodel/TableTodoViewModel'; 2 | 3 | export default interface ITodoController { 4 | todoList:TableTodoViewModel[]; 5 | gotoAddTodoPage(): void; 6 | initialTableData():any; 7 | deleteTodo(id:string):any; 8 | searchTodo(id: string):any; 9 | } -------------------------------------------------------------------------------- /src/views/todo/ITodoFormController.ts: -------------------------------------------------------------------------------- 1 | import TodoViewModel from '@/models/viewmodel/TodoViewModel'; 2 | 3 | export default interface ITodoFormController { 4 | todo: TodoViewModel; 5 | addAndUpdateTodo(): void; 6 | initialData(): void; 7 | selectTodoById(id:string): void; 8 | deleteTodoById():void; 9 | } -------------------------------------------------------------------------------- /src/views/todo/Todo.module.scss: -------------------------------------------------------------------------------- 1 | .main{ 2 | 3 | } -------------------------------------------------------------------------------- /src/views/todo/Todo.tsx: -------------------------------------------------------------------------------- 1 | import MyLoading from "@/components/myloading/MyLoading"; 2 | import TodoViewModel from "@/models/viewmodel/TodoViewModel"; 3 | import { Observer } from "mobx-vue"; 4 | import Vue from "vue"; 5 | import Component from "vue-class-component"; 6 | import ITodoController from "./ITodoController"; 7 | //@ts-ignore 8 | import TodoController from "./TodoController"; 9 | @Observer 10 | @Component 11 | export default class Todo extends Vue { 12 | todoController: ITodoController; 13 | constructor() { 14 | super(); 15 | this.todoController = new TodoController(); 16 | } 17 | 18 | render() { 19 | return ( 20 | 21 | this.todoController.gotoAddTodoPage()} 25 | > 26 | 新增 27 | 28 | 29 | { 55 | console.log(todo.id); 56 | return ( 57 |
58 | { 60 | this.todoController.searchTodo(todo.id); 61 | }} 62 | > 63 | 查看 64 | 65 | { 68 | this.todoController.deleteTodo(todo.id); 69 | }} 70 | > 71 | 删除 72 | 73 |
74 | ); 75 | }, 76 | }, 77 | ]} 78 | data-source={this.todoController.todoList} 79 | > 80 | 81 | 82 | ); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/views/todo/TodoController.ts: -------------------------------------------------------------------------------- 1 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 2 | import { RouterEnum } from './../../infrastructure/ioccontainer/enum/RouterEnum'; 3 | import IRouter from '@/router/IRouter'; 4 | import ITodoService from '@/interface/services/ITodoService'; 5 | import ITodoController from './ITodoController'; 6 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 7 | import { ServiceEnum } from '@/infrastructure/ioccontainer/enum/ServiceEnum'; 8 | import TableTodoViewModel from '@/models/viewmodel/TableTodoViewModel'; 9 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 10 | import { UIEnum } from '@/infrastructure/ioccontainer/enum/UIEnum'; 11 | export default class TodoController implements ITodoController { 12 | router: IRouter 13 | todoService: ITodoService 14 | todoList: TableTodoViewModel[]; 15 | myMessage: IMyMessage; 16 | constructor() { 17 | this.todoService = IOCContainer.getInstance(ServiceEnum.ITodoService); 18 | this.router = IOCContainer.getInstance(RouterEnum.VueRouter) 19 | this.myMessage = IOCContainer.getInstance(UIEnum.IMessage); 20 | this.todoList = []; 21 | this.initialTableData(); 22 | } 23 | async initialTableData() { 24 | this.todoList = await this.todoService.getTodoList(); 25 | } 26 | 27 | async deleteTodo(id: string) { 28 | this.myMessage.showConfirm({ 29 | content: "是否确定删除", onOk: async () => { 30 | await this.todoService.delteTodo(id); 31 | this.initialTableData(); 32 | }, onCancel: () => { } 33 | }) 34 | 35 | } 36 | 37 | async searchTodo(id: string) { 38 | this.router.push({ path: RouterPathEnum.TodoForm, query: { id } }) 39 | } 40 | 41 | gotoAddTodoPage() { 42 | this.router.push(RouterPathEnum.TodoForm); 43 | } 44 | } -------------------------------------------------------------------------------- /src/views/todo/TodoForm.module.scss: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: start; 5 | align-content: center; 6 | height: 100%; 7 | width: 100%; 8 | padding: 24px; 9 | .form { 10 | height: 400px; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: space-evenly; 14 | .inputError { 15 | color: #f5222d; 16 | } 17 | } 18 | .action { 19 | display: flex; 20 | justify-content: center; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/views/todo/TodoForm.tsx: -------------------------------------------------------------------------------- 1 | import MyLoading from "@/components/myloading/MyLoading"; 2 | import { Observer } from "mobx-vue"; 3 | import Vue from "vue"; 4 | import Component from "vue-class-component"; 5 | import ITodoFormController from "./ITodoFormController"; 6 | //@ts-ignore 7 | import style from "./TodoForm.module.scss"; 8 | import TodoFormController from "./TodoFormController"; 9 | @Observer 10 | @Component 11 | export default class TodoForm extends Vue { 12 | todoController: ITodoFormController; 13 | constructor() { 14 | super(); 15 | this.todoController = new TodoFormController(); 16 | } 17 | render() { 18 | return ( 19 | 20 |
21 |
22 | 27 |
28 | 36 |
37 | {this.todoController.todo.itemErrorMessage} 38 |
39 | 47 |
48 | {this.todoController.todo.authorErrorMessage} 49 |
50 | 58 |
59 | {this.todoController.todo.datetimeErrorMessage} 60 |
61 |
62 |
63 | this.todoController.addAndUpdateTodo()} 66 | > 67 | 保存 68 | 69 | this.todoController.deleteTodoById()} 72 | > 73 | 删除 74 | 75 |
76 |
77 | 78 | ); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/views/todo/TodoFormController.ts: -------------------------------------------------------------------------------- 1 | import { RouterEnum } from '@/infrastructure/ioccontainer/enum/RouterEnum'; 2 | import IRouter from '@/router/IRouter'; 3 | import IMyMessage from '@/infrastructure/utils/message/IMyMessage'; 4 | import { ServiceEnum } from '@/infrastructure/ioccontainer/enum/ServiceEnum'; 5 | import IOCContainer from '@/infrastructure/ioccontainer/IOCContainer'; 6 | import ITodoService from '@/interface/services/ITodoService'; 7 | import TodoDTO from '@/models/dto/TodoDTO'; 8 | import TodoViewModel from '@/models/viewmodel/TodoViewModel'; 9 | import ITodoFormController from './ITodoFormController'; 10 | import { UIEnum } from '@/infrastructure/ioccontainer/enum/UIEnum'; 11 | import { ActionMessageEnum } from '@/enum/feedback/ActionMessageEnum'; 12 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 13 | import { Dictionary } from 'vue-router/types/router'; 14 | import { isNotEmpty } from 'class-validator'; 15 | export default class TodoFormController implements ITodoFormController { 16 | todo: TodoViewModel; 17 | todoService: ITodoService; 18 | myMessage: IMyMessage; 19 | router: IRouter; 20 | constructor() { 21 | this.todoService = IOCContainer.getInstance(ServiceEnum.ITodoService); 22 | this.myMessage = IOCContainer.getInstance(UIEnum.IMessage); 23 | this.router = IOCContainer.getInstance(RouterEnum.VueRouter); 24 | this.todo = new TodoViewModel(); 25 | this.initialData(); 26 | } 27 | async initialData() { 28 | let routerDic = this.router.getQueryParam() as Dictionary; 29 | let id: string = routerDic["id"]; 30 | if (id) { 31 | this.todo = new TodoViewModel(await this.todoService.getTodoById(id)) 32 | } 33 | else { 34 | this.todo = new TodoViewModel(); 35 | } 36 | } 37 | async selectTodoById(): Promise { 38 | if (this.todo.id) { 39 | this.todoService.getTodoById(this.todo.id); 40 | } 41 | } 42 | 43 | async deleteTodoById() { 44 | if (isNotEmpty(this.todo.id)) { 45 | this.myMessage.showConfirm({ 46 | content: "是否确定删除", onOk: async () => { 47 | await this.todoService.delteTodo(this.todo.id); 48 | this.router.push(RouterPathEnum.Todo) 49 | }, onCancel: () => { } 50 | }) 51 | } 52 | } 53 | 54 | async addAndUpdateTodo(): Promise { 55 | if (isNotEmpty(this.todo.id)) { 56 | this.UpdateTodo(); 57 | } 58 | else { 59 | this.addTodo(); 60 | } 61 | } 62 | private async UpdateTodo() { 63 | let todoDTO: TodoDTO = new TodoDTO({ 64 | id: this.todo.id, 65 | item: this.todo.item, 66 | author: this.todo.author, 67 | datetime: this.todo.datetime, 68 | }) 69 | if (await todoDTO.validate({ viewModel: this.todo })) { 70 | let data = await this.todoService.updateTodo(todoDTO.toPureDTO()); 71 | if (data) { 72 | this.myMessage.showDefualtMessage({ 73 | messsage: "代办事项", actionMesssageEnum: ActionMessageEnum.Update, onOk: () => { 74 | this.router.push(RouterPathEnum.Todo); 75 | } 76 | }) 77 | } 78 | } 79 | else { 80 | todoDTO.mergeErrorToViewModel(this.todo); 81 | } 82 | } 83 | 84 | private async addTodo() { 85 | let todoDTO: TodoDTO = new TodoDTO({ 86 | item: this.todo.item, 87 | author: this.todo.author, 88 | datetime: this.todo.datetime, 89 | }) 90 | if (await todoDTO.validate({ viewModel: this.todo })) { 91 | let data = await this.todoService.addTodo(todoDTO.toPureDTO()); 92 | if (data) { 93 | this.myMessage.showDefualtMessage({ 94 | messsage: "代办事项", actionMesssageEnum: ActionMessageEnum.Add, onOk: () => { 95 | this.router.push(RouterPathEnum.Todo); 96 | } 97 | }) 98 | } 99 | } 100 | else { 101 | todoDTO.mergeErrorToViewModel(this.todo); 102 | } 103 | } 104 | } -------------------------------------------------------------------------------- /src/views/user/MyUserForm.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | import BaseForm from '@/components/base/form/BaseForm'; 5 | import MyUserFormController from './MyUserFormController'; 6 | @Observer 7 | @Component 8 | export default class MyUserForm extends Vue { 9 | MyUserFormController:MyUserFormController; 10 | constructor() { 11 | super(); 12 | this.MyUserFormController = new MyUserFormController(); 13 | } 14 | 15 | render() { 16 | return ( 17 | 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/views/user/MyUserFormController.ts: -------------------------------------------------------------------------------- 1 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 2 | import BaseFormController from '@/components/base/form/BaseFormController'; 3 | import MyUserDTO from '@/models/dto/MyUserDTO'; 4 | import MyUserViewModel from '@/models/viewmodel/MyUserViewModel'; 5 | import MyUserService from '@/services/MyUserService'; 6 | import IMyUserService from '@/interface/services/IMyUserService'; 7 | 8 | export default class MyUserFormController extends BaseFormController>{ 9 | constructor() { 10 | super({ 11 | urlReqeustPath: "/MyUser", 12 | listRouterPath: RouterPathEnum.MyUser, 13 | v: MyUserViewModel, 14 | t: MyUserDTO, 15 | r: MyUserDTO, 16 | }); 17 | } 18 | 19 | } -------------------------------------------------------------------------------- /src/views/user/MyUserTable.tsx: -------------------------------------------------------------------------------- 1 | import { Observer } from "mobx-vue"; 2 | import Vue from "vue"; 3 | import Component from "vue-class-component"; 4 | import BaseTable from '@/components/base/table/BaseTable'; 5 | import MenuTableController from './MyUserTableController'; 6 | @Observer 7 | @Component 8 | export default class MenuTable extends Vue { 9 | MenuTableController: MenuTableController; 10 | constructor() { 11 | super(); 12 | this.MenuTableController = new MenuTableController(); 13 | } 14 | 15 | render() { 16 | return ( 17 | 20 | 21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/views/user/MyUserTableController.tsx: -------------------------------------------------------------------------------- 1 | import BaseTableController from '@/components/base/table/BaseTableController'; 2 | import MenuDTO from '@/models/dto/MenuDTO'; 3 | import { RouterPathEnum } from '@/router/RouterPathEnum'; 4 | 5 | export default class MenuTableController extends BaseTableController{ 6 | constructor() { 7 | super({ 8 | urlReqeustPath: "/Menu" 9 | }); 10 | this.columns = [ 11 | { 12 | title: "编号", 13 | dataIndex: "id", 14 | key: "id", 15 | }, 16 | { 17 | title: "栏目名称", 18 | dataIndex: "name", 19 | key: "name", 20 | }, 21 | { 22 | title: "创建时间", 23 | dataIndex: "createtime", 24 | key: "createtime", 25 | }, 26 | ]; 27 | this.formRouterPath = RouterPathEnum.MenuForm 28 | } 29 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "sourceMap": true, 14 | "suppressImplicitAnyIndexErrors":true, 15 | "baseUrl": ".", 16 | "types": [ 17 | "webpack-env" 18 | ], 19 | "paths": { 20 | "@/*": [ 21 | "src/*" 22 | ] 23 | }, 24 | "lib": [ 25 | "esnext", 26 | "dom", 27 | "dom.iterable", 28 | "scripthost" 29 | ] 30 | }, 31 | "include": [ 32 | "src/**/*.ts", 33 | "src/**/*.tsx", 34 | "src/**/*.vue", 35 | "tests/**/*.ts", 36 | "tests/**/*.tsx" 37 | ], 38 | "exclude": [ 39 | "node_modules" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false, 3 | css: { 4 | loaderOptions: { 5 | less: { 6 | lessOptions: { 7 | modifyVars: { 8 | 'primary-color': '#1d8f76', 9 | 'link-color': '#1d8f76', 10 | 'border-radius-base': '2px', 11 | }, 12 | javascriptEnabled: true, 13 | }, 14 | }, 15 | }, 16 | }, 17 | } --------------------------------------------------------------------------------