随机数据工具完成,包含①页面数据填充;②自动生成业务数据

examples/components/headerNav.vue

@@ -128,7 +128,8 @@ export default {
     gap: 12px;
     margin-right: 32px;
 
-    & > div {
+    & > div,.toolbarBtn {
+      color: #fff;
       padding: 0 12px;
 
       &:hover {

examples/components/mock.vue

@@ -1,42 +1,95 @@
 <template>
   <section class="mock">
-    <ai-dialog-btn dialogTitle="随机数据配置" :customFooter="false" appendToBody @onConfirm="submit">
+    <el-dropdown>
-      <div class="btn" slot="btn">生成随机数据</div>
+      <div class="toolbarBtn" v-text="`生成随机数据`"/>
-      <el-form size="small" label-width="120px">
+      <el-dropdown-menu slot="dropdown">
-        <el-form-item label="接口">
+        <el-dropdown-item>
-          <el-input v-model="action" placeholder="请输入接口"/>
+          <ai-dialog-btn dialogTitle="随机数据配置" :customFooter="false" @onConfirm="submit" appendToBody @open="getBeans" width="500px">
-        </el-form-item>
+            <div class="btn" slot="btn">生成数据</div>
-        <el-form-item label="mock配置">
+            <el-form size="small" label-width="60px">
-          <el-input type="textarea" rows="5" v-model="config" placeholder="请输入mock配置"/>
+              <el-form-item label="接口">
-        </el-form-item>
+                <el-input v-model="action" placeholder="请输入接口" @change="handleAction"/>
-      </el-form>
+              </el-form-item>
-    </ai-dialog-btn>
+            </el-form>
+          </ai-dialog-btn>
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <ai-dialog-btn dialogTitle="随机数据配置" :customFooter="false" @onConfirm="generateForm" appendToBody @open="getBeans" width="500px">
+            <div class="btn" slot="btn">页面数据</div>
+            <el-form size="small" label-width="60px">
+              <el-form-item label="接口">
+                <el-input v-model="action" placeholder="请输入接口" @change="handleAction"/>
+              </el-form-item>
+            </el-form>
+          </ai-dialog-btn>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </section>
 </template>
 
 <script>
 import Mock from "mockjs"
+import instance from "../router/axios";
 
 export default {
   name: "mock",
   data() {
     return {
+      instance,
       action: "",
-      config: ""
+      config: "",
+      swagger: {},//swagger接口对象集合
     }
   },
-  watch: {
+  computed: {
-    config(v) {
+    url: v => /addOrUpdate/.test(v.action) ? v.action : `/${v.action}/addOrUpdate`
-      console.log(eval(v))
-    }
   },
   methods: {
+    handleAction() {
+      let formName = this.swagger.paths[this.url]?.post.parameters.find(e => e.in == "body")?.name || ""
+      const {Random} = Mock
+      if (formName) {
+        formName = Random.capitalize(formName)
+        const props = this.swagger.definitions[formName]?.properties || {}
+        Object.keys(props).map(e => {
+          const item = props[e]
+          if (item.format == "date-time") {
+            props[e] = () => Random.datetime()
+          } else if (/[0-9a-zA-Z]/.test(item.description)) {
+            props[e] = () => Random.pick(item.description?.match(/\b[0-9a-zA-Z]+\b/g))
+          } else if (/address/i.test(e)) {
+            props[e] = () => Random.county(true)
+          } else if (/userName/i.test(e)) {
+            props[e] = () => Random.cname()
+          } else if (/lat/.test(e)) {
+            props[e] = () => Random.float(3, 53, 6, 8)
+          } else if (/lng/.test(e)) {
+            props[e] = () => Random.float(73, 135, 6, 8)
+          } else if (item.type == "number") {
+            props[e] = () => Random.float(0, 1000, 0, 2)
+          } else if (item.type == "integer") {
+            props[e] = () => Random.integer(0, 1000)
+          } else if (item.type == "string") {
+            props[e] = () => Random.ctitle()
+          } else props[e] = null
+        })
+        this.config = props
+      }
+    },
+    getBeans() {
+      this.instance.get("/app/v2/api-docs", {withoutToken: true}).then(res => this.swagger = res)
+    },
+    generateForm() {
+      const {mock} = Mock
+      this.$vm.$emit("mock", mock(this.config))
+    },
     submit() {
-      const {mock, Random} = Mock
+      const {mock} = Mock
       const data = mock({
-        'list|100-200': [JSON.parse(this.config)]
+        'list|50-100': [this.config]
       })
-      Promise.all(data.list.map(e => this.$request.post(this.action, e))).then(() => this.$message.success("随机数据生成,执行完毕!"))
+      Promise.all(data.list.map(e => this.instance.post(this.url, e))).then(() => this.$message.success("随机数据生成,执行完毕!"))
     }
   }
 }

examples/main.js

@@ -30,6 +30,7 @@ store.dispatch('getSystem').then(({colorScheme}) => {
   Vue.prototype.$theme = theme?.web || "blue"
   return import(`dvcp-ui/lib/styles/theme.${theme?.web}.scss`).catch(() => 0)
 }).finally(() => {
+  Vue.prototype.$vm = app
   !theme ? app.$mount('#app') : import(`dvcp-ui/lib/styles/common.scss`).finally(() => app.$mount('#app'))
 })
 

examples/views/apps/appEntry.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="appEntry">
-    <component v-if="app" :is="app" :instance="$request" :dict="$dict" :permissions="$permissions"/>
+    <component v-if="app" :is="app" ref="currentPage" :instance="$request" :dict="$dict" :permissions="$permissions"/>
     <ai-empty v-else>无法找到应用文件</ai-empty>
   </section>
 </template>
@@ -18,6 +18,14 @@ export default {
       let app = this.apps.find(e => e.name == this.$route.name)
       return app ? app.module : ""
     }
+  },
+  mounted() {
+    this.$vm.$on("mock", v => {
+      if (!!this.$refs.currentPage.$children?.[0]?.form) {
+        this.$refs.currentPage.$children[0].form = v
+        this.$refs.currentPage.$children[0].$forceUpdate()
+      }
+    })
   }
 }
 </script>