From 6b33583f742e95ec99e7bd5b30a12b8412a38c2b Mon Sep 17 00:00:00 2001
From: lSun <15893999301@qq.com>
Date: Sat, 29 Nov 2025 13:57:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E7=AE=A1=E7=90=86=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fileManager/fileManager.js                |   8 +-
 src/api/select.js                             |  11 +-
 src/router/views/index.js                     |   9 +
 .../fileManager/components/addTableData.vue   | 508 ++++++++++++++++++
 .../fileManager/components/addTreeData.vue    | 354 ++++++++++++
 src/views/fileManager/components/config.js    |  25 +
 src/views/fileManager/components/leftTree.vue | 386 +++++++++++++
 .../fileManager/components/rightTable.vue     | 326 +++++++++++
 src/views/fileManager/file-data.vue           | 317 +++++++++++
 src/views/fileManager/index.vue               |  23 +
 src/views/viewFile/viewFile.vue               | 483 +++++++++++++++++
 11 files changed, 2445 insertions(+), 5 deletions(-)
 create mode 100644 src/views/fileManager/components/addTableData.vue
 create mode 100644 src/views/fileManager/components/addTreeData.vue
 create mode 100644 src/views/fileManager/components/config.js
 create mode 100644 src/views/fileManager/components/leftTree.vue
 create mode 100644 src/views/fileManager/components/rightTable.vue
 create mode 100644 src/views/fileManager/file-data.vue
 create mode 100644 src/views/viewFile/viewFile.vue

diff --git a/src/api/archivesManagement/fileManager/fileManager.js b/src/api/archivesManagement/fileManager/fileManager.js
index 31808da5..5517f568 100644
--- a/src/api/archivesManagement/fileManager/fileManager.js
+++ b/src/api/archivesManagement/fileManager/fileManager.js
@@ -93,7 +93,7 @@ export function getArchivalCatalogueByIdApi(params) {
 export function getFileManageApi(params) {
     return request({
         url: '/blade-system/fileManage/getFileManage',
-        method: 'get',
+        method: 'POST',
         data:params,
     })
 }
@@ -102,7 +102,7 @@ export function getFileManageApi(params) {
 export function geMaxSortApi(params) {
     return request({
         url: '/blade-system/fileManage/getMaxSort',
-        method: 'get',
+        method: 'POST',
         data:params,
     })
 }
@@ -111,7 +111,7 @@ export function geMaxSortApi(params) {
 export function getFileManageByIdApi(params) {
     return request({
         url: '/blade-system/fileManage/getFileManageById',
-        method: 'get',
+        method: 'POST',
         data:params,
     })
 }
@@ -138,7 +138,7 @@ export function fileExtractApi(data) {
 export function getFileAsBase64Api(params) {
     return request({
         url: '/blade-system/fileManage/getFileAsBase64',
-        method: 'get',
+        method: 'POST',
         data:params,
     })
 }
diff --git a/src/api/select.js b/src/api/select.js
index 50e3261a..63aa1ab0 100644
--- a/src/api/select.js
+++ b/src/api/select.js
@@ -5,7 +5,7 @@ export async function getClassifyMarkSelApi(params) {
   return await request({
     url: '/blade-system/archive/getFilesClassifyMarkSelect',
     method: 'post',
-    data: params
+    data: {}
   });
 }
 
@@ -26,3 +26,12 @@ export async function getRoleSelectApi(params) {
     data: params
   });
 }
+
+// 根据字典类型获取字典数据
+export function getDictDataByTypeApi(data) {
+  return request({
+    url: '/blade-system/system/dict/data/type',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/views/index.js b/src/router/views/index.js
index b4b5fa1b..209c210b 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -88,5 +88,14 @@ export default [
         component: () => import(/* webpackChunkName: "views" */ '@/views/system/userinfo.vue'),
       },
     ],
+  },
+
+  {
+    path: '/archivesManagement/fileData',
+    name: 'FileData',
+    component: () => import('@/views/fileManager/file-data.vue'),
+    meta: {
+      title: '档案数据管理'
+    }
   }
 ];
diff --git a/src/views/fileManager/components/addTableData.vue b/src/views/fileManager/components/addTableData.vue
new file mode 100644
index 00000000..391c8dc2
--- /dev/null
+++ b/src/views/fileManager/components/addTableData.vue
@@ -0,0 +1,508 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="title"
+    :show-close="true"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    :append-to-body="true"
+    width="600px"
+  >
+    <div>
+      <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="110px">
+        <el-form-item label="所属案卷">
+          <el-input type="textarea" class="form-item" :value="belongName" :disabled="true"></el-input>
+        </el-form-item>
+        <el-form-item label="档案名称" prop="contentName">
+          <el-input
+            type="textarea"
+            class="form-item"
+            v-model="form.contentName"
+            clearable
+            show-word-limit
+            placeholder="请输入档案名称"
+            maxlength="64"
+            :disabled="isDetailMode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="案卷期限" prop="term">
+          <el-input
+            class="form-item"
+            v-model="form.term"
+            clearable
+            show-word-limit
+            placeholder="请输入案卷期限"
+            maxlength="32"
+            :disabled="isDetailMode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="归档责任单位" prop="unitName">
+          <el-input
+            class="form-item"
+            v-model="form.unitName"
+            clearable
+            show-word-limit
+            placeholder="请输入归档责任单位"
+            maxlength="32"
+            :disabled="isDetailMode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="所属专业" prop="major">
+          <el-input
+            class="form-item"
+            v-model="form.major"
+            clearable
+            show-word-limit
+            placeholder="请输入所属专业"
+            maxlength="32"
+            :disabled="isDetailMode"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="档案标识代码" prop="markCode">
+          <el-select
+            class="form-item"
+            v-model="form.markCode"
+            :disabled="isDetailMode"
+            filterable
+            clearable
+            placeholder="请选择档案标识代码"
+          >
+            <el-option
+              v-for="item in dictData.mark_code"
+              :key="item.id"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="文件分类标记" prop="classifyMark">
+          <el-select
+            class="form-item"
+            v-model="form.classifyMark"
+            :disabled="isDetailMode"
+            filterable
+            clearable
+            placeholder="请选择文件分类标记"
+          >
+            <el-option
+              v-for="item in classifyMarkList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="附件上传" v-if="!isDetailMode" prop="fileList">
+          <el-upload
+            ref="uploadRef"
+            action="#"
+            :file-list="fileList"
+            :on-remove="handleRemove"
+            :on-change="handleFileChange"
+            :before-upload="beforeUpload"
+            :auto-upload="false"
+            :limit="1"
+            accept=".pdf,.jpg,.jpeg,.png"
+          >
+            <el-button size="small" type="primary" icon="Upload" :disabled="fileList.length > 0">选择文件</el-button>
+            <template #tip>
+              <div class="el-upload__tip">
+                <span style="color: #f00;">
+                  只能上传PDF和图片文件，且不超过{{ maxFileTips }}
+                </span>
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+
+        <!-- 详情模式下显示附件信息 -->
+        <el-form-item label="附件" v-if="isDetailMode && fileList.length > 0">
+          <div class="file-info">
+            <el-icon><Document /></el-icon>
+            <span>{{ fileList[0].name }}</span>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <template #footer v-if="!isDetailMode">
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="submitForm">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, nextTick } from 'vue'
+import { ElMessage, ElLoading } from 'element-plus'
+import { Upload, Document } from '@element-plus/icons-vue'
+import {
+  addFileManageRightApi,
+  updateFileManageRightApi,
+  getFileManageByIdApi
+} from '@/api/archivesManagement/fileManager/fileManager.js'
+import { getClassifyMarkSelApi ,getDictDataByTypeApi} from '@/api/select.js'
+
+const props = defineProps({
+  width: {
+    type: Number,
+    default: 600
+  },
+  dataForm: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  isAdd: {
+    type: String,
+    default: ''
+  },
+  rowData: {
+    type: Object,
+    default: () => ({})
+  },
+  projectId: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['closeDialog', 'showColose', 'handleQuery'])
+
+// 响应式数据
+const dialogVisible = ref(true)
+const form = reactive({
+  contentName: null,
+  term: null,
+  unitName: null,
+  major: null,
+  markCode: null,
+  classifyMark: null,
+})
+const belongName = ref('')
+const classifyMarkList = ref([])
+const fileList = ref([])
+const maxFileSize = ref(10 * 1024 * 1024)
+const maxFileTips = ref('10MB')
+const ruleFormRef = ref()
+const uploadRef = ref()
+
+// 字典数据（需要根据实际情况获取）
+const dictData = reactive({
+  mark_code: [],
+  file_size_limit: []
+})
+
+// 添加获取字典数据的方法
+const fetchDictData = async () => {
+  try {
+    // 获取档案标识代码字典
+    const markCodeRes = await getDictDataByTypeApi({ dictType: 'mark_code' })
+    if (markCodeRes.data.code === 200) {
+      dictData.mark_code = markCodeRes.data.data || []
+    } else {
+      console.error('获取档案标识代码字典失败:', markCodeRes.data.msg)
+    }
+
+    // 获取文件大小限制字典
+    const fileSizeRes = await getDictDataByTypeApi({ dictType: 'file_size_limit' })
+    if (fileSizeRes.data.code === 200) {
+      dictData.file_size_limit = fileSizeRes.data.data || []
+
+      // 如果有文件大小限制字典，可以设置最大文件大小
+      if (fileSizeRes.data.data && fileSizeRes.data.data.length > 0) {
+        // 假设字典中存储的是类似 "10" 这样的数字（单位MB）
+        const sizeItem = fileSizeRes.data.data[0]
+        const sizeValue = parseInt(sizeItem.dictValue)
+        if (!isNaN(sizeValue)) {
+          maxFileSize.value = sizeValue * 1024 * 1024 // 转换为字节
+          maxFileTips.value = sizeValue + 'MB'
+        }
+      }
+    } else {
+      console.error('获取文件大小限制字典失败:', fileSizeRes.data.msg)
+    }
+  } catch (error) {
+    console.error('获取字典数据失败:', error)
+    // 使用默认值
+    dictData.mark_code = []
+    dictData.file_size_limit = []
+  }
+}
+
+// 计算属性
+const isDetailMode = computed(() => {
+  return props.isAdd === 'detail'
+})
+
+// 验证规则
+const rules = reactive({
+  contentName: [
+    { required: true, message: '档案名称不能为空', trigger: 'blur' }
+  ],
+  fileList: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!Array.isArray(fileList.value) || fileList.value.length === 0) {
+          callback(new Error('请上传附件文件'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ],
+  term: [
+    { required: true, message: '案卷期限不能为空', trigger: 'blur' }
+  ],
+  unitName: [
+    { required: true, message: '归档责任单位不能为空', trigger: 'blur' }
+  ],
+  major: [
+    { required: true, message: '所属专业不能为空', trigger: 'blur' }
+  ],
+  markCode: [
+    { required: true, message: '请选择档案标识代码', trigger: 'change' }
+  ],
+  classifyMark: [
+    { required: true, message: '请选择文件分类标记', trigger: 'change' }
+  ],
+})
+
+const errorObj = reactive({
+  contentName: '档案名称',
+  term: '案卷期限',
+  unitName: '归档责任单位',
+  major: '所属专业',
+})
+
+// 方法
+const initFormData = async () => {
+  // 先获取字典数据
+  await fetchDictData()
+
+  const res = await getClassifyMarkSelApi()
+  classifyMarkList.value = res.data.data
+  belongName.value = props.rowData.belongName
+
+  if ((props.isAdd === 'edit' || props.isAdd === 'detail') && props.rowData) {
+    const res2 = await getFileManageByIdApi({ id: props.rowData.id, proId: props.projectId })
+    const obj = res2.data.data
+
+    Object.assign(form, {
+      id: obj.id,
+      contentName: obj.contentName || null,
+      term: obj.term || null,
+      major: obj.major || null,
+      unitName: obj.unitName || null,
+      markCode: obj.markCode || null,
+      classifyMark: obj.classifyMark || null,
+      parentId: props.rowData.parentId || null,
+      level: 5,
+      proId: props.projectId
+    })
+
+    fileList.value = [{ name: obj.fileName, businessId: obj.businessId }]
+  } else {
+    const id = props.rowData.id
+    const proId = props.projectId
+    const res = await getFileManageByIdApi({ id, proId })
+    const obj = res.data
+
+    Object.assign(form, {
+      contentName: null,
+      term: obj.term || null,
+      unitName: obj.unitName || null,
+      major: obj.major || null,
+      markCode: obj.markCode || null,
+      classifyMark: obj.classifyMark || null,
+      parentId: props.rowData.id || null,
+      level: 5,
+      proId: props.projectId
+    })
+  }
+}
+
+const handleClose = () => {
+  dialogVisible.value = false
+  emit("closeDialog")
+}
+
+const beforeUpload = (file) => {
+  if (!(file instanceof File)) {
+    return true
+  }
+
+  const isValidType = checkFileType(file)
+  const isValidSize = checkFileSize(file)
+
+  if (!isValidType) {
+    ElMessage.error('只能上传PDF和图片文件！')
+    return false
+  }
+
+  if (!isValidSize) {
+    ElMessage.error(`文件大小不能超过${maxFileTips.value}！`)
+    return false
+  }
+
+  if (fileList.value.length >= 1) {
+    ElMessage.warning('只能上传一个文件，请先删除现有文件！')
+    return false
+  }
+
+  return true
+}
+
+const checkFileType = (file) => {
+  const allowedTypes = [
+    'application/pdf',
+    'image/jpeg',
+    'image/jpg',
+    'image/png',
+  ]
+  return allowedTypes.includes(file.type)
+}
+
+const checkFileSize = (file) => {
+  const maxSize = maxFileSize.value
+  return file.size <= maxSize
+}
+
+const handleRemove = (file, fileList) => {
+  if (!(file instanceof File)) {
+    form.businessId = file.businessId
+  }
+  fileList.value = fileList
+  // 移除文件后重新验证
+  if (ruleFormRef.value) {
+    ruleFormRef.value.validateField('fileList')
+  }
+}
+
+const handleFileChange = (file, files) => {
+  fileList.value = files
+  if (ruleFormRef.value) {
+    ruleFormRef.value.validateField('fileList')
+  }
+}
+
+const submitForm = async () => {
+  if (!ruleFormRef.value) return
+
+  // 先进行表单验证
+  try {
+    await ruleFormRef.value.validate()
+  } catch (error) {
+    console.log('表单验证失败:', error.errorFields)
+    return // 验证失败直接返回，不执行后续代码
+  }
+
+  let loading = null
+  try {
+    loading = ElLoading.service({
+      lock: true,
+      text: "数据提交中，请稍候...",
+      background: 'rgba(0,0,0,0.5)'
+    })
+
+    const formData = new FormData()
+    const params = { ...form }
+
+    if (fileList.value.length > 0) {
+      fileList.value.forEach(file => {
+        if (file.raw instanceof File) {
+          formData.append('file', file.raw)
+        }
+      })
+    }
+
+    let res
+    if (props.isAdd === 'add') {
+      formData.append('params', JSON.stringify(params))
+      res = await addFileManageRightApi(formData)
+    } else {
+      formData.append('params', JSON.stringify(params))
+      res = await updateFileManageRightApi(formData)
+    }
+
+    if (res.data.code === 200) {
+      ElMessage.success(res.data.msg)
+      resetForm()
+      emit('handleQuery')
+      handleClose()
+    } else {
+      ElMessage.error(res.data.msg)
+      // 失败时不关闭对话框，让用户修正
+    }
+  } finally {
+    // 确保 loading 被关闭
+    if (loading) {
+      loading.close()
+    }
+  }
+}
+
+const resetForm = () => {
+  Object.assign(form, {
+    contentName: null,
+    term: null,
+    unitName: null,
+    major: null,
+    markCode: null,
+    classifyMark: null,
+    parentId: null,
+    level: 5
+  })
+  fileList.value = []
+  nextTick(() => {
+    if (uploadRef.value) {
+      uploadRef.value.clearFiles()
+    }
+  })
+  if (ruleFormRef.value) {
+    ruleFormRef.value.resetFields()
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  initFormData()
+})
+</script>
+
+<style scoped>
+.form-item {
+  width: 100%;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.file-info .el-icon {
+  color: #409EFF;
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.file-info span {
+  color: #606266;
+}
+</style>
diff --git a/src/views/fileManager/components/addTreeData.vue b/src/views/fileManager/components/addTreeData.vue
new file mode 100644
index 00000000..41d5214b
--- /dev/null
+++ b/src/views/fileManager/components/addTreeData.vue
@@ -0,0 +1,354 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="title"
+    :show-close="true"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    :append-to-body="true"
+    width="600px"
+  >
+    <div>
+      <el-form :model="form" :rules="dynamicRules" ref="ruleFormRef" label-width="110px">
+        <el-form-item label="上级节点" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="treeDataList"
+            placeholder="请选择上级节点"
+            :props="treeProps"
+            check-strictly
+            @node-click="onParentSelect"
+          />
+        </el-form-item>
+        <el-form-item :label="getFormLabel('contentName')" prop="contentName">
+          <el-input
+            type="textarea"
+            :autosize="{ minRows: 4, maxRows: 6 }"
+            class="form-item"
+            v-model="form.contentName"
+            clearable
+            show-word-limit
+            :placeholder="getFormPlaceholder('contentName')"
+            maxlength="64"
+          ></el-input>
+        </el-form-item>
+        <el-form-item :label="getFormLabel('sort')" prop="sort">
+          <el-input-number
+            v-model="form.sort"
+            :min="0"
+            :placeholder="getFormPlaceholder('sort')"
+            controls-position="right"
+            style="width: 100%;"
+          ></el-input-number>
+
+          <span style="color: #f00000; font-size: 14px; display: block; margin-top: 8px;">
+            {{ sortTitle }}
+          </span>
+
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose" :disabled="disabled">取消</el-button>
+        <el-button type="primary" :disabled="disabled" @click="submitForm">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, nextTick } from 'vue';
+import { ElMessage, ElLoading } from 'element-plus';
+import {
+  getFileManageTreeByAddOrUpdateApi,
+  addFileManageLeftApi,
+  updateFileManageLeftApi,
+  geMaxSortApi
+} from '@/api/archivesManagement/fileManager/fileManager.js';
+
+const props = defineProps({
+  width: {
+    type: Number,
+    default: 600
+  },
+  dataForm: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  isAdd: {
+    type: String,
+    default: ''
+  },
+  rowData: {
+    type: Object,
+    default: () => ({})
+  },
+  projectId: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['closeDialog', 'showColose', 'handleQuery']);
+
+const dialogVisible = ref(true);
+const form = reactive({
+  parentId: undefined,
+  contentName: '',
+  sort: 1
+});
+const treeDataList = ref([]);
+const selectedParentLevel = ref(null);
+const sortTitle = ref('');
+const ruleFormRef = ref();
+
+const treeProps = {
+  value: 'id',
+  label: 'label',
+  children: 'children'
+};
+
+// 动态验证规则
+const dynamicRules = computed(() => {
+  const isNonRootParent = form.parentId && form.parentId !== 0;
+  return {
+    parentId: [
+      { required: true, message: '上级节点不能为空', trigger: 'change' }
+    ],
+    contentName: [
+      {
+        required: true,
+        message: isNonRootParent ? '案卷题名不能为空' : '分类名称不能为空',
+        trigger: 'blur'
+      }
+    ],
+    sort: [
+      {
+        required: true,
+        message: isNonRootParent ? '案卷排序号不能为空' : '分类号不能为空',
+        trigger: 'blur'
+      }
+    ]
+  };
+});
+
+const errorObj = reactive({
+  contentName: '分类名称',
+  sort: '分类号'
+});
+
+// 方法
+const getMaxSort = async (value) => {
+  console.log('qqq');
+  const res = await geMaxSortApi({ parentId: value });
+  sortTitle.value = '当前已有最大排序为' + (res.data.data || 0);
+  console.log(sortTitle.value);
+};
+
+const getFormLabel = (field) => {
+  const isNonRootParent = form.parentId && form.parentId !== 0;
+  if (isNonRootParent) {
+    if (field === 'contentName') {
+      errorObj.contentName = '案卷题名';
+      return '案卷题名';
+    } else if (field === 'sort') {
+      errorObj.sort = '案卷排序号';
+      return '案卷排序号';
+    }
+  }
+  if (field === 'contentName') {
+    errorObj.contentName = '分类名称';
+    return '分类名称';
+  } else if (field === 'sort') {
+    errorObj.sort = '分类号';
+    return '分类号';
+  }
+  return '';
+};
+
+const getFormPlaceholder = (field) => {
+  const isNonRootParent = form.parentId && form.parentId !== 0;
+  if (isNonRootParent) {
+    if (field === 'contentName') {
+      return '请输入案卷题名';
+    } else if (field === 'sort') {
+      return '请输入案卷排序号';
+    }
+  }
+  if (field === 'contentName') {
+    return '请输入分类名称';
+  } else if (field === 'sort') {
+    return '请输入分类号';
+  }
+  return '';
+};
+
+const onParentSelect = (selectedNode) => {
+  selectedParentLevel.value = selectedNode ? selectedNode.level : null;
+  nextTick(() => {
+    if (ruleFormRef.value) {
+      ruleFormRef.value.clearValidate(['contentName', 'sort']);
+    }
+  });
+  form.level = Number(selectedNode.level) + 1;
+  getMaxSort(selectedNode.id);
+};
+
+const findParentLevel = (treeData, parentId) => {
+  for (const node of treeData) {
+    if (node.id === parentId) {
+      selectedParentLevel.value = node.level;
+      return;
+    }
+    if (node.children && node.children.length > 0) {
+      findParentLevel(node.children, parentId);
+    }
+  }
+};
+
+const initFormData = async () => {
+  let value = 0;
+  let treeId = props.isAdd === 'edit' && props.rowData ? props.rowData.id : null;
+  await getLeftTreeList(treeId);
+
+  if (props.isAdd === 'edit' && props.rowData) {
+    Object.assign(form, {
+      id: props.rowData.id,
+      parentId: props.rowData.parentId || undefined,
+      contentName: props.rowData.label || null,
+      sort: props.rowData.sort || 0,
+      level: props.rowData.level,
+      proId: props.projectId
+    });
+    value = props.rowData.parentId;
+  } else {
+    Object.assign(form, {
+      parentId: props.rowData && props.rowData.id ? props.rowData.id : undefined,
+      contentName: null,
+      sort: 0,
+      level: props.rowData && props.rowData.level ? props.rowData.level : undefined,
+      proId: props.projectId
+    });
+    value = props.rowData.id;
+  }
+
+  if (props.isAdd === 'edit' && form.parentId) {
+    findParentLevel(treeDataList.value, form.parentId);
+  }
+
+  if (value) {
+    await getMaxSort(value);
+  }
+};
+
+const convertToVueTree = (data) => {
+  if (!data || !Array.isArray(data)) {
+    return [];
+  }
+
+  return data.map(item => {
+    if (item.level === 4) {
+      return null;
+    }
+
+    const node = {
+      id: item.id,
+      label: item.contentName,
+      level: item.level
+    };
+
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      const children = convertToVueTree(item.children);
+      const filteredChildren = children.filter(child => child !== null);
+      if (filteredChildren.length > 0) {
+        node.children = filteredChildren;
+      }
+    }
+
+    return node;
+  }).filter(node => node !== null);
+};
+
+const getLeftTreeList = async (value) => {
+  const res = await getFileManageTreeByAddOrUpdateApi({ id: value, proId: props.projectId });
+  const transformedData = convertToVueTree(res.data.data);
+  treeDataList.value = transformedData;
+};
+
+const handleClose = () => {
+  dialogVisible.value = false;
+  emit('closeDialog');
+};
+
+const submitForm = async () => {
+  if (!ruleFormRef.value) return;
+  // 先进行表单验证
+  try {
+    await ruleFormRef.value.validate();
+  } catch (error) {
+    return;
+  }
+  let loading = null;
+  try {
+    loading = ElLoading.service({
+      lock: true,
+      text: '数据提交中，请稍候...',
+      background: 'rgba(0,0,0,0.5)'
+    });
+
+    const params = { ...form };
+    let res;
+    if (props.isAdd === 'add') {
+      res = await addFileManageLeftApi(params);
+    } else {
+      res = await updateFileManageLeftApi(params);
+    }
+
+    if (res.data.code === 200) {
+      ElMessage.success(res.data.msg);
+      resetForm();
+      emit('handleQuery');
+      handleClose();
+    } else {
+      ElMessage.error(res.data.msg);
+    }
+  } finally {
+    // 无论成功还是失败，都会执行这里
+    if (loading) {
+      loading.close();
+    }
+  }
+};
+
+const resetForm = () => {
+  Object.assign(form, {
+    parentId: undefined,
+    contentName: '',
+    sort: 1,
+    level: null
+  });
+  if (ruleFormRef.value) {
+    ruleFormRef.value.resetFields();
+  }
+};
+
+// 生命周期
+onMounted(() => {
+  initFormData();
+});
+</script>
+
+<style scoped>
+.form-item {
+  width: 100%;
+}
+</style>
diff --git a/src/views/fileManager/components/config.js b/src/views/fileManager/components/config.js
new file mode 100644
index 00000000..10e5fd94
--- /dev/null
+++ b/src/views/fileManager/components/config.js
@@ -0,0 +1,25 @@
+export const formLabel = [
+  {
+    isShow: false,
+    f_type: 'ipt',
+    f_label: '文件名称',
+    f_model: 'contentName',
+    f_max: 32,
+  },
+  {
+    isShow: false,
+    f_type: 'date',
+    f_label: '上传时间',
+    f_model: 'uploadTime',
+  },
+]
+
+export const columnsList = [
+  { t_props: 'contentName', t_label: '档案名称', t_width: 200 },
+  { t_slot: 'fileName', t_label: '档案文件', t_width: 140 },
+  { t_props: 'createUserName', t_label: '上传人' },
+  { t_props: 'term', t_label: '保管期限' },
+  { t_slot: 'dataSource', t_label: '来源' },
+  { t_props: 'unitName', t_label: '责任单位' },
+  { t_props: 'createTime', t_label: '上传时间', t_width: 160 }
+]
diff --git a/src/views/fileManager/components/leftTree.vue b/src/views/fileManager/components/leftTree.vue
new file mode 100644
index 00000000..828be598
--- /dev/null
+++ b/src/views/fileManager/components/leftTree.vue
@@ -0,0 +1,386 @@
+<template>
+  <div>
+    <el-card style="height: calc(100vh - 190px)">
+      <el-row :gutter="24" style="display: flex; align-items: center">
+        <el-col :span="14">
+          <el-input v-model="filterText" placeholder="输入关键字" @keyup.enter="onHandleSearch">
+          </el-input>
+        </el-col>
+        <el-col :span="10">
+          <el-button type="primary" size="small" @click="onHandleSearch">
+            查询
+          </el-button>
+          <el-button plain size="small" type="primary" icon="Plus"
+                     v-hasPermi="['archive:catalogue:add']" @click="addTree" v-if="fileStatus === '0'">
+            新增
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <div class="tree-container">
+        <el-tree ref="leftTreeRef" :data="treeDataList" default-expand-all class="left-tree-list"
+                 @node-click="onHandleNodeClick" :filter-node-method="filterNode" highlight-current node-key="id">
+          <template #default="{ node, data }">
+            <span class="custom-tree-node">
+              <template v-if="isTruncated(node.label)">
+                <el-tooltip effect="dark" :content="node.label" placement="right">
+                  <span class="node-label">{{ truncateLabel(node.label) }}</span>
+                </el-tooltip>
+              </template>
+              <template v-else>
+                <span class="node-label">{{ node.label }}</span>
+              </template>
+              <span class="btn-box">
+                <el-button type="text" icon="Plus" v-if="((data.level > 1 && data.level !==4 && Number(data.isUnique) === 1) || (data.level === 1 && Number(data.isUnique) === 0)) && fileStatus === '0'"
+                           @click.stop="() => addTree(data)" v-hasPermi="['file:manage:add']">
+                </el-button>
+                <el-button type="text" v-if="data.level > 1 && Number(data.isUnique) === 1 && fileStatus === '0'" icon="Edit"
+                           style="color: #007ce0" @click.stop="() => editTree(data, data)"
+                           v-hasPermi="['file:manage:update']">
+                </el-button>
+                <el-button type="text" v-if="data.level > 1 && Number(data.isUnique) === 1 && fileStatus === '0'" icon="Delete" style="color: #f00000;"
+                           @click.stop="() => delTree(node, data)" v-hasPermi="['file:manage:del']">
+                </el-button>
+              </span>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </el-card>
+    <!-- 树的操作（新增、修改） -->
+    <FileAddTreeData v-if="isflag" :isAdd="isAdd" :rowData="row" :title="title" @closeDialog="closeDialog"
+                     @showColose="showColose" :dataForm="row" :width="600" :projectId="projectId" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, nextTick } from 'vue'
+import { ElMessage, ElMessageBox,ElLoading } from 'element-plus'
+import { Plus, Edit, Delete } from '@element-plus/icons-vue'
+import { getFileManageTreeApi, delFileManageApi } from '@/api/archivesManagement/fileManager/fileManager.js'
+import FileAddTreeData from './addTreeData.vue'
+
+const props = defineProps({
+  projectId: {
+    type: String,
+    default: ''
+  },
+  fileStatus: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['handleNodeClick'])
+
+// 响应式数据
+const treeDataList = ref([])
+const filterText = ref('')
+const originalTreeData = ref([])
+const isflag = ref(false)
+const isAdd = ref('')
+const title = ref('')
+const row = ref({})
+const selectedNodeId = ref(null)
+const leftTreeRef = ref()
+
+// 计算属性
+const filteredTreeData = computed(() => {
+  if (!filterText.value) {
+    return treeDataList.value
+  }
+  return filterTreeData(treeDataList.value)
+})
+
+// 方法
+const handleQuery = async () => {
+  const currentNode = leftTreeRef.value?.getCurrentNode()
+  if (currentNode) {
+    selectedNodeId.value = currentNode.id
+  }
+
+  await getLeftTreeList()
+
+  nextTick(() => {
+    if (selectedNodeId.value && leftTreeRef.value) {
+      leftTreeRef.value.setCurrentKey(selectedNodeId.value)
+    }
+  })
+}
+
+const closeDialog = () => {
+  isflag.value = false
+  handleQuery()
+}
+
+const showColose = () => {
+  isflag.value = false
+}
+
+const addTree = (data) => {
+  title.value = "新增"
+  isAdd.value = 'add'
+  isflag.value = true
+  if (data) {
+    row.value = data
+    row.value.level = Number(data.level) + 1
+  }
+}
+
+const editTree = (rowData, data) => {
+  title.value = "修改"
+  isAdd.value = 'edit'
+  row.value = data
+  isflag.value = true
+}
+
+const delTree = (node, data) => {
+  let loading = null;
+  ElMessageBox.confirm(`是否确认删除节点名称为"${node.label}"的数据项？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 用户确认删除，直接执行删除操作
+   loading = ElLoading.service({
+      lock: true,
+      text: '正在删除，请稍候...',
+      background: 'rgba(0,0,0,0.5)'
+    });
+    delFileManageApi({ id: data.id }).then(res => {
+      if (res.data.code === 200) {
+        ElMessage.success("删除成功");
+        handleQuery();
+      } else {
+        ElMessage.error(res.data.msg);
+      }
+    });
+
+  }).catch(() => {
+    // 用户取消删除
+  }).finally (() =>{
+    // 无论成功还是失败，都会执行这里
+    if (loading) {
+      loading.close();
+    }
+  });
+};
+
+const onHandleNodeClick = (data) => {
+  selectedNodeId.value = data.id
+  emit('handleNodeClick', data)
+}
+
+const convertToVueTree = (data) => {
+  if (!data || !Array.isArray(data)) {
+    return []
+  }
+
+  return data.map(item => {
+    const node = {
+      id: item.id,
+      label: item.contentName,
+      level: item.level,
+      sort: item.sort,
+      parentId: item.parentId,
+      parentName: item.parentName,
+      isUnique: item.isUnique
+    }
+
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      const children = convertToVueTree(item.children)
+      if (children.length > 0) {
+        node.children = children
+      }
+    }
+
+    return node
+  })
+}
+
+const truncateLabel = (text) => {
+  if (!text) return ''
+  const max = 100
+  return text.length > max ? text.slice(0, max) + '...' : text
+}
+
+const isTruncated = (text) => {
+  if (!text) return false
+  return text.length > 100
+}
+
+const getLeftTreeList = async () => {
+  const res = await getFileManageTreeApi({ proId: props.projectId })
+  const transformedData = convertToVueTree(res.data.data)
+  treeDataList.value = transformedData
+  originalTreeData.value = JSON.parse(JSON.stringify(treeDataList.value))
+}
+
+const onHandleSearch = () => {
+  if (filterText.value) {
+    ElMessage.error('搜索内容包含非法字符，请重新输入')
+    return
+  }
+  leftTreeRef.value?.filter(filterText.value)
+}
+
+const filterNode = (value, data) => {
+  if (!value) return true
+  return data.label.indexOf(value) !== -1
+}
+
+const filterTreeData = (treeData) => {
+  const result = []
+  for (const node of treeData) {
+    const newNode = { ...node }
+    if (node.children && node.children.length > 0) {
+      const filteredChildren = filterTreeData(node.children)
+      if (filteredChildren.length > 0) {
+        newNode.children = filteredChildren
+        result.push(newNode)
+      } else if (node.label.indexOf(filterText.value) !== -1) {
+        result.push(node)
+      }
+    } else if (node.label.indexOf(filterText.value) !== -1) {
+      result.push(newNode)
+    }
+  }
+  return result
+}
+
+// 监听器
+watch(filterText, (val) => {
+  leftTreeRef.value?.filter(val)
+})
+
+// 生命周期
+onMounted(() => {
+  getLeftTreeList()
+})
+</script>
+
+<style scoped>
+.tree-container {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  max-height: calc(100vh - 270px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.tree-container::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+
+.tree-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tree-container::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.left-tree-list {
+  width: 100%;
+}
+
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 20px;
+  padding: 1px 0;
+  font-size: 14px;
+}
+
+.node-label {
+  flex: 1;
+  min-width: 0;
+  overflow: visible;
+  text-overflow: initial;
+  white-space: normal;
+  word-break: break-word;
+  word-wrap: break-word;
+  line-height: 1.2;
+  padding-right: 4px;
+}
+
+.left-tree-list .el-tree-node__content {
+  display: flex;
+  align-items: center;
+  height: auto;
+  min-height: 20px;
+  padding: 1px 4px;
+  line-height: 1.2;
+}
+
+.left-tree-list .el-tree-node__content:has(.node-label[style*="height"]) {
+  align-items: flex-start;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  height: auto !important;
+  align-items: center;
+  line-height: 1.2;
+}
+
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content {
+  background-color: #b3d9ff;
+  color: #006e6a !important;
+}
+
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label {
+  color: #006e6a !important;
+}
+
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content .custom-tree-node {
+  color: #006e6a !important;
+}
+
+.left-tree-list .el-tree-node__content:hover {
+  background-color: #f5f5f5;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  height: auto;
+}
+
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content:hover {
+  background-color: #8cc8ff;
+}
+
+.btn-box {
+  margin-left: 4px;
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+}
+
+.left-tree-list .el-tree-node__content:hover .btn-box {
+  opacity: 1;
+}
+
+:deep(.el-tree-node__content) {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: auto;
+  min-height: 38px;
+  padding: 1px 4px;
+}
+
+:deep(.el-tree-node__expand-icon) {
+  padding: 1px;
+  margin-right: 1px;
+  flex-shrink: 0;
+}
+
+:deep(.el-tree-node__content > .el-tree-node__expand-icon) {
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/views/fileManager/components/rightTable.vue b/src/views/fileManager/components/rightTable.vue
new file mode 100644
index 00000000..0a8a4d7c
--- /dev/null
+++ b/src/views/fileManager/components/rightTable.vue
@@ -0,0 +1,326 @@
+<template>
+  <div>
+    <el-card style="min-height: calc(100vh - 190px);">
+      <avue-crud
+        :option="option"
+        :data="tableData"
+        :page="page"
+        :table-loading="loading"
+        @search-change="searchChange"
+        @search-reset="searchReset"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        @refresh-change="refreshChange"
+        @on-load="onLoad"
+      >
+        <!-- 工具栏按钮 -->
+        <template #menu-left>
+          <el-button plain size="small" type="primary" icon="Plus" v-hasPermi="['file:manage:add']"
+                     @click="handleAdd" :disabled="addBtnIsShow" v-if="fileStatus === '0'">
+            新增
+          </el-button>
+        </template>
+
+        <!-- 自定义列 -->
+        <template #dataSource="{ row }">
+          <span>{{ row.dataSource === '1' ? '本系统上传' : '智慧现场' }}</span>
+        </template>
+
+        <template #fileName="{ row }">
+          <span class="file-name-link" @click="viewFile(row)">{{ row.fileName }}</span>
+        </template>
+
+        <!-- 操作栏 -->
+        <template #menu="{ row, size }">
+          <el-button
+            :size="size"
+            type="primary"
+            link
+            icon="View"
+            @click="handleDetail(row)"
+            v-hasPermi="['file:manage:query']"
+          >详情</el-button>
+          <el-button
+            :size="size"
+            type="primary"
+            link
+            icon="Edit"
+            @click="handleUpdate(row)"
+            v-hasPermi="['file:manage:update']"
+          >修改</el-button>
+          <el-button
+            :size="size"
+            type="danger"
+            link
+            icon="Delete"
+            @click="handleDelete(row)"
+            v-hasPermi="['file:manage:del']"
+          >删除</el-button>
+        </template>
+      </avue-crud>
+
+      <!-- 新增/编辑 -->
+      <AddTableData v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
+                    @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :width="600" :projectId="projectId" />
+
+      <!-- 预览文件 -->
+      <ViewFile v-if="isViewflag" :rowData="row" :title="title" :isAdd="isAdd" @closeDialog="closeDialog"
+                @showColose="showColose" :width="600" />
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch, nextTick } from 'vue'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
+import { Plus, View, Edit, Delete } from '@element-plus/icons-vue'
+import { columnsList, formLabel } from './config.js'
+import {
+  delFileManageApi,
+  getFileManageApi,
+} from '@/api/archivesManagement/fileManager/fileManager.js'
+import AddTableData from './addTableData.vue'
+import ViewFile from '@/views/viewFile/viewFile.vue'
+
+const props = defineProps({
+  projectId: {
+    type: String,
+    default: ''
+  },
+  selectedNode: {
+    type: Object,
+    default: null
+  },
+  fileStatus: {
+    type: String,
+    default: ''
+  }
+})
+
+// 响应式数据
+const title = ref("")
+const isflag = ref(false)
+const isViewflag = ref(false)
+const isAdd = ref('')
+const row = ref({})
+const loading = ref(false)
+const addBtnIsShow = ref(true)
+const defaultParams = ref({})
+
+// 表格数据
+const tableData = ref([])
+const page = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const query = reactive({})
+
+// Avue 配置
+const option = reactive({
+  height: 'auto',
+  calcHeight: 32,
+  tip: false,
+  searchShow: true,
+  searchMenuSpan: 6,
+  border: true,
+  index: true,
+  viewBtn: false,
+  selection: false,
+  addBtn: false,
+  editBtn: false,
+  delBtn: false,
+  dialogClickModal: false,
+  column: [
+    {
+      label: '档案名称',
+      prop: 'contentName',
+      width: 200,
+      search: true
+    },
+    {
+      label: '档案文件',
+      prop: 'fileName',
+      width: 140,
+      slot: true
+    },
+    {
+      label: '上传人',
+      prop: 'createUserName'
+    },
+    {
+      label: '保管期限',
+      prop: 'term'
+    },
+    {
+      label: '来源',
+      prop: 'dataSource',
+      slot: true
+    },
+    {
+      label: '责任单位',
+      prop: 'unitName'
+    },
+    {
+      label: '上传时间',
+      prop: 'createTime',
+      width: 160
+    }
+  ]
+})
+
+// 方法
+const closeDialog = () => {
+  isflag.value = false
+  isViewflag.value = false
+}
+
+const showColose = () => {
+  isflag.value = false
+  isViewflag.value = false
+}
+
+/** 详情操作 */
+const handleDetail = (rowData) => {
+  title.value = "详情"
+  isAdd.value = 'detail'
+  row.value = rowData
+  isflag.value = true
+}
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  title.value = "新增"
+  isAdd.value = 'add'
+  isflag.value = true
+  row.value = props.selectedNode
+  row.value.detailStatus = false
+  row.value.belongName = props.selectedNode.parentName + '/' + props.selectedNode.label
+}
+
+/** 修改操作 */
+const handleUpdate = (rowData) => {
+  title.value = "修改"
+  isAdd.value = 'edit'
+  row.value = rowData
+  row.value.belongName = props.selectedNode.parentName + '/' + props.selectedNode.label
+  row.value.detailStatus = false
+  isflag.value = true
+}
+
+// 预览文件
+const viewFile = (rowData) => {
+  title.value = "预览"
+  isAdd.value = 'view'
+  row.value = rowData
+console.log(rowData)
+  isViewflag.value = true
+}
+
+/* 搜索操作 */
+const handleQuery = () => {
+  onLoad(page, query)
+}
+
+/** 删除操作 */
+const handleDelete = (rowData) => {
+  let loading = null;
+  ElMessageBox.confirm(`是否确认删除文件名称为"${rowData.contentName}"的数据项？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 用户确认删除，直接执行删除操作
+    loading = ElLoading.service({
+      lock: true,
+      text: '正在删除，请稍候...',
+      background: 'rgba(0,0,0,0.5)'
+    });
+    delFileManageApi({ id: rowData.id }).then(res => {
+      if (res.data.code === 200) {
+        ElMessage.success("删除成功")
+        handleQuery()
+      } else {
+        ElMessage.error(res.data.msg)
+      }
+    }).catch(error => {
+      ElMessage.error(error)
+    })
+  }).catch(() => {
+    // 用户取消删除
+  }).finally (() =>{
+    // 无论成功还是失败，都会执行这里
+    if (loading) {
+      loading.close();
+    }
+  });
+}
+
+// 表格相关方法
+const searchChange = (params, done) => {
+  Object.assign(query, params)
+  page.currentPage = 1
+  onLoad(page, params)
+  done()
+}
+
+const searchReset = () => {
+  Object.keys(query).forEach(key => delete query[key])
+  onLoad(page)
+}
+
+const currentChange = (currentPage) => {
+  page.currentPage = currentPage
+}
+
+const sizeChange = (pageSize) => {
+  page.pageSize = pageSize
+}
+
+const refreshChange = () => {
+  onLoad(page, query)
+}
+
+const onLoad = async (pageParam, params = {}) => {
+  loading.value = true
+  try {
+    const requestData = {
+      ...params,
+      ...defaultParams.value,
+      pageNum: pageParam.currentPage,
+      pageSize: pageParam.pageSize
+    }
+    const res = await getFileManageApi(requestData)
+    if (res.data.code === 200) {
+      tableData.value = res.data.rows
+      page.total = res.data.total
+    }
+  } catch (error) {
+
+  } finally {
+    loading.value = false
+  }
+}
+
+// 监听选中的节点
+watch(() => props.selectedNode, (newVal) => {
+  addBtnIsShow.value = !(newVal && Number(newVal.level) === 4)
+
+  const parentId = newVal && newVal.id ? newVal.id : 0
+  const proId = props.projectId
+  defaultParams.value = { parentId, proId }
+
+  onLoad(page, { parentId, proId })
+}, { immediate: true })
+</script>
+
+<style scoped>
+.file-name-link {
+  color: #409EFF;
+  cursor: pointer;
+}
+.file-name-link:hover {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/views/fileManager/file-data.vue b/src/views/fileManager/file-data.vue
new file mode 100644
index 00000000..c80ee90f
--- /dev/null
+++ b/src/views/fileManager/file-data.vue
@@ -0,0 +1,317 @@
+<template>
+  <div class="app-container">
+    <el-card class="toolbar-card">
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <el-button type="warning" plain icon="Bottom" size="small" @click="handleFileExtract"
+                     v-if="fileStatus === '0' && !integrityStatus">档案抽取</el-button>
+          <el-button type="success" plain icon="Finished" size="small" @click="moveListConfirm"
+                     v-if="fileStatus === '0' && !integrityStatus">移交清单确认</el-button>
+          <el-button type="success" plain icon="Finished" size="small" @click="handleIntegrityStatus"
+                     v-if="fileStatus === '0' && integrityStatus">完整性确认</el-button>
+          <el-button type="danger" plain icon="Close" size="small" @click="handleClose">返回</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <el-row :gutter="24" class="content-row" v-if="projectId && fileStatus">
+      <el-col :span="8" class="pane-left">
+        <LeftTree @handleNodeClick="handleNodeClick" :projectId="projectId" :fileStatus="fileStatus" />
+      </el-col>
+      <el-col :span="16" class="pane-right">
+        <RightTable :selectedNode="selectedNode" :projectId="projectId" :fileStatus="fileStatus" />
+      </el-col>
+    </el-row>
+
+    <!-- 档案同步进度弹框 -->
+    <el-dialog
+      v-model="syncDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      width="400px"
+    >
+      <template #header>
+        <div class="dialog-title">
+          <span>档案同步</span>
+        </div>
+      </template>
+      <div class="sync-content">
+        <div class="sync-icon">
+          <el-icon class="is-loading" v-if="isSyncing"><Loading /></el-icon>
+          <el-icon v-else-if="syncSuccess" color="#67C23A"><SuccessFilled /></el-icon>
+          <el-icon v-else-if="syncError" color="#F56C6C"><CircleCloseFilled /></el-icon>
+        </div>
+        <div class="sync-text">
+          <p v-if="isSyncing">档案同步中，请稍候...</p>
+          <p v-else-if="syncSuccess" class="success-text">同步档案已完成</p>
+          <p v-else-if="syncError" class="error-text">档案同步失败</p>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button class="clear-btn" @click="closeSyncDialog" v-if="!isSyncing">取消</el-button>
+          <el-button type="primary" class="search-btn" @click="closeSyncDialog" v-if="!isSyncing">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 完整性确认弹框 -->
+    <el-dialog
+      v-model="confirmDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="true"
+      width="450px"
+    >
+      <template #header>
+        <div class="dialog-title">
+          <span>操作确认</span>
+        </div>
+      </template>
+      <div class="confirm-content">
+        <div class="confirm-icon">
+          <el-icon color="#E6A23C" :size="48"><QuestionFilled /></el-icon>
+        </div>
+        <div class="confirm-text">
+          <p class="main-message">确认所有档案已完整,可以进行移交?</p>
+          <p class="sub-message">确认后不可再上传文件。</p>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button class="clear-btn" @click="confirmDialogVisible = false">取消</el-button>
+          <el-button type="primary" class="search-btn" @click="confirmIntegrityStatus">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+  Bottom,
+  Finished,
+  Close,
+  Loading,
+  SuccessFilled,
+  CircleCloseFilled,
+  QuestionFilled
+} from '@element-plus/icons-vue'
+import LeftTree from './components/leftTree.vue'
+import RightTable from './components/rightTable.vue'
+import { fileExtractApi, updateIntegrityStatusApi } from '@/api/archivesManagement/fileManager/fileManager'
+
+const route = useRoute()
+const router = useRouter()
+
+// 响应式数据
+const projectId = ref(null)
+const fileStatus = ref(null)
+const selectedNode = ref(null)
+const syncDialogVisible = ref(false)
+const isSyncing = ref(false)
+const syncSuccess = ref(false)
+const syncError = ref(false)
+const integrityStatus = ref(false)
+const confirmDialogVisible = ref(false)
+
+// 生命周期
+onMounted(() => {
+  projectId.value = route.query.id
+  fileStatus.value = route.query.fileStatus
+})
+
+// 方法
+const handleClose = () => {
+  router.go(-1)
+}
+
+const handleNodeClick = (data) => {
+  selectedNode.value = data
+}
+
+const moveListConfirm = () => {
+  integrityStatus.value = true
+}
+
+const handleIntegrityStatus = () => {
+  confirmDialogVisible.value = true
+}
+
+const confirmIntegrityStatus = async () => {
+  try {
+    const res = await updateIntegrityStatusApi({ proId: projectId.value })
+    if (res.code === 200) {
+      ElMessage.success('完整性确认成功')
+      confirmDialogVisible.value = false
+      setTimeout(() => {
+        router.push('/archivesManagement/fileManager')
+      }, 200)
+    } else {
+      ElMessage.error(res.msg || '完整性确认失败')
+    }
+  } catch (error) {
+    ElMessage.error('完整性确认失败，请重试')
+    console.error('完整性确认失败:', error)
+  }
+}
+
+const handleFileExtract = async () => {
+  syncDialogVisible.value = true
+  isSyncing.value = true
+  syncSuccess.value = false
+  syncError.value = false
+
+  try {
+    const res = await fileExtractApi({ projectId: projectId.value })
+    isSyncing.value = false
+
+    if (res.code === 200) {
+      syncSuccess.value = true
+    } else {
+      syncError.value = true
+    }
+  } catch (error) {
+    isSyncing.value = false
+    syncError.value = true
+    console.error('档案抽取失败:', error)
+  }
+}
+
+const closeSyncDialog = () => {
+  syncDialogVisible.value = false
+  isSyncing.value = false
+  syncSuccess.value = false
+  syncError.value = false
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 12px;
+}
+
+.toolbar-card {
+  margin-bottom: 12px;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.toolbar-left :deep(.el-button) + :deep(.el-button) {
+  margin-left: 8px;
+}
+
+.toolbar-right :deep(.el-tag) {
+  border-color: #dcdfe6;
+}
+
+.content-row {
+  min-height: calc(100vh - 200px);
+}
+
+.pane-left,
+.pane-right {
+  background: #fff;
+  border-radius: 6px;
+  height: 100%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.pane-left {
+  overflow: auto;
+}
+
+.pane-right {
+  overflow: hidden;
+}
+
+/* 档案同步弹框样式 */
+.dialog-title {
+  text-align: left;
+}
+
+.dialog-footer {
+  text-align: right !important;
+}
+
+.dialog-footer .el-button+.el-button {
+  margin-left: 8px;
+}
+
+.sync-content {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.sync-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.sync-icon .el-icon-loading {
+  color: #409EFF;
+  animation: rotating 2s linear infinite;
+}
+
+.sync-text p {
+  margin: 0;
+  font-size: 16px;
+  color: #606266;
+}
+
+.success-text {
+  color: #67C23A !important;
+}
+
+.error-text {
+  color: #F56C6C !important;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 确认弹框样式 */
+.confirm-content {
+  display: flex;
+  align-items: flex-start;
+  padding: 20px 0;
+}
+
+.confirm-icon {
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.confirm-text {
+  flex: 1;
+}
+
+.main-message {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  color: #303133;
+  line-height: 1.5;
+}
+
+.sub-message {
+  margin: 0;
+  font-size: 14px;
+  color: #909399;
+  line-height: 1.4;
+}
+</style>
diff --git a/src/views/fileManager/index.vue b/src/views/fileManager/index.vue
index 79347e4a..77b4b0af 100644
--- a/src/views/fileManager/index.vue
+++ b/src/views/fileManager/index.vue
@@ -23,6 +23,18 @@
           formatFileStatus(row.fileStatus)
         }}
       </template>
+
+
+
+      <!-- 操作列 -->
+      <template #menu="{ row }">
+        <el-button
+          type="primary"
+          @click="openFileManager(row)"
+        >
+          档案管理
+        </el-button>
+      </template>
     </avue-crud>
   </basic-container>
 </template>
@@ -223,6 +235,17 @@ export default {
         this.selectionClear();
       });
     },
+
+    openFileManager(row) {
+      this.$router.push({
+        path: '/archivesManagement/fileData',
+        query: {
+          id: row.id, // 项目ID
+          fileStatus: row.fileStatus // 档案状态
+        }
+      });
+
+    },
   },
 };
 </script>
diff --git a/src/views/viewFile/viewFile.vue b/src/views/viewFile/viewFile.vue
new file mode 100644
index 00000000..b22194a8
--- /dev/null
+++ b/src/views/viewFile/viewFile.vue
@@ -0,0 +1,483 @@
+<template>
+  <!-- 预览文件 -->
+  <el-dialog
+    v-model="dialogVisible"
+    :title="title"
+    :show-close="true"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    :append-to-body="true"
+    :width="width > 500 ? '700px' : '500px'"
+  >
+    <div style="text-align:center">
+      <!-- 图片预览 -->
+      <template v-if="isImage">
+        <div class="image-toolbar">
+          <!-- <el-button size="small" @click="downloadFile"><el-icon><Download /></el-icon> 下载</el-button> -->
+        </div>
+        <el-image
+          :src="processedFileUrl"
+          :preview-src-list="previewList"
+          fit="contain"
+          style="max-width:100%;max-height:70vh"
+        >
+          <template #error>
+            <div class="image-slot">
+              <el-icon><Picture /></el-icon>
+            </div>
+          </template>
+        </el-image>
+      </template>
+
+      <!-- PDF 预览 -->
+      <template v-else>
+        <div class="pdf-container">
+          <!-- PDF加载状态 -->
+          <div v-if="pdfLoading" class="pdf-loading">
+            <el-icon class="is-loading"><Loading /></el-icon>
+            <p>PDF加载中...</p>
+          </div>
+
+          <!-- PDF错误状态 -->
+          <div v-else-if="pdfError" class="pdf-error">
+            <el-icon><Warning /></el-icon>
+            <p>PDF加载失败</p>
+            <el-button size="small" @click="retryLoadPdf">重试</el-button>
+          </div>
+
+          <!-- PDF内容 -->
+          <div v-else class="pdf-content">
+            <!-- PDF工具栏 -->
+            <div class="pdf-toolbar">
+              <div class="pdf-controls">
+                <el-button
+                  size="small"
+                  :disabled="currentPage <= 1"
+                  @click="prevPage"
+                >
+                  <el-icon><ArrowLeft /></el-icon> 上一页
+                </el-button>
+                <span class="page-info">
+                  {{ currentPage }} / {{ numPages }}
+                </span>
+                <el-button
+                  size="small"
+                  :disabled="currentPage >= numPages"
+                  @click="nextPage"
+                >
+                  下一页 <el-icon><ArrowRight /></el-icon>
+                </el-button>
+              </div>
+              <div class="pdf-actions">
+                <!-- <el-button size="small" @click="downloadFile"><el-icon><Download /></el-icon> 下载</el-button> -->
+              </div>
+            </div>
+
+            <!-- PDF显示区域 -->
+            <div class="pdf-viewer" @wheel="handleWheel" ref="pdfViewer">
+              <!-- 注意：vue-pdf 需要安装兼容 Vue3 的版本 -->
+              <!-- <pdf
+                :src="processedFileUrl"
+                :page="currentPage"
+                @num-pages="numPages = $event"
+                @loaded="onPdfLoaded"
+                @error="onPdfError"
+                style="width:100%;height:70vh"
+              /> -->
+              <div class="pdf-placeholder">
+                <el-icon><Document /></el-icon>
+                <p>PDF预览功能</p>
+                <p>需要安装 vue-pdf 的 Vue3 兼容版本</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
+import {
+  Document,
+  Picture,
+  Loading,
+  Warning,
+  ArrowLeft,
+  ArrowRight,
+  Download
+} from '@element-plus/icons-vue'
+// 注意：需要安装兼容 Vue3 的 pdf 组件
+// import pdf from 'vue-pdf'
+import { getFileAsBase64Api } from '@/api/archivesManagement/fileManager/fileManager'
+
+const props = defineProps({
+  width: {
+    type: [Number, String],
+    default: 600
+  },
+  hight: {
+    type: [Number, String],
+    default: 400
+  },
+  dataForm: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: '文件预览'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  isAdd: {
+    type: String,
+    default: ''
+  },
+  rowData: {
+    type: Object,
+    default: () => ({})
+  },
+  projectId: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['closeDialog', 'showColose'])
+
+// 响应式数据
+const dialogVisible = ref(true)
+const fileUrl = ref('')
+const fileName = ref('')
+const previewList = ref([])
+const pdfLoading = ref(false)
+const pdfError = ref(false)
+const currentPage = ref(1)
+const numPages = ref(0)
+const wheelTimeout = ref(null)
+const isWheelScrolling = ref(false)
+const pdfViewer = ref()
+
+// 计算属性
+const isImage = computed(() => {
+  const exts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
+  const url = (fileUrl.value || '')
+  const name = (fileName.value || '').toLowerCase()
+  return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
+})
+
+const isPdf = computed(() => {
+  const exts = ['.pdf']
+  const url = (fileUrl.value || '')
+  const name = (fileName.value || '').toLowerCase()
+  return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
+})
+
+const processedFileUrl = computed(() => {
+  if (fileUrl.value && !fileUrl.value.startsWith('data:')) {
+    if (isPdf.value) {
+      return `data:application/pdf;base64,${fileUrl.value}`
+    } else if (isImage.value) {
+      const imageType = getImageMimeType()
+      return `data:${imageType};base64,${fileUrl.value}`
+    }
+  }
+  return fileUrl.value
+})
+
+// 方法
+const handleClose = () => {
+  dialogVisible.value = false
+  emit('closeDialog')
+}
+
+/* 获取文件的base64 */
+const getFileAsBase64 = async () => {
+  if (isPdf.value) {
+    pdfLoading.value = true
+    pdfError.value = false
+  }
+
+  try {
+    const res = await getFileAsBase64Api({ id: props.rowData.fileId })
+    const obj = res.data
+    fileUrl.value = obj?.fileBase64 || ''
+    fileName.value = obj?.fileName || ''
+
+    if (isImage.value && fileUrl.value) {
+      previewList.value = [processedFileUrl.value]
+    }
+  } catch (error) {
+    if (isPdf.value) {
+      pdfError.value = true
+      pdfLoading.value = false
+    }
+    console.error('获取文件失败:', error)
+  }
+}
+
+// PDF相关方法
+const resetPdfState = () => {
+  currentPage.value = 1
+  numPages.value = 0
+  pdfLoading.value = false
+  pdfError.value = false
+  isWheelScrolling.value = false
+  if (wheelTimeout.value) {
+    clearTimeout(wheelTimeout.value)
+    wheelTimeout.value = null
+  }
+}
+
+const onPdfLoaded = () => {
+  pdfLoading.value = false
+  pdfError.value = false
+}
+
+const onPdfError = (error) => {
+  pdfLoading.value = false
+  pdfError.value = true
+  console.error('PDF加载失败:', error)
+}
+
+const retryLoadPdf = () => {
+  resetPdfState()
+  getFileAsBase64()
+}
+
+const prevPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
+
+const nextPage = () => {
+  if (currentPage.value < numPages.value) {
+    currentPage.value++
+  }
+}
+
+// 下载文件
+const downloadFile = () => {
+  if (!fileUrl.value) return
+  const filename = fileName.value || '文件'
+
+  let mime = isPdf.value ? 'application/pdf' : getImageMimeType()
+
+  let base64Data = fileUrl.value
+  if (typeof base64Data === 'string' && base64Data.startsWith('data:')) {
+    try {
+      const parts = base64Data.split(',')
+      const header = parts[0]
+      const dataPart = parts[1]
+      const match = header.match(/^data:(.*?);base64$/)
+      if (match && match[1]) mime = match[1]
+      base64Data = dataPart
+    } catch (e) {
+      // 解析失败则按原样处理
+    }
+  }
+
+  const blob = base64ToBlob(base64Data, mime)
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.style.display = 'none'
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+// base64转Blob
+const base64ToBlob = (base64, mime) => {
+  const byteChars = atob(base64)
+  const sliceSize = 1024
+  const byteArrays = []
+  for (let offset = 0; offset < byteChars.length; offset += sliceSize) {
+    const slice = byteChars.slice(offset, offset + sliceSize)
+    const byteNumbers = new Array(slice.length)
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i)
+    }
+    const byteArray = new Uint8Array(byteNumbers)
+    byteArrays.push(byteArray)
+  }
+  return new Blob(byteArrays, { type: mime || 'application/octet-stream' })
+}
+
+// 获取图片MIME类型
+const getImageMimeType = () => {
+  const name = (fileName.value || '').toLowerCase()
+  if (name.endsWith('.jpg') || name.endsWith('.jpeg')) {
+    return 'image/jpeg'
+  } else if (name.endsWith('.png')) {
+    return 'image/png'
+  } else if (name.endsWith('.gif')) {
+    return 'image/gif'
+  } else if (name.endsWith('.bmp')) {
+    return 'image/bmp'
+  } else if (name.endsWith('.webp')) {
+    return 'image/webp'
+  }
+  return 'image/jpeg'
+}
+
+// 处理滚轮事件
+const handleWheel = (event) => {
+  event.preventDefault()
+
+  if (isWheelScrolling.value) {
+    return
+  }
+
+  isWheelScrolling.value = true
+
+  if (wheelTimeout.value) {
+    clearTimeout(wheelTimeout.value)
+  }
+
+  if (event.deltaY > 0) {
+    nextPage()
+  } else if (event.deltaY < 0) {
+    prevPage()
+  }
+
+  wheelTimeout.value = setTimeout(() => {
+    isWheelScrolling.value = false
+  }, 300)
+}
+
+// 监听器
+watch(isPdf, (newVal) => {
+  if (newVal) {
+    resetPdfState()
+  }
+})
+
+// 生命周期
+onMounted(() => {
+  getFileAsBase64()
+})
+</script>
+
+<style scoped>
+.image-slot {
+  width: 100%;
+  height: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 24px;
+}
+
+/* PDF预览样式 */
+.pdf-container {
+  width: 100%;
+  height: 70vh;
+  position: relative;
+}
+
+.pdf-loading,
+.pdf-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 16px;
+}
+
+.pdf-loading .el-icon {
+  font-size: 32px;
+  margin-bottom: 16px;
+  animation: rotating 2s linear infinite;
+}
+
+.pdf-error .el-icon {
+  font-size: 32px;
+  margin-bottom: 16px;
+  color: #F56C6C;
+}
+
+.pdf-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.pdf-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #f5f5f5;
+  border-bottom: 1px solid #e4e7ed;
+  flex-shrink: 0;
+}
+
+.pdf-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.image-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 0 8px 0;
+}
+
+.pdf-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-info {
+  font-size: 14px;
+  color: #606266;
+  min-width: 60px;
+  text-align: center;
+}
+
+.pdf-viewer {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  background: #f8f9fa;
+  cursor: pointer;
+}
+
+.pdf-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 16px;
+}
+
+.pdf-placeholder .el-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>