吉安感知网项目-前端
罗广辉
2026-01-15 04a859aa95b231c032c71d06518497a973c2f4e8
uniapps/work-wx/src/subPackages/deviceRegistration/add.vue
@@ -144,19 +144,21 @@
        <u-form-item
                label="所属区域"
                labelWidth="230rpx"
                prop="serialNumber"
                prop="regionCode"
                :borderBottom="true"
                ref="item2"
                @click="isShowRegion = true"
        >
            <view class="select-wrapper">
                <u-input
                        v-model="formParams.serialNumber"
                        border="none"
                        placeholder="请选择"
                        readonly
                ></u-input>
                <view class="select-icon">▼</view>
            </view>
            <u-input
                v-model="formParams.regionText"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择所属区域"
                border="none"
            ></u-input>
            <template #right>
                <up-icon name="arrow-down"></up-icon>
            </template>
        </u-form-item>
        <u-form-item
                label="民用航空器登记证书"
@@ -259,9 +261,16 @@
        />
        <!-- 所属区域 -->
        <u-cascader 
            show="show"
            v-model="value"
            :show="isShowRegion"
            v-model="formParams.regionCode"
            :data="areaData"
            value-key="code"
         label-key="name"
         children-key="children"
            :auto-close="true"
            @confirm="onRegionConfirm"
            @close="isShowRegion = false"
            @cancel="isShowRegion = false"
        ></u-cascader>
    </u-form>
    <u-button @click="submitForm" color="#1D6FE9">提交</u-button>
@@ -293,6 +302,8 @@
    hasInsurance: '', // 是否有保险
    hasInsuranceText: '', // 是否有保险文本
    region: '', // 所属区域
    regionCode: '', // 所属区域
    regionText: '', // 所属区域文本
    caacRegistrationCode: '', // 民用航空器登记证书
    caacRegistrationCodeText: '', // 民用航空器登记证书文本
    deviceImage: '', // 飞行器照片
@@ -341,6 +352,38 @@
const onPurchaseDate = (e) => {
    formParams.value.purchaseDate = dayjs(e.value).format('YYYY-MM-DD')
    showPurchaseDate.value = false
}
const findRegionNamesByCodes = (codes, areaData) => {
  const result = []
  let currentData = areaData
  for (const code of codes) {
    // 转换为字符串比较(因为code可能是字符串类型)
    const codeStr = code.toString()
    const item = currentData.find(item => item.code === codeStr)
    if (!item) {
      console.warn(`未找到code为 ${codeStr} 的行政区划`)
      break
    }
    result.push(item.name)
    currentData = item.children || []
  }
  return result
}
// 所属区域确认
const onRegionConfirm = (e) => {
    console.log(e,'888')
    formParams.value.region = e?.join(',')[2] || '' // 用逗号分隔的区域码
    // 通过arrRegion的数组值为[36,3608,360824] 从areaData里面反查出名称
    const regionNames = findRegionNamesByCodes(e, areaData.value)
    console.log(regionNames, '77777')
    formParams.value.regionText = regionNames.join('-') || '' // 用连字符连接的区域名称
    isShowRegion.value = false
}
// 是否有保险
const actionsHasInsurance = ref([
@@ -455,13 +498,13 @@
// 获取所属单位
const isShowRegion = ref(false)
const areaData = ref([])
function getAreaData() {
    areaDataApi().then(res => {
        if (res.data.code === 200) {
            areaData.value = res.data.data
        }
    })
}
// function getAreaData() {
//     areaDataApi().then(res => {
//         if (res.data.code === 200) {
//             areaData.value = res.data.data
//         }
//     })
// }
// 提交图片
function afterReadImage(event) {
    // 获取上传的文件对象
@@ -543,8 +586,29 @@
        // 这里可以添加额外的失败处理逻辑
    }
}
onMounted(() => {
    getAreaData()
onMounted(async () => {
    // 动态导入xzqhData,确保在使用前已初始化
    const { xzqhData } = await import('@/static/xzqh/index')
    // console.log(xzqhData,'9999')
    // xzqhData.map 循环三层
    // 第一层:省份
    // 第二层:城市
    // 第三层:区县
    areaData.value = xzqhData
    // xzqhData.map(item => ({
    //     label: item.name,
    //     value: item.code,
    //     children: item.children.map(child => ({
    //         label: child.name,
    //         value: child.code,
    //         children: child.children?.map(district => ({
    //             label: district.name,
    //             value: district.code
    //         })) || []
    //     }))
    // }))
    // console.log(areaData.value, '8888')
})
</script>
<style scoped lang="scss">