级联数据懒加载

policeManagement/src/views/register.vue

@@ -15,6 +15,8 @@
                 <div style="height: 100%">
                   <a-form-item v-if="options.length > 0" label="行政区划">
                     <a-cascader
+                      change-on-select
+                      :load-data="loadData"
                       :field-names="{ label: 'label', value: 'value', children: 'children' }"
                       @change="cascaderChange"
                       style="width: 300px"
@@ -77,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { storeTreeData, loadTreeFromCache } from '@/utils/DB.ts'
+// import { storeTreeData, loadTreeFromCache } from '@/utils/DB.ts'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
@@ -89,35 +91,53 @@ defineComponent({
   name: 'Register',
 })
 onMounted(() => {
-  getTree()
+  getTree(0)
 })
+import type { CascaderProps } from 'ant-design-vue'
+const loadData: CascaderProps['loadData'] = async (selectedOptions) => {
+  const targetOption = selectedOptions[selectedOptions.length - 1]
+  targetOption.loading = true
+  const res = await api.get<any>('/common/administrativeDivisionByParentCode', { parentCode: targetOption.value })
+  for (let index = 0; index < res.data.length; index++) {
+    delete res.data[index].children
+  }
+  targetOption.children = [...res.data]
+  options.value = [...options.value]
+  targetOption.loading = false
+}
 const labelCol = { style: { width: '120px' } }
 const wrapperCol = { span: 14 }
 const filter: ShowSearchType['filter'] = (inputValue, path) => {
   return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
 }
 const value = ref<string[]>([])
-const options = ref<any[]>([])
+const options = ref<CascaderProps['options']>([])
+
 const cascaderChange = (value: any): void => {
   formState.administrativeDivisionCodes = [...value]
 }
 
 // 获取树形结构数据并存储在 IndexedDB 中的主函数
-const getTree = async () => {
-  // 先尝试从缓存中加载数据
-  const cachedData = await loadTreeFromCache()
-  if (cachedData) {
-    console.log('未发请求')
-    // 如果缓存存在，直接使用缓存数据
-    options.value = cachedData
-    // console.log('Loaded from cache:', cachedData)
-  } else {
-    console.log('发起了请求')
-    // 如果缓存不存在，发起 API 请求
-    const res = await api.get<any>('/common/administrativeDivisionTree')
-    options.value = res.data
-    await storeTreeData(res.data)
+const getTree = async (parentCode: string | number) => {
+  const res = await api.get<any>('/common/administrativeDivisionByParentCode', { parentCode })
+  for (let index = 0; index < res.data.length; index++) {
+    delete res.data[index].children
   }
+  options.value = res.data
+  // // 先尝试从缓存中加载数据
+  // const cachedData = await loadTreeFromCache()
+  // if (cachedData) {
+  //   console.log('未发请求')
+  //   // 如果缓存存在，直接使用缓存数据
+  //   options.value = cachedData
+  //   // console.log('Loaded from cache:', cachedData)
+  // } else {
+  //   console.log('发起了请求')
+  //   // 如果缓存不存在，发起 API 请求
+  //   const res = await api.get<any>('/common/administrativeDivisionTree', { level: 0 })
+  //   options.value = res.data
+  //   await storeTreeData(res.data)
+  // }
 }
 import type { Rule } from 'ant-design-vue/es/form'
 import type { FormInstance } from 'ant-design-vue'
@@ -245,6 +265,7 @@ const getCheckStatus = async () => {
     })
 }
 import { useUserStore } from '@/stores/modules/userStore.ts'
+import { log } from 'console'
 const showConfirm = (columnsDate: dataStatus) => {
   if (columnsDate.checkStatus.value === 0) {
     Modal.success({