td_official/src/views/quality/knowledgeDocument/index.vue

<template>
  <div class="profile_engin">
    <div class="box_info">
      <div class="tree_left1" id="tree_left1">
        <div class="check_select">
          <el-button type="primary" v-auth="'/zm/api/v1/system/documentData/newFolder'" @click="addFile"
            ><el-icon><ele-Plus /></el-icon>新建文件夹</el-button
          >
          <div class="box_btn" v-auth="'/zm/api/v1/system/documentData/add'">
            <span>＋导入</span>
            <div class="btn">
              <el-button type="primary" style="float: left" @click="state.bigUploadFile1"
                ><el-icon><ele-Plus /></el-icon>导入压缩文件</el-button
              >
              <el-button type="primary" style="float: left" :disabled="!state.parentPid" @click="uploadFile(2)"
                ><el-icon><ele-Plus /></el-icon>导入文件</el-button
              >
            </div>
          </div>
        </div>
        <div class="file_upload check_select">
          <el-checkbox v-model="state.checked" @change="handleCheckedTreeExpand($event)" label="展开/折叠" size="large" />
          <div style="margin: 0 10px">
            <el-select v-model="state.paramsQuery.switch" placeholder="当前文件夹" size="small">
              <el-option v-for="item in state.options" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </div>
          <el-button type="primary" v-auth="'/zm/api/v1/system/documentProject/dataCompressedDownload'" :disabled="!state.parentPid" @click="onExport"
            ><el-icon><ele-Download /></el-icon>下载</el-button
          >
          <el-button type="primary" @click="onBook" v-auth="'/zm/api/v1/system/documentData/dataFileQuery'"
            ><el-icon><ele-View /></el-icon>查看全项目文件</el-button
          >
        </div>
        <div class="file_upload check_select">
          <el-input class="input_left" v-model="filterText" size="small" placeholder="请输入文件名称" />
        </div>
        <el-tree
          ref="treeRef"
          highlight-current
          :default-expand-all="state.checked"
          :filter-node-method="filterFolder"
          :data="state.treeList"
          :props="state.Props"
          node-key="id"
          accordion
          :draggable="state.draggableCheck"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          :current-node-key="state.selectedNodeId"
          @node-drop="handleDragEnd"
          :allow-drop="allowDrop"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <el-icon color="#f1a81a"><ele-FolderOpened /></el-icon>
              <span>{{ node.label }}</span>
              <span style="margin-left: 20px" class="set-tool">
                <el-button type="primary" v-auth="'/zm/api/v1/system/documentData/onlineImport'" link @click.stop="uploadOnlineFile(node, data)"
                  >在线模板复制</el-button
                >
                <el-button type="success" v-auth="'/zm/api/v1/system/documentData/edit'" link @click.stop="onUpdateName(node, data)"
                  >重命名</el-button
                >
                <el-button type="danger" v-auth="'/zm/api/v1/system/documentData/delete'" link @click.stop="onRemove(node, data)">删除</el-button>
              </span>
            </span>
          </template>
        </el-tree>
        <div class="resize-handle resize-handle-right right"></div>
      </div>
      <div class="list_right" id="list_right1">
        <div>
          <el-form :model="state.paramsQuery" ref="queryRef" :inline="true" label-width="100px">
            <el-row>
              <el-col :span="6" class="colBlock">
                <el-form-item label="文件名称" prop="name">
                  <el-input v-model="state.paramsQuery.name" placeholder="请输入文件名称" clearable @keyup.enter.native="getdocumentDataList" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" @click="searchInfo"
                    ><el-icon><ele-Search /></el-icon>搜索</el-button
                  >
                  <el-button @click="resetQuery"
                    ><el-icon><ele-Refresh /></el-icon>重置</el-button
                  >
                </el-form-item>
              </el-col>
              <!-- <el-col :span="4">
								<el-button type="primary" v-auth="'/zm/api/v1/system/documentData/add'" :disabled="!parentPid" @click="uploadFile(2)"
									><el-icon><ele-Plus /></el-icon>导入本地文件</el-button
								>
							</el-col> -->
              <!-- <el-col :span="4">
								<el-button type="primary" @click="onMoveFile"
									><el-icon><ele-Plus /></el-icon>移动</el-button
								>
							</el-col> -->
            </el-row>
          </el-form>
        </div>
        <el-table v-loading="state.loading" :data="state.infoList" height="67vh" border>
          <el-table-column label="序号" align="center" type="index" min-width="50px" />
          <el-table-column label="文件名称" align="center" prop="name">
            <template #default="scope">
              <span>{{ scope.row.name + scope.row.suffix }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" align="center" prop="createdAt"> </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                v-auth="'/zm/api/v1/system/documentData/get'"
                v-if="state.acceptType.includes(scope.row.suffix)"
                link
                @click="handleView(scope.row)"
                ><el-icon><ele-View /></el-icon>查看</el-button
              >
              <el-button
                type="primary"
                v-auth="'/zm/api/v1/system/documentData/complaintBoxAdd'"
                v-if="state.acceptType.includes(scope.row.suffix)"
                link
                @click="updataView(scope.row)"
                ><el-icon><ele-EditPen /></el-icon>修改文件</el-button
              >
              <el-button type="primary" v-auth="'/zm/api/v1/system/documentData/uniFolderDownload'" link @click="onExportView(scope.row)"
                ><el-icon><ele-Download /></el-icon>下载</el-button
              >
              <el-button type="success" v-auth="'/zm/api/v1/system/documentData/edit'" link @click="updateName(scope.row)"
                ><el-icon><ele-EditPen /></el-icon>修改名称</el-button
              >
              <el-button type="danger" v-auth="'/zm/api/v1/system/documentData/delete'" link @click="handleDelete(scope.row)"
                ><el-icon><ele-DeleteFilled /></el-icon>删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="state.total"
          v-model:page="state.paramsQuery.pageNum"
          v-model:limit="state.paramsQuery.pageSize"
          @pagination="getdocumentDataList"
        />
      </div>
    </div>
    <documentDetail ref="documentDetailRef" v-if="state.showDocumentDetail" @onClose="onClose"></documentDetail>
    <documentsEdit ref="documentDataEditRef" v-if="state.showdocumentDataEdit" @onClose="onCloseEdit"></documentsEdit>
    <uploadFileder
      ref="uploadFilederRef"
      v-if="state.showUploadFileder"
      @onCloseFile="state.showUploadFileder = false"
      @getDocumentListFileType="getdocumentDataListFileType"
    ></uploadFileder>
    <fileOnline ref="fileOnlineRef" @getfileOnlineType="getfileOnlineType"></fileOnline>
    <moveFile ref="moveFileRef"></moveFile>
    <bookFile ref="bookFileRef"></bookFile>
  </div>
</template>

<script setup name="KnowledgeDocument" lang="ts">
import {
  listKnowledgeDocument,
  getKnowledgeDocument,
  delKnowledgeDocument,
  addKnowledgeDocument,
  uniFolderDownload,
  treeStructureData,
  updateKnowledgeDocument
} from '@/api/quality/knowledgeDocument';
import { KnowledgeDocumentVO, KnowledgeDocumentQuery, KnowledgeDocumentForm } from '@/api/quality/knowledgeDocument/types';

type KnowledgeDocumentOption = {
  id: number;
  fileName: string;
  children?: KnowledgeDocumentOption[];
};
// import documentDetail from '/@/views/OnlineEngineering/comm/documentsDetail/index.vue';
// import documentsEdit from '/@/views/OnlineEngineering/comm/documentsEdit/index.vue';
// import profileData from '/@/views/OnlineEngineering/profileData/index.vue';
// import uploadFileder from '/@/views/OnlineEngineering/comm/uploadFileder/index.vue';
// import fileOnline from '/@/views/OnlineEngineering/profileEngineering/fileOnline/index.vue';
// import moveFile from '/@/views/OnlineEngineering/profileEngineering/moveFile/index.vue';
// import bookFile from '/@/views/OnlineEngineering/comm/bookFile/index.vue';
import { useUserStoreHook } from '@/store/modules/user';

const { proxy } = getCurrentInstance() as any;
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取项目列表和当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const filterText = ref('');
const treeRef = ref();
const documentDetailRef = ref();
const documentDataEditRef = ref();
const uploadFilederRef = ref();
const fileOnlineRef = ref();
const moveFileRef = ref();
const bookFileRef = ref();
const baseURL: string | undefined | boolean = import.meta.env.VITE_API_URL;

const state = reactive({
  treeList: [] as any,
  arrayList: [] as any,
  infoMap: new Map(),
  infoList: [] as any,
  Props: {
    children: 'treeStructureDataRes',
    label: 'name'
  },
  total: 0,
  paramsQuery: {
    idStr: '',
    name: '',
    switch: 1,
    pageNum: 1,
    pageSize: 20,
    projectId: currentProject.value?.id
  },
  loading: false,
  checked: true,
  options: [
    { id: 1, label: '当前文件夹及以下' },
    { id: 2, label: '当前文件夹' }
  ],
  showDocumentDetail: false,
  showdocumentDataEdit: false,
  showUploadFileder: false,
  parentRow: null,
  parentPid: null,
  parentName: '',
  selectedNodeId: null,
  projectId: currentProject.value?.id || '',
  acceptType: ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'],
  draggableCheck: true,
  activeName: ''
});

watch(filterText, (val: any) => {
  treeRef.value!.filter(val);
});

// 新建文件夹
const addFile = () => {
  let tip = '在根目录下新建文件夹';
  if (state.parentPid) {
    tip = '在“' + state.parentName + '文件夹”下新建文件夹';
  }
  ElMessageBox.prompt('请输入文件夹名称', tip, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputErrorMessage: '请输入文件夹名称',
    inputValue: ''
  })
    .then(({ value }) => {
      documentDataNewFolder({ fileName: value, pid: state.parentPid, fileType: 3, projectId: state.projectId }).then((res: any) => {
        if (res.code == 0) {
          ElMessage({
            type: 'success',
            message: '添加成功'
          });
          gettreeStructureData();
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          });
        }
      });
    })
    .catch(() => {});
};
// 导入文件
const uploadFile = (fileType) => {
  if (fileType == 2 && !state.parentPid) {
    ElMessage.warning('请选择文件目录！');
    return;
  }
  // 判断上传类型 文件与压缩包区分
  let acceptType = '.zip'; //压缩文件类型
  if (fileType == 2) {
    //文件上传
    acceptType = '';
  }
  state.showUploadFileder = true;
  nextTick(() => {
    // 打开弹框
    uploadFilederRef.value.openDialog(state.parentPid, fileType, acceptType, true);
  });
};
const searchInfo = () => {
  // 搜索
  getdocumentDataList();
};
const resetQuery = () => {
  // 重置
  state.paramsQuery.name = '';
  getdocumentDataList();
};
// 获取树形结构文件夹目录
const gettreeStructureData = () => {
  state.parentPid = null;
  state.activeName = 'second';
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载中……',
    background: 'rgba(0, 0, 0, 0.7)',
    target: '.tree_left1'
  });
  treeStructureData({ projectId: state.projectId }).then((res: any) => {
    loading.close();
    if (res.code == 0 && res.data && res.data.list) {
      state.selectedNodeId = '';
      state.treeList = res.data.list;
      state.paramsQuery.idStr = res.data.list[0].idStr;
      getdocumentDataList();
      setInfo(res.data.list);
    }
  });
};
// 处理数据
const setInfo = (arr) => {
  arr.forEach((element) => {
    state.arrayList.push(element);
    state.infoMap.set(element.idStr, element.id);
    if (element.treeStructureDataRes && element.treeStructureDataRes.length) {
      setInfo(element.treeStructureDataRes);
    }
  });
};
// 选择目录文件
const handleNodeClick = (row) => {
  state.parentRow = row;
  state.parentPid = row.idStr;
  state.parentName = row.name;
  state.paramsQuery.idStr = row.idStr;
  state.paramsQuery.name = '';
  getdocumentDataList();
  if (row.id === state.selectedNodeId) {
    // 如果当前节点已经选中，则取消选中
    state.selectedNodeId = null;
    state.parentPid = null; //关闭父级选择的id
    state.parentRow = null; //获取父级对象
    state.parentName = ''; //获取父级对应的名称
    state.paramsQuery.idStr = ''; //
  } else {
    // 否则选中当前节点 重新赋值
    state.selectedNodeId = row.id;
  }
};
// 获取文档列表数据
const getdocumentDataList = () => {
  if (!state.paramsQuery.idStr) {
    return;
  }
  state.loading = true;
  documentDataList(state.paramsQuery).then((res: any) => {
    state.loading = false;
    if (res.code == 0) {
      res.data.list.sort((a, b) => {
        return a.name.localeCompare(b.name);
      });
      state.infoList = res.data.list;
      state.total = res.data.total;
    }
  });
};
// 查询tree树形结构数据
const filterFolder = (value: string, data: any) => {
  if (!value) return true;
  return data.name.includes(value);
};
const handleDelete = (row) => {
  // 删除文档
  let msg = '你确定要删除所选文件？';
  delFile(msg, row, () => {
    getdocumentDataList();
  });
};
const onExportView = (row) => {};
const updateName = (row) => {
  // 修改名称
  editName(row, '请输入文件名称', 1);
};
const handleView = (row) => {
  getProfileDetail(row.id).then((res: any) => {
    if (res.code == 0) {
      // 查看文档
      state.showDocumentDetail = true;
      nextTick(() => {
        documentDetailRef.value.openDialog(res.data);
      });
    }
  });
};
// 关闭在线编辑弹框
const onClose = () => {
  state.showDocumentDetail = false;
};
// 展开或折叠节点
const handleCheckedTreeExpand = (value: any) => {
  for (let i = 0; i < state.arrayList.length; i++) {
    treeRef.value.store.nodesMap[state.arrayList[i].id].expanded = value;
  }
};
// 关闭修改的在线文档弹框
const onCloseEdit = () => {
  state.showdocumentDataEdit = false;
};
const updataView = (row) => {
  // 修改文档
  state.showdocumentDataEdit = true;
  nextTick(() => {
    documentDataEditRef.value.openDialog(row, '/zm/api/v1/system/busConstructionUser/complaintBoxAddTwo');
  });
};
const resizeHandleRight = () => {
  // 右侧鼠标移动大小
  const resizeHandles = document.getElementsByClassName('resize-handle');
  Array.from(resizeHandles).forEach((handle) => {
    handle.addEventListener('mousedown', startResize);
  });
};
const startResize = (event) => {
  event.preventDefault();
  let dragElement = document.getElementById('tree_left1') as any;
  let dragElementRight = document.getElementById('list_right1');
  const currentHandle = event.target;
  const direction = currentHandle.className.split(' ')[1];
  const startX = event.clientX;
  const startY = event.clientY;
  // 左侧移动的盒子大小
  const startWidth = dragElement.offsetWidth;
  const startHeight = dragElement.offsetHeight;
  const startLeft = dragElement.offsetLeft;
  const startTop = dragElement.offsetTop;
  // 右侧移动盒子宽度
  const rightWidth = dragElementRight.offsetWidth;
  document.addEventListener('mousemove', resize);
  document.addEventListener('mouseup', stopResize);
  function resize(event) {
    const dx = event.clientX - startX;
    const dy = event.clientY - startY;
    let width = startWidth;
    let height = startHeight;
    let left = startLeft;
    let top = startTop;
    let rightWidth1 = rightWidth as any;
    if (direction.includes('right')) {
      width = startWidth + dx + 'px';
      let w = startWidth + dx + 10 + 'px';
      rightWidth1 = `calc(100% - ${w})`; //计算右侧盒子的宽度
    }
    if (parseInt(width) <= 0 || parseInt(height) <= 0) return;
    dragElementRight.style.width = rightWidth1;
    dragElement.style.width = width;
    dragElement.style.height = height;
    dragElement.style.left = left;
    dragElement.style.top = top;
  }
  function stopResize() {
    document.removeEventListener('mousemove', resize);
    document.removeEventListener('mouseup', stopResize);
  }
};
// 删除文件及文件夹
const delFile = (msg, data, cb) => {
  ElMessageBox.confirm(msg, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      documentDataDelete([data.id]).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success('删除成功');
          cb();
        }
      });
    })
    .catch(() => {});
};
const onRemove = (node, data) => {
  const parent = node.parent;
  const children = parent.data.treeStructureDataRes || parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  let msg = '你确定要删除所选文件夹？';
  delFile(msg, data, () => {
    children.splice(index, 1);
    if (data.idStr == state.paramsQuery.idStr) {
      state.infoList = []; //清空文件列表
    }
    state.treeList = [...state.treeList]; //刷新当前列表数据
  });
};
const editName = (data, title, type) => {
  ElMessageBox.prompt(title, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputErrorMessage: title,
    inputValue: data.name
  })
    .then(({ value }) => {
      documentDataEdit({ id: data.id, name: value, type, projectId: state.projectId }).then((res: any) => {
        if (res.code == 0) {
          ElMessage({
            type: 'success',
            message: '修改成功'
          });
          // 数据重新刷新
          if (type == 2) {
            gettreeStructureData();
          } else {
            getdocumentDataList();
          }
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          });
        }
      });
    })
    .catch(() => {});
};
const onUpdateName = (node, data) => {
  editName(data, '请输入文件夹名称', 2);
};
const getdocumentDataListFileType = (fileType) => {
  if (fileType == 2) {
    getdocumentDataList();
  } else {
    gettreeStructureData();
  }
};
const getfileOnlineType = (fileType) => {
  if (fileType == 1) {
    getdocumentDataList();
  } else {
    gettreeStructureData();
  }
};
const onExport = () => {
  uniFolderDownload(state.parentRow.filenPath).then((res: any) => {
    if (res.code == 0) {
      let fileUrl = res.data.RelativePath;
      window.open(fileUrl, '_self');
    }
  });
};
// 在线模板文件导入
const uploadOnlineFile = (node, data) => {
  state.paramsQuery.idStr = data.idStr;
  fileOnlineRef.value.openDialog(data.id);
};
const onMoveFile = () => {
  // 移动文件
  // moveFileRef.value.openDialog();
};
// 拖拽移动
const handleDragEnd = (draggingNode, dropNode, dropType, ev) => {
  // TemplateId 被移动  DataId位置
  let obj = { type: draggingNode.data.type, TemplateId: draggingNode.data.id, projectId: state.projectId, DataId: '' };
  let DataId = '';
  if (dropType == 'after' || dropType == 'before') {
    // 获取父级id
    // 通过pid找父级id
    let pid = dropNode.data.pid; //子级pid
    if (state.infoMap.has(pid)) {
      //
      DataId = state.infoMap.get(pid);
    }
    obj.DataId = DataId;
  } else {
    obj.DataId = dropNode.data.id;
  }
  if (!obj.DataId) {
    return false;
  }
  const loading = ElLoading.service({
    lock: true,
    text: '正在加载中……',
    background: 'rgba(0, 0, 0, 0.7)',
    target: '.tree_left1'
  });
  onlineMobile(obj).then((res: any) => {
    loading.close();
    if (res.code == 0) {
      ElMessage.success('移动成功');
      // 重新获取文件接口
      gettreeStructureData();
    } else {
      ElMessage.error(res.message);
    }
  });
};
const allowDrop = (draggingNode, dropNode, type) => {
  // 不可移动
  if (dropNode.data.pid == 0 && type != 'inner') {
    //不可移动到最外层
    return false;
  } else {
    return true;
  }
};
// 查看所有资料
const onBook = () => {
  bookFileRef.value.openDialog();
};

onMounted(() => {
  resizeHandleRight();
});
</script>

<style lang="scss" scoped>
.profile_engin {
  height: 80vh;
  .set-tool {
    display: none;
  }
  .el-tree-node__content:hover,
  .el-tree-node__content:active {
    .set-tool {
      display: inline-block;
    }
  }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #354e67 !important;
    color: #fff;
  }
  .box_info {
    display: flex;
    justify-content: space-between;
  }
  .pagination-container {
    padding: 10px 0 !important;
  }
  > div {
    height: 100%;
    width: 100%;
  }
  .tree_left1 {
    width: 30%;
    background-color: #fff;
    border: 1px solid #dddddd;
    border-radius: 6px;
    padding: 6px 0px;
    position: relative;
    min-width: 26%;
    border-right: 6px solid;
    border-right-color: rgba(204, 230, 255, 0);
    .resize-handle-right {
      top: 0;
      width: 6px;
      height: 100%;
      right: -10px;
      cursor: ew-resize;
      position: absolute;
      z-index: 999;
    }
    .check_select {
      display: flex;
      align-items: center;
      width: 100%;
      // justify-content: space-between;
      padding: 4px;
      border-bottom: 1px solid #f1f1f1;
      .box_btn {
        width: 360px;
        margin: 0 10px 0 20px;
        position: relative;
        > span {
          padding: 4px 10px;
          background: #67c23a;
          color: #fff;
          border-radius: 2px;
        }
        .btn {
          position: absolute;
          left: 20%;
          display: none;
          top: -2px;
          width: 220px;
          .el-button {
            float: left;
          }
        }
      }
      .box_btn:hover,
      .box_btn:active {
        cursor: pointer;
        .btn {
          display: block;
        }
      }
    }
    .file_upload {
      margin: 2px 0;
    }
    .input_left {
      padding: 6px;
      box-sizing: border-box;
      // border-bottom: 1px solid #cbcbcb;
    }
  }
  .list_right {
    width: 69.5%;
    background: white;
    border: 1px solid #ededed;
    padding: 10px;
    box-sizing: border-box;
  }
  .el-tree {
    height: calc(80vh - 160px);
    width: 100%;
    overflow: auto !important;
  }
  // .el-tree-node__children {
  // 	overflow: visible !important;
  // }
}
</style>