<!-- 飞行器详情 -->
|
<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"
|
>
|
<u-input v-model="formParams.name" readonly border="none"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="SN(出厂序列号)"
|
labelWidth="230rpx"
|
prop="sn"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input v-model="formParams.sn" readonly border="none"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行器厂商"
|
labelWidth="230rpx"
|
prop="manufacturer"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.manufacturerText"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行器型号"
|
labelWidth="200rpx"
|
prop="model"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.model" readonly border="none"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="是否改装"
|
labelWidth="200rpx"
|
prop="isModified"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.isModified"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行器类型"
|
labelWidth="200rpx"
|
prop="type"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.type"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="持有人"
|
labelWidth="200rpx"
|
prop="holder"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.holder"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="购买日期"
|
labelWidth="200rpx"
|
prop="purchaseDate"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input v-model="formParams.purchaseDate" readonly border="none" placeholder="请选择日期" suffixIcon="calendar"></u-input>
|
</u-form-item>
|
<u-form-item
|
label="有无保险"
|
labelWidth="230rpx"
|
prop="hasInsurance"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.hasInsurance"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="所属区域"
|
labelWidth="230rpx"
|
prop="region"
|
:borderBottom="true"
|
ref="item2"
|
>
|
<u-input
|
v-model="formParams.region"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="民用航空器登记证书"
|
labelWidth="300rpx"
|
prop="caacRegistrationCode"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.caacRegistrationCode"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="飞行器照片"
|
labelWidth="200rpx"
|
prop="deviceImage"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.deviceImage"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
<u-form-item
|
label="备注"
|
labelWidth="200rpx"
|
prop="remarks"
|
:borderBottom="true"
|
ref="item1"
|
>
|
<u-input
|
v-model="formParams.remarks"
|
readonly
|
border="none"
|
></u-input>
|
</u-form-item>
|
</u-form>
|
</view>
|
</template>
|
<script setup>
|
import { aircraftInfoSaveApi,uploadFileApi, areaDataApi, proTypeApi, manufacturerInfoApi, aircraftInfoDetailsApi } from '@/api/index'
|
import { ref, computed, onMounted } from 'vue'
|
import dayjs from 'dayjs'
|
import { onHide, onShow, onLoad } from "@dcloudio/uni-app";
|
|
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({})
|
// 是否改装
|
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) => {
|
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([
|
{
|
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 onPickerConfirmManufacturer = (e) => {
|
const selected = e.value[0]
|
formParams.value.manufacturer = selected.value
|
formParams.value.manufacturerText = selected.label
|
showManufacturer.value = false
|
}
|
// 飞行器型号
|
const showType = ref(false);
|
const typeList = ref([])
|
// 选择飞行器型号
|
const onPickerConfirmType = (e) => {
|
const selected = e.value[0]
|
formParams.value.type = selected.value
|
formParams.value.typeText = selected.label
|
showType.value = false
|
}
|
// 获取所属单位
|
const isShowRegion = ref(false)
|
const areaData = ref([])
|
// function getAreaData() {
|
// areaDataApi().then(res => {
|
// if (res.data.code === 200) {
|
// areaData.value = res.data.data
|
// }
|
// })
|
// }
|
// 获取飞行器类型
|
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,
|
// }))
|
console.log(formParams.value.manufacturer, res.data.data.records.find(item => item.id === formParams.value.manufacturer))
|
formParams.value.manufacturerText = res.data.data.records.find(item => item.id === formParams.value.manufacturer)?.unitName || ''
|
})
|
}
|
onLoad((options) => {
|
aircraftInfoDetailsApi(options.id).then(res => {
|
formParams.value = res.data.data
|
formParams.value.isModified = res.data.data.isModified ? '是' : '否'
|
formParams.value.hasInsurance = res.data.data.hasInsurance === '1' ? '有' : '无'
|
// formParams.value.manufacturer = manufacturerList.value.find(item => item.value === res.data.data.manufacturer)?.label || ''
|
formParams.value.type = typeList.value.find(item => item.value === res.data.data.type)?.label || ''
|
formParams.value.region = res.data.data.region
|
getManufacturerInfoApi()
|
})
|
|
|
})
|
onMounted(async () => {
|
// getManufacturerInfoApi()
|
getProTypeApi()
|
// 动态导入xzqhData，确保在使用前已初始化
|
const { xzqhData } = await import('@/static/xzqh/index')
|
areaData.value = xzqhData
|
})
|
</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;
|
}
|
}
|
|
.upload {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 15px;
|
color: #1D6FE9;
|
}
|
|
: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;
|
}
|
}
|
}
|
</style>
|
