feat 动态数据源管理, 字典编辑问题fix

src/components/Bootx/Query/Query.ts

@@ -1,4 +1,5 @@
 import { LabeledValueType } from 'ant-design-vue/lib/vc-tree-select/TreeSelect'
+import { LabeledValue } from "ant-design-vue/lib/select";
 
 // 数字
 export const NUMBER = 'number'
@@ -32,7 +33,7 @@ export interface QueryField {
   // 精度
   precision?: number
   // 查询列表
-  selectList?: LabeledValueType[] | null
+  selectList?: LabeledValue[] | null
   // 时间格式化
   format?: string | null
 }

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

@@ -1,6 +1,7 @@
 import { defHttp } from '/@/utils/http/axios'
 import { PageResult, Result } from '/#/axios'
 import { BaseEntity } from '/#/web'
+import { LabeledValue } from 'ant-design-vue/lib/select'
 
 /**
  * 分页
@@ -52,6 +53,55 @@ export const testConnection = (obj: DynamicDataSource) => {
   })
 }
 
+/**
+ * 测试连接
+ */
+export const testConnectionById = (id) => {
+  return defHttp.get<Result<string>>({
+    url: '/dynamic/source/testConnectionById',
+    params: { id },
+  })
+}
+
+/**
+ * 根据id进行添加到连接池中
+ */
+export const addDynamicDataSourceById = (id) => {
+  return defHttp.post<Result<string>>({
+    url: '/dynamic/source/addDynamicDataSourceById',
+    params: { id },
+  })
+}
+
+/**
+ * 判断编码是否被使用
+ */
+export const existsByCode = (id) => {
+  return defHttp.post<Result<boolean>>({
+    url: '/dynamic/source/existsByCode',
+    params: { id },
+  })
+}
+
+/**
+ * 判断编码是否被使用
+ */
+export const existsByCodeNotId = (id, code) => {
+  return defHttp.post<Result<boolean>>({
+    url: '/dynamic/source/existsByCodeNotId',
+    params: { id, code },
+  })
+}
+/**
+ * 判断是否已经添加到连接池中
+ */
+export const existsByDataSourceKey = (code) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/dynamic/source/existsByDataSourceKey',
+    params: { code },
+  })
+}
+
 /**
  * 删除
  */
@@ -92,3 +142,32 @@ export interface DynamicDataSource extends BaseEntity {
   // 备注
   remark?: string
 }
+
+/**
+ * 数据类型列表
+ */
+export const databaseTypes = [
+  { value: 'mysql', label: 'MySQL' },
+  { value: 'oracle', label: 'Oracle' },
+  { value: 'mssql', label: 'SQLServer' },
+] as LabeledValue[]
+
+/**
+ * 数据类型关联信息列表
+ */
+export // 数据列表
+const databaseTypeMap = {
+  mysql: {
+    dbDriver: 'com.mysql.cj.jdbc.Driver',
+    dbUrl:
+      'jdbc:mysql://127.0.0.1:3306/bootx?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai',
+  },
+  oracle: {
+    dbDriver: 'oracle.jdbc.OracleDriver',
+    dbUrl: 'jdbc:oracle:thin:@127.0.0.1:1521:BOOTX',
+  },
+  mssql: {
+    dbDriver: 'com.microsoft.sqlserver.jdbc.SQLServerDriver',
+    dbUrl: 'jdbc:mysql://127.0.0.1:3306/bootx?characterEncoding=UTF-8&useUnicode=true&useSSL=false',
+  },
+}

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

@@ -14,13 +14,13 @@
         <a-input v-model:value="form.id" :disabled="showable" />
       </a-form-item>
       <a-form-item label="编码" name="code">
-        <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入数据源编码" />
+        <a-input validateFirst v-model:value="form.code" :disabled="showable" placeholder="请输入数据源编码" />
       </a-form-item>
       <a-form-item label="名称" name="name">
         <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入数据源名称" />
       </a-form-item>
-      <a-form-item label="类型" name="databaseType">
-        <a-input v-model:value="form.databaseType" :disabled="showable" placeholder="请输入数据库类型" />
+      <a-form-item label="数据库类型" name="databaseType">
+        <a-select v-model:value="form.databaseType" :options="databaseTypes" @change="changeDatabaseType" placeholder="请选择数据库类型" />
       </a-form-item>
       <a-form-item label="驱动类" name="dbDriver">
         <a-input v-model:value="form.dbDriver" :disabled="showable" placeholder="请输入驱动类" />
@@ -52,11 +52,22 @@
   import { nextTick, reactive } from 'vue'
   import { $ref } from 'vue/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { add, get, update, DynamicDataSource, testConnection } from './DynamicDataSource.api'
+  import {
+    add,
+    get,
+    update,
+    DynamicDataSource,
+    testConnection,
+    existsByCode,
+    existsByCodeNotId,
+    databaseTypes,
+    databaseTypeMap,
+  } from './DynamicDataSource.api'
   import { FormInstance, Rule } from 'ant-design-vue/lib/form'
   import { FormEditType } from '/@/enums/formTypeEnum'
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
   import { useMessage } from '/@/hooks/web/useMessage'
+  import { useValidate } from '/@/hooks/bootx/useValidate'
 
   const {
     initFormEditType,
@@ -73,13 +84,15 @@
     formEditType,
   } = useFormEdit()
   const { createMessage } = useMessage()
+  const { existsByServer } = useValidate()
+
   // 表单
   const formRef = $ref<FormInstance>()
+
   let form = $ref<DynamicDataSource>({
     id: null,
     code: '',
     name: '',
-    databaseType: '',
     dbDriver: '',
     dbUrl: '',
     dbUsername: '',
@@ -88,7 +101,10 @@
   })
   // 校验
   const rules = reactive({
-    code: [{ required: true, message: '编码不可为空' }],
+    code: [
+      { required: true, message: '编码不可为空' },
+      { validator: validateCode, trigger: 'blur' },
+    ],
     name: [{ required: true, message: '名称不可为空' }],
     databaseType: [{ required: true, message: '请选择数据库类型' }],
     dbDriver: [{ required: true, message: '驱动不可为空' }],
@@ -104,6 +120,11 @@
     resetForm()
     getInfo(id, editType)
   }
+  // 编码更新
+  function validateCode() {
+    const { code, id } = form
+    return existsByServer(code, id, formEditType, existsByCode, existsByCodeNotId)
+  }
   // 获取信息
   function getInfo(id, editType: FormEditType) {
     if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
@@ -127,7 +148,12 @@
       }
     })
   }
-
+  // 数据源类型变换回调
+  function changeDatabaseType() {
+    const e = form.databaseType as string
+    form.dbDriver = databaseTypeMap[e]?.dbDriver
+    form.dbUrl = databaseTypeMap[e]?.dbUrl
+  }
   // 保存
   function handleOk() {
     formRef?.validate().then(async () => {

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

@@ -15,25 +15,38 @@
         <vxe-column type="seq" width="60" />
         <vxe-column field="code" title="编码" />
         <vxe-column field="name" title="名称" />
-        <vxe-column field="databaseType" title="类型" />
+        <vxe-column field="databaseType" title="数据库类型">
+          <template #default="{ row }">
+            <a-tag> {{ dictConvert('DatabaseType', row.databaseType) }} </a-tag>
+          </template>
+        </vxe-column>
         <vxe-column field="dbDriver" title="驱动类" />
         <vxe-column field="dbUrl" title="连接地址" />
         <vxe-column field="dbUsername" title="用户名" />
         <vxe-column field="remark" title="备注" />
         <vxe-column field="createTime" title="创建时间" />
-        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="160" :showOverflow="false" title="操作">
           <template #default="{ row }">
-            <span>
-              <a href="javascript:" @click="show(row)">查看</a>
-            </span>
+            <a-link @click="show(row)">查看</a-link>
             <a-divider type="vertical" />
-            <span>
-              <a href="javascript:" @click="edit(row)">编辑</a>
-            </span>
+            <a-link @click="edit(row)">编辑</a-link>
             <a-divider type="vertical" />
-            <a-popconfirm title="是否删除" @confirm="remove(row)" okText="是" cancelText="否">
-              <a href="javascript:" style="color: red">删除</a>
-            </a-popconfirm>
+            <a-dropdown>
+              <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /> </a>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a-link @click="testConnectionInfo(row)">测试连接</a-link>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-link @click="addDynamicDataSource(row)">应用</a-link>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-link danger @click="remove(row)">删除</a-link>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
           </template>
         </vxe-column>
       </vxe-table>
@@ -53,7 +66,7 @@
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
   import { $ref } from 'vue/macros'
-  import { del, page } from './DynamicDataSource.api'
+  import { addDynamicDataSourceById, databaseTypes, del, existsByDataSourceKey, page, testConnectionById } from './DynamicDataSource.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import DynamicDataSourceEdit from './DynamicDataSourceEdit.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
@@ -61,11 +74,11 @@
   import { FormEditType } from '/@/enums/formTypeEnum'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { QueryField } from '/@/components/Bootx/Query/Query'
-
+  import { useDict } from '/@/hooks/bootx/useDict'
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage, createConfirm } = useMessage()
-
+  const { dictConvert } = useDict()
   // 查询条件
   const fields = [
     { field: 'code', type: 'string', name: '编码', placeholder: '请输入编码' },
@@ -74,11 +87,7 @@
       field: 'databaseType',
       type: 'list',
       name: '数据库类型',
-      selectList: [
-        { key: 'mysql', value: 'MySQL' },
-        { key: 'oracle', value: 'Oracle' },
-        { key: 'mssql', value: 'SQLServer' },
-      ],
+      selectList: databaseTypes,
       placeholder: '请选择数据库类型',
     },
   ] as QueryField[]
@@ -117,13 +126,58 @@
   function show(record) {
     dynamicDataSourceEdit.init(record.id, FormEditType.Show)
   }
-
+  // 测试连接
+  async function testConnectionInfo(record) {
+    const { data } = await testConnectionById(record.id)
+    if (data) {
+      createMessage.warn(data)
+    } else {
+      createMessage.success('连接成功')
+    }
+  }
+  // 应用到系统中
+  async function addDynamicDataSource(record) {
+    const { data } = await existsByDataSourceKey(record.code)
+    if (data) {
+      createConfirm({
+        iconType: 'warning',
+        title: '重新添加',
+        content: '该数据源配置已经应用，是否进行更新',
+        onOk: () => {
+          loading.value = true
+          addDynamicDataSourceById(record.id).then(() => {
+            createMessage.success('更新成功')
+          })
+        },
+      })
+    } else {
+      createConfirm({
+        iconType: 'warning',
+        title: '添加',
+        content: '是否将该数据源配置应用到系统中',
+        onOk: () => {
+          loading.value = true
+          addDynamicDataSourceById(record.id).then(() => {
+            createMessage.success('应用成功')
+          })
+        },
+      })
+    }
+  }
   // 删除
   function remove(record) {
-    del(record.id).then(() => {
-      createMessage.success('删除成功')
+    createConfirm({
+      iconType: 'warning',
+      title: '删除',
+      content: '是否删除流程模型',
+      onOk: () => {
+        loading.value = true
+        del(record.id).then(() => {
+          createMessage.success('删除成功')
+          queryPage()
+        })
+      },
     })
-    queryPage()
   }
 </script>
 

src/views/modules/system/dict/DictEdit.vue

@@ -25,7 +25,7 @@
         <a-input v-model:value="form.groupTag" :disabled="showable" placeholder="请输入分类标签" />
       </a-form-item>
       <a-form-item label="备注" name="remark">
-        <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        <a-textarea :rows="3" v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
       </a-form-item>
     </a-form>
     <template #footer>
@@ -68,6 +68,7 @@
     id: null,
     code: '',
     name: '',
+    enable: true,
     groupTag: '',
     remark: '',
   } as Dict)

src/views/modules/system/dict/DictItemEdit.vue

@@ -74,6 +74,7 @@
     dictCode: null,
     code: '',
     name: '',
+    enable: true,
     sortNo: 0,
     remark: '',
   } as DictItem)