You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
SOP/sop-website/sop-website-vue/src/components/DocView/index.vue

269 lines
7.6 KiB

<template>
<div>
<h2>{{ docInfo.summary }}</h2>
<el-table
:data="[{ methodLabel: '接口名(method)', methodValue: docInfo.name, versionLabel: '版本号(version)', versionValue: docInfo.version }]"
border
:cell-style="baseInfoCellStyle"
:show-header="false"
>
<el-table-column prop="methodLabel" align="center" width="130">
<template slot-scope="scope"><span class="api-info">{{ scope.row.methodLabel }}</span></template>
</el-table-column>
<el-table-column prop="methodValue" />
<el-table-column prop="versionLabel" align="center" width="130">
<template slot-scope="scope"><span class="api-info">{{ scope.row.versionLabel }}</span></template>
</el-table-column>
<el-table-column prop="versionValue" width="120" />
</el-table>
<h3>接口描述</h3>
<div class="doc-overview">{{ docInfo.description || docInfo.title }}</div>
<h3>请求地址</h3>
<el-table
:data="[{ envLabel: '环境', envValue: '正式环境', urlLabel: '请求地址', urlValue: urlProd }]"
border
:cell-style="baseInfoCellStyle"
:show-header="false"
>
<el-table-column align="center" width="100">
<template slot-scope="scope"><span class="api-info">{{ scope.row.envLabel }}</span></template>
</el-table-column>
<el-table-column prop="envValue" width="140" />
<el-table-column align="center" width="100">
<template slot-scope="scope"><span class="api-info">{{ scope.row.urlLabel }}</span></template>
</el-table-column>
<el-table-column prop="urlValue" />
</el-table>
<h3>请求方法</h3>
<div class="doc-request-method">
{{ docInfo.httpMethodList && docInfo.httpMethodList.join(' / ').toUpperCase() }}
</div>
<h2>请求参数</h2>
<h3>公共请求参数</h3>
<el-table
:data="commonParams"
:cell-style="cellStyleSmall()"
:header-cell-style="headCellStyleSmall()"
border
>
<el-table-column
prop="name"
label="名称"
width="200"
/>
<el-table-column
prop="type"
label="类型"
width="100"
/>
<el-table-column
prop="must"
label="必须"
width="60"
>
<template slot-scope="scope">
<span :class="scope.row.must ? 'danger' : ''">{{ scope.row.must ? '是' : '否' }}</span>
</template>
</el-table-column>
<el-table-column
prop="description"
label="描述"
>
<template slot-scope="scope">
{{ scope.row.description }}
<span v-if="scope.row.name === 'sign'">,
<router-link target="_blank" to="/help?id=sign">
<el-button type="text">签名算法介绍</el-button>
</router-link>
</span>
</template>
</el-table-column>
<el-table-column
prop="example"
label="示例值"
/>
</el-table>
<h3>业务请求参数</h3>
<parameter-table :data="docInfo.requestParameters" />
<h2>响应参数</h2>
<h3>公共响应参数</h3>
<el-table
:data="commonResult"
:cell-style="cellStyleSmall()"
:header-cell-style="headCellStyleSmall()"
border
>
<el-table-column
prop="name"
label="名称"
width="200"
/>
<el-table-column
prop="type"
label="类型"
width="100"
/>
<el-table-column
prop="description"
label="描述"
/>
<el-table-column
prop="example"
label="示例值"
/>
</el-table>
<h3>业务响应参数</h3>
<parameter-table :data="docInfo.responseParameters" />
<h3>响应示例</h3>
<pre class="normal-text">{{ JSON.stringify(responseSuccessExample, null, 4) }}</pre>
<h3>错误示例</h3>
<pre class="normal-text">{{ JSON.stringify(responseErrorExample, null, 4) }}</pre>
<h2>业务错误码</h2>
<router-link target="_blank" to="/code">
<el-button type="text">公共错误码</el-button>
</router-link>
<el-table
:data="docInfo.bizCodeList"
border
:cell-style="cellStyleSmall()"
:header-cell-style="headCellStyleSmall()"
>
<el-table-column
prop="code"
label="sub_code(错误码)"
width="300"
/>
<el-table-column
prop="msg"
label="sub_msg(错误描述)"
/>
<el-table-column
prop="solution"
label="解决方案"
/>
</el-table>
</div>
</template>
<script>
import ParameterTable from '@/components/ParameterTable'
export default {
name: 'DocView',
components: { ParameterTable },
props: {
item: {
type: Object,
default: () => {}
},
urlProd: {
type: String,
default: ''
}
},
data() {
return {
active: 'info',
baseInfoCellStyle: (row) => {
if (row.columnIndex === 0 || row.columnIndex === 2) {
return { padding: '5px 0', background: '#f5f7fa' }
} else {
return { padding: '5px 0' }
}
},
commonParams: [],
commonResult: [],
docBaseInfoData: [],
docInfo: {
summary: '',
httpMethodList: [],
requestParameters: [],
responseParameters: [],
bizCodes: []
},
responseSuccessExample: {},
responseErrorExample: {
error_response: {
request_id: '0d27836fcac345729176359388aeeb74',
code: '40004',
msg: '业务处理失败',
sub_code: 'isv.name-error',
sub_msg: '姓名错误'
}
}
}
},
watch: {
item(newVal) {
this.initItem(newVal)
}
},
created() {
this.getFile('static/params.json', (json) => {
this.commonParams = json.commonParams
this.commonResult = json.commonResult
})
},
methods: {
initItem(item) {
this.setData(item)
},
setData: function(data) {
this.docInfo = data
this.createResponseExample(data)
},
createResponseExample: function(data) {
const ret = {}
const responseData = {
request_id: '4b8e7ca9cbcb448491df2f0120e49b9d',
code: '10000',
msg: 'success'
}
ret[this.getResponseNodeName()] = responseData
const bizRet = this.createExample(data.responseParameters)
for (const key in bizRet) {
responseData[key] = bizRet[key]
}
this.responseSuccessExample = ret
},
createExample: function(params) {
const responseJson = {}
for (let i = 0; i < params.length; i++) {
const row = params[i]
if (row.in === 'header') {
continue
}
let val
// 如果有子节点
if (row.refs && row.refs.length > 0) {
const childrenValue = this.createExample(row.refs)
// 如果是数组
if (row.type === 'array') {
val = [childrenValue]
} else {
val = childrenValue
}
} else {
// 单值
val = row.paramExample
}
responseJson[row.name] = val
}
const isOneArray = Object.keys(responseJson).length === 1 && this.isArray(Object.values(responseJson)[0])
if (isOneArray) {
return Object.values(responseJson)[0]
}
return responseJson
},
getResponseNodeName: function() {
const name = this.docInfo.name
return name.replace(/\./g, '_') + '_response'
}
}
}
</script>
<style scoped>
.api-info {font-weight: bold;}
.doc-overview {margin-top: 20px;margin-bottom: 30px;color: #666;font-size: 14px;}
.doc-request-method {margin-bottom: 20px;color: #666;font-size: 14px;}
</style>