级联数据懒加载
This commit is contained in:
parent
c4b2b6b578
commit
1b23ba5cee
|
@ -15,6 +15,8 @@
|
||||||
<div style="height: 100%">
|
<div style="height: 100%">
|
||||||
<a-form-item v-if="options.length > 0" label="行政区划">
|
<a-form-item v-if="options.length > 0" label="行政区划">
|
||||||
<a-cascader
|
<a-cascader
|
||||||
|
change-on-select
|
||||||
|
:load-data="loadData"
|
||||||
:field-names="{ label: 'label', value: 'value', children: 'children' }"
|
:field-names="{ label: 'label', value: 'value', children: 'children' }"
|
||||||
@change="cascaderChange"
|
@change="cascaderChange"
|
||||||
style="width: 300px"
|
style="width: 300px"
|
||||||
|
@ -77,7 +79,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { storeTreeData, loadTreeFromCache } from '@/utils/DB.ts'
|
// import { storeTreeData, loadTreeFromCache } from '@/utils/DB.ts'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||||
|
@ -89,35 +91,53 @@ defineComponent({
|
||||||
name: 'Register',
|
name: 'Register',
|
||||||
})
|
})
|
||||||
onMounted(() => {
|
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 labelCol = { style: { width: '120px' } }
|
||||||
const wrapperCol = { span: 14 }
|
const wrapperCol = { span: 14 }
|
||||||
const filter: ShowSearchType['filter'] = (inputValue, path) => {
|
const filter: ShowSearchType['filter'] = (inputValue, path) => {
|
||||||
return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
|
return path.some((option) => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
|
||||||
}
|
}
|
||||||
const value = ref<string[]>([])
|
const value = ref<string[]>([])
|
||||||
const options = ref<any[]>([])
|
const options = ref<CascaderProps['options']>([])
|
||||||
|
|
||||||
const cascaderChange = (value: any): void => {
|
const cascaderChange = (value: any): void => {
|
||||||
formState.administrativeDivisionCodes = [...value]
|
formState.administrativeDivisionCodes = [...value]
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取树形结构数据并存储在 IndexedDB 中的主函数
|
// 获取树形结构数据并存储在 IndexedDB 中的主函数
|
||||||
const getTree = async () => {
|
const getTree = async (parentCode: string | number) => {
|
||||||
// 先尝试从缓存中加载数据
|
const res = await api.get<any>('/common/administrativeDivisionByParentCode', { parentCode })
|
||||||
const cachedData = await loadTreeFromCache()
|
for (let index = 0; index < res.data.length; index++) {
|
||||||
if (cachedData) {
|
delete res.data[index].children
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
|
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 { Rule } from 'ant-design-vue/es/form'
|
||||||
import type { FormInstance } from 'ant-design-vue'
|
import type { FormInstance } from 'ant-design-vue'
|
||||||
|
@ -245,6 +265,7 @@ const getCheckStatus = async () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
import { useUserStore } from '@/stores/modules/userStore.ts'
|
import { useUserStore } from '@/stores/modules/userStore.ts'
|
||||||
|
import { log } from 'console'
|
||||||
const showConfirm = (columnsDate: dataStatus) => {
|
const showConfirm = (columnsDate: dataStatus) => {
|
||||||
if (columnsDate.checkStatus.value === 0) {
|
if (columnsDate.checkStatus.value === 0) {
|
||||||
Modal.success({
|
Modal.success({
|
||||||
|
|
Loading…
Reference in New Issue