吉安感知网项目-前端
chenyao
3 days ago a53ece5036c1fa61a63fe5f9e0cd3519210ab928
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
<!-- 线索事件管理 -->
<template>
    <basic-container>
        <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.keyword"
                    placeholder="请输入"
                    clearable
                    @clear="handleSearch"
                />
            </el-form-item>
 
            <el-form-item label="事件状态" prop="taskStatus">
                <el-select
                    class="gd-select gray"
                    popper-class="gd-select-popper"
                    v-model="searchParams.eventStatus"
                    placeholder="请选择"
                    clearable
                    @change="handleSearch"
                >
                    <el-option v-for="item in eventStatus" :key="item.label" :label="item.label" :value="item.value" />
                </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-content gd-table-content-bg">
                <el-table class="gd-table" :data="list">
                    <el-table-column type="index" width="64" label="序号" />
                    <el-table-column prop="eventName" show-overflow-tooltip label="事件名称" />
                    <el-table-column prop="eventNum" show-overflow-tooltip label="事件编号" />
                    <el-table-column prop="eventStatus" show-overflow-tooltip label="事件状态">
                        <template v-slot="{ row }">
                            {{ eventStatusMap[row.eventStatus] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="shootTime" show-overflow-tooltip label="事件时间" />
                    <el-table-column prop="disposeUserName" show-overflow-tooltip label="处置人员" />
                    <el-table-column prop="disposeDeptName" show-overflow-tooltip label="处置部门" />
                    <el-table-column label="操作" class-name="operation-btns" fixed="right">
                        <template v-slot="{ row }">
                            <el-link type="primary" @click="viewDiaLogView(row)">查看</el-link>
                            <el-link v-if="row.eventStatus === 2" type="primary" @click="viewDistribute(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>
 
        <ViewDiaLog ref="viewDiaLogRef" v-if="viewDiaLogVisible" v-model="viewDiaLogVisible" />
 
        <DistributeDiaLog
            ref="distributeDialogRef"
            v-if="distributeDialogVisible"
            v-model="distributeDialogVisible"
            @success="getList"
        />
    </basic-container>
</template>
<script setup>
import { Search, RefreshRight } from '@element-plus/icons-vue'
import { computed, onMounted, ref } from 'vue'
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { dateRangeFormat, getDictLabel } from '@ztzf/utils'
// import { getDictListApi } from '@/api/zkxt'
import { getGdList } from './eventManageApi'
import { getDeptTree } from '@/api/system/dept'
import ViewDiaLog from './ViewDiaLog.vue'
import { useStore } from 'vuex'
import { getTaskTypeLabel, normalizeTaskTypeOptions, taskTypeCascaderProps } from '../taskTypeOptions'
import DistributeDiaLog from '@/views/orderView/orderManage/clueEvents/DistributeDiaLog.vue'
 
// 初始化查询参数
const initSearchParams = () => ({
    eventStatus: '',
    keyword: '',
    current: 1, // 当前页
    size: 10, // 每页大小
    startTime: '',
    endTime: '',
    onlyMine: 0,
})
const distributeDialogVisible = ref(false)
const searchParams = ref(initSearchParams()) // 查询参数
const dateRange = ref([]) // 执行时间范围
const total = ref(0) // 总条数
const loading = ref(true) // 列表加载中
const list = ref([]) // 列表数据
const queryParamsRef = ref(null) // 查询表单实例
const viewDiaLogRef = ref(null)
const distributeDialogRef = ref(null)
const viewDiaLogVisible = ref(false)
const deptTree = ref([]) // 部门树
const treeProps = {
    label: 'name',
    children: 'children',
}
const dictObj = ref({
    workOrderType: [], // 巡查任务类型
    taskStatus: [], // 巡查任务状态
})
 
provide('dictObj', dictObj)
provide('deptTree', deptTree)
provide('treeProps', treeProps)
 
// 事件状态
const eventStatus = ref([
    { label: '待确认', value: 0 },
    { label: '处置中', value: 1 },
    { label: '已退回', value: 2 },
    { label: '已处置', value: 3 },
    { label: '已完成', value: 4 },
])
 
// 事件状态映射
const eventStatusMap = computed(() => {
    const map = {}
    eventStatus.value.forEach(item => {
        map[item.value] = item.label
    })
    return map
})
 
// 获取列表
async function getList() {
    const range = dateRangeFormat(dateRange.value)
    loading.value = true
    try {
        const res = await getGdList({
            ...searchParams.value,
            startTime: range[0],
            endTime: range[1],
            includeReturned: 1,
        })
        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()
    dateRange.value = []
    searchParams.value.current = 1
    searchParams.value.eventStatus = ''
    searchParams.value.keyword = ''
    getList()
}
 
// 查看弹框
function viewDiaLogView(row) {
    viewDiaLogVisible.value = true
    nextTick(() => {
        viewDiaLogRef.value?.open({ row })
    })
}
 
// 分发
function viewDistribute(row) {
    distributeDialogVisible.value = true
    nextTick(() => {
        distributeDialogRef.value?.open({ row })
    })
}
 
// 获取字典
function getDictList() {
    getDictionaryByCode('workOrderType,taskStatus').then(res => {
        dictObj.value = res.data.data
    })
    // getDictListApi('task_inspection_type').then(res => {
    //     workOrderTypeXT.value = normalizeTaskTypeOptions(res.data.data || [])
    // })
}
 
const store = useStore()
const userInfo = computed(() => store.state.user.userInfo)
 
// 获取部门树
function getDeptTreeFun() {
    getDeptTree(userInfo.value.dept_id).then(res => {
        deptTree.value = res.data.data
    })
}
 
onMounted(() => {
    getList()
    getDictList()
    getDeptTreeFun()
})
</script>
<style scoped lang="scss"></style>