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

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>