policeManagement/src/views/register.vue

@@ -15,8 +15,6 @@
                 <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"
@@ -79,7 +77,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'
@@ -91,53 +89,35 @@ defineComponent({
   name: 'Register',
 })
 onMounted(() => {
-  getTree(0)
+  getTree()
 })
-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<CascaderProps['options']>([])
-
+const options = ref<any[]>([])
 const cascaderChange = (value: any): void => {
   formState.administrativeDivisionCodes = [...value]
 }
 
 // 获取树形结构数据并存储在 IndexedDB 中的主函数
-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
-  }
+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
-  // // 先尝试从缓存中加载数据
-  // 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)
-  // }
+    await storeTreeData(res.data)
+  }
 }
 import type { Rule } from 'ant-design-vue/es/form'
 import type { FormInstance } from 'ant-design-vue'
@@ -265,7 +245,6 @@ 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({