<template>
|
<el-dialog
|
class="gd-dialog"
|
v-model="visible"
|
:title="titleEnum[dialogMode]"
|
@closed="visible = false"
|
:style="{ width: pxToRem(1216) }"
|
destroy-on-close
|
>
|
<div class="content" style="display: flex">
|
<div class="leftBox">
|
<!-- 查看模式 -->
|
<div class="detail-container" v-if="dialogReadonly">
|
<el-row class="detail-row-view">
|
<el-col :span="12">
|
<div class="label">巡查任务名称</div>
|
<div class="val">{{ formData.patrolTaskName }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">巡查任务类型</div>
|
<div class="val">{{ getDictLabel(formData.patrolTaskType, dictObj.patrolTaskType) }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">任务执行时间</div>
|
<div class="val">{{ formData.executeTime }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">巡查任务航线</div>
|
<div class="val">{{ getRouteName(formData.patrolRouteUrl) }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">推荐飞手</div>
|
<div class="val">{{ formData.recommendFlyerName }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">选择设备</div>
|
<div class="val">{{ getDeviceName(formData.deviceId) }}</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="label">关联工单</div>
|
<div class="val">{{ getWorkOrderName(formData.workOrderId) }}</div>
|
</el-col>
|
<el-col :span="24">
|
<div class="label">巡查任务描述</div>
|
<div class="val">{{ formData.taskDesc }}</div>
|
</el-col>
|
</el-row>
|
<template v-if="['6','7','8'].includes(taskStatus)">
|
<div>任务成功({{list.length || 0}}条)</div>
|
<div style="display: flex">
|
<div v-for="item in list">
|
<el-image
|
v-if="item.resultUrl"
|
:src="item.resultUrl"
|
:preview-src-list="[item.resultUrl]"
|
fit="cover"
|
style="width: 80px; height: 60px"
|
preview-teleported
|
/>
|
</div>
|
</div>
|
</template>
|
</div>
|
|
<!-- 编辑模式 -->
|
<el-form class="gd-dialog-form" v-else ref="formRef" :model="formData" :rules="rules" label-width="110px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="巡查任务名称" prop="patrolTaskName">
|
<el-input class="gd-input" v-model="formData.patrolTaskName" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="巡查任务类型" prop="patrolTaskType">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.patrolTaskType"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option
|
v-for="item in dictObj.patrolTaskType"
|
: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="executeTime">
|
<el-date-picker
|
class="gd-date-picker"
|
popper-class="gd-date-picker-popper"
|
v-model="formData.executeTime"
|
type="datetime"
|
placeholder="请选择"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="巡查任务航线" prop="patrolRouteUrl">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.patrolRouteUrl"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option v-for="item in routeOptions" :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="recommendFlyerName">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.recommendFlyerName"
|
placeholder="请选择"
|
filterable
|
clearable
|
>
|
<el-option v-for="item in flyerList" :key="item.id" :label="item.flyerName" :value="item.flyerName" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="选择设备" prop="deviceId">
|
<el-select
|
class="gd-select"
|
popper-class="gd-select-popper"
|
v-model="formData.deviceId"
|
placeholder="请选择"
|
filterable
|
clearable
|
>
|
<el-option v-for="item in deviceList" :key="item.id" :label="item.nickname" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="关联工单">
|
<span>{{ getWorkOrderName(formData.workOrderId) }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="巡查任务描述" prop="taskDesc">
|
<el-input class="gd-input" type="textarea" v-model="formData.taskDesc" placeholder="请输入" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<!-- 地图组件 -->
|
<CommonCesiumMap
|
ref="mapRef"
|
class="leftMap gd-cesium"
|
:active="visible"
|
:flat-mode="false"
|
:terrain="true"
|
:layer-mode="4"
|
:boundary="false"
|
:zoomToBoundary="false"
|
/>
|
</div>
|
</div>
|
|
<template #footer>
|
<!-- <el-button color="#F2F3F5" @click="visible = false">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>-->
|
<el-button
|
class="save-btn"
|
color="#4C34FF"
|
v-if="!dialogReadonly"
|
:loading="submitting"
|
:disabled="submitting"
|
@click="handleSubmit"
|
>
|
确认
|
</el-button>
|
|
<template v-if="requester">
|
<!-- statusChange(6)-->
|
<el-button color="#F2F3F5" v-if="taskStatus === '1'">拒绝原因</el-button>
|
<el-button color="#F2F3F5" @click="statusChange(3)" v-if="taskStatus === '3'">撤回任务</el-button>
|
<el-button color="#F2F3F5" @click="refusalToAccept" v-if="taskStatus === '6'">拒绝验收</el-button>
|
<el-button color="#F2F3F5" @click="statusChange(6)" v-if="taskStatus === '6'">验收通过</el-button>
|
</template>
|
<template v-else>
|
<el-button color="#F2F3F5" @click="statusChange(2)" v-if="taskStatus === '0'">拒绝签收</el-button>
|
<el-button color="#F2F3F5" @click="statusChange(1)" v-if="taskStatus === '0'">签收</el-button>
|
<el-button color="#F2F3F5" @click="statusChange(5)" v-if="taskStatus === '3'">驳回</el-button>
|
<el-button color="#F2F3F5" @click="statusChange(4)" v-if="taskStatus === '3'">通过</el-button>
|
</template>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, ref, onMounted } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { fieldRules, getDictLabel } from '@ztzf/utils'
|
import { gdPatrolTaskRepublish, gdFlyerPageApi, gdPatrolTaskAuditApi } from './inspectionRequestApi'
|
import { gdWorkOrderPageApi } from '../orderManage/orderManageApi'
|
import { gdManageDeviceListApi } from '../orderManage/gdManageDeviceApi'
|
import { pxToRem } from '@/utils/rem'
|
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
|
import { gdTaskResultListApi } from '@/views/orderView/orderManage/clueEvents/achievementApi'
|
|
// 初始化表单数据
|
const initForm = () => ({
|
id: null,
|
patrolTaskName: '',
|
patrolTaskType: '',
|
executeTime: '',
|
patrolRouteUrl: '',
|
recommendFlyerName: '',
|
deviceId: null,
|
taskDesc: '',
|
workOrderId: null,
|
})
|
|
const mapRef = ref(null)
|
const dictObj = inject('dictObj')
|
const requester = inject('requester')
|
const emit = defineEmits(['success','refusalAccept'])
|
const formRef = ref(null)
|
const formData = ref(initForm())
|
const visible = defineModel()
|
const dialogMode = ref('view')
|
const submitting = ref(false)
|
const dialogReadonly = computed(() => dialogMode.value === 'view')
|
const titleEnum = ref({ edit: '编辑', view: '查看' })
|
const taskStatus = computed(() => formData.value.taskStatus)
|
// 下拉选项
|
const flyerList = ref([])
|
const deviceList = ref([])
|
const workOrderList = ref([])
|
const routeOptions = ref([
|
{ name: '航线1', id: '1' },
|
{ name: '航线2', id: '2' },
|
{ name: '航线3', id: '3' },
|
])
|
|
let viewer
|
|
// 校验规则
|
const rules = {
|
patrolTaskName: fieldRules(true, 50),
|
patrolTaskType: fieldRules(true),
|
executeTime: fieldRules(true),
|
patrolRouteUrl: fieldRules(true),
|
recommendFlyerName: fieldRules(true),
|
deviceId: fieldRules(true),
|
}
|
|
// 获取航线名称
|
function getRouteName(id) {
|
const item = routeOptions.value.find(item => item.id === id)
|
return item ? item.name : id
|
}
|
|
// 获取设备名称
|
function getDeviceName(id) {
|
const item = deviceList.value.find(item => item.id === id)
|
return item ? item.nickname : id
|
}
|
|
// 获取工单名称
|
function getWorkOrderName(id) {
|
const item = workOrderList.value.find(item => item.id === id)
|
return item ? item.workOrderName : id
|
}
|
|
// 获取工单列表
|
async function getWorkOrderList() {
|
const res = await gdWorkOrderPageApi({ size: 999 })
|
workOrderList.value = res?.data?.data?.records ?? []
|
}
|
|
// 获取飞手列表
|
async function getFlyerList() {
|
const res = await gdFlyerPageApi({ size: 999 })
|
flyerList.value = res?.data?.data?.records ?? []
|
}
|
|
// 操作类型：1.同意签收、2.拒绝签收 、3.撤回任务 、4.同意审核、 5.拒绝审核、 6.验收通过、 7.验收拒绝
|
function statusChange(auditStatus) {
|
gdPatrolTaskAuditApi({ auditStatus, id: formData.value.id }).then(res => {
|
visible.value = false
|
emit('success')
|
})
|
}
|
|
function refusalToAccept() {
|
emit('refusalAccept',formData.value)
|
visible.value = false
|
}
|
|
// 获取设备列表
|
async function getDeviceList() {
|
const res = await gdManageDeviceListApi()
|
deviceList.value = res?.data?.data ?? []
|
}
|
|
// 提交编辑
|
async function handleSubmit() {
|
const isValid = await formRef.value?.validate().catch(() => false)
|
if (!isValid) return
|
submitting.value = true
|
try {
|
await gdPatrolTaskRepublish(formData.value)
|
ElMessage.success('更新成功')
|
visible.value = false
|
emit('success')
|
} finally {
|
submitting.value = false
|
}
|
}
|
|
let list = ref([])
|
// 获取成果列表
|
async function getList() {
|
if (!formData.value?.id) return
|
try {
|
const res = await gdTaskResultListApi({ patrolTaskId: formData.value.id })
|
list.value = res?.data?.data ?? []
|
} finally {
|
}
|
}
|
|
// 打开弹框
|
async function open({ mode = 'view', row } = {}) {
|
dialogMode.value = mode
|
formData.value = { ...initForm(), ...row };
|
['6','7','8'].includes(row.taskStatus) && getWorkOrderList()
|
initMap()
|
}
|
|
// 初始化地图实例
|
function initMap() {
|
if (viewer) return
|
const map = mapRef.value?.getMap()
|
viewer = map?.viewer || null
|
}
|
|
onMounted(() => {
|
getWorkOrderList()
|
getFlyerList()
|
getDeviceList()
|
})
|
|
defineExpose({ open })
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
display: flex;
|
gap: 0 20px;
|
.leftBox {
|
width: 0;
|
flex: 1;
|
.gd-cesium {
|
width: 100%;
|
height: 423px;
|
}
|
}
|
}
|
</style>
|
