diff --git a/src/api/archivesManagement/index.js b/src/api/archivesManagement/index.js
index 63bf9cb..c367132 100644
--- a/src/api/archivesManagement/index.js
+++ b/src/api/archivesManagement/index.js
@@ -10,29 +10,47 @@ export function getArchivalCatalogueTreeApi(params) {
 }
 
 // 新增档案目录
-export function addArchiveApi(data) {
+export function addArchiveLeftApi(data) {
     return request({
-        url: '/smartArchives/archive',
+        url: '/smartArchives/archive/addLeft',
         method: 'post',
-        data,
+        data:data
+    })
+}
+
+// 新增档案表格数据
+export function addArchiveRightApi(data) {
+    return request({
+        url: '/smartArchives/archive/addRight',
+        method: 'post',
+        data:data
     })
 }
 
 // 修改档案目录
-export function putArchiveApi(data) {
+export function editArchiveLeftApi(data) {
     return request({
-        url: '/smartArchives/archive',
-        method: 'put',
-        data,
+        url: '/smartArchives/archive/editLeft',
+        method: 'post',
+        data:data,
+    })
+}
+
+// 修改档案目录
+export function editArchiveRightApi(data) {
+    return request({
+        url: '/smartArchives/archive/editRight',
+        method: 'post',
+        data:data,
     })
 }
 
 // 删除档案目录
 export function delArchiveApi(data) {
     return request({
-        url: '/smartArchives/archive',
-        method: 'delete',
-        data,
+        url: '/smartArchives/archive/del',
+        method: 'post',
+        data:data,
     })
 }
 
@@ -52,4 +70,13 @@ export function getArchivalCatalogueListApi(params) {
         method: 'get',
         params
     })
+}
+
+// 查询序号
+export function geMaxSortApi(params) {
+    return request({
+        url: '/smartArchives/archive/geMaxSort',
+        method: 'get',
+        params
+    })
 }
\ No newline at end of file
diff --git a/src/api/select.js b/src/api/select.js
new file mode 100644
index 0000000..f39605b
--- /dev/null
+++ b/src/api/select.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 文件分类标记-通用下拉选
+export async function getClassifyMarkSelApi(params) {
+    return await request({
+        url: '/smartArchives/archive/getFilesClassifyMarkSelect',
+        method: 'get',
+        params,
+    })
+}
\ No newline at end of file
diff --git a/src/views/archivesManagement/archClass/archCatalogue/components/addTableData.vue b/src/views/archivesManagement/archClass/archCatalogue/components/addTableData.vue
new file mode 100644
index 0000000..495c15c
--- /dev/null
+++ b/src/views/archivesManagement/archClass/archCatalogue/components/addTableData.vue
@@ -0,0 +1,249 @@
+<template>
+    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
+    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
+        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
+        <div>
+            <el-form :model="form" :rules="rules" ref="ruleForm" 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="detailStatus"></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="detailStatus"></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="detailStatus"></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="detailStatus"></el-input>
+                </el-form-item>
+                <el-form-item label="档案标识代码" prop="markCode">
+                    <el-select class="form-item" v-model="form.markCode" :disabled="detailStatus" filterable clearable
+                        placeholder="请选择档案标识代码">
+                        <el-option v-for="item in dict.type.mark_code" :key="item.value" :label="item.label"
+                            :value="item.label"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="文件分类标记" prop="classifyMark">
+                    <el-select class="form-item" v-model="form.classifyMark" :disabled="detailStatus" filterable clearable>
+                        <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>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
+            <el-button type="primary" class="search-btn" :disabled="disabled" v-if="!detailStatus"
+                @click="submitForm('ruleForm')">确认</el-button>
+        </span>
+    </el-dialog>
+</template>
+<script>
+import _ from 'lodash'
+import {
+    addArchiveRightApi,
+    editArchiveRightApi,
+} from '@/api/archivesManagement/index.js'
+import {getClassifyMarkSelApi} from '@/api/select.js'
+export default {
+    name: "AddTableData",
+    props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
+    dicts: ['mark_code'],
+    data() {
+        return {
+            lDialog: this.width > 500 ? "w700" : "w500",
+            dialogVisible: true,
+            isDisabled: true,
+            getClassifyMarkSelApi,
+            classifyMarkList : [],
+            form: {
+                contentName: null,
+                term: null,
+                unitName: null,
+                major: null,
+                markCode: null,
+                classifyMark: null,
+            },
+            belongName:'',
+            loading: null,
+            detailStatus:false,
+            rules: {
+                contentName: [
+                    { required: true, message: '文件题名不能为空', trigger: 'blur' }
+                ],
+                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' }
+                ],
+            },
+        };
+    },
+    created() {
+        this.initFormData();
+    },
+    methods: {
+        /** 初始化表单数据 */
+       async initFormData() {
+           const res = await getClassifyMarkSelApi();
+           this.classifyMarkList = res.data;
+           this.belongName = this.rowData.belongName;
+           this.detailStatus = this.rowData.detailStatus;
+            if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
+                // 编辑模式：填充表单数据
+                this.form = {
+                    id: this.rowData.id,
+                    contentName: this.rowData.contentName || null,
+                    term: this.rowData.term || null,
+                    major: this.rowData.major || null,
+                    unitName: this.rowData.unitName || null,
+                    markCode: this.rowData.markCode || null,
+                    classifyMark: this.rowData.classifyMark || null,
+                    parentId:this.rowData.parentId || null,
+                    level:4
+                };
+            } else {
+                // 新增模式：重置表单
+                this.form = {
+                    contentName: null,
+                    term: null,
+                    unitName: null,
+                    major: null,
+                    markCode: null,
+                    classifyMark: null,
+                    parentId:this.rowData.id || null,
+                    level:4
+                };
+            }
+        },
+        /*关闭弹窗 */
+        handleClose() {
+            this.dialogVisible = false;
+            this.$emit("closeDialog");
+            setTimeout(() => {
+                this.dialogVisible = true;
+            });
+        },
+        /**确认弹窗 */
+        sureBtnClick() {
+            this.dialogVisible = false;
+            this.$emit("closeDialog");
+            setTimeout(() => {
+                this.dialogVisible = true;
+            });
+        },
+        /**重置表单*/
+        reset() {
+            this.form = {
+                contentName: null,
+                term: null,
+                unitName: null,
+                major: null,
+                markCode: null,
+                classifyMark: null,
+                parentId:null,
+                level:4
+            };
+            this.resetForm("ruleForm");
+        },
+        handleReuslt(res) {
+            this.$modal.msgSuccess(res.msg);
+            this.reset();
+            this.$emit('handleQuery');
+            this.handleClose();
+        },
+        /**验证 */
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    // 显示遮罩层
+                    this.loading = this.$loading({
+                        lock: true,
+                        text: "数据提交中，请稍候...",
+                        background: 'rgba(0,0,0,0.5)',
+                        target: this.$el.querySelector('.el-dialog') || document.body
+                    })
+                    let params = _.cloneDeep(this.form);
+                    
+                    if (this.isAdd === 'add') {
+                        addArchiveRightApi(params).then(res => {
+                            this.loading.close();
+                            if (res.code === 200) {
+                                this.handleReuslt(res);
+                            } else {
+                                this.$modal.msgError(res.msg);
+                            }
+                        }).catch(error => {
+                            this.loading.close();
+                            // this.$modal.msgError('提交失败，请重试');
+                        });
+                    } else {
+                        editArchiveRightApi(params).then(res => {
+                            this.loading.close();
+                            if (res.code === 200) {
+                                this.handleReuslt(res);
+                            } else {
+                                this.$modal.msgError(res.msg);
+                            }
+                        }).catch(error => {
+                            this.loading.close();
+                            // this.$modal.msgError('提交失败，请重试');
+                        });
+                    }
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="scss">
+.w700 .el-dialog {
+    width: 700px;
+}
+
+.w500 .el-dialog {
+    width: 500px;
+}
+
+.w500 .el-dialog__header,
+.w700 .el-dialog__header {
+    // background: #eeeeee;
+
+    .el-dialog__title {
+        font-size: 16px;
+    }
+}
+
+.yxq .el-range-separator {
+    margin-right: 7px !important;
+}
+
+.el-date-editor--daterange.el-input__inner {
+    width: 260px;
+}
+
+.form-item {
+    width: 100%;
+}
+
+.select-style {
+    display: flex;
+    justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/archivesManagement/archClass/archCatalogue/components/addTreeData.vue b/src/views/archivesManagement/archClass/archCatalogue/components/addTreeData.vue
new file mode 100644
index 0000000..c107505
--- /dev/null
+++ b/src/views/archivesManagement/archClass/archCatalogue/components/addTreeData.vue
@@ -0,0 +1,338 @@
+<template>
+    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
+    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
+        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
+        <div>
+            <el-form :model="form" :rules="dynamicRules" ref="ruleForm" label-width="110px"
+                :validate-on-rule-change="false">
+                <el-form-item label="上级节点" prop="parentId">
+                    <treeselect v-model="form.parentId" :options="treeDataList" placeholder="请选择上级节点" value-key="id"
+                        @select="onParentSelect" noChildrenText="没有数据了" noOptionsText="没有数据了" noResultsText="没有搜索结果" />
+                </el-form-item>
+                <el-form-item :label="getFormLabel('contentName')" prop="contentName">
+                    <el-input type="textarea" 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" :label="getFormPlaceholder('sort')" controls-position="right"
+                        style="width: 100%;"></el-input-number>
+                        <template>
+                            <span style="color: #f00000;">{{sortTitle}}</span>
+                        </template>
+                </el-form-item>
+            </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
+            <el-button type="primary" class="search-btn" :disabled="disabled"
+                @click="submitForm('ruleForm')">确认</el-button>
+        </span>
+    </el-dialog>
+</template>
+<script>
+import _ from 'lodash'
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { getArchivalCatalogueTreeApi, addArchiveLeftApi, editArchiveLeftApi,geMaxSortApi } from '@/api/archivesManagement/index.js'
+export default {
+    name: "AddTreeData",
+    props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
+    components: { Treeselect },
+    data() {
+        return {
+            lDialog: this.width > 500 ? "w700" : "w500",
+            dialogVisible: true,
+            isDisabled: true,
+            form: {
+                parentId: '',
+                contentName: '',
+                sort: 1,
+            },
+            loading: null,
+            treeDataList: [],
+            selectedParentLevel: null, // 保存选中父节点的层级
+            geMaxSortApi,
+            sortTitle:'',
+            rules: {
+                parentId: [
+                    { required: true, message: '上级节点不能为空', trigger: 'change' }
+                ],
+                contentName: [
+                    { required: true, message: '分类名称不能为空', trigger: 'blur' }
+                ],
+                sort: [
+                    { required: true, message: '分类号不能为空', trigger: 'blur' }
+                ],
+            },
+        };
+    },
+    computed: {
+        // 动态验证规则
+        dynamicRules() {
+            const isNonRootParent = this.form && this.form.parentId !== 0 && this.form.parentId !== undefined && this.form.parentId !== null;
+            return {
+                parentId: [
+                    { required: true, message: '上级节点不能为空', trigger: 'change' }
+                ],
+                contentName: [
+                    {
+                        required: true,
+                        message: isNonRootParent ? '案卷题名不能为空' : '分类名称不能为空',
+                        trigger: 'blur'
+                    }
+                ],
+                sort: [
+                    {
+                        required: true,
+                        message: isNonRootParent ? '案卷排序号不能为空' : '分类号不能为空',
+                        trigger: 'blur'
+                    }
+                ],
+            };
+        }
+    },
+    created() {
+        this.initFormData();
+    },
+    methods: {
+       async getMaxSort(value){
+           const res = await geMaxSortApi({parentId:value});
+           this.sortTitle = '当前已有最大排序为' + (res.data || 0);
+        },
+        /** 获取表单标签 */
+        getFormLabel(field) {
+            const isNonRootParent = this.form && this.form.parentId !== 0 && this.form.parentId !== undefined && this.form.parentId !== null;
+            if (isNonRootParent) {
+                if (field === 'contentName') {
+                    return '案卷题名';
+                } else if (field === 'sort') {
+                    return '案卷排序号';
+                }
+            }
+            if (field === 'contentName') {
+                return '分类名称';
+            } else if (field === 'sort') {
+                return '分类号';
+            }
+            return '';
+        },
+        /** 获取表单占位符 */
+        getFormPlaceholder(field) {
+            const isNonRootParent = this.form && this.form.parentId !== 0 && this.form.parentId !== undefined && this.form.parentId !== null;
+            if (isNonRootParent) {
+                if (field === 'contentName') {
+                    return '请输入案卷题名';
+                } else if (field === 'sort') {
+                    return '请输入案卷排序号';
+                }
+            }
+            if (field === 'contentName') {
+                return '请输入分类名称';
+            } else if (field === 'sort') {
+                return '请输入分类号';
+            }
+            return '';
+        },
+        /** 上级节点选择事件 */
+        onParentSelect(selectedNode) {
+            this.selectedParentLevel = selectedNode ? selectedNode.level : null;
+            this.$nextTick(() => {
+                if (this.$refs.ruleForm) {
+                    this.$refs.ruleForm.clearValidate(['contentName', 'sort']);
+                }
+            });
+            this.getMaxSort(selectedNode.id);
+        },
+        /** 查找父节点层级 */
+        findParentLevel(treeData, parentId) {
+            for (const node of treeData) {
+                if (node.id === parentId) {
+                    this.selectedParentLevel = node.level;
+                    return;
+                }
+                if (node.children && node.children.length > 0) {
+                    this.findParentLevel(node.children, parentId);
+                }
+            }
+        },
+        /** 初始化表单数据 */
+        async initFormData() {
+            let value = 0;
+            if (this.isAdd === 'edit' && this.rowData) {
+                // 编辑模式：填充表单数据
+                this.form = {
+                    id: this.rowData.id,
+                    parentId: this.rowData.parentId || 0,
+                    contentName: this.rowData.label || null,
+                    sort: this.rowData.sort || 0,
+                    level:this.rowData.level
+                };
+                value = this.rowData.parentId;
+                
+            } else {
+                // 新增模式：重置表单
+                this.form = {
+                    parentId: this.rowData.id,
+                    contentName: null,
+                    sort: 0,
+                    level:this.rowData.level
+                };
+                value = this.rowData.id;
+            }
+            await this.getLeftTreeList();
+
+            // 如果是编辑模式，需要根据父节点ID找到对应的层级
+            if (this.isAdd === 'edit' && this.form.parentId) {
+                this.findParentLevel(this.treeDataList, this.form.parentId);
+            }
+
+            await this.getMaxSort(value);
+        },
+        // 树数据过滤 - 支持无限层级转换，去除层级为3的数据
+        convertToVueTree(data) {
+            if (!data || !Array.isArray(data)) {
+                return [];
+            }
+
+            return data.map(item => {
+                // 如果当前节点层级为3，则跳过
+                if (item.level === 3) {
+                    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 = this.convertToVueTree(item.children);
+                    // 过滤掉null值（层级为3的节点）
+                    const filteredChildren = children.filter(child => child !== null);
+                    // 只有当子节点不为空时才添加 children 属性
+                    if (filteredChildren.length > 0) {
+                        node.children = filteredChildren;
+                    }
+                }
+
+                return node;
+            }).filter(node => node !== null); // 过滤掉null值
+        },
+        // 获取左侧树列表
+        async getLeftTreeList() {
+            const res = await getArchivalCatalogueTreeApi()
+            const transformedData = this.convertToVueTree(res.data)
+            this.treeDataList = transformedData;
+        },
+        /*关闭弹窗 */
+        handleClose() {
+            this.dialogVisible = false;
+            this.$emit("closeDialog");
+            setTimeout(() => {
+                this.dialogVisible = true;
+            });
+        },
+        /**确认弹窗 */
+        sureBtnClick() {
+            this.dialogVisible = false;
+            this.$emit("closeDialog");
+            setTimeout(() => {
+                this.dialogVisible = true;
+            });
+        },
+        /**重置表单*/
+        reset() {
+            this.form = {
+                parentId: undefined,
+                contentName: null,
+                sort: null,
+                level:null
+            };
+            this.resetForm("ruleForm");
+        },
+        handleReuslt(res) {
+            this.$modal.msgSuccess(res.msg);
+            this.reset();
+            this.$emit('handleQuery');
+            this.handleClose();
+        },
+        /**验证 */
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    // 显示遮罩层
+                    this.loading = this.$loading({
+                        lock: true,
+                        text: "数据提交中，请稍候...",
+                        background: 'rgba(0,0,0,0.5)',
+                        target: this.$el.querySelector('.el-dialog') || document.body
+                    })
+                    let params = _.cloneDeep(this.form);
+                    if (this.isAdd === 'add') {
+                        addArchiveLeftApi(params).then(res => {
+                            this.loading.close();
+                            if (res.code === 200) {
+                                this.handleReuslt(res);
+                            } else {
+                                this.$modal.msgError(res.msg);
+                            }
+                        }).catch(error => {
+                            this.loading.close();
+                            // this.$modal.msgError('提交失败，请重试');
+                        });
+                    } else {
+                        editArchiveLeftApi(params).then(res => {
+                            this.loading.close();
+                            if (res.code === 200) {
+                                this.handleReuslt(res);
+                            } else {
+                                this.$modal.msgError(res.msg);
+                            }
+                        }).catch(error => {
+                            this.loading.close();
+                            // this.$modal.msgError('提交失败，请重试');
+                        });
+                    }
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="scss">
+.w700 .el-dialog {
+    width: 700px;
+}
+
+.w500 .el-dialog {
+    width: 500px;
+}
+
+.w500 .el-dialog__header,
+.w700 .el-dialog__header {
+    // background: #eeeeee;
+
+    .el-dialog__title {
+        font-size: 16px;
+    }
+}
+
+.yxq .el-range-separator {
+    margin-right: 7px !important;
+}
+
+.el-date-editor--daterange.el-input__inner {
+    width: 260px;
+}
+
+.form-item {
+    width: 100%;
+}
+
+.select-style {
+    display: flex;
+    justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/archivesManagement/archClass/archCatalogue/components/config.js b/src/views/archivesManagement/archClass/archCatalogue/components/config.js
new file mode 100644
index 0000000..9e56199
--- /dev/null
+++ b/src/views/archivesManagement/archClass/archCatalogue/components/config.js
@@ -0,0 +1,18 @@
+export const formLabel = [
+    {
+        isShow: false, // 是否展示label
+        f_type: 'ipt',
+        f_label: '文件名称',
+        f_model: 'contentName',
+        f_max: 32,
+    },
+]
+
+export const columnsList = [
+    { t_props: 'contentName', t_label: '文件名称',t_width:220 },
+    { t_props: 'term', t_label: '案卷期限' },
+    { t_props: 'markCode', t_label: '档案标识代码' },
+    { t_props: 'unitName', t_label: '归档责任单位' },
+    { t_props: 'major', t_label: '所属专业' },
+    { t_props: 'classifyMark', t_label: '文件分类标记' }
+]
\ No newline at end of file
diff --git a/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue b/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue
new file mode 100644
index 0000000..0d5d360
--- /dev/null
+++ b/src/views/archivesManagement/archClass/archCatalogue/components/leftTree.vue
@@ -0,0 +1,293 @@
+<template>
+    <!-- 左侧树 -->
+    <div>
+        <el-card style="min-height: calc(100vh - 125px)">
+            <el-row :gutter="20" style="display: flex; align-items: center">
+                <el-col :span="16">
+                    <el-input v-model="filterText" placeholder="输入关键字" @keyup.enter.native="onHandleSearch">
+                    </el-input>
+                </el-col>
+                <el-col :span="8">
+                    <el-button type="primary" size="small" @click="onHandleSearch">
+                        查询
+                    </el-button>
+                    <el-button plain size="small" type="primary" icon="el-icon-plus"
+                        v-hasPermi="['archive:catalogue:add']" @click="addTree">
+                        新增
+                    </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">
+                    <span class="custom-tree-node" slot-scope="{ node, data }">
+                        <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="el-icon-plus" v-if="node.level !== 4"
+                                @click.stop="() => addTree(data)" v-hasPermi="['archive:catalogue:add']">
+                            </el-button>
+                            <el-button type="text" v-if="node.level > 1" icon="el-icon-edit-outline"
+                                style="color: #007ce0" @click.stop="() => editTree(node, data)" v-hasPermi="['archive:catalogue:edit']">
+                            </el-button>
+                            <el-button type="text" v-if="node.level > 1" icon="el-icon-delete" style="color: #f00000;"
+                                @click.stop="() => delTree(node, data)" v-hasPermi="['archive:catalogue:del']">
+                            </el-button>
+                        </span>
+                    </span>
+                </el-tree>
+            </div>
+        </el-card>
+        <!-- 树的操作（新增、修改） -->
+        <AddTreeData v-if="isflag" :isAdd="isAdd" :rowData="row" :title="title" @closeDialog="closeDialog"
+            @showColose="showColose" :dataForm="row" :width="600" />
+    </div>
+
+</template>
+
+<script>
+import { getArchivalCatalogueTreeApi } from '@/api/archivesManagement/index.js'
+import AddTreeData from './addTreeData.vue'
+export default {
+    name: 'LeftTree',
+    components: { AddTreeData },
+    data() {
+        return {
+            treeDataList: [],
+            filterText: '',
+            originalTreeData: [], // 保存原始数据,
+            isflag: false,
+            isAdd: '',
+            row: {},
+            selectedNodeId: null, // 保存当前选中的节点ID
+        }
+    },
+    computed: {
+        // 过滤后的树数据
+        filteredTreeData() {
+            if (!this.filterText) {
+                return this.treeDataList
+            }
+            return this.filterTreeData(this.treeDataList)
+        }
+    },
+    methods: {
+        /* 刷新树节点 */
+        async handleQuery() {
+            // 保存当前选中的节点ID
+            const currentNode = this.$refs.leftTreeRef.getCurrentNode();
+            if (currentNode) {
+                this.selectedNodeId = currentNode.id;
+            }
+
+            // 重新获取树数据
+            await this.getLeftTreeList();
+
+            // 恢复选中状态
+            this.$nextTick(() => {
+                if (this.selectedNodeId) {
+                    this.$refs.leftTreeRef.setCurrentKey(this.selectedNodeId);
+                }
+            });
+        },
+        closeDialog() {
+            this.isflag = false;
+            // 关闭弹窗后刷新树节点
+            this.handleQuery();
+        },
+        showColose() {
+            this.isflag = false;
+        },
+        /* 新增树节点 */
+        addTree(data) {
+            this.title = "新增";
+            this.isAdd = 'add';
+            this.isflag = true;
+            this.row = data;
+            this.row.level = Number(data.level) + 1
+        },
+        /* 修改树节点 */
+        editTree(row, data) {
+            this.title = "修改";
+            this.isAdd = 'edit';
+            this.row = data;
+            this.isflag = true;
+        },
+        // 节点点击事件
+        onHandleNodeClick(data) {
+            // 保存选中的节点ID
+            this.selectedNodeId = data.id;
+            this.$emit('handleNodeClick', data)
+        },
+        // 树数据过滤 - 支持无限层级转换
+        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
+                };
+
+                // 递归处理子节点
+                if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+                    const children = this.convertToVueTree(item.children);
+                    // 只有当子节点不为空时才添加 children 属性
+                    if (children.length > 0) {
+                        node.children = children;
+                    }
+                }
+
+                return node;
+            });
+        },
+        // 文本截断显示（超过27个字符以 ... 显示）
+        truncateLabel(text) {
+            if (!text) return '';
+            const max = this.getMaxLabelLength();
+            return text.length > max ? text.slice(0, max) + '...' : text;
+        },
+        isTruncated(text) {
+            if (!text) return false;
+            return text.length > this.getMaxLabelLength();
+        },
+        getMaxLabelLength() {
+            return 27; // 统一控制阈值
+        },
+        // 获取左侧树列表
+        async getLeftTreeList() {
+            const res = await getArchivalCatalogueTreeApi()
+            const transformedData = this.convertToVueTree(res.data)
+            this.treeDataList = transformedData;
+            // 保存原始数据
+            this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
+        },
+        // 搜索
+        onHandleSearch() {
+            this.$refs.leftTreeRef.filter(this.filterText)
+        },
+        // 树节点过滤方法
+        filterNode(value, data) {
+            if (!value) return true
+            return data.label.indexOf(value) !== -1
+        },
+        // 递归过滤树数据
+        filterTreeData(treeData) {
+            const result = []
+            for (const node of treeData) {
+                const newNode = { ...node }
+                if (node.children && node.children.length > 0) {
+                    const filteredChildren = this.filterTreeData(node.children)
+                    if (filteredChildren.length > 0) {
+                        newNode.children = filteredChildren
+                        result.push(newNode)
+                    } else if (node.label.indexOf(this.filterText) !== -1) {
+                        // 如果父节点匹配，保留所有子节点
+                        result.push(node)
+                    }
+                } else if (node.label.indexOf(this.filterText) !== -1) {
+                    result.push(newNode)
+                }
+            }
+            return result
+        },
+    },
+    created() {
+        this.getLeftTreeList()
+    },
+}
+</script>
+
+<style scoped>
+.tree-container {
+    margin-top: 10px;
+    max-height: calc(100vh - 230px);
+    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%;
+}
+
+.node-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 选中节点的背景色 */
+.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;
+}
+
+/* 选中节点的悬停效果 */
+.left-tree-list .el-tree-node.is-current>.el-tree-node__content:hover {
+    background-color: #8cc8ff;
+}
+
+
+.btn-box {
+    margin-left: 10px;
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+}
+
+/* 悬浮到整行时显示操作按钮 */
+.left-tree-list .el-tree-node__content:hover .btn-box {
+    opacity: 1;
+}
+</style>
diff --git a/src/views/archivesManagement/archClass/archCatalogue/components/rightTable.vue b/src/views/archivesManagement/archClass/archCatalogue/components/rightTable.vue
new file mode 100644
index 0000000..ff5e31f
--- /dev/null
+++ b/src/views/archivesManagement/archClass/archCatalogue/components/rightTable.vue
@@ -0,0 +1,159 @@
+<template>
+    <!-- 档案目录管理 -->
+    <div>
+        <el-card style="min-height: calc(100vh - 125px);">
+        <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="true" ref="tableRef"
+            :columnsList="columnsList" :request-api="getArchivalCatalogueListApi" :send-params="defaultParams">
+            <template slot="btn">
+                <el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['archive:catalogue:add']"
+                    @click="handleAdd" :disabled="addBtnIsShow">
+                    新增
+                </el-button>
+            </template>
+
+            <template slot="handle" slot-scope="{ data }">
+                <el-button plain size="mini" type="success" icon="el-icon-warning-outline" v-hasPermi="['archive:catalogue:query']"
+                    @click="handleDetail(data)">
+                    详情
+                </el-button>
+                <el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['archive:catalogue:edit']"
+                    @click="handleUpdate(data)">
+                    修改
+                </el-button>
+                <el-button plain size="mini" type="danger" icon="el-icon-delete" v-hasPermi="['archive:catalogue:del']"
+                    @click="handleDelete(data)">
+                    删除
+                </el-button>
+            </template>
+        </TableModel>
+        <!-- 新增/编辑 -->
+        <AddTableData v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
+            @closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :width="600" />
+        </el-card>
+    </div>
+</template>
+
+<script>
+import TableModel from '@/components/TableModel'
+import { columnsList, formLabel } from './config'
+import {
+    delArchiveApi,
+    getArchivalCatalogueListApi,
+} from '@/api/archivesManagement/index'
+import AddTableData from './addTableData'
+
+
+export default {
+    name: 'RightTable',
+    props:{
+        selectedNode:{
+            type:Object,
+            default:null
+        }
+    },
+    components: {
+        TableModel,
+        AddTableData
+    },
+    data() {
+        return {
+            formLabel,
+            columnsList,
+            getArchivalCatalogueListApi,
+            title: "",
+            isflag: false,
+            isAdd: '',
+            row: {},
+            loading: false,
+            addBtnIsShow:true,
+            defaultParams: {}
+        }
+    },
+
+    created() {
+
+    },
+
+    methods: {
+        
+        closeDialog() {
+            this.isflag = false;
+        },
+        showColose() {
+            this.isflag = false;
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.title = "新增";
+            this.isAdd = 'add';
+            this.isflag = true;
+            this.row = this.selectedNode;
+            this.row.detailStatus = false;
+            this.row.belongName = this.selectedNode.parentName + '/' + this.selectedNode.label
+            
+        },
+
+        /** 修改操作 */
+        handleUpdate(row) {
+            this.title = "修改";
+            this.isAdd = 'edit';
+            this.row = row;
+            this.row.belongName = this.selectedNode.label + '/' + this.selectedNode.parentName
+            this.row.detailStatus = false;
+            this.isflag = true;
+        },
+        
+        /** 详情操作 */
+        handleDetail(row) {
+            this.title = "详情";
+            this.isAdd = 'detail';
+            this.row = row;
+            this.row.belongName = this.selectedNode.label + '/' + this.selectedNode.parentName
+            this.row.detailStatus = true;
+            this.isflag = true;
+        },
+        /* 搜索操作 */
+        handleQuery() {
+            this.$refs.tableRef.getTableList()
+        },
+        /** 删除操作 */
+        handleDelete(row) {
+            this.$modal.confirm(`是否确认删除文件名称为"${row.contentName}"的数据项？`).then(() => {
+                // 显示加载遮罩
+                this.$modal.loading("正在删除，请稍候...");
+                delArchiveApi({ id: row.id }).then(res => {
+                    this.$modal.closeLoading();
+                    if (res.code === 200) {
+                        this.$modal.msgSuccess("删除成功");
+                        this.handleQuery();
+                    } else {
+                        this.$modal.msgError(res.msg);
+                    }
+                }).catch(error => {
+                    this.$modal.closeLoading();
+                    this.$modal.msgError("删除失败，请重试");
+                    console.error('删除失败:', error);
+                });
+            }).catch(() => {
+                // 用户取消删除，不需要处理
+            });
+        },
+    },
+    // 监听选中的节点
+    watch: {
+        selectedNode: {
+            handler(newVal) {
+                console.log(newVal);
+                this.addBtnIsShow = !(newVal && Number(newVal.level) === 3)
+                // 更新并下发默认请求参数（例如 parentId）
+                const parentId = newVal && newVal.id ? newVal.id : 0
+                this.defaultParams = { parentId }
+                if (this.$refs.tableRef) {
+                    this.$refs.tableRef.queryTableList({ parentId })
+                }
+            },
+            immediate: true, // 表示立即执行
+        },
+    },
+}
+</script>
diff --git a/src/views/archivesManagement/archClass/archCatalogue/index.vue b/src/views/archivesManagement/archClass/archCatalogue/index.vue
index e53f241..241b9f4 100644
--- a/src/views/archivesManagement/archClass/archCatalogue/index.vue
+++ b/src/views/archivesManagement/archClass/archCatalogue/index.vue
@@ -1,997 +1,39 @@
 <template>
-    <!-- 类型管理 -->
-    <div class="app-container" id="toolsType">
-        <el-row :gutter="20">
-            <!--左侧树数据-->
-            <el-col :span="6" :xs="24">
-                <div
-                    class="head-container"
-                    style="
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        margin-bottom: 20px;
-                    "
-                >
-                    <el-input
-                        v-model="contentName"
-                        placeholder="请输入类型名称"
-                        clearable
-                        maxlength="50"
-                        size="small"
-                        prefix-icon="el-icon-search"
-                        style="width: 75%"
-                    />
-                    <el-button
-                        type="primary"
-                        icon="el-icon-plus"
-                        size="mini"
-                        @click="handleAddNewNode"
-                        style="width: 20%"
-                        >新增
-                    </el-button>
-                </div>
-                <div class="head-container" style>
-                    <el-tree
-                        style="height: 700px; overflow: scroll"
-                        :data="treeOptions"
-                        :props="defaultProps"
-                        :expand-on-click-node="false"
-                        :filter-node-method="filterNode"
-                        ref="tree"
-                        node-key="id"
-                        :default-expand-all="true"
-                        highlight-current
-                        @node-click="handleNodeClick"
-                    >
-                        <span
-                            class="custom-tree-node"
-                            slot-scope="{ node, data }"
-                            @mousemove="onMousemove(data)"
-                            @mouseleave="onMouseleave()"
-                        >
-                            <span
-                                v-if="
-                                    isMousemoveId === data.id &&
-                                    node.label.length > 5
-                                "
-                                >{{ node.label.slice(0, 3) + '...' }}</span
-                            >
-                            <span v-else>{{ node.label }}</span>
-
-                            <span
-                                class="btn-items"
-                                v-if="isMousemoveId === data.id"
-                            >
-                                <el-button
-                                    v-if="data.level < 3"
-                                    type="text"
-                                    size="mini"
-                                    icon="el-icon-plus"
-                                    @click.stop="() => appendTreeNode(data)"
-                                >
-                                </el-button>
-                                <el-button
-                                    type="text"
-                                    size="mini"
-                                    icon="el-icon-edit-outline"
-                                    style="color: #67c23a"
-                                    v-if="data.id !== 0"
-                                    @click.stop="() => editTreeNode(data)"
-                                >
-                                </el-button>
-                                <el-button
-                                    type="text"
-                                    size="mini"
-                                    icon="el-icon-delete"
-                                    style="color: #f56c6c"
-                                    v-if="data.id !== 0 && data.level !== 0"
-                                    @click.stop="() => removeTreeNode(data)"
-                                >
-                                </el-button>
-                            </span>
-                        </span>
-                    </el-tree>
-                </div>
+    <!-- 档案目录管理 -->
+    <div class="app-container">
+        <el-row :gutter="24">
+            <el-col :span="9">
+                <LeftTree @handleNodeClick="handleNodeClick" />
             </el-col>
-            <!--右侧-->
-            <el-col :span="18" :xs="24">
-                <el-form
-                    :model="queryParams"
-                    ref="queryForm"
-                    size="small"
-                    :inline="true"
-                    v-show="showSearch"
-                    label-width="68px"
-                    @submit.native.prevent
-                >
-                    <el-form-item label="" prop="contentName">
-                        <el-input
-                            v-model="queryParams.contentName"
-                            placeholder="请输入类型名称"
-                            clearable
-                            style="width: 240px"
-                            @keyup.enter.native="handleQuery"
-                        />
-                    </el-form-item>
-
-                    <el-form-item>
-                        <el-button
-                            type="primary"
-                            icon="el-icon-search"
-                            size="mini"
-                            @click="handleQuery"
-                            >查询
-                        </el-button>
-                        <el-button
-                            icon="el-icon-refresh"
-                            size="mini"
-                            @click="resetQuery"
-                            >重置
-                        </el-button>
-                    </el-form-item>
-                </el-form>
-
-                <el-row :gutter="10" class="mb8">
-                    <el-col :span="1.5">
-                        <el-button
-                            type="primary"
-                            icon="el-icon-plus"
-                            size="mini"
-                            :disabled="!nodeId"
-                            @click="handleAdd"
-                            >新增
-                        </el-button>
-                    </el-col>
-                    <!-- <el-col :span="1.5">
-                        <el-button
-                            type="warning"
-                            plain
-                            icon="el-icon-download"
-                            size="mini"
-                            @click="handleExport"
-                            >导出
-                        </el-button>
-                    </el-col> -->
-                    <right-toolbar
-                        :showSearch.sync="showSearch"
-                        @queryTable="getList"
-                    ></right-toolbar>
-                </el-row>
-
-                <el-table v-loading="loading" :data="typeList" border>
-                    <el-table-column
-                        label="序号"
-                        align="center"
-                        width="80"
-                        type="index"
-                    >
-                        <template slot-scope="scope">
-                            <span>{{
-                                (queryParams.pageNum - 1) * 10 +
-                                scope.$index +
-                                1
-                            }}</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        label="文件名称"
-                        align="center"
-                        key="contentName"
-                        prop="contentName"
-                        show-overflow-tooltip
-                    />
-                    <el-table-column
-                        label="案卷期限"
-                        align="center"
-                        key="term"
-                        prop="term"
-                        show-overflow-tooltip
-                    />
-                    <el-table-column
-                        label="档案标识代码"
-                        align="center"
-                        key="markCode"
-                        prop="markCode"
-                        show-overflow-tooltip
-                    />
-                    <el-table-column
-                        label="所属专业"
-                        align="center"
-                        key="major"
-                        prop="major"
-                        show-overflow-tooltip
-                    />
-                    <el-table-column
-                        label="文件分类标记"
-                        align="center"
-                        key="classifyMark"
-                        prop="classifyMark"
-                        show-overflow-tooltip
-                    />
-
-                    <el-table-column label="操作" align="center" width="180">
-                        <template slot-scope="scope">
-                            <el-button
-                                size="mini"
-                                type="text"
-                                icon="el-icon-warning-outline"
-                                @click="handleView(scope.row)"
-                                style="color: #2b938d"
-                            >
-                                详情
-                            </el-button>
-                            <el-button
-                                size="mini"
-                                type="text"
-                                icon="el-icon-edit"
-                                @click="handleUpdate(scope.row)"
-                            >
-                                编辑
-                            </el-button>
-                            <el-button
-                                size="mini"
-                                type="text"
-                                icon="el-icon-delete"
-                                @click="handleDelete(scope.row)"
-                                style="color: #f56c6c"
-                            >
-                                删除
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-
-                <pagination
-                    v-show="total > 0"
-                    :total="total"
-                    :page.sync="queryParams.pageNum"
-                    :limit.sync="queryParams.pageSize"
-                    @pagination="getList"
-                />
+            <el-col :span="15">
+                <RightTable :selectedNode = "selectedNode" />
             </el-col>
         </el-row>
-
-        <!-- 新增/编辑-分类弹框 -->
-        <el-dialog
-            :title="addTitle"
-            :visible.sync="addTitleVisible"
-            v-if="addTitleVisible"
-            width="50%"
-            append-to-body
-            :close-on-click-modal="false"
-            v-loading="loading"
-        >
-            <el-form
-                label-width="120px"
-                :model="addFormParams"
-                :rules="addFormParamsRules"
-                ref="addFormParamsRef"
-            >
-                <el-row :gutter="24">
-                    <el-col :span="24">
-                        <el-form-item
-                            label="上级节点"
-                            prop="nodeId"
-                            v-if="isNew"
-                        >
-                            <treeselect
-                                v-model="addFormParams.nodeId"
-                                :options="treeOptions"
-                                :normalizer="normalizer"
-                                show-count
-                                noChildrenText="没有数据了"
-                                noOptionsText="没有数据了"
-                                noResultsText="没有搜索结果"
-                                placeholder="请选择节点"
-                                @select="selectNode"
-                                style="width: 100%"
-                            />
-                        </el-form-item>
-                        <el-form-item label="上级节点" v-else>
-                            <el-input
-                                style="width: 100%"
-                                disabled
-                                v-model="addFormParams.label"
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item label="分类名称" prop="contentName">
-                            <el-input
-                                style="width: 100%"
-                                v-model="addFormParams.contentName"
-                                placeholder="请输入"
-                                clearable
-                            />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="24">
-                        <el-form-item label="分类号" prop="sort">
-                            <el-input-number
-                                style="width: 100%"
-                                v-model="addFormParams.sort"
-                                placeholder="请输入"
-                                clearable
-                                :min="0"
-                                :precision="0"
-                                controls-position="right"
-                            />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <span slot="footer" class="dialog-footer">
-                <el-button
-                    size="small"
-                    type="primary"
-                    style="color: #fff"
-                    @click="onSubmit"
-                    >确 定</el-button
-                >
-                <el-button size="small" @click="onCancel">取 消</el-button>
-            </span>
-        </el-dialog>
-
-        <el-dialog
-            :visible.sync="dialogVisible"
-            v-if="dialogVisible"
-            width="50%"
-            :close-on-click-modal="false"
-            v-loading="loading"
-            :title="title"
-        >
-            <el-form
-                label-width="120px"
-                :model="addFormDetails"
-                :rules="addFormDetailsRules"
-                ref="formDetails"
-                :disabled="isView"
-            >
-                <el-form-item label="所属案卷" prop="parentName">
-                    <el-input
-                        v-model="addFormDetails.parentName"
-                        placeholder="请输入所属案卷"
-                        disabled
-                    />
-                </el-form-item>
-                <el-form-item label="文件题名" prop="contentName">
-                    <el-input
-                        v-model="addFormDetails.contentName"
-                        placeholder="请输入文件题名"
-                        maxlength="100"
-                    />
-                </el-form-item>
-                <el-form-item label="保管期限" prop="term">
-                    <el-input
-                        v-model="addFormDetails.term"
-                        placeholder="请输入保管期限"
-                        maxlength="100"
-                    />
-                </el-form-item>
-                <el-form-item label="归档责任单位" prop="unitName">
-                    <el-input
-                        v-model="addFormDetails.unitName"
-                        placeholder="请输入归档责任单位"
-                        maxlength="100"
-                    />
-                </el-form-item>
-                <el-form-item label="所属专业" prop="major">
-                    <el-input
-                        v-model="addFormDetails.major"
-                        placeholder="请输入所属专业"
-                        maxlength="100"
-                    />
-                </el-form-item>
-                <el-form-item label="档案标识代码" prop="markCode">
-                    <el-select
-                        v-model="addFormDetails.markCode"
-                        placeholder="请选择档案标识代码"
-                        style="width: 100%"
-                    >
-                        <el-option
-                            v-for="item in markCodeList"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="文件分类标记" prop="classifyMark">
-                    <el-select
-                        v-model="addFormDetails.classifyMark"
-                        placeholder="请选择文件分类标记"
-                        style="width: 100%"
-                    >
-                        <el-option
-                            v-for="item in classifyMarkList"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-            </el-form>
-            <span slot="footer" class="dialog-footer">
-                <el-button
-                    v-if="!isView"
-                    size="small"
-                    type="primary"
-                    style="color: #fff"
-                    @click="submitForm"
-                    >确 定</el-button
-                >
-                <el-button size="small" @click="dialogVisible = false">{{
-                    isView ? '关 闭' : '取 消'
-                }}</el-button>
-            </span>
-        </el-dialog>
     </div>
 </template>
 
 <script>
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import {
-    getArchivalCatalogueTreeApi,
-    addArchiveApi,
-    putArchiveApi,
-    delArchiveApi,
-    getArchivalCatalogueByIdApi,
-    getArchivalCatalogueListApi,
-} from '@/api/archivesManagement'
-
+import LeftTree from './components/leftTree.vue'
+import RightTable from './components/rightTable.vue'
 export default {
     name: 'ArchCatalogue',
-    components: { Treeselect },
+    components: {
+        LeftTree,
+        RightTable,
+    },
     data() {
         return {
-            // 遮罩层
-            loading: false,
-            isSubmit: false,
-            // 显示搜索条件
-            showSearch: true,
-            // 类型名称
-            contentName: undefined,
-            // 树选项
-            treeOptions: [],
-            //列表数据
-            typeList: [],
-            total: 0,
-            parentId: undefined,
-            defaultProps: {
-                children: 'children',
-                label: 'contentName',
-            },
-            // 查询参数
-            queryParams: {
-                pageNum: 1,
-                pageSize: 10,
-                parentId: null,
-                contentName: null,
-            },
-            // 弹框参数
-            isAdd: true,
-            isView: false,
-            addFormDetails: {
-                parentId: '', // 所属案卷id
-                parentName: '', // 所属案卷
-                level: 4,
-                contentName: '', // 文件题名
-                term: '', // 保管期限
-                unitName: '', // 归档责任单位
-                major: '', // 所属专业
-                markCode: '', // 档案标识代码
-                classifyMark: '', // 文件分类标记
-            },
-            addFormDetailsRules: {
-                contentName: [
-                    {
-                        required: true,
-                        message: '请输入文件题名',
-                        trigger: 'blur',
-                    },
-                ],
-                term: [
-                    {
-                        required: true,
-                        message: '请输入保管期限',
-                        trigger: 'blur',
-                    },
-                ],
-                unitName: [
-                    {
-                        required: true,
-                        message: '请选择归档责任单位',
-                        trigger: 'change',
-                    },
-                ],
-                major: [
-                    {
-                        required: true,
-                        message: '请输入所属专业',
-                        trigger: 'change',
-                    },
-                ],
-            },
-            markCodeList: [],
-            classifyMarkList: [],
-            title: '', // 弹出层标题
-            dialogVisible: false,
-            /* 新增弹框等数据源定义 */
-            isNew: false,
-            addTitleVisible: false,
-            addTitle: '', // 新增弹框标题
-            addFormParams: {
-                label: '',
-                contentName: '',
-                sort: '',
-            },
-            addFormParamsRules: {
-                nodeId: [
-                    {
-                        required: true,
-                        message: '上级节点不能为空',
-                        trigger: 'change',
-                    },
-                ],
-                contentName: [
-                    {
-                        required: true,
-                        message: '名称不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-                sort: [
-                    {
-                        required: true,
-                        message: '分类号不能为空',
-                        trigger: 'blur',
-                    },
-                ],
-            },
-            isMousemoveId: null,
-            nodeId: null,
-            nodeName: null,
+            // 选中的节点
+            selectedNode: null,
         }
     },
-    watch: {
-        // 根据名称筛选部门树
-        contentName(val) {
-            this.$refs.tree.filter(val)
-        },
-    },
-    created() {
-        this.getTreeData()
-    },
     methods: {
-        selectNode(data) {
-            console.log('🚀 ~ selectNode ~ data:', data)
-            this.addFormParams.level = data.level + 1
-            this.addFormParams.parentId = data.id
-        },
-        normalizer(node) {
-            console.log('🚀 ~ normalizer ~ node:', node)
-            if (node.children && !node.children.length) {
-                delete node.children
-            }
-            return {
-                id: node.id,
-                label: node.contentName,
-                children: node.children,
-            }
-        },
-        /** 查询新增页面-上级类型下拉树结构 */
-        getTreeData() {
-            getArchivalCatalogueTreeApi().then((response) => {
-                this.treeOptions = response.data
-                console.log(
-                    '🚀 ~ getTreeData ~ this.treeOptions:',
-                    this.treeOptions,
-                )
-            })
-        },
-        /** 查询列表 */
-        getList() {
-            this.loading = true
-            console.log('🚀 ~ getList ~ this.queryParams:', this.queryParams)
-            getArchivalCatalogueListApi(this.queryParams)
-                .then((res) => {
-                    this.loading = false
-                    if (!res.rows) return
-                    this.typeList = res.rows || []
-                    this.total = res.total || 0
-                })
-                .catch(() => {
-                    this.loading = false
-                })
-        },
-        // 筛选节点 - 左侧树
-        filterNode(value, data) {
-            if (!value) return true
-            return data.contentName.indexOf(value) !== -1
-        },
-        // 节点单击事件 - 左侧树
-        async handleNodeClick(data, node) {
-            console.log('🚀 ~ handleNodeClick ~ data:', data)
-            this.nodeId = data.level == 3 ? data.id : null
-            this.nodeName = data.level == 3 ? data.contentName : null
-            this.queryParams.parentId = data.level == 3 ? data.id : null
-
-            if (data.level == 3) {
-                this.getList()
-            }
-        },
-        /** 搜索按钮操作 */
-        handleQuery() {
-            this.queryParams.pageNum = 1
-            this.queryParams.pageSize = 10
-            this.getList()
-        },
-        /** 重置按钮操作 */
-        resetQuery() {
-            this.resetForm('queryForm')
-            this.queryParams.pageNum = 1
-            this.queryParams.pageSize = 10
-            this.getList()
-        },
-        //查看
-        handleView(row) {
-            this.isAdd = false
-            this.isView = true
-            console.log('🚀 ~ handleView ~ row:', row)
-            this.dialogVisible = true
-            this.title = '查看卷内文件'
-            setTimeout(() => {
-                this.$refs.formDetails.resetFields()
-                this.getInfo(row.id)
-            }, 300)
-        },
-        /** 新增按钮操作 */
-        handleAdd() {
-            this.isAdd = true
-            this.isView = false
-            this.dialogVisible = true
-            this.title = '新增卷内文件'
-            setTimeout(() => {
-                this.$refs.formDetails.resetFields()
-                this.addFormDetails.parentId = this.nodeId
-                this.addFormDetails.parentName = this.nodeName
-                console.log('🚀 ~ parentName:', this.addFormDetails.parentName)
-            }, 300)
-        },
-        /** 修改按钮操作 */
-        handleUpdate(row) {
-            console.log('🚀 ~ handleUpdate ~ row:', row)
-            this.isAdd = false
-            this.isView = false
-            this.dialogVisible = true
-            this.title = '修改卷内文件'
-            setTimeout(() => {
-                this.$refs.formDetails.resetFields()
-                this.getInfo(row.id)
-            }, 300)
-        },
-        /** 删除按钮操作 */
-        handleDelete(row) {
-            this.$modal
-                .confirm('是否确认删除数据项？')
-                .then(async () => {
-                    try {
-                        this.isLoading = true
-                        await delArchiveApi({ id: row.id })
-                        this.$modal.msgSuccess('删除成功')
-                    } catch (error) {
-                        console.log('🚀 ~ handleDelete ~ error:', error)
-                    } finally {
-                        this.isLoading = false
-                        this.getList()
-                    }
-                })
-                .catch(() => {})
-        },
-        /** 提交按钮 */
-        submitForm() {
-            this.$refs['formDetails'].validate(async (valid) => {
-                if (!valid) return
-                try {
-                    if (this.isSubmit) return
-                    this.isSubmit = true
-                    this.isLoading = true
-                    const params = { ...this.addFormDetails }
-                    console.log('🚀 ~ submitForm ~ params:', params)
-                    if (this.isAdd) {
-                        await addArchiveApi(params)
-                    } else {
-                        await putArchiveApi(params)
-                    }
-
-                    this.$message({
-                        message: '添加成功',
-                        type: 'success',
-                    })
-                } catch (error) {
-                    console.log('🚀 ~ submitForm ~ error:', error)
-                } finally {
-                    this.isLoading = false
-                    this.isSubmit = false
-                    this.dialogVisible = false
-                    this.getList()
-                }
-            })
-        },
-        /** 导出按钮作 */
-        handleExport() {
-            const formatTime = (date) => {
-                const year = date.getFullYear()
-                const month = String(date.getMonth() + 1).padStart(2, '0')
-                const day = String(date.getDate()).padStart(2, '0')
-                const hours = String(date.getHours()).padStart(2, '0')
-                const minutes = String(date.getMinutes()).padStart(2, '0')
-                const seconds = String(date.getSeconds()).padStart(2, '0')
-                return `${year}${month}${day}_${hours}${minutes}${seconds}`
-            }
-
-            const currentTime = formatTime(new Date())
-            let queryTemp = this.queryParams
-            // queryTemp.level = 0;
-            this.download(
-                '/export',
-                {
-                    ...queryTemp,
-                },
-                `导出_${currentTime}.xlsx`,
-            )
-        },
-        async getInfo(id) {
-            try {
-                const { data } = await getArchivalCatalogueByIdApi({ id })
-                this.addFormParams = { ...data }
-                this.addFormParams.label = data.parentName
-                this.addFormDetails = { ...data }
-            } catch (error) {
-                console.log('🚀 ~ getInfo ~ error:', error)
-            }
-        },
-        handleAddNewNode() {
-            this.isNew = true
-            this.addFormParams = {
-                label: '',
-                contentName: '',
-                sort: '',
-                nodeId: null,
-            }
-            this.addTitle = '新增分类'
-            this.addTitleVisible = true
-        },
-        /* 树节点增加 */
-        appendTreeNode(data) {
-            console.log('dataAdd', data)
-            this.isNew = false
-            this.addFormParams.sort = null
-            this.addFormParams.contentName = ''
-            this.addFormParams.nodeId = data.id
-            this.addFormParams.level = data.level + 1
-            this.addFormParams.parentId = data.id
-            this.addFormParams.label = data.contentName || ''
-            console.log(
-                '🚀 ~ appendTreeNode ~ this.addFormParams:',
-                this.addFormParams,
-            )
-            this.addTitle = '新增分类'
-            this.addTitleVisible = true
-        },
-        /* 树节点修改 */
-        editTreeNode(data) {
-            this.isNew = false
-            this.addTitle = '修改分类'
-            this.addTitleVisible = true
-            this.getInfo(data.id)
-        },
-        /* 树节点删除 */
-        removeTreeNode(data) {
-            console.log('🚀 ~ removeTreeNode ~ data:', data)
-            this.$modal
-                .confirm('是否确认删除数据项？')
-                .then(function () {
-                    return delArchiveApi({ id: data.id })
-                })
-                .then(() => {
-                    this.$modal.msgSuccess('删除成功')
-                    this.getTreeData()
-                })
-                .catch(() => {})
-        },
-        /* 确定 */
-        onSubmit() {
-            console.log(
-                '🚀 ~ onSubmit ~ this.addFormParams:',
-                this.addFormParams,
-            )
-
-            const params = {
-                id: this.addFormParams.id || '',
-                parentId: this.addFormParams.parentId,
-                contentName: this.addFormParams.contentName,
-                sort: this.addFormParams.sort,
-                level: this.addFormParams.level,
-            }
-
-            this.$refs['addFormParamsRef'].validate(async (valid) => {
-                if (valid) {
-                    try {
-                        if (this.isSubmit) return
-                        this.isSubmit = true
-                        this.isLoading = true
-                        if (this.addTitle === '新增分类') {
-                            await addArchiveApi(params)
-                            this.$message.success('新增成功！')
-                        } else {
-                            await putArchiveApi(params)
-                            this.$message.success('修改成功！')
-                        }
-                    } catch (error) {
-                        console.log('🚀 ~ onSubmit ~ error:', error)
-                    } finally {
-                        this.isLoading = false
-                        this.isSubmit = false
-                        this.addTitleVisible = false
-                        this.getTreeData()
-                        // this.getList()
-                    }
-                }
-            })
-        },
-        /* 取消 */
-        onCancel() {
-            this.addTitleVisible = false
-        },
-        onMousemove(data) {
-            this.isMousemoveId = data.id
-        },
-        onMouseleave() {
-            this.isMousemoveId = null
+        // 节点点击事件
+        handleNodeClick(data) {
+            this.selectedNode = data;
         },
     },
 }
 </script>
-<style lang="scss" scoped>
-::v-deep.el-table .fixed-width .el-button--mini {
-    width: 60px !important;
-    margin-bottom: 10px;
-}
 
-::v-deep .btn-items .el-button + .el-button {
-    margin-left: 6px;
-}
-
-.btn-items {
-    margin-left: 4px;
-
-    .el-button--text {
-        font-size: 16px;
-    }
-}
-
-::v-deep .el-tree .el-tree-node__expand-icon.expanded {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-}
-
-::v-deep .el-tree .el-icon-caret-right:before {
-    content: '\e783';
-    font-size: 16px;
-}
-
-::v-deep
-    .el-tree
-    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
-    content: '\e781';
-    font-size: 16px;
-    color: #1890ff;
-}
-
-::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
-    color: #1890ff !important;
-}
-
-::v-deep .el-tree-node__expand-icon.is-leaf {
-    color: transparent !important;
-}
-
-::v-deep
-    .el-tree--highlight-current
-    .el-tree-node.is-current
-    > .el-tree-node__content {
-    background-color: #8decf1;
-}
-
-::v-deep .el-dialog {
-    // 表单标签文字样式
-    .el-form-item__label {
-        font-size: 14px;
-        color: #606266;
-        font-weight: 500;
-        // line-height: 1.5;
-    }
-
-    // 输入框文字样式
-    .el-input__inner {
-        font-size: 14px;
-        color: #303133;
-
-        &::placeholder {
-            font-size: 13px;
-            color: #c0c4cc;
-        }
-    }
-
-    // 单位文字样式
-    span {
-        font-size: 14px;
-        // color: #606266;
-        margin-left: 8px;
-    }
-
-    // 下拉选择框文字样式
-    .el-select {
-        .el-input__inner {
-            font-size: 14px;
-            color: #303133;
-        }
-    }
-
-    // 只读输入框样式
-    .el-input.is-disabled .el-input__inner {
-        background-color: #f5f7fa;
-        border-color: #e4e7ed;
-        color: #606266;
-        cursor: not-allowed;
-    }
-}
-
-// 表格内文字样式
-::v-deep .el-table {
-    font-size: 14px;
-
-    th {
-        font-weight: 500;
-        color: #303133;
-    }
-
-    td {
-        color: #606266;
-    }
-}
-
-// 按钮文字样式
-::v-deep .el-button {
-    font-size: 14px;
-
-    &--text {
-        font-size: 13px;
-    }
-}
-
-// 树节点文字样式
-::v-deep .el-tree-node__label {
-    font-size: 14px;
-    color: #606266;
-}
-
-// 搜索框文字样式
-::v-deep .el-input--small {
-    .el-input__inner {
-        font-size: 13px;
-
-        &::placeholder {
-            font-size: 13px;
-            color: #c0c4cc;
-        }
-    }
-}
-
-::v-deep .el-dialog .el-input__inner {
-    text-align: start !important;
-}
-</style>
+<style></style>
diff --git a/src/views/archivesManagement/archClass/archCatalogue/index22.vue b/src/views/archivesManagement/archClass/archCatalogue/index22.vue
new file mode 100644
index 0000000..e53f241
--- /dev/null
+++ b/src/views/archivesManagement/archClass/archCatalogue/index22.vue
@@ -0,0 +1,997 @@
+<template>
+    <!-- 类型管理 -->
+    <div class="app-container" id="toolsType">
+        <el-row :gutter="20">
+            <!--左侧树数据-->
+            <el-col :span="6" :xs="24">
+                <div
+                    class="head-container"
+                    style="
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        margin-bottom: 20px;
+                    "
+                >
+                    <el-input
+                        v-model="contentName"
+                        placeholder="请输入类型名称"
+                        clearable
+                        maxlength="50"
+                        size="small"
+                        prefix-icon="el-icon-search"
+                        style="width: 75%"
+                    />
+                    <el-button
+                        type="primary"
+                        icon="el-icon-plus"
+                        size="mini"
+                        @click="handleAddNewNode"
+                        style="width: 20%"
+                        >新增
+                    </el-button>
+                </div>
+                <div class="head-container" style>
+                    <el-tree
+                        style="height: 700px; overflow: scroll"
+                        :data="treeOptions"
+                        :props="defaultProps"
+                        :expand-on-click-node="false"
+                        :filter-node-method="filterNode"
+                        ref="tree"
+                        node-key="id"
+                        :default-expand-all="true"
+                        highlight-current
+                        @node-click="handleNodeClick"
+                    >
+                        <span
+                            class="custom-tree-node"
+                            slot-scope="{ node, data }"
+                            @mousemove="onMousemove(data)"
+                            @mouseleave="onMouseleave()"
+                        >
+                            <span
+                                v-if="
+                                    isMousemoveId === data.id &&
+                                    node.label.length > 5
+                                "
+                                >{{ node.label.slice(0, 3) + '...' }}</span
+                            >
+                            <span v-else>{{ node.label }}</span>
+
+                            <span
+                                class="btn-items"
+                                v-if="isMousemoveId === data.id"
+                            >
+                                <el-button
+                                    v-if="data.level < 3"
+                                    type="text"
+                                    size="mini"
+                                    icon="el-icon-plus"
+                                    @click.stop="() => appendTreeNode(data)"
+                                >
+                                </el-button>
+                                <el-button
+                                    type="text"
+                                    size="mini"
+                                    icon="el-icon-edit-outline"
+                                    style="color: #67c23a"
+                                    v-if="data.id !== 0"
+                                    @click.stop="() => editTreeNode(data)"
+                                >
+                                </el-button>
+                                <el-button
+                                    type="text"
+                                    size="mini"
+                                    icon="el-icon-delete"
+                                    style="color: #f56c6c"
+                                    v-if="data.id !== 0 && data.level !== 0"
+                                    @click.stop="() => removeTreeNode(data)"
+                                >
+                                </el-button>
+                            </span>
+                        </span>
+                    </el-tree>
+                </div>
+            </el-col>
+            <!--右侧-->
+            <el-col :span="18" :xs="24">
+                <el-form
+                    :model="queryParams"
+                    ref="queryForm"
+                    size="small"
+                    :inline="true"
+                    v-show="showSearch"
+                    label-width="68px"
+                    @submit.native.prevent
+                >
+                    <el-form-item label="" prop="contentName">
+                        <el-input
+                            v-model="queryParams.contentName"
+                            placeholder="请输入类型名称"
+                            clearable
+                            style="width: 240px"
+                            @keyup.enter.native="handleQuery"
+                        />
+                    </el-form-item>
+
+                    <el-form-item>
+                        <el-button
+                            type="primary"
+                            icon="el-icon-search"
+                            size="mini"
+                            @click="handleQuery"
+                            >查询
+                        </el-button>
+                        <el-button
+                            icon="el-icon-refresh"
+                            size="mini"
+                            @click="resetQuery"
+                            >重置
+                        </el-button>
+                    </el-form-item>
+                </el-form>
+
+                <el-row :gutter="10" class="mb8">
+                    <el-col :span="1.5">
+                        <el-button
+                            type="primary"
+                            icon="el-icon-plus"
+                            size="mini"
+                            :disabled="!nodeId"
+                            @click="handleAdd"
+                            >新增
+                        </el-button>
+                    </el-col>
+                    <!-- <el-col :span="1.5">
+                        <el-button
+                            type="warning"
+                            plain
+                            icon="el-icon-download"
+                            size="mini"
+                            @click="handleExport"
+                            >导出
+                        </el-button>
+                    </el-col> -->
+                    <right-toolbar
+                        :showSearch.sync="showSearch"
+                        @queryTable="getList"
+                    ></right-toolbar>
+                </el-row>
+
+                <el-table v-loading="loading" :data="typeList" border>
+                    <el-table-column
+                        label="序号"
+                        align="center"
+                        width="80"
+                        type="index"
+                    >
+                        <template slot-scope="scope">
+                            <span>{{
+                                (queryParams.pageNum - 1) * 10 +
+                                scope.$index +
+                                1
+                            }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        label="文件名称"
+                        align="center"
+                        key="contentName"
+                        prop="contentName"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="案卷期限"
+                        align="center"
+                        key="term"
+                        prop="term"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="档案标识代码"
+                        align="center"
+                        key="markCode"
+                        prop="markCode"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="所属专业"
+                        align="center"
+                        key="major"
+                        prop="major"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="文件分类标记"
+                        align="center"
+                        key="classifyMark"
+                        prop="classifyMark"
+                        show-overflow-tooltip
+                    />
+
+                    <el-table-column label="操作" align="center" width="180">
+                        <template slot-scope="scope">
+                            <el-button
+                                size="mini"
+                                type="text"
+                                icon="el-icon-warning-outline"
+                                @click="handleView(scope.row)"
+                                style="color: #2b938d"
+                            >
+                                详情
+                            </el-button>
+                            <el-button
+                                size="mini"
+                                type="text"
+                                icon="el-icon-edit"
+                                @click="handleUpdate(scope.row)"
+                            >
+                                编辑
+                            </el-button>
+                            <el-button
+                                size="mini"
+                                type="text"
+                                icon="el-icon-delete"
+                                @click="handleDelete(scope.row)"
+                                style="color: #f56c6c"
+                            >
+                                删除
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+
+                <pagination
+                    v-show="total > 0"
+                    :total="total"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+                />
+            </el-col>
+        </el-row>
+
+        <!-- 新增/编辑-分类弹框 -->
+        <el-dialog
+            :title="addTitle"
+            :visible.sync="addTitleVisible"
+            v-if="addTitleVisible"
+            width="50%"
+            append-to-body
+            :close-on-click-modal="false"
+            v-loading="loading"
+        >
+            <el-form
+                label-width="120px"
+                :model="addFormParams"
+                :rules="addFormParamsRules"
+                ref="addFormParamsRef"
+            >
+                <el-row :gutter="24">
+                    <el-col :span="24">
+                        <el-form-item
+                            label="上级节点"
+                            prop="nodeId"
+                            v-if="isNew"
+                        >
+                            <treeselect
+                                v-model="addFormParams.nodeId"
+                                :options="treeOptions"
+                                :normalizer="normalizer"
+                                show-count
+                                noChildrenText="没有数据了"
+                                noOptionsText="没有数据了"
+                                noResultsText="没有搜索结果"
+                                placeholder="请选择节点"
+                                @select="selectNode"
+                                style="width: 100%"
+                            />
+                        </el-form-item>
+                        <el-form-item label="上级节点" v-else>
+                            <el-input
+                                style="width: 100%"
+                                disabled
+                                v-model="addFormParams.label"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="分类名称" prop="contentName">
+                            <el-input
+                                style="width: 100%"
+                                v-model="addFormParams.contentName"
+                                placeholder="请输入"
+                                clearable
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="分类号" prop="sort">
+                            <el-input-number
+                                style="width: 100%"
+                                v-model="addFormParams.sort"
+                                placeholder="请输入"
+                                clearable
+                                :min="0"
+                                :precision="0"
+                                controls-position="right"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button
+                    size="small"
+                    type="primary"
+                    style="color: #fff"
+                    @click="onSubmit"
+                    >确 定</el-button
+                >
+                <el-button size="small" @click="onCancel">取 消</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog
+            :visible.sync="dialogVisible"
+            v-if="dialogVisible"
+            width="50%"
+            :close-on-click-modal="false"
+            v-loading="loading"
+            :title="title"
+        >
+            <el-form
+                label-width="120px"
+                :model="addFormDetails"
+                :rules="addFormDetailsRules"
+                ref="formDetails"
+                :disabled="isView"
+            >
+                <el-form-item label="所属案卷" prop="parentName">
+                    <el-input
+                        v-model="addFormDetails.parentName"
+                        placeholder="请输入所属案卷"
+                        disabled
+                    />
+                </el-form-item>
+                <el-form-item label="文件题名" prop="contentName">
+                    <el-input
+                        v-model="addFormDetails.contentName"
+                        placeholder="请输入文件题名"
+                        maxlength="100"
+                    />
+                </el-form-item>
+                <el-form-item label="保管期限" prop="term">
+                    <el-input
+                        v-model="addFormDetails.term"
+                        placeholder="请输入保管期限"
+                        maxlength="100"
+                    />
+                </el-form-item>
+                <el-form-item label="归档责任单位" prop="unitName">
+                    <el-input
+                        v-model="addFormDetails.unitName"
+                        placeholder="请输入归档责任单位"
+                        maxlength="100"
+                    />
+                </el-form-item>
+                <el-form-item label="所属专业" prop="major">
+                    <el-input
+                        v-model="addFormDetails.major"
+                        placeholder="请输入所属专业"
+                        maxlength="100"
+                    />
+                </el-form-item>
+                <el-form-item label="档案标识代码" prop="markCode">
+                    <el-select
+                        v-model="addFormDetails.markCode"
+                        placeholder="请选择档案标识代码"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in markCodeList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="文件分类标记" prop="classifyMark">
+                    <el-select
+                        v-model="addFormDetails.classifyMark"
+                        placeholder="请选择文件分类标记"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in classifyMarkList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button
+                    v-if="!isView"
+                    size="small"
+                    type="primary"
+                    style="color: #fff"
+                    @click="submitForm"
+                    >确 定</el-button
+                >
+                <el-button size="small" @click="dialogVisible = false">{{
+                    isView ? '关 闭' : '取 消'
+                }}</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import {
+    getArchivalCatalogueTreeApi,
+    addArchiveApi,
+    putArchiveApi,
+    delArchiveApi,
+    getArchivalCatalogueByIdApi,
+    getArchivalCatalogueListApi,
+} from '@/api/archivesManagement'
+
+export default {
+    name: 'ArchCatalogue',
+    components: { Treeselect },
+    data() {
+        return {
+            // 遮罩层
+            loading: false,
+            isSubmit: false,
+            // 显示搜索条件
+            showSearch: true,
+            // 类型名称
+            contentName: undefined,
+            // 树选项
+            treeOptions: [],
+            //列表数据
+            typeList: [],
+            total: 0,
+            parentId: undefined,
+            defaultProps: {
+                children: 'children',
+                label: 'contentName',
+            },
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                parentId: null,
+                contentName: null,
+            },
+            // 弹框参数
+            isAdd: true,
+            isView: false,
+            addFormDetails: {
+                parentId: '', // 所属案卷id
+                parentName: '', // 所属案卷
+                level: 4,
+                contentName: '', // 文件题名
+                term: '', // 保管期限
+                unitName: '', // 归档责任单位
+                major: '', // 所属专业
+                markCode: '', // 档案标识代码
+                classifyMark: '', // 文件分类标记
+            },
+            addFormDetailsRules: {
+                contentName: [
+                    {
+                        required: true,
+                        message: '请输入文件题名',
+                        trigger: 'blur',
+                    },
+                ],
+                term: [
+                    {
+                        required: true,
+                        message: '请输入保管期限',
+                        trigger: 'blur',
+                    },
+                ],
+                unitName: [
+                    {
+                        required: true,
+                        message: '请选择归档责任单位',
+                        trigger: 'change',
+                    },
+                ],
+                major: [
+                    {
+                        required: true,
+                        message: '请输入所属专业',
+                        trigger: 'change',
+                    },
+                ],
+            },
+            markCodeList: [],
+            classifyMarkList: [],
+            title: '', // 弹出层标题
+            dialogVisible: false,
+            /* 新增弹框等数据源定义 */
+            isNew: false,
+            addTitleVisible: false,
+            addTitle: '', // 新增弹框标题
+            addFormParams: {
+                label: '',
+                contentName: '',
+                sort: '',
+            },
+            addFormParamsRules: {
+                nodeId: [
+                    {
+                        required: true,
+                        message: '上级节点不能为空',
+                        trigger: 'change',
+                    },
+                ],
+                contentName: [
+                    {
+                        required: true,
+                        message: '名称不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                sort: [
+                    {
+                        required: true,
+                        message: '分类号不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+            isMousemoveId: null,
+            nodeId: null,
+            nodeName: null,
+        }
+    },
+    watch: {
+        // 根据名称筛选部门树
+        contentName(val) {
+            this.$refs.tree.filter(val)
+        },
+    },
+    created() {
+        this.getTreeData()
+    },
+    methods: {
+        selectNode(data) {
+            console.log('🚀 ~ selectNode ~ data:', data)
+            this.addFormParams.level = data.level + 1
+            this.addFormParams.parentId = data.id
+        },
+        normalizer(node) {
+            console.log('🚀 ~ normalizer ~ node:', node)
+            if (node.children && !node.children.length) {
+                delete node.children
+            }
+            return {
+                id: node.id,
+                label: node.contentName,
+                children: node.children,
+            }
+        },
+        /** 查询新增页面-上级类型下拉树结构 */
+        getTreeData() {
+            getArchivalCatalogueTreeApi().then((response) => {
+                this.treeOptions = response.data
+                console.log(
+                    '🚀 ~ getTreeData ~ this.treeOptions:',
+                    this.treeOptions,
+                )
+            })
+        },
+        /** 查询列表 */
+        getList() {
+            this.loading = true
+            console.log('🚀 ~ getList ~ this.queryParams:', this.queryParams)
+            getArchivalCatalogueListApi(this.queryParams)
+                .then((res) => {
+                    this.loading = false
+                    if (!res.rows) return
+                    this.typeList = res.rows || []
+                    this.total = res.total || 0
+                })
+                .catch(() => {
+                    this.loading = false
+                })
+        },
+        // 筛选节点 - 左侧树
+        filterNode(value, data) {
+            if (!value) return true
+            return data.contentName.indexOf(value) !== -1
+        },
+        // 节点单击事件 - 左侧树
+        async handleNodeClick(data, node) {
+            console.log('🚀 ~ handleNodeClick ~ data:', data)
+            this.nodeId = data.level == 3 ? data.id : null
+            this.nodeName = data.level == 3 ? data.contentName : null
+            this.queryParams.parentId = data.level == 3 ? data.id : null
+
+            if (data.level == 3) {
+                this.getList()
+            }
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.getList()
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm('queryForm')
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.getList()
+        },
+        //查看
+        handleView(row) {
+            this.isAdd = false
+            this.isView = true
+            console.log('🚀 ~ handleView ~ row:', row)
+            this.dialogVisible = true
+            this.title = '查看卷内文件'
+            setTimeout(() => {
+                this.$refs.formDetails.resetFields()
+                this.getInfo(row.id)
+            }, 300)
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.isAdd = true
+            this.isView = false
+            this.dialogVisible = true
+            this.title = '新增卷内文件'
+            setTimeout(() => {
+                this.$refs.formDetails.resetFields()
+                this.addFormDetails.parentId = this.nodeId
+                this.addFormDetails.parentName = this.nodeName
+                console.log('🚀 ~ parentName:', this.addFormDetails.parentName)
+            }, 300)
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            console.log('🚀 ~ handleUpdate ~ row:', row)
+            this.isAdd = false
+            this.isView = false
+            this.dialogVisible = true
+            this.title = '修改卷内文件'
+            setTimeout(() => {
+                this.$refs.formDetails.resetFields()
+                this.getInfo(row.id)
+            }, 300)
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            this.$modal
+                .confirm('是否确认删除数据项？')
+                .then(async () => {
+                    try {
+                        this.isLoading = true
+                        await delArchiveApi({ id: row.id })
+                        this.$modal.msgSuccess('删除成功')
+                    } catch (error) {
+                        console.log('🚀 ~ handleDelete ~ error:', error)
+                    } finally {
+                        this.isLoading = false
+                        this.getList()
+                    }
+                })
+                .catch(() => {})
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs['formDetails'].validate(async (valid) => {
+                if (!valid) return
+                try {
+                    if (this.isSubmit) return
+                    this.isSubmit = true
+                    this.isLoading = true
+                    const params = { ...this.addFormDetails }
+                    console.log('🚀 ~ submitForm ~ params:', params)
+                    if (this.isAdd) {
+                        await addArchiveApi(params)
+                    } else {
+                        await putArchiveApi(params)
+                    }
+
+                    this.$message({
+                        message: '添加成功',
+                        type: 'success',
+                    })
+                } catch (error) {
+                    console.log('🚀 ~ submitForm ~ error:', error)
+                } finally {
+                    this.isLoading = false
+                    this.isSubmit = false
+                    this.dialogVisible = false
+                    this.getList()
+                }
+            })
+        },
+        /** 导出按钮作 */
+        handleExport() {
+            const formatTime = (date) => {
+                const year = date.getFullYear()
+                const month = String(date.getMonth() + 1).padStart(2, '0')
+                const day = String(date.getDate()).padStart(2, '0')
+                const hours = String(date.getHours()).padStart(2, '0')
+                const minutes = String(date.getMinutes()).padStart(2, '0')
+                const seconds = String(date.getSeconds()).padStart(2, '0')
+                return `${year}${month}${day}_${hours}${minutes}${seconds}`
+            }
+
+            const currentTime = formatTime(new Date())
+            let queryTemp = this.queryParams
+            // queryTemp.level = 0;
+            this.download(
+                '/export',
+                {
+                    ...queryTemp,
+                },
+                `导出_${currentTime}.xlsx`,
+            )
+        },
+        async getInfo(id) {
+            try {
+                const { data } = await getArchivalCatalogueByIdApi({ id })
+                this.addFormParams = { ...data }
+                this.addFormParams.label = data.parentName
+                this.addFormDetails = { ...data }
+            } catch (error) {
+                console.log('🚀 ~ getInfo ~ error:', error)
+            }
+        },
+        handleAddNewNode() {
+            this.isNew = true
+            this.addFormParams = {
+                label: '',
+                contentName: '',
+                sort: '',
+                nodeId: null,
+            }
+            this.addTitle = '新增分类'
+            this.addTitleVisible = true
+        },
+        /* 树节点增加 */
+        appendTreeNode(data) {
+            console.log('dataAdd', data)
+            this.isNew = false
+            this.addFormParams.sort = null
+            this.addFormParams.contentName = ''
+            this.addFormParams.nodeId = data.id
+            this.addFormParams.level = data.level + 1
+            this.addFormParams.parentId = data.id
+            this.addFormParams.label = data.contentName || ''
+            console.log(
+                '🚀 ~ appendTreeNode ~ this.addFormParams:',
+                this.addFormParams,
+            )
+            this.addTitle = '新增分类'
+            this.addTitleVisible = true
+        },
+        /* 树节点修改 */
+        editTreeNode(data) {
+            this.isNew = false
+            this.addTitle = '修改分类'
+            this.addTitleVisible = true
+            this.getInfo(data.id)
+        },
+        /* 树节点删除 */
+        removeTreeNode(data) {
+            console.log('🚀 ~ removeTreeNode ~ data:', data)
+            this.$modal
+                .confirm('是否确认删除数据项？')
+                .then(function () {
+                    return delArchiveApi({ id: data.id })
+                })
+                .then(() => {
+                    this.$modal.msgSuccess('删除成功')
+                    this.getTreeData()
+                })
+                .catch(() => {})
+        },
+        /* 确定 */
+        onSubmit() {
+            console.log(
+                '🚀 ~ onSubmit ~ this.addFormParams:',
+                this.addFormParams,
+            )
+
+            const params = {
+                id: this.addFormParams.id || '',
+                parentId: this.addFormParams.parentId,
+                contentName: this.addFormParams.contentName,
+                sort: this.addFormParams.sort,
+                level: this.addFormParams.level,
+            }
+
+            this.$refs['addFormParamsRef'].validate(async (valid) => {
+                if (valid) {
+                    try {
+                        if (this.isSubmit) return
+                        this.isSubmit = true
+                        this.isLoading = true
+                        if (this.addTitle === '新增分类') {
+                            await addArchiveApi(params)
+                            this.$message.success('新增成功！')
+                        } else {
+                            await putArchiveApi(params)
+                            this.$message.success('修改成功！')
+                        }
+                    } catch (error) {
+                        console.log('🚀 ~ onSubmit ~ error:', error)
+                    } finally {
+                        this.isLoading = false
+                        this.isSubmit = false
+                        this.addTitleVisible = false
+                        this.getTreeData()
+                        // this.getList()
+                    }
+                }
+            })
+        },
+        /* 取消 */
+        onCancel() {
+            this.addTitleVisible = false
+        },
+        onMousemove(data) {
+            this.isMousemoveId = data.id
+        },
+        onMouseleave() {
+            this.isMousemoveId = null
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+::v-deep.el-table .fixed-width .el-button--mini {
+    width: 60px !important;
+    margin-bottom: 10px;
+}
+
+::v-deep .btn-items .el-button + .el-button {
+    margin-left: 6px;
+}
+
+.btn-items {
+    margin-left: 4px;
+
+    .el-button--text {
+        font-size: 16px;
+    }
+}
+
+::v-deep .el-tree .el-tree-node__expand-icon.expanded {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+}
+
+::v-deep .el-tree .el-icon-caret-right:before {
+    content: '\e783';
+    font-size: 16px;
+}
+
+::v-deep
+    .el-tree
+    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+    content: '\e781';
+    font-size: 16px;
+    color: #1890ff;
+}
+
+::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
+    color: #1890ff !important;
+}
+
+::v-deep .el-tree-node__expand-icon.is-leaf {
+    color: transparent !important;
+}
+
+::v-deep
+    .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background-color: #8decf1;
+}
+
+::v-deep .el-dialog {
+    // 表单标签文字样式
+    .el-form-item__label {
+        font-size: 14px;
+        color: #606266;
+        font-weight: 500;
+        // line-height: 1.5;
+    }
+
+    // 输入框文字样式
+    .el-input__inner {
+        font-size: 14px;
+        color: #303133;
+
+        &::placeholder {
+            font-size: 13px;
+            color: #c0c4cc;
+        }
+    }
+
+    // 单位文字样式
+    span {
+        font-size: 14px;
+        // color: #606266;
+        margin-left: 8px;
+    }
+
+    // 下拉选择框文字样式
+    .el-select {
+        .el-input__inner {
+            font-size: 14px;
+            color: #303133;
+        }
+    }
+
+    // 只读输入框样式
+    .el-input.is-disabled .el-input__inner {
+        background-color: #f5f7fa;
+        border-color: #e4e7ed;
+        color: #606266;
+        cursor: not-allowed;
+    }
+}
+
+// 表格内文字样式
+::v-deep .el-table {
+    font-size: 14px;
+
+    th {
+        font-weight: 500;
+        color: #303133;
+    }
+
+    td {
+        color: #606266;
+    }
+}
+
+// 按钮文字样式
+::v-deep .el-button {
+    font-size: 14px;
+
+    &--text {
+        font-size: 13px;
+    }
+}
+
+// 树节点文字样式
+::v-deep .el-tree-node__label {
+    font-size: 14px;
+    color: #606266;
+}
+
+// 搜索框文字样式
+::v-deep .el-input--small {
+    .el-input__inner {
+        font-size: 13px;
+
+        &::placeholder {
+            font-size: 13px;
+            color: #c0c4cc;
+        }
+    }
+}
+
+::v-deep .el-dialog .el-input__inner {
+    text-align: start !important;
+}
+</style>