吉安感知网项目-前端
罗广辉
2026-06-03 d04ecbb2aa47d93e05d28bb551e7bad83d97d60f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<template>
    <basic-container>
        <el-tabs class="gd-tabs" v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane :label="`全部(${allTotal})`" name="all"></el-tab-pane>
            <el-tab-pane :label="`我的巡查任务(${myTotal})`" name="my"></el-tab-pane>
        </el-tabs>
        <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
            <el-form-item label="任务名称" prop="patrolTaskName">
                <el-input class="gd-input gray" v-model="searchParams.patrolTaskName" placeholder="请输入" clearable
                    @clear="handleSearch" />
            </el-form-item>
 
            <el-form-item label="任务类型" prop="patrolTaskType">
                <el-cascader class="gd-select gray" popper-class="gd-select-popper" v-model="searchParams.patrolTaskType"
                    :options="workOrderTypeXT" :props="taskTypeFilterCascaderProps" placeholder="请选择" clearable
                    @change="handleSearch" />
            </el-form-item>
 
            <el-form-item label="任务状态" prop="taskStatus">
                <el-select class="gd-select gray" popper-class="gd-select-popper" v-model="searchParams.taskStatus"
                    placeholder="请选择" clearable @change="handleSearch">
                    <el-option v-for="item in dictObj.taskStatus" :key="item.dictKey" :label="item.dictValue"
                        :value="item.dictKey" />
                </el-select>
            </el-form-item>
 
            <el-form-item label="执行时间" prop="executeTime">
                <el-date-picker class="gd-date-picker gray" popper-class="gd-date-picker-popper" v-model="dateRange"
                    type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                    value-format="YYYY-MM-DD HH:mm:ss" @change="handleSearch" />
            </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-container" v-loading="loading">
            <div class="gd-table-toolbar">
                <el-button v-if="permission.flyOrder_add" :icon="Plus" color="#4C34FF" type="primary"
                    @click="openForm('add')">
                    拆分工单
                </el-button>
            </div>
 
            <div class="gd-table-content gd-table-content-bg">
                <el-table class="gd-table" :data="list" @selection-change="handleSelectionChange">
                    <!--                    <el-table-column type="selection" width="46" />-->
                    <el-table-column type="index" width="64" label="序号" />
                    <el-table-column prop="patrolTaskName" show-overflow-tooltip label="巡查任务名称" />
                    <el-table-column prop="workOrderName" show-overflow-tooltip label="关联工单" />
                    <el-table-column prop="taskNo" show-overflow-tooltip label="巡查任务编号" />
                    <el-table-column prop="patrolTaskType" show-overflow-tooltip label="巡查任务类型">
                        <template v-slot="{ row }">
                            {{ getTaskTypeLabel(row.patrolTaskType, workOrderTypeXT) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="taskStatus" show-overflow-tooltip label="巡查任务状态">
                        <template v-slot="{ row }">
                            <span :style="{ color: colors?.[row?.taskStatus] }">
                                {{ getDictLabel(row.taskStatus, dictObj.taskStatus) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="executeTime" show-overflow-tooltip label="任务执行时间" />
                    <el-table-column prop="createTime" show-overflow-tooltip label="巡查任务创建时间" />
                    <el-table-column prop="taskDesc" show-overflow-tooltip label="巡查任务描述" />
                    <el-table-column label="操作" class-name="operation-btns">
                        <template v-slot="{ row }">
                            <el-link type="primary" @click="viewDiaLogView(row)">查看</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>
 
        <FormDiaLog ref="dialogRef" @success="getList" v-if="dialogVisible" v-model="dialogVisible" />
        <ViewDiaLog ref="viewDiaLogRef" @success="getList" @refusalAccept="refusalAccept" v-if="viewDiaLogVisible"
            v-model="viewDiaLogVisible" />
    </basic-container>
</template>
<script setup>
import { Search, RefreshRight, Plus, Delete } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { dateRangeFormat, getDictLabel } from '@ztzf/utils'
import { getDictListApi } from '@/api/zkxt'
import FormDiaLog from './FormDiaLog.vue'
import { gdPatrolTaskPageApi, gdPatrolTaskRemoveApi } from './inspectionRequestApi'
import ViewDiaLog from '@/views/orderView/orderManage/inspectionRequest/ViewDiaLog.vue'
import { useStore } from 'vuex'
import { getTaskTypeLabel, normalizeTaskTypeOptions, taskTypeFilterCascaderProps } from '../taskTypeOptions'
 
const store = useStore()
const permission = computed(() => store.state.user.permission)
 
// 初始化查询参数
const initSearchParams = () => ({
    patrolTaskName: '', // 任务名称
    patrolTaskType: '', // 任务类型
    taskStatus: '', // 任务状态
    startTime: '', // 开始时间
    endTime: '', // 结束时间
    current: 1, // 当前页
    size: 10, // 每页大小
})
const searchParams = ref(initSearchParams()) // 查询参数
const dateRange = ref([]) // 执行时间范围
const total = ref(0) // 总条数
const allTotal = ref(0) // 全部tab总条数
const myTotal = ref(0) // 我的巡查任务tab总条数
const loading = ref(true) // 列表加载中
const list = ref([]) // 列表数据
const selectedIds = ref([]) // 勾选的ID列表
const queryParamsRef = ref(null) // 查询表单实例
const dialogRef = ref(null)
const viewDiaLogRef = ref(null)
const dialogVisible = ref(false)
const viewDiaLogVisible = ref(false)
const dictObj = ref({
    workOrderType: [], // 工单类型
    deviceLoadDemand: [], // 设备负载需求
    taskStatus: [], // 巡查任务状态
})
const workOrderTypeXT = ref([])
const activeName = ref('all')
provide('dictObj', dictObj)
provide('workOrderTypeXT', workOrderTypeXT)
 
const colors = {
    0: '#F6A000',//0待签收
    1: '#FF0202',//1拒绝签收
    2: '#FF0202',//2已撤回
    3: '#212BF4',//3待审核
    4: '#FF0000',//4审核驳回
    5: '#0068F0',//5审核通过
    6: '#FD6716',//6待验收
    7: '#FF0000',//7拒绝验收
    8: '#019612',//8验收通过
}
 
 
// 获取列表
async function getList () {
    const range = dateRangeFormat(dateRange.value)
    loading.value = true
    try {
        const res = await gdPatrolTaskPageApi({
            ...searchParams.value,
            startTime: range[0],
            endTime: range[1],
            createUser: activeName.value === 'my' ? store.state.user.userInfo.user_id : '',
        })
        list.value = res?.data?.data?.records ?? []
        total.value = res?.data?.data?.total ?? 0
    } finally {
        loading.value = false
    }
}
 
function tabsClick (tab, event) {
    activeName.value = tab.props.name
    resetForm()
    handleSearch()
}
 
// 查询
function handleSearch () {
    searchParams.value.current = 1
    getList()
}
 
// 重置查询
function resetForm () {
    queryParamsRef.value?.resetFields()
    dateRange.value = []
    searchParams.value.current = 1
    getList()
}
 
// 新增/编辑/查看 弹框
function openForm (mode, row) {
    dialogVisible.value = true
    nextTick(() => {
        dialogRef.value?.open({ mode, row })
    })
}
 
// 状态:0待签收、1拒绝签收、2已撤回、3待审核、4审核驳回
// 5审核通过、6待验收、7拒绝验收、8验收通过
function viewDiaLogView (row) {
    viewDiaLogVisible.value = true
    nextTick(() => {
        let mode = ['1', '4'].includes(row.taskStatus) && permission.value.flyOrder_add ? 'edit' : 'view'
        viewDiaLogRef.value?.open({ mode, row })
    })
}
 
// 勾选值设置
function handleSelectionChange (rows) {
    selectedIds.value = rows.map(item => item.id)
}
 
 
// 获取字典
function getDictList () {
    getDictionaryByCode('workOrderType,deviceLoadDemand,taskStatus').then(res => {
        dictObj.value = res.data.data
    })
    getDictListApi('task_inspection_type').then(res => {
        workOrderTypeXT.value = normalizeTaskTypeOptions(res.data.data || [])
    })
}
 
function refusalAccept (row) {
    dialogVisible.value = true
    nextTick(() => {
        dialogRef.value?.open({ mode: 'edit', row })
    })
}
 
// 获取两个tab的总条数
async function getTabTotals () {
    const allRes = await gdPatrolTaskPageApi({
        current: 1,
        size: 1,
        createUser: '',
    })
    allTotal.value = allRes?.data?.data?.total ?? 0
 
    const myRes = await gdPatrolTaskPageApi({
        current: 1,
        size: 1,
        createUser: store.state.user.userInfo.user_id,
    })
    myTotal.value = myRes?.data?.data?.total ?? 0
}
 
onMounted(() => {
    getTabTotals()
    getList()
    getDictList()
})
</script>
<style scoped lang="scss"></style>