接入mock准备测试自动化和随机数据生成

examples/App.vue

@@ -2,6 +2,7 @@
   <div id="app">
     <header-nav v-if="showTools" title="web端产品库">
       <template #right>
+        <mock/>
         <div @click="showTools=false">隐藏工具栏</div>
         <div @click="handleLogin">点此登录</div>
       </template>
@@ -24,10 +25,11 @@ import SliderNav from "./components/sliderNav";
 import MainContent from "./components/mainContent";
 import HeaderNav from "./components/headerNav";
 import {mapActions, mapMutations, mapState} from "vuex";
+import Mock from "./components/mock";
 
 export default {
   name: 'app',
-  components: {HeaderNav, MainContent, SliderNav},
+  components: {Mock, HeaderNav, MainContent, SliderNav},
   computed: {
     ...mapState(['user']),
     login() {
@@ -59,6 +61,8 @@ export default {
         this.dialog = true
       })
     },
+    handleMock() {
+    }
   },
   created() {
     wx = jWeixin

examples/components/mock.vue

@@ -0,0 +1,57 @@
+<template>
+  <section class="mock">
+    <ai-dialog-btn dialogTitle="随机数据配置" :customFooter="false" appendToBody @onConfirm="submit">
+      <div class="btn" slot="btn">生成随机数据</div>
+      <el-form size="small" label-width="120px">
+        <el-form-item label="接口">
+          <el-input v-model="action" placeholder="请输入接口"/>
+        </el-form-item>
+        <el-form-item label="mock配置">
+          <el-input type="textarea" rows="5" v-model="config" placeholder="请输入mock配置"/>
+        </el-form-item>
+      </el-form>
+    </ai-dialog-btn>
+  </section>
+</template>
+
+<script>
+import Mock from "mockjs"
+
+export default {
+  name: "mock",
+  data() {
+    return {
+      action: "",
+      config: ""
+    }
+  },
+  watch: {
+    config(v) {
+      console.log(eval(v))
+    }
+  },
+  methods: {
+    submit() {
+      const {mock, Random} = Mock
+      const data = mock({
+        'list|100-200': [JSON.parse(this.config)]
+      })
+      Promise.all(data.list.map(e => this.$request.post(this.action, e))).then(() => this.$message.success("随机数据生成,执行完毕!"))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mock {
+  .btn {
+    cursor: pointer;
+    user-select: none;
+    padding: 0 12px;
+
+    &:hover {
+      color: rgba(#fff, .8);
+    }
+  }
+}
+</style>

examples/router/axios.js

@@ -23,7 +23,7 @@ instance.interceptors.request.use(config => {
     config.baseURL = location.hash.replace(/#url-/, '/')
   }
   if (["/xsjr", "/omsapi", "/tfx"].includes(config.baseURL)) {
-    config.url = config.url.replace(/(app|auth|admin)\//, "")
+    config.url = config.url.replace(/(app|auth|admin|api)\//, "")
   }
   return config
 }, error => Message.error(error))

package.json

@@ -51,6 +51,7 @@
     "eslint-plugin-vue": "^5.0.0",
     "image-webpack-loader": "^6.0.0",
     "inquirer": "^6.5.2",
+    "mockjs": "^1.1.0",
     "readline": "^1.3.0",
     "sass": "~1.32.12",
     "sass-loader": "^7.3.1",

vue.config.js

@@ -121,7 +121,7 @@ module.exports = {
         }
       },
       '/tfx': {
-        target: 'http://192.168.1.87:12421',
+        target: 'http://192.168.1.87:59998',
         changeOrigin: true,
         pathRewrite: {
           //地址重写