From 12d13a1b2780e35aa1caa96c53a63eaf5f0baff3 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 25 六月 2025 15:56:37 +0800
Subject: [PATCH] 1.库存管理-展示字段修改

---
 src/views/archiveManagement/index.vue |  436 +++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 282 insertions(+), 154 deletions(-)

diff --git a/src/views/archiveManagement/index.vue b/src/views/archiveManagement/index.vue
index 58d41d2..f1fb1e2 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="tree-node-content" @dblclick="headerDbClick(node,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, ElMessageBox} 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,16 +163,16 @@
 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) => {
   selectedRows.splice(0, selectedRows.length, ...selection);
 };
 const queryParams = reactive({
-  searchText: "",
+  searchAll: "",
   current: 1,
   pageSize: 10, // 鍥哄畾姣忛〉10鏉�
   treeId: null, // 褰撳墠鏍戣妭鐐笽D
@@ -191,36 +187,66 @@
   return data.name?.toLowerCase().includes(value.toLowerCase());
 };
 const submitForm = async (res) => {
-  if (res && res.code === 200) {
-    ElMessage.success("鎿嶄綔鎴愬姛");
-    // 鍒锋柊鍒楄〃鏁版嵁
-    await getArchiveListData();
-  } else {
-    ElMessage.error("鎿嶄綔澶辫触: " + (res?.message || "鏈煡閿欒"));
+  try {
+    if (res && res.code === 200) {
+      ElMessage.success("鎿嶄綔鎴愬姛");
+      dialogVisible.value = false;
+      // 鍒锋柊鍒楄〃鏁版嵁
+      await getArchiveListData();
+    } else {
+      ElMessage.error("鎿嶄綔澶辫触: " + (res?.message || res?.msg || "鏈煡閿欒"));
+    }
+  } catch (error) {
+    console.error("鎻愪氦琛ㄥ崟閿欒:", error);
+    ElMessage.error("鎿嶄綔澶辫触锛岃绋嶅悗閲嶈瘯");
   }
-}
-const centerDialogVisible = (val) => {
 };
+
+const centerDialogVisible = (val) => {
+  dialogVisible.value = val;
+};
+const tableSwitch = ref(false);
 // 澶勭悊鑺傜偣鐐瑰嚮
-const handleNodeClick = async (data) => {
+const handleNodeClick = (data) => {
+  console.log("鐐瑰嚮鑺傜偣", 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(); // 閲嶇疆琛ㄥ崟
+  try {
+    row.value = {}; // 娓呯┖琛屾暟鎹紝纭繚鏄柊澧炴ā寮�
+    newName.value = ""; // 娓呯┖杈撳叆妗�
+    dialogVisible.value = true;
+    
+    // 纭繚缁勪欢寮曠敤瀛樺湪鍚庡啀璋冪敤鏂规硶
+    nextTick(() => {
+      if (archiveDialogs.value && typeof archiveDialogs.value.initForm === 'function') {
+        archiveDialogs.value.initForm(); // 閲嶇疆琛ㄥ崟
+      }
+    });
+  } catch (error) {
+    console.error("鏂板褰掓。閿欒:", error);
+    ElMessage.error("鎵撳紑鏂板鐣岄潰澶辫触");
+  }
 };
 // 澶勭悊鍒嗛〉鍙樺寲
-const handlePageChange = ({ page }) => {
-  queryParams.current = page;
-  // pageSize 鍥哄畾涓�20锛屼笉鍐嶄粠鍙傛暟涓幏鍙�
-  getArchiveListData();
+const handlePageChange = (pagination) => {
+  try {
+    const { page, limit } = pagination;
+    queryParams.current = page;
+    if (limit) {
+      queryParams.pageSize = limit;
+    }
+    getArchiveListData();
+  } catch (error) {
+    console.error("鍒嗛〉澶勭悊閿欒:", error);
+    ElMessage.error("鍒嗛〉鎿嶄綔澶辫触");
+  }
 };
 
 const getArchiveListData = async () => {
@@ -238,7 +264,6 @@
       total.value = 0;
       return;
     }
-
     tableData.value = res.data?.records || res.data || [];
     total.value = res.data?.total || 0;
     // 纭繚鍒嗛〉鍙傛暟姝ｇ‘鏇存柊
@@ -255,31 +280,51 @@
     loading.value = false;
   }
 };
+// 鍒犻櫎閫変腑鐨勫綊妗ｈ褰�
 const delHandler = async () => {
   if (selectedRows.length === 0) {
     ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
     return;
   }
+
   try {
+    await ElMessageBox.confirm(
+      `纭畾瑕佸垹闄ら�変腑鐨� ${selectedRows.length} 鏉¤褰曞悧锛焋,
+      '鍒犻櫎纭',
+      {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
+      }
+    );
+
     const ids = selectedRows.map((row) => row.id);
     const { code, msg } = await delArchive(ids);
+    
     if (code !== 200) {
-      ElMessage.warning("鍒犻櫎澶辫触: " + msg);
-    } else {
-      ElMessage.success("鍒犻櫎鎴愬姛");
-      // 鍒犻櫎鎴愬姛鍚庨噸鏂拌幏鍙栨暟鎹�
-      await getArchiveListData();
+      ElMessage.error("鍒犻櫎澶辫触: " + msg);
+      return;
     }
+
+    ElMessage.success("鍒犻櫎鎴愬姛");
+    // 鍒犻櫎鎴愬姛鍚庨噸鏂拌幏鍙栨暟鎹�
+    await getArchiveListData();
+    // 娓呯┖閫変腑鐘舵��
+    selectedRows.splice(0, selectedRows.length);
+    
   } catch (error) {
-    ElMessage.error("鍒犻櫎褰掓。澶辫触");
+    if (error !== 'cancel') {
+      console.error("鍒犻櫎褰掓。澶辫触:", error);
+      ElMessage.error("鍒犻櫎鎿嶄綔澶辫触锛岃绋嶅悗閲嶈瘯");
+    }
   }
 };
 // 鍙屽嚮缂栬緫鑺傜偣
-const headerDbClick = (comeTreeData) => {
-  comeTreeData.isEdit = true;
-  newName.value = comeTreeData.name;
+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();
@@ -302,32 +347,69 @@
 
 // 澶勭悊杈撳叆妗嗗け鐒�
 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) {
-    return;
-  }
-  if (newValue === "") {
-    newName.value = comeTreeData.name || "鏂拌妭鐐�";
-    return;
-  }
   try {
-    comeTreeData.name = newValue;
+    if (!comeTreeData.isEdit) return; // 濡傛灉涓嶆槸缂栬緫鐘舵�侊紝鐩存帴杩斿洖
+    
+    if (event.relatedTarget && 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;
+    }
+    
     // 鑾峰彇鐖惰妭鐐圭殑id - 閫氳繃 node 鍙傛暟鏇村噯纭湴鑾峰彇
     let parentId = null;
     if (node && node.parent && node.parent.data) {
       parentId = node.parent.data.id;
     }
-    await addOrEditTree({
+    
+    const result = await addOrEditTree({
       name: newValue,
       parentId: parentId || null, // 濡傛灉娌℃湁鐖惰妭鐐癸紝鍒欎负 null
+      id: comeTreeData.id || null,
     });
+      if (result.code === 200) {
+      comeTreeData.name = newValue;
+      if (!comeTreeData.id && result.data) {
+        comeTreeData.id = result.data.id || result.data;
+      }
+      ElMessage.success("淇濆瓨鎴愬姛");
+      
+      // 鍒锋柊鏍戞暟鎹苟灞曞紑褰撳墠鑺傜偣
+      const currentNodeId = comeTreeData.id;
+      await getList();
+      
+      // 绛夊緟DOM鏇存柊鍚庡睍寮�鑺傜偣
+      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);
     comeTreeData.name = comeTreeData.name || "鏂拌妭鐐�";
+    ElMessage.error("淇濆瓨澶辫触锛岃绋嶅悗閲嶈瘯");
   }
 };
 
@@ -340,24 +422,55 @@
   isLeaf: "leaf",
 };
 
+// 灞曞紑鐖惰妭鐐硅矾寰�
+const expandParentNodes = (node) => {
+  if (node && node.parent && node.parent.data) {
+    // 閫掑綊灞曞紑鎵�鏈夌埗鑺傜偣
+    node.parent.expanded = true;
+    expandParentNodes(node.parent);
+  }
+};
+
+// 鍒犻櫎鏍戣妭鐐�
 const remove = async (node, data) => {
   if (!data || !data.id) {
+    ElMessage.warning("鏃犳硶鍒犻櫎姝よ妭鐐�");
     return;
   }
-  let { code, msg } = await delTree([data.id]);
-  if (code !== 200) {
-    ElMessage.warning("鍒犻櫎澶辫触, " + msg);
-  } else {
+
+  try {
+    await ElMessageBox.confirm(
+      `纭畾瑕佸垹闄よ妭鐐� "${data.name}" 鍚楋紵`,
+      '鍒犻櫎纭',
+      {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning',
+      }
+    );
+
+    const { code, msg } = await delTree([data.id]);
+    
+    if (code !== 200) {
+      ElMessage.error("鍒犻櫎澶辫触: " + msg);
+      return;
+    }
+
     ElMessage.success("鍒犻櫎鎴愬姛");
+    await getList();
+    
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error("鍒犻櫎鑺傜偣澶辫触:", error);
+      ElMessage.error("鍒犻櫎澶辫触锛岃绋嶅悗閲嶈瘯");
+    }
   }
-  await getList();
 };
 
 const append = async (data) => {
   if (data === "") {
     // 鏂板鏍硅妭鐐�
     const newNode = {
-      id: Date.now(),
       name: "鏂拌妭鐐�",
       isEdit: true,
     };
@@ -372,21 +485,20 @@
       }
     });
   } 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) {
       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: "鏂板瓙鑺傜偣",
       isEdit: true,
     };
@@ -419,10 +531,22 @@
   }
 };
 
+// 缂栬緫褰掓。
 const handleEdit = (rows) => {
-  row.value = rows;
-  dialogVisible.value = true;
-  archiveDialogs.value.editForm(rows); // 璋冪敤缂栬緫鏂规硶
+  try {
+    row.value = { ...rows }; // 浣跨敤娣辨嫹璐濋伩鍏嶅紩鐢ㄩ棶棰�
+    dialogVisible.value = true;
+    
+    // 纭繚缁勪欢寮曠敤瀛樺湪鍚庡啀璋冪敤鏂规硶
+    nextTick(() => {
+      if (archiveDialogs.value && typeof archiveDialogs.value.editForm === 'function') {
+        archiveDialogs.value.editForm(rows); // 璋冪敤缂栬緫鏂规硶
+      }
+    });
+  } catch (error) {
+    console.error("缂栬緫褰掓。閿欒:", error);
+    ElMessage.error("鎵撳紑缂栬緫鐣岄潰澶辫触");
+  }
 };
 
 // 绉婚櫎鎳掑姞杞斤紝鐩存帴鑾峰彇鏁版嵁
@@ -439,7 +563,7 @@
   }
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .custom-tree-node {
   flex: 1;
   display: flex;
@@ -630,11 +754,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 +777,15 @@
       flex-direction: column;
     }
   }
+
   .right {
     width: 70%;
     height: calc(100vh - 160px);
-    padding: 0px 10px;
+    padding: 0 10px;
     float: left;
   }
 }
+
 .archive-management-card {
   margin: 0;
 }

--
Gitblit v1.9.3