标签：vue NetCore Article list 新页面 state import article store

配置路由：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>

edit.vue
...

标签：vue,NetCore,Article,list,新页面,state,import,article,store
来源： https://www.cnblogs.com/xsj1989/p/14411681.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。