<template>
|
<view class="deviceRegistration">
|
<u-form labelPosition="top" :model="formParams" :rules="rules" ref="formRef">
|
<u-form-item
|
label="飞行器名称"
|
labelWidth="200rpx"
|
prop="name"
|
:borderBottom="true"
|
ref="item1"
|
required
|
>
|
<u-input v-model="formParams.name" border="none" placeholder="请输入"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="SN(出厂序列号)"
|
labelWidth="230rpx"
|
prop="sn"
|
:borderBottom="true"
|
ref="item2"
|
required
|
>
|
<u-input v-model="formParams.sn" border="none" placeholder="请输入"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行器厂商"
|
labelWidth="230rpx"
|
prop="manufacturer"
|
:borderBottom="true"
|
ref="item2"
|
required
|
@click="showManufacturer = true"
|
>
|
<u-input
|
v-model="formParams.manufacturerText"
|
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="飞行器型号"
|
labelWidth="200rpx"
|
prop="model"
|
:borderBottom="true"
|
ref="item1"
|
required
|
>
|
<u-input v-model="formParams.model" border="none" placeholder="请输入"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="是否改装"
|
labelWidth="200rpx"
|
prop="isModifiedText"
|
:borderBottom="true"
|
ref="item1"
|
@click="showIsModified = true"
|
required
|
>
|
<u-input
|
v-model="formParams.isModifiedText"
|
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="飞行器类型"
|
labelWidth="200rpx"
|
prop="type"
|
:borderBottom="true"
|
ref="item1"
|
required
|
@click="showType = true"
|
>
|
<u-input
|
v-model="formParams.typeText"
|
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="持有人"
|
labelWidth="200rpx"
|
prop="holder"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.holder"
|
border="none"
|
placeholder="请输入"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="购买日期"
|
labelWidth="200rpx"
|
prop="purchaseDate"
|
:borderBottom="true"
|
ref="item1"
|
@click="showPurchaseDate = true"
|
>
|
<u-input v-model="formParams.purchaseDate" border="none" placeholder="请选择" suffixIcon="calendar"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="有无保险"
|
labelWidth="230rpx"
|
prop="hasInsurance"
|
:borderBottom="true"
|
ref="item2"
|
@click="showHasInsurance = true"
|
>
|
<u-input
|
v-model="formParams.hasInsuranceText"
|
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="所属区域"
|
labelWidth="230rpx"
|
prop="regionCode"
|
:borderBottom="true"
|
ref="item2"
|
@click="isShowRegion = true"
|
>
|
<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="民用航空器登记证书"
|
labelWidth="300rpx"
|
prop="caacRegistrationCodeText"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.caacRegistrationCodeText"
|
border="none"
|
placeholder="请上传"
|
></u-input>
|
<template #right>
|
<u-upload
|
@afterRead="afterReadFile"
|
@delete="deletePic"
|
name="6"
|
multiple
|
:maxCount="1"
|
>
|
<view class="upload">上传文件</view>
|
</u-upload>
|
</template>
|
</u-form-item>
|
<u-form-item
|
label="飞行器照片"
|
labelWidth="200rpx"
|
prop="deviceImageText"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.deviceImageText"
|
border="none"
|
placeholder="请上传"
|
></u-input>
|
<template #right>
|
<u-upload
|
@afterRead="afterReadImage"
|
name="6"
|
multiple
|
:maxCount="1"
|
accept="image"
|
>
|
<view class="upload">上传图片</view>
|
</u-upload>
|
</template>
|
</u-form-item>
|
<u-form-item
|
label="备注"
|
labelWidth="200rpx"
|
prop="remarks"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.remarks"
|
border="none"
|
placeholder="请输入"
|
></u-input>
|
</u-form-item>
|
<!-- 飞行器型号 -->
|
<u-picker
|
:show="showType"
|
:columns="[typeList]"
|
keyName="label"
|
@confirm="onPickerConfirmType"
|
@cancel="showType = false"
|
/>
|
<!-- 飞行器厂商 -->
|
<!-- <u-picker
|
:show="showManufacturer"
|
:columns="[manufacturerList]"
|
keyName="label"
|
@confirm="onPickerConfirmManufacturer"
|
@cancel="showManufacturer = false"
|
/> -->
|
<u-popup
|
:show="showManufacturer"
|
mode="bottom"
|
round="20"
|
@close="showManufacturer = false"
|
>
|
<scroll-view scroll-y>
|
<view class="select-header">
|
<u-search
|
v-model="searchFacturerName"
|
placeholder="请输入飞行器厂商名称关键字"
|
@custom="getManufacturerInfoApi"
|
></u-search>
|
</view>
|
<view class="select-content">
|
<!-- 加载状态 -->
|
<view v-if="loadingManufacturer" class="loading-container">
|
<u-loading-icon></u-loading-icon>
|
</view>
|
<u-radio-group
|
v-if="!loadingManufacturer"
|
v-model="formParams.spacecraftId"
|
placement="column"
|
@change="radioChange"
|
>
|
<u-radio
|
:customStyle="{marginBottom: '8px'}"
|
v-for="(item, index) in manufacturerList"
|
:key="item.id"
|
:label="item.label"
|
:name="item.value"
|
>
|
</u-radio>
|
</u-radio-group>
|
</view>
|
</scroll-view>
|
</u-popup>
|
<u-picker
|
:show="showIsModified"
|
:columns="[actionsModified]"
|
keyName="label"
|
@confirm="onPickerConfirm"
|
@cancel="showIsModified = false"
|
/>
|
<u-picker
|
:show="showHasInsurance"
|
:columns="[actionsHasInsurance]"
|
keyName="label"
|
@confirm="onPickerConfirmHasInsurance"
|
@cancel="showHasInsurance = false"
|
/>
|
<u-datetime-picker
|
:show="showPurchaseDate"
|
v-model="birthdayValue"
|
mode="date"
|
@confirm="onPurchaseDate"
|
@cancel="showPurchaseDate = false"
|
/>
|
<!-- 所属区域 -->
|
<u-cascader
|
v-model:show="isShowRegion"
|
v-model="formParams.regionCode"
|
:data="areaData"
|
value-key="code"
|
label-key="name"
|
children-key="children"
|
@confirm="onRegionConfirm"
|
@close="isShowRegion = false"
|
></u-cascader>
|
</u-form>
|
<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, 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({
|
name: '',
|
manufacturer: '', // 制造商
|
manufacturerText: '', // 制造商文本
|
model: '', // 型号
|
sn: '', // sn编号
|
type: '', // 航空器类型
|
typeText: '', // 航空器类型文本
|
holder: '', // 持有人
|
pilotId: '', // 飞行员id
|
status: '', // 状态 飞行器状态：0-未激活，1-正常，2-维修中，3-报废:
|
purchaseDate: '', // 购买日期
|
isModified: '', // 是否改装 0否 1是:
|
isModifiedText: '', // 是否改装文本
|
hasInsurance: '', // 是否有保险
|
hasInsuranceText: '', // 是否有保险文本
|
region: '', // 所属区域
|
regionCode: '', // 所属区域
|
regionText: '', // 所属区域文本
|
caacRegistrationCode: '', // 民用航空器登记证书
|
caacRegistrationCodeText: '', // 民用航空器登记证书文本
|
deviceImage: '', // 飞行器照片
|
deviceImageText: '', // 飞行器照片文本
|
remarks: '', // 备注
|
})
|
|
const rules = ref({
|
name: [
|
{ required: true, message: '请输入飞行器名称', trigger: 'blur' }
|
],
|
manufacturer: [
|
{ required: true, message: '请选择飞行器厂商', trigger: 'change' }
|
],
|
model: [
|
{ required: true, message: '请输入飞行器型号', trigger: 'blur' }
|
],
|
sn: [
|
{ required: true, message: '请选择SN(出厂序列号)', trigger: 'change' }
|
],
|
isModifiedText: [
|
{ required: true, message: '请选择是否改装', trigger: 'change' }
|
],
|
type: [
|
{ required: true, message: '请选择飞行器类型', trigger: 'change' }
|
],
|
|
})
|
|
// 搜索飞行器厂商
|
const searchFacturerName = ref('')
|
|
// 是否改装
|
const actionsModified = ref([
|
{
|
label: '否',
|
value: 0
|
},
|
{
|
label: '是',
|
value: 1
|
}
|
])
|
const showIsModified = ref(false);
|
const onPickerConfirm = (e) => {
|
const selected = e.value[0]
|
formParams.value.isModified = selected.value
|
formParams.value.isModifiedText = selected.label
|
showIsModified.value = false
|
}
|
const showPurchaseDate = ref(false);
|
const birthdayValue = ref(Date.now()); // 设置默认值为当前时间戳
|
// 购买日期
|
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) => {
|
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([
|
{
|
label: '无',
|
value: '0'
|
},
|
{
|
label: '有',
|
value: '1'
|
}
|
])
|
const showHasInsurance = ref(false);
|
const onPickerConfirmHasInsurance = (e) => {
|
const selected = e.value[0]
|
formParams.value.hasInsurance = selected.value
|
formParams.value.hasInsuranceText = selected.label
|
showHasInsurance.value = false
|
}
|
// 飞行器厂商
|
const showManufacturer = ref(false);
|
const manufacturerList = ref([])
|
const loadingManufacturer = ref(false)
|
// 选择飞行器厂商
|
const onPickerConfirmManufacturer = (e) => {
|
const selected = e.value[0]
|
formParams.value.manufacturer = selected.value
|
formParams.value.manufacturerText = selected.label
|
showManufacturer.value = false
|
}
|
function radioChange(value) {
|
formParams.value.manufacturer = value
|
formParams.value.manufacturerText = manufacturerList.value.find(item => item.value === value)?.label || ''
|
}
|
// 飞行器类型
|
const showType = ref(false);
|
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
|
}
|
// 提交文件
|
function afterReadFile(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.caacRegistrationCodeText = uploadResult.fileName || uploadResult.url || '文件上传成功';
|
|
// 可以将完整的上传信息保存到表单中，以便提交时使用
|
formParams.value.caacRegistrationCode= uploadResult.fileUrl || '文件上传成功';
|
|
uni.showToast({
|
title: '上传成功',
|
icon: 'success'
|
});
|
} else {
|
uni.showToast({
|
title: res.msg || '上传失败',
|
icon: 'none'
|
});
|
}
|
}).catch(err => {
|
uni.hideLoading();
|
console.error('上传失败:', err);
|
uni.showToast({
|
title: '上传失败',
|
icon: 'none'
|
});
|
});
|
}
|
// 获取所属单位
|
const isShowRegion = ref(false)
|
const areaData = ref([])
|
// 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'
|
});
|
} else {
|
uni.showToast({
|
title: res.msg || '上传失败',
|
icon: 'none'
|
});
|
}
|
}).catch(err => {
|
uni.hideLoading();
|
console.error('上传失败:', err);
|
uni.showToast({
|
title: '上传失败',
|
icon: 'none'
|
});
|
});
|
}
|
// 提交表单
|
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'
|
})
|
// 跳转设备列表页
|
uni.switchTab({
|
url: '/pages/equipmentManagement/index',
|
})
|
} else {
|
uni.showToast({
|
title: res.msg || '航空器注册失败',
|
icon: 'error'
|
})
|
}
|
}
|
} catch (error) {
|
console.log('表单验证失败:', error)
|
// 验证失败时，u-form组件会自动显示错误提示
|
// 这里可以添加额外的失败处理逻辑
|
}
|
}
|
// 获取飞行器类型
|
// function getProTypeApi() {
|
// proTypeApi().then(res => {
|
// typeList.value = res.data.data.map(item => ({
|
// ...item,
|
// label: item.dictLabel,
|
// value: item.dictValue
|
// }))
|
// })
|
// }
|
// 获取无人机厂商
|
function getManufacturerInfoApi() {
|
if (searchFacturerName.value === '') {
|
uni.showToast({
|
title: '请输入搜索内容',
|
icon: 'none'
|
})
|
return
|
}
|
loadingManufacturer.value = true
|
manufacturerInfoApi({
|
unitName: searchFacturerName.value,
|
current: 1,
|
size: 1000,
|
}).then(res => {
|
loadingManufacturer.value = false
|
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)
|
const response = await uni.request({
|
url: 'https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/xzqh/index.json',
|
method: 'GET',
|
timeout: 10000, // 10秒超时
|
dataType: 'json'
|
})
|
|
// 检查响应
|
if (response.statusCode === 200) {
|
areaData.value = response.data
|
console.log('请求成功:', data)
|
// 处理数据
|
} else {
|
console.error('请求失败:', response)
|
throw new Error(`请求失败: ${response.statusCode}`)
|
}
|
})
|
</script>
|
<style scoped lang="scss">
|
.deviceRegistration {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
// padding: 24rpx;
|
|
.select-wrapper {
|
position: relative;
|
width: 100%;
|
|
.select-icon {
|
position: absolute;
|
right: 20rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
color: #999;
|
font-size: 24rpx;
|
pointer-events: none;
|
}
|
}
|
|
: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;
|
border-color: #265CFD;
|
}
|
|
:deep(.u-form) {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
overflow-y: auto;
|
box-sizing: border-box;
|
padding: 24rpx;
|
}
|
|
:deep(.u-button) {
|
width: 80%;
|
padding: 28rpx;
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
margin-bottom: 20rpx;
|
}
|
|
:deep(.u-form-item) {
|
margin-bottom: 20rpx;
|
padding: 16rpx 24rpx 18rpx 24rpx;
|
border-radius: 6px 6px 6px 6px;
|
background: white;
|
:deep(.u-line) {
|
border-bottom: 1px solid #EFEFEF;
|
}
|
:deep(.u-input) {
|
width: 100%;
|
height: 80rpx;
|
border-radius: 8rpx;
|
padding: 0 20rpx;
|
background-color: #f5f5f5;
|
|
&::placeholder {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #D2D2D2;
|
}
|
}
|
|
.clickable-input {
|
width: 100%;
|
cursor: pointer;
|
}
|
|
:deep(.u-form-item__label) {
|
margin-bottom: 20rpx;
|
// font-weight: bold;
|
// color: #333;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222324;
|
}
|
|
:deep(.u-form-item__required) {
|
color: #FF2600;
|
margin-right: 8rpx;
|
}
|
}
|
.uni-scroll-view {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.select-header {
|
display: flex;
|
justify-content: space-between;
|
padding: 20rpx 20rpx;
|
font-size: 32rpx;
|
color: #222324;
|
.select-header-btn {
|
display: flex;
|
font-size: 28rpx;
|
color: #1D6FE9;
|
.cancel-btn {
|
color: #86909C;
|
margin-right: 20rpx;
|
}
|
}
|
}
|
|
.select-content {
|
height: 600rpx;
|
text-align: center;
|
padding: 20rpx 20rpx;
|
.loading-container {
|
height: 600rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
