testdata

config/dev.env.js

 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  QA_API: '"http://172.30.220.22:3003"'
+  QA_API: '"http://172.30.220.22:3003"',
+  TESTDATA_API: '"http://172.30.220.22:3333"'
 }

config/prod.env.js

 module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG: '"prod"',
-  QA_API: '"http://172.30.220.22:3003"'
+  QA_API: '"http://172.30.220.22:3003"',
+  TESTDATA_API: '"http://172.30.220.22:3333"'
 }

src/api/proonfig.js

+import request from '@/utils/request'
+
+export function getIndexUrl() {
+  return request({
+    url: '/proconfig/get_project_by_type',
+    method: 'get'
+  })
+}

src/api/testdata.js

+import request from '@/utils/requestTestdata'
+
+export function getAll(query) {
+  return request({
+    url: '/testdata/getAll',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getBankID() {
+  return request({
+    url: '/testdata/getBankID',
+    method: 'get'
+  })
+}
+
+export function getBankList() {
+  return request({
+    url: '/testdata/getBankList',
+    method: 'get'
+  })
+}
+
+export function getProvinceList() {
+  return request({
+    url: '/testdata/getProvinceList',
+    method: 'get'
+  })
+}

src/router/index.js

@@ -78,15 +78,15 @@ export const constantRouterMap = [
     ]
   },
   {
-    path: '',
+    path: '/indexList',
     component: Layout,
-    redirect: 'indexList',
+    redirect: 'noredirect',
     children: [
       {
-        path: 'indexList',
+        path: '',
         component: () => import('@/views/index/index'),
         name: 'indexList',
-        meta: { title: 'indexList', icon: 'dashboard', noCache: true, affix: true }
+        meta: { title: 'indexList', icon: 'link' }
       }
     ]
   },
@@ -170,6 +170,34 @@ export const asyncRouterMap = [
     ]
   },
 
+  {
+    path: '/proconfig',
+    component: Layout,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/proconfig/index'),
+        name: 'proconfig',
+        meta: { title: '配置文件管理', icon: 'documentation' }
+      }
+    ]
+  },
+
+  {
+    path: '/testdata',
+    component: Layout,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/testdata/index'),
+        name: 'testdata',
+        meta: { title: '数据生成器', icon: 'people' }
+      }
+    ]
+  },
+
   /** When your routing table is too long, you can split it into small modules**/
   componentsRouter,
   chartsRouter,

src/utils/requestTestdata.js

+import axios from 'axios'
+import { Message } from 'element-ui'
+
+// create an axios instance
+const serviceTestData = axios.create({
+  baseURL: process.env.TESTDATA_API,
+  timeout: 5000 // request timeout
+})
+
+// request interceptor
+serviceTestData.interceptors.request.use(
+)
+
+// response interceptor
+serviceTestData.interceptors.response.use(
+  response => response,
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default serviceTestData

src/views/index/index.vue

@@ -5,11 +5,7 @@
         <div slot="header" class="clearfix">
           <span>{{ item.name }}</span>
         </div>
-        <div style="margin-bottom:30px;">
-          <el-col v-for="data in item.data" :key="data.remark" :span="5" class="text-center" style="margin-bottom:10px;">
-            <Button :class="`pan-btn ${item.color}-btn`" style="padding:10px;" @click="openNewWindow(data.url)">{{ data.remark }}</Button>
-          </el-col>
-        </div>
+        <Button v-for="data in item.data" :key="data.remark" :class="`pan-btn ${item.color}-btn`" style="padding:10px;margin:5px" @click="openNewWindow(data.url)">{{ data.remark }}</Button>
       </el-card>
     </el-row>
 

src/views/testdata/index.vue

+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="count" placeholder="数量" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
+      <el-select v-model="province" placeholder="省份" clearable style="width: 200px" class="filter-item">
+        <el-option v-for="item in provinceList" :key="item" :label="item" :value="item"/>
+      </el-select>
+      <el-select v-model="bank" placeholder="银行" clearable class="filter-item" style="width: 200px">
+        <el-option v-for="item in bankList" :key="item" :label="item" :value="item"/>
+      </el-select>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-view" @click="generate">生成</el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="peopleInfo"
+      fit
+      stripe
+      highlight-current-row
+      style="width: 100%;">
+      border
+      @sort-change="sortChange">
+
+      <el-table-column label="姓名" width="65px">
+        <template slot-scope="scope">
+          <span>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="身份证号" width="165px">
+        <template slot-scope="scope">
+          <span>{{ scope.row.IDCardNo }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Sex" width="46px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.sex }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="生日" width="100px">
+        <template slot-scope="scope">
+          <span>{{ scope.row.birthday }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="通信地址">
+        <template slot-scope="scope">
+          <span>{{ scope.row.address }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号" width="110px">
+        <template slot-scope="scope">
+          <span>{{ scope.row.mobile }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Email" width="150px">
+        <template slot-scope="scope">
+          <span>{{ scope.row.email }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="银行卡号" width="175px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.bankNo }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="所属银行" width="145px" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.bankType }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getAll" /> -->
+
+  </div>
+</template>
+
+<script>
+import { getAll, getBankList, getProvinceList } from '@/api/testdata'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+
+export default {
+  name: 'ComplexTable',
+  components: { Pagination },
+  data() {
+    return {
+      tableKey: 0,
+      total: 0,
+      listLoading: true,
+      provinceList: [],
+      bankList: [],
+      peopleInfo: null,
+      count: 5,
+      province: null,
+      bank: null
+    }
+  },
+  created() {
+    this.getProvinceList()
+    this.getBankList()
+    this.generate()
+  },
+  methods: {
+    getProvinceList() {
+      getProvinceList().then(response => {
+        this.provinceList = response.data.data
+      })
+    },
+    getBankList() {
+      getBankList().then(response => {
+        this.bankList = response.data.data
+      })
+    },
+    getAll(query) {
+      this.listLoading = true
+      getAll(query).then(res => {
+        this.peopleInfo = res.data.data
+        this.total = res.data.count
+        setTimeout(() => {
+          this.listLoading = false
+        }, 0.3 * 1000)
+      })
+    },
+    generate() {
+      if (this.count <= 100) {
+        this.getAll({
+          count: this.count,
+          province: this.province,
+          bank: this.bank
+        })
+      } else {
+        this.$message({
+          message: '"数量"请输入1到100之间的整数',
+          type: 'warning'
+        })
+      }
+    }
+  }
+}
+</script>