save

.gitignore

@@ -20,3 +20,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+/.vs

package.json

@@ -8,9 +8,12 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "element-ui": "^2.13.2",
+    "moment": "^2.27.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "xlsx": "^0.16.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="app">
-    <div id="nav">
+    <!--<div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
-    </div>
+    </div>-->
     <router-view/>
   </div>
 </template>
@@ -29,4 +29,8 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+body,html{
+    margin:0;
+    padding:0;
+}
 </style>

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Layout.vue

@@ -0,0 +1,113 @@
+<!--  -->
+<template>
+    <div class="layout">
+        <el-container>
+            <el-header>云智学工具集合</el-header>
+            <el-container>
+                <el-aside width="200px">
+                    <el-menu :default-active="active"
+                             :router="true"
+                             class="el-menu-vertical-demo">
+                        <el-menu-item :index="getPath(item)" v-for="item in menu">
+                            <i :class="item.meta.icon"></i>
+                            <span slot="title">{{item.meta.title}}</span>
+                        </el-menu-item>
+                    </el-menu>
+                </el-aside>
+                <el-container>
+                    <el-main>
+                        <router-view :key="key"/>
+                    </el-main>
+                </el-container>
+            </el-container>
+        </el-container>
+    </div>
+</template>
+
+<script>
+    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+    //例如：import 《组件名称》 from '《组件路径》';
+    import path from 'path'
+    export default {
+        name: "Layout",
+        props: {},
+        //import引入的组件需要注入到对象中才能使用
+        components: {
+            //defaultPage ,
+        },
+        data() {
+            return {
+                active: this.$route.path,
+                menu:[]
+            }
+        },
+        //监听属性 类似于data概念
+        computed: {
+            key() {
+                return this.$route.fullPath
+            }
+        },
+        //监控data中的数据变化
+        watch: {},
+        //生命周期 - 创建完成（可以访问当前this实例）
+        async created() {
+            this.menu = this.$router.options.routes;
+        },
+        //生命周期 - 挂载完成（可以访问DOM元素）
+        async mounted() {
+            let routes = this.$router.options.routes;
+            console.log("------>", routes)
+        },
+        //方法集合
+        methods: {
+            getPath(item) {
+                return path.resolve(item.path,item.children[0].path);
+            }
+        },
+        //当前页面的filter
+        filters: {}
+    }
+</script>
+<!-- 单页私有css -->
+<style scoped>
+    .el-menu{
+        height:100%;
+    }
+    .el-header {
+        background-color: #3c7ef6;
+        color: #fff;
+        text-align: center;
+        line-height: 60px;
+    }
+
+    .el-aside {
+        background-color: #fff;
+        color: #333;
+        text-align: left;
+        height: calc(100vh - 60px);
+    }
+
+    .el-main {
+        background-color: #f5f5f5;
+        color: #333;
+        text-align: left;
+        height: calc(100vh - 60px);
+        overflow:auto;
+    }
+
+    body > .el-container {
+        margin-bottom: 40px;
+    }
+
+    .el-container:nth-child(5) .el-aside,
+    .el-container:nth-child(6) .el-aside {
+        line-height: 260px;
+    }
+
+    .el-container:nth-child(7) .el-aside {
+        line-height: 320px;
+    }
+</style>
+<style>
+    
+</style>

src/main.js

@@ -1,7 +1,12 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+
+Vue.use(ElementUI);
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -1,29 +1,48 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import Layout from "@/components/Layout.vue";
 
 Vue.use(VueRouter)
 
-  const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+const routes = [
+    {
+        path: '/',
+        component: Layout,
+        redirect: '/userauto',
+        meta: {
+            title: "生成学生信息",
+            icon:"el-icon-s-open"
+        },
+        children: [
+            {
+                path: 'userauto',
+                name: 'UserAuto',
+                component: () => import('@/views/UserAuto.vue'),
+            }
+        ]
+    },
+    {
+        path: '/about',
+        component: Layout,
+        meta: {
+            title: "关于",
+            icon: "el-icon-info"
+        },
+        children: [
+            {
+                path: 'index',
+                name: 'Abuout',
+                component: () => import('@/views/About.vue'),
+            }
+        ]
+    }
 ]
 
 const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
 })
 
 export default router

src/utils/excelExport.js

@@ -0,0 +1,96 @@
+/**
+ * Created by admin on 2018/02/08.
+ * author maw
+ */
+import XLSX from "xlsx";
+//import xlsxStyle from 'xlsx-style'
+
+/* eslint-disable */
+export default function (_headers, _data, _file) {
+  if (!Array.isArray(_headers) || _headers.length === 0) {
+    console.log("failure in excel export, reason: wrong parameter of header!");
+    return "";
+  }
+  if (!Array.isArray(_data)) {
+    console.log("failure in excel export, reason: wrong parameter of data!");
+    return "";
+  }
+
+  let str = JSON.stringify(_data);
+  for (let i = 0; i < _headers.length; i++) {
+    let reg = new RegExp("(['|\"])" + _headers[i].prop + "['|\"]", "g");
+    str = str.replace(reg, "$1" + _headers[i].label + "$1");
+  }
+  let arr = JSON.parse(str);
+
+  let wb = XLSX.utils.book_new();
+  let ws = XLSX.utils.json_to_sheet(arr);
+
+  let objectMaxLength = [];
+  console.log('arr', arr)
+  for (let i = 0; i < arr.length; i++) {
+    let temp = arr[i];
+    for (var j in temp) {
+      let index = Object.keys(temp).indexOf(j);
+      if (!temp[j]) {
+        continue;
+      }
+      if (!isNaN(parseInt(temp[j].toString()))) {
+        objectMaxLength[index] = objectMaxLength[index] >= temp[j].length*1.5 ? objectMaxLength[index] : temp[j].length*1.5;
+      } else {
+        objectMaxLength[index] = objectMaxLength[index] >= temp[j].length * 3 ? objectMaxLength[index] : temp[j].length * 3;
+      }
+    }
+  }
+
+  console.log('objectMaxLength', objectMaxLength)
+
+  ws["!cols"] = [];
+  for (let item of objectMaxLength) {
+    ws["!cols"].push({
+      wch: item < 10 ? 10 : item
+    })
+  }
+  console.log('cols', ws["!cols"])
+  // console.log(start)
+  XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
+  // 导出 Excel
+  let fileName = "output";
+  if (_file) {
+    fileName = _file;
+  }
+  fileName += ".xlsx";
+  XLSX.writeFile(wb, fileName, { compression: true, bookType: "xlsx" });
+};
+
+/*
+ * 参数示例：
+ * let _headers = [
+*     {prop: "id", label: "ID"},
+*     {prop: "name", label: "姓名"},
+*     {prop: "age", label: "年龄"},
+*     {prop: "country", label: "国籍"},
+*     {prop: "remark", label: "备注"}
+  * ];
+  * let _data = [
+*     {
+* id: "1",
+  *         name: "test1",
+  *         age: "30",
+  *         country: "China",
+  *         remark: "hello"
+*     }, {
+* id: "2",
+  *         name: "test2",
+  *         age: "20",
+  *         country: "America",
+  *         remark: "world"
+*     }, {
+* id: "3",
+  *         name: "test3",
+  *         age: "18",
+  *         country: "Unkonw",
+  *         remark: "呵呵哈哈!"
+  *     }
+  * ];
+  */

src/views/About.vue

@@ -1,5 +1,57 @@
+<!--  -->
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+    <div class="about">
+        这是关于页面
+    </div>
 </template>
+
+<script>
+    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+    //例如：import 《组件名称》 from '《组件路径》';
+    export default {
+        name: "About",
+        props: {},
+        //import引入的组件需要注入到对象中才能使用
+        components: {
+            //defaultPage ,
+        },
+        data() {
+            return {
+               
+            }
+        },
+        //监听属性 类似于data概念
+        computed: {
+            key() {
+                return this.$route.fullPath
+            }
+        },
+        //监控data中的数据变化
+        watch: {},
+        //生命周期 - 创建完成（可以访问当前this实例）
+        async created() {
+           
+        },
+        //生命周期 - 挂载完成（可以访问DOM元素）
+        async mounted() {
+            
+        },
+        //方法集合
+        methods: {
+            
+        },
+        //当前页面的filter
+        filters: {}
+    }
+</script>
+<!-- 单页私有css -->
+<style scoped>
+    .about {
+        padding: 30px;
+        background-color: #fff;
+        border-radius: 4px;
+        min-height: 600px;
+    }
+</style>
+<style>
+</style>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/UserAuto.vue

@@ -0,0 +1,157 @@
+<!--  -->
+<template>
+  <div class="user-auto">
+    <!--{{list}}-->
+    <el-input-number v-model="count" :min="1" :max="1000" label="描述文字" :step="100"></el-input-number>
+    <el-button type="primary" @click="getUserList">生成数据</el-button>
+    <el-button type="primary" @click="exportExcel">导出数据</el-button>
+    <el-table :data="list"
+              style="width: 100%">
+      <el-table-column prop="name"
+                       label="姓名"
+                       width="180">
+      </el-table-column>
+      <el-table-column prop="phone"
+                       label="手机号"
+                       width="180">
+      </el-table-column>
+      <el-table-column prop="sex"
+                       label="性别"
+                       width="180">
+      </el-table-column>
+      <el-table-column prop="cardNo"
+                       label="身份证">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+  //例如：import 《组件名称》 from '《组件路径》';
+  import moment from "moment";
+  import excelExport from "@/utils/excelExport";
+
+  export default {
+    name: "UserAuto",
+    props: {},
+    //import引入的组件需要注入到对象中才能使用
+    components: {
+      //defaultPage ,
+    },
+    data() {
+      return {
+        list: [],
+        header:[
+          { prop: "name", label: "姓名" }, 
+          { prop: "phone", label: "手机号" },
+          { prop: "sex", label: "性别" },
+          { prop: "cardNo", label: "身份证号" },
+        ],
+        count:100,
+      }
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //生命周期 - 创建完成（可以访问当前this实例）
+    async created() { },
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    async mounted() {
+      //this.getUserList();
+    },
+    //方法集合
+    methods: {
+      exportExcel() {
+        excelExport(this.header, this.list, `随机身份证-${this.list.length}条`);
+      },
+      getUserList() {
+        this.list = [];
+        for (let i = 0; i < this.count; i++) {
+          let item = {
+            name: this.getName(),
+            phone: this.getMoble(),
+            cardNo: this.getCardNo(),
+          }
+          item.sex = this.getSex(item.cardNo);
+          this.list.push(item);
+        }
+      },
+      getSex(cardNo) {
+        let sexNo = parseInt(cardNo[16]) % 2;
+        return sexNo == 1 ? '男' : '女';
+      },
+      getName() {
+        let familyNames = new Array(
+          "赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈",
+          "褚", "卫", "蒋", "沈", "韩", "杨", "朱", "秦", "尤", "许",
+          "何", "吕", "施", "张", "孔", "曹", "严", "华", "金", "魏",
+          "陶", "姜", "戚", "谢", "邹", "喻", "柏", "水", "窦", "章",
+          "云", "苏", "潘", "葛", "奚", "范", "彭", "郎", "鲁", "韦",
+          "昌", "马", "苗", "凤", "花", "方", "俞", "任", "袁", "柳",
+          "酆", "鲍", "史", "唐", "费", "廉", "岑", "薛", "雷", "贺",
+          "倪", "汤", "滕", "殷", "罗", "毕", "郝", "邬", "安", "常",
+          "乐", "于", "时", "傅", "皮", "卞", "齐", "康", "伍", "余",
+          "元", "卜", "顾", "孟", "平", "黄", "和", "穆", "萧", "尹",
+          "司马", "东方", "欧阳", "诸葛", "尉迟", "端木", "姚", "颜", "成",
+        );
+        let givenNames = new Array(
+          "子璇", "淼", "国栋", "夫子", "瑞堂", "甜", "敏", "尚", "国贤", "贺祥", "晨涛",
+          "昊轩", "易轩", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齐", "杨", "文昊",
+          "东东", "雄霖", "浩晨", "熙涵", "溶溶", "冰枫", "欣欣", "宜豪", "欣慧", "建政",
+          "美欣", "淑慧", "文轩", "文杰", "欣源", "忠林", "榕润", "欣汝", "慧嘉", "新建",
+          "建林", "亦菲", "林", "冰洁", "佳欣", "涵涵", "禹辰", "淳美", "泽惠", "伟洋",
+          "涵越", "润丽", "翔", "淑华", "晶莹", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅",
+          "子辰", "佳琪", "紫轩", "瑞辰", "昕蕊", "萌", "明远", "欣宜", "泽远", "欣怡",
+          "佳怡", "佳惠", "晨茜", "晨璐", "运昊", "汝鑫", "淑君", "晶滢", "润莎", "榕汕",
+          "佳钰", "佳玉", "晓庆", "一鸣", "语晨", "添池", "添昊", "雨泽", "雅晗", "雅涵",
+          "清妍", "诗悦", "嘉乐", "晨涵", "天赫", "玥傲", "佳昊", "天昊", "萌萌", "若萌", "小华", "子君", "莉莉","云"
+        );
+        let i = parseInt(familyNames.length * Math.random());
+        let familyName = familyNames[i];
+        let j = parseInt(givenNames.length * Math.random());
+        let givenName = givenNames[j];
+        let name = familyName + givenName;
+        return name;
+      },
+      getMoble() {
+        let prefixArray = new Array("130", "131", "132", "133", "135", "137", "138", "170", "187", "189");
+        let i = parseInt(10 * Math.random());
+        let prefix = prefixArray[i];
+        for (let j = 0; j < 8; j++) {
+          prefix = prefix + Math.floor(Math.random() * 10);
+        }
+        return prefix;
+      },
+      getCardNo() {
+        let coefficientArray = ["7", "9", "10", "5", "8", "4", "2", "1", "6", "3", "7", "9", "10", "5", "8", "4", "2"];// 加权因子
+        let lastNumberArray = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];// 校验码
+        let address = "510113"; // 住址
+        let randomDay = parseInt(10 * 365 * Math.random());
+        let birthday = moment("2000-01-01").add(randomDay,"day").format("YYYYMMDD"); // 生日
+        let s = Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString();
+        let array = (address + birthday + s).split("");
+        let total = 0;
+        for (let i in array) {
+          total = total + parseInt(array[i]) * parseInt(coefficientArray[i]);
+        }
+        let lastNumber = lastNumberArray[parseInt(total % 11)];
+        let id_no_String = address + birthday + s + lastNumber;
+        return id_no_String;
+      }
+    },
+    //当前页面的filter
+    filters: {}
+  }
+</script>
+<!-- 单页私有css -->
+<style scoped>
+   
+  .user-auto{
+    padding:30px;
+    background-color:#fff;
+    border-radius:4px;
+    min-height:600px;
+  }
+</style>

vue.config.js

@@ -0,0 +1,57 @@
+'use strict'
+const path = require('path')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+const name = 'YzxTool' // page title
+// If your port is set to 80,
+// use administrator privileges to execute the command line.
+// For example, Mac: sudo npm run
+const port = 9999 // dev port
+
+// All configuration item explanations can be find in https://cli.vuejs.org/config/
+module.exports = {
+  /**a
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail: https://cli.vuejs.org/config/#publicpath
+   */
+  publicPath: '/',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: false,
+  productionSourceMap: false,
+  devServer: {
+    port: port,
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    proxy: {
+      '/api': {
+        //target: process.env.VUE_APP_BASE_API_TARGET,
+        target: "/apppp",
+        changeOrigin: true,
+        ws: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      },
+    },
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    },
+  },
+}