From b424a29a5140670d3635428806f6658ee0188722 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Mon, 8 Sep 2025 18:07:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E7=9B=AE=E5=BD=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../archClass/archCatalogue/index.vue         | 992 ++++++++++++++++++
 .../fileClassificationTags/index.vue          | 368 +++++++
 2 files changed, 1360 insertions(+)
 create mode 100644 src/views/archivesManagement/archClass/archCatalogue/index.vue
 create mode 100644 src/views/archivesManagement/archClass/fileClassificationTags/index.vue

diff --git a/src/views/archivesManagement/archClass/archCatalogue/index.vue b/src/views/archivesManagement/archClass/archCatalogue/index.vue
new file mode 100644
index 0000000..ef247ae
--- /dev/null
+++ b/src/views/archivesManagement/archClass/archCatalogue/index.vue
@@ -0,0 +1,992 @@
+<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="typeName"
+                        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 < 4"
+                                    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"
+                >
+                    <el-form-item label="" prop="keyword">
+                        <el-input
+                            v-model="queryParams.keyword"
+                            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="fileName"
+                        prop="fileName"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="案卷期限"
+                        align="center"
+                        key="filePeriod"
+                        prop="filePeriod"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="档案标识代码"
+                        align="center"
+                        key="fileCode"
+                        prop="fileCode"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="所属专业"
+                        align="center"
+                        key="filePro"
+                        prop="filePro"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="文件分类标记"
+                        align="center"
+                        key="fileCategory"
+                        prop="fileCategory"
+                        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="typeName">
+                            <el-input
+                                style="width: 100%"
+                                v-model="addFormParams.typeName"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="分类号" prop="classNumber">
+                            <el-input
+                                style="width: 100%"
+                                v-model="addFormParams.classNumber"
+                            />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row style="text-align: right">
+                    <el-form-item>
+                        <el-button
+                            size="small"
+                            type="primary"
+                            style="color: #fff"
+                            @click="onSubmit"
+                            >确 定</el-button
+                        >
+                        <el-button size="small" @click="onCancel"
+                            >取 消</el-button
+                        >
+                    </el-form-item>
+                </el-row>
+            </el-form>
+        </el-dialog>
+
+        <el-dialog
+            :visible.sync="dialogVisible"
+            v-if="dialogVisible"
+            width="50%"
+            :close-on-click-modal="false"
+            v-loading="loading"
+        >
+            <el-form
+                label-width="120px"
+                :model="addFormDetails"
+                :rules="addFormParamsRules"
+                ref="formDetails"
+            >
+                <el-form-item label="所属案卷" prop="caseFileName">
+                    <el-input
+                        v-model="addFormDetails.caseFileName"
+                        placeholder="请输入所属案卷"
+                        disabled
+                    />
+                </el-form-item>
+                <el-form-item label="文件题名" prop="fileName">
+                    <el-input
+                        v-model="addFormDetails.fileName"
+                        placeholder="请输入文件题名"
+                        maxlength="100"
+                    />
+                </el-form-item>
+                <el-form-item label="保管期限" prop="filePeriod">
+                    <el-input
+                        v-model="addFormDetails.filePeriod"
+                        placeholder="请输入保管期限"
+                        maxlength="100"
+                    />
+                </el-form-item>
+                <el-form-item label="归档责任单位" prop="archiveUnit">
+                    <el-input
+                        v-model="addFormDetails.archiveUnit"
+                        placeholder="请输入归档责任单位"
+                        maxlength="100"
+                    />
+                </el-form-item>
+                <el-form-item label="所属专业" prop="filePro">
+                    <el-input
+                        v-model="addFormDetails.filePro"
+                        placeholder="请输入所属专业"
+                        maxlength="100"
+                    />
+                </el-form-item>
+                <el-form-item label="档案标识代码" prop="fileCode">
+                    <el-select
+                        v-model="addFormDetails.fileCode"
+                        placeholder="请选择档案标识代码"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in fileCodeList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="文件分类标记" prop="fileCategory">
+                    <el-select
+                        v-model="addFormDetails.fileCategory"
+                        placeholder="请选择文件分类标记"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in fileCategoryList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+export default {
+    name: 'Type',
+    components: { Treeselect },
+    data() {
+        return {
+            // 遮罩层
+            loading: false,
+            // 显示搜索条件
+            showSearch: true,
+            // 类型名称
+            typeName: undefined,
+            // 树选项
+            treeOptions: [
+                {
+                    id: 0,
+                    label: '全部',
+                    children: [
+                        {
+                            id: 1,
+                            label: '一级分类',
+                            children: [
+                                {
+                                    id: 11,
+                                    label: '二级分类',
+                                    children: [
+                                        {
+                                            id: 111,
+                                            label: '三级分类',
+                                            level: 3,
+                                            children: [
+                                                {
+                                                    id: 1111,
+                                                    label: '四级分类',
+                                                    level: 4,
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                    level: 2,
+                                },
+                            ],
+                            level: 1,
+                        },
+                    ],
+                    level: 0,
+                },
+            ],
+            //列表数据
+            typeList: [
+                {
+                    id: 1,
+                    fileName: '文件名称1',
+                    filePeriod: '2020-2025',
+                    fileType: 'pdf',
+                    fileCode: 'A123456',
+                    filePro: '土建',
+                    fileCategory: '合同类',
+                },
+            ],
+            total: 0,
+            levelTemp: undefined,
+            idTemp: undefined,
+            parentId: undefined,
+            defaultProps: {
+                children: 'children',
+                label: 'label',
+            },
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                typeName: undefined,
+                level: 0,
+            },
+            // 弹框参数
+            isAdd: true,
+            isView: false,
+            addFormDetails: {
+                caseFileId: '', // 所属案卷
+                caseFileName: '', // 所属案卷
+                fileName: '', // 文件提名
+                filePeriod: '', // 保管期限
+                archiveUnit: '', // 归档责任单位
+                filePro: '', // 所属专业
+                fileCode: '', // 档案标识代码
+                fileCategory: '', // 文件分类标记
+            },
+            fileCodeList: [
+                { label: '普通文件', value: 1 },
+                { label: '照片', value: 2 },
+            ],
+            fileCategoryList: [
+                { label: '合同类', value: 1 },
+                { label: '归档类', value: 2 },
+            ],
+            title: '', // 弹出层标题
+            dialogVisible: false,
+            /* 新增弹框等数据源定义 */
+            isNew: false,
+            addTitleVisible: false,
+            addTitle: '', // 新增弹框标题
+            addFormParams: {
+                label: '',
+                typeName: '',
+                classNumber: '',
+                keeperUserId: '',
+            },
+            addFormParamsRules: {
+                nodeId: [
+                    {
+                        required: true,
+                        message: '上级节点不能为空',
+                        trigger: 'change',
+                    },
+                ],
+                typeName: [
+                    {
+                        required: true,
+                        message: '名称不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+                classNumber: [
+                    {
+                        required: true,
+                        message: '分类号不能为空',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+            isMousemoveId: null,
+            nodeId: null,
+            nodeName: null,
+        }
+    },
+    watch: {
+        // 根据名称筛选部门树
+        typeName(val) {
+            this.$refs.tree.filter(val)
+        },
+    },
+    created() {
+        // this.getTreeData()
+        // this.getKeeperData()
+        // this.getRepairerData()
+        // this.getList()
+    },
+    methods: {
+        selectNode(value) {
+            console.log('选中节点--', value)
+            this.levelTemp = value.level
+            this.idTemp = value.id
+            this.parentId = value.parentId || null
+        },
+        normalizer(node) {
+            if (node.children && !node.children.length) {
+                delete node.children
+            }
+            return {
+                id: node.id,
+                label: node.label,
+                children: node.children,
+            }
+        },
+        /** 查询新增页面-上级类型下拉树结构 */
+        getTreeData() {
+            getMaTypeList().then((response) => {
+                this.treeOptions = response.data
+                console.log(this.treeOptions)
+                if (this.treeOptions.length > 0) {
+                    if (
+                        this.treeOptions[0].children &&
+                        this.treeOptions[0].children.length > 0
+                    ) {
+                        const firstNode = this.treeOptions[0].children[0]
+                        this.queryParams.typeId = firstNode.id
+                        this.queryParams.level = 1
+                        this.queryParams.houseId = firstNode.houseId
+                        this.getList()
+                    } else {
+                        this.queryParams.typeId = this.treeOptions[0].id
+                        this.queryParams.level = 0
+                        this.queryParams.houseId = this.treeOptions[0].id
+                        this.getList()
+                    }
+                }
+            })
+        },
+        /** 查询列表 */
+        getList() {
+            this.loading = true
+            getListByMaType(this.queryParams).then((response) => {
+                if (
+                    response.code === 200 &&
+                    response.data &&
+                    response.data.rows
+                ) {
+                    this.typeList = response.data.rows
+                    this.total = response.data.total
+                }
+                this.loading = false
+            })
+        },
+        // 筛选节点 - 左侧树
+        filterNode(value, data) {
+            if (!value) return true
+            return data.label.indexOf(value) !== -1
+        },
+        // 节点单击事件 - 左侧树
+        async handleNodeClick(data, node) {
+            console.log('🚀 ~ handleNodeClick ~ data:', data)
+            this.nodeId = data.id
+            this.nodeName = data.label
+            if (data.level == 0) {
+                this.queryParams.typeId = data.id
+                this.queryParams.level = data.level
+                this.queryParams.houseId = data.id
+            } else {
+                this.queryParams.typeId = data.id
+                this.queryParams.level = data.level
+                this.queryParams.houseId = data.houseId
+            }
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            // this.queryParams.pageNum = 1;
+            this.getList()
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm('queryForm')
+            this.queryParams.typeId = undefined
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.queryParams.level = 0
+            // this.$refs.tree.setCurrentKey(null)
+            // this.handleQuery()
+        },
+        //查看
+        handleView(row) {
+            this.isAdd = false
+            this.isView = true
+            console.log('🚀 ~ handleView ~ row:', row)
+            this.dialogVisible = true
+            this.title = '查看卷内文件'
+            setTimeout(() => {
+                this.$refs.formDetails.resetFields()
+                this.addFormDetails = { ...row }
+            }, 300)
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.isAdd = true
+            this.isView = false
+            this.dialogVisible = true
+            this.title = '新增卷内文件'
+            setTimeout(() => {
+                this.$refs.formDetails.resetFields()
+                this.addFormDetails.caseFileId = this.nodeId
+                this.addFormDetails.caseFileName = this.nodeName
+                console.log(
+                    '🚀 ~ caseFileName:',
+                    this.addFormDetails.caseFileName,
+                )
+            }, 300)
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            console.log('🚀 ~ handleUpdate ~ row:', row)
+            this.dialogVisible = true
+            this.title = '修改卷内文件'
+            setTimeout(() => {
+                this.$refs.formDetails.resetFields()
+                this.addFormDetails = { ...row }
+            }, 300)
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const typeId = row.typeId
+            this.$modal
+                .confirm('是否确认删除数据项？')
+                .then(function () {})
+                .then(() => {
+                    this.$modal.msgSuccess('删除成功')
+                    this.getList()
+                })
+                .catch(() => {})
+        },
+        /** 提交按钮 */
+        submitForm() {
+            console.log('提交---')
+            this.$refs['form'].validate((valid) => {
+                if (!valid) return
+            })
+        },
+        /** 导出按钮作 */
+        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`,
+            )
+        },
+        handleAddNewNode() {
+            this.isNew = true
+            this.addFormParams = {
+                label: '',
+                typeName: '',
+                classNumber: '',
+                keeperUserId: '',
+                nodeId: null,
+            }
+            this.addTitle = '新增分类'
+            this.addTitleVisible = true
+        },
+        /* 树节点增加 */
+        appendTreeNode(data) {
+            this.isNew = false
+            this.levelTemp = data.level
+            this.idTemp = data.id
+            console.log('dataAdd', data)
+            Object.assign(this.addFormParams, data)
+            this.addFormParams.typeName = ''
+            this.addTitle = '新增分类'
+            this.addTitleVisible = true
+        },
+        /* 树节点修改 */
+        editTreeNode(data) {
+            this.isNew = false
+            console.log('🚀 ~ editTreeNode ~ data:', data)
+            this.levelTemp = data.level
+            console.log('🚀 ~ editTreeNode ~ this.levelTemp:', this.levelTemp)
+            this.idTemp = data.id
+            this.parentId = data.parentId
+            console.log('data', data)
+            Object.assign(this.addFormParams, data)
+            this.addTitle = '修改分类'
+            this.addFormParams.typeName = data.label
+            this.addTitleVisible = true
+        },
+        /* 树节点删除 */
+        removeTreeNode(data) {
+            // this.$message.success('删除--')
+            console.log(data, '删除时的数据源--')
+            const typeId = data.id
+            this.$modal
+                .confirm('是否确认删除数据项？')
+                .then(function () {
+                    // return delMaType(typeId)
+                })
+                .then(() => {
+                    this.$modal.msgSuccess('删除成功')
+                    this.getTreeData()
+                })
+                .catch(() => {})
+        },
+        /* 确定 */
+        onSubmit() {
+            const { id, typeName, classNumber, keeperUserId } =
+                this.addFormParams
+            console.log('level', this.levelTemp)
+            console.log('idTemp', this.idTemp)
+            const addParams = {
+                parentId: this.levelTemp == 0 ? 0 : this.idTemp,
+                typeName,
+                level: this.levelTemp,
+                houseId: this.levelTemp == 0 ? id : null,
+                classNumber,
+            }
+
+            const editParams = {
+                houseId: id,
+                typeName,
+                level: this.levelTemp,
+                parentId: this.parentId,
+                typeId: id,
+                classNumber,
+                keeperUserId,
+            }
+
+            this.$refs['addFormParamsRef'].validate(async (valid) => {
+                if (valid) {
+                    if (this.addTitle === '新增') {
+                        const res = await addMaType(addParams)
+                        if (res.code === 200) {
+                            this.$message.success('新增成功！')
+                            this.addTitleVisible = false
+                            this.getList()
+                            this.getTreeData()
+                        }
+                    } else {
+                        let res = null
+                        if (this.levelTemp == 0) {
+                            res = await updatePartType(editParams)
+                        } else {
+                            res = await updateMaType(editParams)
+                        }
+                        if (res.code === 200) {
+                            this.$message.success('修改成功！')
+                            this.addTitleVisible = false
+                            this.getList()
+                            this.getTreeData()
+                        }
+                    }
+                }
+            })
+        },
+        /* 取消 */
+        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>
diff --git a/src/views/archivesManagement/archClass/fileClassificationTags/index.vue b/src/views/archivesManagement/archClass/fileClassificationTags/index.vue
new file mode 100644
index 0000000..e7579a3
--- /dev/null
+++ b/src/views/archivesManagement/archClass/fileClassificationTags/index.vue
@@ -0,0 +1,368 @@
+<template>
+    <!-- 基础页面 -->
+    <div class="app-container">
+        <el-form
+            v-show="showSearch"
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            inline
+            @submit.native.prevent
+        >
+            <el-form-item label="" prop="name">
+                <el-input
+                    v-model="queryParams.name"
+                    placeholder="文件分类标记名称"
+                    clearable
+                    @keyup.enter.native="handleQuery"
+                    style="width: 240px"
+                />
+            </el-form-item>
+
+            <!-- 表单按钮 -->
+            <el-form-item>
+                <el-button
+                    type="primary"
+                    icon="el-icon-search"
+                    @click="handleQuery"
+                    >查询</el-button
+                >
+                <el-button icon="el-icon-refresh" @click="handleReset"
+                    >重置</el-button
+                >
+            </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handleDialog(null, 'add')"
+                    >新增</el-button
+                >
+            </el-col>
+            <right-toolbar
+                :showSearch.sync="showSearch"
+                @queryTable="getList"
+            />
+        </el-row>
+
+        <el-table
+            :data="tableList"
+            fit
+            highlight-current-row
+            style="width: 100%"
+            v-loading="isLoading"
+            :max-height="650"
+        >
+            <el-table-column
+                type="index"
+                width="55"
+                label="序号"
+                align="center"
+                :index="
+                    (index) =>
+                        (queryParams.pageNum - 1) * queryParams.pageSize +
+                        index +
+                        1
+                "
+            />
+            <el-table-column
+                v-for="(column, index) in tableColumns"
+                show-overflow-tooltip
+                :key="index"
+                :label="column.label"
+                :prop="column.prop"
+                align="center"
+            />
+            <!-- 操作 -->
+            <el-table-column label="操作" align="center" width="300">
+                <template slot-scope="{ row }">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-edit"
+                        @click="handleDialog(row, 'edit')"
+                    >
+                        编辑
+                    </el-button>
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click="handleDelete(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-dialog
+            :title="dialogTitle"
+            :visible.sync="dialogVisible"
+            width="40%"
+            v-loading="isLoading"
+        >
+            <el-form
+                ref="dialogForm"
+                :model="dialogForm"
+                :rules="dialogRules"
+                label-width=""
+                size="small"
+                @submit.native.prevent
+            >
+                <el-form-item label="文件分类标记名称" prop="fileName">
+                    <el-input
+                        v-model="dialogForm.fileName"
+                        placeholder="请输入"
+                        clearable
+                        maxlength="50"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input
+                        v-model="dialogForm.remark"
+                        placeholder="请输入"
+                        clearable
+                        type="textarea"
+                        :autosize="{ minRows: 2, maxRows: 4 }"
+                        maxlength="200"
+                        show-word-limit
+                        style="width: 100%"
+                    />
+                </el-form-item>
+            </el-form>
+
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">关 闭</el-button>
+                <el-button type="primary" @click="handleSubmit"
+                    >提 交</el-button
+                >
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+// import {
+//     getInventoryLogListApi,
+//     getInventoryLogDetailsApi,
+// } from '@/api/operationsManagement'
+
+export default {
+    data() {
+        return {
+            isLoading: false,
+            showSearch: true,
+            pickerOptions: {
+                disabledDate(time) {
+                    return time.getTime() > Date.now()
+                },
+            },
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                name: '', // 数据类型名称
+            },
+            total: 0, // 总条数
+            // 表头
+            tableColumns: [
+                { label: '文件分类标记名称', prop: 'fileName' },
+                { label: '更新人', prop: 'updater' },
+                { label: '更新时间', prop: 'updateTime' },
+                { label: '备注', prop: 'remark' },
+            ],
+            // 表格数据
+            tableList: [
+                {
+                    id: 1,
+                    fileName: '测试',
+                    updater: '张三',
+                    updateTime: '2024-06-20 12:00:00',
+                    remark: '测试数据',
+                },
+            ],
+            isOut: false, // 是否出库
+            dialogTitle: '详情',
+            dialogVisible: false,
+            dialogForm: {
+                fileName: '',
+                remark: '',
+            },
+            dialogRules: {
+                fileName: [
+                    {
+                        required: true,
+                        message: '请输入文件分类标记名称',
+                        trigger: 'blur',
+                    },
+                ],
+            },
+        }
+    },
+    created() {
+        this.getList()
+    },
+    methods: {
+        // 查询
+        handleQuery() {
+            this.queryParams.pageNum = 1
+            this.getList()
+        },
+        // 重置
+        handleReset() {
+            this.$refs.queryForm.resetFields()
+            this.queryParams.pageNum = 1
+            this.queryParams.pageSize = 10
+            this.getList()
+        },
+        // 获取列表
+        async getList() {
+            console.log('列表-查询', this.queryParams)
+            this.isLoading = true
+            try {
+                const params = {
+                    ...this.queryParams,
+                }
+                console.log('🚀 ~ getList ~ params:', params)
+                // const res = await (params)
+                // console.log('🚀 ~ 获取列表 ~ res:', res)
+                // this.tableList = res.data.rows || []
+                // this.total = res.data.total || 0
+            } catch (error) {
+                console.log('🚀 ~ 获取列表 ~ error:', error)
+                this.tableList = []
+                this.total = 0
+            } finally {
+                this.isLoading = false
+            }
+        },
+        handleDialog(row, type) {
+            console.log('🚀 ~ handleDialog ~ row:', row)
+            this.dialogTitle = type == 'add' ? '新增' : '编辑'
+            this.dialogVisible = true
+            setTimeout(() => {
+                this.$refs.dialogForm.resetFields()
+                if (type == 'edit') {
+                    this.dialogForm.fileName = row.fileName
+                    this.dialogForm.remark = row.remark
+                    this.getDialogInfo()
+                }
+            }, 100)
+        },
+        // 删除
+        handleDelete(row) {
+            console.log('删除', row)
+            this.$confirm('是否确认删除？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(async () => {
+                    try {
+                        if (this.isLoading) return
+                        this.isLoading = true
+                        const params = { id: row.id }
+                        console.log('🚀 ~ handleDelete ~ params:', params)
+                        // const res = await (params)
+                        // console.log('🚀 ~ 删除 ~ res:', res)
+                        this.$message({
+                            type: 'success',
+                            message: '删除成功',
+                        })
+                    } catch (error) {
+                        console.log('🚀 ~ handleDelete ~ error:', error)
+                    } finally {
+                        this.isLoading = false
+                        this.getList()
+                    }
+                })
+                .catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除',
+                    })
+                })
+        },
+        // 获取弹框信息
+        async getDialogInfo() {
+            try {
+                this.isLoading = true
+                const params = { ...this.dialogForm }
+                console.log('🚀 ~ getDialogInfo ~ params:', params)
+                // const res = await (params)
+                // console.log('🚀 ~ 获取弹框信息 ~ res:', res)
+            } catch (error) {
+                console.log('🚀 ~ 获取弹框信息 ~ error:', error)
+            } finally {
+                this.isLoading = false
+            }
+        },
+        // 提交弹框
+        handleSubmit() {
+            this.$refs.dialogForm.validate((valid) => {
+                console.log('🚀 ~ handleSubmit ~ valid:', valid)
+                if (!valid) return
+                try {
+                    if (this.isLoading) return
+                    this.isLoading = true
+                    const params = { ...this.dialogForm }
+                    console.log('🚀 ~ handleSubmit ~ params:', params)
+                } catch (error) {
+                    console.log('🚀 ~ handleSubmit ~ error:', error)
+                } finally {
+                    this.isLoading = false
+                    this.dialogVisible = false
+                    this.getList()
+                }
+            })
+        },
+        // 导出数据
+        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}`
+        },
+        // 导出数据
+        handleExport() {
+            // 提示
+            this.$message({
+                type: 'warning',
+                message: '导出功能开发中，敬请期待！',
+            })
+            try {
+                let fileName = `导出_${this.formatTime(new Date())}.xLsx`
+                let url = '/material/backstage/costPush/exportPushCheck'
+                const params = { ...this.queryParams }
+                console.log('🚀 ~ 导出 ~ params:', params)
+                // this.derive(url, params, fileName)
+                // this.download(url, params, fileName)
+            } catch (error) {
+                console.log('导出数据失败', error)
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped></style>