|
@@ -17,8 +17,51 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div>
|
|
|
- 123456
|
|
|
+ <div class="hc-http-form-box">
|
|
|
+ <div class="http-form-config">
|
|
|
+ <div class="title">快速配置</div>
|
|
|
+ <div class="config-item">
|
|
|
+ <div class="name-box">
|
|
|
+ <div class="name">携带 项目ID</div>
|
|
|
+ <div class="val">{{projectId}}</div>
|
|
|
+ </div>
|
|
|
+ <span class="switch">
|
|
|
+ <el-switch v-model="httpForm.data.projectId" inline-prompt :active-value="projectId" active-text="是" inactive-value="" inactive-text="否" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="config-item">
|
|
|
+ <div class="name-box">
|
|
|
+ <div class="name">携带 合同段ID</div>
|
|
|
+ <div class="val">{{contractId}}</div>
|
|
|
+ </div>
|
|
|
+ <span class="switch">
|
|
|
+ <el-switch v-model="httpForm.data.contractId" inline-prompt :active-value="contractId" active-text="是" inactive-value="" inactive-text="否"/>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="http-form-data">
|
|
|
+ <div class="title">提交表单</div>
|
|
|
+ <el-form ref="formDataRef" :model="formDataModel" label-width="auto" size="large">
|
|
|
+ <div class="hc-form-item">
|
|
|
+ <el-form-item label="字段">
|
|
|
+ <el-input v-model="formDataModel.key"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容">
|
|
|
+ <el-input v-model="formDataModel.val"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="操作">
|
|
|
+ <el-button>
|
|
|
+ <HcIcon name="edit"/>
|
|
|
+ <span>删除</span>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="http-form-res">
|
|
|
+ <div class="title">返回数据</div>
|
|
|
+ res
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<template #action>
|
|
|
<el-button type="primary" hc-btn>
|
|
@@ -53,7 +96,7 @@ const typeData = ref([ 'GET', 'POST'])
|
|
|
|
|
|
//搜索表单
|
|
|
const httpForm = ref({
|
|
|
- type: 'GET', url: ''
|
|
|
+ type: 'GET', url: '', data: { projectId: '', contractId: '' }
|
|
|
})
|
|
|
|
|
|
//回车搜索
|
|
@@ -67,8 +110,59 @@ const keyUpEvent = (e) => {
|
|
|
const searchClick = () => {
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+const formDataRef = ref(null)
|
|
|
+const formDataModel = ref({
|
|
|
+ key: '', val: ''
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
+.hc-http-form-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ .http-form-config {
|
|
|
+ position: relative;
|
|
|
+ padding-right: 24px;
|
|
|
+ border-right: 1px solid #e4e7ed;
|
|
|
+ .config-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 14px 0;
|
|
|
+ .name-box {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 40px;
|
|
|
+ .val {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .config-item + .config-item {
|
|
|
+ border-top: 1px solid #e4e7ed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .http-form-data {
|
|
|
+ position: relative;
|
|
|
+ padding: 0 24px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .http-form-res {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 24px;
|
|
|
+ border-left: 1px solid #e4e7ed;
|
|
|
+ }
|
|
|
+ .http-form-config, .http-form-data, .http-form-res {
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|