更新飞手功能

chenyao

2026-01-27 972bc2b76d535e13c942abf6d90360ca8bb20ef4

更新飞手功能

 applications/task-work-order/src/views/orderView/flyingHand/FlyingHandDialog.vue

New file
@@ -0,0 +1,278 @@
<!-- 飞手信息弹窗 -->
<template>
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        class="gd-dialog"
        destroy-on-close
        :close-on-click-modal="false"
    >
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            class="gd-form"
            label-width="160px"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="飞手姓名" prop="flyerName">
                        <el-select
                            class="gd-select"
                            popper-class="gd-select-popper"
                            v-model="formData.flyerName"
                            placeholder="请选择飞手姓名"
                            :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="请选择擅长机型"
                            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-row>
        </el-form>
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button
                v-if="dialogType !== 'view'"
                type="primary"
                @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'

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 formData = reactive({
    flyerName: '',
    flyerPhone: '',
    flightHours: 0,
    projectExperience: '',
    technicalStrength: '',
    skilledUavType: ''
})

const rules = {
    flyerName: [
        { 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' }
    ]
}

// 监听飞手数据变化，更新表单
watch(
    () => props.flyingHandData,
    (newData) => {
        if (newData) {
            Object.assign(formData, newData)
        }
    },
    { deep: true, immediate: true }
)

// 处理关闭
function handleClose() {
    dialogVisible.value = false
    resetForm()
}

// 重置表单
function resetForm() {
    formRef.value?.resetFields()
    // 重置为默认值
    Object.assign(formData, {
        name: '',
        phone: '',
        flightHours: 0,
        projectExperience: '',
        technicalSkills: '',
        technicalExpertise: '',
        goodAtAircraftType: '',
        goodAtTaskType: ''
    })
}

// 处理提交
async function handleSubmit() {
    const isValid = await formRef.value?.validate()
    if (!isValid) {
        return
    }

    try {
        if (props.dialogType === 'add') {
            await submitFlyingHand(formData)
            ElMessage.success('添加成功')
        } else if (props.dialogType === 'edit') {
            await submitFlyingHand(formData)
            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>

 applications/task-work-order/src/views/orderView/flyingHand/flyingHandApi.js

New file
@@ -0,0 +1,37 @@
import request from '@/axios'

// 飞手分页查询
export function getFlyingHandPage(params) {
    return request({
        url: '/drone-gd/flyer/gdFlyer/page',
        method: 'get',
        params
    })
}

// 飞手提交
export function submitFlyingHand(data) {
    return request({
        url: '/drone-gd/flyer/gdFlyer/submit',
        method: 'post',
        data
    })
}

// 飞手详情查询
export function getFlyingHandDetail(params) {
    return request({
        url: '/drone-gd/flyer/gdFlyer/detail',
        method: 'get',
        params
    })
}

// 飞手删除
export function removeFlyingHand(data) {
    return request({
        url: '/drone-gd/flyer/gdFlyer/remove',
        method: 'post',
        data
    })
}

 applications/task-work-order/src/views/orderView/flyingHand/index.vue

New file
@@ -0,0 +1,223 @@
<!-- 飞手信息管理 -->
<template>
    <basic-container>
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="飞手姓名" prop="flyerName">
                <el-input
                    class="gd-input gray"
                    v-model="searchParams.flyerName"
                    placeholder="请输入飞手姓名"
                    clearable
                    @clear="handleSearch"
                />
            </el-form-item>

            <el-form-item label="擅长机型" prop="skilledUavType">
                <el-select
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.skilledUavType"
                    placeholder="请选择"
                    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-form-item class="gd-search-actions">
                <el-button :icon="RefreshRight" @click="resetForm"></el-button>
                <el-button class="search-btn" :icon="Search" @click="handleSearch"></el-button>
            </el-form-item>
        </el-form>

        <div class="gd-table-toolbar">
            <el-button :icon="Plus" color="#4C34FF" type="primary" @click="addFlyingHand">新增</el-button>
        </div>

        <div class="gd-table-container" v-loading="loading">
            <div class="gd-table-content gd-table-content-bg">
                <el-table class="gd-table" :data="list">
                    <el-table-column type="index" width="64" label="序号" />
                    <el-table-column prop="flyerName" show-overflow-tooltip label="飞手姓名" />
                    <el-table-column prop="flyerPhone" show-overflow-tooltip label="飞手电话" />
                    <el-table-column prop="flightHours" show-overflow-tooltip label="飞行时长(小时)" />
                    <el-table-column prop="projectExperience" show-overflow-tooltip label="项目经验" />
                    <el-table-column prop="technicalStrength" show-overflow-tooltip label="技术特长">
                        <template v-slot="{ row }">
                            {{ getDictLabel(row.technicalStrength, dictObj.technicalStrength) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="skilledUavType" show-overflow-tooltip label="擅长机型" />
                    <el-table-column prop="skilledTaskType" show-overflow-tooltip label="擅长任务类型">
                        <template v-slot="{ row }">
                            {{ getDictLabel(row.skilledTaskType, dictObj.skilledTaskType) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" class-name="operation-btns" width="180">
                        <template v-slot="{ row }">
                            <el-link @click="viewFlyingHand(row)">查看</el-link>
                            <el-link type="primary" @click="editFlyingHand(row)">编辑</el-link>
                            <el-link type="danger" @click="deleteFlyingHand(row.id)">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="gd-pagination-parent">
                <el-pagination
                    popper-class="gd-select-popper"
                    v-model:current-page="searchParams.current"
                    v-model:page-size="searchParams.size"
                    layout="total, prev, pager, next, sizes"
                    :total="total"
                    @change="getList"
                />
            </div>
        </div>

        <!-- 飞手信息弹窗 -->
        <FlyingHandDialog
            ref="flyingHandDialogRef"
            v-model="dialogVisible"
            :dialog-type="dialogType"
            :flying-hand-data="flyingHandData"
            @confirm="handleConfirm"
        />
    </basic-container>
</template>
<script setup>
import { Search, RefreshRight, Plus } from '@element-plus/icons-vue'
import { onMounted, ref, nextTick } from 'vue'
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { getDictLabel } from '@ztzf/utils'
import { getFlyingHandPage, removeFlyingHand } from './flyingHandApi'
import { deviceFlyerApi } from '@/api/zkxt'
import FlyingHandDialog from './FlyingHandDialog.vue'
import { prod } from 'mathjs'

// 初始化查询参数
const initSearchParams = () => ({
    flyerName: '', // 飞手姓名
    skilledUavType: '', // 擅长任务类型
    current: 1, // 当前页
    size: 10, // 每页大小
})
const searchParams = ref(initSearchParams()) // 查询参数
const total = ref(0) // 总条数
const loading = ref(true) // 列表加载中
const list = ref([]) // 列表数据
const queryParamsRef = ref(null) // 查询表单实例
const flyingHandDialogRef = ref(null)
const dialogVisible = ref(false)
const dialogType = ref('add') // add, edit, view
const flyingHandData = ref({})

const dictObj = ref({
    skilledTaskType: [], // 擅长任务类型
    skilledUavType: [], // 擅长机型
    technicalStrength: [] // 技术特长
})

provide('dictObj', dictObj)

// 获取列表
async function getList() {
    loading.value = true
    try {
        const res = await getFlyingHandPage(searchParams.value)
        list.value = res?.data?.data?.records ?? []
        total.value = res?.data?.data?.total ?? 0
    } finally {
        loading.value = false
    }
}

// 查询
function handleSearch() {
    searchParams.value.current = 1
    getList()
}

// 重置查询
function resetForm() {
    queryParamsRef.value?.resetFields()
    searchParams.value.current = 1
    getList()
}

// 添加飞手
function addFlyingHand() {
    dialogType.value = 'add'
    flyingHandData.value = {}
    dialogVisible.value = true
}

// 查看飞手
function viewFlyingHand(row) {
    dialogType.value = 'view'
    flyingHandData.value = { ...row }
    dialogVisible.value = true
}

// 编辑飞手
function editFlyingHand(row) {
    dialogType.value = 'edit'
    flyingHandData.value = { ...row }
    dialogVisible.value = true
}

// 删除飞手
function deleteFlyingHand(id) {
    ElMessageBox.confirm('确定要删除该飞手信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        try {
            await removeFlyingHand(id)
            ElMessage.success('删除成功')
            getList()
        } catch (error) {
            ElMessage.error('删除失败')
        }
    }).catch(() => {
        // 取消删除
    })
}

// 处理弹窗确认
function handleConfirm() {
    dialogVisible.value = false
    getList()
}

// 获取字典
function getDictList() {
    getDictionaryByCode('skilledTaskType,skilledUavType,technicalStrength').then(res => {
        dictObj.value = res.data.data
    })
}

// 获取飞手列表
const flyingHandList = ref([])
function getFlyingHandList() {
    deviceFlyerApi({ current: 1, size: 10 }).then(res => {
        flyingHandList.value = res?.data?.data ?? []
    })
}

provide('flyingHandList', flyingHandList)

onMounted(() => {
    getList()
    getDictList()
    getFlyingHandList()
})
</script>
<style scoped lang="scss"></style>