EmbeddingsList.vue 10.3 KB
<template>
  <div>
    <div class="knowledge-header" v-if="currentKnowledge">
      <div class="header-container">
        <h2 class="knowledge-title">{{ currentKnowledge.name }} - 文档列表</h2>
        <a-button type="link" @click="goBack" class="back-button"> <Icon icon="ant-design:arrow-left-outlined" /> 返回知识库列表 </a-button>
      </div>
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" v-auth="'embeddings:embeddings:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
        <!--<a-button type="primary" v-auth="'embeddings:embeddings:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>-->
        <j-upload-button type="primary" v-auth="'embeddings:embeddings:importWord'" preIcon="ant-design:import-outlined" @click="onImportXls"
          >导入</j-upload-button
        >
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined" />
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button v-auth="'embeddings:embeddings:deleteBatch'"
            >批量操作
            <Icon icon="mdi:chevron-down" />
          </a-button>
        </a-dropdown>
        <!-- 高级查询 -->
        <!--        <super-query :config="superQueryConfig" @search="handleSuperQuery" />-->
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
      <!--字段回显插槽-->
      <template #bodyCell="{ column, record, index, text }"> </template>
    </BasicTable>
    <!-- 表单区域 -->
    <TestModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" name="test-test" setup>
  import { ref, reactive, computed, onMounted } from 'vue';
  import { BasicColumn, BasicTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage';
  import TestModal from './components/TestModal.vue';
  import { searchFormSchema, superQuerySchema } from './Test.data';
  import { list, batchDelete, getImportUrl, getExportUrl, deleteOne, listknowledge } from './Test.api';
  import { useUserStore } from '/@/store/modules/user';
  import JUploadButton from '@/components/Button/src/JUploadButton.vue';
  import { columns as defaultColumns } from './Test.data';
  import { useRoute, useRouter } from 'vue-router';
  const queryParam = reactive<any>({});
  const checkedKeys = ref<Array<string | number>>([]);
  const userStore = useUserStore();

  const route = useRoute();
  const router = useRouter();

  // 当前知识库信息
  const currentKnowledge = ref<{ id: string; name: string } | null>(null);

  // 在onMounted中添加知识库ID处理
  onMounted(() => {
    // 从路由参数获取知识库ID
    const knowledgeId = route.query.knowledgeId as string;
    const knowledgeName = route.query.knowledgeName as string;

    console.log('ceshi' + knowledgeId);
    if (knowledgeId && knowledgeName) {
      currentKnowledge.value = {
        id: knowledgeId,
        name: knowledgeName,
      };

      // 设置查询参数
      queryParam.knowledgeId = knowledgeId;
      reload();
    }

    loadKnowledgeMap();
  });

  // 返回知识库列表
  function goBack() {
    router.push('/super/airag/aiknowledge/AiKnowledgeBaseList');
  }
  // 知识库名称映射
  const knowledgeMap = ref<Record<string, string>>({});

  // 加载知识库列表
  async function loadKnowledgeMap() {
    try {
      const res = await listknowledge({});
      const map: Record<string, string> = {};
      res.forEach((item) => {
        if (item.id && item.name) {
          map[item.id] = item.name;
        }
      });
      knowledgeMap.value = map;
    } catch (e) {
      console.error('加载知识库列表失败', e);
    }
  }

  onMounted(() => {
    loadKnowledgeMap();
  });

  // 创建符合 BasicColumn 类型的知识库名称列
  const knowledgeColumn: BasicColumn = {
    title: '知识库名称',
    align: 'center',
    dataIndex: 'knowledgeName',
    width: 150,
    customRender: ({ record }) => {
      try {
        const metadata = typeof record.metadata === 'string' ? JSON.parse(record.metadata) : record.metadata;

        const knowledgeId = metadata?.knowledgeId;

        if (knowledgeId && knowledgeMap.value[knowledgeId]) {
          return knowledgeMap.value[knowledgeId];
        } else if (knowledgeId) {
          return `未知知识库(${knowledgeId})`;
        } else {
          return '无知识库';
        }
      } catch (e) {
        return '元数据解析失败';
      }
    },
  };

  // 创建完整的列配置
  const tableColumns = computed<BasicColumn[]>(() => {
    // 从默认列配置中过滤掉可能存在的旧知识库列
    const filteredColumns = defaultColumns.filter((col) => col.dataIndex !== 'name' && col.title !== '知识库名称');

    // 添加新的知识库列
    return [...filteredColumns, knowledgeColumn];
  });

  //注册model
  const [registerModal, { openModal }] = useModal();
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: 'test',
      api: async (params) => {
        const res = await list(params);
        // 处理序号 - 关键修改
        if (res?.records && Array.isArray(res.records)) {
          const startIndex = (params.pageNo - 1) * params.pageSize + 1;
          res.records = res.records.map((item, index) => ({
            ...item,
            index: startIndex + index,
          }));
        }
        return res;
      },
      columns: tableColumns,
      canResize: false,
      formConfig: {
        //labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToNumber: [],
        fieldMapToTime: [],
      },
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
      beforeFetch: (params) => {
        if (currentKnowledge.value?.id) {
          params.knowledgeId = currentKnowledge.value.id;
        }
        // 处理知识库查询参数
        if (params.knowledgeId) {
          // 直接使用对象而不是JSON字符串
          queryParam.metadata = { knowledgeId: params.knowledgeId };
        } else {
          delete queryParam.metadata;
        }
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: 'test',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });
  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

  // 高级查询配置
  const superQueryConfig = reactive(superQuerySchema);
  /**
   * 高级查询事件
   */
  function handleSuperQuery(params) {
    Object.keys(params).map((k) => {
      queryParam[k] = params[k];
    });
    reload();
  }
  /**
   * 新增事件
   */
  function handleAdd() {
    openModal(true, {
      isUpdate: false,
      showFooter: true,
      record: {
        // 关键:添加初始值
        docName: '',
        text: '',
      },
    });
  }
  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable) {
    console.log('当前行数据:', record);
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: true,
    });
  }
  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: false,
    });
  }
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }
  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  }
  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
  /**
   * 操作栏
   */
  function getTableAction(record) {
    console.log('record', record);
    return [
      {
        label: '编辑',
        onClick: handleEdit.bind(null, record),
        auth: 'embeddings:embeddings:edit',
      },
    ];
  }
  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
        auth: 'embeddings:embeddings:edit',
      },
      {
        label: '删除',
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
          placement: 'topLeft',
        },
        auth: 'embeddings:embeddings:delete',
      },
    ];
  }
</script>

<style lang="less" scoped>
  :deep(.ant-picker),
  :deep(.ant-input-number) {
    width: 100%;
  }
  .knowledge-header {
    margin-bottom: 16px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .knowledge-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1f2329;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 16px;
      }

      .back-button {
        display: flex;
        align-items: center;
        color: #1890ff;
        font-weight: 500;
        padding: 4px 8px;
        transition: all 0.3s;
        flex-shrink: 0;

        &:hover {
          color: #40a9ff;
          background: rgba(24, 144, 255, 0.1);
          border-radius: 4px;
        }

        i {
          margin-right: 4px;
          font-size: 14px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .knowledge-header {
      .header-container {
        flex-direction: column;
        align-items: flex-start;

        .knowledge-title {
          margin-bottom: 12px;
          padding-right: 0;
          width: 100%;
        }

        .back-button {
          align-self: flex-end;
        }
      }
    }
  }
</style>