级联数据懒加载

This commit is contained in:
TimSpan 2024-11-01 11:32:17 +08:00
parent c4b2b6b578
commit 1b23ba5cee
1 changed files with 38 additions and 17 deletions

View File

@ -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({