级联数据 组件懒加载

policeManagement/components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
+    AdministrativeDivisionTree: typeof import('./src/components/tree/AdministrativeDivisionTree.vue')['default']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']

policeManagement/global.d.ts

@@ -1,6 +1,13 @@
 declare const __APP_ENV: ImportMetaEnv;
+class TreeNodeVo<T, E = Record<string, any>> {
+    value: T;
+    parentValue: T;
+    label: string;
+    orderIndex?: number;
+    children?: TreeNodeVo<T>[]
+    extData?: E;
+}
 
-declare global {
 /**
  * 全局返回
  */
@@ -11,7 +18,6 @@ declare global {
 }
 
 
-
 export interface SecurityUnitPagerQueryParams {
     /** 名称 **/
     name?: string;
@@ -36,7 +42,7 @@ declare global {
     children?: TreeNodeVo<T>[]
     extData?: E;
 }
-    declare interface Grid {
+interface Grid {
     //栅格占据的列数
     span?: number;
     //栅格左侧的间隔格数
@@ -97,5 +103,5 @@ declare global {
 }
 
 
-}
+
 

policeManagement/src/components/form/FormProMax.vue

@@ -67,6 +67,7 @@
             :allowClear="item.componentsProps?.allowClear ?? true"
             :options="item.options"
           />
+          <administrative-division-tree-comp v-else-if="item.type === 'administrativeDivisionTree'" style="width: 100%" v-model:value="modelValue[field]" v-bind="item.componentsProps" />
           <a-range-picker
             v-else-if="item.type === 'rangePicker'"
             style="width: 100%"
@@ -111,10 +112,14 @@
 
 <script setup lang="ts" generic="T extends Record<string,any>">
 import { FormInstance } from 'ant-design-vue'
-import { ref } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 import { FormExpose } from 'ant-design-vue/es/form/Form'
 import { QuestionCircleOutlined } from '@ant-design/icons-vue'
 import { FormProMaxItemOptions, FormProMaxItemProps, FormProMaxProps } from '@/types/components/form/index.ts'
+import { ComponentProps } from 'vue-component-type-helpers'
+import AdministrativeDivisionTree from '@/components/tree/AdministrativeDivisionTree.vue'
+
+const AdministrativeDivisionTreeComp: ComponentProps<typeof AdministrativeDivisionTree> = defineAsyncComponent(() => import('@/components/tree/AdministrativeDivisionTree.vue'))
 
 const modelValue = defineModel<T>('value', {
   default: {},
@@ -147,7 +152,7 @@ const props = withDefaults(defineProps<FormProMaxProps<T>>(), {
   scrollToFirstError: undefined,
   validateOnRuleChange: undefined,
 })
-console.log(props)
+
 const formProMaxRef = ref<FormInstance>(null!)
 
 const getResponsive = (item: FormProMaxItemProps): Grid => {

policeManagement/src/components/tree/AdministrativeDivisionTree.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-cascader
+      v-model:value="modelValue"
+      :placeholder="placeholder"
+      :change-on-select="changeOnSelect"
+      :options="administrativeDivisionTree"
+      :load-data="loadData"
+      :allow-clear="allowClear"
+  />
+</template>
+
+<script setup lang="ts">
+import api from "@/axios";
+import {onMounted, ref} from "vue";
+import {CascaderProps} from "ant-design-vue";
+import {isEmpty} from "lodash-es";
+
+withDefaults(defineProps<{
+  placeholder?: string,
+  changeOnSelect?: boolean
+  allowClear?: boolean
+}>(), {
+  placeholder: '请选择行政区划',
+  changeOnSelect: true,
+  allowClear: true
+})
+
+
+const modelValue = defineModel('value', {
+  default: []
+})
+
+const administrativeDivisionTree = ref<TreeNodeVo<string>[]>([])
+
+const loadData: CascaderProps['loadData'] = selectedOptions => {
+  const targetOption = selectedOptions[selectedOptions.length - 1];
+  targetOption.loading = true;
+  administrativeDivisionByParentCode(targetOption.value as string).then(data => {
+    targetOption.loading = false
+    targetOption.children = data
+    administrativeDivisionTree.value = [...administrativeDivisionTree.value]
+  })
+}
+
+/**
+ * 根据父级编码查询行政区划
+ * @param code
+ */
+const administrativeDivisionByParentCode = async (code: string = '0'): Promise<TreeNodeVo<string>[]> => {
+  const resp = await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode', {
+    parentCode: code
+  })
+  //解决点击无加载提示
+  return resp.data.map(item => {
+    delete item.children
+    return item
+  });
+}
+
+onMounted(async () => {
+  administrativeDivisionTree.value = await administrativeDivisionByParentCode()
+  if (!isEmpty(modelValue.value)) {
+    const ps = modelValue.value.map(code => administrativeDivisionByParentCode(code))
+    Promise.all(ps).then(data => {
+      let i = 0;
+      const deepChildren = (treeData: TreeNodeVo<string>[]) => {
+        treeData.forEach(item => {
+          if (item.value === modelValue.value[i]) {
+            item.children = data[i]
+            i++;
+            deepChildren(item.children)
+          }
+        })
+      }
+      deepChildren(administrativeDivisionTree.value)
+    })
+  }
+})
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

policeManagement/src/types/components/form/index.ts

@@ -15,6 +15,7 @@ import {
 } from "ant-design-vue";
 import { Ref, UnwrapRef, VNode } from "vue";
 import { ComponentProps } from "vue-component-type-helpers";
+import AdministrativeDivisionTree from "@/components/tree/AdministrativeDivisionTree.vue";
 
 type FormProMaxItemType =
     | 'custom'
@@ -32,7 +33,8 @@ type FormProMaxItemType =
     | 'datePicker'
     | 'rangePicker'
     | 'timeRangePicker'
-    | 'timePicker';
+    | 'timePicker'
+    | 'administrativeDivisionTree'
 
 interface FormProMaxItemCommonProps extends ComponentProps<typeof FormItem> {
     label?: string,
@@ -64,6 +66,7 @@ export type FormProMaxItemOptions<T> = {
     | FormProMaxItemProps<'rangePicker', ComponentProps<typeof RangePicker>>
     | FormProMaxItemProps<'timeRangePicker', ComponentProps<typeof TimeRangePicker>>
     | FormProMaxItemProps<'timePicker', ComponentProps<typeof TimePicker>>
+    | FormProMaxItemProps<'administrativeDivisionTree', ComponentProps<typeof AdministrativeDivisionTree>>
 }
 
 export interface FormProMaxProps<T = {}> extends FormProps {

policeManagement/src/views/query/publicUnit.vue

@@ -1,8 +1,7 @@
 <template>
   <div>
     <!-- 企事业单位 -->
-    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions"
-                 :scroll="{ x }">
+    <TableProMax ref="tableRef" :request-api="reqApi" :columns="columns" :searchFormOptions="searchFormOptions" :scroll="{ x }">
       <!-- <template #tableHeader>
         <a-space>
           <a-button type="primary" @click="addUserManagement">新增用户</a-button>
@@ -16,7 +15,7 @@
 </template>
 
 <script setup lang="tsx">
-import {storeTreeData, loadTreeFromCache} from '@/utils/DB.ts'
+// import { storeTreeData, loadTreeFromCache } from '@/utils/DB.ts'
 import api from '@/axios'
 import { ref, reactive } from 'vue'
 import TableProMax from '@/components/table/TableProMax.vue'
@@ -100,33 +99,34 @@ const addUserManagement = () => {
   title.value = ''
 }
 
-const getTree = async () => {
-  // 先尝试从缓存中加载数据
-  const cachedData = await loadTreeFromCache()
-  if (cachedData) {
-    console.log('未发请求')
-    // 如果缓存存在，直接使用缓存数据
-    return cachedData
-  } else {
-    console.log('发起了请求')
-    // 如果缓存不存在，发起 API 请求
-    const res = await api.get<any>('/common/administrativeDivisionTree')
-    await storeTreeData(res.data)
-    return res.data
-  }
-}
-const loadOptions = async () => {
-  const treeData = await getTree()
-  searchFormOptions.treeSelect.options = treeData
-}
-loadOptions()
+// const getTree = async () => {
+//   // 先尝试从缓存中加载数据
+//   const cachedData = await loadTreeFromCache()
+//   if (cachedData) {
+//     console.log('未发请求')
+//     // 如果缓存存在，直接使用缓存数据
+//     return cachedData
+//   } else {
+//     console.log('发起了请求')
+//     // 如果缓存不存在，发起 API 请求
+//     const res = await api.get<any>('/common/administrativeDivisionTree')
+//     await storeTreeData(res.data)
+//     return res.data
+//   }
+// }
+// const loadOptions = async () => {
+//   const treeData = await getTree()
+//   searchFormOptions.treeSelect.options = treeData
+// }
+// loadOptions()
 const searchFormOptions = reactive<TableProps['searchFormOptions']>({
   name: {
     type: 'input',
     label: '名称',
   },
   treeSelect: {
-    type: 'cascader',
+    // type: 'cascader',
+    type: 'administrativeDivisionTree',
     label: '行政区划',
   },
   telephone: {