gaoluyang
昨天 df1406d0f571972d033dffd6a93fb4b94febeb56
src/views/archiveManagement/index.vue
@@ -4,84 +4,87 @@
      <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"
            placeholder="输入关键字进行搜索"
            size="small"
            clearable
            @input="handleFilter"
              v-model="filterText"
              clearable
              placeholder="输入关键字进行搜索"
              size="small"
              @input="handleFilter"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
              <el-icon>
                <Search/>
              </el-icon>
            </template>
          </el-input>
        </div>
        <div class="tree-container">
          <el-tree
            ref="treeRef"
            :data="treeData"
            :props="props"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            :default-expand-all="false"
            node-key="id"
            @node-click="handleNodeClick"
            class="custom-tree"
              ref="treeRef"
              :data="treeData"
              :default-expand-all="false"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              :props="props"
              class="custom-tree"
              node-key="id"
              @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <div class="tree-node-content" @dblclick="headerDbClick(data)">
                <div class="node-icon">
                  <el-icon
                    v-if="!node.isLeaf"
                    :class="{ expanded: node.expanded }"
                      v-if="!node.isLeaf"
                      :class="{ expanded: node.expanded }"
                  >
                    <Folder />
                    <Folder/>
                  </el-icon>
                  <el-icon v-else>
                    <Document />
                    <Document/>
                  </el-icon>
                </div>
                <div class="node-label">
                  <span v-if="!data.isEdit" class="label-text">{{
                    node.label
                  }}</span>
                      node.label
                    }}</span>
                  <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)
                      v-else
                      :ref="(el) => setInputRef(el, data)"
                      v-model="newName"
                      autofocus
                      class="tree-input"
                      placeholder="请输入节点名称"
                      size="small"
                      @blur="(event) => handleInputBlur(event, data, node)"
                      @keyup.enter="
                      (event) => handleInputBlur(event, data, node)
                    "
                    size="small"
                    class="tree-input"
                    autofocus
                  />
                </div>
                <div class="node-actions" v-show="!data.isEdit">
                <div v-show="!data.isEdit" class="node-actions">
                  <el-button
                    link
                    size="small"
                    @click.stop="append(data)"
                    icon="Plus"
                    title="新增子节点"
                      icon="Plus"
                      link
                      size="small"
                      title="新增子节点"
                      @click.stop="append(data)"
                  ></el-button>
                  <el-button
                    link
                    size="small"
                    @click.stop="remove(node, data)"
                    icon="Delete"
                    title="删除"
                      icon="Delete"
                      link
                      size="small"
                      title="删除"
                      @click.stop="remove(node, data)"
                  ></el-button>
                </div>
              </div>
@@ -92,71 +95,64 @@
    </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
            :icon="Plus"
            type="primary"
            @click="add"
            :disabled="!tableData.length"
            >新增</el-button
          ></el-col
        >
          <el-button
              :disabled="!tableSwitch"
              :icon="Plus"
              type="primary"
              @click="add"
          >新增
          </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"
          :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'"
          :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"
        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([]);
@@ -167,9 +163,9 @@
const treeRef = ref(); // 树组件引用
const total = ref(0); // 总记录数
const columns = [
  { prop: "name", label: "名称", minWidth: 180 },
  { prop: "type", label: "类型", minWidth: 120 },
  { prop: "status", label: "状态", minWidth: 100 },
  {prop: "name", label: "名称", minWidth: 180},
  {prop: "type", label: "类型", minWidth: 120},
  {prop: "status", label: "状态", minWidth: 100},
];
const selectedRows = reactive([]); // 存储选中行数据
const handleSelectionChange = (selection) => {
@@ -192,7 +188,6 @@
};
const submitForm = async (res) => {
  if (res && res.code === 200) {
    ElMessage.success("操作成功");
    // 刷新列表数据
    await getArchiveListData();
  } else {
@@ -201,8 +196,10 @@
}
const centerDialogVisible = (val) => {
};
const tableSwitch = ref(false);
// 处理节点点击
const handleNodeClick = async (data) => {
const handleNodeClick = (data) => {
  tableSwitch.value = true;
  // 切换节点时重置到第一页
  queryParams.current = 1;
  queryParams.treeId = data.id;
@@ -217,7 +214,7 @@
  archiveDialogs.value.initForm(); // 重置表单
};
// 处理分页变化
const handlePageChange = ({ page }) => {
const handlePageChange = ({page}) => {
  queryParams.current = page;
  // pageSize 固定为20,不再从参数中获取
  getArchiveListData();
@@ -238,7 +235,6 @@
      total.value = 0;
      return;
    }
    tableData.value = res.data?.records || res.data || [];
    total.value = res.data?.total || 0;
    // 确保分页参数正确更新
@@ -262,7 +258,7 @@
  }
  try {
    const ids = selectedRows.map((row) => row.id);
    const { code, msg } = await delArchive(ids);
    const {code, msg} = await delArchive(ids);
    if (code !== 200) {
      ElMessage.warning("删除失败: " + msg);
    } else {
@@ -303,6 +299,7 @@
// 处理输入框失焦
const handleInputBlur = async (event, comeTreeData, node) => {
  if (!comeTreeData.isEdit) return; // 如果不是编辑状态,直接返回
  console.log("handleInputBlur", event, comeTreeData, node);
  if (event.relatedTarget && event.relatedTarget.tagName === "BUTTON") {
    return;
  }
@@ -344,7 +341,7 @@
  if (!data || !data.id) {
    return;
  }
  let { code, msg } = await delTree([data.id]);
  let {code, msg} = await delTree([data.id]);
  if (code !== 200) {
    ElMessage.warning("删除失败, " + msg);
  } else {
@@ -378,9 +375,9 @@
    const isExpanded = node?.expanded; // 如果有子级且未展开,先展开节点
    if (hasChildren && !isExpanded) {
      if (
        treeRef.value &&
        treeRef.value.store &&
        treeRef.value.store.nodesMap[nodeKey]
          treeRef.value &&
          treeRef.value.store &&
          treeRef.value.store.nodesMap[nodeKey]
      ) {
        treeRef.value.store.nodesMap[nodeKey].expanded = true;
      }
@@ -439,7 +436,7 @@
  }
};
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
@@ -630,11 +627,13 @@
    }
  }
}
.el-card {
  width: calc(100% - 40px);
  height: calc(100vh - 130px);
  margin: 20px;
  box-sizing: border-box;
  .left {
    width: 30%;
    height: calc(100vh - 160px);
@@ -651,13 +650,15 @@
      flex-direction: column;
    }
  }
  .right {
    width: 70%;
    height: calc(100vh - 160px);
    padding: 0px 10px;
    padding: 0 10px;
    float: left;
  }
}
.archive-management-card {
  margin: 0;
}