json编辑器

test-ui/package.json

@@ -31,6 +31,7 @@
   ],
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "@vue/composition-api": "^1.7.2",
     "axios": "1.7.8",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",
@@ -43,6 +44,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "json-editor-vue": "^0.17.3",
     "nprogress": "0.2.0",
     "quill": "2.0.2",
     "screenfull": "5.0.2",

test-ui/src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">若依后台管理系统</h3>
+      <h3 class="title">自动化测试平台</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"

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

@@ -1,27 +1,92 @@
 <template>
   <div class="app-container">
-    add
+    <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>
+    </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>-->
   </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'
+
+Vue.use(VCA)
+
 export default {
   name: "ApiAdd",
   dicts: ['http_method'],
-  created () {
-    console.log(this.$route.query.groupId)
-  },
+  components: { JsonEditorVue },
   data() {
     return {
-      // 表单参数
-      form: {},
-      // 表单校验
+      activeNames: ['1', '2'],
+      form: {
+        method: 'POST',
+        groupId: this.$route.query.groupId
+      },
+      json: {},
       rules: {}
     }
+  },
+  methods: {
+    submitForm () {
+      console.log(this.form)
+    },
+    cancel () {
+
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-
+.uri {
+  display: flex;
+  margin: 16px 0;
+}
+::v-deep .el-collapse-item__wrap {
+  padding: 0 16px;
+}
 </style>

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

@@ -50,14 +50,6 @@ export default {
   dicts: ['http_method'],
   data() {
     return {
-      filterText: "",
-      groupList: [{
-        id: 0,
-        label: "接口管理",
-        children: []
-      }],
-      groupState: "list",
-      editId: null,
       loading: false,
       showSearch: true,
       total: 0,
@@ -70,21 +62,8 @@ export default {
         method: null,
         uri: null,
       },
-      form: {
-        name: null
-      },
-      rules: {
-        name: [
-          {required: true, message: "节点名不能为空", trigger: "blur"}
-        ],
-      },
     };
   },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    }
-  },
   methods: {
     folderHandleSelected(id) {
       if (id) {

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

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import {listApi} from "@/api/test/api";
+
+export default {
+  name: "Database",
+  data() {
+    return {
+      loading: false,
+      showSearch: true,
+      total: 0,
+      dataList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        method: null,
+        uri: null,
+      },
+    };
+  },
+  methods: {
+    /** 查询接口列表 */
+    getList() {
+      this.loading = true;
+      listApi(this.queryParams).then(response => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleAdd() {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+

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

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

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

@@ -1,11 +1,27 @@
 <template>
-  <div>
-    task
-  </div>
+  <folder-page type="task" @click="folderHandleSelected">
+    case
+  </folder-page>
 </template>
 
 <script>
 
+import FolderPage from "@/components/FolderPage/index.vue";
+
+export default {
+  name: "Task",
+  components: {FolderPage},
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    folderHandleSelected(id) {
+      console.log(id)
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">

test-ui/vue.config.js

@@ -26,7 +26,7 @@ module.exports = {
   lintOnSave: process.env.NODE_ENV === 'development',
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
-  transpileDependencies: ['quill'],
+  transpileDependencies: ['quill', 'json-editor-vue'],
   // webpack-dev-server 相关配置
   devServer: {
     host: '0.0.0.0',
@@ -53,6 +53,15 @@ module.exports = {
   },
   configureWebpack: {
     name: name,
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+      ],
+    },
     resolve: {
       alias: {
         '@': resolve('src')