| | |
| | | :title="titleEnum[dialogMode]" |
| | | @closed="visible = false" |
| | | destroy-on-close |
| | | width="60%" |
| | | width="75%" |
| | | :close-on-click-modal="false" |
| | | > |
| | | <div class="gd-dialog-form"> |
| | |
| | | </div> |
| | | |
| | | <!-- 工单信息展示 --> |
| | | <div class="work-order-info" v-if="selectedWorkOrder"> |
| | | <div class="work-order-info"> |
| | | <el-row class="detail-row-view"> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="label">工单类型</span> |
| | | <span class="val">{{ getDictLabel(selectedWorkOrder.workOrderType, dictObj.workOrderType) }}</span> |
| | | <span class="val" v-if="selectedWorkOrder"> |
| | | {{ getDictLabel(selectedWorkOrder.workOrderType, dictObj.workOrderType) }} |
| | | </span> |
| | | <span class="val grayText" v-else>选择工单后自动带出</span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="label">执行时间范围</span> |
| | | <span class="val">{{ selectedWorkOrder.executeStartTime }} ~ {{ selectedWorkOrder.executeEndTime }}</span> |
| | | <span class="val" v-if="selectedWorkOrder"> |
| | | {{ selectedWorkOrder.executeStartTime }} ~ {{ selectedWorkOrder.executeEndTime }} |
| | | </span> |
| | | <span class="val grayText" v-else>选择工单后自动带出</span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="label">设备需求</span> |
| | | <span class="val">{{ getDictLabel(selectedWorkOrder.deviceLoadDemand, dictObj.deviceLoadDemand) }}</span> |
| | | <span class="val" v-if="selectedWorkOrder"> |
| | | {{ getDictLabel(selectedWorkOrder.deviceLoadDemand, dictObj.deviceLoadDemand) }} |
| | | </span> |
| | | <span class="val grayText" v-else>选择工单后自动带出</span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div class="info-item"> |
| | | <span class="label">工单备注</span> |
| | | <span class="val">{{ selectedWorkOrder.remark }}</span> |
| | | <span class="val" v-if="selectedWorkOrder">{{ selectedWorkOrder.remark }}</span> |
| | | <span class="val grayText" v-else>选择工单后自动带出</span> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | |
| | | <!-- 子任务表格表单 --> |
| | | <div class="task-table-section" v-if="selectedWorkOrderId"> |
| | | <div |
| | | class="task-table-section" |
| | | :class="{ 'disabled-section': !selectedWorkOrderId }" |
| | | @click="handleTaskSectionClick" |
| | | > |
| | | <div class="detail-title" :style="{ marginTop: pxToRem(10) }">添加子任务</div> |
| | | <div class="task-table-container"> |
| | | <el-table :data="taskList"> |
| | | <el-table-column width="50" label=""> |
| | | <template v-slot="{ $index }">{{ $index + 1 }}</template> |
| | | </el-table-column> |
| | | <el-table-column prop="patrolTaskName" label="巡查任务名称" min-width="120"> |
| | | <el-table-column prop="patrolTaskName" min-width="120"> |
| | | <template #header> |
| | | <span class="required-star">*</span> |
| | | 巡查任务名称 |
| | | </template> |
| | | <template v-slot="{ row }"> |
| | | <el-input |
| | | class="gd-input" |
| | |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="patrolTaskType" label="巡查任务类型" min-width="140"> |
| | | <el-table-column prop="patrolTaskType" min-width="140"> |
| | | <template #header> |
| | | <span class="required-star">*</span> |
| | | 巡查任务类型 |
| | | </template> |
| | | <template v-slot="{ row, $index }"> |
| | | <el-select |
| | | class="gd-select" |
| | | popper-class="gd-select-popper" |
| | | v-model="row.patrolTaskType" |
| | | placeholder="请选择" |
| | | :disabled="dialogReadonly" |
| | | @change="handlePatrolTaskTypeChange($index, $event)" |
| | | > |
| | | <el-option |
| | | v-for="item in dictObj.patrolTaskType" |
| | | 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" label="任务执行时间" min-width="180"> |
| | | <el-table-column prop="executeTime" min-width="180"> |
| | | <template #header> |
| | | <span class="required-star">*</span> |
| | | 任务执行时间 |
| | | </template> |
| | | <template v-slot="{ row }"> |
| | | <!-- gd-date-picker-popper--> |
| | | <el-date-picker |
| | | class="gd-date-picker" |
| | | popper-class="gd-date-picker-popper" |
| | | popper-class="" |
| | | v-model="row.executeTime" |
| | | type="datetime" |
| | | placeholder="请选择" |
| | |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="patrolRouteUrl" label="巡查任务航线" min-width="120"> |
| | | <el-table-column prop="patrolRouteUrl" min-width="120"> |
| | | <template #header> |
| | | <span class="required-star">*</span> |
| | | 巡查任务航线 |
| | | </template> |
| | | <template v-slot="{ row }"> |
| | | <el-select |
| | | class="gd-select" |
| | |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="recommendFlyerName" label="推荐飞手" min-width="120"> |
| | | <el-table-column prop="recommendFlyerName" min-width="120"> |
| | | <template #header> |
| | | <span class="required-star">*</span> |
| | | 推荐飞手 |
| | | </template> |
| | | <template v-slot="{ row, $index }"> |
| | | <el-select |
| | | no-data-text="暂无推荐飞手" |
| | | class="gd-select" |
| | | popper-class="gd-select-popper" |
| | | v-model="row.recommendFlyerName" |
| | |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="deviceId" label="选择设备" min-width="120"> |
| | | <el-table-column prop="deviceId" min-width="120"> |
| | | <template #header> |
| | | <span class="required-star">*</span> |
| | | 选择设备 |
| | | </template> |
| | | <template v-slot="{ row }"> |
| | | <el-select |
| | | class="gd-select" |
| | |
| | | <el-input class="gd-input" v-model="row.taskDesc" placeholder="请输入" :disabled="dialogReadonly" /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="80" fixed="right" v-if="dialogMode === 'add'"> |
| | | <el-table-column label="操作" width="90" fixed="right" v-if="dialogMode === 'add'"> |
| | | <template v-slot="{ $index }"> |
| | | <el-button type="primary" :icon="Plus" circle size="small" @click="addTaskRow" /> |
| | | <el-button |
| | |
| | | deviceId: null, |
| | | taskDesc: '', |
| | | }) |
| | | // todo 时间线 |
| | | const dictObj = inject('dictObj') |
| | | |
| | | const emit = defineEmits(['success']) |
| | | const visible = defineModel() // 弹框显隐 |
| | | const dialogMode = ref('add') // 弹框模式 |
| | | const submitting = ref(false) // 提交中 |
| | | const dialogReadonly = computed(() => dialogMode.value === 'view') |
| | | const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' }) |
| | | const titleEnum = ref({ edit: '新增', view: '查看', add: '新增' }) |
| | | |
| | | // 工单相关 |
| | | const workOrderList = ref([]) // 工单列表 |
| | |
| | | const routeOptions = inject('routeOptions') |
| | | |
| | | // 子任务列表 |
| | | const taskList = ref([initTaskRow()]) |
| | | const taskList = ref([initTaskRow(), initTaskRow(), initTaskRow(), initTaskRow(), initTaskRow()]) |
| | | |
| | | // 处理工单选择变化 |
| | | function handleWorkOrderChange(val) { |
| | | if (val) { |
| | | selectedWorkOrder.value = workOrderList.value.find(item => item.id === val) |
| | | // 将工单类型赋值给所有子任务行 |
| | | const workOrderType = selectedWorkOrder.value?.workOrderType |
| | | if (workOrderType) { |
| | | taskList.value.forEach((task, index) => { |
| | | task.patrolTaskType = workOrderType |
| | | // 获取对应的飞手列表 |
| | | getFlyerList(index, workOrderType) |
| | | }) |
| | | } |
| | | } else { |
| | | selectedWorkOrder.value = null |
| | | } |
| | |
| | | |
| | | // 添加任务行 |
| | | function addTaskRow() { |
| | | taskList.value.push(initTaskRow()) |
| | | const newTask = initTaskRow() |
| | | // 如果已选择工单,自动填充工单类型 |
| | | if (selectedWorkOrder.value?.workOrderType) { |
| | | newTask.patrolTaskType = selectedWorkOrder.value.workOrderType |
| | | } |
| | | const newIndex = taskList.value.length |
| | | taskList.value.push(newTask) |
| | | // 获取对应的飞手列表 |
| | | if (newTask.patrolTaskType) { |
| | | getFlyerList(newIndex, newTask.patrolTaskType) |
| | | } |
| | | } |
| | | |
| | | // 删除任务行 |
| | |
| | | } |
| | | } |
| | | |
| | | // 处理任务区域点击事件(未选择工单时提示) |
| | | function handleTaskSectionClick() { |
| | | if (!selectedWorkOrderId.value) { |
| | | ElMessage.warning('请先选择工单') |
| | | } |
| | | } |
| | | |
| | | // 获取工单列表 |
| | | async function getWorkOrderList() { |
| | | const res = await gdWorkOrderPageApi({ size: 999, workOrderStatus: dialogMode.value ==='add' ? '20' : '' }) |
| | | const res = await gdWorkOrderPageApi({ size: 999, workOrderStatus: dialogMode.value === 'add' ? '20' : '' }) |
| | | workOrderList.value = res?.data?.data?.records ?? [] |
| | | } |
| | | |
| | |
| | | async function getFlyerList(index, skilledTaskType) { |
| | | const res = await gdFlyerPageApi({ |
| | | size: 999, |
| | | current: 1, |
| | | skilledTaskType, |
| | | }) |
| | | flyerListMap.value[index] = res?.data?.data?.records ?? [] |
| | |
| | | // 获取设备列表 |
| | | async function getDeviceList() { |
| | | const res = await gdManageDeviceListApi({ |
| | | deviceIds: selectedWorkOrder.value.recommendDeviceIds, |
| | | deviceIds: selectedWorkOrder.value?.recommendDeviceIds, |
| | | }) |
| | | deviceList.value = res?.data?.data ?? [] |
| | | } |
| | |
| | | watch( |
| | | () => selectedWorkOrderId.value, |
| | | () => { |
| | | handleWorkOrderChange(selectedWorkOrderId.value) |
| | | getDeviceList() |
| | | } |
| | | ) |
| | | |
| | | // 判断一行是否已填写(至少填写了任务名称) |
| | | function isTaskRowFilled(task) { |
| | | return !!(task.patrolTaskName || task.executeTime || task.patrolRouteUrl || task.recommendFlyerName || task.deviceId) |
| | | } |
| | | |
| | | // 提交新增 |
| | | async function handleSubmit() { |
| | |
| | | ElMessage.warning('请选择关联工单') |
| | | return |
| | | } |
| | | if (!taskList.value.length) { |
| | | ElMessage.warning('请添加至少一个子任务') |
| | | // 过滤出已填写的任务行 |
| | | const filledTasks = taskList.value.filter(task => isTaskRowFilled(task)) |
| | | if (!filledTasks.length) { |
| | | ElMessage.warning('请至少填写一个子任务') |
| | | return |
| | | } |
| | | // 校验子任务 |
| | | // 只校验已填写的子任务 |
| | | for (let i = 0; i < taskList.value.length; i++) { |
| | | const task = taskList.value[i] |
| | | // 跳过未填写的行 |
| | | if (!isTaskRowFilled(task)) continue |
| | | // 已填写的行需要校验完整性 |
| | | if (!task.patrolTaskName) { |
| | | ElMessage.warning(`第${i + 1}行: 请输入巡查任务名称`) |
| | | return |
| | |
| | | } |
| | | submitting.value = true |
| | | try { |
| | | const preID = taskList.value[0].id |
| | | const dataList = taskList.value.map(item => ({ |
| | | const preID = filledTasks[0]?.id |
| | | // 只提交已填写的任务行 |
| | | const dataList = filledTasks.map(item => ({ |
| | | ...item, |
| | | workOrderId: selectedWorkOrderId.value, |
| | | id: undefined, |
| | |
| | | // 打开弹框 |
| | | async function open({ mode = 'add', row } = {}) { |
| | | dialogMode.value = mode |
| | | await getWorkOrderList() |
| | | if (dialogMode.value === 'add') { |
| | | selectedWorkOrderId.value = null |
| | | selectedWorkOrder.value = null |
| | | taskList.value = [initTaskRow()] |
| | | taskList.value = [initTaskRow(), initTaskRow(), initTaskRow(), initTaskRow(), initTaskRow()] |
| | | flyerListMap.value = {} |
| | | } else { |
| | | // 编辑/查看模式 - 加载已有数据 |
| | |
| | | getFlyerList(0, row.patrolTaskType) |
| | | } |
| | | } |
| | | getWorkOrderList() |
| | | } |
| | | |
| | | onMounted(() => { |
| | | |
| | | }) |
| | | onMounted(() => {}) |
| | | |
| | | defineExpose({ open }) |
| | | </script> |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .required-star { |
| | | color: #f56c6c; |
| | | margin-right: 4px; |
| | | } |
| | | :deep(.el-table__header th) { |
| | | font-weight: normal !important; |
| | | } |
| | | |
| | | .grayText { |
| | | color: #9f9f9f !important; |
| | | } |
| | | |
| | | // 禁用区域样式 - 使用 pointer-events: none 禁用所有子元素的点击 |
| | | .disabled-section { |
| | | .task-table-container { |
| | | * { |
| | | pointer-events: none; |
| | | } |
| | | } |
| | | opacity: 0.6; |
| | | cursor: not-allowed; |
| | | } |
| | | </style> |