| | |
| | | <div class="left-content"> |
| | | <div class="tree-header"> |
| | | <h3>文档管理</h3> |
| | | <el-button type="primary" size="small" @click="append('')" icon="Plus" |
| | | >新增</el-button |
| | | <el-button icon="Plus" size="small" type="primary" @click="append('')" |
| | | >新增 |
| | | </el-button |
| | | > |
| | | </div> |
| | | |
| | |
| | | <div class="search-box"> |
| | | <el-input |
| | | v-model="filterText" |
| | | clearable |
| | | placeholder="输入关键字进行搜索" |
| | | size="small" |
| | | clearable |
| | | @input="handleFilter" |
| | | > |
| | | <template #prefix> |
| | | <el-icon><Search /></el-icon> |
| | | <el-icon> |
| | | <Search/> |
| | | </el-icon> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | |
| | | <el-tree |
| | | ref="treeRef" |
| | | :data="treeData" |
| | | :props="props" |
| | | :filter-node-method="filterNode" |
| | | :expand-on-click-node="false" |
| | | :default-expand-all="false" |
| | | :expand-on-click-node="false" |
| | | :filter-node-method="filterNode" |
| | | :props="props" |
| | | class="custom-tree" |
| | | node-key="id" |
| | | @node-click="handleNodeClick" |
| | | class="custom-tree" |
| | | > |
| | | <template #default="{ node, data }"> |
| | | <div class="tree-node-content" @dblclick="headerDbClick(data)"> |
| | |
| | | <el-input |
| | | v-else |
| | | :ref="(el) => setInputRef(el, data)" |
| | | placeholder="请输入节点名称" |
| | | v-model="newName" |
| | | @blur="($event) => handleInputBlur($event, data, node)" |
| | | @keyup.enter=" |
| | | ($event) => handleInputBlur($event, data, node) |
| | | " |
| | | size="small" |
| | | class="tree-input" |
| | | autofocus |
| | | class="tree-input" |
| | | placeholder="请输入节点名称" |
| | | size="small" |
| | | @blur="(event) => handleInputBlur(event, data, node)" |
| | | @keyup.enter=" |
| | | (event) => handleInputBlur(event, data, node) |
| | | " |
| | | /> |
| | | </div> |
| | | <div class="node-actions" v-show="!data.isEdit"> |
| | | <div v-show="!data.isEdit" class="node-actions"> |
| | | <el-button |
| | | icon="Plus" |
| | | link |
| | | size="small" |
| | | @click.stop="append(data)" |
| | | icon="Plus" |
| | | title="新增子节点" |
| | | @click.stop="append(data)" |
| | | ></el-button> |
| | | <el-button |
| | | icon="Delete" |
| | | link |
| | | size="small" |
| | | @click.stop="remove(node, data)" |
| | | icon="Delete" |
| | | title="删除" |
| | | @click.stop="remove(node, data)" |
| | | ></el-button> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="right"> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="2" :offset="20" |
| | | ><el-button :icon="Delete" type="danger" @click="delHandler">删除</el-button></el-col |
| | | <el-col :offset="20" :span="2" |
| | | > |
| | | <el-button :icon="Delete" type="danger" @click="delHandler">删除</el-button> |
| | | </el-col |
| | | > |
| | | <el-col :span="2" |
| | | ><el-button |
| | | > |
| | | <el-button |
| | | :disabled="!tableSwitch" |
| | | :icon="Plus" |
| | | type="primary" |
| | | @click="add" |
| | | :disabled="!tableData.length" |
| | | >新增</el-button |
| | | ></el-col |
| | | >新增 |
| | | </el-button |
| | | > |
| | | </el-col |
| | | > |
| | | </el-row> |
| | | <ETable |
| | | :maxHeight="1200" |
| | | :loading="loading" |
| | | :table-data="tableData" |
| | | :columns="columns" |
| | | @selection-change="handleSelectionChange" |
| | | @edit="handleEdit" |
| | | :show-selection="true" |
| | | :border="true" |
| | | :columns="columns" |
| | | :loading="loading" |
| | | :maxHeight="1200" |
| | | :show-selection="true" |
| | | :table-data="tableData" |
| | | @edit="handleEdit" |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | | </ETable> |
| | | <Pagination |
| | | :total="total" |
| | | :page="queryParams.current" |
| | | :limit="queryParams.pageSize" |
| | | :show-total="true" |
| | | @pagination="handlePageChange" |
| | | :layout="'total, prev, pager, next, jumper'" |
| | | :limit="queryParams.pageSize" |
| | | :page="queryParams.current" |
| | | :show-total="true" |
| | | :total="total" |
| | | @pagination="handlePageChange" |
| | | ></Pagination> |
| | | </div> |
| | | <archiveDialog |
| | | v-model:centerDialogVisible="dialogVisible" |
| | | @centerDialogVisible="centerDialogVisible" |
| | | :row="row" |
| | | @submitForm="submitForm" |
| | | ref="archiveDialogs" |
| | | v-model:centerDialogVisible="dialogVisible" |
| | | :row="row" |
| | | @centerDialogVisible="centerDialogVisible" |
| | | @submitForm="submitForm" |
| | | |
| | | > |
| | | </archiveDialog> |
| | | </el-card> |
| | | </template> |
| | | <script setup> |
| | | import { onMounted, ref, nextTick, reactive } from "vue"; |
| | | import {nextTick, onMounted, reactive, ref} from "vue"; |
| | | import ETable from "@/components/Table/ETable.vue"; |
| | | import { ElButton, ElInput, ElIcon, ElMessage } from "element-plus"; |
| | | import {ElButton, ElIcon, ElInput, ElMessage} from "element-plus"; |
| | | import archiveDialog from "./mould/archiveDialog.vue"; |
| | | import Pagination from "@/components/Pagination/index.vue"; |
| | | import { |
| | | Plus, |
| | | Search, |
| | | Folder, |
| | | Document, |
| | | Delete, |
| | | } from "@element-plus/icons-vue"; |
| | | import { |
| | | getTree, |
| | | addOrEditTree, |
| | | delTree, |
| | | getArchiveList, |
| | | addOrEditArchive, |
| | | delArchive, |
| | | } from "@/api/archiveManagement"; |
| | | import {Delete, Document, Folder, Plus, Search,} from "@element-plus/icons-vue"; |
| | | import {addOrEditTree, delArchive, delTree, getArchiveList, getTree,} from "@/api/archiveManagement"; |
| | | |
| | | const dialogVisible = ref(false); // 控制归档对话框显示 |
| | | const loading = ref(false); |
| | | const tableData = ref([]); |
| | |
| | | }; |
| | | const submitForm = async (res) => { |
| | | if (res && res.code === 200) { |
| | | ElMessage.success("操作成功"); |
| | | // 刷新列表数据 |
| | | await getArchiveListData(); |
| | | } else { |
| | |
| | | } |
| | | const centerDialogVisible = (val) => { |
| | | }; |
| | | const tableSwitch = ref(false); |
| | | // 处理节点点击 |
| | | const handleNodeClick = async (data) => { |
| | | const handleNodeClick = (data) => { |
| | | tableSwitch.value = true; |
| | | // 切换节点时重置到第一页 |
| | | queryParams.current = 1; |
| | | queryParams.treeId = data.id; |
| | |
| | | total.value = 0; |
| | | return; |
| | | } |
| | | |
| | | tableData.value = res.data?.records || res.data || []; |
| | | total.value = res.data?.total || 0; |
| | | // 确保分页参数正确更新 |
| | |
| | | // 处理输入框失焦 |
| | | const handleInputBlur = async (event, comeTreeData, node) => { |
| | | if (!comeTreeData.isEdit) return; // 如果不是编辑状态,直接返回 |
| | | console.log("handleInputBlur", event, comeTreeData, node); |
| | | if (event.relatedTarget && event.relatedTarget.tagName === "BUTTON") { |
| | | return; |
| | | } |
| | |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | <style lang="scss" scoped> |
| | | .custom-tree-node { |
| | | flex: 1; |
| | | display: flex; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-card { |
| | | width: calc(100% - 40px); |
| | | height: calc(100vh - 130px); |
| | | margin: 20px; |
| | | box-sizing: border-box; |
| | | |
| | | .left { |
| | | width: 30%; |
| | | height: calc(100vh - 160px); |
| | |
| | | flex-direction: column; |
| | | } |
| | | } |
| | | |
| | | .right { |
| | | width: 70%; |
| | | height: calc(100vh - 160px); |
| | | padding: 0px 10px; |
| | | padding: 0 10px; |
| | | float: left; |
| | | } |
| | | } |
| | | |
| | | .archive-management-card { |
| | | margin: 0; |
| | | } |