test/test-ui/src/views/test/api/add.vue

<template>
  <div class="app-container">
    <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 {addApi} from "@/api/test/api";

Vue.use(VCA)

export default {
  name: "ApiAdd",
  dicts: ['http_method', 'content_type'],
  components: {JsonEditorVue},
  data() {
    return {
      activeName: "Headers",
      form: {
        name: "",
        method: 'POST',
        uri: "",
        header: [{
          key: "",
          value: "",
        }],
        param: [{
          key: "",
          value: "",
        }],
        contentType: "application/json",
        body: "",
      },
    }
  },
  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();
      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"});
    }
  }
}
</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>