From e23a2618f60559b2384d0e97bee6c884b1ed95c7 Mon Sep 17 00:00:00 2001
From: wangyilin <1454641981@qq.com>
Date: Fri, 1 Nov 2024 17:13:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 securityManagement/src/views/enterprise.vue | 61 +++++++++++++++++----
 securityManagement/src/views/test.vue       | 56 +++++++++++++++++--
 2 files changed, 101 insertions(+), 16 deletions(-)

diff --git a/securityManagement/src/views/enterprise.vue b/securityManagement/src/views/enterprise.vue
index 6e5a75a..cdd702a 100644
--- a/securityManagement/src/views/enterprise.vue
+++ b/securityManagement/src/views/enterprise.vue
@@ -28,8 +28,16 @@
               <a-input :allowClear="true" v-model:value="formDate.nature"/>
             </a-form-item>
             <a-form-item label="行政区划"  name="administrativeDivisionCodes">
-              <a-cascader v-model:value="formDate.administrativeDivisionCodes" :show-search="{ filter }" :options="administrativeDivisionTree" @change="searchAdministrativeDivisionTree" />
-            </a-form-item>
+              <a-cascader
+                  v-model:value="formDate.administrativeDivisionCodes"
+                  :options="administrativeDivisionTree"
+                  :load-data="loadData"
+                  :show-search="{ filter }"
+                  @change="searchAdministrativeDivisionTree"
+                  placeholder="请选择行政区划"
+                  change-on-select
+              />
+             </a-form-item>
             <a-form-item label="营业执照" name="businessLicense">
               <SingleImageFileUpload v-model:value="formDate.businessLicense" ref="fileUpload"></SingleImageFileUpload>
             </a-form-item>
@@ -73,7 +81,7 @@ import type { Rule } from 'ant-design-vue/es/form';
 import type { ShowSearchType } from 'ant-design-vue/es/cascader';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import api from "@/axios";
-import {message, Modal} from 'ant-design-vue';
+import {CascaderProps, message, Modal} from 'ant-design-vue';
 import SingleImageFileUpload from "@/components/upload/SingleImageFileUpload.vue";
 import {useRouter} from "vue-router";
 import {formDatePort, statusPort} from "@/types/views/enterprise.ts";
@@ -119,11 +127,36 @@ const rules: Record<string, Rule[]> = {
 
 // 调用行政区划 1
 const DivisionTree = async ()=>{
-  const resp =  await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionTree')
+  const resp =  await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:'0'})
   administrativeDivisionTree.value = resp.data as TreeNodeVo<string>[]
   
 }
 
+const loadData: CascaderProps['loadData'] = async selectedOptions => {
+  const targetOption = selectedOptions[selectedOptions.length - 1];
+  targetOption.loading = true;
+  const resp =  await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:targetOption.value})
+  targetOption.loading = false;
+  targetOption.children = [administrativeDivisionTree.value,...resp.data]
+};
+// 回显数据
+const transformData =  (val:any,tree:any)=>{
+  for(let i = 0; i< val.length - 1;i++){
+    tree.forEach(async(item:any)=>{
+      if(item.value === val[i]){
+        item.children = []
+        let data =  await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:val[i]})
+        item.children = data.data.map((items:any)=>{
+          return {
+            label:items.label,
+            value:items.value
+          }
+        })
+        transformData(val,item.children)
+      }
+    })
+  }
+}
 // 可以进行搜索行政区划  2
 const filter: ShowSearchType['filter'] = (inputValue, path) => {
   return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
@@ -133,6 +166,10 @@ const filter: ShowSearchType['filter'] = (inputValue, path) => {
 const  searchAdministrativeDivisionTree = (e:Array<string>)=>{
   formDate.value.administrativeDivisionCodes = e as any
 }
+
+
+
+
 // 注册企业入驻
 const onFinish = async ()=>{
   //校验表单
@@ -153,7 +190,12 @@ const onFinish = async ()=>{
   const resp = await  api.post('/common/securityUnitRegister',securityUnitRegisterParams)
   message.success(resp.message)
   fileUpload.value.fileDelete()
-  await formDateRef.value.resetFields()  //成功之后进行移除表单
+  await resetForm()
+}
+// 重置
+
+const  resetForm = async ()=>{
+ await formDateRef.value.resetFields()
   formDate.value = {
     name:'',
     socialCode:'',
@@ -164,11 +206,7 @@ const onFinish = async ()=>{
     address:'',
     nature:''
   }
-}
-// 重置
-
-const  resetForm = ()=>{
-  formDateRef.value.resetFields()
+  fileUpload.value.fileDelete()
 }
 
 // 查询企业状态
@@ -214,6 +252,9 @@ const showConfirm = (columnsDate:dataStatus) => {
 };
 onMounted( async ()=>{
   await  DivisionTree()
+  await  transformData(formDate.value.administrativeDivisionCodes,administrativeDivisionTree.value)
 })
+
+
 </script>
 
diff --git a/securityManagement/src/views/test.vue b/securityManagement/src/views/test.vue
index 39d9e87..502b590 100644
--- a/securityManagement/src/views/test.vue
+++ b/securityManagement/src/views/test.vue
@@ -1,11 +1,55 @@
 <template>
-  <div>test</div>
+    <div style="margin: 100px auto;width: 500px">
+      <a-cascader
+          style="width: 500px"
+          v-model:value="value"
+          :options="options"
+          :load-data="loadData"
+          placeholder="请选择行政区划"
+          change-on-select
+      />
+      {{value}}
+    </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
+import {onMounted, ref} from 'vue';
+import type {CascaderProps} from 'ant-design-vue';
+import api from "@/axios";
 
+const options = ref<CascaderProps['options']>([]);
+const DivisionTree = async ()=>{
+  const resp =  await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:'0'})
+  options.value =  resp.data as TreeNodeVo<string>[]
+}
+const loadData: CascaderProps['loadData'] = async selectedOptions => {
+  const targetOption = selectedOptions[selectedOptions.length - 1];
+  targetOption.loading = true;
+  const resp =  await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:targetOption.value})
+    targetOption.loading = false;
+    targetOption.children = [options.value,...resp.data]
+};
+const transformData =  (val:any,tree:any)=>{
+  for(let i = 0; i< val.length - 1;i++){
+     tree.forEach(async(item:any)=>{
+         if(item.value === val[i]){
+              item.children = []
+              let data =  await api.get<TreeNodeVo<string>[]>('/common/administrativeDivisionByParentCode',{parentCode:val[i]})
+             item.children = data.data.map((items:any)=>{
+                  return {
+                     label:items.label,
+                     value:items.value,
+                     isLeaf:items.isLeaf
+                  }
+             })
+           transformData(val,item.children)
+         }
+     })
+  }
+}
+const value = ref<string[]>(  [ "120000", "120100", "120115", "120115014" ]);
+onMounted(async () => {
+   await  DivisionTree()
+   await  transformData(value.value,options.value)
+});
 </script>
 
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file