From 6dfb5e44a7072d78ca6c04d21b7ed8ad126b874f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 01 七月 2025 14:05:44 +0800
Subject: [PATCH] 1.巡检管理频次选择逻辑修改
---
src/views/archiveManagement/index.vue | 587 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 402 insertions(+), 185 deletions(-)
diff --git a/src/views/archiveManagement/index.vue b/src/views/archiveManagement/index.vue
index 139b1e2..ac6274d 100644
--- a/src/views/archiveManagement/index.vue
+++ b/src/views/archiveManagement/index.vue
@@ -4,22 +4,24 @@
<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>
@@ -28,16 +30,19 @@
<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)">
+ <div
+ class="tree-node-content"
+ @dblclick="headerDbClick(node, data)"
+ >
<div class="node-icon">
<el-icon
v-if="!node.isLeaf"
@@ -57,31 +62,29 @@
<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>
@@ -92,67 +95,168 @@
</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 :span="10">
+ <div>
+ <el-input
+ style="float: left; width: 50%"
+ v-model="searchText"
+ placeholder="璇疯緭鍏ュ叧閿瓧鏌ヨ鏂囦欢"
+ clearable
+ @input="handleSearch"
+ @clear="handleSearch"
+ >
+ <template #prefix>
+ <el-icon>
+ <Search />
+ </el-icon>
+ </template>
+ <template #suffix>
+ <el-button @click="handleSearch" link style="border: none">
+ <span>鎼滅储</span>
+ </el-button>
+ </template>
+ </el-input>
+ </div>
+ </el-col>
+ <el-col :offset="10" :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"
+ :columns="columns"
+ :loading="loading"
+ :maxHeight="1200"
+ :show-selection="true"
+ :table-data="tableData"
+ @edit="handleEdit"
+ @selection-change="handleSelectionChange"
>
</ETable>
<Pagination
+ :layout="'total, prev, pager, next, jumper'"
+ :limit="queryParams.pageSize"
+ :page="queryParams.current"
+ :show-total="true"
:total="total"
- :page-size="10"
- :page-count="Math.ceil(total / 10)"
- @page-change="currentPageChange"
+ @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,
+ ElMessageBox,
+} from "element-plus";
+import archiveDialog from "./mould/archiveDialog.vue";
import Pagination from "@/components/Pagination/index.vue";
import {
+ Delete,
+ Document,
+ Folder,
Plus,
Search,
- Folder,
- Document,
- Delete,
} from "@element-plus/icons-vue";
import {
- getTree,
addOrEditTree,
+ delArchive,
delTree,
getArchiveList,
- addOrEditArchive,
- delArchive,
+ getTree,
} from "@/api/archiveManagement";
+
+// ===== 鍝嶅簲寮忕姸鎬佺鐞� =====
+const searchText = ref("");
+const dialogVisible = ref(false);
const loading = ref(false);
const tableData = ref([]);
const treeData = ref([]);
const newName = ref("");
-const inputRefs = ref(new Map()); // 瀛樺偍杈撳叆妗嗗紩鐢�
-const filterText = ref(""); // 鎼滅储鍏抽敭瀛�
-const treeRef = ref(); // 鏍戠粍浠跺紩鐢�
-const total = ref(0); // 鎬昏褰曟暟
-const current = ref(1); // 褰撳墠椤电爜
+const inputRefs = ref(new Map());
+const filterText = ref("");
+const treeRef = ref();
+const total = ref(0);
+const row = ref({});
+const selectedRows = reactive([]);
+const rowClickData = ref({});
+const tableSwitch = ref(false);
+const archiveDialogs = ref(null);
+
+// ===== 閰嶇疆甯搁噺 =====
const columns = [
{ prop: "name", label: "鍚嶇О", minWidth: 180 },
{ prop: "type", label: "绫诲瀷", minWidth: 120 },
{ prop: "status", label: "鐘舵��", minWidth: 100 },
];
-const handleSelectionChange = (selection) => {
- console.log("Selected rows:", selection);
+
+const queryParams = reactive({
+ searchAll: "",
+ current: 1,
+ pageSize: 10,
+ treeId: null,
+});
+
+const props = {
+ label: "name",
+ children: "children",
+ isLeaf: "leaf",
};
-// 鎼滅储杩囨护鍔熻兘
+// ===== 宸ュ叿鍑芥暟 =====
+const handleError = (error, defaultMsg = "鎿嶄綔澶辫触锛岃绋嶅悗閲嶈瘯") => {
+ console.error(error);
+ ElMessage.error(defaultMsg);
+};
+
+const showSuccess = (msg = "鎿嶄綔鎴愬姛") => {
+ ElMessage.success(msg);
+};
+
+// 鎼滅储鏌ヨ鍑芥暟
+const handleSearch = () => {
+ queryParams.searchAll = searchText.value;
+ queryParams.current = 1; // 閲嶇疆鍒扮涓�椤�
+ getArchiveListData();
+};
+
+const showConfirm = (message, title = "纭鎿嶄綔") => {
+ return ElMessageBox.confirm(message, title, {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ });
+};
+
+// ===== 鍩虹鍔熻兘鍑芥暟 =====
+const handleSelectionChange = (selection) => {
+ selectedRows.splice(0, selectedRows.length, ...selection);
+};
+
const handleFilter = () => {
treeRef.value?.filter(filterText.value);
};
@@ -162,22 +266,176 @@
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 centerDialogVisible = (val) => {
+ dialogVisible.value = val;
};
-const currentPageChange = (id) => {
- console.log(id);
+// ===== 鏁版嵁鑾峰彇鍑芥暟 =====
+const getList = async () => {
+ try {
+ const res = await getTree();
+ treeData.value =
+ res.code === 200 ? res.data?.records || res.data || [] : [];
+ } catch (error) {
+ handleError(error, "鑾峰彇鏍戠粨鏋勬暟鎹け璐�");
+ treeData.value = [];
+ }
};
-// 鍙屽嚮缂栬緫鑺傜偣
-const headerDbClick = (comeTreeData) => {
- comeTreeData.isEdit = true;
- newName.value = comeTreeData.name;
+
+const getArchiveListData = async () => {
+ try {
+ loading.value = true;
+ const 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;
+ }
+ } catch (error) {
+ handleError(error, "鑾峰彇褰掓。鏁版嵁澶辫触");
+ tableData.value = [];
+ total.value = 0;
+ } finally {
+ loading.value = false;
+ }
+};
+
+// ===== 琛ㄥ崟鎻愪氦澶勭悊 =====
+const submitForm = async (res) => {
+ try {
+ if (res?.code === 200) {
+ showSuccess();
+ dialogVisible.value = false;
+ await getArchiveListData();
+ } else {
+ ElMessage.error("鎿嶄綔澶辫触: " + (res?.message || res?.msg || "鏈煡閿欒"));
+ }
+ } catch (error) {
+ handleError(error, "鎻愪氦琛ㄥ崟澶辫触");
+ }
+};
+// ===== 鑺傜偣鎿嶄綔鍑芥暟 =====
+const handleNodeClick = (data) => {
+ rowClickData.value = data;
+ tableSwitch.value = true;
+ queryParams.current = 1;
+ queryParams.treeId = data.id;
+ getArchiveListData();
+};
+
+const handlePageChange = (pagination) => {
+ try {
+ const { page, limit } = pagination;
+ queryParams.current = page;
+ if (limit) queryParams.pageSize = limit;
+ getArchiveListData();
+ } catch (error) {
+ handleError(error, "鍒嗛〉鎿嶄綔澶辫触");
+ }
+};
+
+// ===== 寮圭獥鎿嶄綔鍑芥暟 =====
+const openDialog = (isEdit = false, rowData = {}) => {
+ try {
+ row.value = isEdit ? { ...rowData } : {};
+ newName.value = "";
+ dialogVisible.value = true;
+
+ nextTick(() => {
+ if (archiveDialogs.value) {
+ const method = isEdit ? "editForm" : "initForm";
+ if (typeof archiveDialogs.value[method] === "function") {
+ archiveDialogs.value[method](isEdit ? rowData : rowClickData.value);
+ }
+ }
+ });
+ } catch (error) {
+ handleError(error, `鎵撳紑${isEdit ? "缂栬緫" : "鏂板"}鐣岄潰澶辫触`);
+ }
+};
+
+const add = () => openDialog(false);
+const handleEdit = (rows) => openDialog(true, rows);
+
+// ===== 鍒犻櫎鎿嶄綔鍑芥暟 =====
+const delHandler = async () => {
+ if (selectedRows.length === 0) {
+ ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
+ return;
+ }
+
+ try {
+ await showConfirm(
+ `纭畾瑕佸垹闄ら�変腑鐨� ${selectedRows.length} 鏉¤褰曞悧锛焋,
+ "鍒犻櫎纭"
+ );
+
+ const ids = selectedRows.map((row) => row.id);
+ const { code, msg } = await delArchive(ids);
+
+ if (code !== 200) {
+ ElMessage.error("鍒犻櫎澶辫触: " + msg);
+ return;
+ }
+
+ showSuccess("鍒犻櫎鎴愬姛");
+ await getArchiveListData();
+ selectedRows.splice(0, selectedRows.length);
+ } catch (error) {
+ if (error !== "cancel") {
+ handleError(error, "鍒犻櫎鎿嶄綔澶辫触");
+ }
+ }
+};
+
+const remove = async (node, data) => {
+ if (!data?.id) {
+ ElMessage.warning("鏃犳硶鍒犻櫎姝よ妭鐐�");
+ return;
+ }
+
+ try {
+ await showConfirm(`纭畾瑕佸垹闄よ妭鐐� "${data.name}" 鍚楋紵`, "鍒犻櫎纭");
+
+ const { code, msg } = await delTree([data.id]);
+
+ if (code !== 200) {
+ ElMessage.error("鍒犻櫎澶辫触: " + msg);
+ return;
+ }
+
+ showSuccess("鍒犻櫎鎴愬姛");
+ await getList();
+ } catch (error) {
+ if (error !== "cancel") {
+ handleError(error, "鍒犻櫎鑺傜偣澶辫触");
+ }
+ }
+};
+// ===== 鏍戣妭鐐圭紪杈戝嚱鏁� =====
+const setInputRef = (el, data) => {
+ if (el) {
+ inputRefs.value.set(data.id || data, el);
+ }
+};
+
+const headerDbClick = (node, data) => {
+ data.isEdit = true;
+ newName.value = data.name;
nextTick(() => {
- const inputEl = inputRefs.value.get(comeTreeData.id || comeTreeData);
+ const inputEl = inputRefs.value.get(data.id || data);
if (inputEl) {
inputEl.focus();
inputEl.select();
@@ -185,119 +443,106 @@
});
};
-// 璁剧疆杈撳叆妗嗗紩鐢ㄧ殑鏂规硶
-const setInputRef = (el, data) => {
- if (el) {
- inputRefs.value.set(data.id || data, el);
- if (data.isEdit) {
- nextTick(() => {
- // el.focus();
- // el.select();
- });
- }
+const expandParentNodes = (node) => {
+ if (node?.parent?.data) {
+ node.parent.expanded = true;
+ expandParentNodes(node.parent);
}
};
-// 澶勭悊杈撳叆妗嗗け鐒�
const handleInputBlur = async (event, comeTreeData, node) => {
- if (!comeTreeData.isEdit) return; // 濡傛灉涓嶆槸缂栬緫鐘舵�侊紝鐩存帴杩斿洖
- 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;
- }
try {
- comeTreeData.name = newValue;
- // 鑾峰彇鐖惰妭鐐圭殑id - 閫氳繃 node 鍙傛暟鏇村噯纭湴鑾峰彇
- let parentId = null;
- if (node && node.parent && node.parent.data) {
- parentId = node.parent.data.id;
+ if (!comeTreeData.isEdit || event.relatedTarget?.tagName === "BUTTON")
+ return;
+
+ comeTreeData.isEdit = false;
+ const newValue = newName.value.trim();
+
+ if (comeTreeData.name === newValue) return;
+
+ if (!newValue) {
+ newName.value = comeTreeData.name || "鏂拌妭鐐�";
+ ElMessage.warning("鑺傜偣鍚嶇О涓嶈兘涓虹┖");
+ return;
}
- await addOrEditTree({
+
+ const parentId = node?.parent?.data?.id || null;
+
+ const result = await addOrEditTree({
name: newValue,
- parentId: parentId || null, // 濡傛灉娌℃湁鐖惰妭鐐癸紝鍒欎负 null
+ parentId,
+ id: comeTreeData.id || null,
});
+
+ if (result.code === 200) {
+ comeTreeData.name = newValue;
+ if (!comeTreeData.id && result.data) {
+ comeTreeData.id = result.data.id || result.data;
+ }
+ showSuccess("淇濆瓨鎴愬姛");
+
+ const currentNodeId = comeTreeData.id;
+ await getList();
+
+ nextTick(() => {
+ if (currentNodeId && treeRef.value) {
+ const targetNode = treeRef.value.getNode(currentNodeId);
+ if (targetNode) {
+ targetNode.expanded = true;
+ expandParentNodes(targetNode);
+ }
+ }
+ });
+ } else {
+ comeTreeData.name = comeTreeData.name || "鏂拌妭鐐�";
+ ElMessage.error("淇濆瓨澶辫触: " + (result.msg || "鏈煡閿欒"));
+ }
} catch (error) {
- console.error("瀛樺偍澶辫触", error);
+ handleError(error, "淇濆瓨鑺傜偣澶辫触");
comeTreeData.name = comeTreeData.name || "鏂拌妭鐐�";
}
- console.log("淇濆瓨鎴愬姛:", newValue);
};
-onMounted(async () => {
- await getList();
+// ===== 鑺傜偣鏂板鍑芥暟 =====
+const createNewNode = (name, isEdit = true) => ({
+ name,
+ isEdit,
});
-const props = {
- label: "name",
- children: "children", // 鏀逛负 children 浠ュ尮閰嶆爣鍑嗙粨鏋�
- isLeaf: "leaf",
-};
-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]);
- if (code !== 200) {
- ElMessage.warning("鍒犻櫎澶辫触, " + msg);
- } else {
- ElMessage.success("鍒犻櫎鎴愬姛");
- }
- await getList();
+const focusInput = (nodeData, delay = 50) => {
+ setTimeout(() => {
+ const inputEl = inputRefs.value.get(nodeData.id || nodeData);
+ if (inputEl) {
+ inputEl.focus();
+ inputEl.select();
+ inputEl.$el?.scrollIntoView?.({
+ behavior: "smooth",
+ block: "nearest",
+ });
+ }
+ }, delay);
};
const append = async (data) => {
if (data === "") {
// 鏂板鏍硅妭鐐�
- console.log("鏂板鏍硅妭鐐�");
- const newNode = {
- id: Date.now(),
- name: "鏂拌妭鐐�",
- isEdit: true,
- };
+ const newNode = createNewNode("鏂拌妭鐐�");
treeData.value.push(newNode);
newName.value = "鏂拌妭鐐�";
- nextTick(() => {
- const inputEl = inputRefs.value.get(newNode.id || newNode);
- if (inputEl) {
- inputEl.focus();
- inputEl.select();
- }
- });
+ nextTick(() => focusInput(newNode));
} else {
- const hasChildren = data.children && data.children.length > 0;
+ const hasChildren = data.children;
const nodeKey = data.id || data;
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.store.nodesMap[nodeKey].expanded = true;
- }
+ const isExpanded = node?.expanded;
+
+ // 濡傛灉鏈夊瓙绾т笖鏈睍寮�锛屽厛灞曞紑鑺傜偣
+ if (hasChildren && !isExpanded && treeRef.value?.store?.nodesMap[nodeKey]) {
+ treeRef.value.store.nodesMap[nodeKey].expanded = true;
}
- const newNode = {
- id: Date.now(),
- name: "鏂板瓙鑺傜偣",
- isEdit: true,
- };
+ const newNode = createNewNode("鏂板瓙鑺傜偣");
if (!data.children) {
data.children = [];
@@ -305,47 +550,15 @@
data.children.push(newNode);
newName.value = "鏂板瓙鑺傜偣";
- // 鏍规嵁鏄惁闇�瑕佸睍寮�鏉ュ喅瀹氬欢杩熸椂闂�
const delay = hasChildren && !isExpanded ? 200 : 50;
-
- // 绛夊緟DOM鏇存柊瀹屾垚鍚庡啀鑱氱劍
- nextTick(() => {
- setTimeout(() => {
- const inputEl = inputRefs.value.get(newNode.id || newNode);
- if (inputEl) {
- inputEl.focus();
- inputEl.select();
-
- // 婊氬姩鍒版柊澧炵殑鑺傜偣浣嶇疆
- inputEl.$el?.scrollIntoView?.({
- behavior: "smooth",
- block: "nearest",
- });
- }
- }, delay);
- });
+ nextTick(() => focusInput(newNode, delay));
}
};
-const handleEdit = () => {};
-
-// 绉婚櫎鎳掑姞杞斤紝鐩存帴鑾峰彇鏁版嵁
-const getList = async () => {
- try {
- let res = await getTree();
- 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 = [];
- }
-};
+// ===== 鐢熷懡鍛ㄦ湡 =====
+onMounted(getList);
</script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
.custom-tree-node {
flex: 1;
display: flex;
@@ -536,11 +749,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 +772,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