仓库位置列表添加树形结构

xjrsoft-vue3/src/api/jcsj/ckwz/index.ts

@@ -8,9 +8,7 @@ enum Api {
   List = '/jcsj/ckwz/list',
   List = '/jcsj/ckwz/list',
   Info = '/jcsj/ckwz/info',
   Info = '/jcsj/ckwz/info',
   RokeStockLocation = '/jcsj/ckwz',
   RokeStockLocation = '/jcsj/ckwz',
-  
-  
-  
+  Tree = '/jcsj/ckwz/tree',
 }
 }
 
 
 /**
 /**
@@ -88,6 +86,20 @@ export async function deleteRokeStockLocation(ids: string[], mode: ErrorMessageM
   );
   );
 }
 }
 
 
+/**
+ * @description: 获取位置树数据
+ */
+export async function getRokeStockLocationTree(mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<any>(
+    {
+      url: Api.Tree,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
 
 
 
 
 
 

xjrsoft-vue3/src/views/jcsj/ckwz/index.vue

 
 
 <template>
 <template>
-
-
-<ResizePageWrapper   :hasLeft="false">
- 
- 
- <template #resizeRight>
-<BasicTable @register="registerTable" isMenuTable ref="tableRef"  
-   
+  <PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
+    <div class="w-1/5 xl:w-1/5 mr-2">
+      <BasicTree
+        title="上级位置"
+        toolbar
+        search
+        :defaultExpandAll="true"
+        :clickRowToExpand="true"
+        :treeData="treeData"
+        :fieldNames="{ key: 'id', title: 'name' }"
+        @select="handleSelect"
       >
       >
+        <template #title="item"> &nbsp;&nbsp;{{ item.name }} </template>
+      </BasicTree>
+    </div>
+    <div class="w-4/5 xl:w-4/5">
+      <BasicTable @register="registerTable" isMenuTable ref="tableRef">
        
        
         <template #toolbar>
         <template #toolbar>
           <template v-for="button in tableButtonConfig" :key="button.code">
           <template v-for="button in tableButtonConfig" :key="button.code">
@@ -45,29 +53,22 @@
            
            
         
         
       </BasicTable>
       </BasicTable>
- </template>
- 
-  
-  
-   <CkwzModal @register="registerModal" @success="handleFormSuccess"   @cancel="handleFormCancel"/>
-  
-  
-   
-  
-  
-</ResizePageWrapper>
+    </div>
+    <CkwzModal @register="registerModal" @success="handleFormSuccess" @cancel="handleFormCancel" />
+  </PageWrapper>
 
 
 
 
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, computed,provide,Ref, createVNode, 
+  import { ref, computed, provide, Ref, createVNode, onMounted
 } from 'vue';
 } from 'vue';
   
   
   import { Modal } from 'ant-design-vue';
   import { Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
   import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
-  import { getRokeStockLocationPage, deleteRokeStockLocation} from '/@/api/jcsj/ckwz';
-  import { ResizePageWrapper } from '/@/components/Page';
+  import { getRokeStockLocationPage, deleteRokeStockLocation, getRokeStockLocationTree} from '/@/api/jcsj/ckwz';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { usePermission } from '/@/hooks/web/usePermission';
@@ -117,6 +118,10 @@
   const { enableLockeData,handleOpenFormEnableLockeData, handleCloseFormEnableLocke, handleHasEnableLocke } =
   const { enableLockeData,handleOpenFormEnableLockeData, handleCloseFormEnableLocke, handleHasEnableLocke } =
     useConcurrentLock();
     useConcurrentLock();
 
 
+  // 树相关
+  const treeData = ref<TreeItem[]>([]);
+  const selectedParentId = ref<string>('');
+
   const { notification } = useMessage();
   const { notification } = useMessage();
   const { t } = useI18n();
   const { t } = useI18n();
   defineEmits(['register']);
   defineEmits(['register']);
@@ -181,7 +186,12 @@
     },
     },
      bordered:false,
      bordered:false,
           beforeFetch: (params) => {
           beforeFetch: (params) => {
-      pageParamsInfo.value = {...params, FormId: formIdComputedRef.value,PK: 'id' }
+      pageParamsInfo.value = {
+        ...params, 
+        FormId: formIdComputedRef.value,
+        PK: 'id',
+        parentId: selectedParentId.value || undefined,
+      };
       return pageParamsInfo.value;
       return pageParamsInfo.value;
     },
     },
     afterFetch: (res) => {
     afterFetch: (res) => {
@@ -298,11 +308,38 @@
   }
   }
   
   
   function handleSuccess() {
   function handleSuccess() {
+    reload();
+  }
 
 
-    
+  // 树选择处理
+  function handleSelect(selectIds: string[]) {
+    selectedParentId.value = selectIds[0] || '';
     reload();
     reload();
+  }
 
 
+  // 加载树数据
+  async function loadTreeData() {
+    try {
+      const result = await getRokeStockLocationTree();
+      // 处理接口返回的数据格式：{code: 0, data: [...], success: true}
+      // defHttp 可能会自动提取 data，但也可能需要手动处理
+      let data = result;
+      if (result && typeof result === 'object' && 'data' in result && Array.isArray(result.data)) {
+        data = result.data;
+      } else if (result && typeof result === 'object' && 'success' in result && result.data) {
+        data = result.data;
+      }
+      if (Array.isArray(data)) {
+        treeData.value = data as TreeItem[];
+      }
+    } catch (error) {
+      console.error('加载位置树失败:', error);
     }
     }
+  }
+
+  onMounted(() => {
+    loadTreeData();
+  });
     
     
   
   
     function handleFormSuccess() {
     function handleFormSuccess() {