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

feat: http数据集新增表单的选择分组添加必填校验

Browse Source
main
wu.jian2 2 years ago
parent aaac5c8df9
commit 0c44876514
1 changed files with 52 additions and 36 deletions
Show Stats Download Patch File Download Diff File

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

@ -63,6 +63,7 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item <el-form-item
label="分组" label="分组"
prop="typeId"
> >
<el-select <el-select
ref="selectParentName" ref="selectParentName"
@ -190,7 +191,7 @@
<LabelSelect <LabelSelect
:dataset-id="datasetId" :dataset-id="datasetId"
:id-list="dataForm.labelIds" :id-list="dataForm.labelIds"
@commit="(ids) =>{dataForm.labelIds = ids}" @commit="(ids) => { dataForm.labelIds = ids }"
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -239,7 +240,7 @@
label-width="0px" label-width="0px"
> >
<el-row <el-row
v-for="(item,index) in dataForm.config.headers" v-for="(item, index) in dataForm.config.headers"
:key="index" :key="index"
:gutter="10" :gutter="10"
:span="24" :span="24"
@ -247,7 +248,7 @@
<el-col :span="11"> <el-col :span="11">
<el-form-item <el-form-item
label="键" label="键"
:prop="'config.headers.'+index+'.key'" :prop="'config.headers.' + index + '.key'"
label-width="50px" label-width="50px"
:rules="rules.key" :rules="rules.key"
> >
@ -263,7 +264,7 @@
<el-col :span="11"> <el-col :span="11">
<el-form-item <el-form-item
label="值" label="值"
:prop="'config.headers.'+index+'.value'" :prop="'config.headers.' + index + '.value'"
label-width="50px" label-width="50px"
:rules="rules.value" :rules="rules.value"
> >
@ -310,10 +311,10 @@
<el-form-item <el-form-item
prop="config.params" prop="config.params"
label-width="0px" label-width="0px"
:rules="dataForm.config.method==='get'?rules.params:[{ required: false}]" :rules="dataForm.config.method === 'get' ? rules.params : [{ required: false }]"
> >
<el-row <el-row
v-for="(item,index) in dataForm.config.params" v-for="(item, index) in dataForm.config.params"
:key="index" :key="index"
:gutter="10" :gutter="10"
:span="24" :span="24"
@ -322,7 +323,7 @@
<el-col :span="11"> <el-col :span="11">
<el-form-item <el-form-item
label="键" label="键"
:prop="'config.params.'+index+'.key'" :prop="'config.params.' + index + '.key'"
label-width="50px" label-width="50px"
:rules="rules.key" :rules="rules.key"
> >
@ -338,7 +339,7 @@
<el-col :span="11"> <el-col :span="11">
<el-form-item <el-form-item
label="值" label="值"
:prop="'config.params.'+index+'.value'" :prop="'config.params.' + index + '.value'"
label-width="50px" label-width="50px"
:rules="rules.value" :rules="rules.value"
> >
@ -391,11 +392,13 @@
v-model="dataForm.config.body" v-model="dataForm.config.body"
class="bs-el-input" class="bs-el-input"
type="textarea" type="textarea"
:autosize="{ minRows: 10, maxRows: 10}" :autosize="{ minRows: 10, maxRows: 10 }"
clearable clearable
/> />
<div class="bs-codemirror-bottom-text"> <div class="bs-codemirror-bottom-text">
<strong>请求体设置规则： 请在脚本中直接输入请求体内容，如涉及变量，请按照${XX}格式进行设置<br> 例如：<span style="color: red;">{"name":${name}}</span> <strong>请求体设置规则： 请在脚本中直接输入请求体内容，如涉及变量，请按照${XX}格式进行设置<br> 例如：<span
style="color: red;"
>{"name":${name}}</span>
</strong> </strong>
</div> </div>
</el-form-item> </el-form-item>
@ -409,19 +412,25 @@
label-width="0px" label-width="0px"
> >
<codemirror <codemirror
v-if="activeName==='reqScript'" v-if="activeName === 'reqScript'"
v-model.trim="dataForm.config.requestScript" v-model.trim="dataForm.config.requestScript"
:options="codemirrorOption" :options="codemirrorOption"
class="code" class="code"
/> />
<div <div class="bs-codemirror-bottom-text">
class="bs-codemirror-bottom-text"
>
<strong>请求脚本设置规则： 请求脚本已经内置参数req，可参考下面的示例进行配置: <strong>请求脚本设置规则： 请求脚本已经内置参数req，可参考下面的示例进行配置:
<br> 如修改请求地址中对应参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">req.url.age=17</span> <br> 如修改请求地址中对应参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
<br> 如修改请求头中对应参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">req.headers.name='tom'</span> style="color: red;"
<br> 如修改请求参数中对应参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">req.params.age=17</span> >req.url.age=17</span>
<br> 如修改请求体中对应参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;">req.data='{"name":"223"}'</span> <br> 如修改请求头中对应参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
style="color: red;"
>req.headers.name='tom'</span>
<br> 如修改请求参数中对应参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
style="color: red;"
>req.params.age=17</span>
<br> 如修改请求体中对应参数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
style="color: red;"
>req.data='{"name":"223"}'</span>
</strong> </strong>
</div> </div>
</el-form-item> </el-form-item>
@ -435,7 +444,7 @@
label-width="0px" label-width="0px"
> >
<codemirror <codemirror
v-if="activeName==='respScript'" v-if="activeName === 'respScript'"
v-model.trim="dataForm.config.responseScript" v-model.trim="dataForm.config.responseScript"
:options="codemirrorOption" :options="codemirrorOption"
class="code" class="code"
@ -444,7 +453,8 @@
v-if="dataForm.config.requestType === 'frontend'" v-if="dataForm.config.requestType === 'frontend'"
class="bs-codemirror-bottom-text" class="bs-codemirror-bottom-text"
> >
<strong>响应脚本设置规则： 接口返回数据已经内置到参数resp中，可直接使用，但是必须要返回设置后的数据。<br> 例如：<span style="color: red;">return resp.data</span> <strong>响应脚本设置规则： 接口返回数据已经内置到参数resp中，可直接使用，但是必须要返回设置后的数据。<br> 例如：<span style="color: red;">return
resp.data</span>
</strong> </strong>
</div> </div>
<div <div
@ -503,9 +513,9 @@
@click="openParamsSetDialog(false)" @click="openParamsSetDialog(false)"
> >
<span>{{ param.name }}</span>&nbsp;<span <span>{{ param.name }}</span>&nbsp;<span
v-show="param.remark" v-show="param.remark"
style="color: #909399;" style="color: #909399;"
> >
({{ param.remark }}) ({{ param.remark }})
</span> </span>
<el-button <el-button
@ -530,9 +540,7 @@
配置 配置
</el-button> </el-button>
</div> </div>
<div <div class="field-wrap bs-field-wrap bs-scrollbar">
class="field-wrap bs-field-wrap bs-scrollbar"
>
<div <div
v-for="(field, key) in outputFieldList" v-for="(field, key) in outputFieldList"
:key="key" :key="key"
@ -597,9 +605,7 @@
v-if="!isEdit" v-if="!isEdit"
class="dataPreView" class="dataPreView"
> >
<el-tabs <el-tabs v-model="activeName">
v-model="activeName"
>
<el-tab-pane <el-tab-pane
v-loading="tableLoading" v-loading="tableLoading"
label="数据预览" label="数据预览"
@ -804,6 +810,9 @@ export default {
{ required: true, message: '请输入数据集名称', trigger: 'blur' }, { required: true, message: '请输入数据集名称', trigger: 'blur' },
{ validator: validateName, trigger: 'blur' } { validator: validateName, trigger: 'blur' }
], ],
typeId: [
{ required: true, message: '请选择分组', trigger: 'blur' }
],
'config.requestType': [ 'config.requestType': [
{ required: true, message: '请选择调用方式', trigger: 'change' } { required: true, message: '请选择调用方式', trigger: 'change' }
], ],
@ -1384,28 +1393,34 @@ export default {
.tree-box { .tree-box {
padding: 0; padding: 0;
} }
.tabs-box{
.tabs-box {
margin-left: 45px; margin-left: 45px;
} }
.add-btn{
.add-btn {
width: 100%; width: 100%;
text-align: center; text-align: center;
border: 1px dashed #696A6E; border: 1px dashed #696A6E;
color: #fff; color: #fff;
&:hover{
&:hover {
cursor: pointer; cursor: pointer;
border: 1px dashed var(--bs-el-color-primary); border: 1px dashed var(--bs-el-color-primary);
color: var(--bs-el-color-primary); color: var(--bs-el-color-primary);
} }
} }
.delete-btn{
.delete-btn {
color: rgb(228, 116, 112); color: rgb(228, 116, 112);
&:hover{
&:hover {
cursor: pointer; cursor: pointer;
} }
} }
.preview-table{
max-height: 300px!important; .preview-table {
max-height: 300px !important;
} }
/*滚动条样式*/ /*滚动条样式*/
@ -1414,6 +1429,7 @@ export default {
border-radius: 4px; border-radius: 4px;
height: 4px; height: 4px;
} }
::v-deep ::-webkit-scrollbar-thumb { ::v-deep ::-webkit-scrollbar-thumb {
background: #fff !important; background: #fff !important;
border-radius: 10px; border-radius: 10px;

Write Preview
Loading…
Cancel
Save