feat: 优化数据源管理字典获取，字段参数修改

src/views/apihub/component/edit.vue

@@ -15,9 +15,9 @@
           <el-option label="DELETE" value="DELETE"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="数据源" prop="dataSourceId">
-        <el-select v-model="formData.dataSourceId" placeholder="请选择数据源" filterable>
-          <el-option v-for="item in dataSources" :key="item.id" :label="item.name" :value="item.id"></el-option>
+      <el-form-item label="数据源" prop="dataSourceKey">
+        <el-select v-model="formData.dataSourceKey" placeholder="请选择数据源" filterable>
+          <el-option v-for="item in dataSources" :key="item.id" :label="item.name" :value="item.dsKey"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="SQL类型" prop="sqlType">
@@ -132,7 +132,7 @@ const baseForm = {
   name: "",
   path: "",
   method: "GET",
-  dataSourceId: null,
+  dataSourceKey: null,
   sqlType: "query",
   sqlContent: "",
   parameters: [],
@@ -151,7 +151,7 @@ const ruleForm = {
   name: [ruleRequired("API名称不能为空", "change")],
   path: [ruleRequired("API路径不能为空", "change")],
   method: [ruleRequired("请求方法不能为空", "change")],
-  dataSourceId: [ruleRequired("数据源不能为空", "change")],
+  dataSourceKey: [ruleRequired("数据源不能为空", "change")],
   sqlType: [ruleRequired("SQL类型不能为空", "change")],
   sqlContent: [ruleRequired("SQL内容不能为空", "change")],
   returnFormat: [ruleRequired("返回格式不能为空", "change")],
@@ -192,6 +192,7 @@ const onSubmit = async () => {
     await api.edit(submitData);
   } else {
     // 新增模式
+    delete submitData.id;
     await api.add(submitData);
   }
 

src/views/apihub/datasource.vue

@@ -6,9 +6,9 @@
         <el-form-item label="数据源名称" prop="keyWord">
           <el-input v-model="params.keyWord" placeholder="请输入数据源名称" clearable style="width: 200px" @keyup.enter.native="getList(1)" />
         </el-form-item>
-<!--        <el-form-item label="日期范围" prop="dateRange">-->
-<!--          <el-date-picker v-model="params.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 240px" />-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="日期范围" prop="dateRange">-->
+        <!--          <el-date-picker v-model="params.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 240px" />-->
+        <!--        </el-form-item>-->
         <el-form-item>
           <el-button type="primary" @click="getList(1)">
             <el-icon><ele-Search /></el-icon>查询
@@ -28,9 +28,9 @@
         <el-table-column prop="id" label="ID" width="80" align="center" />
         <el-table-column prop="name" label="数据源名称" min-width="150" show-overflow-tooltip />
         <el-table-column prop="type" label="数据库类型" width="120" />
-<!--        <el-table-column prop="host" label="主机地址" min-width="120" show-overflow-tooltip />-->
-<!--        <el-table-column prop="port" label="端口" width="80" align="center" />-->
-<!--        <el-table-column prop="database" label="数据库名" min-width="120" show-overflow-tooltip />-->
+        <!--        <el-table-column prop="host" label="主机地址" min-width="120" show-overflow-tooltip />-->
+        <!--        <el-table-column prop="port" label="端口" width="80" align="center" />-->
+        <!--        <el-table-column prop="database" label="数据库名" min-width="120" show-overflow-tooltip />-->
         <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
         <el-table-column prop="createdAt" label="创建时间" width="160" />
         <el-table-column label="操作" width="160" align="center" fixed="right">
@@ -56,9 +56,12 @@
         </el-form-item>
         <el-form-item label="数据库类型" prop="type">
           <el-select v-model="formData.type" placeholder="请选择数据库类型" style="width: 100%">
-            <el-option label="MySQL" value="MySQL" />
-            <el-option label="PostgreSQL" value="PostgreSQL" />
-            <el-option label="SQL Server" value="SQL Server" />
+            <template v-if="database_type.length">
+              <el-option v-for="item in database_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </template>
+            <template v-else>
+              <el-option label="MySQL" value="mysql" />
+            </template>
           </el-select>
         </el-form-item>
         <el-form-item label="主机地址" prop="host">
@@ -137,11 +140,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, getCurrentInstance } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useSearch } from "/@/hooks/useCommon";
 import apiHub from "/@/api/modules/apiHub";
 
+const { proxy } = getCurrentInstance() as any;
+const { database_type } = proxy.useDict("database_type");
+
 // 定义数据源类型
 interface DataSource {
   id?: number;