AI_Engineering/ais_search/web/src/views/document/index.vue

<template>
  <div class="page-doc">
    <div class="header">
      <home-header @login="emits('login')" sub-title="知识库管理" />
    </div>
    <FileDetail
      v-if="fileViewerVisabled"
      :fileDetail="currentFile"
      :fileType="fileType"
      :changeFile="showFileDetail"
      @close="closeViewerHandle"
    />
    <div class="my-doc-container">
      <div class="left_box">
        <div class="type_item" v-if="isFolderEditor" @click="()=>{onMenuClickHandle({type: 'add', 'id': 0})}">
          <div class="btn">新建一级类型</div>
        </div>
        <div class="menu_box">
          <menus
            mode="inline"
            :items="folders"
            :editor="isFolderEditor"
            @menu-click="onMenuClickHandle" >
        </menus>
        </div>
        <div class="type_item">
          <div class="btn" @click="isFolderEditor=!isFolderEditor">{{ isFolderEditor ? '退出编辑': '业务类型管理' }}</div>
        </div>
      </div>
      <div class="content_box">
        <div class="page-content">
          <div class="content-top">
            <div class="left">
              <a-button
                type="primary"
                :icon="h(CloudUploadOutlined)"
                @click="uploadFiles(state.selectedRowKeys)"
                class="top_btn"
                >导入</a-button
              >
              <a-button
                :icon="h(DownloadOutlined)"
                @click="downloadFiles(state.selectedRowKeys)"
                class="top_btn m-l-15"
                >下载</a-button
              >
              <a-dropdown>
                <template #overlay>
                  <a-menu @click="onChangeBusClass">
                    <a-menu-item key="1">
                      是
                    </a-menu-item>
                  </a-menu>
                </template>
                <a-button class="top_btn m-l-15">
                  业务是否分类
                  <DownOutlined />
                </a-button>
              </a-dropdown>
              <a-dropdown>
                <template #overlay>
                  <a-menu @click="onChangeDocType">
                    <a-menu-item key="0">pdf</a-menu-item>
                    <a-menu-item key="1">doc</a-menu-item>
                  </a-menu>
                </template>
                <a-button class="top_btn m-l-15">
                  文档格式
                  <DownOutlined />
                </a-button>
              </a-dropdown>
            </div>
            <div class="right">
              <a-input
                v-model:value="searchValue"
                placeholder="搜索文档"
                style="width: 280px; height: 40px"
                @pressEnter="initTableList"
              >
                <template #suffix>
                  <SearchOutlined
                    @click="initTableList"
                    style=""
                    class="search-icon"
                  />
                </template>
              </a-input>
            </div>
          </div>
          <div class="content-table">
            <a-table
              :row-selection="{
                selectedRowKeys: state.selectedRowKeys,
                onChange: onSelectChange,
              }"
              rowKey="id"
              :loading="loading"
              :columns="columns"
              :data-source="dataSource"
              :pagination="false"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'name'">
                  <div class="editable-cell">
                    <div v-if="editableData[record.id] && !record.type">
                      <a-input v-model:value="editableData[record.id].name" @pressEnter="updateHandle(record.id)" />
                    </div>
                    <div v-else class="editable-cell-text-wrapper">
                      <div class="name-box" @click="showFileDetail(record)">
                        <MyIcon icon="icon-wenjianleixing-suolvetu-PDFwendang" size="18" />
                        <span>{{ record.name }}</span>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-if="column.key === 'createTime'">
                  <div>
                    {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
                  </div>
                </template>
                <template v-else-if="column.key === 'action'">
                  <a-button
                    type="text"
                    :icon="h(DownloadOutlined)"
                    style="margin-right: 15px"
                    @click="downloadFile(record)"
                    >下载</a-button
                  >
                  <a-dropdown>
                    <a class="ant-dropdown-link" @click.prevent>
                      <span style="font-size: 18px; font-wight: 600">···</span>
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a-button
                            type="link"
                            :icon="h(DeleteOutlined)"
                            style="color: #000"
                            @click="onDeleteFileHandle(record.id)"
                            >刪除</a-button
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a-button
                            type="link"
                            :icon="h(DeliveredProcedureOutlined)"
                            style="color: #000"
                            @click="moveFiles([record.id])"
                            >移动</a-button
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a-button
                            type="link"
                            :icon="h(VerticalAlignTopOutlined)"
                            style="color: #000"
                            @click="topFileHandle(record)"
                            >置顶</a-button
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <a-button
                            type="link"
                            :icon="h(FormOutlined)"
                            style="color: #000"
                            @click="editFolderName(record.id)"
                            >编辑</a-button
                          >
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </template>
              </template>
            </a-table>
          </div>
          <div class="pagination-box">
            <a-pagination v-model:current="current1" :showSizeChanger="false" show-quick-jumper :total="total" @change="onPageChange" />
            <span>共{{ total }}个文件</span>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model:open="openNewFolderModel" title="新建类型" @ok="createFolder">
      <a-input
        style="margin-top: 15px; margin-bottom: 10px"
        v-model:value="folderName"
        placeholder="请输入类型名称"
      />
    </a-modal>
    <a-modal v-model:open="editVisabled" title="编辑类型" @ok="updateHandle">
      <a-input
        style="margin-top: 15px; margin-bottom: 10px"
        v-model:value="editableData.name"
        placeholder="请输入类型名称"
      />
    </a-modal>
    <a-modal v-model:open="deleteVisiabled" title="提示" @ok="deleteFolders">
      <h2>确定删除该目录吗？</h2>
    </a-modal>
    <a-modal v-model:open="deleteFileVisiabled" title="提示" @ok="deleteFiles">
      <h2>确定删除该文件吗？</h2>
    </a-modal>
    <MoveFileModel
      :open="moveFileModel"
      :ids="moveFileIds"
      :closeModel="closeMoveFileModel"
    />
    <FileUpload ref="userUploadFileRef" :pid="currentId" @close="closeHandle"/>
  </div>
</template>
<script lang="ts" setup>
/**
 * @description 我的文档
 */
import { cloneDeep } from 'lodash-es';
import { h, ref, reactive, onMounted } from "vue";
import http from "@/utils/http";
import { listToTree } from '@/utils/struct'
import {
  DownOutlined,
  FormOutlined,
  DeleteOutlined,
  CloudUploadOutlined,
  SearchOutlined,
  DownloadOutlined,
  FolderAddOutlined,
  VerticalAlignTopOutlined,
  DeliveredProcedureOutlined,
} from "@ant-design/icons-vue";
import HomeHeader from '@/views/home/components/HomeHeader.vue';
import { message } from "ant-design-vue";
import MyIcon from "@/components/myIcon/index.vue";
import Menus from "./Menus.vue";
import MoveFileModel from "./MoveFiles.vue";
import FileUpload from "./FileUpload.vue";
import FileDetail from "./FileDetail.vue";
import dayjs from "dayjs";

const currentId = ref(-1);

const onChangeBusClass = () => {
  
}
const onChangeDocType = () => {

}
// 表格列
const columns = [
  {
    title: "文档名称",
    dataIndex: "name",
    key: "name",
    width: 360
  },
  {
    title: "文档类型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "业务类型",
    dataIndex: "typeName",
    key: "typeName",
  },
  {
    title: "文档大小",
    dataIndex: "size",
    key: "size",
    sorter: {
      compare: (a, b) => a.size - b.size,
      multiple: 2,
    },
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    width: 250,
    align: "center",
  },
];
const searchValue = ref("");
const dataSource = ref<any[]>([]);
const pageNo = ref(1)
const total = ref(0)
const loading = ref(false)
const getTableList = () => {
  const urlStr = `/ai/knowledge/file/page`
  loading.value = true;
  const sendData = {
    pageNo: pageNo.value,
    pageSize: 10,
    name: searchValue.value,
    parentId: currentId.value === -1 ? '' : currentId.value
  }
  http.get(urlStr, sendData).then((result) => {
    loading.value = false;
    const resultData = result.data;
    if (resultData['list']) {
      dataSource.value = resultData['list'];
      total.value = resultData['total']
    }
  }).catch((err) => {
    loading.value = false;
  });
};
const initTableList = () => {
  pageNo.value = 1;
  getTableList();
}
getTableList();
const onPageChange = (page) => {
  pageNo.value = page;
  getTableList();
}
const state = reactive<{
  loading: boolean;
}>({
  selectedRowKeys: [], // Check here to configure the default column
  loading: false,
});

const onSelectChange = (selectedRowKeys1) => {
  state.selectedRowKeys = selectedRowKeys1;
};
const searchHandle = () => {
  initTableList()
}
const currentFileId = ref(null)
const deleteFileVisiabled = ref(false)
const deleteFiles = () => {
  const urlStr = `/ai/knowledge/file/delete?id=${currentFileId.value}`
  http.get(urlStr).then((result) => {
    if (result.data) {
      message.success("删除成功！");
      getTableList();
    } else {
      message.error("删除失败，请稍后重试！");
    }
    deleteFileVisiabled.value = false;
  });
}
const onDeleteFileHandle = (id) => {
  deleteFileVisiabled.value = true
  currentFileId.value = id
}
/***
 * 左侧文件夹目录功能
 * 查询、新增、重命名、删除
 */
const isFolderEditor = ref(false)
const folders = ref([])
const getTypeList = () => {
  const urlStr = `/ai/knowledge/type/list`
  http.get(urlStr, {
    name:''
  }).then((result) => {
    loading.value = false;
    if (result.data && result.data.length > 0) {
      const lists = [{
        "id": -1,
        "name": "全部知识库",
        "parentId": 0,
        "sort": null
      }].concat(result.data)
      folders.value = listToTree(lists)
      console.log(folders.value)
    }
  })
}
getTypeList();
// 新建文件夹
const folderName = ref("");
const openNewFolderModel = ref(false);
const createFolder = async () => {
  const urlStr = '/ai/knowledge/type/create'
  const formData = new FormData();
  formData.append("name", folderName.value)
  formData.append("parentId", currentId.value);
  http.post(urlStr, formData).then((result) => {
    if (result.data) {
      message.success("文件夹新建成功！");
      folderName.value = "";
      getTypeList();
    } else {
      message.error("新建文件夹失败，请稍后重试！");
    }
    openNewFolderModel.value = false;
  });
};
//文件夹重命名
const editableData = ref({});
const editVisabled = ref(false)
const updateHandle = (id: string) => {
  const urlStr = `/ai/knowledge/type/update`
  const sendData = {
    ...editableData.value
  }
  http.post(urlStr, sendData).then((result) => {
    if (result.data) {
      message.success("重命名成功！");
      getTypeList();
    }
    editVisabled.value = false;
  });
};
//文件夹刪除
const deleteVisiabled = ref(false)
const deleteFolders = () => {
  const urlStr = `/ai/knowledge/type/delete?id=${currentId.value}`
  http.get(urlStr).then((result) => {
    if (result.data) {
      message.success("删除成功！");
      getTypeList();
    } else {
      message.error("删除失败，请稍后重试！");
    }
    deleteVisiabled.value = false;
  });
}
//文件夹刪除
const moveUpHandle = (id) => {
  const urlStr = `/ai/knowledge/type/move-up?id=${id}`
  http.get(urlStr).then((result) => {
    if (result.data) {
      message.success("上移成功！");
      getTypeList();
    } else {
      message.error("上移失败，请稍后重试！");
    }
  });
}
//文件夹刪除
const moveDownHandle = (id) => {
  const urlStr = `/ai/knowledge/type/move-down?id=${id}`
  http.get(urlStr).then((result) => {
    if (result.data) {
      message.success("下移成功！");
      getTypeList();
    } else {
      message.error("下移失败，请稍后重试！");
    }
  });
}
const onMenuClickHandle = (data) => {
  const type = data['type']
  const payload = data['payload']
  currentId.value = payload['id'] == -1 ? 0 : payload['id']
  switch (type) {
    case 'query':
      searchValue.value = ''
      console.log("payload value：", payload)
      initTableList();
      break;
    case 'add':
      openNewFolderModel.value = true
      break;
    case 'edit':
      editVisabled.value = true
      editableData.value = cloneDeep(payload);
      break;
    case 'delete':
      deleteVisiabled.value = true
      break;
    case 'move_up':
      moveUpHandle(payload['id'])
      break;
    case 'move_down':
      moveDownHandle(payload['id'])
      break;
  }
  
};
/**
 * 文件
 */
// 下载（单文件下载）
const downloadFile = async (data: any) => {
  const downloadUrl = `${window.AppGlobalConfig.knowledgeDocUrlProxy}${data.name}`
  const response = await fetch(downloadUrl);
  const blob = await response.blob();
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = data.name ?? "download.pdf"; // 强制下载并指定文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  // 释放 Blob URL
  window.URL.revokeObjectURL(url);
};
//文件导入
// 上传文档
const userUploadFileRef = ref<any>(null);
const uploadFiles = () => userUploadFileRef.value.showModal();
const closeHandle = () => {
  getTableList();
}
// 多文件打包下载
const downloadFiles = async (ids: any[] = []) => {
  message.success("正在为你下载文件，请稍等 ...");
  const selectedArrs = dataSource.value.filter((item) => {
    return ids.includes(item['id']);
  })
  selectedArrs.forEach((item) => {
    downloadFile(item['name'])
  })
};
// 置顶
const topFileHandle = async (item) => {
  const urlStr = `/ai/knowledge/file/update`
  const sendData = {
    ...item
  }
  sendData['sort'] = 0
  http.post(urlStr, sendData).then((result) => {
    if (result.data) {
      message.success("置顶成功！");
      getTableList();
    } else {
      message.error("置顶失败，请稍后重试！");
    }
  });
};
// 移动：最外层文件禁止多选移动，文件夹类型禁止移动
const moveFileModel = ref(false);
const moveFileIds = ref<any[]>([]);
const moveFiles = (ids: any[] = []) => {
  moveFileIds.value = ids;
  moveFileModel.value = true;
};
const closeMoveFileModel = () => {
  moveFileModel.value = false;
  moveFileIds.value = [];
};
// 跳到文件详情页面
const fileViewerVisabled = ref(false)
const fileType = ref('')
const currentFile = ref()
const showFileDetail = (data: any) => {
  console.log(data)
  fileViewerVisabled.value = true;
  data['viewerUrl'] = `${window.AppGlobalConfig.knowledgeDocUrlProxy}${data.name}`
  currentFile.value = data;
  const name = data.name;
  fileType.value = name.slice(name.indexOf(".") + 1)
};
const closeViewerHandle = () => {
  fileViewerVisabled.value = false;
}
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>