feat 数据源管理

src/views/modules/develop/dynamicsource/DataSourceList.vue

@@ -1,49 +1,62 @@
 <template>
-  <basic-drawer forceRender showFooter v-bind="$attrs" title="字典列表" width="35%" :visible="visible" @close="visible = false">
+  <basic-drawer forceRender showFooter v-bind="$attrs" title="数据源列表" width="35%" :visible="visible" @close="visible = false">
-    <div class="m-3 p-3 bg-white">
+    <vxe-toolbar ref="xToolbar" custom :refresh="{ query: query }" />
-      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: query }" />
+    <vxe-table row-id="key" ref="xTable" :data="records" :loading="loading">
-      <vxe-table row-id="id" ref="xTable" :data="records" :loading="loading">
+      <vxe-column type="seq" width="60" />
-        <vxe-column type="seq" width="60" />
+      <vxe-column field="key" title="数据源" />
-        <vxe-column field="code" title="数据源" />
+      <vxe-column fixed="right" width="50" :showOverflow="false" title="操作">
-        <vxe-column fixed="right" width="50" :showOverflow="false" title="操作">
+        <template #default="{ row }">
-          <template #default="{ row }">
+          <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
-            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
+            <a-link danger>删除</a-link>
-              <a-link danger>删除</a-link>
+          </a-popconfirm>
-            </a-popconfirm>
+        </template>
-          </template>
+      </vxe-column>
-        </vxe-column>
+    </vxe-table>
-      </vxe-table>
-    </div>
   </basic-drawer>
 </template>
 
 <script lang="ts" setup>
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   import { $ref } from 'vue/macros'
-  import {
+  import { findAllDataSource, removeDataSourceByKey } from './DynamicDataSource.api'
-    addDynamicDataSourceById
+  import { useMessage } from '/@/hooks/web/useMessage'
-  } from "/@/views/modules/develop/dynamicsource/DynamicDataSource.api";
+  import { KeyValue } from '/#/web'
-  import { useMessage } from "/@/hooks/web/useMessage";
 
   const { notification, createMessage, createConfirm } = useMessage()
 
-  let records = $ref<string[]>([])
+  let records = $ref<KeyValue[]>([])
   let loading = $ref(false)
-  function query(){
+  let visible = $ref(false)
-
+  // 打开列表
+  function show() {
+    visible = true
+    query()
   }
-  function remove(record){
+  // 查询数据
+  function query() {
+    loading = true
+    findAllDataSource().then(({ data }) => {
+      records = data
+      loading = false
+    })
+  }
+  // 移除数据源
+  function remove(record) {
     createConfirm({
       iconType: 'warning',
       title: '重新添加',
-      content: '该数据源配置已经应用，是否进行更新',
+      content: '是否将该数据源从系统中移除',
       onOk: () => {
-        addDynamicDataSourceById(record.id).then(() => {
+        removeDataSourceByKey(record.key).then(() => {
-          createMessage.success('更新成功')
+          createMessage.success('移除成功')
+          query()
         })
       },
     })
   }
+  defineExpose({
+    show,
+  })
 </script>
 
 <style scoped></style>

src/views/modules/develop/dynamicsource/DynamicDataSource.api.ts

@@ -1,6 +1,6 @@
 import { defHttp } from '/@/utils/http/axios'
 import { PageResult, Result } from '/#/axios'
-import { BaseEntity } from '/#/web'
+import { BaseEntity, KeyValue } from "/#/web";
 import { LabeledValue } from 'ant-design-vue/lib/select'
 
 /**
@@ -121,6 +121,25 @@ export const findAll = () => {
   })
 }
 
+/**
+ * 查询当前数据源列表
+ */
+export const findAllDataSource = () => {
+  return defHttp.get<Result<KeyValue[]>>({
+    url: '/dynamic/source/findAllDataSource',
+  })
+}
+
+/**
+ * 从数据源列表中删除指定数据源
+ */
+export const removeDataSourceByKey = (key) => {
+  return defHttp.delete({
+    url: '/dynamic/source/removeDataSourceByKey',
+    params: { key },
+  })
+}
+
 /**
  * 动态数据源管理
  */

src/views/modules/develop/dynamicsource/DynamicDataSourceEdit.vue

@@ -20,7 +20,13 @@
         <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入数据源名称" />
       </a-form-item>
       <a-form-item label="数据库类型" name="databaseType">
-        <a-select v-model:value="form.databaseType" :options="databaseTypes" @change="changeDatabaseType" placeholder="请选择数据库类型" />
+        <a-select
+          v-model:value="form.databaseType"
+          :disabled="showable"
+          :options="databaseTypes"
+          @change="changeDatabaseType"
+          placeholder="请选择数据库类型"
+        />
       </a-form-item>
       <a-form-item label="驱动类" name="dbDriver">
         <a-input v-model:value="form.dbDriver" :disabled="showable" placeholder="请输入驱动类" />

src/views/modules/develop/dynamicsource/DynamicDataSourceList.vue

@@ -8,6 +8,7 @@
         <template #buttons>
           <a-space>
             <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+            <a-button @click="showDatabaseList">数据源列表</a-button>
           </a-space>
         </template>
       </vxe-toolbar>
@@ -59,12 +60,13 @@
         @page-change="handleTableChange"
       />
       <dynamic-data-source-edit ref="dynamicDataSourceEdit" @ok="queryPage" />
+      <data-source-list ref="dataSourceList" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue'
+  import { onMounted } from 'vue'
   import { $ref } from 'vue/macros'
   import { addDynamicDataSourceById, databaseTypes, del, existsByDataSourceKey, page, testConnectionById } from './DynamicDataSource.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
@@ -75,6 +77,7 @@
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
   import { useDict } from '/@/hooks/bootx/useDict'
+  import DataSourceList from './DataSourceList.vue'
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage, createConfirm } = useMessage()
@@ -95,6 +98,7 @@
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
   const dynamicDataSourceEdit = $ref<any>()
+  const dataSourceList = $ref<any>()
 
   onMounted(() => {
     vxeBind()
@@ -126,6 +130,10 @@
   function show(record) {
     dynamicDataSourceEdit.init(record.id, FormEditType.Show)
   }
+  // 查看
+  function showDatabaseList() {
+    dataSourceList.show()
+  }
   // 测试连接
   async function testConnectionInfo(record) {
     const { data } = await testConnectionById(record.id)