|
@@ -19,7 +19,7 @@
|
|
|
</template>
|
|
|
<div class="hc-http-form-box">
|
|
|
<div class="http-form-config">
|
|
|
- <div class="title">快速配置</div>
|
|
|
+ <div class="title-box">快速配置</div>
|
|
|
<div class="config-item">
|
|
|
<div class="name-box">
|
|
|
<div class="name">携带 项目ID</div>
|
|
@@ -40,26 +40,45 @@
|
|
|
</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 class="title-box">
|
|
|
+ <div class="title">提交数据表单</div>
|
|
|
+ <div class="extra">
|
|
|
+ <HcNewSwitch :datas="formDataTypeTab" :keys="formDataTypeKey" @change="formDataTypeChange"/>
|
|
|
</div>
|
|
|
- </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="hc-table-ref-box form-data">
|
|
|
+ <el-table :data="formDataTable" height="100%" row-key="key" border default-expand-all>
|
|
|
+ <el-table-column prop="key" label="字段名称" width="220">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-model="scope.row.key"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="val" label="参数内容">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-input v-model="scope.row.val"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="action" label="操作" width="280" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="primary" plain size="small">
|
|
|
+ <HcIcon name="add-circle"/>
|
|
|
+ <span>添加同级</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary" plain size="small">
|
|
|
+ <HcIcon name="add-circle"/>
|
|
|
+ <span>添加子级</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="danger" plain size="small">
|
|
|
+ <HcIcon name="delete-bin-2"/>
|
|
|
+ <span>删除</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="http-form-res">
|
|
|
- <div class="title">返回数据</div>
|
|
|
+ <div class="title-box">返回数据</div>
|
|
|
res
|
|
|
</div>
|
|
|
</div>
|
|
@@ -111,10 +130,26 @@ const searchClick = () => {
|
|
|
|
|
|
}
|
|
|
|
|
|
-const formDataRef = ref(null)
|
|
|
-const formDataModel = ref({
|
|
|
- key: '', val: ''
|
|
|
-})
|
|
|
+//结构类型tab数据和相关处理
|
|
|
+const formDataTypeKey = ref('form')
|
|
|
+const formDataTypeTab = ref([
|
|
|
+ {key:'form', name: '表单模式'},
|
|
|
+ {key:'code', name: '编辑模式'}
|
|
|
+]);
|
|
|
+const formDataTypeChange = (item) => {
|
|
|
+ formDataTypeKey.value = item?.key;
|
|
|
+}
|
|
|
+
|
|
|
+//表单表格数据
|
|
|
+const formDataTable = ref([
|
|
|
+ {
|
|
|
+ key: '1', val: '1',
|
|
|
+ children: [
|
|
|
+ {key: '2', val: '2'},
|
|
|
+ {key: '3', val: '3'},
|
|
|
+ ]
|
|
|
+ }
|
|
|
+])
|
|
|
|
|
|
</script>
|
|
|
|
|
@@ -149,6 +184,9 @@ const formDataModel = ref({
|
|
|
position: relative;
|
|
|
padding: 0 24px;
|
|
|
flex: 1;
|
|
|
+ .hc-table-ref-box.form-data {
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ }
|
|
|
}
|
|
|
.http-form-res {
|
|
|
flex: 1;
|
|
@@ -157,12 +195,25 @@ const formDataModel = ref({
|
|
|
border-left: 1px solid #e4e7ed;
|
|
|
}
|
|
|
.http-form-config, .http-form-data, .http-form-res {
|
|
|
- .title {
|
|
|
+ .title-box {
|
|
|
position: relative;
|
|
|
margin-bottom: 20px;
|
|
|
font-size: 18px;
|
|
|
font-weight: 400;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.http-form-data .hc-table-ref-box.form-data .el-table td.el-table__cell div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|