/
mock-expand.vue
121 lines (118 loc) · 3.85 KB
/
mock-expand.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
<div class="em-mock-expand">
<h2>Method</h2>
<p>{{mock.method}}</p>
<h2>URL</h2>
<p>{{mock.url}}</p>
<h2>{{$t('p.detail.expand.description')}}</h2>
<p>{{mock.description}}</p>
<Tabs value="request" v-if="mock.parameters || mock.response_model">
<Tab-pane :label="$t('p.detail.expand.tab[0]')" name="request" v-if="mock.parameters">
<Table :columns="columnsRequest" :data="request"></Table>
</Tab-pane>
<Tab-pane :label="$t('p.detail.expand.tab[1]')" name="response" v-if="mock.response_model">
<Table :columns="columnsResponse" :data="response"></Table>
</Tab-pane>
<Tab-pane label="Class Model" name="class" v-if="mock.response_model && entities.js.length">
<Collapse>
<Panel>
JavaScript
<div slot="content">
<p v-for="(item, i) in entities.js" :key="i">
<pre>{{item}}</pre>
</p>
</div>
</Panel>
<Panel>
Objective-C
<div slot="content">
<p v-for="(item, i) in entities.oc" :key="i">
<pre>{{item}}</pre>
</p>
</div>
</Panel>
</Collapse>
</Tab-pane>
</Tabs>
</div>
</template>
<script>
import {
getJavaScriptEntities,
getObjectiveCEntities
} from 'swagger-parser-mock/lib/entity'
import jsBeautify from 'js-beautify/js/lib/beautify'
import DataTypeExpand from './data-type-expand'
export default {
props: {
mock: {}
},
data () {
return {
columnsRequest: [
{
type: 'expand',
width: 50,
render: (h, params) => h(DataTypeExpand, { props: { data: params.row.parameter } })
},
{ title: this.$t('p.detail.expand.columnsRequest[0]'), key: 'name' },
{ title: this.$t('p.detail.expand.columnsRequest[1]'), key: 'description' },
{ title: this.$t('p.detail.expand.columnsRequest[2]'), key: 'paramType' },
{ title: this.$t('p.detail.expand.columnsRequest[3]'), key: 'dataType' }
],
columnsResponse: [
{
type: 'expand',
width: 50,
render: (h, params) => h(DataTypeExpand, { props: { data: params.row.response } })
},
{ title: this.$t('p.detail.expand.columnsResponse[0]'), key: 'code' },
{ title: this.$t('p.detail.expand.columnsResponse[1]'), key: 'message' }
]
}
},
computed: {
request () {
const parameters = this.mock.parameters ? JSON.parse(this.mock.parameters) : []
return parameters.map(parameter => ({
name: parameter.name,
description: parameter.description || this.$t('p.detail.expand.defaultDescription'),
paramType: parameter.in,
dataType: this.getParamDataType(parameter),
parameter: parameter
}))
},
response () {
const responseModel = this.mock.response_model ? JSON.parse(this.mock.response_model) : {}
return Object.keys(responseModel).map(code => {
const response = responseModel[code]
return {
code: code,
message: response.message || response.description || this.$t('p.detail.expand.defaultDescription'),
response: response
}
})
},
entities () {
const res = this.response.filter(o => {
const code = o.code.toString()
return code === '200' || code === 'default'
})[0]
const response = res ? res.response : {}
return {
js: getJavaScriptEntities(response).map(o => jsBeautify.js_beautify(o, { indent_size: 2 })),
oc: getObjectiveCEntities(response)
}
}
},
methods: {
getParamDataType (parameter) {
const { type, schema } = parameter
if (type) return type
if (schema && schema.type) {
return schema.type === 'array' ? schema.items.type : schema.type
}
}
}
}
</script>