fix: 商城下单页面收货地址编辑问题

src/pages/lxMall/order/components/addAddress/index.tsx

@@ -10,7 +10,7 @@ import {
 import { Input, Switch, Select, FormMegaLayout } from '@formily/antd-components'
 import { PublicApi } from '@/services/api'
 import { PATTERN_MAPS } from '@/constants/regExp'
-import { GetLogisticsReceiverAddressPageResponseDetail, postLogisticsReceiverAddressUpdate } from '@/services/LogisticsApi'
+import { GetLogisticsReceiverAddressPageResponseDetail, postLogisticsReceiverAddressUpdate, GetLogisticsReceiverAddressGetResponse } from '@/services/LogisticsApi'
 import styles from './index.less'
 import { isEmpty } from 'lodash'
 
@@ -46,13 +46,16 @@ const AddAddress: React.FC<AddAddressPropsType> = (props) => {
   const [cityName, setCityName] = useState('')
   const [districtName, setDistrictName] = useState('')
   const [provinceList, setProvinceList] = useState([])
-  const [cityList] = useState([])
+  const [cityList, setCityList] = useState([])
+  const [districtList, setDistrictList] = useState([])
+  // const [addressDetail, setAddressDetail] = useState<GetLogisticsReceiverAddressGetResponse>()
 
   const initAddressItemInfo = async () => {
     const param: any = {
        id: editItem.id
     }
     const addressDetailRes = await PublicApi.getLogisticsReceiverAddressGet(param)
+    // setAddressDetail(addressDetailRes.data)
     const addressDetail = addressDetailRes.data
 
     Object.keys(addressDetail).forEach(key => {
@@ -60,11 +63,11 @@ const AddAddress: React.FC<AddAddressPropsType> = (props) => {
         if (key == 'isDefault') {
           state.value = addressDetail[key] === 0 ? false : true
         } else if (key == 'provinceCode') {
-          state.value = `${addressDetail.provinceCode}-${addressDetail.provinceName}`
+          state.value = `${addressDetail.provinceCode}`
         } else if (key == 'cityCode') {
-          state.value = `${addressDetail.cityCode}-${addressDetail.cityName}`
+          state.value = `${addressDetail.cityCode}`
         } else if (key == 'districtCode') {
-          state.value = `${addressDetail.districtCode}-${addressDetail.districtName}`
+          state.value = `${addressDetail.districtCode}`
         } else {
           state.value = addressDetail[key]
         }
@@ -76,16 +79,14 @@ const AddAddress: React.FC<AddAddressPropsType> = (props) => {
    if(isEmpty(telCodeList)) {
       PublicApi.getManageCountryAreaGetTelCode().then(res => {
         const result: any = []
-        res.data.forEach((item, index) => {
-          result.push({ label: item, value: (index).toString() })
+        res.data.forEach((item) => {
+          result.push({ label: item, value: item })
         })
         setTelCodeList(result)
       })
     }
   }
 
-
-
   useEffect(() => {
     if(visible) {
       fetchCountryAreaTelCode()
@@ -94,15 +95,14 @@ const AddAddress: React.FC<AddAddressPropsType> = (props) => {
         getAllCode = setTimeout(() => {
           PublicApi.getManageAreaByPcodeAll({ pcode: '100000' }).then(res => {
             const list = []
-            res.data.forEach((item: any, index: number) => {
-              list.push({ label: item.name, value: `${item.code}-${item.name}` })
+            res.data.forEach((item: any) => {
+              list.push({ label: item.name, value: item.code })
             })
             setProvinceList(list)
           })
         }, 1000)
       }
 
-
       if (type === 'edit' && editItem) {
         initAddressItemInfo()
       }
@@ -121,12 +121,10 @@ const AddAddress: React.FC<AddAddressPropsType> = (props) => {
   const formSubmit = (values) => {
     const value = { ...values }
     value.isDefault = values.isDefault ? 1 : 0
-    value.provinceCode = value.provinceCode.split('-').length > 1 ? value.provinceCode.split('-')[0] : value.provinceCode
-    value.cityCode = value.cityCode.split('-').length > 1 ? value.cityCode.split('-')[0] : value.cityCode
-    value.districtCode = value.districtCode.split('-').length > 1 ? value.districtCode.split('-')[0] : value.districtCode
-    value.provinceName = provinceName
-    value.cityName = cityName
-    value.districtName = districtName
+
+    value.provinceName = getNameByCode(value.provinceCode, provinceList)
+    value.cityName =  getNameByCode(value.cityCode, cityList)
+    value.districtName =  getNameByCode(value.districtCode, districtList)
     setConfirmLoading(true)
     let postLogisticsFn
     if (type === 'edit') {
@@ -146,6 +144,19 @@ const AddAddress: React.FC<AddAddressPropsType> = (props) => {
     })
   }
 
+  const getNameByCode = (code, list) => {
+    if(list && code) {
+      let result = ""
+      list.forEach(item => {
+        if(item.value === code) {
+          result = item.label
+        }
+      });
+      return result
+    }
+    return ""
+  }
+
   /**
  * @description: 自定义HOOK
  * @param {type}
@@ -154,45 +165,37 @@ const AddAddress: React.FC<AddAddressPropsType> = (props) => {
   const useAreaEffects = () => {
     const { setFieldState } = createFormActions()
     onFieldValueChange$('provinceCode').subscribe(({ value }) => {
+      if(!value) return
       setFieldState('districtCode', state => {
         state.value = ''
       })
-      const name = value && value.split('-').length > 1 ? value.split('-')[1] : ''
-      setProvinceName(name)
-      setFieldState('*(cityCode)', state => {
+      setFieldState('*(cityCode)', (state) => {
         state.value = ''
         const list = []
-        const pcode = value && value.split('-').length > 1 ? value.split('-')[0] : value
+        const pcode = value
         PublicApi.getManageAreaByPcodeAll({ pcode: pcode }).then(res => {
-          res.data.forEach((item: any, index: number) => {
-            // list.push({ label: item.name, value: item.code })
-            list.push({ label: item.name, value: `${item.code}-${item.name}` })
+          res.data.forEach((item: any) => {
+            list.push({ label: item.name, value: item.code })
           })
+          setCityList(list)
         })
-        FormPath.setIn(state, 'props.enum', list)
       })
 
     })
     onFieldValueChange$('cityCode').subscribe(({ value }) => {
-      const name = value && value.split('-').length > 1 ? value.split('-')[1] : ''
-      setCityName(name)
+      if(!value) return
       setFieldState('*(districtCode)', state => {
         state.value = ''
         const list = []
-        const pcode = value && value.split('-').length > 1 ? value.split('-')[0] : value
+        const pcode = value
         PublicApi.getManageAreaByPcodeAll({ pcode: pcode }).then(res => {
-          res.data.forEach((item: any, index: number) => {
-            // list.push({ label: item.name, value: item.code })
-            list.push({ label: item.name, value: `${item.code}-${item.name}` })
+          res.data.forEach((item: any) => {
+            list.push({ label: item.name, value: item.code })
           })
+          setDistrictList(list)
         })
-        FormPath.setIn(state, 'props.enum', list)
       })
     })
-    onFieldValueChange$('districtCode').subscribe(({ value }) => {
-      const name = value && value.split('-').length > 1 ? value.split('-')[1] : ''
-      setDistrictName(name)
-    })
   }
 
   const handleOk = () => {
@@ -264,7 +267,7 @@ const AddAddress: React.FC<AddAddressPropsType> = (props) => {
             <Field
               x-mega-props={{ span: 1 }}
               x-component="Select"
-              enum={[]}
+              enum={districtList}
               x-rules={{
                 required: true,
                 message: '请选择区',