<!-- 飞手信息弹窗 -->
|
<template>
|
<el-dialog
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
class="gd-dialog"
|
destroy-on-close
|
:close-on-click-modal="false"
|
>
|
<el-row class="detail-row-view" v-if="dialogType === 'view'">
|
<el-col :span="12">
|
<div class="label">飞手姓名</div>
|
<div class="val">{{ formData.flyerName }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">飞手电话</div>
|
<div class="val">{{ formData.flyerPhone }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">飞行时长</div>
|
<div class="val">{{ formData.flightHours }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">技术特长</div>
|
<div class="val">{{ getDictLabel(formData.technicalStrength, dictObj.technicalStrength) }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">擅长机型</div>
|
<div class="val">{{ getDictLabel(formData.skilledUavType, dictObj.skilledUavType) }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">擅长任务类型</div>
|
<div class="val">{{ getDictLabel(formData.skilledTaskType, dictObj.skilledTaskType) }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">项目经验</div>
|
<div class="val">{{ formData.projectExperience }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">飞手证书</div>
|
<div class="val">
|
<el-image
|
v-for="(item, index) in formData.certification"
|
:key="index"
|
:src="item"
|
:preview-src-list="formData.certification"
|
class="gd-image"
|
style="width: 100px; height: 100px; margin-right: 10px;"
|
/>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-form
|
ref="formRef"
|
:model="formData"
|
:rules="rules"
|
class="gd-form"
|
label-width="160px"
|
v-else
|
>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="飞手姓名" prop="flyerId">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.flyerId"
|
placeholder="请选择"
|
clearable
|
@change="handleChange"
|
:disabled="dialogType === 'view'"
|
>
|
<el-option
|
v-for="item in flyingHandList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="飞手电话" prop="flyerPhone">
|
<el-input
|
class="gd-input"
|
v-model="formData.flyerPhone"
|
placeholder="请输入"
|
:disabled="dialogType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="飞行时长(小时)" prop="flightHours">
|
<el-input
|
class="gd-input"
|
v-model.number="formData.flightHours"
|
placeholder="请输入"
|
type="number"
|
:disabled="dialogType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="技术特长" prop="technicalStrength">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.technicalStrength"
|
placeholder="请选择"
|
:disabled="dialogType === 'view'"
|
>
|
<el-option
|
v-for="item in dictObj.technicalStrength"
|
:key="item.dictKey"
|
:label="item.dictValue"
|
:value="item.dictKey"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="擅长机型" prop="skilledUavType">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.skilledUavType"
|
placeholder="请选择"
|
:disabled="dialogType === 'view'"
|
clearable
|
@change="handleSearch"
|
>
|
<el-option
|
v-for="item in dictObj.skilledUavType"
|
:key="item.dictKey"
|
:label="item.dictValue"
|
:value="item.dictKey"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="擅长任务类型" prop="skilledTaskType">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.skilledTaskType"
|
placeholder="请选择"
|
:disabled="dialogType === 'view'"
|
>
|
<el-option
|
v-for="item in dictObj.skilledTaskType"
|
:key="item.dictKey"
|
:label="item.dictValue"
|
:value="item.dictKey"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="项目经验" prop="projectExperience">
|
<el-input
|
class="gd-input"
|
v-model="formData.projectExperience"
|
placeholder="请输入"
|
type="textarea"
|
rows="3"
|
:disabled="dialogType === 'view'"
|
/>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="24" v-if="dialogType === 'view'">
|
<el-form-item label="飞手证书" prop="certification">
|
<el-image
|
v-for="(item, index) in formData.certification"
|
:key="index"
|
:src="item"
|
:preview-src-list="formData.certification"
|
class="gd-image"
|
style="width: 100px; height: 100px; margin-right: 10px;"
|
/>
|
</el-form-item>
|
</el-col> -->
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button color="#F2F3F5" @click="handleClose">取消</el-button>
|
<el-button
|
v-if="dialogType !== 'view'"
|
type="primary"
|
color="#4C34FF"
|
@click="handleSubmit"
|
>
|
确定
|
</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
<script setup>
|
import { ref, reactive, computed, watch, inject } from 'vue'
|
import { submitFlyingHand } from './flyingHandApi'
|
import { ElMessage } from 'element-plus'
|
import { getDictLabel } from '@ztzf/utils'
|
|
import { fieldRules } from '@ztzf/utils'
|
|
const props = defineProps({
|
modelValue: {
|
type: Boolean,
|
default: false
|
},
|
dialogType: {
|
type: String,
|
default: 'add', // add, edit, view
|
validator: (value) => ['add', 'edit', 'view'].includes(value)
|
},
|
flyingHandData: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
|
const dictObj = inject('dictObj') // 擅长任务类型
|
|
const flyingHandList = inject('flyingHandList') // 飞手列表
|
|
const emit = defineEmits(['update:modelValue', 'confirm'])
|
|
const dialogVisible = computed({
|
get: () => props.modelValue,
|
set: (value) => emit('update:modelValue', value)
|
})
|
|
const dialogTitle = computed(() => {
|
switch (props.dialogType) {
|
case 'add':
|
return '新增'
|
case 'edit':
|
return '编辑'
|
case 'view':
|
return '查看'
|
default:
|
return '飞手信息'
|
}
|
})
|
|
const formRef = ref(null)
|
|
const initForm = () => ({
|
flyerName: '',
|
flyerId: '',
|
flyerPhone: '',
|
flightHours: 0,
|
projectExperience: '',
|
technicalStrength: '',
|
skilledUavType: '',
|
certification: [], // 证书
|
regionCode: '', // 区域编码
|
})
|
|
const formData = ref(initForm()) // 表单数据
|
|
|
// const rules = {
|
// flyerId: fieldRules(true),
|
// flyerPhone: fieldRules(true, 50),
|
// flightHours: fieldRules(true, 50),
|
// technicalSkills: fieldRules(true, 50),
|
// skilledTaskType: fieldRules(true),
|
// projectExperience: fieldRules(true),
|
// technicalStrength: fieldRules(true),
|
// skilledUavType: fieldRules(true, 50),
|
// }
|
|
const rules = {
|
flyerId: [
|
{ required: true, message: '请输入', trigger: 'blur' }
|
],
|
flyerPhone: [
|
{ required: false, message: '请输入', trigger: 'blur' },
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
],
|
flightHours: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
{ type: 'number', min: 0, message: '飞行时长必须大于等于0', trigger: 'blur' }
|
],
|
technicalSkills: [
|
{ required: true, message: '请选择', trigger: 'change' }
|
],
|
skilledTaskType: [
|
{ required: true, message: '请选择', trigger: 'change' }
|
],
|
projectExperience: [
|
{ required: true, message: '请输入', trigger: 'blur' }
|
],
|
technicalStrength: [
|
{ required: true, message: '请选择', trigger: 'change' }
|
],
|
skilledUavType: [
|
{ required: true, message: '请选择', trigger: 'change' }
|
]
|
}
|
|
// 监听飞手数据变化，更新表单
|
watch(
|
() => props.flyingHandData,
|
(newData) => {
|
formData.value = initForm()
|
if (newData) {
|
Object.assign(formData.value, newData)
|
formData.value.flightHours = Number(newData.flightHours)
|
}
|
},
|
{ deep: true, immediate: true }
|
)
|
|
// 处理关闭
|
function handleClose() {
|
dialogVisible.value = false
|
resetForm()
|
}
|
|
// 处理选择飞手姓名
|
function handleChange(val) {
|
const result = flyingHandList.value.find(item => item.id === val) || []
|
formData.value.flyerName = result.name
|
formData.value.regionCode = result.regionCode
|
formData.value.certification = formData.value.certification.concat(result.licenseFrontFileUrl || [], result.licenseBackFileUrl || [])
|
}
|
|
|
|
// 重置表单
|
function resetForm() {
|
formRef.value?.resetFields()
|
// 重置为默认值
|
Object.assign(formData.value, {
|
flyerName: '',
|
flyerPhone: '',
|
flightHours: 0,
|
projectExperience: '',
|
technicalStrength: '',
|
skilledUavType: '',
|
skilledTaskType: ''
|
})
|
}
|
|
// 处理提交
|
async function handleSubmit() {
|
const isValid = await formRef.value?.validate()
|
if (!isValid) {
|
return
|
}
|
|
try {
|
if (props.dialogType === 'add') {
|
await submitFlyingHand(formData.value)
|
ElMessage.success('添加成功')
|
} else if (props.dialogType === 'edit') {
|
await submitFlyingHand(formData.value)
|
ElMessage.success('编辑成功')
|
}
|
emit('confirm')
|
dialogVisible.value = false
|
resetForm()
|
} catch (error) {
|
ElMessage.error('操作失败')
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.gd-form {
|
.el-form-item {
|
margin-bottom: 20px;
|
}
|
}
|
</style>
|
