From c4db7512a00d83ddeeb7c078bb7ded876f5432de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=98=B1=E6=B6=B5?= <xiaoe666@outlook.com>
Date: Tue, 18 Feb 2025 13:58:29 +0800
Subject: [PATCH] =?UTF-8?q?=20api=E6=96=B0=E5=A2=9E=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/test/test/domain/TestApi.java    |   4 +
 .../resources/mapper/test/TestApiMapper.xml   |   6 +-
 test-ui/src/api/test/api.js                   |   2 +-
 test-ui/src/views/test/api/add.vue            | 182 ++++++++++++-----
 test-ui/src/views/test/api/edit.vue           | 187 +++++++++++++++++-
 5 files changed, 318 insertions(+), 63 deletions(-)

diff --git a/test-test/src/main/java/com/test/test/domain/TestApi.java b/test-test/src/main/java/com/test/test/domain/TestApi.java
index 889f46e..8e40ce6 100644
--- a/test-test/src/main/java/com/test/test/domain/TestApi.java
+++ b/test-test/src/main/java/com/test/test/domain/TestApi.java
@@ -53,6 +53,10 @@ public class TestApi extends BaseEntity {
     @Excel(name = "接口查询参数")
     private String param;
 
+    /** 接口请求体 Content-Type */
+    @Excel(name = "接口请求体 Content-Type")
+    private String contentType;
+
     /**
      * 接口请求体
      */
diff --git a/test-test/src/main/resources/mapper/test/TestApiMapper.xml b/test-test/src/main/resources/mapper/test/TestApiMapper.xml
index ef4cde5..5446865 100644
--- a/test-test/src/main/resources/mapper/test/TestApiMapper.xml
+++ b/test-test/src/main/resources/mapper/test/TestApiMapper.xml
@@ -12,6 +12,7 @@
         <result property="uri"    column="uri"    />
         <result property="header"    column="header"    />
         <result property="param"    column="param"    />
+        <result property="contentType"    column="content_type"    />
         <result property="body"    column="body"    />
         <result property="delFlag"    column="del_flag"    />
         <result property="createBy"    column="create_by"    />
@@ -21,7 +22,7 @@
     </resultMap>
 
     <sql id="selectTestApiVo">
-        select id, group_id, name, method, uri, header, param, body, del_flag, create_by, create_time, update_by, update_time from test_api
+        select id, group_id, name, method, uri, header, param, content_type, body, del_flag, create_by, create_time, update_by, update_time from test_api
     </sql>
 
     <select id="selectTestApiList" parameterType="TestApiListQO" resultMap="TestApiResult">
@@ -48,6 +49,7 @@
             <if test="uri != null">uri,</if>
             <if test="header != null">header,</if>
             <if test="param != null">param,</if>
+            <if test="contentType != null">content_type,</if>
             <if test="body != null">body,</if>
             <if test="delFlag != null">del_flag,</if>
             <if test="createBy != null">create_by,</if>
@@ -62,6 +64,7 @@
             <if test="uri != null">#{uri},</if>
             <if test="header != null">#{header},</if>
             <if test="param != null">#{param},</if>
+            <if test="contentType != null">#{contentType},</if>
             <if test="body != null">#{body},</if>
             <if test="delFlag != null">#{delFlag},</if>
             <if test="createBy != null">#{createBy},</if>
@@ -80,6 +83,7 @@
             <if test="uri != null">uri = #{uri},</if>
             <if test="header != null">header = #{header},</if>
             <if test="param != null">param = #{param},</if>
+            <if test="contentType != null">content_type = #{contentType},</if>
             <if test="body != null">body = #{body},</if>
             <if test="delFlag != null">del_flag = #{delFlag},</if>
             <if test="createBy != null">create_by = #{createBy},</if>
diff --git a/test-ui/src/api/test/api.js b/test-ui/src/api/test/api.js
index 552767e..bda0365 100644
--- a/test-ui/src/api/test/api.js
+++ b/test-ui/src/api/test/api.js
@@ -14,7 +14,7 @@ export function getApi(id) {
   return request({
     url: '/test/api/detail',
     method: 'post',
-    params: {id}
+    data: {id}
   })
 }
 
diff --git a/test-ui/src/views/test/api/add.vue b/test-ui/src/views/test/api/add.vue
index cb0fa38..2b8bc7e 100644
--- a/test-ui/src/views/test/api/add.vue
+++ b/test-ui/src/views/test/api/add.vue
@@ -1,49 +1,63 @@
 <template>
   <div class="app-container">
-    <el-input v-model="form.name" placeholder="请输入接口名称" />
+    <el-input v-model="form.name" placeholder="请输入接口名称"/>
     <div class="uri">
-      <el-select v-model="form.method">
-        <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
-      </el-select>
-      <el-input v-model="form.uri" placeholder="请输入接口路径" >
-        <template slot="prepend">路径</template>
+      <el-input placeholder="请输入接口路径" v-model="form.uri" class="input-with-select">
+        <el-select v-model="form.method" slot="prepend">
+          <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
       </el-input>
     </div>
-    <el-collapse v-model="activeNames">
-      <el-collapse-item title="请求参数" name="1">
-        <el-tabs>
-          <el-tab-pane label="Headers" name="Headers">
-            <el-table>
-              <el-table-column label="参数名" align="center" prop="key"/>
-              <el-table-column label="示例值" align="center" prop="value"/>
-            </el-table>
-          </el-tab-pane>
-          <el-tab-pane label="Params" name="Params">
-            <el-table>
-              <el-table-column label="参数名" align="center" prop="key"/>
-              <el-table-column label="示例值" align="center" prop="value"/>
-            </el-table>
-          </el-tab-pane>
-          <el-tab-pane label="Body" name="Body">
-            <JsonEditorVue mode="text" :value="json" class="jse-theme-dark" />
-          </el-tab-pane>
-        </el-tabs>
-      </el-collapse-item>
-      <el-collapse-item title="响应结果" name="2">
-        <el-tabs>
-          <el-tab-pane label="Headers" name="Headers">
-            <table>
-
-            </table>
-          </el-tab-pane>
-          <el-tab-pane label="Params" name="Params">Params</el-tab-pane>
-          <el-tab-pane label="Body" name="Body">Body</el-tab-pane>
-        </el-tabs>
-      </el-collapse-item>
-    </el-collapse>
-
-<!--    <el-button type="primary" @click="submitForm">确 定</el-button>-->
-<!--    <el-button @click="cancel">取 消</el-button>-->
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="Headers" name="Headers">
+        <el-table :data="form.header">
+          <el-table-column label="参数名">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入参数名" v-model="form.header[scope.$index].key" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="示例值">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入参数名" v-model="form.header[scope.$index].value" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="60">
+            <template slot-scope="scope">
+              <el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="Params" name="Params">
+        <el-table :data="form.param">
+          <el-table-column label="参数名">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入参数名" v-model="form.param[scope.$index].key" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="示例值">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入示例值" v-model="form.param[scope.$index].value" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="60">
+            <template slot-scope="scope">
+              <el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="Body" name="Body">
+        <el-select v-model="form.contentType" style="width: 200px; margin-bottom: 16px">
+          <el-option v-for="dict in dict.type.content_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+        <JsonEditorVue mode="text" v-model="form.body" class="jse-theme-dark"/>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="footer">
+      <el-button type="primary" @click="submit">提 交</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
   </div>
 </template>
 
@@ -52,30 +66,84 @@ import VCA from '@vue/composition-api'
 import JsonEditorVue from 'json-editor-vue'
 import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 import Vue from 'vue'
+import {addApi} from "@/api/test/api";
 
 Vue.use(VCA)
 
 export default {
   name: "ApiAdd",
-  dicts: ['http_method'],
-  components: { JsonEditorVue },
+  dicts: ['http_method', 'content_type'],
+  components: {JsonEditorVue},
   data() {
     return {
-      activeNames: ['1', '2'],
+      activeName: "Headers",
       form: {
+        name: "",
         method: 'POST',
-        groupId: this.$route.query.groupId
+        uri: "",
+        header: [{
+          key: "",
+          value: "",
+        }],
+        param: [{
+          key: "",
+          value: "",
+        }],
+        contentType: "application/json",
+        body: "",
       },
-      json: {},
-      rules: {}
     }
   },
   methods: {
-    submitForm () {
-      console.log(this.form)
-    },
-    cancel () {
+    submit() {
+      if (!this.form.name) {
+        this.$message.error("请输入接口名称")
+        return
+      }
+      if (!this.form.uri) {
+        this.$message.error("请输入接口路径")
+        return
+      }
+      this.form.header.pop();
+      this.form.param.pop();
+      addApi({
+        groupId: this.$route.query.groupId,
+        name: this.form.name,
+        method: this.form.method,
+        uri: this.form.uri,
+        header: JSON.stringify(this.form.header),
+        param: JSON.stringify(this.form.param),
+        contentType: this.form.contentType,
+        body: this.form.body,
+      }).then(res => {
+        this.$message.success("新增成功");
+        this.cancel();
+      })
 
+    },
+    handleTableEdit(e, flag, scope) {
+      if (flag === "header") {
+        if (e && this.form.header.length === scope.$index + 1) {
+          this.form.header.push({
+            key: "",
+            value: ""
+          })
+        }
+      }
+      if (flag === "param") {
+        if (e && this.form.param.length === scope.$index + 1) {
+          this.form.param.push({
+            key: "",
+            value: ""
+          })
+        }
+      }
+    },
+    handleDelete(scope) {
+      this.form.header.splice(scope.$index, 1)
+    },
+    cancel() {
+      this.$tab.closeOpenPage({ path: "/api" });
     }
   }
 }
@@ -86,7 +154,19 @@ export default {
   display: flex;
   margin: 16px 0;
 }
+
 ::v-deep .el-collapse-item__wrap {
   padding: 0 16px;
 }
+::v-deep.el-select {
+  width: 130px;
+}
+.input-with-select ::v-deep .el-input-group__prepend {
+  background-color: #fff;
+}
+
+.footer {
+  margin-top: 16px;
+  text-align: right;
+}
 </style>
diff --git a/test-ui/src/views/test/api/edit.vue b/test-ui/src/views/test/api/edit.vue
index 672a7f1..d948641 100644
--- a/test-ui/src/views/test/api/edit.vue
+++ b/test-ui/src/views/test/api/edit.vue
@@ -1,27 +1,194 @@
 <template>
   <div class="app-container">
-    edit
+    <el-input v-model="form.name" placeholder="请输入接口名称"/>
+    <div class="uri">
+      <el-input placeholder="请输入接口路径" v-model="form.uri" class="input-with-select">
+        <el-select v-model="form.method" slot="prepend">
+          <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-input>
+    </div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="Headers" name="Headers">
+        <el-table :data="form.header">
+          <el-table-column label="参数名">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入参数名" v-model="form.header[scope.$index].key" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="示例值">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入参数名" v-model="form.header[scope.$index].value" @input="e => handleTableEdit(e, 'header', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="60">
+            <template slot-scope="scope">
+              <el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="Params" name="Params">
+        <el-table :data="form.param">
+          <el-table-column label="参数名">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入参数名" v-model="form.param[scope.$index].key" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="示例值">
+            <template slot-scope="scope">
+              <el-input placeholder="请输入示例值" v-model="form.param[scope.$index].value" @input="e => handleTableEdit(e, 'param', scope)" clearable/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="60">
+            <template slot-scope="scope">
+              <el-button v-if="form.header.length > scope.$index+1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="Body" name="Body">
+        <el-select v-model="form.contentType" style="width: 200px; margin-bottom: 16px">
+          <el-option v-for="dict in dict.type.content_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+        <JsonEditorVue mode="text" v-model="form.body" class="jse-theme-dark"/>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="footer">
+      <el-button type="primary" @click="submit">提 交</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+import VCA from '@vue/composition-api'
+import JsonEditorVue from 'json-editor-vue'
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
+import Vue from 'vue'
+import {getApi, updateApi} from "@/api/test/api";
+
+Vue.use(VCA)
+
 export default {
-  name: "ApiEdit",
-  dicts: ['http_method'],
-  created () {
-    console.log(this.$route.query.id)
-  },
+  name: "EditAdd",
+  dicts: ['http_method', 'content_type'],
+  components: {JsonEditorVue},
   data() {
     return {
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {}
+      activeName: "Headers",
+      form: {
+        groupId: null,
+        name: "",
+        method: 'POST',
+        uri: "",
+        header: [{
+          key: "",
+          value: "",
+        }],
+        param: [{
+          key: "",
+          value: "",
+        }],
+        contentType: "application/json",
+        body: "",
+      },
+    }
+  },
+  created() {
+    getApi(this.$route.query.id).then(res => {
+      this.form = {
+        groupId: res.data.groupId,
+        name: res.data.name,
+        method: res.data.method,
+        uri: res.data.uri,
+        header: JSON.parse(res.data.header),
+        param: JSON.parse(res.data.param),
+        contentType: res.data.contentType,
+        body: res.data.body,
+      }
+      this.form.header.push({
+        key: "",
+        value: ""
+      })
+      this.form.param.push({
+        key: "",
+        value: ""
+      })
+    })
+  },
+  methods: {
+    submit() {
+      if (!this.form.name) {
+        this.$message.error("请输入接口名称")
+        return
+      }
+      if (!this.form.uri) {
+        this.$message.error("请输入接口路径")
+        return
+      }
+      this.form.header.pop();
+      this.form.param.pop();
+      updateApi({
+        id: this.$route.query.id,
+        name: this.form.name,
+        method: this.form.method,
+        uri: this.form.uri,
+        header: JSON.stringify(this.form.header),
+        param: JSON.stringify(this.form.param),
+        contentType: this.form.contentType,
+        body: this.form.body,
+      }).then(res => {
+        this.$message.success("新增成功");
+        this.cancel();
+      })
+    },
+    handleTableEdit(e, flag, scope) {
+      if (flag === "header") {
+        if (e && this.form.header.length === scope.$index + 1) {
+          this.form.header.push({
+            key: "",
+            value: ""
+          })
+        }
+      }
+      if (flag === "param") {
+        if (e && this.form.param.length === scope.$index + 1) {
+          this.form.param.push({
+            key: "",
+            value: ""
+          })
+        }
+      }
+    },
+    handleDelete(scope) {
+      this.form.header.splice(scope.$index, 1)
+    },
+    cancel() {
+      this.$tab.closeOpenPage({ path: "/api" });
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.uri {
+  display: flex;
+  margin: 16px 0;
+}
 
+::v-deep .el-collapse-item__wrap {
+  padding: 0 16px;
+}
+::v-deep.el-select {
+  width: 130px;
+}
+.input-with-select ::v-deep .el-input-group__prepend {
+  background-color: #fff;
+}
+
+.footer {
+  margin-top: 16px;
+  text-align: right;
+}
 </style>