Initial commit

9439301b · caobo · 9439301b · 9439301b · 9439301b · 9439301b
Commit 9439301b authored Sep 12, 2018 by caobo
36 changed files
--- a/.browserslistrc
+++ b/.browserslistrc
+> 1%
+last 2 versions
+not ie <= 8
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
--- a/.postcssrc.js
+++ b/.postcssrc.js
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
--- a/README.md
+++ b/README.md
+# wk_add_wehcat
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Run your unit tests
+```
+npm run test:unit
+```
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "wk_add_wehcat",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "element-ui": "^2.4.5",
+    "vue": "^2.5.17",
+    "vue-class-component": "^6.0.0",
+    "vue-property-decorator": "^7.0.0",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1",
+    "vuex-class": "^0.3.1"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.1.0",
+    "@types/mocha": "^5.2.4",
+    "@vue/cli-plugin-babel": "^3.0.0",
+    "@vue/cli-plugin-typescript": "^3.0.0",
+    "@vue/cli-plugin-unit-mocha": "^3.0.0",
+    "@vue/cli-service": "^3.0.0",
+    "@vue/test-utils": "^1.0.0-beta.20",
+    "chai": "^4.1.2",
+    "node-sass": "^4.9.2",
+    "sass-loader": "^7.0.3",
+    "typescript": "^3.0.0",
+    "vue-cli-plugin-element": "^1.0.0",
+    "vue-template-compiler": "^2.5.17"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>wk_add_wehcat</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but wk_add_wehcat doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="scss">
+html,body,#app {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>
--- a/src/api/filterNumber.ts
+++ b/src/api/filterNumber.ts
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+const getFilterList = (size: number, page?: number) => {
+  return axios.get(`/api/permission?page=${page}&size=${size}`);
+};
+
+const createFilterList = (
+  form: {
+    name: string,
+    desc: string,
+    code: string,
+  }) => {
+  return axios.post(`api/permission`, form);
+};
+
+export {
+  getFilterList,
+  createFilterList,
+};
--- a/src/api/permission.ts
+++ b/src/api/permission.ts
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+const getPermissions = (size: number, page?: number) => {
+  return axios.get(`/api/permission?page=${page}&size=${size}`);
+};
+
+const createPermission = (
+  form: {
+    name: string,
+    desc: string,
+    code: string,
+  }) => {
+  return axios.post(`api/permission`, form);
+};
+
+const updatePermission = (
+  form: {
+    id: string,
+    name?: string,
+    desc?: string,
+    status?: boolean,
+  }) => {
+  return axios.put(`api/permission`, form);
+};
+
+const deletePermission = (form: { permissionId: string }) => {
+  return axios.delete(`/api/permission`, { data: { permissionId: form.permissionId } });
+};
+
+export {
+  getPermissions,
+  createPermission,
+  updatePermission,
+  deletePermission,
+};
--- a/src/api/role.ts
+++ b/src/api/role.ts
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+const getRoles = (size: number, page?: number) => {
+  return axios.get(`/api/rolePermission?page=${page}&size=${size}`);
+};
+
+const createRole = (
+  form: {
+    name: string,
+    status?: boolean,
+    isUsed?: boolean,
+    parent?: string,
+    children?: string,
+  }) => {
+  return axios.post(`api/role`, form);
+};
+
+const updateRole = (
+  form: {
+    id: string,
+    status?: boolean,
+    isUsed?: boolean,
+    parent?: string,
+    children?: string,
+  }) => {
+  return axios.put(`api/role`, form);
+};
+
+const deleteRole = (form: { roleId: string }) => {
+  return axios.delete(`/api/role`, { data: { roleId: form.roleId } });
+};
+
+const setPermission = (form: { permissionId: string, roleId: string }) => {
+  return axios.post(`/api/setPermission`, form);
+};
+
+export {
+  getRoles,
+  createRole,
+  updateRole,
+  deleteRole,
+  setPermission,
+};
--- a/src/api/user.ts
+++ b/src/api/user.ts
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+const getPassports = (size: number, page?: number) => {
+  return axios.get(`/api/passport?page=${page}&size=${size}`);
+};
+
+const createPassport = (
+  form: {
+    password: string,
+    username: string,
+    email: string,
+  }) => {
+  return axios.post(`/api/passport`, form);
+};
+
+const updatePassport = (
+  form: {
+    id: string,
+    password?: string,
+    IsDelete?: boolean,
+  }) => {
+  return axios.put(`/api/passport`, form);
+};
+
+const deletePassport = (form: {id: string}) => {
+  return axios.delete(`/api/passport`, {data: {id: form.id}});
+};
+
+const setRole = (form: { passportId: string, roleId: string }) => {
+  return axios.post(`/api/setRole`, form);
+};
+
+export {
+  getPassports,
+  createPassport,
+  updatePassport,
+  deletePassport,
+  setRole,
+};
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/qr.png
+++ b/src/assets/qr.png
--- a/src/components/CommonTable.vue
+++ b/src/components/CommonTable.vue
+<template>
+  <el-table
+    border
+    :data="dataList"
+    style="width: 100%"
+    >
+    <el-table-column
+      v-for='(value, index) in tHeadList'
+      :key='index'
+      :prop='value.prop'
+      :width="value.width"
+      :show-overflow-tooltip='true'
+      align="center"
+      :label="value.label">
+      <template slot-scope="scope">
+        <template v-if="value.prop === 'createdAt' || value.prop === 'updatedAt'">
+          {{ stringToTime(scope.row[value.prop]) }}
+        </template>
+        <template v-else-if="value.prop === 'online'">
+          {{ isOnline(scope.row[value.prop]) }}
+        </template>
+        <template v-else-if="value.prop === 'status'">
+          {{ scope.row.used }} / {{ scope.row.total }}
+        </template>
+        <template v-else-if="value.prop === 'callbackcode'">
+          {{ isCallbackCode(scope.row[value.prop]) }}
+        </template>
+        <template v-else>
+          {{ scope.row[value.prop] }}
+        </template>
+      </template>
+    </el-table-column>
+
+    <template v-if='addable || detailable'>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        align="center"
+        width="100">
+        <template slot-scope="scope">
+          <template v-if='addable'>
+            <el-button
+              @click.native.prevent="addRow(scope.$index)"
+              type="text"
+              size="small">
+              加粉
+            </el-button>
+          </template>
+
+          <template v-if='detailable'>
+            <el-button
+              @click.native.prevent="detailRow(scope.$index)"
+              type="text"
+              size="small">
+              详情
+            </el-button>
+          </template>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+import { Action, State } from 'vuex-class';
+
+@Component({
+  props: {
+    tHeadList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    dataList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    addable: {
+      type: Boolean,
+      default: false,
+    },
+    detailable: {
+      type: Boolean,
+      default: false,
+    },
+    addRow: {
+      type: Function,
+      default: () => {
+        // 这里传入要添加的函数
+      },
+    },
+    detailRow: {
+      type: Function,
+      default: () => {
+        // 这里传入要编辑的函数
+      },
+    },
+    setRow: {
+      type: Function,
+      default: () => {
+        // 这里传入要设置的函数
+      },
+    },
+  },
+})
+
+export default class CommonTable extends Vue {
+  @State('role') public RoleState: any;
+
+  public isFirstZero(num: number) {
+    let str = '';
+    if (num < 10) {
+      str = '0' + num;
+    } else {
+      str = String(num);
+    }
+    return str;
+  }
+
+  public stringToTime(str: string) {
+    const date = new Date(Number(str));
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const newstr = `${this.isFirstZero(year)}-${this.isFirstZero(month)}-${this.isFirstZero(day)}`;
+    return newstr;
+  }
+
+  public isOnline(bool: boolean) {
+    if (bool) {
+      return '在线';
+    }
+    return '离线';
+  }
+  public isCallbackCode(num: number) {
+    let str = '';
+    switch (num) {
+      case 0:
+        str = '没有微信';
+        break;
+      case 1:
+        str = '等待通过';
+        break;
+      case 2:
+        str = '添加失败';
+        break;
+      case 3:
+        str = '已是好友';
+        break;
+      case 4:
+        str = '添加成功';
+        break;
+    }
+    return str;
+  }
+
+  public searchRoleById(id: string) {
+    const roles = this.RoleState.roles;
+    let str = '';
+    roles.map((val: any, ind: any) => {
+      if (val.id === id) {
+        str = val.name;
+      }
+    });
+    return str;
+  }
+
+  public mapRoles(data: any[]) {
+    if (data) {
+      let str = '';
+      data.map((val: any, ind: number) => {
+        str = str + val.name + ' 、';
+      });
+      return str;
+    }
+    return '';
+  }
+
+  public mapPermissions(data: any[]) {
+    if (data) {
+      let str = '';
+      data.map((val: any, ind: number) => {
+        str = str + val.desc + ' 、';
+      });
+      return str;
+    }
+    return '';
+  }
+}
+</script>
+
--- a/src/components/Pagination.vue
+++ b/src/components/Pagination.vue
+<template>
+  <el-pagination
+    @size-change="paginationSizeChange"
+    @current-change="paginationPageChange"
+    :current-page="page"
+    :page-sizes="[10, 20, 50, 100]"
+    :page-size="size"
+    layout="total, sizes, prev, pager, next"
+    :total="total">
+  </el-pagination>
+</template>
+
+<script lang="ts">
+
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component({
+  props: {
+    total: {
+      type: Number,
+      default: 0,
+    },
+    page: {
+      type: Number,
+      default: 0,
+    },
+    size: {
+      type: Number,
+      default: 10,
+    },
+    paginationSizeChange: {
+      type: Function,
+      default: () => {
+        // 条数的修改
+      },
+    },
+    paginationPageChange: {
+      type: Function,
+      default: () => {
+        // 页数的修改
+      },
+    },
+  },
+})
+
+export default class Pagination extends Vue {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/element-variables.scss
+++ b/src/element-variables.scss
+/*
+Write your variables here. All available variables can be
+found in element-ui/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
--- a/src/main.ts
+++ b/src/main.ts
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import './plugins/element.js';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount('#app');
--- a/src/plugins/element.js
+++ b/src/plugins/element.js
+import Vue from 'vue'
+import ElementUI, { Message } from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI, {
+  size: 'medium'
+});
+
--- a/src/router.ts
+++ b/src/router.ts
+import Vue from 'vue';
+import Router from 'vue-router';
+import Home from './views/layout/Layout.vue';
+
+const Login = () => import('./views/Login.vue');
+const FilterNumber = () => import('./views/FilterNumber.vue');
+const AddTask = () => import('./views/AddTask.vue');
+
+Vue.use(Router);
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      children: [
+        {
+          path: '/filternumber',
+          name: 'filternumber',
+          component: FilterNumber,
+        },
+        {
+          path: '/addtask',
+          name: 'addtask',
+          component: AddTask,
+        },
+      ],
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login,
+    },
+  ],
+});
--- a/src/shims-tsx.d.ts
+++ b/src/shims-tsx.d.ts
+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}
--- a/src/store/index.ts
+++ b/src/store/index.ts
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+
+import filterNumber from './modules/filterNumber';
+import addTask from './modules/addTask';
+
+
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {
+    filterNumber,
+    addTask,
+  },
+});
--- a/src/store/modules/addTask.ts
+++ b/src/store/modules/addTask.ts
+import { Commit } from 'vuex';
+import { Message } from 'element-ui';
+
+import { GET_FILTERLIST, CREATE_FILTERLIST } from '../types';
+import { getFilterList, createFilterList } from '@/api/filterNumber';
+
+interface PermissionAttribute {
+  id?: string;
+  name: string;
+  code: string;
+  desc?: string;
+  status?: boolean;
+  createdAt?: number;
+  updatedAt?: number;
+}
+
+export interface State {
+  dataList: any[];
+  count: number;
+}
+
+const filterNumberState: State = {
+  dataList: [
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 4},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 1},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 3},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+      ],
+    },
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 4},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 1},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 3},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+      ],
+    },
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 4},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 1},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 3},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+      ],
+    },
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 4},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 1},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 3},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+      ],
+    },
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 4},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 1},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 3},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+      ],
+    },
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 1},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 1},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 3},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+      ],
+    },
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 4},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 1},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 2},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 3},
+        {number: '18612341234', createdAt: '1536549523672', callbackcode: 0},
+      ],
+    },
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        { number: '18612341234', createdAt: '1536549523672', callbackcode: 1 },
+      ],
+    },
+    {
+      name: '0001',
+      wechatTotal: '王二狗(123)',
+      status: false,
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      taskList: [
+        { number: '18612341234', createdAt: '1536549523672', callbackcode: 0 },
+      ],
+    },
+  ],
+  count: 0,
+};
+
+const actions = {
+  [GET_FILTERLIST](
+    context: { commit: Commit, state: State },
+    payload: { size: number, page?: number },
+  ) {
+    // 获取角色列表
+    getFilterList(payload.size, payload.page).then((data) => {
+      const result = data.data.result;
+      if (result) {
+        context.commit(GET_FILTERLIST, result);
+      } else {
+        Message.error(`获取数据失败错误原因是${data.data.msg}`);
+      }
+    }).catch((err) => {
+      throw(err);
+    });
+  },
+
+  [CREATE_FILTERLIST](
+    context: { commit: Commit, state: State },
+    payload: {
+      name: string,
+      desc: string,
+      code: string,
+    }) {
+    // 创建角色
+    createFilterList(payload).then((data) => {
+      const result = data.data.result;
+      if (result) {
+        context.commit(CREATE_FILTERLIST, result);
+        Message.success('角色创建成功');
+      } else {
+        Message.error(data.data.msg);
+      }
+    }).catch((err) => {
+      throw(err);
+    });
+  },
+};
+
+const mutations = {
+  [GET_FILTERLIST](state: State, data: { rows: PermissionAttribute[], count: number }) {
+    state.dataList = data.rows;
+    state.count = data.count;
+  },
+
+  [CREATE_FILTERLIST](state: State, data: PermissionAttribute) {
+    state.dataList.unshift(data);
+    state.count += 1;
+  },
+};
+
+export default {
+  state: filterNumberState,
+  actions,
+  mutations,
+};
--- a/src/store/modules/filterNumber.ts
+++ b/src/store/modules/filterNumber.ts
+import { Commit } from 'vuex';
+import { Message } from 'element-ui';
+
+import { GET_FILTERLIST, CREATE_FILTERLIST } from '../types';
+import { getFilterList, createFilterList } from '@/api/filterNumber';
+
+interface PermissionAttribute {
+  id?: string;
+  name: string;
+  code: string;
+  desc?: string;
+  status?: boolean;
+  createdAt?: number;
+  updatedAt?: number;
+}
+
+export interface State {
+  dataList: any[];
+  count: number;
+}
+
+const filterNumberState: State = {
+  dataList: [
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+    {
+      name: '0001',
+      total: 5000,
+      used: 3000,
+      createdAt: '1536549529672',
+      numberGroup: '某某号码组',
+      filterList: '男, 女, 12-16; 北京，天津，山东，河北，张家口，石家庄，太原，深圳，广州，吉林，桂林，张家口，石家庄，太原，深圳，广州，吉林，桂林',
+    },
+  ],
+  count: 0,
+};
+
+const actions = {
+  [GET_FILTERLIST](
+    context: { commit: Commit, state: State },
+    payload: { size: number, page?: number },
+  ) {
+    // 获取角色列表
+    getFilterList(payload.size, payload.page).then((data) => {
+      const result = data.data.result;
+      if (result) {
+        context.commit(GET_FILTERLIST, result);
+      } else {
+        Message.error(`获取数据失败错误原因是${data.data.msg}`);
+      }
+    }).catch((err) => {
+      throw(err);
+    });
+  },
+
+  [CREATE_FILTERLIST](
+    context: { commit: Commit, state: State },
+    payload: {
+      name: string,
+      desc: string,
+      code: string,
+    }) {
+    // 创建角色
+    createFilterList(payload).then((data) => {
+      const result = data.data.result;
+      if (result) {
+        context.commit(CREATE_FILTERLIST, result);
+        Message.success('角色创建成功');
+      } else {
+        Message.error(data.data.msg);
+      }
+    }).catch((err) => {
+      throw(err);
+    });
+  },
+};
+
+const mutations = {
+  [GET_FILTERLIST](state: State, data: { rows: PermissionAttribute[], count: number }) {
+    state.dataList = data.rows;
+    state.count = data.count;
+  },
+
+  [CREATE_FILTERLIST](state: State, data: PermissionAttribute) {
+    state.dataList.unshift(data);
+    state.count += 1;
+  },
+};
+
+export default {
+  state: filterNumberState,
+  actions,
+  mutations,
+};
--- a/src/store/types.ts
+++ b/src/store/types.ts
+// 获取用户列表
+export const GET_PASSPORTS = 'GET_PASSPORTS';
+// 添加用户
+export const CREATE_PASSPORT = 'CREATE_PASSPORT';
+// 编辑用户
+export const UPDATE_PASSPORT = 'UPDATE_PASSPORT';
+// 删除用户
+export const DELETE_PASSPORT = 'DELETE_PASSPORT';
+
+// 获取角色权限
+export const GET_ROLES = 'GET_ROLES';
+// 设置用户角色
+export const SET_ROLE = 'SET_ROLE';
+// 添加角色
+export const CREATE_ROLE = 'CREATE_ROLE';
+// 更新角色
+export const UPDATE_ROLE = 'UPDATE_ROLE';
+// 删除角色
+export const DELETE_ROLE = 'DELETE_ROLE';
+
+// 获取权限列表
+export const GET_PERMISSIONS = 'GET_PERMISSIONS';
+// 设置角色权限
+export const SET_PERMISSION = 'SET_PERMISSION';
+// 添加权限
+export const CREATE_PERMISSION = 'CREATE_PERMISSION';
+// 更新权限
+export const UPDATE_PERMISSION = 'UPDATE_PERMISSION';
+// 删除权限
+export const DELETE_PERMISSION = 'DELETE_PERMISSION';
+
+// 获取筛选列表
+export const GET_FILTERLIST = 'GET_FILTERLIST';
+// 创建筛选条件
+export const CREATE_FILTERLIST = 'CREATE_FILTERLIST';
+
+// export const GET_FILTERLIST = 'GET_FILTERLIST';
+
+// export const GET_FILTERLIST = 'GET_FILTERLIST';
+
+
+
+
--- a/src/views/AddTask.vue
+++ b/src/views/AddTask.vue
+<template>
+  <div class="add-task">
+    <header>
+      <h2>加粉任务</h2>
+    </header>
+    <section>
+      <div class="section-body">
+        <CommonTable
+          :dataList='addTaskState.dataList'
+          :tHeadList='tHeadList'
+          :detailable='detailable'
+          :detailRow='detailRow'
+          />
+        <div class="pagination">
+          <Pagination
+            :page='page'
+            :size='size'
+            :total='addTaskState.count'
+            :paginationSizeChange='paginationSizeChange'
+            :paginationPageChange='paginationPageChange'/>
+        </div>
+        <div class="dialog">
+          <template v-if="dialog.name === 'taskDetail'">
+            <el-dialog title="任务详情" :visible.sync="isDialogShow" width="500px">
+              <div class="dialog-body">
+                 <!-- 此处借用了filterState的数据 -->
+                <CommonTable
+                  :dataList='addTaskState.dataList[dialog.index].taskList'
+                  :tHeadList='tHeadLists'
+                  />
+                <div class="dialog-pagination">
+                  <Pagination
+                    :page='page'
+                    :size='size'
+                    :total='addTaskState.count'
+                    :paginationSizeChange='paginationSizeChange'
+                    :paginationPageChange='paginationPageChange'/>
+                </div>
+              </div>
+              <div class="dialog-footer" slot='footer'>
+                <el-button type="primary" @click="sumbitAddWechat" >确 定</el-button>
+                <el-button @click="closeDialog" >取 消</el-button>
+              </div>
+            </el-dialog>
+          </template>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { mapActions, mapState } from 'vuex';
+import { Action, State } from 'vuex-class';
+
+import { GET_FILTERLIST, CREATE_FILTERLIST } from '@/store/types';
+import CommonTable from '@/components/CommonTable.vue';
+import Pagination from '@/components/Pagination.vue';
+
+@Component({
+  components: {
+    CommonTable,
+    Pagination,
+  },
+})
+
+export default class AddTask extends Vue {
+  public $refs!: {
+    ruleForm: HTMLFormElement,
+  };
+
+  @State('addTask') public addTaskState: any;
+  @Action(GET_FILTERLIST) public getFilterlist: any;
+  @Action(CREATE_FILTERLIST) public createFilter: any;
+
+  // 初始化数据
+  // 表格
+  public tHeadList = [{
+    prop: 'name',
+    label: '任务编号',
+    width: '120',
+  }, {
+    prop: 'createdAt',
+    label: '创建时间',
+    width: 'auto',
+  }, {
+    prop: 'wechatTotal',
+    label: '目标微信',
+    width: 'auto',
+  }, {
+    prop: 'online',
+    label: '在线状态',
+    width: 'auto',
+  }, {
+    prop: 'status',
+    label: '任务状态',
+    width: 'auto',
+  }];
+
+  public tHeadLists = [{
+    prop: 'number',
+    label: '目标号码',
+    width: '120',
+  }, {
+    prop: 'createdAt',
+    label: '创建时间',
+    width: 'auto',
+  }, {
+    prop: 'callbackcode',
+    label: '添加结果',
+    width: 'auto',
+  }];
+  public detailable = true;
+
+  // 分页
+  public page = 1;
+  public size = 10;
+
+  // 弹框
+  public isDialogShow = false;
+  public formLabelWidth = '100px';
+
+  public dialog = {
+    name: '',
+    data: {},
+    index: 0,
+  };
+
+  // 方法封装
+  // 表格
+  public detailRow(index: number) {
+    // 点击表格进行编辑
+    this.setDialogData('taskDetail', index);
+  }
+
+  public setDialogData(name: string, index: number) {
+    // 设置弹框数据
+    this.dialog.name = name;
+    this.$data.isDialogShow = true;
+    this.dialog.data = this.addTaskState.dataList[index];
+    this.dialog.index = index;
+  }
+
+  // 分页
+  public paginationSizeChange(index: number) {
+    this.size = index;
+    // this.getPermission({ size: this.size, page: this.page });
+  }
+
+  public paginationPageChange(index: number) {
+    this.page = index;
+    // this.getPermission({ size: this.size, page: this.page });
+  }
+
+  // 清除表单元素及弹框属性
+  public cleanDialogForm(form: string) {
+    const newform = this.$data[form];
+    Object.keys(newform).forEach((val, ind) => {
+      newform[val] = '';
+    });
+  }
+
+  // 弹框
+  public closeDialog() {
+    this.$data.isDialogShow = false;
+    this.dialog.name = '';
+  }
+
+  // 去除表格无用数据
+  public deleteInvalidData(data: any) {
+    const obj: any = {};
+    Object.keys(data).forEach((value) => {
+      if (data[value] !== '' && data[value] !== undefined) {
+        obj[value] = data[value];
+      }
+    });
+    return obj;
+  }
+
+  public sumbitAddFilter() {
+    // console.log(this.filterForm);
+  }
+
+  public sumbitAddWechat() {
+    const form = this.$data.addForm;
+    this.$refs.ruleForm.validate((valid: any) => {
+      if (valid) {
+        // console.log('验证通过了');
+        // 提交
+        // this.createPermission(form).then((data: any) => {
+        //   this.closeDialog();
+        //   this.cleanDialogForm('addForm');
+        // });
+      }
+    });
+  }
+
+  public ageFormat(val: string) {
+    return val + '岁';
+  }
+
+  // 验证方式
+  public validateThisTimeAdd(rule: any, value: any, callback: any) {
+    const reg = new RegExp('^[0-9]*$', 'i');
+    if (value === '') {
+      callback(new Error('请输入添加总条数'));
+      return false;
+    }
+    if (!reg.test(value)) {
+      callback(new Error('仅能输入数字'));
+      return false;
+    }
+    callback();
+
+  }
+
+
+  // // 生命周期
+  // public mounted() {
+  //   // this.getPermission({ size: this.size, page: this.page });
+  // }
+}
+</script>
+
+<style lang="scss" scoped>
+  .add-task{
+    text-align: left;
+    section{
+      padding: 30px 20px;
+      background-color: #fff;
+      .data{
+        color:#3396FC!important;
+      }
+      .section-title{
+        i{
+          margin-right: 8px;
+        }
+      }
+      .section-body{
+        margin-top: 20px;
+        position: relative;
+        padding-bottom: 30px;
+        .pagination{
+          position: absolute;
+          right: 5px;
+          bottom: -20px;
+        }
+        .dialog{
+          position: relative;
+          .flex{
+            display: flex;
+          }
+          .dialog-body{
+            padding: 10px;
+            position: relative;
+          }
+
+          .dialog-pagination{
+            position: absolute;
+            right: 5px;
+            bottom: -30px;
+          }
+          .dialog-footer{
+            text-align: right;
+            button{
+              margin-right: 10px;
+            }
+          }
+
+        }
+      }
+    }
+  }
+</style>
--- a/src/views/FilterNumber.vue
+++ b/src/views/FilterNumber.vue
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
+<template>
+  <div class="bg">
+    <div class="login">
+      <el-form>
+        <el-form-item label="用户名" label-width="80px"
+          prop="username">
+          <el-input v-model="loginForm.username" auto-complete="off" placeholder="请输入您的用户名"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" label-width="80px"
+          prop="password">
+          <el-input v-model="loginForm.password" auto-complete="off" placeholder="请输入您的密码" type="password"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-button @click='loginSumbit()'>
+        登录
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({
+
+})
+
+export default class Overview extends Vue {
+  public loginForm = {
+    username: '',
+    password: '',
+  };
+
+  public loginSumbit() {
+    if (this.loginForm.username === 'zhangsan' && this.loginForm.password === '123456') {
+      // 发送请求，接受到token。
+      this.$router.push('/filternumber');
+    } else {
+      this.$message.error('您所输入的用户名或密码不正确');
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+  .bg{
+    width: 100%;
+    height: 100%;
+    background: rgba($color: #000000, $alpha: 0.4);
+  }
+  .login{
+    // width: 500px;
+    padding: 50px 50px 50px 20px;
+    position: absolute;
+    left: 50%;
+    top:50%;
+    background-color: #fff;
+    // height: 300px;
+    border: 1px solid #ccc;
+    transform: translate(-50%, -50%);
+  }
+</style>
\ No newline at end of file
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
+<template>
+  <el-container class="app-wraper">
+    <!-- 头部 -->
+    <el-header class="app-header">
+      <span style="font-weight: bold; font-size: 20px; margin-left: 70px;">
+        <img src="../../assets/logo.png" alt="" width="201px"  style="margin-top:8px">
+      </span>
+      <el-dropdown style="line-height: 60px;float: right;margin: 0px 30px;">
+        <span class="theme-text">
+          {{ currentUser.username }}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <span @click="routeTo({ index:'/profile' })" >个人中心</span>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <span @click="logout">退出</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </el-header>
+    <el-container>
+      <el-aside width="210px" class="app-aside">
+        <!-- 左侧导航 -->
+        <el-menu
+          style="height: 100%;"
+          text-color="#888888"
+          :router=true
+          :unique-opened=true>
+          <li class="welcome">
+            <i class="el-icon-people"></i>
+            <span slot="title">Welcome Vincent</span>
+          </li>
+          <el-menu-item v-for="item in menuItems" :key=item.index @click=routeTo :route=item.index :index=item.index>
+            <i :class=item.icon></i>
+            <span slot="title">{{ item.title }}</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-main class="app-main">
+        <!-- 右侧主题内容 -->
+        <router-view/>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({
+  data() {
+    return {
+      menuItems: [{
+        title: '号码筛选',
+        index: '/filternumber',
+        icon: 'el-icon-menu',
+      }, {
+        title: '加粉任务',
+        index: '/addtask',
+        icon: 'el-icon-tickets',
+      }],
+      currentUser: {
+        username: 'wangzezhi',
+      },
+    };
+  },
+  methods: {
+    routeTo() {
+      // TODO
+    },
+    logout() {
+      // TODO
+    },
+  },
+})
+
+export default class Layout extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+.app-wraper {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  background-color: #f7f7f7;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  .app-header {
+    background: #fff;
+    box-shadow: 0 2px 3px 0 rgba(100,100,100,0.15);
+    text-align: left;
+    line-height: 60px;
+  }
+  .app-aside {
+    width: 210px;
+    margin: 30px 30px 0 30px;
+    border-radius: 4px;
+    box-shadow: 0 2px 3px 0 rgba(100,100,100,0.15);
+    .welcome {
+      height: 60px;
+      line-height: 60px;
+      font-size: 14px;
+    }
+    .el-menu-item {
+      height: 46px;
+      padding: 0 80px 0 20px;
+      line-height: 46px;
+      span {
+        margin-left: 10px;
+      }
+    }
+    .el-menu-item.is-active {
+        border-left: 2px solid #409EFF;
+    }
+  }
+  .app-main {
+    overflow-y: scroll;
+  }
+}
+</style>
--- a/tests/unit/HelloWorld.spec.ts
+++ b/tests/unit/HelloWorld.spec.ts
+import { expect } from 'chai';
+import { shallowMount } from '@vue/test-utils';
+import HelloWorld from '@/components/HelloWorld.vue';
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message';
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg },
+    });
+    expect(wrapper.text()).to.include(msg);
+  });
+});
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "node",
+      "mocha",
+      "chai"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/tslint.json
+++ b/tslint.json
+{
+  "defaultSeverity": "warning",
+  "extends": [
+    "tslint:recommended"
+  ],
+  "linterOptions": {
+    "exclude": [
+      "node_modules/**"
+    ]
+  },
+  "rules": {
+    "quotemark": [true, "single"],
+    "indent": [true, "spaces", 2],
+    "interface-name": false,
+    "ordered-imports": false,
+    "object-literal-sort-keys": false,
+    "no-consecutive-blank-lines": false,
+    "object-literal-key-quotes": [true, "consistent"]
+  }
+}
--- a/vue.config.js
+++ b/vue.config.js
+module.exports = {
+  baseUrl: process.env.NODE_ENV === 'production' ?
+    '/production-sub-path/' :
+    '/',
+  devServer: {
+    // proxy: 'http://localhost:8999',
+    proxy: 'http://10.1.0.99:8999',
+  },
+}
\ No newline at end of file