abp.NetCore使用vue.js前端配置菜单路由、添加新页面
作者:互联网
配置路由:router/router.ts,在appRouters对象中copy修改就行了,注意路由和子路由的name不能重复。
路由配置中permission是对应的后台权限名称字符串,meta》title对应的是多语言配置key:Framework.Core》Localization》Framework.xml
添加新页面:
1、添加store实体:store/entities
import Entity from './entity' export default class Article extends Entity<number>{ isActive:boolean; tenantId:number; title:string; author:number; contents:string; articleType:number; coverImg:string; }
2、添加store/modules,其中引用刚刚添加的实体类型
import {Store,Module,ActionContext} from 'vuex' import ListModule from './list-module' import ListState from './list-state' import Article from '../entities/article' import Role from '../entities/role' import Ajax from '../../lib/ajax' import PageResult from '@/store/entities/page-result'; import ListMutations from './list-mutations' interface ArticleState extends ListState<Article>{ editArticle:Article } class ArticleMutations extends ListMutations<Article>{ } class ArticleModule extends ListModule<ArticleState,any,Article>{ state={ totalCount:0, currentPage:1, pageSize:10, list: new Array<Article>(), loading:false, editArticle:new Article() } actions={ async getAll(context:ActionContext<ArticleState,any>,payload:any){ context.state.loading=true; let reponse=await Ajax.post('/api/services/app/Article/GetArticles',{params:payload.data}); context.state.loading=false; let page=reponse.data.result as PageResult<Article>; context.state.totalCount=page.totalCount; context.state.list=page.items; }, async create(context:ActionContext<ArticleState,any>,payload:any){ await Ajax.post('/api/services/app/Article/Create',payload.data); }, async update(context:ActionContext<ArticleState,any>,payload:any){ await Ajax.put('/api/services/app/Article/Update',payload.data); }, async delete(context:ActionContext<ArticleState,any>,payload:any){ await Ajax.delete('/api/services/app/Article/Delete?Id='+payload.data.id); }, async get(context:ActionContext<ArticleState,any>,payload:any){ let reponse=await Ajax.get('/api/services/app/Article/Get?Id='+payload.id); return reponse.data.result as Article; }, }; mutations={ setCurrentPage(state:ArticleState,page:number){ state.currentPage=page; }, setPageSize(state:ArticleState,pagesize:number){ state.pageSize=pagesize; }, edit(state:ArticleState,article:Article){ state.editArticle=article; } } } const articleModule=new ArticleModule(); export default articleModule;
可以看到他都是用store来存储数据的。
3、添加页面views/article/index.vue
<template> <component :is="currentRouter" :operation='currentOpt' :mId="currentId" /> </template> <script> // 列表页面 import list from '@/views/article/components/list' // 编辑页面 import edit from '@/views/article/components/edit' export default { name: 'articles', components: { list, edit }, data() { return { // 当前加载的组件,默认为 list 组件(显示列表页面) currentRouter: "list", currentOpt: undefined, currentId: undefined } }, created() { } } </script>
4、添加组件views/article/components/list.vue和edit.vue
<template> <div> <Card dis-hover> <div class="page-body"> <Form ref="queryForm" :label-width="80" label-position="left" inline> <Row :gutter="16"> <Col span="6"> <FormItem :label="L('Keyword') + ':'" style="width: 100%"> <Input v-model="pagerequest.keyword" :placeholder="L('ArticleTitle')" /> </FormItem> </Col> </Row> <Row> <Button @click="create" icon="android-add" type="primary" size="large" >{{ L("Add") }}</Button > <Button icon="ios-search" type="primary" size="large" @click="getpage" class="toolbar-btn" >{{ L("Find") }}</Button > </Row> </Form> <div class="margin-top-10"> <Table :loading="loading" :columns="columns" :no-data-text="L('NoDatas')" border :data="list" > </Table> <Page show-sizer class-name="fengpage" :total="totalCount" class="margin-top-10" @on-change="pageChange" @on-page-size-change="pagesizeChange" :page-size="pageSize" :current="currentPage" ></Page> </div> </div> </Card> </div> </template> <script lang='ts'> import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator"; import Util from "@/lib/util"; import AbpBase from "@/lib/abpbase"; import PageRequest from "@/store/entities/page-request"; class PageModelRequest extends PageRequest { keyword: string; isActive: boolean = null; //nullable } @Component({ // components: { CreateUser, EditUser }, }) export default class AbpArticles extends AbpBase { // createModalShow: boolean = false; // editModalShow: boolean = false; pagerequest: PageModelRequest = new PageModelRequest(); // creationTime: Date[] = []; edit() { // this.editModalShow=true; } get list() { return this.$store.state.article.list; } get loading() { return this.$store.state.article.loading; } create() { this.$parent.currentOpt = "create"; this.$parent.currentRouter = "edit"; } isActiveChange(val: string) { console.log(val); if (val === "Actived") { this.pagerequest.isActive = true; } else if (val === "NoActive") { this.pagerequest.isActive = false; } else { this.pagerequest.isActive = null; } } pageChange(page: number) { this.$store.commit("article/setCurrentPage", page); this.getpage(); } pagesizeChange(pagesize: number) { this.$store.commit("article/setPageSize", pagesize); this.getpage(); } async getpage() { this.pagerequest.maxResultCount = this.pageSize; this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize; //filters // if (this.creationTime.length > 0) { // this.pagerequest.from = this.creationTime[0]; // } // if (this.creationTime.length > 1) { // this.pagerequest.to = this.creationTime[1]; // } await this.$store.dispatch({ type: "article/getAll", data: this.pagerequest, }); } get pageSize() { return this.$store.state.article.pageSize; } get totalCount() { return this.$store.state.article.totalCount; } get currentPage() { return this.$store.state.article.currentPage; } columns = [ { title: this.L("ArticleTitle"), key: "title", }, { title: this.L("ArticleAuthor"), key: "author", }, { title: this.L("IsActive"), render: (h: any, params: any) => { return h("span", params.row.isActive ? this.L("Yes") : this.L("No")); }, }, { title: this.L("Actions"), key: "Actions", width: 150, render: (h: any, params: any) => { return h("div", [ h( "Button", { props: { type: "primary", size: "small", }, style: { marginRight: "5px", }, on: { click: () => { this.$store.commit("article/edit", params.row); this.$parent.currentOpt = "edit"; this.$parent.currentRouter = "edit"; this.$parent.currentId = params.row.id; }, }, }, this.L("Edit") ), h( "Button", { props: { type: "error", size: "small", }, on: { click: async () => { this.$Modal.confirm({ title: this.L("Tips"), content: this.L("DeleteUserConfirm"), okText: this.L("Yes"), cancelText: this.L("No"), onOk: async () => { await this.$store.dispatch({ type: "article/delete", data: params.row, }); await this.getpage(); }, }); }, }, }, this.L("Delete") ), ]); }, }, ]; async created() { this.getpage(); } } </script>View Code
edit.vue
...
标签:vue,NetCore,Article,list,新页面,state,import,article,store 来源: https://www.cnblogs.com/xsj1989/p/14411681.html