From 43db18b67b729e2053700fe7cf868914895e93c6 Mon Sep 17 00:00:00 2001
From: wangyilin <1454641981@qq.com>
Date: Mon, 4 Nov 2024 11:20:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A1=8C=E6=94=BF=E5=8C=BA?=
 =?UTF-8?q?=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 securityManagement/.env.development           |  2 +-
 .../src/components/form/FormProMax.vue        |  7 +++
 .../tree/AdministrativeDivisionsTree.vue      | 63 +++++++++++++++++++
 .../src/types/components/form/index.ts        |  5 +-
 .../src/views/serviceManagement/index.vue     | 15 +++--
 securityManagement/src/views/test.vue         | 52 ++-------------
 6 files changed, 86 insertions(+), 58 deletions(-)
 create mode 100644 securityManagement/src/components/tree/AdministrativeDivisionsTree.vue

diff --git a/securityManagement/.env.development b/securityManagement/.env.development
index 754e989..91e16ee 100644
--- a/securityManagement/.env.development
+++ b/securityManagement/.env.development
@@ -8,7 +8,7 @@ VITE_APP_BASE_API=/api
 VITE_APP_PROXY_URL=http://172.10.10.93:8765
 
 # rsa 公钥
-VITE_APP_RSA_PUBLIC_KEY=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCpu1C3JHZ+Ng/eVVCZtwKsOZv9RktpAL13pKy4FoRHyNv2t8TPV2AMzLzfEzlWx001nBxyVxEMR2N9jAcqFLHv7r16ciOzbtzB9dky2G+bc9jIs4/EdVK5bAZcPRh5Jrb78sC9PHyR4AeceDyCIKHLUbWBJB4NTZE0s1Wh5kMynQIDAQAB
+VITE_APP_RSA_PUBLIC_KEY=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDJps/EXxxSpEM1Ix4R0NWIOBciHCr7P7coDT8tNKfelgR7txcJOqHCO/MIWe7T04aHQTcpQxqx9hMca7dbqz8TZpz9jvLzE/6ZonVKxHsoFnNlHMp1/CPAJ9f6D9wYicum2KltJkmQ0g//D9W2zPCYoGOmSRFcZx/KEBa4EM53jQIDAQAB
 # minio
 VITE_APP_MINIO_URL=http://118.253.177.137:9000
 VITE_APP_MINIO_BUCKET=police-security-dev
diff --git a/securityManagement/src/components/form/FormProMax.vue b/securityManagement/src/components/form/FormProMax.vue
index 185a4ca..c4fb2c3 100644
--- a/securityManagement/src/components/form/FormProMax.vue
+++ b/securityManagement/src/components/form/FormProMax.vue
@@ -97,6 +97,12 @@
               :allowClear="item.componentsProps?.allowClear ?? true"
               :options="item.options"
           />
+          <AdministrativeDivisionsTree
+              v-else-if="item.type ==='administrativeDivisionsTree'"
+              style="width: 100%"
+              v-model:value="modelValue[field]"
+              v-bind="item.componentsProps"
+           />
           <a-range-picker
               v-else-if="item.type ==='rangePicker'"
               style="width: 100%"
@@ -145,6 +151,7 @@ import {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 AdministrativeDivisionsTree from "@/components/tree/AdministrativeDivisionsTree.vue";
 
 
 const modelValue = defineModel<T>('value', {
diff --git a/securityManagement/src/components/tree/AdministrativeDivisionsTree.vue b/securityManagement/src/components/tree/AdministrativeDivisionsTree.vue
new file mode 100644
index 0000000..d160a58
--- /dev/null
+++ b/securityManagement/src/components/tree/AdministrativeDivisionsTree.vue
@@ -0,0 +1,63 @@
+<template>
+    <a-cascader
+        style="width: 500px"
+        v-model:value="modelValue"
+        :options="options"
+        :load-data="loadData"
+        placeholder="请选择行政区划"
+        :change-on-select="changeOnSelect"
+    />
+</template>
+<script lang="ts" setup>
+import api from "@/axios";
+import {onMounted, ref, watch} from 'vue';
+import type {CascaderProps} from 'ant-design-vue';
+
+// withDefaultsde作用是设置组件默认值属性，有两个值，第二个值是设置第一个值所有属性的默认值的
+withDefaults(defineProps<{
+  changeOnSelect:boolean,
+}>(),{
+  changeOnSelect:false
+})
+
+const modelValue = defineModel('value', {
+  default: [  ]
+})
+const options = ref<CascaderProps['options']>([]);
+const DivisionTree = async ():Promise<TreeNodeVo<string>[]> =>{
+  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)
+      }
+    })
+  }
+}
+
+watch(modelValue,async ()=> await  transformData(modelValue.value,options.value))
+onMounted(async () => {
+  await  DivisionTree()
+  await  transformData(modelValue.value,options.value)
+});
+</script>
+
diff --git a/securityManagement/src/types/components/form/index.ts b/securityManagement/src/types/components/form/index.ts
index 0477415..7e5e3de 100644
--- a/securityManagement/src/types/components/form/index.ts
+++ b/securityManagement/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 AdministrativeDivisionsTree from "@/components/tree/AdministrativeDivisionsTree.vue";
 
 type FormProMaxItemType =
     | 'custom'
@@ -32,7 +33,8 @@ type FormProMaxItemType =
     | 'datePicker'
     | 'rangePicker'
     | 'timeRangePicker'
-    | 'timePicker';
+    | 'timePicker'
+    | 'administrativeDivisionsTree';
 
 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<'administrativeDivisionsTree', ComponentProps<typeof AdministrativeDivisionsTree>>
 }
 
 export interface FormProMaxProps<T = {}> extends FormProps {
diff --git a/securityManagement/src/views/serviceManagement/index.vue b/securityManagement/src/views/serviceManagement/index.vue
index bb325e2..42a1c83 100644
--- a/securityManagement/src/views/serviceManagement/index.vue
+++ b/securityManagement/src/views/serviceManagement/index.vue
@@ -193,7 +193,7 @@ const columns: TableProps['columns'] = [
           <a-button  danger>删除</a-button>
         </a-popconfirm>
         <a-button type="primary" onClick={ async ()=>{
-          // console.log(record)
+          console.log(record,'9999999')
           visible.value = true
           serviceTitle.value = '编辑服务项目'
           if(record.isRecruitSecurity === null ){
@@ -221,6 +221,7 @@ const columns: TableProps['columns'] = [
           formParams.value. securityUserTotal = record.securityUserTotal
           formParams.value.enterprisesUnitId = record.enterprisesUnitName
           formParams.value.administrativeDivisionCodes = record.enterprisesUnitAdministrativeDivisionCodes
+
         }}>编辑</a-button>
       </a-space>
     }
@@ -231,7 +232,7 @@ const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
 
 const administrativeDivisionTree = ref<TreeNodeVo<string>[]>([])  //行政区划
 const getAdministrativeDivisionTree = 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>[]
 }
 
@@ -260,15 +261,13 @@ const formItemOptions = ref<FormProMaxItemOptions<serviceProjectSaveOrUpdatePara
       options:userNameOptions,
   },
   administrativeDivisionCodes:{
-    type:'cascader',
+    type:'administrativeDivisionsTree',
     label:'行政区划',
     required: true,
-    options: administrativeDivisionTree,
     componentsProps:{
-      showSearch:true,
       onChange: async (values)=>{
-       const resp = await  api.post<SelectNodeVo<string>[]>('/enterprisesUnit/queryListByAdministrativeDivisionCodes',values)
-        enterprisesUnitIdList.value = resp.data
+          const resp = await  api.post<SelectNodeVo<string>[]>('/enterprisesUnit/queryListByAdministrativeDivisionCodes',values)
+          enterprisesUnitIdList.value = resp.data
       }
     }
   },
@@ -420,7 +419,7 @@ const closeModal = async()=>{
        securityUserTotal:null,
        remark:''
    }
-    // await formRef.value.resetFields()
+    await formRef.value.resetFields()
     enterprisesUnitId.value = ''
     serviceTitle.value = '新增服务项目'
     isRecruitSecurityHidden.value = false
diff --git a/securityManagement/src/views/test.vue b/securityManagement/src/views/test.vue
index 502b590..4243016 100644
--- a/securityManagement/src/views/test.vue
+++ b/securityManagement/src/views/test.vue
@@ -1,55 +1,11 @@
 <template>
     <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}}
+       <AdministrativeDivisionsTree v-model:value="value"></AdministrativeDivisionsTree>
     </div>
 </template>
 <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)
-});
+import { ref} from 'vue';
+import AdministrativeDivisionsTree from "@/components/tree/AdministrativeDivisionsTree.vue";
+const value = ref<string[]>( ["120000", "120100", "120115", "120115014"] );
 </script>