修改行政区划
This commit is contained in:
		
							parent
							
								
									13adeedf5a
								
							
						
					
					
						commit
						43db18b67b
					
				|  | @ -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 | ||||
|  |  | |||
|  | @ -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', { | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  | @ -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 { | ||||
|  |  | |||
|  | @ -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 | ||||
|  |  | |||
|  | @ -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> | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue