10525542
 王彪总
feat(map): 替换腾讯地图...
|
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
|
<template>
<div class="cleaning-container">
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="searchForm" size="small">
<el-form-item label="作业人">
<el-select v-model="searchForm.userId" placeholder="全部" filterable clearable>
<el-option v-for="user in userList" :key="user.user_id" :label="user.name" :value="user.user_id" />
</el-select>
</el-form-item>
<el-form-item label="时间范围">
<el-date-picker v-model="dateRange" type="datetimerange"
range-separator="至" start-placeholder="开始" end-placeholder="结束"
format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card shadow="never">
<div slot="header"><span>保洁作业记录</span></div>
<el-table :data="tableData" border stripe size="small" v-loading="loading">
<el-table-column prop="user_name" label="作业人" width="100" />
<el-table-column prop="work_area" label="作业区域" min-width="180" />
<el-table-column prop="work_content" label="作业内容" min-width="200" />
<el-table-column prop="work_time" label="作业时间" width="180" />
<el-table-column prop="longitude" label="经度" width="120" />
<el-table-column prop="latitude" label="纬度" width="120" />
<el-table-column prop="remark" label="备注" min-width="150" />
<el-table-column label="操作" width="80" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top: 16px; text-align: right;"
@size-change="handleSizeChange" @current-change="handlePageChange"
:current-page="pagination.page" :page-sizes="[10, 20, 50, 100]"
:page-size="pagination.row" :total="pagination.total"
layout="total, sizes, prev, pager, next, jumper" />
</el-card>
<el-dialog title="作业详情" :visible.sync="detailVisible" width="500px">
<el-descriptions :column="1" border size="small" v-if="currentRecord">
<el-descriptions-item label="作业人">{{ currentRecord.user_name }}</el-descriptions-item>
<el-descriptions-item label="作业区域">{{ currentRecord.work_area }}</el-descriptions-item>
<el-descriptions-item label="作业内容">{{ currentRecord.work_content }}</el-descriptions-item>
<el-descriptions-item label="作业时间">{{ currentRecord.work_time }}</el-descriptions-item>
<el-descriptions-item label="坐标">{{ currentRecord.longitude }}, {{ currentRecord.latitude }}</el-descriptions-item>
<el-descriptions-item label="作业图片">
<template v-if="parseImages(currentRecord.images).length">
<el-image v-for="(url, i) in parseImages(currentRecord.images)" :key="i"
:src="url" style="width: 80px; height: 80px; margin-right: 8px;"
:preview-src-list="parseImages(currentRecord.images)" fit="cover" />
</template>
<span v-else>无</span>
</el-descriptions-item>
<el-descriptions-item label="备注">{{ currentRecord.remark || '无' }}</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div>
</template>
<script>
import { queryCleaningRecords } from '@/api/property/propertyApi'
import { queryPropertyUsers } from '@/api/property/propertyApi'
export default {
name: 'CleaningView',
data() {
return {
searchForm: { userId: '' },
dateRange: [],
userList: [],
tableData: [],
loading: false,
pagination: { page: 1, row: 20, total: 0 },
detailVisible: false,
currentRecord: null
}
},
mounted() { this.loadUsers(); this.handleSearch() },
methods: {
async loadUsers() {
try {
const res = await queryPropertyUsers({ workType: 'CLEANING', page: 1, row: 200 })
this.userList = res.data && res.data.data || []
} catch (e) { console.error(e) }
},
async handleSearch() {
this.loading = true
try {
const params = { page: this.pagination.page, row: this.pagination.row, ...this.searchForm }
Object.keys(params).forEach(k => { if (!params[k]) delete params[k] })
if (this.dateRange && this.dateRange.length === 2) {
params.startTime = this.dateRange[0]; params.endTime = this.dateRange[1]
}
const res = await queryCleaningRecords(params)
this.tableData = res.data && res.data.data || []
this.pagination.total = res.data && res.data.total || 0
} catch (e) { this.$message.error('查询失败') }
finally { this.loading = false }
},
parseImages(images) {
if (!images) return []
try { return JSON.parse(images) } catch (e) { return [] }
},
showDetail(row) { this.currentRecord = row; this.detailVisible = true },
handleSizeChange(val) { this.pagination.row = val; this.handleSearch() },
handlePageChange(val) { this.pagination.page = val; this.handleSearch() }
}
}
</script>
<style scoped>
.cleaning-container { padding: 16px; }
.search-card { margin-bottom: 16px; }
</style>
|
