feat:调整加载

张含笑

2026-01-27 dd57e0e9a989e7ee8b3e3473a7ee6a1dff06a4ae

 uniapps/work-wx/src/subPackages/deviceRegistration/add.vue

@@ -34,7 +34,7 @@
                v-model="formParams.manufacturerText"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择飞行器厂商"
                placeholder="请选择"
                border="none"
            ></u-input>
            <template #right>
@@ -66,7 +66,7 @@
                v-model="formParams.isModifiedText"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择是否改装"
                placeholder="请选择"
                border="none"
            ></u-input>
            <template #right>
@@ -88,7 +88,7 @@
                v-model="formParams.typeText"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择飞行器类型"
                placeholder="请选择"
                border="none"
            ></u-input>
            <template #right>
@@ -100,12 +100,12 @@
         <u-form-item
                label="持有人"
                labelWidth="200rpx"
                prop="aircraftName"
                prop="holder"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                    v-model="formParams.aircraftName"
                    v-model="formParams.holder"
                    border="none"
                    placeholder="请输入"
            ></u-input>
@@ -118,7 +118,7 @@
                ref="item1"
                @click="showPurchaseDate = true"
        >
            <u-input v-model="formParams.purchaseDate" border="none" placeholder="请选择日期" suffixIcon="calendar"></u-input>
            <u-input v-model="formParams.purchaseDate" border="none" placeholder="请选择" suffixIcon="calendar"></u-input>
        </u-form-item>
        <u-form-item
                label="有无保险"
@@ -132,7 +132,7 @@
                v-model="formParams.hasInsuranceText"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择有无保险"
                placeholder="请选择"
                border="none"
            ></u-input>
            <template #right>
@@ -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="民用航空器登记证书"
@@ -168,7 +170,7 @@
            <u-input
                    v-model="formParams.caacRegistrationCodeText"
                    border="none"
                    placeholder="请输入"
                    placeholder="请上传"
            ></u-input>
            <template #right>
                <u-upload
@@ -192,7 +194,7 @@
            <u-input
                    v-model="formParams.deviceImageText"
                    border="none"
                    placeholder="请输入"
                    placeholder="请上传"
            ></u-input>
            <template #right>
                <u-upload
@@ -258,22 +260,32 @@
        @cancel="showPurchaseDate = false"
        />
        <!-- 所属区域 -->
        <u-cascader 
            show="show"
            v-model="value"
        <u-cascader
            v-model: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"
        ></u-cascader>
    </u-form>
    <u-button @click="submitForm" color="#1D6FE9">提交</u-button>
    <u-button :disabled="isSubmitDisabled" @click="submitForm" color="#1D6FE9">提交</u-button>
    <!-- <u-button class="submit-button-wrapper" color="#1D6FE9" size="large" @click="submitForm">
            注册
        </u-button> -->
</view>
</template>
<script setup>
import { aircraftInfoSaveApi,uploadFileApi,areaDataApi } from '@/api/index'
import { aircraftInfoSaveApi,uploadFileApi, areaDataApi, proTypeApi, manufacturerInfoApi } from '@/api/index'
import { ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'

// 获取store中的数据 字典
import { useAppStore, useUserStore } from "@/store";
const appStore = useAppStore()

const formRef = ref(null);
const formParams = ref({
@@ -293,6 +305,8 @@
    hasInsurance: '', // 是否有保险
    hasInsuranceText: '', // 是否有保险文本
    region: '', // 所属区域
    regionCode: '', // 所属区域
    regionText: '', // 所属区域文本
    caacRegistrationCode: '', // 民用航空器登记证书
    caacRegistrationCodeText: '', // 民用航空器登记证书文本
    deviceImage: '', // 飞行器照片
@@ -316,6 +330,10 @@
    isModifiedText: [
        { required: true, message: '请选择是否改装', trigger: 'change' }
    ],
    type: [
        { required: true, message: '请选择飞行器类型', trigger: 'change' }
    ],

})
// 是否改装
const actionsModified = ref([
@@ -342,6 +360,36 @@
    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) => {
    formParams.value.region = e[2] || '' // 用逗号分隔的区域码
    // 通过arrRegion的数组值为[36,3608,360824] 从areaData里面反查出名称
    const regionNames = findRegionNamesByCodes(e, areaData.value)
    formParams.value.regionText = regionNames.join('-') || '' // 用连字符连接的区域名称
    isShowRegion.value = false
}
// 是否有保险
const actionsHasInsurance = ref([
    {
@@ -362,16 +410,7 @@
}
// 飞行器厂商
const showManufacturer = ref(false);
const manufacturerList = ref([
    {
        label: 'A厂商',
        value: 'A厂商'
    },
    {
        label: 'B厂商',
        value: 'B厂商'
    },
])
const manufacturerList = ref([])
// 选择飞行器厂商
const onPickerConfirmManufacturer = (e) => {
  const selected = e.value[0]
@@ -379,22 +418,14 @@
  formParams.value.manufacturerText = selected.label
  showManufacturer.value = false
}
// 飞行器型号
// 飞行器类型
const showType = ref(false);
const typeList = ref([
    {
        label: 'A型号',
        value: 'A型号'
    },
    {
        label: 'B型号',
        value: 'B型号'
    },
])
// 选择飞行器型号
const typeList = ref(appStore.getProType)
// 选择飞行器类型
const onPickerConfirmType = (e) => {
  const selected = e.value[0]
  formParams.value.type = selected.value
  console.log(formParams.value.type,'6666')
  formParams.value.typeText = selected.label
  showType.value = false
}
@@ -403,36 +434,36 @@
    // 获取上传的文件对象
    const file = event.file;
    console.log('上传的文件:', file);
    

    // 显示加载提示
    uni.showLoading({
        title: '上传中...'
    });
    

    // 准备上传参数
    const uploadParams = {
        name: 'file', // 服务器端接收文件的字段名
        file: file, // 传入文件对象
        filePath: file.path || file.url, // 文件路径
    };
    

    // 调用上传文件接口
    uploadFileApi(uploadParams).then(res => {
        uni.hideLoading();
        

        console.log('上传成功结果:', res);
        

        // 根据接口返回的数据结构处理结果
        if (res.data && res.data.code === 200) {
            // 假设接口返回的数据结构是 { url, fileName } 等
            const uploadResult = res.data.data;
            

            // 更新表单数据，将上传结果展示在input内
            formParams.value.caacRegistrationCodeText = uploadResult.fileName || uploadResult.url || '文件上传成功';
            

            // 可以将完整的上传信息保存到表单中，以便提交时使用
            formParams.value.caacRegistrationCode= uploadResult.fileUrl || '文件上传成功';
            

            uni.showToast({
                title: '上传成功',
                icon: 'success'
@@ -455,48 +486,48 @@
// 获取所属单位
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) {
    // 获取上传的文件对象
    const file = event.file;
    console.log('上传的文件:', file);
    

    // 显示加载提示
    uni.showLoading({
        title: '上传中...'
    });
    

    // 准备上传参数
    const uploadParams = {
        name: 'file', // 服务器端接收文件的字段名
        file: file, // 传入文件对象
        filePath: file.path || file.url, // 文件路径
    };
    

    // 调用上传文件接口
    uploadFileApi(uploadParams).then(res => {
        uni.hideLoading();
        

        console.log('上传成功结果:', res);
        

        // 根据接口返回的数据结构处理结果
        if (res.data && res.data.code === 200) {
            // 假设接口返回的数据结构是 { url, fileName } 等
            const uploadResult = res.data.data;
            

            // 更新表单数据，将上传结果展示在input内
            formParams.value.deviceImageText = uploadResult.fileName || uploadResult.url || '文件上传成功';
            

            // 可以将完整的上传信息保存到表单中，以便提交时使用
            formParams.value.deviceImage= uploadResult.fileUrl || '文件上传成功';
            

            uni.showToast({
                title: '上传成功',
                icon: 'success'
@@ -517,11 +548,14 @@
    });
}
// 提交表单
const isSubmitDisabled = ref(false)
const submitForm = async () => {
    try {
        if (await formRef.value.validate()) {
            isSubmitDisabled.value = true
            const res = await aircraftInfoSaveApi(formParams.value)
            if (res.data.code === 200) {
                isSubmitDisabled.value = false
                uni.showToast({
                    title: '航空器注册成功',
                    icon: 'success'
@@ -543,8 +577,36 @@
        // 这里可以添加额外的失败处理逻辑
    }
}
onMounted(() => {
    getAreaData()
// 获取飞行器类型
// function getProTypeApi() {
//     proTypeApi().then(res => {
//         typeList.value = res.data.data.map(item => ({
//             ...item,
//             label: item.dictLabel,
//             value: item.dictValue
//         }))
//     })
// }
// 获取无人机厂商
function getManufacturerInfoApi() {
    manufacturerInfoApi({
        current: 1,
        size: 1000,
    }).then(res => {
        manufacturerList.value = res.data.data.records.map(item => ({
            ...item,
            label: item.unitName,
            value: item.id,
        }))
    })
}
onMounted(async () => {
    getManufacturerInfoApi()
    // 动态从外部URL导入xzqhData，确保在使用前已初始化
    // 注意：直接动态导入外部URL可能会有跨域或构建问题，建议检查服务器CORS设置
    const response = await fetch('https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/xzqh/index.json')
    const text = await response.text()
    areaData.value = JSON.parse(text)
})
</script>
<style scoped lang="scss">
@@ -554,11 +616,11 @@
    display: flex;
    flex-direction: column;
    // padding: 24rpx;
    

    .select-wrapper {
        position: relative;
        width: 100%;
        

        .select-icon {
            position: absolute;
            right: 20rpx;
@@ -570,11 +632,23 @@
        }
    }

    :deep(.u-toolbar__wrapper__confirm) {
        color: #1D6FE9;
    }

    .upload {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 15px;
        color: #1D6FE9;
    }

    :deep(.u-tabs__wrapper__nav__line) {
        background-color: #265CFD;
    }

    :deep(.u-button--primary) {
        background-color: #265CFD;
    }

    :deep(.u-form) {
@@ -592,9 +666,9 @@
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-bottom: 20rpx;
    }
    

    :deep(.u-form-item) {
        margin-bottom: 40rpx;
        margin-bottom: 20rpx;
        padding: 16rpx 24rpx 18rpx 24rpx;
        border-radius: 6px 6px 6px 6px;
        background: white;
@@ -607,7 +681,7 @@
            border-radius: 8rpx;
            padding: 0 20rpx;
            background-color: #f5f5f5;
            

            &::placeholder {
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
@@ -615,12 +689,12 @@
                color: #D2D2D2;
            }
        }
        

        .clickable-input {
            width: 100%;
            cursor: pointer;
        }
        

        :deep(.u-form-item__label) {
            margin-bottom: 20rpx;
            // font-weight: bold;
@@ -630,7 +704,7 @@
            font-size: 30rpx;
            color: #222324;
        }
        

        :deep(.u-form-item__required) {
            color: #FF2600;
            margin-right: 8rpx;