111 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			111 lines
		
	
	
		
			3.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <section class="mock">
 | |
|     <el-dropdown>
 | |
|       <div class="toolbarBtn" v-text="`生成随机数据`"/>
 | |
|       <el-dropdown-menu slot="dropdown">
 | |
|         <el-dropdown-item>
 | |
|           <ai-dialog-btn dialogTitle="随机数据配置" :customFooter="false" @onConfirm="submit" 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-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: "",
 | |
|       swagger: {},//swagger接口对象集合
 | |
|     }
 | |
|   },
 | |
|   computed: {
 | |
|     url: v => /addOrUpdate/.test(v.action) ? v.action : `/${v.action}/addOrUpdate`
 | |
|   },
 | |
|   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} = Mock
 | |
|       const data = mock({
 | |
|         'list|50-100': [this.config]
 | |
|       })
 | |
|       Promise.all(data.list.map(e => this.instance.post(this.url, 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>
 |