smartai2dian0/src/modules/knowledge/rgflow/knowledgeLib/index.vue

<template>
  <div class="container">
    <div class="main-container">
      <!-- <div class="rt-container" v-if="tabs.length > 0"> -->
      <div class="rt-container">
        <a-tabs :active-key="activeKey" @change="handleTabChange">
          <!-- 数据集 -->
          <a-tab-pane key="1" :title="$t('knowledgeLib.tab_1')">
            <a-scrollbar class="rt-container-main" :style="{ height: documentHeight + 'px' }" style="overflow: auto">
              <!-- <a-scrollbar class="rt-container-main" style="overflow: auto"> -->
              <a-card
                ref="account"
                class="general-card"
                title=""
                style="height: calc(100% - 25px); overflow-y: auto; padding-top: 20px"
              >
                <a-row>
                  <a-col :flex="1" :span="12">
                    <a-form
                      :model="formModel"
                      :label-col-props="{ span: 6 }"
                      :wrapper-col-props="{ span: 18 }"
                      label-align="left"
                    >
                      <a-row :gutter="16">
                        <a-col :span="24" style="margin-bottom: 10px; display: flex; justify-content: space-between">
                          <a-popover position="bottom" v-model="checkedArr.length" trigger="click">
                            <a-button :disabled="checkedArr.length == 0" border>
                              <!-- 批量 -->
                              {{ $t('knowledgeLib.select_all') }}
                              <icon-down style="margin-left: 4px" />
                            </a-button>
                            <template #content>
                              <p>
                                <a-button type="text" class="button" style="color: #2a2a2b" @click="enableDisable(1)">
                                  <template #icon>
                                    <icon-play-circle />
                                  </template>
                                  <!-- 启用 -->
                                  {{ $t('knowledgeLib.select_enable') }}
                                </a-button>
                              </p>
                              <p>
                                <a-button type="text" class="button" style="color: #2a2a2b" @click="enableDisable(0)">
                                  <template #icon>
                                    <icon-record color="" />
                                  </template>
                                  <!-- 禁用 -->
                                  {{ $t('knowledgeLib.select_disable') }}
                                </a-button>
                              </p>
                              <p>
                                <a-button type="text" class="button" style="color: #2a2a2b" @click="addBlock(1)">
                                  <template #icon>
                                    <icon-check-circle />
                                  </template>
                                  <!-- 启动 -->
                                  {{ $t('knowledgeLib.select_start') }}
                                </a-button>
                              </p>
                              <p>
                                <a-button type="text" class="button" style="color: #2a2a2b" @click="addBlock(2)">
                                  <template #icon>
                                    <icon-close-circle />
                                  </template>
                                  <!-- 取消 -->
                                  {{ $t('knowledgeLib.select_cancel') }}
                                </a-button>
                              </p>
                              <a-divider style="margin: 10px 0" />
                              <p>
                                <a-button type="text" class="button" style="color: #2a2a2b" @click="addBlock(3)">
                                  <template #icon>
                                    <icon-delete />
                                  </template>
                                  <!-- 删除 -->
                                  {{ $t('knowledgeLib.select_delete') }}
                                </a-button>
                              </p>
                            </template>
                          </a-popover>
                          <span>
                            <!-- 搜索 -->
                            <a-input-search
                              :placeholder="$t('knowledgeLib.search_placeholder')"
                              style="width: 200px; margin-right: 10px"
                              v-model="keywords"
                              @change="search"
                            />
                            <!--新建-->
                            <add :kbobj="kbobj" @changeFetchData="changeFetchData" />
                          </span>
                        </a-col>
                      </a-row>
                    </a-form>
                  </a-col>
                </a-row>
                <a-divider style="margin-top: 0" />
                <a-row style="margin-bottom: 16px">
                  <a-col :span="12">
                    <a-space> </a-space>
                  </a-col>
                  <a-col :span="12" style="display: flex; align-items: center; justify-content: end">
                    <!-- 刷新 -->
                    <a-tooltip :content="$t('knowledgeLib.tips_fresh')">
                      <div class="action-icon">
                        <icon-refresh size="18" />
                      </div>
                    </a-tooltip>
                    <a-dropdown @select="handleSelectDensity">
                      <!-- 密度 -->
                      <a-tooltip :content="$t('knowledgeLib.tips_density')">
                        <div class="action-icon">
                          <icon-line-height size="18" />
                        </div>
                      </a-tooltip>
                      <template #content>
                        <a-doption
                          v-for="item in densityList"
                          :key="item.value"
                          :value="item.value"
                          :class="{ active: item.value === size }"
                        >
                          <span>{{ item.name }}</span>
                        </a-doption>
                      </template>
                    </a-dropdown>
                  </a-col>
                </a-row>
                <a-table
                  row-key="id"
                  :loading="loading"
                  :pagination="pagination"
                  :columns="cloneColumns"
                  :data="renderData"
                  :bordered="false"
                  :size="size"
                  @page-change="onPageChange"
                  :max-height="documentHeight"
                  :scroll="{ x: 1000 }"
                  :row-selection="{
                    type: 'checkbox',
                    showCheckedAll: true,
                    onlyCurrent: false
                  }"
                  @select-all="selectTabAll"
                  @selection-change="selectTabChange"
                >
                  <template #name="{ record }">
                    <a-link @click="handlePreview(record)">
                      <icon-file style="margin-right: 4px" />
                      {{ record.name }}
                    </a-link>
                  </template>
                  <template #create_time="{ record }">
                    <span>{{ parseTime(record.create_time) }}</span>
                  </template>
                  <template #status="{ record }">
                    <a-switch
                      v-model="record.status"
                      size="small"
                      checked-value="1"
                      unchecked-value="0"
                      @change="handleChangeStatus(record)"
                    />
                  </template>
                  <template #run="{ record }">
                    <div style="display: flex; align-items: center">
                      <div style="width: 100px">
                        <a-popover position="lt" title="" v-if="record.run == '4'">
                          <a-tag :loading="record.loading" :color="'red'" border>
                            <!-- 失败 -->
                            {{ $t('knowledgeLib.status_fail') }}
                          </a-tag>
                          <template #content>
                            <div class="popover-content">
                              <!-- 流程开始于： -->
                              <p>{{ $t('knowledgeLib.popover_label_1') }}：{{ record.process_begin_at }}</p>
                              <!-- 过程持续时间 -->
                              <p>{{ $t('knowledgeLib.popover_label_2') }}:{{ record.process_duation.toFixed(2) }}</p>
                              <div>
                                <!-- 进度消息： -->
                                <p>
                                  {{ $t('knowledgeLib.popover_label_3') }}：<span
                                    v-html="record.progress_msg.replace(/\n/g, '<br/>')"
                                  ></span>
                                </p>
                              </div>
                            </div>
                          </template>
                        </a-popover>
                        <a-popover position="lt" title="" v-if="record.run == '3'">
                          <a-tag :loading="record.loading" :color="'blue'" border>
                            <!-- 完成 -->
                            {{ $t('knowledgeLib.table_status_finish') }}
                          </a-tag>
                          <template #content>
                            <div class="popover-content">
                              <p>{{ $t('knowledgeLib.popover_label_1') }}：{{ record.process_begin_at }}</p>
                              <p>{{ $t('knowledgeLib.popover_label_2') }}:{{ record.process_duation.toFixed(2) }}</p>
                              <div>
                                <p>
                                  {{ $t('knowledgeLib.popover_label_3') }}：<span
                                    v-html="record.progress_msg.replace(/\n/g, '<br/>')"
                                  ></span>
                                </p>
                              </div>
                            </div>
                          </template>
                        </a-popover>
                        <a-popover position="lt" title="" v-if="record.run == '1'">
                          <a-tag :loading="record.loading" :color="'blue'" border>
                            <!-- 解析中... -->
                            {{ $t('knowledgeLib.table_status_running') }}
                          </a-tag>
                          <template #content>
                            <div class="popover-content">
                              <p>{{ $t('knowledgeLib.popover_label_1') }}：{{ record.process_begin_at }}</p>
                              <p>{{ $t('knowledgeLib.popover_label_2') }}:{{ record.process_duation.toFixed(2) }}</p>
                              <div>
                                <p>
                                  {{ $t('knowledgeLib.popover_label_3') }}：<span
                                    v-html="record.progress_msg.replace(/\n/g, '<br/>')"
                                  ></span>
                                </p>
                              </div>
                            </div>
                          </template>
                        </a-popover>
                        <a-popover position="lt" title="" v-if="record.run == '2'">
                          <a-tag :loading="record.loading" :color="'gold'" border>
                            <!-- 取消 -->
                            {{ $t('knowledgeLib.table_status_cancel') }}
                          </a-tag>
                          <template #content>
                            <div class="popover-content">
                              <p>{{ $t('knowledgeLib.popover_label_1') }}：{{ record.process_begin_at }}</p>
                              <p>{{ $t('knowledgeLib.popover_label_2') }}:{{ record.process_duation.toFixed(2) }}</p>
                              <div>
                                <p>
                                  {{ $t('knowledgeLib.popover_label_3') }}：<span
                                    v-html="record.progress_msg.replace(/\n/g, '<br/>')"
                                  ></span>
                                </p>
                              </div>
                            </div>
                          </template>
                        </a-popover>
                        <a-popover position="lt" title="" v-if="record.run == '0'">
                          <a-tag :loading="record.loading" :color="'green'" border>
                            <!-- 未启动 -->
                            {{ $t('knowledgeLib.table_status_stop') }}
                          </a-tag>
                          <template #content>
                            <div class="popover-content">
                              <p>{{ $t('knowledgeLib.popover_label_1') }}：{{ record.process_begin_at }}</p>
                              <p>{{ $t('knowledgeLib.popover_label_2') }}：{{ record.process_duation.toFixed(2) }}</p>
                              <div>
                                <p>
                                  {{ $t('knowledgeLib.popover_label_3') }}：<span
                                    v-html="record.progress_msg.replace(/\n/g, '<br/>')"
                                  ></span>
                                </p>
                              </div>
                            </div>
                          </template>
                        </a-popover>
                      </div>
                      <div>
                        <a-button type="text" size="large" @click="run(record)" :loading="record.loading">
                          <template #icon>
                            <icon-sync v-if="record.run == '4'" />
                            <icon-sync v-if="record.run == '3'" />
                            <icon-sync style="color: green" v-if="record.run == '2'" />
                            <a-button status="warning" shape="circle" v-if="record.run == '1'" size="small">
                              <icon-close />
                            </a-button>
                            <icon-play-circle style="color: green" v-if="record.run == '0'" />
                          </template>
                        </a-button>
                      </div>
                    </div>
                  </template>
                  <template #action="{ record }">
                    <!-- 解析方法 -->
                    <a-tooltip :content="$t('knowledgeLib.action_tip_parser')">
                      <a-button type="text" :disabled="record.run == '1'" @click="handleClick(record)" size="small">
                        <template #icon>
                          <icon-tool />
                        </template>
                      </a-button>
                    </a-tooltip>
                    <edit :item="record" @upTabdateItem="upTabdateItem" />
                    <!-- 确定删除吗 -->
                    <a-popconfirm :content="$t('knowledgeLib.delete_confirm')" type="warning" @ok="deleteItem(record)">
                      <!-- 删除 -->
                      <a-tooltip :content="$t('knowledgeLib.action_tip_delete')">
                        <a-button type="text" size="small" :disabled="record.run == '1'">
                          <template #icon>
                            <icon-delete />
                          </template>
                        </a-button>
                      </a-tooltip>
                    </a-popconfirm>
                    <!-- 下载 -->
                    <a-tooltip :content="$t('knowledgeLib.action_tip_download')">
                      <a-button
                        type="text"
                        size="small"
                        :disabled="record.run == '1'"
                        @click="onDownloadDocument(record)"
                      >
                        <template #icon>
                          <icon-download />
                        </template>
                      </a-button>
                    </a-tooltip>
                    <!--
                    <a-button
                      type="text"
                      size="small"
                      :disabled="record.run == '1'"
                      @click="previewArea(record)"
                    >
                      <template #icon>
                        <icon-eye />
                      </template>
                    </a-button> -->
                  </template>
                </a-table>
              </a-card>
            </a-scrollbar>
          </a-tab-pane>
          <!-- 测试 -->
          <a-tab-pane key="2" :title="$t('knowledgeLib.tab_2')">
            <a-scrollbar class="rt-container-main" :style="{ height: documentHeight + 'px' }" style="overflow: hidden">
              <test ref="testForm"></test>
            </a-scrollbar>
          </a-tab-pane>
          <!-- 配置 -->
          <a-tab-pane key="3" :title="$t('knowledgeLib.tab_3')">
            <a-scrollbar class="rt-container-main" :style="{ height: documentHeight + 'px' }" style="overflow: auto">
              <config
                ref="configForm"
                :kbtenantInfo="kbtenantInfo"
                @cancleConfig="cancleConfig"
                @saveConfig="saveConfig"
              ></config>
            </a-scrollbar>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <tool ref="toolForm" :kbtenantInfo="kbtenantInfo" :item="setObj" :kbdetail="kbdetail" />
  </div>
</template>

<script setup>
import { computed, ref, reactive, watch, nextTick, onBeforeMount, onMounted, onBeforeUnmount } from 'vue';
import { useI18n } from 'vue-i18n';
import useLoading from './loading';
import {
  queryKbList,
  queryKbDocumentList,
  deleteKnow,
  queryKbdetail,
  kbdocumentrm,
  kbdocumentrun,
  kbdocumentchangeStatus,
  downloadFile,
  changeStatus
} from '../../../../apis/rgflow-dify';
import { toSyncOwnKnowledge } from './asyc.js';
import cloneDeep from 'lodash/cloneDeep';
// import Sortable from 'sortablejs';
import add from './add.vue';
import edit from './edit.vue';
import addKnow from './addKnow.vue';
import config from './config.vue';
import test from './test.vue';
import tool from './tool.vue';
// import docx from '@/views/dmx/knowledgeLib/components/docx.vue';
// import excel from '@/views/dmx/knowledgeLib/components/excel.vue';
// import txtPdf from '@/views/dmx/knowledgeLib/components/txtPdf.vue';
import { Message, Modal } from '@arco-design/web-vue';
import { documentHeight, parseTime, getTableColumns } from './utils';

const props = defineProps({
  kb_id: {
    type: String,
    default: ''
  }
});

const account = ref(null);
const generateFormModel = () => {
  return {
    number: '',
    name: '',
    contentType: '',
    filterType: '',
    createdTime: [],
    status: ''
  };
};
const { loading, setLoading } = useLoading(true);
const { t } = useI18n();
const renderData = ref([]);
const formModel = ref(generateFormModel());
const cloneColumns = ref([]);
const showColumns = ref([]);
let setObj = reactive({});

const size = ref('medium');
let visible = ref(false);
let listloading = ref(false);
let keywords = ref('');
let activeKey = ref('1');
let detailsShow = ref(false);
let checkedAll = ref(false);
let checkedArr = ref([]);
let selectedTab = ref(0);
let testForm = ref(null);
let configForm = ref(null);
let documenttype = ref('docx');
let previewSrc = ref('');
let kbId = ref('');
let kbobj = reactive({});
let kbdetail = reactive({});
let parser_ids = reactive({});
let seeObj = reactive({});
let toolForm = ref(null);
let kbtenantInfo = reactive({
  asr_id: 'paraformer-realtime-8k-v1',
  embd_id: 'BAAI/bge-large-zh-v1.5',
  img2txt_id: 'qwen-vl-max',
  llm_id: 'qwen-plus',
  name: 'wanghaos Kingdom',
  parser_ids:
    'naive:General,qa:Q&A,resume:Resume,manual:Manual,table:Table,paper:Paper,book:Book,laws:Laws,presentation:Presentation,picture:Picture,one:One',
  rerank_id: 'BAAI/bge-reranker-v2-m3',
  role: 'owner',
  tenant_id: '948fc6fa41ab11ef8fb80242ac120004',
  parser_idObj: {}
});
let tabs = ref([]);
let timer = null; // 定时器

const selectTab = (item) => {
  // selectedTab.value = index;
  checkedArr.value = [];
  kbobj = item;
  kbId = kbobj.id;
  basePagination.page = 1;
  fetchData({
    kb_id: kbobj.id,
    ...basePagination
  });
  getKbdetail(kbobj.id);
};
const toTargetKnowledge = () => {
  if (tabs.value.length) {
    const index = tabs.value.findIndex((item) => item.id == props.kb_id);
    if (index !== -1) {
      selectTab(tabs.value[index]);
    }
  }
};
const getAut = (val) => {
  // const roleData = JSON.parse(getUserResources());
  // const roleBtn = roleData.map((item: any) => item.component);
  // return roleBtn.includes(val);
  return true;
};

const basePagination = {
  page: 1,
  page_size: 10
};
const pagination = reactive({
  ...basePagination
});
const densityList = computed(() => [
  {
    name: t('knowledgeLib.font_size.mini'),
    value: 'mini'
  },
  {
    name: t('knowledgeLib.font_size.small'),
    value: 'small'
  },
  {
    name: t('knowledgeLib.font_size.medium'),
    value: 'medium'
  },
  {
    name: t('knowledgeLib.font_size.large'),
    value: 'large'
  }
]);
// const columns = computed(() => [
//   {
//     title: '名称',
//     dataIndex: 'name',
//     slotName: 'name',
//     width: 300
//   },
//   {
//     title: '分快数',
//     dataIndex: 'chunk_num',
//     width: 90
//   },
//   {
//     title: '上传时间',
//     dataIndex: 'create_time',
//     slotName: 'create_time',
//     width: 200
//   },
//   {
//     title: '解析方法',
//     dataIndex: 'parser_id',
//     slotName: 'parser_id',
//     width: 150
//   },
//   {
//     title: '启用',
//     dataIndex: 'status',
//     slotName: 'status',
//     width: 100
//   },
//   {
//     title: '解析状态',
//     dataIndex: 'run',
//     slotName: 'run',
//     width: 100
//   },
//   {
//     title: '操作',
//     dataIndex: 'action',
//     slotName: 'action',
//     width: 200,
//     minWidth: 200
//   }
// ]);
const columns = computed(() => {
  return getTableColumns(t);
});
const contentTypeOptions = computed(() => [
  {
    label: '图文',
    value: 'img'
  },
  {
    label: '横版短视频',
    value: 'horizontalVideo'
  },
  {
    label: '竖版小视频',
    value: 'verticalVideo'
  }
]);
const filterTypeOptions = computed(() => [
  {
    label: '人工筛选',
    value: 'artificial'
  },
  {
    label: '规则筛选',
    value: 'rules'
  }
]);
const statusOptions = computed(() => [
  {
    label: '已上线',
    value: 'online'
  },
  {
    label: '已下线',
    value: 'offline'
  }
]);
const fetchData = async (params) => {
  setLoading(true);
  try {
    const data = await queryKbDocumentList(params);
    if (data.retcode == '0') {
      parser_ids = kbtenantInfo.parser_ids.split(',').reduce((acc, pair) => {
        const [key, value] = pair.split(':');
        acc[key] = value;
        return acc;
      }, {});
      kbtenantInfo.parser_idObj = parser_ids;
      renderData.value = data.data.docs || [];
      renderData.value = renderData.value.map((item) => {
        return {
          ...item,
          loading: false,
          parser_id: parser_ids[item.parser_id]
        };
      });
      pagination.page = params.page;
      pagination.current = params.page;
      pagination.total = data.data.total;

      // 定时器查询文档
      documentList();
    }
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};

const documentList = async () => {
  let params = { ...basePagination, kb_id: kbobj.id };
  const data = await queryKbDocumentList(params);
  if (data.retcode == '0') {
    parser_ids = kbtenantInfo.parser_ids.split(',').reduce((acc, pair) => {
      const [key, value] = pair.split(':');
      acc[key] = value;
      return acc;
    }, {});
    kbtenantInfo.parser_idObj = parser_ids;
    renderData.value = data.data.docs || [];
    renderData.value = renderData.value.map((item) => {
      return {
        ...item,
        loading: false,
        parser_id: parser_ids[item.parser_id]
      };
    });
  }
};

const search = () => {
  basePagination.page = 1;
  fetchData({
    kb_id: kbobj.id,
    ...basePagination,
    keywords: keywords.value
  });
};

const handleClick = (data) => {
  Object.assign(setObj, data);
  toolForm.value.handleClick(data);
};

const onPageChange = (current) => {
  basePagination.page = current;
  fetchData({ ...basePagination, kb_id: kbobj.id });
};

const selectTabAll = (val) => {
  checkedAll.value = val;
};
const selectTabChange = (val) => {
  checkedArr.value = val;
};

const knowledgeData = async (params = { page: 1, page_size: 10 }) => {
  listloading.value = true;
  try {
    const { data } = await queryKbList(params);
    tabs.value = data;
    if (tabs.value.length > 0 && tabs.value[0]) {
      // kbobj = tabs.value[0];
      // kbId = kbobj.id;
      // activeKey.value = '1';
      // basePagination.page = 1;
      fetchData({
        kb_id: props.kb_id,
        ...basePagination
      });
      toTargetKnowledge();
      // getKbdetail(kbobj.id);
      getKbdetail(props.kb_id);
    } else {
    }
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    listloading.value = false;
  }
};

const getKbdetail = async (kb_id) => {
  //   查询知识库详情
  const data = await queryKbdetail({
    kb_id: kb_id
  });
  kbdetail = data.data;
  testForm.value.changekbid(kbdetail.id);
  configForm.value.changekbObj(kbdetail);
};

const getknowledge = async (id) => {
  setLoading(true);
  try {
    const { data } = await queryKbList({ page: 1, page_size: 10 });
    tabs.value = data;
    if (tabs.value.length > 0) {
      // 定位到新增的知识库单元
      selectedTab.value = tabs.value.findIndex((item) => item.id == id);
      getKbdetail(id); // 获取详情
      kbobj.id = id;
      activeKey.value = '3';
    }
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};

const deleteKnowledge = (id) => {
  Modal.confirm({
    title: '提示信息',
    content: '确认删除吗',
    okText: '确定',
    cancelText: '取消',
    hideTitle: true,
    onOk: async () => {
      let data = await deleteKnow({
        kb_id: id
      });
      if (data.retcode == 0) {
        Message.success('删除成功');
        knowledgeData();
      }
    },
    onCancel: () => {}
  });
};
const reset = () => {
  formModel.value = generateFormModel();
};

function handleTabChange(key) {
  activeKey.value = key;
}

const handleSelectDensity = (val, e) => {
  size.value = val;
};

const cancleConfig = () => {
  activeKey.value = '1';
  let id = tabs.value[selectedTab.value].id;
  // basePagination.page = 1;
  // fetchData({
  //   kb_id: id,
  //   ...basePagination,
  // });
};

const saveConfig = async () => {
  activeKey.value = '1';
  let id = tabs.value[selectedTab.value].id;
  const { data } = await queryKbList({ page: 1, page_size: 10 });
  tabs.value = data;
  fetchData({
    kb_id: id,
    ...basePagination
  });
  getKbdetail(id); // 获取详情
};

const enableDisable = async (type) => {
  Promise.all(
    checkedArr.value.map(async (item) => {
      await changeStatus({
        doc_id: item,
        status: type
      });
    })
  ).then(() => {
    Message.success('更新成功');
    getKbList();
  });
};

//批量启用删除禁用
const addBlock = async (type) => {
  if (type != 3) {
    //启动和取消
    let data = await kbdocumentrun({
      doc_ids: checkedArr.value,
      run: type
    });
    if (data.retcode == 0) {
      checkedArr.value.forEach(async (item) => {
        tabs.value.forEach(async (items) => {
          if (items.id == item) {
            items.loading = true;
          }
        });
      });
      getKbList();
    } else {
      // Message.error('解析失败');
      // row.run = '1';
    }
  } else {
    //批量删除
    Modal.confirm({
      title: '提示信息',
      content: '确认删除吗',
      okText: '确定',
      cancelText: '取消',
      hideTitle: true,
      onOk: async () => {
        let data = await kbdocumentrm({ doc_id: checkedArr.value });
        if (data.retcode == 0) {
          Message.success('删除成功');
          getKbList();
          // 同步数据
          toSyncOwnKnowledge(props.kb_id);
        }
      },
      onCancel: () => {}
    });
  }
};

const getKbList = async () => {
  await fetchData({
    kb_id: tabs.value[selectedTab.value].id,
    ...basePagination
  });
};

const exchangeArray = (array, beforeIdx, newIdx, isDeep = false) => {
  const newArray = isDeep ? cloneDeep(array) : array;
  if (beforeIdx > -1 && newIdx > -1) {
    // 先替换后面的，然后拿到替换的结果替换前面的
    newArray.splice(beforeIdx, 1, newArray.splice(newIdx, 1, newArray[beforeIdx]).pop());
  }
  return newArray;
};

function upTabdateItem(id, newName) {
  const itemToUpdate = renderData.value.find((item) => item.id === id);
  if (itemToUpdate) {
    itemToUpdate.name = newName;
  }
}

const deleteItem = async (row) => {
  let data = await kbdocumentrm({ doc_id: row.id });
  if (data.retcode == 0) {
    Message.success('删除成功');
    fetchData({
      kb_id: kbobj.id,
      ...basePagination
    });
  }
};
const onDownloadDocument = async (record) => {
  await downloadFile({
    url: `/api/v1/document/get/${record.id}`,
    filename: record.name
  });
};
const previewArea = async (row) => {
  Object.assign(seeObj, row);
  let type = row.name.split('.')[1];
  if (type == 'pdf') {
    documenttype.value = 'txtPdf';
  } else if (type == 'docx') {
    documenttype.value = 'docx';
  } else if (type == 'xlsx') {
    documenttype.value = 'excel';
  } else if (type == 'txt') {
    documenttype.value = 'txtPdf';
  } else {
    return false;
  }

  previewSrc.value = `${import.meta.env.VITE_API_BASE_URL}/v1/document/get/${row.id}`;
  // previewSrc.value = `${ httpUrl }/v1/document/get/${row.id}`
  visible.value = true;
};

const handleChangeStatus = async (row) => {
  // console.log(row);
  let data = await kbdocumentchangeStatus({
    doc_id: row.id,
    status: row.status
  });
  if (data.retcode == 0) {
    Message.success('操作成功');
  }
};

const run = async (row) => {
  row.loading = true;
  let run;
  if (row.run == '0') {
    run = '1';
  } else if (row.run == '1') {
    run = '2';
  } else if (row.run == '2') {
    run = '1';
  } else {
    run = '1';
  }
  let data = await kbdocumentrun({
    doc_ids: [row.id],
    run: run
  });
  if (data.retcode == 0) {
    // 定时器查询当前列表
    fetchData({
      kb_id: tabs.value[selectedTab.value].id,
      ...basePagination
    });
  } else {
    // Message.error('解析失败');
    // row.run = '1';
  }

  row.loading = false;
};

const changeFetchData = async (row) => {
  basePagination.page = 1;
  fetchData({
    kb_id: kbobj.id,
    ...basePagination
  });
};

const handlePreview = (file) => {
  if (file.type == 'doc') {
    window.open(`${window.RGFLOW_BASE_URL}/document/${file.id}?ext=docx&prefix=document`);
  } else if (file.type == 'pdf') {
    window.open(`${window.RGFLOW_BASE_URL}/v1/document/get/${file.id}`);
  }
};

watch(
  () => columns.value,
  (val) => {
    // alert(columns.value)
    cloneColumns.value = cloneDeep(val);
    cloneColumns.value.forEach((item, index) => {
      item.checked = true;
    });
    showColumns.value = cloneDeep(cloneColumns.value);
  },
  { deep: true, immediate: true }
);

onBeforeMount(async () => {
  // const  {data}  = await queryKbtenantInfo();
  // Object.assign(kbtenantInfo,data);
  // console.log(kbtenantInfo,'kbtenantInfo的数据');
});
onMounted(() => {
  knowledgeData();
});
onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

<style scoped lang="css">
.container {
  /* padding: 0 20px 20px 20px; */
  height: 100%;
  .main-container {
    display: flex;
    width: 100%;
    height: 100%;

    .lf-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 8px;
      background: var(--color-bg-2);
      width: 200px;

      .lf-container-top {
        display: flex;
        margin: 10px 0;
      }

      .lf-container-down {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 90%;
        height: calc(100% - 80px);
        border: 1px solid var(--color-fill-3);
        border-radius: 8px;
        margin-bottom: 10px;
        .tab {
          cursor: pointer;
          box-sizing: border-box;
          margin: 10px 10px;
          padding: 0 10px;
          padding-right: 20%;
          font-size: 14px;
          height: 40px;
          line-height: 40px;
          list-style: none;
          position: relative;
          color: var(--color-text-1);
          border: 1px solid var(--color-neutral-3);
          background: var(--color-bg-2);
          border-radius: 8px;
          overflow: hidden; /* 确保超出容器的文本被隐藏 */
          white-space: nowrap; /* 防止文本换行 */
          text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        .tab:hover {
          color: #2a2a2b;
          border: 1px solid var(--color-neutral-3);
          background: #e8e8ea;
          box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
            0 5px 12px 4px rgba(0, 0, 0, 0.09);
        }

        .tab.active {
          color: #2a2a2b;
          border: 1px solid var(--color-neutral-1);
          background: #e8e8ea;
          cursor: pointer;
        }
      }
    }

    .rt-container {
      position: relative;
      //background: #626aea;
      /* margin-left: 20px; */
      /* width: calc(100% - 200px); */
      overflow: hidden;

      .rt-container-main {
        overflow: auto;
      }

      .details {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;

        .details-header {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          padding-right: 20px;
        }
      }
    }
  }
}

:deep(.arco-table-th) {
  &:last-child {
    .arco-table-th-item-title {
      margin-left: 16px;
    }
  }
}

.action-icon {
  margin-left: 12px;
  cursor: pointer;
}

.active {
  color: #0960bd;
  background-color: #e3f4fc;
}

.setting {
  display: flex;
  align-items: center;
  width: 200px;

  .title {
    margin-left: 12px;
    cursor: pointer;
  }
}
.popover-content {
  max-height: 500px;
  overflow: auto;
}
</style>