http server资源增删改查

test-ui/src/api/test/http.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+// 查询http服务列表
+export function listHttp() {
+  return request({
+    url: '/test/http/list',
+    method: 'get'
+  })
+}
+
+// 查询http服务详细
+export function getHttp(id) {
+  return request({
+    url: '/test/http/detail',
+    method: 'post',
+    data: {id}
+  })
+}
+
+// 新增http服务
+export function addHttp(data) {
+  return request({
+    url: '/test/http/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改http服务
+export function updateHttp(data) {
+  return request({
+    url: '/test/http/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除http服务
+export function delHttp(id) {
+  return request({
+    url: '/test/http/del',
+    method: 'post',
+    data: {id}
+  })
+}

test-ui/src/views/test/resource/http.vue

@@ -0,0 +1,225 @@
+<template>
+  <el-container>
+    <el-aside style="width: 180px; padding: 0">
+      <div class="header">
+        <div>HTTP Server</div>
+        <div>
+          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" circle/>
+        </div>
+      </div>
+      <div class="list" v-if="list && list.length > 0">
+        <div v-for="item in list" :key="item.id" :class="'item'+(selectedKey === item.id ? ' is-active' : '')" @click="handleListClick(item)">{{ item.name }}</div>
+      </div>
+      <el-empty v-else description="暂无数据" :image-size="100"/>
+    </el-aside>
+    <el-main>
+      <div v-if="selectedKey">
+        <el-form :model="form" ref="form">
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="HTTP Server名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入HTTP Server名称"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="协议" prop="protocol">
+                <el-select v-model="form.protocol">
+                  <el-option v-for="dict in dict.type.http_protocol" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="主机" prop="host">
+                <el-input v-model="form.host" placeholder="请输入主机地址"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="端口" prop="port">
+                <el-input v-model="form.port" placeholder="请输入端口号"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="前置路径" prop="basePath">
+                <el-input v-model="form.basePath" placeholder="请输入前置路径，格式为/**"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <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, 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, 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-row>
+        </el-form>
+        <div class="footer">
+          <el-button type="primary" @click="save">保 存</el-button>
+          <el-button type="danger" @click="del">删除</el-button>
+        </div>
+      </div>
+      <el-empty v-else description="暂无数据" />
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import {addHttp, delHttp, getHttp, listHttp, updateHttp} from "@/api/test/http";
+
+export default {
+  name: 'Http',
+  dicts: ["http_protocol"],
+  data() {
+    return {
+      list: [],
+      selectedKey: "",
+      form: {
+        name: "",
+        protocol: "",
+        host: "",
+        port: "",
+        basePath: "",
+        header: [{
+          key: "",
+          value: "",
+        }],
+      },
+    }
+  },
+  created() {
+    this.getData();
+    this.$nextTick(() => {
+
+    })
+  },
+  methods: {
+    getData(selectedKey) {
+      const loading = this.setLoading();
+      listHttp().then(res => {
+        this.list = res.data;
+        if (selectedKey) {
+          this.handleListClick({id: selectedKey})
+        } else if (this.list && this.list.length > 0) {
+          this.handleListClick({id: this.list[0].id})
+        }
+        loading.close();
+      })
+    },
+    handleTableEdit(e, scope) {
+      if (e && this.form.header.length === scope.$index + 1) {
+        this.form.header.push({
+          key: "",
+          value: ""
+        })
+      }
+    },
+    handleDelete(scope) {
+      this.form.header.splice(scope.$index, 1)
+    },
+    handleListClick(item) {
+      const loading = this.setLoading();
+      this.selectedKey = item.id;
+      getHttp(item.id).then(res => {
+        this.form = res.data;
+        if (!this.form.header) {
+          this.form.header = []
+        } else {
+          this.form.header = JSON.parse(this.form.header);
+        }
+        this.form.header.push({
+          key: "",
+          value: ""
+        })
+      })
+      loading.close();
+    },
+    handleAdd() {
+      this.$prompt('请输入名称', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /^(?!\s*$).+/,
+        inputErrorMessage: '名称不能为空'
+      }).then(({ value }) => {
+        if (value) {
+          const loading = this.setLoading();
+          addHttp({name: value}).then(res => {
+            this.$message.success("添加成功")
+            this.getData(res.data.id);
+            loading.close();
+          })
+        }
+      });
+    },
+    save() {
+      this.form.header.pop();
+      updateHttp({
+        ...this.form,
+        header: JSON.stringify(this.form.header)
+      }).then(res => {
+        this.$modal.msgSuccess("修改成功");
+        this.getData();
+      })
+    },
+    del() {
+      this.$modal.confirm('是否确认删除？').then(() => {
+        return delHttp(this.selectedKey);
+      }).then(() => {
+        this.$modal.msgSuccess("删除成功");
+        this.selectedKey = "";
+        this.getData();
+      })
+    },
+    setLoading() {
+      return this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.footer {
+  text-align: right;
+  margin-top: 20px;
+}
+
+.header {
+  font-weight: bold;
+  line-height: 45px;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 10px;
+}
+
+.list {
+  .item {
+    padding: 0 20px;
+    cursor: pointer;
+    height: 40px;
+    line-height: 40px;
+    border-right: 2px solid #eee;
+  }
+
+  .item.is-active {
+    color: var(--current-color);
+    border-right: 2px solid var(--current-color);
+  }
+}
+</style>

test-ui/src/views/test/resource/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
-    <el-tabs tab-position="left" style="height: 200px;">
+    <el-tabs>
       <el-tab-pane label="http 服务器">
-        123
+        <http/>
       </el-tab-pane>
       <el-tab-pane label="数据库数据源">
         <database/>
@@ -14,10 +14,11 @@
 <script>
 
 import Database from "@/views/test/resource/database.vue";
+import Http from "@/views/test/resource/http.vue";
 
 export default {
   name: "Resource",
-  components: {Database},
+  components: {Http, Database},
   methods: {}
 }
 </script>