|
|
@@ -3,11 +3,11 @@
|
|
|
<el-col :span="6" style="border-right: 1px solid #000; padding-right: 20px">
|
|
|
<!-- 顶部工具栏 -->
|
|
|
<el-form :model="headerFormData" label-width="auto">
|
|
|
- <el-form-item label="数据源名称">
|
|
|
- <el-input v-model="headerFormData.datasetName" placeholder="请输入"></el-input>
|
|
|
- </el-form-item>
|
|
|
<el-form-item label="接口服务名称">
|
|
|
- <el-input v-model="headerFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="headerFormData.apiName" placeholder="请输入"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="接口提供方URL地址">
|
|
|
+ <el-input v-model="headerFormData.offerUrl" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="onSearch">查询</el-button>
|
|
|
@@ -16,49 +16,74 @@
|
|
|
</el-form>
|
|
|
<!-- 左侧表格 -->
|
|
|
|
|
|
- <el-table :data="leftTableData" border max-height="500" style="width: 100%; margin-right: 10px">
|
|
|
+ <el-table
|
|
|
+ :data="currentLeftTableData"
|
|
|
+ border
|
|
|
+ max-height="500"
|
|
|
+ style="width: 100%; margin-right: 10px"
|
|
|
+ >
|
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
|
- <el-table-column prop="name" label="接口服务名称"></el-table-column>
|
|
|
- <el-table-column prop="name" label="接口提供方URL地址"></el-table-column>
|
|
|
+ <el-table-column prop="apiName" label="接口服务名称"></el-table-column>
|
|
|
+ <el-table-column prop="offerUrl" label="接口提供方URL地址"></el-table-column>
|
|
|
<el-table-column label="操作" width="120">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button type="text" @click="onEyeClick(scope.row)" icon="el-icon-view"></el-button>
|
|
|
- <el-button type="text" @click="onEyeClick(scope.row)" icon="el-icon-delete"></el-button>
|
|
|
+ <el-button type="text" @click="onDeleteClick(scope.row)" icon="el-icon-delete"></el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<!-- 分页 -->
|
|
|
<div class="pagination-container">
|
|
|
- <el-pagination background layout="prev, pager, next" :current-page="pagination.currentPage"
|
|
|
- :page-size="pagination.pageSize" :total="pagination.total" @current-change="onPageChange"></el-pagination>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :current-page="pagination.currentPage"
|
|
|
+ :page-size="pagination.pageSize"
|
|
|
+ :total="pagination.total"
|
|
|
+ @current-change="onPageChange"
|
|
|
+ ></el-pagination>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="18" style="padding-left: 20px">
|
|
|
<div>六统一接入方式为API,必填此表</div>
|
|
|
<!-- 右侧表格 -->
|
|
|
- <div style="
|
|
|
+ <div
|
|
|
+ style="
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
align-items: center;
|
|
|
- ">
|
|
|
-
|
|
|
- <el-button type="primary">新增</el-button>
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="addClick">新增</el-button>
|
|
|
<el-button type="primary">上传</el-button>
|
|
|
<el-button type="primary">模版下载</el-button>
|
|
|
</div>
|
|
|
- <el-table ref="rightTable" :data="rightTableData" border style="width: 100%" :expand-row-keys="expandedRows"
|
|
|
- @expand-change="onExpandChange" :show-header="false" max-height="800">
|
|
|
+ <el-table
|
|
|
+ ref="rightTable"
|
|
|
+ :data="rightTableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ :expand-row-keys="expandedRows"
|
|
|
+ row-key="id"
|
|
|
+ @expand-change="onExpandChange"
|
|
|
+ :show-header="false"
|
|
|
+ max-height="800"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
<!-- 序号列 -->
|
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
|
|
|
|
<!-- 普通列 -->
|
|
|
- <el-table-column prop="name" label="表中文名">
|
|
|
+ <el-table-column prop="name" label="接口服务名称">
|
|
|
<template slot-scope="scope">
|
|
|
<div style="display: flex; align-items: center">
|
|
|
<div>接口服务名称</div>
|
|
|
- <el-input style="width: 260px; margin-left: 20px" v-model="scope.row.input"
|
|
|
- placeholder="请输入内容"></el-input>
|
|
|
+ <el-input
|
|
|
+ style="width: 260px; margin-left: 20px"
|
|
|
+ v-model="scope.row.apiName"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ ></el-input>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -66,8 +91,11 @@
|
|
|
<template slot-scope="scope">
|
|
|
<div style="display: flex; align-items: center">
|
|
|
<span>表英文名</span>
|
|
|
- <el-input style="width: 260px; margin-left: 20px" v-model="scope.row.input"
|
|
|
- placeholder="请输入内容"></el-input>
|
|
|
+ <el-input
|
|
|
+ style="width: 260px; margin-left: 20px"
|
|
|
+ v-model="scope.row.apiEnglishName"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ ></el-input>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -75,8 +103,11 @@
|
|
|
<template slot-scope="scope">
|
|
|
<div style="display: flex; align-items: center">
|
|
|
<span>接口描述</span>
|
|
|
- <el-input style="width: 260px; margin-left: 20px" v-model="scope.row.urlDetail"
|
|
|
- placeholder="请输入内容"></el-input>
|
|
|
+ <el-input
|
|
|
+ style="width: 260px; margin-left: 20px"
|
|
|
+ v-model="scope.row.apiDetail"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ ></el-input>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -85,288 +116,413 @@
|
|
|
<el-table-column type="expand">
|
|
|
<template slot-scope="props">
|
|
|
<div class="expanded-content">
|
|
|
- <el-form :model="apiFormData" label-width="auto" inline class="form-detail-inline"
|
|
|
- :label-position="right">
|
|
|
+ <el-form
|
|
|
+ :model="apiFormData"
|
|
|
+ label-width="auto"
|
|
|
+ inline
|
|
|
+ class="form-detail-inline"
|
|
|
+ :label-position="right"
|
|
|
+ >
|
|
|
<el-form-item label="应用场景">
|
|
|
- <el-input v-model="apiFormData.scenario" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.scenario" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="接口提供方">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.offer" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="接口提供方URL地址">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.offerUrl" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="支持格式">
|
|
|
- <el-input v-model="apiFormData.datasetName" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.format" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="接口调用方">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.access" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="接口接口调用方URL地址">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.accessUrl" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="请求方式">
|
|
|
- <el-input v-model="apiFormData.datasetName" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.requestMethod" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="六统一接口地址URL">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.sixUrl" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="调用方向">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.direction" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="调试频率">
|
|
|
- <el-input v-model="apiFormData.datasetName" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.applyCount" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="每频率内的条数">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.countNum" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="调用间隔说明">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.countDetail" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
-
|
|
|
<el-form-item label="联调的数据量">
|
|
|
- <el-input v-model="apiFormData.datasetName" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.num" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="联调实施步骤">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.steps" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="网络策略确认">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入"></el-input>
|
|
|
+ <el-input v-model="props.row.internet" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div class="title">接口定义</div>
|
|
|
<div class="table_title">Header请求参数</div>
|
|
|
- <el-table ref="rightTable" :data="rightTableData" border style="width: 100%">
|
|
|
+ <el-table
|
|
|
+ ref="rightTable"
|
|
|
+ :data="props.row.tabEtlHeaderSuns"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
<!-- 序号列 -->
|
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
|
|
|
|
<!-- 普通列 -->
|
|
|
<el-table-column prop="name" label="中文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="英文名称">
|
|
|
+ <el-table-column prop="englishName" label="英文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="数据类型">
|
|
|
+ <el-table-column prop="dataType" label="数据类型">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="是否必填">
|
|
|
+ <el-table-column prop="isRequired" label="是否必填">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-select v-model="scope.row.isRequired" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in whetherOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="描述">
|
|
|
+ <el-table-column prop="ps" label="描述">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="示例说明">
|
|
|
+ <el-table-column prop="example" label="示例说明">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column fixed="right" label="操作" width="100">
|
|
|
- <template :slot-scope="{ row }">
|
|
|
- <el-button type="text" size="small">删除</el-button>
|
|
|
+ <template :slot-scope="{ row, $index }">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="deleteHeaderRow(props.row, $index)"
|
|
|
+ >删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ class="mt-4"
|
|
|
+ style="width: 100%"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addHeaderRow(props.row)"
|
|
|
+ ></el-button>
|
|
|
<div class="table_title">Body请求参数说明</div>
|
|
|
- <el-table ref="rightTable" :data="rightTableData" border style="width: 100%">
|
|
|
+ <el-table
|
|
|
+ ref="rightTable"
|
|
|
+ :data="props.row.tabEtlBodySuns"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
<!-- 序号列 -->
|
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
|
|
|
|
<!-- 普通列 -->
|
|
|
<el-table-column prop="name" label="中文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="英文名称">
|
|
|
+ <el-table-column prop="englishName" label="英文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="数据类型">
|
|
|
+ <el-table-column prop="dataType" label="数据类型">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="是否必填">
|
|
|
+ <el-table-column prop="isRequired" label="是否必填">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-select v-model="scope.row.isRequired" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in whetherOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="描述">
|
|
|
+ <el-table-column prop="ps" label="描述">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="示例说明">
|
|
|
+ <el-table-column prop="example" label="示例说明">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column fixed="right" label="操作" width="100">
|
|
|
- <template :slot-scope="{ row }">
|
|
|
- <el-button type="text" size="small">删除</el-button>
|
|
|
+ <template :slot-scope="{ row, $index }">
|
|
|
+ <el-button type="text" size="small" @click="deleteBodyRow(props.row, $index)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ class="mt-4"
|
|
|
+ style="width: 100%"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addBodyRow(props.row)"
|
|
|
+ ></el-button>
|
|
|
|
|
|
<div class="table_title">Query请求参数说明</div>
|
|
|
- <el-table ref="rightTable" :data="rightTableData" border style="width: 100%">
|
|
|
+ <el-table
|
|
|
+ ref="rightTable"
|
|
|
+ :data="props.row.tabEtlQuerySuns"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
<!-- 序号列 -->
|
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
|
|
|
|
<!-- 普通列 -->
|
|
|
<el-table-column prop="name" label="中文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="英文名称">
|
|
|
+ <el-table-column prop="englishName" label="英文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="数据类型">
|
|
|
+ <el-table-column prop="dataType" label="数据类型">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="是否必填">
|
|
|
+ <el-table-column prop="isRequired" label="是否必填">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-select v-model="scope.row.isRequired" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in whetherOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="描述">
|
|
|
+ <el-table-column prop="ps" label="描述">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="示例说明">
|
|
|
+ <el-table-column prop="example" label="示例说明">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
<el-table-column fixed="right" label="操作" width="100">
|
|
|
- <template :slot-scope="{ row }">
|
|
|
- <el-button type="text" size="small">删除</el-button>
|
|
|
+ <template :slot-scope="{ row, $index }">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="deleteQueryRow(props.row, $index)"
|
|
|
+ >删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ class="mt-4"
|
|
|
+ style="width: 100%"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addQueryRow(props.row)"
|
|
|
+ ></el-button>
|
|
|
|
|
|
<div class="table_title">返回参数说明</div>
|
|
|
- <el-table ref="rightTable" :data="rightTableData" border style="width: 100%">
|
|
|
+ <el-table
|
|
|
+ ref="rightTable"
|
|
|
+ :data="props.row.tabEtlResponseSuns"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
<!-- 序号列 -->
|
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
|
|
|
|
<!-- 普通列 -->
|
|
|
<el-table-column prop="name" label="中文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="英文名称">
|
|
|
+ <el-table-column prop="englishName" label="英文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="数据类型">
|
|
|
+ <el-table-column prop="dataType" label="数据类型">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="是否必填">
|
|
|
+ <el-table-column prop="isRequired" label="是否必填">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-select v-model="scope.row.isRequired" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in whetherOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="描述">
|
|
|
+ <el-table-column prop="ps" label="描述">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="示例说明">
|
|
|
+ <el-table-column prop="example" label="示例说明">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
<el-table-column fixed="right" label="操作" width="100">
|
|
|
- <template :slot-scope="{ row }">
|
|
|
- <el-button type="text" size="small">删除</el-button>
|
|
|
+ <template :slot-scope="{ row, $index }">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="deleteResponseRow(props.row, $index)"
|
|
|
+ >删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ class="mt-4"
|
|
|
+ style="width: 100%"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addResponseRow(props.row)"
|
|
|
+ ></el-button>
|
|
|
|
|
|
<div class="table_title">data子项说明</div>
|
|
|
- <el-table ref="rightTable" :data="rightTableData" border style="width: 100%">
|
|
|
+ <el-table
|
|
|
+ ref="rightTable"
|
|
|
+ :data="props.row.tabEtlDataSuns"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
<!-- 序号列 -->
|
|
|
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
|
|
|
|
|
<!-- 普通列 -->
|
|
|
<el-table-column prop="name" label="中文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="英文名称">
|
|
|
+ <el-table-column prop="englishName" label="英文名称">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.englishName" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="数据类型">
|
|
|
+ <el-table-column prop="dataType" label="数据类型">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.dataType" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="是否必填">
|
|
|
+ <el-table-column prop="isRequired" label="是否必填">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-select v-model="scope.row.isRequired" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in whetherOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="描述">
|
|
|
+ <el-table-column prop="ps" label="描述">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.ps" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="alias" label="示例说明">
|
|
|
+ <el-table-column prop="example" label="示例说明">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model="scope.rowinput" placeholder="请输入内容"></el-input>
|
|
|
+ <el-input v-model="scope.row.example" placeholder="请输入内容"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
<el-table-column fixed="right" label="操作" width="100">
|
|
|
- <template :slot-scope="{ row }">
|
|
|
- <el-button type="text" size="small">删除</el-button>
|
|
|
+ <template :slot-scope="{ row, $index }">
|
|
|
+ <el-button type="text" size="small" @click="deleteDataRow(props.row, $index)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
-
|
|
|
- <el-form :model="apiFormData" label-width="auto" inline class="textarea-form" :label-position="right">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ class="mt-4"
|
|
|
+ style="width: 100%"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addDataRow(props.row)"
|
|
|
+ ></el-button>
|
|
|
+ <el-form
|
|
|
+ :model="apiFormData"
|
|
|
+ label-width="auto"
|
|
|
+ inline
|
|
|
+ class="textarea-form"
|
|
|
+ :label-position="right"
|
|
|
+ >
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="请求示例">
|
|
|
- <el-input v-model="apiFormData.datasetName" placeholder="请输入" type="textarea"
|
|
|
- :rows="4"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="props.row.requestExample"
|
|
|
+ placeholder="请输入"
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="返回示例">
|
|
|
- <el-input v-model="apiFormData.dataType" placeholder="请输入" type="textarea" :rows="4"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="props.row.responseExample"
|
|
|
+ placeholder="请输入"
|
|
|
+ type="textarea"
|
|
|
+ :rows="4"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -383,43 +539,245 @@ import MyForm from "@/components/MyForm";
|
|
|
export default {
|
|
|
name: "",
|
|
|
components: {
|
|
|
- MyForm,
|
|
|
+ MyForm
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
pagination: {
|
|
|
currentPage: 1,
|
|
|
pageSize: 10,
|
|
|
- total: 161,
|
|
|
+ total: 161
|
|
|
},
|
|
|
- leftTableData: [{}],
|
|
|
- rightTableData: [{}],
|
|
|
+ // 表格选中的数据
|
|
|
+ selectedRows: [],
|
|
|
+ leftTableData: [],
|
|
|
+ rightTableData: [],
|
|
|
headerFormData: {},
|
|
|
apiFormData: {},
|
|
|
expandedRows: [],
|
|
|
+ whetherOptions: [
|
|
|
+ { label: "是", value: 1 },
|
|
|
+ { label: "不是", value: 0 }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
- methods: {},
|
|
|
+ computed: {
|
|
|
+ // 计算当前页要显示的数据
|
|
|
+ currentLeftTableData() {
|
|
|
+ const start =
|
|
|
+ (this.pagination.currentPage - 1) * this.pagination.pageSize;
|
|
|
+ const end = start + this.pagination.pageSize;
|
|
|
+ return this.leftTableData.slice(start, end);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onEyeClick(row) {
|
|
|
+ // // 检查右侧表格是否已存在相同项
|
|
|
+ // const existing = this.rightTableData.find(item => item.tableName === row.tableName && item.tableEnglishName === row.tableEnglishName);
|
|
|
+ // 获取右侧表格对应的数据并展开
|
|
|
+ if (!this.expandedRows.includes()) {
|
|
|
+ // this.expandedRows.push(row.tableName); // 将左侧表格对应的行名称加入展开行
|
|
|
+ this.expandedRows = [row.id]; // 将左侧表格对应的行名称加入展开行
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除行
|
|
|
+ onDeleteClick(row) {
|
|
|
+ const index = this.leftTableData.findIndex(item => item.id === row.id);
|
|
|
+ if (index > -1) {
|
|
|
+ this.leftTableData.splice(index, 1);
|
|
|
+ }
|
|
|
+ // 同步删除右侧表格的对应项
|
|
|
+ this.onDeleteRightClick(row);
|
|
|
+ },
|
|
|
+ // 在右侧表格删除时，删除对应的数据
|
|
|
+ onDeleteRightClick(row) {
|
|
|
+ const index = this.rightTableData.findIndex(item => item.id === row.id);
|
|
|
+ if (index > -1) {
|
|
|
+ this.rightTableData.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onPageChange(page) {
|
|
|
+ this.pagination.currentPage = page;
|
|
|
+ },
|
|
|
+ onExpandChange() {},
|
|
|
+ onSearch() {},
|
|
|
+ onReset() {
|
|
|
+ this.headerFormData={}
|
|
|
+ },
|
|
|
+ addClick() {
|
|
|
+ const newItem = {
|
|
|
+ id: Date.now(), // 使用当前时间戳作为唯一 ID
|
|
|
+ apiName: "",
|
|
|
+ apiEnglishName: "",
|
|
|
+ apiDetail: "",
|
|
|
+ scenario: "",
|
|
|
+ offer: "",
|
|
|
+ offerUrl: "",
|
|
|
+ format: "",
|
|
|
+ access: "",
|
|
|
+ accessUrl: "",
|
|
|
+ requestMethod: "",
|
|
|
+ sixUrl: "",
|
|
|
+ direction: "",
|
|
|
+ applyCount: "",
|
|
|
+ countNum: "",
|
|
|
+ countDetail: "",
|
|
|
+ num: "",
|
|
|
+ steps: "",
|
|
|
+ internet: "",
|
|
|
+ tabEtlHeaderSuns: [],
|
|
|
+ tabEtlBodySuns: [],
|
|
|
+ tabEtlDataSuns: [],
|
|
|
+ tabEtlQuerySuns: [],
|
|
|
+ tabEtlResponseSuns: []
|
|
|
+ };
|
|
|
+ this.rightTableData.push({ ...newItem });
|
|
|
+ this.leftTableData = this.rightTableData;
|
|
|
+ this.pagination.total = this.leftTableData.length;
|
|
|
+ },
|
|
|
+ // 处理选择框勾选变化
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.selectedRows = val; // 将勾选的行保存到 selectedRows 中
|
|
|
+ },
|
|
|
+ // 删除选中的行
|
|
|
+ deleteSelected() {
|
|
|
+ if (this.selectedRows.length === 0) {
|
|
|
+ this.$message.warning("请先选择要删除的项");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$confirm("确定删除选中的数据吗?", "警告", {
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // 获取选中项的 id
|
|
|
+ const selectedIds = this.selectedRows.map(row => row.id);
|
|
|
+
|
|
|
+ // 删除右侧表格中选中的行
|
|
|
+ this.rightTableData = this.rightTableData.filter(
|
|
|
+ row => !selectedIds.includes(row.id)
|
|
|
+ );
|
|
|
+
|
|
|
+ // 删除左侧表格中对应的行
|
|
|
+ this.leftTableData = this.leftTableData.filter(
|
|
|
+ row => !selectedIds.includes(row.id)
|
|
|
+ );
|
|
|
+
|
|
|
+ // 清空选中行
|
|
|
+ this.selectedRows = [];
|
|
|
+
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+
|
|
|
+ // Header
|
|
|
+ addHeaderRow(row) {
|
|
|
+ // 新增一项
|
|
|
+ const newItem = {
|
|
|
+ id: Date.now(), // 使用时间戳作为唯一 ID
|
|
|
+ name: "",
|
|
|
+ englishName: "",
|
|
|
+ dataType: "",
|
|
|
+ isRequired: "",
|
|
|
+ ps: "",
|
|
|
+ example: ""
|
|
|
+ };
|
|
|
+ row.tabEtlHeaderSuns.push(newItem);
|
|
|
+ },
|
|
|
+ deleteHeaderRow(row, index) {
|
|
|
+ row.tabEtlHeaderSuns.splice(index, 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ // Body
|
|
|
+ addBodyRow(row) {
|
|
|
+ const newItem = {
|
|
|
+ id: Date.now(), // 使用时间戳作为唯一 ID
|
|
|
+ name: "",
|
|
|
+ englishName: "",
|
|
|
+ dataType: "",
|
|
|
+ isRequired: "",
|
|
|
+ ps: "",
|
|
|
+ example: ""
|
|
|
+ };
|
|
|
+ row.tabEtlBodySuns.push(newItem);
|
|
|
+ },
|
|
|
+ deleteBodyRow(row, index) {
|
|
|
+ row.tabEtlBodySuns.splice(index, 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ // Query
|
|
|
+ addQueryRow(row) {
|
|
|
+ const newItem = {
|
|
|
+ id: Date.now(), // 使用时间戳作为唯一 ID
|
|
|
+ name: "",
|
|
|
+ englishName: "",
|
|
|
+ dataType: "",
|
|
|
+ isRequired: "",
|
|
|
+ ps: "",
|
|
|
+ example: ""
|
|
|
+ };
|
|
|
+ row.tabEtlQuerySuns.push(newItem);
|
|
|
+ },
|
|
|
+ deleteQueryRow(row, index) {
|
|
|
+ row.tabEtlQuerySuns.splice(index, 1);
|
|
|
+ },
|
|
|
+ // Response
|
|
|
+ addResponseRow(row) {
|
|
|
+ const newItem = {
|
|
|
+ id: Date.now(), // 使用时间戳作为唯一 ID
|
|
|
+ name: "",
|
|
|
+ englishName: "",
|
|
|
+ dataType: "",
|
|
|
+ isRequired: "",
|
|
|
+ ps: "",
|
|
|
+ example: ""
|
|
|
+ };
|
|
|
+ row.tabEtlResponseSuns.push(newItem);
|
|
|
+ },
|
|
|
+ deleteResponseRow(row, index) {
|
|
|
+ row.tabEtlResponseSuns.splice(index, 1);
|
|
|
+ },
|
|
|
+ // Data
|
|
|
+ addDataRow(row) {
|
|
|
+ const newItem = {
|
|
|
+ id: Date.now(), // 使用时间戳作为唯一 ID
|
|
|
+ name: "",
|
|
|
+ englishName: "",
|
|
|
+ dataType: "",
|
|
|
+ isRequired: "",
|
|
|
+ ps: "",
|
|
|
+ example: ""
|
|
|
+ };
|
|
|
+ row.tabEtlDataSuns.push(newItem);
|
|
|
+ },
|
|
|
+ deleteDataRow(row, index) {
|
|
|
+ row.tabEtlDataSuns.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
created() {},
|
|
|
- mounted() {},
|
|
|
+ mounted() {}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.expanded-content{
|
|
|
+.expanded-content {
|
|
|
padding: 20px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
.title {
|
|
|
width: 100%;
|
|
|
text-align: left;
|
|
|
}
|
|
|
+
|
|
|
.table_title {
|
|
|
width: 100%;
|
|
|
text-align: left;
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
-.textarea-form{
|
|
|
+.textarea-form {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
</style>
|
