修改行政区划

This commit is contained in:
wangyilin 2024-11-04 11:20:08 +08:00
parent 13adeedf5a
commit 43db18b67b
6 changed files with 86 additions and 58 deletions

View File

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

View File

@ -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', {

View File

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

View File

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

View File

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

View File

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