database资源增删改查

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

@@ -1,69 +1,221 @@
 <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>
+  <el-container>
+    <el-aside style="width: 180px; padding: 0">
+      <div class="header">
+        <div>Database</div>
+        <div>
+          <el-dropdown trigger="click" @command="handleAdd">
+            <el-button type="primary" icon="el-icon-plus" size="mini" circle/>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="1"><svg-icon icon-class="1"/> Mysql</el-dropdown-item>
+              <el-dropdown-item command="2"><svg-icon icon-class="2"/> Redis</el-dropdown-item>
+              <el-dropdown-item command="3"><svg-icon icon-class="3"/> Oracle</el-dropdown-item>
+              <el-dropdown-item command="4"><svg-icon icon-class="4"/> MongoDB</el-dropdown-item>
+              <el-dropdown-item command="5"><svg-icon icon-class="5"/> SQL Server</el-dropdown-item>
+              <el-dropdown-item command="6"><svg-icon icon-class="6"/> PostgreSQL</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </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)">
+          <svg-icon :icon-class="item.type.toString()"/>
+          {{ 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="数据源名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入HTTP Server名称"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <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="24" v-if="form.type !== 3">
+              <el-form-item label="库名" prop="dbName">
+                <el-input v-model="form.dbName" placeholder="请输入库名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type === 3">
+              <el-form-item label="服务名" prop="dbName">
+                <el-input v-model="form.dbName" placeholder="请输入服务名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type === 4">
+              <el-form-item label="认证库名" prop="authDb">
+                <el-input v-model="form.authDb" placeholder="请输入认证库名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="用户名" prop="username">
+                <el-input v-model="form.username" placeholder="请输入用户名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="密码" prop="password">
+                <el-input v-model="form.password" show-password placeholder="请输入密码"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type === 2">
+              <el-form-item label="集群模式" prop="cluster">
+                <el-switch v-model="form.cluster" active-color="#13ce66" inactive-color="#ff4949" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type === 2">
+              <el-form-item label="MasterName" prop="masterName">
+                <el-input v-model="form.masterName" placeholder="哨兵模式下，请输入MasterName"/>
+              </el-form-item>
+            </el-col>
+          </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 {listApi} from "@/api/test/api";
+import {addDatasource, delDatasource, getDatasource, listDatasource, updateDatasource} from "@/api/test/database";
 
 export default {
-  name: "Database",
+  name: 'Database',
+  dicts: ["http_protocol"],
   data() {
     return {
-      loading: false,
-      showSearch: true,
-      total: 0,
-      dataList: [],
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        name: null,
-        method: null,
-        uri: null,
-      },
-    };
+      list: [],
+      selectedKey: "",
+      form: {},
+    }
+  },
+  created() {
+    this.getData();
+    this.$nextTick(() => {
+
+    })
   },
   methods: {
-    /** 查询接口列表 */
-    getList() {
-      this.loading = true;
-      listApi(this.queryParams).then(response => {
-        this.dataList = response.rows;
-        this.total = response.total;
-        this.loading = false;
+    getData(selectedKey) {
+      const loading = this.setLoading();
+      listDatasource().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();
+      })
+    },
+    handleListClick(item) {
+      const loading = this.setLoading();
+      this.selectedKey = item.id;
+      getDatasource(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(type) {
+      this.$prompt('请输入名称', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /^(?!\s*$).+/,
+        inputErrorMessage: '名称不能为空'
+      }).then(({value}) => {
+        if (value) {
+          const loading = this.setLoading();
+          addDatasource({
+            name: value,
+            type: type
+          }).then(res => {
+            this.$message.success("添加成功")
+            this.getData(res.data.id);
+            loading.close();
+          })
+        }
       });
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+    save() {
+      updateDatasource(this.form).then(res => {
+        this.$modal.msgSuccess("修改成功");
+        this.getData();
+      })
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+    del() {
+      this.$modal.confirm('是否确认删除？').then(() => {
+        return delDatasource(this.selectedKey);
+      }).then(() => {
+        this.$modal.msgSuccess("删除成功");
+        this.selectedKey = "";
+        this.getData();
+      })
     },
-    handleAdd() {
-
+    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/http.vue

@@ -99,17 +99,14 @@ export default {
   },
   created() {
     this.getData();
-    this.$nextTick(() => {
-
-    })
   },
   methods: {
-    getData(selectedKey) {
+    getData(key) {
       const loading = this.setLoading();
       listHttp().then(res => {
         this.list = res.data;
-        if (selectedKey) {
-          this.handleListClick({id: selectedKey})
+        if (key) {
+          this.handleListClick({id: key})
         } else if (this.list && this.list.length > 0) {
           this.handleListClick({id: this.list[0].id})
         }