处理地址BUG

src/views/system/dept/DeptForm.vue

@@ -28,14 +28,21 @@
         <el-input v-model="formData.name" placeholder="请输入机构名称" />
       </el-form-item>
       <el-form-item label="机构地址" prop="orgaddress">
-        <el-cascader
+        <div class="flex items-center gap-2">
-          v-model="selectedOptions"
+          <el-cascader
-          :options="options"
+            v-model="selectedOptions"
-          size="large"
+            :options="options"
-          @change="handleAddressChange"
+            @change="handleAddressChange"
-          placeholder="请选择省/市/区"
+            placeholder="请选择省/市/区"
-          clearable
+            clearable
-        />
+            class="w-[450px]"
+          />
+          <el-input
+            v-model="formData.detailAddress"
+            placeholder="请输入详细地址"
+            class="w-[450px]"
+          />
+        </div>
       </el-form-item>
       <el-form-item label="显示排序" prop="sort">
         <el-input-number v-model="formData.sort" :min="0" controls-position="right" />
@@ -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<FormRules>({
 const formRef = ref() // 表单 Ref
 const deptTree = ref() // 树形结构
 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
-const selectedOptions = ref([]) // 添加级联选择器的值
+const selectedOptions = ref<string[]>([]) // 添加级联选择器的值
 const options = ref<CascaderOption[]>(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
+    }
+  }
+})
 </script>