diff --git a/src/views/system/dept/DeptForm.vue b/src/views/system/dept/DeptForm.vue index 16a299c3..1e2a8e38 100644 --- a/src/views/system/dept/DeptForm.vue +++ b/src/views/system/dept/DeptForm.vue @@ -28,14 +28,21 @@ - +
+ + +
@@ -87,6 +94,12 @@ pcTextArr, codeToText, } from "element-china-area-data" +interface CascaderOption { + value: string + label: string + children?: CascaderOption[] +} + defineOptions({ name: 'SystemDeptForm' }) const { t } = useI18n() // 国际化 @@ -96,13 +109,27 @@ const dialogVisible = ref(false) // 弹窗的是否展示 const dialogTitle = ref('') // 弹窗的标题 const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 const formType = ref('') // 表单的类型:create - 新增;update - 修改 -const formData = ref({ +const formData = ref<{ + id: number | undefined + title: string + parentId: number + orgid: number | undefined + name: string | undefined + orgaddress: string | undefined + detailAddress: string | undefined + sort: number | undefined + leaderUserId: number | undefined + phone: string | undefined + email: string | undefined + status: number +}>({ id: undefined, title: '', parentId: 0, orgid: undefined, name: undefined, orgaddress: undefined, + detailAddress: undefined, sort: undefined, leaderUserId: undefined, phone: undefined, @@ -123,7 +150,7 @@ const formRules = reactive({ const formRef = ref() // 表单 Ref const deptTree = ref() // 树形结构 const userList = ref([]) // 用户列表 -const selectedOptions = ref([]) // 添加级联选择器的值 +const selectedOptions = ref([]) // 添加级联选择器的值 const options = ref(regionData as unknown as CascaderOption[]) /** 打开弹窗 */ @@ -137,6 +164,27 @@ const open = async (type: string, id?: number) => { formLoading.value = true try { formData.value = await DeptApi.getDept(id) + // 处理地址数据 + if (formData.value.orgaddress) { + const addressParts = formData.value.orgaddress.split('/') + if (addressParts.length >= 3) { + // 获取省市区编码 + const provinceCode = Object.keys(codeToText).find(key => codeToText[key] === addressParts[0]) + let cityCode = Object.keys(codeToText).find(key => codeToText[key] === addressParts[1]) + if(provinceCode == '12'){ + cityCode = '1201' + } + const areaCode = Object.keys(codeToText).find(key => codeToText[key] === addressParts[2]) + if (provinceCode && cityCode && areaCode) { + selectedOptions.value = [provinceCode, cityCode, areaCode] + } + + // 设置详细地址 + if (addressParts.length > 3) { + formData.value.detailAddress = addressParts.slice(3).join('/') + } + } + } } finally { formLoading.value = false } @@ -183,12 +231,14 @@ const resetForm = () => { orgid: undefined, name: undefined, orgaddress: undefined, + detailAddress: undefined, sort: undefined, leaderUserId: undefined, phone: undefined, email: undefined, status: CommonStatusEnum.ENABLE } + selectedOptions.value = [] formRef.value?.resetFields() } @@ -202,7 +252,7 @@ const getTree = async () => { } /** 检查机构ID */ -const checkorgid = async () => { +const checkOrgId = async () => { const result = await DeptApi.getDeptByOrgId(Number(formData.value.orgid)) if (result) { message.warning('机构ID已存在') @@ -215,7 +265,23 @@ const checkorgid = async () => { const handleAddressChange = (value: any) => { if (value && value.length === 3) { const address = codeToText[value[0]] + '/' + codeToText[value[1]] + '/' + codeToText[value[2]] - formData.value.orgaddress = address + if (formData.value.detailAddress) { + formData.value.orgaddress = address + '/' + formData.value.detailAddress + } else { + formData.value.orgaddress = address + } } } + +// 监听详细地址变化 +watch(() => formData.value.detailAddress, (newValue) => { + if (selectedOptions.value && selectedOptions.value.length === 3) { + const address = codeToText[selectedOptions.value[0]] + '/' + codeToText[selectedOptions.value[1]] + '/' + codeToText[selectedOptions.value[2]] + if (newValue) { + formData.value.orgaddress = address + '/' + newValue + } else { + formData.value.orgaddress = address + } + } +})