From ffc421d4676db1424d571d8b45dd9c86b84e3bda Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期二, 24 六月 2025 13:56:55 +0800
Subject: [PATCH] 在上传是 过滤掉pnpm配置文件
---
src/views/archiveManagement/index.vue | 315 ++++++++++++++++++++++++++++++++++------------------
1 files changed, 205 insertions(+), 110 deletions(-)
diff --git a/src/views/archiveManagement/index.vue b/src/views/archiveManagement/index.vue
index 139b1e2..28a4d06 100644
--- a/src/views/archiveManagement/index.vue
+++ b/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,48 +95,65 @@
</div>
<div class="right">
<el-row :gutter="24">
- <el-col :span="2" :offset="20"><el-button :icon="Delete" type="danger">鍒犻櫎</el-button></el-col>
- <el-col :span="2"><el-button :icon="Plus" type="primary">鏂板</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
+ :disabled="!tableSwitch"
+ :icon="Plus"
+ type="primary"
+ @click="add"
+ >鏂板
+ </el-button
+ >
+ </el-col
+ >
</el-row>
<ETable
- :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-size="10"
- :page-count="Math.ceil(total / 10)"
- @page-change="currentPageChange"
+ :layout="'total, prev, pager, next, jumper'"
+ :limit="queryParams.pageSize"
+ :page="queryParams.current"
+ :show-total="true"
+ :total="total"
+ @pagination="handlePageChange"
></Pagination>
</div>
+ <archiveDialog
+ ref="archiveDialogs"
+ v-model:centerDialogVisible="dialogVisible"
+ :row="row"
+ @centerDialogVisible="centerDialogVisible"
+ @submitForm="submitForm"
+
+ >
+ </archiveDialog>
</el-card>
</template>
<script setup>
-import { onMounted, ref, nextTick } from "vue";
+import {nextTick, onMounted, reactive, ref} from "vue";
import ETable from "@/components/Table/ETable.vue";
-import { ElButton, ElInput, ElIcon } 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 treeData = ref([]);
@@ -142,35 +162,113 @@
const filterText = ref(""); // 鎼滅储鍏抽敭瀛�
const treeRef = ref(); // 鏍戠粍浠跺紩鐢�
const total = ref(0); // 鎬昏褰曟暟
-const current = ref(1); // 褰撳墠椤电爜
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) => {
- console.log("Selected rows:", selection);
+ selectedRows.splice(0, selectedRows.length, ...selection);
};
-
+const queryParams = reactive({
+ searchAll: "",
+ current: 1,
+ pageSize: 10, // 鍥哄畾姣忛〉10鏉�
+ treeId: null, // 褰撳墠鏍戣妭鐐笽D
+});
// 鎼滅储杩囨护鍔熻兘
const handleFilter = () => {
treeRef.value?.filter(filterText.value);
};
-
+const row = ref({}); // 褰撳墠閫変腑琛屾暟鎹�
const filterNode = (value, data) => {
if (!value) return true;
return data.name?.toLowerCase().includes(value.toLowerCase());
};
-
-// 澶勭悊鑺傜偣鐐瑰嚮
-const handleNodeClick = async (data) => {
- console.log("鐐瑰嚮鑺傜偣:", data);
- let res = await getArchiveList(data.id);
- tableData.value = res.data?.records || res.data || [];
- console.log(data)
+const submitForm = async (res) => {
+ if (res && res.code === 200) {
+ // 鍒锋柊鍒楄〃鏁版嵁
+ await getArchiveListData();
+ } else {
+ ElMessage.error("鎿嶄綔澶辫触: " + (res?.message || "鏈煡閿欒"));
+ }
+}
+const centerDialogVisible = (val) => {
};
-const currentPageChange = (id) => {
- console.log(id);
+const tableSwitch = ref(false);
+// 澶勭悊鑺傜偣鐐瑰嚮
+const handleNodeClick = (data) => {
+ tableSwitch.value = true;
+ // 鍒囨崲鑺傜偣鏃堕噸缃埌绗竴椤�
+ queryParams.current = 1;
+ queryParams.treeId = data.id;
+ getArchiveListData();
+};
+const archiveDialogs = ref(null); // 琛ㄦ牸缁勪欢寮曠敤
+// add
+const add = () => {
+ row.value = {}; // 娓呯┖琛屾暟鎹紝纭繚鏄柊澧炴ā寮�
+ dialogVisible.value = true;
+ newName.value = ""; // 娓呯┖杈撳叆妗�
+ archiveDialogs.value.initForm(); // 閲嶇疆琛ㄥ崟
+};
+// 澶勭悊鍒嗛〉鍙樺寲
+const handlePageChange = ({page}) => {
+ queryParams.current = page;
+ // pageSize 鍥哄畾涓�20锛屼笉鍐嶄粠鍙傛暟涓幏鍙�
+ getArchiveListData();
+};
+
+const getArchiveListData = async () => {
+ try {
+ loading.value = true;
+ let res = await getArchiveList({
+ treeId: queryParams.treeId,
+ current: queryParams.current,
+ size: queryParams.pageSize,
+ });
+
+ if (res.code !== 200) {
+ ElMessage.error("鑾峰彇鏁版嵁澶辫触: " + res.message);
+ tableData.value = [];
+ total.value = 0;
+ return;
+ }
+ tableData.value = res.data?.records || res.data || [];
+ total.value = res.data?.total || 0;
+ // 纭繚鍒嗛〉鍙傛暟姝ｇ‘鏇存柊
+ if (res.data?.current) {
+ queryParams.current = res.data.current;
+ }
+ // pageSize 鍥哄畾涓�20锛屼笉浠庡悗绔幏鍙�
+
+ } catch (error) {
+ ElMessage.error("鑾峰彇鏁版嵁澶辫触");
+ tableData.value = [];
+ total.value = 0;
+ } finally {
+ loading.value = false;
+ }
+};
+const delHandler = async () => {
+ if (selectedRows.length === 0) {
+ ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+ return;
+ }
+ try {
+ const ids = selectedRows.map((row) => row.id);
+ const {code, msg} = await delArchive(ids);
+ if (code !== 200) {
+ ElMessage.warning("鍒犻櫎澶辫触: " + msg);
+ } else {
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ // 鍒犻櫎鎴愬姛鍚庨噸鏂拌幏鍙栨暟鎹�
+ await getArchiveListData();
+ }
+ } catch (error) {
+ ElMessage.error("鍒犻櫎褰掓。澶辫触");
+ }
};
// 鍙屽嚮缂栬緫鑺傜偣
const headerDbClick = (comeTreeData) => {
@@ -201,17 +299,16 @@
// 澶勭悊杈撳叆妗嗗け鐒�
const handleInputBlur = async (event, comeTreeData, node) => {
if (!comeTreeData.isEdit) return; // 濡傛灉涓嶆槸缂栬緫鐘舵�侊紝鐩存帴杩斿洖
+ console.log("handleInputBlur", event, comeTreeData, node);
if (event.relatedTarget && event.relatedTarget.tagName === "BUTTON") {
return;
}
comeTreeData.isEdit = false;
const newValue = newName.value.trim();
if (comeTreeData.name === newValue) {
- console.log("娌℃湁淇敼鍐呭");
return;
}
if (newValue === "") {
- console.warn("杈撳叆涓嶈兘涓虹┖");
newName.value = comeTreeData.name || "鏂拌妭鐐�";
return;
}
@@ -227,10 +324,8 @@
parentId: parentId || null, // 濡傛灉娌℃湁鐖惰妭鐐癸紝鍒欎负 null
});
} catch (error) {
- console.error("瀛樺偍澶辫触", error);
comeTreeData.name = comeTreeData.name || "鏂拌妭鐐�";
}
- console.log("淇濆瓨鎴愬姛:", newValue);
};
onMounted(async () => {
@@ -243,13 +338,10 @@
};
const remove = async (node, data) => {
- console.log("鍒犻櫎鑺傜偣:", data);
if (!data || !data.id) {
- console.warn("鏃犳硶鍒犻櫎鏈畾涔夋垨鏃犳晥鐨勮妭鐐�");
return;
}
- console.log("鍒犻櫎鑺傜偣 ID:", data.id);
- let { code, msg } = await delTree([data.id]);
+ let {code, msg} = await delTree([data.id]);
if (code !== 200) {
ElMessage.warning("鍒犻櫎澶辫触, " + msg);
} else {
@@ -261,7 +353,6 @@
const append = async (data) => {
if (data === "") {
// 鏂板鏍硅妭鐐�
- console.log("鏂板鏍硅妭鐐�");
const newNode = {
id: Date.now(),
name: "鏂拌妭鐐�",
@@ -283,16 +374,14 @@
const node = treeRef.value?.getNode(nodeKey);
const isExpanded = node?.expanded; // 濡傛灉鏈夊瓙绾т笖鏈睍寮�锛屽厛灞曞紑鑺傜偣
if (hasChildren && !isExpanded) {
- console.log(treeRef.value, "灞曞紑鑺傜偣", nodeKey);
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;
}
}
-
const newNode = {
id: Date.now(),
name: "鏂板瓙鑺傜偣",
@@ -327,7 +416,11 @@
}
};
-const handleEdit = () => {};
+const handleEdit = (rows) => {
+ row.value = rows;
+ dialogVisible.value = true;
+ archiveDialogs.value.editForm(rows); // 璋冪敤缂栬緫鏂规硶
+};
// 绉婚櫎鎳掑姞杞斤紝鐩存帴鑾峰彇鏁版嵁
const getList = async () => {
@@ -336,16 +429,14 @@
if (res.code === 200) {
treeData.value = res.data?.records || res.data || [];
} else {
- console.error("Failed to fetch tree data:", res.message);
treeData.value = [];
}
} catch (error) {
- console.error("鑾峰彇鏍戝舰鏁版嵁澶辫触:", error);
treeData.value = [];
}
};
</script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
.custom-tree-node {
flex: 1;
display: flex;
@@ -536,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);
@@ -557,14 +650,16 @@
flex-direction: column;
}
}
+
.right {
width: 70%;
height: calc(100vh - 160px);
- padding: 0px 10px;
+ padding: 0 10px;
float: left;
}
}
-.archive-management-card{
+
+.archive-management-card {
margin: 0;
}
</style>
--
Gitblit v1.9.3