46b6767c
 刘淇
init 提交到库
|
1
2
3
4
5
6
7
8
|
<template>
<view class="fs-p30">
<tui-form ref="form" :showMessage="false">
<view class="fs-radius__sm">
<tui-input placeholder="请选择" label="养护街道" v-model="formData.streetName" disabled @click="pickerOpen(1)"></tui-input>
<tui-input placeholder="请选择" label="养护道路" v-model="formData.roadName" disabled @click="pickerOpen(2)"></tui-input>
<tui-input placeholder="请选择" label="养护组长" v-model="formData.leaderUserName" disabled @click="pickerOpen(3)"></tui-input>
<tui-input placeholder="请选择" label="具体位置" v-model="formData.lonLatAddress" disabled @click="openMap()"></tui-input>
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
9
10
11
|
<tui-input placeholder="请选择" label="问题来源" v-if="editDisabled" v-model="formData.problemSourceName" disabled></tui-input>
<tui-input placeholder="请选择" label="问题来源" v-else v-model="formData.problemSourceName" disabled @click="pickerOpen(4)"></tui-input>
|
|
46b6767c
刘淇
init 提交到库
|
12
13
14
15
16
17
18
19
20
21
22
23
|
<tui-form-item label="紧急程度" :bottomBorder="false">
<tui-radio-group v-model="formData.pressingType">
<view class="fs-flex">
<tui-label margin="0 0 0 30rpx" v-for="(item,index) in pressingTypeList">
<tui-radio :checked="item.checked" :value="item.value"></tui-radio>
<text class="fs-ml16">{{item.name}}</text>
</tui-label>
</view>
</tui-radio-group>
</tui-form-item>
</view>
<tui-white-space></tui-white-space>
|
|
6eea308a
刘淇
页面onShow 加载
|
24
|
<tui-textarea :radius="20" placeholder="请输入问题描述" isCounter :size="28" :maxlength="500" v-model="formData.remark"></tui-textarea>
|
|
46b6767c
刘淇
init 提交到库
|
25
26
27
|
<tui-white-space></tui-white-space>
<tui-tab :tabs="tabList" scroll bold :leftGap="30" @change="tabChange"></tui-tab>
<tui-white-space></tui-white-space>
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
28
|
<tui-upload v-show="currentIndex == 0" background="#fff" :value="imgsValue" :width="210" :radius="10" :height="210" delColor="#333" custom :serverUrl="serverURL" :header="{'Authorization': userToken}" :limit="3" @complete="complete($event, 'imgs')">
|
|
46b6767c
刘淇
init 提交到库
|
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<text class="fs-size__28 fs-color__subtitle fs-weight__400">问题图片</text>
</tui-upload>
<tui-upload v-show="currentIndex == 1" background="#fff" :width="210" :radius="10" :height="210" delColor="#333" custom :serverUrl="serverURL" :header="{'Authorization': userToken}" :limit="3" @complete="complete($event, 'streetImgList')">
<text class="fs-size__28 fs-color__subtitle fs-weight__400">街景图片</text>
</tui-upload>
<tui-upload v-show="currentIndex == 2" background="#fff" :width="210" :radius="10" :height="210" delColor="#333" custom :serverUrl="serverURL" :header="{'Authorization': userToken}" :limit="3" @complete="complete($event, 'longRangeImgList')">
<text class="fs-size__28 fs-color__subtitle fs-weight__400">远景图片</text>
</tui-upload>
</tui-form>
<view class="fs-mt60 fs-flex__center fs-safe__area">
<tui-button shape="circle" width="600rpx" height="80rpx" shadow :loading="isLoading" :disabled="isLoading" @click="onSubmit">提 交</tui-button>
</view>
<tui-picker :show="pickerShow" radius :pickerData="pickerList[pickerType]" textField="name" valueField="id" @hide="pickerHide" @change="pickerChange"></tui-picker>
</view>
</template>
<script>
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
46
|
import { uploadURL, OSSURL } from '@/config/app'
|
|
46b6767c
刘淇
init 提交到库
|
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
|
import { apiCaseAdd, apiStreetList, apiRoadListByStreetId, apiLeaderList } from '@/api/work'
import { apiTypeList } from '@/api/app'
const rules = [
{
name: "streetName",
rule: ["required"],
msg: ["请选择养护街道"]
},
{
name: "roadName",
rule: ["required"],
msg: ["请选择养护道路"]
},
{
name: "leaderUserName",
rule: ["required"],
msg: ["请选择养护组长"]
},
{
name: "problemSourceName",
rule: ["required"],
msg: ["请选择问题来源"]
},
{
name: "lonLatAddress",
rule: ["required"],
msg: ["请选择具体位置"]
},
{
name: "remark",
rule: ["required"],
msg: ["请输入问题描述"]
}
]
export default {
data() {
return {
formData: {
streetId: 0,
streetName: '',
roadId: 0,
roadName: '',
leaderUserId: 0,
leaderUserName: '',
remark: '',
imgs: [],
pressingType: 3,
streetImgList: [],
longRangeImgList: [],
latLonType: 1,
lat: 0,
lon: 0,
lonLatAddress: '',
problemSourceId: 0,
problemSourceName: ''
},
pickerList: [],
isLoading: false,
pickerShow: false,
pickerType: 0,
pressingTypeList: [
{value:1, name:'特急'},
{value:2, name:'紧急'},
{value:3, name:'一般', checked:true}
],
serverURL: uploadURL,
currentIndex: 0,
tabList: ['问题图片', '街景图片', '远景图片'],
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
115
116
117
|
hotlinenumber:'',
editDisabled:false,
imgsValue:[], //初始化图片
|
|
46b6767c
刘淇
init 提交到库
|
118
119
|
}
},
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
120
121
|
onLoad(options) {
this.getStreetList()
|
|
46b6767c
刘淇
init 提交到库
|
122
123
|
this.getLeaderList()
this.getTypeList()
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
124
125
126
|
this.hotlinenumber = options.hotlinenumber
if(this.hotlinenumber){
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
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
|
// 1. 获取 eventChannel 实例
const eventChannel = this.getOpenerEventChannel();
// 2. 监听A页面发送的事件，接收大量数据
eventChannel.on('largeDataFromWorkOrder', (largeData) => {
console.log('A页面传递的大量数据：', largeData);
// 存储到 data 中供页面使用
// this.formData = largeData;
this.editDisabled = true
let largeData1 = {
"searchEntities": null,
"createBy": "吴宗刚",
"createTime": "2025-09-08 22:48:39",
"updateBy": "xcyl",
"updateTime": "2025-09-09 19:56:56",
"remark": null,
"beginTime": null,
"endTime": "2025-09-30 15:52:20",
"exportType": null,
"params": {},
"id": "5a76e18752f69dca1e98666aa93cc7c9",
"hotlinenumber": "WO005_20250908224839",
"casefile": null,
"eventsouce": "12345",
"citynum": "西城自己的-2250627-7777777",
"regionnum": "西城园林-250627-7777777",
"taskstate": "gdtype02",
"ownership": "0",
"casesource": "01",
"department": "10002",
"companyid": "10002",
"companyVo": "西城园林",
"street": "110102012000",
"streetVo": "什刹海街道",
"callName": "王虹云-西城自己创建",
"callTel": "13581551620",
"acceptcasetime": "2025-09-02 00:00:00",
"address": "什刹海公园东门东侧道北",
"content": "市民反映，西城区恭王府南门口东侧道北有一颗近百年的杨树，被连根斩了，希望查询财产去向、哪个部门砍伐的，是否是盗伐的，之前北京站前街也发生过类似的情况，希望核实，来电反映协调核实恭王府南门口东侧道北杨树被砍伐问题。市民反映，西城区恭王府南门口东侧道北有一颗近百年的杨树，被连根斩了，希望查询财产去向、哪个部门砍伐的，是否是盗伐的，之前北京站前街也发生过类似的情况，希望核实，来电反映协调核实恭王府南门口东侧道北杨树被砍伐问题。市民反映，西城区恭王府南门口东侧道北有一颗近百年的杨树，被连根斩了，希望查询财产去向、哪个部门砍伐的，是否是盗伐的，之前北京站前街也发生过类似的情况，希望核实，来电反映协调核实恭王府南门口东侧道北杨树被砍伐问题。市民反映，西城区恭王府南门口东侧道北有一颗近百年的杨树，被连根斩了，希望查询财产去向、哪个部门砍伐的，是否是盗伐的，之前北京站前街也发生过类似的情况，希望核实，来电反映协调核实恭王府南门口东侧道北杨树被砍伐问题。",
"casepic": "https://test.jichengshanshui.com.cn:28310/yuanlin/alioss/yl/images/2025/09/08/af671146754be2596b65e87e544c481f.jpg",
"dealuser": "xcyl严家齐巡查员",
"dispatcher": "0",
"dispperson": "368",
"disppersonVo": "xcyl严家齐巡查员",
"replyResult": null,
"picResult1": null,
"picResult2": null,
"picResult3": null,
"finishTime": null,
"replayrtime": null,
"ownercompany": null,
"casetype": null,
"handingresult": null,
"resolvedesp": "是我的问题， 但就是不处理， 就这么着~！！！！！！",
"rstResolvedesp": null,
"dealBy": null,
"dealTime": null,
"replayBy": null,
"replayTime": null,
"ownershipBy": "xcyl",
"ownershipTime": "2025-09-09 19:56:56",
"reserve1": "1",
"reserve2": null,
"reserve3": null,
"sysPhotoList": null
}
console.log(this.formData)
|
|
d38470aa
刘淇
地址解析为经纬度
|
194
|
console.log(this.pickerList[1])
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
195
196
197
198
199
200
201
202
203
|
this.formData.streetName = largeData.streetVo
this.formData.streetId = largeData.street
this.getRoadList( this.formData.streetId)
this.formData.lonLatAddress = largeData.address
this.formData.remark = largeData.content
this.formData.problemSourceName = '12345工单'
this.formData.problemSourceId = 2
this.formData.thirdWorkOrderNo = largeData.hotlinenumber
|
|
49a45f56
刘淇
地址解析为经纬度
|
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
|
const key = 'f8693f334fa04f3749677f4b4f13b286';
// 高德地理编码API
uni.request({
url: 'https://restapi.amap.com/v3/geocode/geo',
method: 'GET',
data: {
address: this.formData.lonLatAddress, // 要解析的地址，如"北京市朝阳区光华路"
key: key, // 你的高德Key
city: '北京' // 可选，指定城市可提高解析精度
},
success: (res) => {
const result = res.data;
if (result.status === '1' && result.count > 0) {
// 解析成功，获取经纬度
const geocodes = result.geocodes[0];
const location = geocodes.location.split(','); // 格式为"经度,纬度"
const longitude = location[0];
const latitude = location[1];
this.formData.lon = longitude
this.formData.lat = latitude
console.log('解析成功：', {
address: geocodes.formatted_address,
longitude: longitude,
latitude: latitude
});
} else {
this.formData.lon = '116.364966'
this.formData.lat = '39.920401'
console.log('解析失败：', result.info || '未找到匹配地址');
}
},
fail: (err) => {
console.log('请求失败：', err);
}
});
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
241
242
243
244
245
246
247
248
249
250
251
252
253
254
|
// this.formData.imgs = largeData.casepic
if(largeData.casepic){
let picData = largeData.casepic.replace(OSSURL, "")
this.imgsValue = [picData]
// this.formData.imgs.push({
// url: picData, // 接口返回的图片地址
// id: Date.now() // 用时间戳作为唯一标识
// });
}
});
}else{
}
|
|
46b6767c
刘淇
init 提交到库
|
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
|
},
methods: {
// 获取街道列表
getStreetList() {
apiStreetList().then(res => {
this.pickerList[1] = res.data
})
},
// 获取道路列表
getRoadList(streetId) {
apiRoadListByStreetId({data:{stree_id:streetId}}).then(res => {
this.formData.roadId = ''
this.formData.roadName = ''
this.pickerList[2] = res.data
})
},
// 获取组长列表
getLeaderList() {
apiLeaderList().then(res => {
res.data.forEach(item => {item.id = item.userId})
this.pickerList[3] = res.data
})
},
// 获取问题来源列表
getTypeList() {
apiTypeList({data:{dict_type: 'problem_source'}}).then(res => {
res.data.forEach(item => {
item.id = item.value
item.name = item.label
})
this.pickerList[4] = res.data
})
},
// 打开选择框
pickerOpen(type) {
this.pickerShow = true
this.pickerType = type
},
// 关闭选择框
pickerHide() {
this.pickerShow = false
},
// 选择选择框
pickerChange(event) {
switch (this.pickerType) {
case 1:
this.formData.streetId = event.id
this.formData.streetName = event.name
this.formData.roadId = 0
this.formData.roadName = ''
// 查询道路列表
this.getRoadList(event.id)
break
case 2:
this.formData.roadId = event.id
this.formData.roadName = event.name
break
case 3:
this.formData.leaderUserId = event.id
this.formData.leaderUserName = event.name
break
case 4:
this.formData.problemSourceId = event.id
this.formData.problemSourceName = event.name
break
}
},
// 上传完成
complete(e, type) {
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
|
if (e.status == 1) {
if(type == 'imgs'){
// 直接添加新图，不删除默认图
// this.imgsValue.push({
// url: event.url, // 接口返回的新图地址
// isDefault: false,
// id: Date.now() // 时间戳作为唯一标识
// });
this.imgsValue = e.imgArr
}else{
this.formData[type] = e.imgArr
}
console.log( this.formData[type])
}
|
|
46b6767c
刘淇
init 提交到库
|
339
340
341
342
343
344
345
346
|
},
// 提交
onSubmit() {
this.$refs.form.validate(this.formData, rules).then(res => {
if (!res.isPass) {
uni.$tui.toast(res.errorMsg)
return
}
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
347
348
349
|
// 关键：提交所有图片（默认图 + 新图）
// this.formData.imgs = this.imgsValue.map(item => item.url);
this.formData.imgs = this.imgsValue
|
|
46b6767c
刘淇
init 提交到库
|
350
351
352
353
354
|
if (!this.formData.imgs.length || !this.formData.streetImgList.length || !this.formData.longRangeImgList.length) {
uni.$tui.toast('请上传图片')
return
}
this.isLoading = true
|
|
d0f9ccb8
刘淇
12345工单 问题上报
|
355
356
357
|
|
|
46b6767c
刘淇
init 提交到库
|
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
|
apiCaseAdd({data:{...this.formData}}).then(res => {
uni.$tui.toast('提交成功')
setTimeout(() => { uni.navigateBack() }, 1500)
}).finally(() => {
this.isLoading = false
})
})
},
// 选择位置
openMap() {
var that = this
uni.chooseLocation({
success: function (res) {
that.formData.lat = res.latitude
that.formData.lon = res.longitude
that.formData.lonLatAddress = res.address
}
})
},
// 选项卡
tabChange(event) {
this.currentIndex = event.index
},
}
}
</script>
<style lang="scss" scoped>
</style>
|
