From 08a8157bcea47af44cc5477e5f698a0cea22a69c Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Tue, 04 Aug 2026 16:41:29 +0800
Subject: [PATCH] feat:下拉框增加灰色
---
applications/task-work-order/src/views/orderView/flyingHand/FlyingHandDialog.vue | 231 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 173 insertions(+), 58 deletions(-)
diff --git a/applications/task-work-order/src/views/orderView/flyingHand/FlyingHandDialog.vue b/applications/task-work-order/src/views/orderView/flyingHand/FlyingHandDialog.vue
index 61aa55f..0def9b4 100644
--- a/applications/task-work-order/src/views/orderView/flyingHand/FlyingHandDialog.vue
+++ b/applications/task-work-order/src/views/orderView/flyingHand/FlyingHandDialog.vue
@@ -7,25 +7,90 @@
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">{{ getTaskTypeLabel(formData.skilledTaskType, workOrderTypeXT) }}</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">{{ formData.flyerAddress }}</div>
+ </el-col>
+ <el-col :span="24">
+ <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"
+ class="gd-dialog-form"
+ label-width="auto"
+ v-else
>
<el-row>
<el-col :span="12">
- <el-form-item label="飞手姓名" prop="flyerName">
- <el-select
+ <el-form-item label="飞手姓名" prop="flyerId">
+ <el-select v-if="dialogType === 'add'"
class="gd-select"
popper-class="gd-select-popper"
- v-model="formData.flyerName"
- placeholder="请选择飞手姓名"
- :disabled="dialogType === 'view'"
+ v-model="formData.flyerId"
+ placeholder="请选择"
+ clearable
+ @change="handleChange"
>
<el-option
v-for="item in flyingHandList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ <el-select v-else
+ class="gd-select"
+ popper-class="gd-select-popper"
+ v-model="formData.flyerId"
+ placeholder="请选择"
+ clearable
+ :disabled="dialogType === 'edit'"
+ >
+ <el-option
+ v-for="item in flyingHandEditList"
:key="item.id"
:label="item.name"
:value="item.id"
@@ -38,8 +103,8 @@
<el-input
class="gd-input"
v-model="formData.flyerPhone"
- placeholder="请输入飞手电话"
- :disabled="dialogType === 'view'"
+ placeholder="请输入"
+ :disabled="true"
/>
</el-form-item>
</el-col>
@@ -48,9 +113,9 @@
<el-input
class="gd-input"
v-model.number="formData.flightHours"
- placeholder="请输入飞行时长"
+ placeholder="请输入"
type="number"
- :disabled="dialogType === 'view'"
+ :disabled="true"
/>
</el-form-item>
</el-col>
@@ -60,7 +125,7 @@
class="gd-select"
popper-class="gd-select-popper"
v-model="formData.technicalStrength"
- placeholder="请选择技术特长"
+ placeholder="请选择"
:disabled="dialogType === 'view'"
>
<el-option
@@ -78,7 +143,8 @@
class="gd-select"
popper-class="gd-select-popper"
v-model="formData.skilledUavType"
- placeholder="请选择擅长机型"
+ placeholder="请选择"
+ :disabled="dialogType === 'view'"
clearable
@change="handleSearch"
>
@@ -93,28 +159,25 @@
</el-col>
<el-col :span="12">
<el-form-item label="擅长任务类型" prop="skilledTaskType">
- <el-select
- class="gd-select"
- popper-class="gd-select-popper"
+ <el-cascader
+ class="gd-cascader"
+ popper-class="gd-cascader-popper"
v-model="formData.skilledTaskType"
- placeholder="请选择擅长任务类型"
+ :options="workOrderTypeXT"
+ :props="{ ...taskTypeCascaderProps, multiple: true }"
+ placeholder="请选择"
:disabled="dialogType === 'view'"
- >
- <el-option
- v-for="item in dictObj.skilledTaskType"
- :key="item.dictKey"
- :label="item.dictValue"
- :value="item.dictKey"
- />
- </el-select>
+ clearable
+ collapse-tags
+ />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="项目经验" prop="projectExperience">
<el-input
- class="gd-input"
+ class="gd-input-text"
v-model="formData.projectExperience"
- placeholder="请输入项目经验"
+ placeholder="请输入"
type="textarea"
rows="3"
:disabled="dialogType === 'view'"
@@ -124,13 +187,14 @@
</el-row>
</el-form>
<template #footer>
- <el-button @click="handleClose">取消</el-button>
+ <el-button v-if="dialogType !== 'view'" color="#F2F3F5" @click="handleClose">取消</el-button>
<el-button
v-if="dialogType !== 'view'"
type="primary"
+ color="#4C34FF"
@click="handleSubmit"
>
- 确定
+ 保存
</el-button>
</template>
</el-dialog>
@@ -139,6 +203,13 @@
import { ref, reactive, computed, watch, inject } from 'vue'
import { submitFlyingHand } from './flyingHandApi'
import { ElMessage } from 'element-plus'
+import { getDictLabel } from '@ztzf/utils'
+import {
+ getTaskTypeLabel,
+ taskTypeCascaderProps,
+} from '../orderManage/taskTypeOptions'
+
+import { fieldRules } from '@ztzf/utils'
const props = defineProps({
modelValue: {
@@ -157,8 +228,11 @@
})
const dictObj = inject('dictObj') // 擅长任务类型
+const workOrderTypeXT = inject('workOrderTypeXT', ref([]))
const flyingHandList = inject('flyingHandList') // 飞手列表
+const flyingHandEditList = inject('flyingHandEditList') // 飞手建档列表
+
const emit = defineEmits(['update:modelValue', 'confirm'])
@@ -170,46 +244,72 @@
const dialogTitle = computed(() => {
switch (props.dialogType) {
case 'add':
- return '添加飞手信息'
+ return '飞手建档'
case 'edit':
- return '编辑飞手信息'
+ return '编辑'
case 'view':
- return '查看飞手信息'
+ return '查看'
default:
return '飞手信息'
}
})
const formRef = ref(null)
-const formData = reactive({
+
+const initForm = () => ({
flyerName: '',
+ flyerId: '',
flyerPhone: '',
flightHours: 0,
projectExperience: '',
technicalStrength: '',
- skilledUavType: ''
+ skilledUavType: '',
+ skilledTaskType: [],
+ certification: [], // 证书
+ regionCode: '', // 区域编码
+ flyerAddress: '', // 飞手地址
})
+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 = {
- flyerName: [
- { required: true, message: '请输入飞手姓名', trigger: 'blur' }
+ 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' }
- ],
+ // flyerPhone: [
+ // { required: true, 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' }
+ { required: true, message: '请选择', trigger: 'change' }
],
skilledTaskType: [
- { required: true, message: '请选择擅长任务类型', trigger: 'change' }
+ { required: true, message: '请选择', trigger: 'change' }
],
projectExperience: [
- { required: true, message: '请输入项目经验', trigger: 'blur' }
+ { required: true, message: '请输入', trigger: 'blur' }
+ ],
+ technicalStrength: [
+ { required: true, message: '请选择', trigger: 'change' }
+ ],
+ skilledUavType: [
+ { required: true, message: '请选择', trigger: 'change' }
]
}
@@ -217,8 +317,11 @@
watch(
() => props.flyingHandData,
(newData) => {
+ formData.value = initForm()
if (newData) {
- Object.assign(formData, newData)
+ Object.assign(formData.value, newData)
+ formData.value.flightHours = Number(newData.flightHours)
+ formData.value.skilledTaskType = newData.skilledTaskType || []
}
},
{ deep: true, immediate: true }
@@ -230,19 +333,31 @@
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.flyerPhone = result.phone
+ formData.value.flightHours = result.duration || 0
+ formData.value.flyerAddress = result.address
+ // formData.value.certification = formData.value.certification.concat(result.licenseFrontFileUrl || [], result.licenseBackFileUrl || [])
+}
+
+
+
// 重置表单
function resetForm() {
formRef.value?.resetFields()
// 重置为默认值
- Object.assign(formData, {
- name: '',
- phone: '',
+ Object.assign(formData.value, {
+ flyerName: '',
+ flyerPhone: '',
flightHours: 0,
projectExperience: '',
- technicalSkills: '',
- technicalExpertise: '',
- goodAtAircraftType: '',
- goodAtTaskType: ''
+ technicalStrength: '',
+ skilledUavType: '',
+ skilledTaskType: []
})
}
@@ -255,10 +370,10 @@
try {
if (props.dialogType === 'add') {
- await submitFlyingHand(formData)
+ await submitFlyingHand(formData.value)
ElMessage.success('添加成功')
} else if (props.dialogType === 'edit') {
- await submitFlyingHand(formData)
+ await submitFlyingHand(formData.value)
ElMessage.success('编辑成功')
}
emit('confirm')
@@ -275,4 +390,4 @@
margin-bottom: 20px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3