fetch: 页面移植

向量模型库接口对接
2025-02-27 18:18:00 +08:00 · 2025-02-27 18:18:00 +08:00 · 25383d56c6
parent 2fd76aa5b9
commit 25383d56c6
4 changed files with 89 additions and 65 deletions
--- a/src/api/new-ai/embed-store.ts
+++ b/src/api/new-ai/embed-store.ts
@ -1,18 +1,4 @@
-/*
- * Copyright (c) 2024 LangChat. TyCoding All Rights Reserved.
- *
- * Licensed under the GNU Affero General Public License, Version 3 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.gnu.org/licenses/agpl-3.0.html
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+

 import request from '@/config/axios'

@ -26,32 +12,32 @@ export interface EmbedStoreVO {
 export const EmbedStoreApi = {
  // 获得嵌入存储列表
  getEmbedStoreList: async (params: any) => {
-    return await request.get({ url: '/aigc/embed-store/list', params })
+    return await request.get({ url: '/chat/aigc/embed-store/list', params })
  },

  // 获得嵌入存储分页
  getEmbedStorePage: async (params: any) => {
-    return await request.get({ url: '/aigc/embed-store/page', params })
+    return await request.get({ url: '/chat/aigc/embed-store/page', params })
  },

  // 获得嵌入存储详情
  getEmbedStore: async (id: string) => {
-    return await request.get({ url: `/aigc/embed-store/${id}` })
+    return await request.get({ url: `/chat/aigc/embed-store/${id}` })
  },

  // 创建嵌入存储
  createEmbedStore: async (data: any) => {
-    return await request.post({ url: '/aigc/embed-store', data })
+    return await request.post({ url: '/chat/aigc/embed-store', data })
  },

  // 更新嵌入存储
  updateEmbedStore: async (data: any) => {
-    return await request.put({ url: '/aigc/embed-store', data })
+    return await request.put({ url: '/chat/aigc/embed-store', data })
  },

  // 删除嵌入存储
  deleteEmbedStore: async (id: string) => {
-    return await request.delete({ url: `/aigc/embed-store/${id}` })
+    return await request.delete({ url: `/chat/aigc/embed-store/${id}` })
  }
 }
 // export function list(params: any) {
--- a/src/views/ai/model/embedStore/composables/index.ts
+++ b/src/views/ai/model/embedStore/composables/index.ts
@ -2,18 +2,24 @@ import {ref} from "vue";
 import {FormSchema} from "@/types/form";
 import {ElTag} from "element-plus";
 import {EmbedStoreApi} from "@/api/new-ai/embed-store";
+import { useTable } from "@/hooks/web/useTable";
+import { TableColumn } from "@/types/table";

 export enum ProviderEnum {
  Redis = 'REDIS',
  PgVector = 'PGVECTOR',
  Milvus = 'MILVUS',
 }
+
 export const ProviderConst = [
  { label: 'Redis', value: ProviderEnum.Redis },
  { label: 'PgVector', value: ProviderEnum.PgVector },
  { label: 'Milvus', value: ProviderEnum.Milvus },
 ];
+
 export default function () {
+  const editRef = ref()
+  const searchParams = ref({});
  const ProviderConst = [
    { label: 'Redis', value: ProviderEnum.Redis },
    { label: 'PgVector', value: ProviderEnum.PgVector },
@ -30,7 +36,7 @@ export default function () {

  const shema = ref<FormSchema[]>([
    {
-      label: '模型名称',
+      label: '数据库别名',
      field: 'name',
      component: 'Input',
      colProps: {
@ -39,7 +45,7 @@ export default function () {
    }
  ])

-  const columns = ref<object[]>([
+  const columns = ref<TableColumn[]>([
    {
      label: '数据库别名',
      field: 'name',
@ -67,7 +73,7 @@ export default function () {
      field: 'dimension',
      align: 'center',
      width: '100',
-      render(row) {
+      formatter(row) {
        return h(
          ElTag,
          {
@ -83,6 +89,7 @@ export default function () {
      label: '数据库地址',
      field: 'host',
      align: 'center',
+      width: '110',
    },
    {
      label: '数据库端口',
@ -91,46 +98,71 @@ export default function () {
      width: '100',
    },
    {
-      label: '数据库名称',
-      field: 'database',
+      label: '数据库用户名',
+      field: 'username',
      align: 'center',
    },
+    {
+      label: '数据库密码',
+      field: 'password',
+      align: 'center',
+    },
+    {
+      label: '数据库名',
+      field: 'databaseName',
+      align: 'center',
+    },
+    {
+      label: '表名称',
+      field: 'tableName',
+      align: 'center',
+    },
+    {
+      label: '操作',
+      field: "action",
+      width: 150
+    }
  ]);

-  const tableData = ref([])
-  const editRef = ref()
-  const searchParams = ref({})
+  const {register, tableObject, methods} = useTable({
+    getListApi: EmbedStoreApi.getEmbedStorePage,
+    defaultParams: searchParams.value,
+    delListApi: EmbedStoreApi.deleteEmbedStore
+  });
+

-  // 加载数据
-  const loadData = async () => {
-    try {
-      const res = await EmbedStoreApi.getEmbedStorePage(searchParams.value);
-      tableData.value = res.data.list;
-    } catch (error) {
-      console.error('Failed to load embed stores:', error);
-    }
-  }

  // 打开编辑对话框
-  const open = () => {
-    editRef.value.show({});
+  const open = (data?: any) => {
+    editRef.value.show(data);
  }

  // 处理搜索
  const handleSearch = (values: any) => {
-    searchParams.value = values;
-    loadData();
+    methods.setSearchParams(values)
  }
+  const pagination = computed(() => {
+    return {
+      total: tableObject.total,
+      pageSize: tableObject.pageSize,
+      currentPage: tableObject.currentPage
+    }
+  })
+  const handleDel = () => {

+  }
  return {
    shema,
    columns,
-    tableData,
-    editRef,
+    register,
    open,
-    loadData,
    handleSearch,
    ProviderConst,
-    getProviderLabel
+    getProviderLabel,
+    methods,
+    tableObject,
+    pagination,
+    handleDel,
+    editRef
  }
 }
--- a/src/views/ai/model/embedStore/edit.vue
+++ b/src/views/ai/model/embedStore/edit.vue
@ -11,7 +11,7 @@ const visible = ref(false)
 const formData = ref({})
 const formRef = ref()
 const isEdit = ref(false)
-
+const loading = ref(false)
 const schemas = ref<FormSchema[]>([
  {
    field: 'name',
@ -64,7 +64,7 @@ const schemas = ref<FormSchema[]>([
    },
  },
  {
-    field: 'database',
+    field: 'databaseName',
    label: '数据库名称',
    component: 'Input',
    formItemProps: {
@ -133,11 +133,11 @@ defineExpose({
 </script>

 <template>
-  <el-dialog v-model="visible" draggable :title="isEdit ? '编辑向量数据库' : '新增向量数据库'" width="800px" @close="close">
+  <el-dialog v-model="visible" :close-on-click-modal="!loading" :close-on-press-escape="!loading" draggable :title="isEdit ? '编辑向量数据库' : '新增向量数据库'" width="800px" @close="close">
    <Form ref="formRef" :model="formData" :schema="schemas" />
    <template #footer>
-      <el-button type="primary" @click="handleSubmit">确认</el-button>
-      <el-button @click="close">取消</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
+      <el-button @click="close" :loading="loading">取消</el-button>
    </template>
  </el-dialog>
 </template>
--- a/src/views/ai/model/embedStore/index.vue
+++ b/src/views/ai/model/embedStore/index.vue
@ -1,15 +1,16 @@
 <script setup lang="ts">
-import {Plus} from "@element-plus/icons-vue";
+import {Plus, Edit, Delete} from "@element-plus/icons-vue";
 import {Table} from "@/components/Table";
 import {Search} from "@/components/Search";
 import useEmbedStore from './composables'
-import Edit from './edit.vue'
-import { onMounted } from 'vue'
+import EditCom from './edit.vue'
+import { onMounted, ref } from 'vue'
+
+const { shema, columns, register, open, handleSearch,methods, tableObject, pagination, handleDel, editRef } = useEmbedStore()

-const { shema, columns, tableData, editRef, open, loadData, handleSearch } = useEmbedStore()

 onMounted(() => {
-  loadData()
+  methods?.getList()
 })
 </script>

@ -17,16 +18,21 @@ onMounted(() => {
  <content-wrap>
    <Search :schema="shema" @search="handleSearch" @reset="handleSearch"/>
  </content-wrap>
-  <ContentWrap>
+  <ContentWrap v-loading="tableObject.loading">
    <el-alert
      class="w-full mb-10px min-alert"
      title="注意：请慎重修改模型的向量纬度参数（Dimension），此参数需要和向量库匹配（错误修改可能将影响已有的向量数据）"
      type="info"
      show-icon
    />
-    <el-button class="my-10px" type="primary" :icon="Plus" @click="open">新增向量数据库</el-button>
-    <Table height="calc(100% - 400px)" border :columns="columns" :data="tableData" :pagination="false"/>
-    <Edit ref="editRef" @reload="loadData" />
+    <el-button class="my-10px" type="primary" :icon="Plus" @click="open()">新增向量数据库</el-button>
+    <Table height="calc(100% - 400px)" border :data="tableObject.tableList" :columns="columns" :pagination="pagination" @register="register">
+      <template #action="{ row }">
+          <el-button type="primary" text :icon="Edit" @click="open(row)" />
+          <el-button type="danger" text :icon="Delete" @click="methods.delList(row.id, false)" />
+      </template>
+    </Table>
+    <EditCom ref="editRef" @reload="methods?.getList" />
  </ContentWrap>
 </template>