fetch: 页面移植

向量模型库接口对接

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) {

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: '数据库名称',
+      label: '数据库用户名',
-      field: 'database',
+      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 {register, tableObject, methods} = useTable({
-  const editRef = ref()
+    getListApi: EmbedStoreApi.getEmbedStorePage,
-  const searchParams = ref({})
+    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 = () => {
+  const open = (data?: any) => {
-    editRef.value.show({});
+    editRef.value.show(data);
   }
 
   // 处理搜索
   const handleSearch = (values: any) => {
-    searchParams.value = values;
+    methods.setSearchParams(values)
-    loadData();
   }
+  const pagination = computed(() => {
+    return {
+      total: tableObject.total,
+      pageSize: tableObject.pageSize,
+      currentPage: tableObject.currentPage
+    }
+  })
+  const handleDel = () => {
 
+  }
   return {
     shema,
     columns,
-    tableData,
+    register,
-    editRef,
     open,
-    loadData,
     handleSearch,
     ProviderConst,
-    getProviderLabel
+    getProviderLabel,
+    methods,
+    tableObject,
+    pagination,
+    handleDel,
+    editRef
   }
 }

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 type="primary" @click="handleSubmit" :loading="loading">确认</el-button>
-      <el-button @click="close">取消</el-button>
+      <el-button @click="close" :loading="loading">取消</el-button>
     </template>
   </el-dialog>
 </template>

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 EditCom from './edit.vue'
-import { onMounted } from '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>
+    <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"/>
+    <Table height="calc(100% - 400px)" border :data="tableObject.tableList" :columns="columns" :pagination="pagination" @register="register">
-    <Edit ref="editRef" @reload="loadData" />
+      <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>