tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:修改http数据集样式

Browse Source
main
liu.shiyi 2 years ago
parent 64d6adf106
commit c88ca74ba7
1 changed files with 212 additions and 216 deletions
Show Stats Download Patch File Download Diff File

428
data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue
Unescape Escape View File

@ -146,6 +146,40 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="请求类型"
prop="config.method"
>
<el-radio-group
v-model="dataForm.config.method"
class="bs-radio-wrap"
>
<el-radio-button label="get">
GET
</el-radio-button>
<el-radio-button label="post">
POST
</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="请求地址"
prop="config.url"
>
<el-input
v-model="dataForm.config.url"
autocomplete="off"
class="bs-el-input"
placeholder="请输入静态请求地址或动态请求地址，动态请求地址必须以${baseUrl}开头"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item
@ -160,186 +194,193 @@
</el-form-item>
</el-col>
</el-row>
<el-form-item
label="请求类型"
prop="config.method"
<el-tabs
v-model="activeName"
class="bs-el-tabs tabs-box"
>
<el-radio-group
v-model="dataForm.config.method"
class="bs-radio-wrap"
<el-tab-pane
label="请求头"
name="head"
>
<el-radio-button label="get">
GET
</el-radio-button>
<el-radio-button label="post">
POST
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
label="请求地址"
prop="config.url"
>
<el-input
v-model="dataForm.config.url"
autocomplete="off"
class="bs-el-input"
placeholder="请输入静态请求地址或动态请求地址，动态请求地址必须以${baseUrl}开头"
clearable
/>
</el-form-item>
<el-form-item
label="请求头"
prop="config.headers"
>
<el-button
type="primary"
@click="addHeader"
>
增加
</el-button>
<el-row
v-for="(item,index) in dataForm.config.headers"
:key="index"
:gutter="10"
:span="21"
>
<el-col :span="5">
<el-form-item
label="键"
:prop="'config.headers.'+index+'.key'"
label-width="50px"
:rules="rules.key"
>
<el-input
v-model="dataForm.config.headers[index].key"
placeholder="请输入键"
clearable
@blur="dataForm.config.headers[index].key = inputChange($event)"
/>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="值"
:prop="'config.headers.'+index+'.value'"
label-width="50px"
:rules="rules.value"
>
<el-input
v-model="dataForm.config.headers[index].value"
placeholder="请输入值"
clearable
@blur="dataForm.config.headers[index].value = inputChange($event)"
/>
</el-form-item>
</el-col>
<el-col
:span="2"
style="text-align: center"
<el-form-item
label="请求头"
prop="config.headers"
label-width="70px"
>
<el-button
type="primary"
@click="delHeader(index)"
@click="addHeader"
>
移除
增加
</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item
label="请求参数"
prop="config.params"
:rules="dataForm.config.method==='get'?rules.params:[{ required: false}]"
>
<el-button
type="primary"
@click="addParam"
>
增加
</el-button>
<el-row
v-for="(item,index) in dataForm.config.params"
:key="index"
:gutter="10"
:span="21"
>
<el-col :span="7">
<el-form-item
label="键"
:prop="'config.params.'+index+'.key'"
label-width="50px"
:rules="rules.key"
<el-row
v-for="(item,index) in dataForm.config.headers"
:key="index"
:gutter="10"
:span="21"
>
<el-input
v-model="dataForm.config.params[index].key"
placeholder="请输入键"
clearable
@blur="dataForm.config.params[index].key = inputChange($event)"
/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
label="值"
:prop="'config.params.'+index+'.value'"
label-width="50px"
:rules="rules.value"
>
<el-input
v-model="dataForm.config.params[index].value"
placeholder="请输入值"
clearable
@blur="dataForm.config.params[index].value = inputChange($event)"
/>
</el-form-item>
</el-col>
<el-col
:span="2"
style="text-align: center"
<el-col :span="5">
<el-form-item
label="键"
:prop="'config.headers.'+index+'.key'"
label-width="50px"
:rules="rules.key"
>
<el-input
v-model="dataForm.config.headers[index].key"
placeholder="请输入键"
clearable
@blur="dataForm.config.headers[index].key = inputChange($event)"
/>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item
label="值"
:prop="'config.headers.'+index+'.value'"
label-width="50px"
:rules="rules.value"
>
<el-input
v-model="dataForm.config.headers[index].value"
placeholder="请输入值"
clearable
@blur="dataForm.config.headers[index].value = inputChange($event)"
/>
</el-form-item>
</el-col>
<el-col
:span="2"
style="text-align: center"
>
<el-button
type="primary"
@click="delHeader(index)"
>
移除
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-tab-pane>
<el-tab-pane
label="请求参数"
name="param"
>
<el-form-item
label="请求参数"
prop="config.params"
label-width="70px"
:rules="dataForm.config.method==='get'?rules.params:[{ required: false}]"
>
<el-button
type="primary"
@click="delParam(index)"
@click="addParam"
>
移除
增加
</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item
v-if="dataForm.config.method === 'post'"
label="请求体"
prop="requestScript"
>
<el-input
v-model="dataForm.config.body"
class="bs-el-input"
type="textarea"
:autosize="{ minRows: 10, maxRows: 10}"
clearable
/>
</el-form-item>
<el-form-item
label="请求脚本"
prop="requestScript"
>
<codemirror
v-model.trim="dataForm.config.requestScript"
:options="codemirrorOption"
class="code"
/>
</el-form-item>
<el-form-item
label="响应脚本"
prop="responseScript"
>
<codemirror
v-model.trim="dataForm.config.responseScript"
:options="codemirrorOption"
class="code"
/>
</el-form-item>
<el-row
v-for="(item,index) in dataForm.config.params"
:key="index"
:gutter="10"
:span="21"
>
<el-col :span="7">
<el-form-item
label="键"
:prop="'config.params.'+index+'.key'"
label-width="50px"
:rules="rules.key"
>
<el-input
v-model="dataForm.config.params[index].key"
placeholder="请输入键"
clearable
@blur="dataForm.config.params[index].key = inputChange($event)"
/>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item
label="值"
:prop="'config.params.'+index+'.value'"
label-width="50px"
:rules="rules.value"
>
<el-input
v-model="dataForm.config.params[index].value"
placeholder="请输入值"
clearable
@blur="dataForm.config.params[index].value = inputChange($event)"
/>
</el-form-item>
</el-col>
<el-col
:span="2"
style="text-align: center"
>
<el-button
type="primary"
@click="delParam(index)"
>
移除
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-tab-pane>
<el-tab-pane
v-if="dataForm.config.method === 'post'"
label="请求体"
name="second"
>
<el-form-item
label="请求体"
prop="requestScript"
label-width="70px"
>
<el-input
v-model="dataForm.config.body"
class="bs-el-input"
type="textarea"
:autosize="{ minRows: 10, maxRows: 10}"
clearable
/>
</el-form-item>
</el-tab-pane>
<el-tab-pane
label="请求脚本"
name="reqScript"
>
<el-form-item
label="请求脚本"
prop="requestScript"
label-width="70px"
>
<codemirror
v-model.trim="dataForm.config.requestScript"
:options="codemirrorOption"
class="code"
/>
</el-form-item>
</el-tab-pane>
<el-tab-pane
label="响应脚本"
name="respScript"
>
<el-form-item
label="响应脚本"
prop="responseScript"
label-width="70px"
>
<codemirror
v-model.trim="dataForm.config.responseScript"
:options="codemirrorOption"
class="code"
/>
</el-form-item>
</el-tab-pane>
</el-tabs>
</el-form>
<div
v-if="isEdit"
@ -629,6 +670,7 @@ export default {
}
}
return {
activeName: 'head',
options: [{
value: 'string',
label: '字符串'
@ -688,7 +730,6 @@ export default {
completeSingle: true
}
},
activeName: 'data',
dataPreviewList: [],
outputFieldList: [],
structurePreviewListCopy: [],
@ -878,54 +919,6 @@ export default {
})
this.fieldDesc = fieldDesc
},
// // 配置完参数后，将参数的值放入到对应的请求位置进行替换
// replaceParams (paramsList) {
// this.newDataForm = _.cloneDeep(this.dataForm)
// this.newDataForm.config.url = this.evalStrFunc(paramsList, this.newDataForm.config.url)
// this.newDataForm.config.headers = this.evalArrFunc(paramsList, this.newDataForm.config.headers)
// this.newDataForm.config.params = this.evalArrFunc(paramsList, this.newDataForm.config.params)
// this.newDataForm.config.body = this.evalStrFunc(paramsList, this.newDataForm.config.body)
// },
// evalStrFunc (paramsList, string) {
// // 取name作为变量名, value作为变量值 { name: '站三', token: '123'}
// const params = paramsList.reduce((acc, cur) => {
// acc[cur.name] = cur.value
// return acc
// }, {})
// // 将url中 ${xxx} 替换成 ${params.xxx}
// const str = string.replace(/\$\{(\w+)\}/g, (match, p1) => {
// return '${params.' + p1 + '}'
// })
// const transformStr = ''
// // 将字符串中的${}替换为变量, 使用eval执行
// eval('transformStr = `' + str + '`')
// return transformStr
// },
// evalArrFunc (paramsList, arr) {
// // 取name作为变量名, value作为变量值 { name: '站三', token: '123'}
// const params = paramsList.reduce((acc, cur) => {
// acc[cur.name] = cur.value
// return acc
// }, {})
//
// // 取name作为变量名, value作为变量值 { _name: '${name}', _token: '${token}'}
// const paramsListObj = arr.reduce((acc, cur) => {
// acc[cur.key] = cur.value
// return acc
// }, {})
// // 转成字符串
// const paramsListStr = JSON.stringify(paramsListObj)
//
// // 将url中 ${xxx} 替换成 ${params.xxx}
// const str = paramsListStr.replace(/\$\{(\w+)\}/g, (match, p1) => {
// return '${params.' + p1 + '}'
// })
// const transformStr = ''
// // 将字符串中的${}替换为变量, 使用eval执行
// eval('transformStr = `' + str + '`')
// const obj = JSON.parse(transformStr)
// return obj
// },
// 获取请求地址、请求头、请求参数、请求体中所有的变量，在动态参数中进行变量
getPramsList () {
const paramNames1 = this.getValName(this.dataForm.config.url)
@ -1222,4 +1215,7 @@ export default {
.tree-box {
padding: 0;
}
.tabs-box{
margin-left: 45px;
}
</style>

Write Preview
Loading…
Cancel
Save