feat: 类型多选改造

罗广辉

2026-06-03 d04ecbb2aa47d93e05d28bb551e7bad83d97d60f

 applications/task-work-order/src/views/orderView/orderManage/inspectionRequest/FormDiaLog.vue

@@ -5,7 +5,7 @@
      :title="titleEnum[dialogMode]"
      @closed="visible = false"
      destroy-on-close
      width="75%"
      width="90%"
      :close-on-click-modal="false"
   >
      <div>
@@ -33,7 +33,7 @@
                  <div class="info-item">
                     <span class="label">工单类型</span>
                     <span class="val" v-if="selectedWorkOrder">
                        {{ getDictLabel(selectedWorkOrder.workOrderType, dictObj.workOrderType) }}
                        {{ getTaskTypeLabel(selectedWorkOrder.workOrderType, workOrderTypeXT) }}
                     </span>
                     <span class="val grayText" v-else>选择工单后自动带出</span>
                  </div>
@@ -98,23 +98,18 @@
                        巡查任务类型
                     </template>
                     <template v-slot="{ row, $index }">
                        <el-select
                        <el-cascader
                           class="gd-select"
                           popper-class="gd-select-popper"
                           v-model="row.patrolTaskType"
                           :options="workOrderTypeXT"
                           :props="taskTypeCascaderProps"
                           placeholder="请选择"
                           @change="handlePatrolTaskTypeChange($index, $event)"
                        >
                           <el-option
                              v-for="item in dictObj.workOrderType"
                              :key="item.dictKey"
                              :label="item.dictValue"
                              :value="item.dictKey"
                           />
                        </el-select>
                        />
                     </template>
                  </el-table-column>
                  <el-table-column prop="executeTime" width="100">
                  <el-table-column prop="executeTime" width="200">
                     <template #header>
                        <span class="required-star">*</span>
                        任务执行时间
@@ -165,8 +160,8 @@
                           v-model="row.deviceFlyerId"
                           placeholder="请选择"
                           filterable
                           :disabled="dialogReadonly || !taskList[$index].patrolTaskType"
                           @change="handleFlyerChange($index, $event)"
                           :disabled="dialogReadonly || !hasTaskTypeValue(taskList[$index].patrolTaskType)"

                        >
                           <el-option
                              v-for="item in flyerListMap[$index] || []"
@@ -201,6 +196,30 @@
                        </el-select>
                     </template>
                  </el-table-column>
                  <el-table-column prop="algorithmIds" min-width="160">
                     <template #header>
                        算法
                     </template>
                     <template v-slot="{ row }">
                        <el-tree-select
                           class="gd-select"
                           popper-class="gd-tree-select-popper"
                           v-model="row.algorithmIds"
                           :data="algorithmTreeData"
                           :props="{ label: 'name', children: 'children', value: 'id' }"
                           node-key="id"
                           multiple
                           collapse-tags
                           collapse-tags-tooltip
                           check-strictly
                           filterable
                           placeholder="请选择"
                           :disabled="dialogReadonly"
                        />
                     </template>
                  </el-table-column>


                  <el-table-column prop="taskDesc" label="巡查任务描述">
                     <template v-slot="{ row }">
                        <el-input class="gd-input" v-model="row.taskDesc" placeholder="请输入" :disabled="dialogReadonly" />
@@ -241,25 +260,33 @@
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { computed, ref, onMounted, inject } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import { geomAnalysis, getDictLabel } from '@ztzf/utils'

import { gdPatrolTaskSaveApi, gdFlyerPageApi, gdPatrolTaskAuditApi } from './inspectionRequestApi'
import { gdWorkOrderPageApi } from '../orderManage/orderManageApi'
import { gdManageDeviceListApi } from '../orderManage/gdManageDeviceApi'
import { pxToRem } from '@/utils/rem'
import { airlineListApi } from '@/api/zkxt'
import { airlineListApi, algorithmGroupedApi } from '@/api/zkxt'
import {
   getTaskTypeLabel,
   getTaskTypeLeafValues,
   taskTypeCascaderProps,
   toTaskTypeCascaderValue,
   toTaskTypeRequestValue,
} from '../taskTypeOptions'

// 初始化任务行
const initTaskRow = () => ({
   patrolTaskName: '',
   patrolTaskType: '',
   patrolTaskType: [],
   executeTime: '',
   patrolRouteUrl: '',
   deviceFlyerId: '',
   recommendFlyerName: '',
   deviceId: null,
   algorithmIds: [],
   taskDesc: '',
})
const dictObj = inject('dictObj')
@@ -280,6 +307,27 @@
const deviceList = ref([]) // 设备列表
const routeOptions = ref([]) // 航线选项（根据工单范围获取）
const routeLoading = ref(false) // 航线加载中
const algorithmTreeData = ref([]) // 算法树形数据
const workOrderTypeXT = inject('workOrderTypeXT', ref([]))

// 获取算法分组数据
async function getAlgorithmList() {
   try {
      const res = await algorithmGroupedApi()
      const list = res?.data?.data ?? []
      algorithmTreeData.value = list.map(group => ({
         id: 'group_' + group.type,
         name: group.type,
         disabled: true,
         children: (group.algorithms || []).map(alg => ({
            id: alg.id,
            name: alg.name,
         }))
      }))
   } catch (e) {
      console.error('获取算法列表失败', e)
   }
}

// 子任务列表
const taskList = ref([initTaskRow()])
@@ -293,13 +341,14 @@
      // 将工单类型赋值给所有子任务行
      const workOrderType = selectedWorkOrder.value?.workOrderType
      if (workOrderType) {
         const patrolTaskType = toTaskTypeCascaderValue(workOrderType)
         taskList.value.forEach((task, index) => {
            taskList.value[index] = {
               ...initTaskRow(),
               patrolTaskType: workOrderType,
               patrolTaskType,
            }
            // 获取对应的飞手列表
            getFlyerList(index, workOrderType)
            getFlyerList(index, patrolTaskType)
         })
      }
   } else {
@@ -327,7 +376,7 @@
   const newTask = initTaskRow()
   // 如果已选择工单，自动填充工单类型
   if (selectedWorkOrder.value?.workOrderType) {
      newTask.patrolTaskType = selectedWorkOrder.value.workOrderType
      newTask.patrolTaskType = toTaskTypeCascaderValue(selectedWorkOrder.value.workOrderType)
   }
   const newIndex = taskList.value.length
   taskList.value.push(newTask)
@@ -372,15 +421,11 @@
async function handlePatrolTaskTypeChange(index, skilledTaskType) {
   // 清空该行已选择的飞手
   taskList.value[index].deviceFlyerId = ''
   taskList.value[index].recommendFlyerName = ''
   // 获取对应的飞手列表
   await getFlyerList(index, skilledTaskType)
}

function handleFlyerChange(index, flyerId) {
   const selectedFlyer = (flyerListMap.value[index] || []).find(item => item.flyerId === flyerId)
   taskList.value[index].recommendFlyerName = selectedFlyer?.flyerName || ''
}


import * as turf from '@turf/turf'

@@ -395,11 +440,16 @@

// 获取飞手列表
async function getFlyerList(index, skilledTaskType) {
   const leafValues = getTaskTypeLeafValues(skilledTaskType)
   if (!leafValues.length) {
      flyerListMap.value[index] = []
      return
   }
   const obj = getPolygonCenter(geomAnalysis(selectedWorkOrder.value.geom))
   const res = await gdFlyerPageApi({
      size: 999,
      current: 1,
      skilledTaskType,
      skilledTaskType: leafValues.join(','),
      // longitude: obj.longitude || '',
      // latitude: obj.latitude || '',
   })
@@ -424,7 +474,18 @@

// 判断一行是否已填写（至少填写了任务名称）
function isTaskRowFilled(task) {
   return !!(task.patrolTaskName || task.executeTime || task.patrolRouteUrl || task.deviceFlyerId || task.deviceId)
   return !!(
      task.patrolTaskName ||
      hasTaskTypeValue(task.patrolTaskType) ||
      task.executeTime ||
      task.patrolRouteUrl ||
      task.deviceFlyerId ||
      task.deviceId
   )
}

function hasTaskTypeValue(value) {
   return !!toTaskTypeRequestValue(value).length
}

// 提交新增
@@ -449,7 +510,7 @@
         ElMessage.warning(`第${i + 1}行: 请输入巡查任务名称`)
         return
      }
      if (!task.patrolTaskType) {
      if (!hasTaskTypeValue(task.patrolTaskType)) {
         ElMessage.warning(`第${i + 1}行: 请选择巡查任务类型`)
         return
      }
@@ -476,6 +537,7 @@
      // 只提交已填写的任务行
      const dataList = filledTasks.map(item => ({
         ...item,
         patrolTaskType: toTaskTypeRequestValue(item.patrolTaskType),
         workOrderId: selectedWorkOrderId.value,
         id: undefined,
      }))
@@ -493,6 +555,8 @@
async function open({ mode = 'add', row } = {}) {
   dialogMode.value = mode
   await getWorkOrderList()
   getAlgorithmList()

   if (dialogMode.value === 'add') {
      selectedWorkOrderId.value = null
      selectedWorkOrder.value = null
@@ -502,11 +566,11 @@
      // 编辑/查看模式 - 加载已有数据
      selectedWorkOrderId.value = row?.workOrderId
      handleWorkOrderChange(row?.workOrderId)
      taskList.value = [{ ...row }]
      taskList.value = [{ ...row, patrolTaskType: toTaskTypeCascaderValue(row?.patrolTaskType) }]
      flyerListMap.value = {}
      // 如果有巡查类型，加载对应的飞手列表
      if (row?.patrolTaskType) {
         getFlyerList(0, row.patrolTaskType)
         getFlyerList(0, taskList.value[0].patrolTaskType)
      }
   }
}