askbot-dragon 0.6.17 → 0.6.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +27 -27
  2. package/babel.config.js +5 -5
  3. package/dragon.iml +7 -7
  4. package/package.json +54 -52
  5. package/public/index.html +27 -26
  6. package/src/App.vue +31 -31
  7. package/src/api/index.js +1 -1
  8. package/src/api/mock.http +2 -2
  9. package/src/api/requestUrl.js +185 -185
  10. package/src/assets/less/common.css +6760 -6760
  11. package/src/assets/less/converSationContainer/common.less +4751 -4751
  12. package/src/assets/less/converSationContainer/converSatonContainer.less +492 -492
  13. package/src/assets/less/ticketMessage.less +319 -319
  14. package/src/components/ActionAlertIframe.vue +117 -117
  15. package/src/components/AskIFrame.vue +15 -15
  16. package/src/components/ConversationContainer.vue +1388 -1388
  17. package/src/components/FileType.vue +88 -88
  18. package/src/components/Message.vue +27 -27
  19. package/src/components/ask-components/DissatisfactionOptions.vue +57 -57
  20. package/src/components/ask-components/Msgloading.vue +37 -37
  21. package/src/components/ask-components/SatisfactionV2.vue +15 -15
  22. package/src/components/chatContent.vue +512 -512
  23. package/src/components/feedBack.vue +133 -133
  24. package/src/components/file/AliyunOssComponents.vue +109 -109
  25. package/src/components/formTemplate.vue +1898 -2039
  26. package/src/components/message/ActionAlertIframe.vue +116 -116
  27. package/src/components/message/ShopMessage.vue +168 -168
  28. package/src/components/message/TextMessage.vue +895 -895
  29. package/src/components/message/TicketMessage.vue +173 -173
  30. package/src/components/message/swiper/index.js +4 -4
  31. package/src/components/message/swiper/ticketSwiper.vue +530 -530
  32. package/src/components/message/swiper/ticketSwiperItem.vue +61 -61
  33. package/src/components/selector/hOption.vue +20 -20
  34. package/src/components/selector/hSelector.vue +199 -199
  35. package/src/components/selector/hWrapper.vue +216 -216
  36. package/src/components/source/BotMessage.vue +24 -24
  37. package/src/components/source/CustomMessage.vue +24 -24
  38. package/src/components/test.vue +260 -260
  39. package/src/components/utils/AliyunIssUtil.js +72 -72
  40. package/src/components/utils/ckeditor.js +124 -0
  41. package/src/components/utils/format_date.js +18 -18
  42. package/src/components/utils/index.js +6 -6
  43. package/src/components/utils/math_utils.js +15 -15
  44. package/src/main.js +44 -43
  45. package/vue.config.js +34 -28
@@ -1,895 +1,895 @@
1
- <!-- 消息记录容器 -->
2
- <template>
3
- <div class="media-body">
4
- <div class="textMessage" id="textMessage" :class="{remPhoneClass:isPhone,remCompanyClass:isCompany}">
5
- <div style="display: flex;height: auto;line-height: 2;" @mousemove="clickClick" class="htmlClass">
6
- <div v-html="text.template" id="html" :class="{notClickClass:disableds === true}">
7
- {{text.template}}
8
- </div>
9
- </div>
10
- <div style="text-align: right;" id="submit">
11
- <el-button type="primary" round style="color: white;background-color: #4C61E1;" size="small" @click="submitClick" :disabled="disableds" >{{submitValue}}</el-button>
12
- </div>
13
- <div v-if="isCompany">
14
- <div v-if="single === true" style="border-top: 1px dashed #ebebeb;display: flex;justify-content: space-between" class="editMessage">
15
- <el-input v-model="input" placeholder="请输入内容" class="inputClass" @input="testClick" @blur="inputBlur"></el-input>
16
- <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
17
- --> </div>
18
- <div v-if="date" style="border-top: 1px dashed #ebebeb;display: flex;justify-content: space-between" class="editMessage">
19
- <el-date-picker
20
- v-model="dateValue"
21
- type="date"
22
- placeholder="选择日期"
23
- style="width: 100%;margin: 10px 0 10px 0"
24
- :clearable=false
25
- @change="dataclick"
26
-
27
- >
28
- </el-date-picker>
29
- <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
30
- --> </div>
31
- <div v-if="time" style="border-top: 1px dashed #ebebeb;display: flex;justify-content: space-between" class="editMessage">
32
- <el-time-picker
33
- v-model="timeValue"
34
- placeholder="任意时间点"
35
- style="margin: 10px 0 10px 0;width: 100%"
36
- :clearable=false
37
- @change="dataclick"
38
- >
39
- </el-time-picker>
40
- <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
41
- --> </div>
42
- <div v-if="dateTime" style="border-top: 1px dashed #ebebeb;" class="editMessage">
43
- <el-date-picker
44
- v-model="dateTimeValue"
45
- type="datetime"
46
- placeholder="选择日期时间"
47
- style="width: 100%;margin: 10px 0 10px 0"
48
- @change="dataclick"
49
- >
50
- </el-date-picker>
51
- <!-- <span @click="quedingClick(bianliangId)" style="display:flex;align-items:center;"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
52
- --> </div>
53
- <!--<div v-if="dateRange" style="border-top: 1px dashed #ebebeb;">
54
- <el-date-picker
55
- v-model="dateRangeValue"
56
- type="daterange"
57
- range-separator="至"
58
- start-placeholder="开始日期"
59
- end-placeholder="结束日期"
60
- style="margin: 10px 16px;width: 80%"
61
- >
62
- </el-date-picker>
63
- <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
64
- </div>
65
- <div v-if="timeRange" style="border-top: 1px dashed #ebebeb;">
66
- <el-time-picker
67
- is-range
68
- v-model="timeRangeValue"
69
- range-separator="至"
70
- start-placeholder="开始时间"
71
- end-placeholder="结束时间"
72
- placeholder="选择时间范围"
73
- style="margin: 10px 16px;width: 80%"
74
- >
75
- </el-time-picker>
76
- <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
77
-
78
- </div>
79
- <div v-if="dateTimeRange" style="border-top: 1px dashed #ebebeb;">
80
- <el-date-picker
81
- v-model="dateTimeValue"
82
- type="datetimerange"
83
- range-separator="至"
84
- start-placeholder="开始日期"
85
- end-placeholder="结束日期"
86
- style="width: 80%;margin: 10px 16px"
87
-
88
- >
89
- </el-date-picker>
90
- <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
91
- </div>-->
92
- </div>
93
- <div v-if="isPhone">
94
- <div v-if="single" style="border-top: 1px dashed #ebebeb;" class="editMessage">
95
- <el-input v-model="input" placeholder="请输入内容" class="inputClass" @input="testClick" @blur="inputBlur"></el-input>
96
- <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
97
- --> </div>
98
- <div v-if="date">
99
- <van-calendar v-model="show" @confirm="onConfirm" :default-date="defaultDate"/>
100
- <!-- <el-date-picker
101
- v-model="dateValue"
102
- type="date"
103
- placeholder="选择日期"
104
- style="width: 80%;margin: 10px 10px 10px 0"
105
- :editable=false
106
- >
107
- </el-date-picker>
108
- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
109
- --></div>
110
-
111
- <div v-if="time">
112
- <van-popup v-model="showTimePicker" position="bottom">
113
- <van-datetime-picker
114
- v-model="timeValue"
115
- type="datetime"
116
- title="选择时间"
117
- :min-date="minDate"
118
- :formatter="formatter"
119
- @cancel="showTimePicker = false"
120
- @confirm="onConfirmTime"
121
- />
122
- </van-popup>
123
- <!-- <el-time-picker
124
- v-model="timeValue"
125
- placeholder="任意时间点"
126
- style="margin: 10px 10px 10px 0;width: 80%"
127
- :editable=false
128
- >
129
- </el-time-picker>
130
- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
131
- --> </div>
132
- <div v-if="dateTime">
133
- <van-popup v-model="showDateTimePicker" position="bottom">
134
- <van-datetime-picker
135
- v-model="dateTimeValue"
136
- type="datetime"
137
- title="选择日期时间"
138
- :min-date="minDate"
139
- :formatter="formatter"
140
- @cancel="showDateTimePicker = false"
141
- @confirm="onConfirmDateTime"
142
- />
143
- </van-popup>
144
- <!-- <el-date-picker
145
- v-model="dateTimeValue"
146
- type="datetime"
147
- placeholder="选择日期时间"
148
- style="width: 80%;margin: 10px 10px 10px 0"
149
- :editable=false
150
-
151
- >
152
- </el-date-picker>
153
- <span @click="quedingClick(bianliangId)" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
154
- --></div>
155
- <!-- <div v-if="dateRange" style="border-top: 1px dashed #ebebeb;display: flex">
156
- &lt;!&ndash;<el-date-picker
157
- v-model="dateRangeValue"
158
- type="daterange"
159
- range-separator="至"
160
- start-placeholder="开始日期"
161
- end-placeholder="结束日期"
162
- style="margin: 10px 16px;width: 80%"
163
- :editable=false
164
-
165
- >
166
- </el-date-picker>&ndash;&gt;
167
- <div style="width: 90%">
168
- <van-cell title="选择日期区间" :value="dateRangeValue" @click="show = true" />
169
- <van-calendar v-model="show" type="range" @confirm="onConfirm" />
170
- </div>
171
- <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
172
-
173
-
174
-
175
- </div>
176
- <div v-if="timeRange" style="border-top: 1px dashed #ebebeb;">
177
- <el-time-picker
178
- is-range
179
- v-model="timeRangeValue"
180
- range-separator="至"
181
- start-placeholder="开始时间"
182
- end-placeholder="结束时间"
183
- placeholder="选择时间范围"
184
- style="margin: 10px 16px;width: 80%"
185
-
186
- :editable=false
187
- >
188
- </el-time-picker>
189
- <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
190
-
191
- </div>
192
- <div v-if="dateTimeRange" style="border-top: 1px dashed #ebebeb;display: flex">
193
- &lt;!&ndash; <el-date-picker
194
- v-model="dateTimeValue"
195
- type="datetimerange"
196
- range-separator="至"
197
- start-placeholder="开始日期"
198
- end-placeholder="结束日期"
199
- style="width: 80%;margin: 10px 16px"
200
- :editable=false
201
-
202
-
203
- >
204
- </el-date-picker>&ndash;&gt;
205
- <div style="width: 90%">
206
- <van-field
207
- readonly
208
- clickable
209
- name="datetimePicker"
210
- :value=dateTimeValue[0]
211
- label='选择时间'
212
- placeholder="点击选择开始日期时间"
213
- @click="showDateTimePicker=true"
214
- />
215
- <van-popup v-model="showDateTimePicker" position="bottom">
216
- <van-datetime-picker
217
- v-model="currentDate"
218
- type="datetime"
219
- title="选择开始日期时间"
220
- @confirm="onConfirmDateTime($event)"
221
- @cancel="showDateTimePicker = false"
222
- :min-date="minDate"
223
- :formatter="formatter"
224
- />
225
- </van-popup>
226
- <van-field
227
- readonly
228
- clickable
229
- name="datetimePicker"
230
- :value=dateTimeValue1[0]
231
- label=" "
232
- placeholder="点击选择结束日期时间"
233
- @click="showDateTimePicker1=true"
234
- />
235
- <van-popup v-model="showDateTimePicker1" position="bottom">
236
- <van-datetime-picker
237
- v-model="currentDate"
238
- type="datetime"
239
- title="选择结束日期时间"
240
- @confirm="onConfirmDateTime1($event)"
241
- @cancel="showDateTimePicker1 = false"
242
- :min-date="minDate"
243
- :formatter="formatter"
244
- />
245
- </van-popup>
246
- </div>
247
-
248
- <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
249
- </div>-->
250
- </div>
251
- </div>
252
- </div>
253
- </template>
254
-
255
- <script>
256
- /*import $ from 'jquery'*/
257
- export default {
258
- name: 'TextMessage',
259
- data(){
260
- return{
261
- show:false,
262
- single:false,
263
- date:false,
264
- time:false,
265
- dateTime:false,
266
- dateRange:false,
267
- timeRange:false,
268
- input:'',
269
- bianliangId:'',
270
- dateValue:'',
271
- message:[{content:'王亚欣',type:'SINGLE',value:'',id:1},{content:['2020-11-18T07:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'DATE-RANGE',value:'',id:2},{content:'2020-11-18T07:25:16.000+0000',type:'TIME',value:'',id:3},{content:'2020-11-18T07:25:16.000+0000',type:'DATE',value:'',id:4},{content:['2020-11-18T07:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'DATERANGE',value:'',id:5},{content:['2020-11-18T08:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'TIMERANGE',value:'',id:6},],
272
- isPhone:false,
273
- isCompany:false,
274
- dateTimeValue:'',
275
- timeValue:'',
276
- dateRangeValue:'',
277
- dateRangeValues:'',
278
- timeRangeValue:[],
279
- dateTimeValue1:[],
280
- test:0,
281
- currentDate:new Date(),
282
- minDate: new Date(2020, 0, 1),
283
- showDateTimePicker1:false,
284
- showDateTimePicker:false,
285
- values:[],
286
- checkValue:'',
287
- disableds:false,
288
- submitValue:'确认',
289
- dateInnerText:'',
290
- defaultDate:'',
291
- showTimePicker:false,
292
-
293
- }
294
- },
295
- props:{
296
- text:{
297
- type:Object,
298
- default(){
299
- return {}
300
- }
301
- },
302
- type:String,
303
- disable:Boolean,
304
- submit:Boolean
305
- },
306
- mounted() {
307
- this.isMobile()
308
- console.log(this.disable)
309
- let span=this.$el
310
- let defaults=span.getElementsByClassName('ask-component-placeholder-span')
311
- for (let i=0;i<defaults.length;i++)
312
- {
313
- this.values.push({})
314
- this.values[i]['key']=defaults[i].getAttribute('data')
315
- this.values[i]['value']=defaults[i].innerText
316
- this.values[i]['type']=defaults[i].getAttribute('type')
317
- }
318
- let text=this.$el
319
- console.log('dom',text)
320
- let test=text.getElementsByClassName('ask-component-placeholder-span')
321
- let cpntain=text.getElementsByClassName('ask-component-placeholder-container')
322
- let icon=text.getElementsByClassName('arsenalkebianji')
323
- for (let i=0;i<icon.length;i++)
324
- {
325
- icon[i].style.color='#4C61E1'
326
- }
327
- for (let i=0;i<cpntain.length;i++)
328
- {
329
- if(this.type!==undefined)
330
- {
331
- cpntain[i].style.paddingRight=0.2+'rem'
332
- cpntain[i].style.paddingLeft=0.2+'rem'
333
- }
334
- else
335
- {
336
- cpntain[i].style.paddingRight=4+'px'
337
- cpntain[i].style.paddingLeft=4+'px'
338
- }
339
-
340
- }
341
- for (let i=0;i<test.length;i++)
342
- {
343
- if(test[i].getAttribute('type')==='DATE_PICKER')
344
- {
345
- let date=Number(test[i].innerText)*1000
346
- test[i].innerText=new Date(date).Format("MM-dd")
347
- }
348
- if(test[i].getAttribute('type')==='TIME_PICKER')
349
- {
350
- let time=Number(test[i].innerText)*1000
351
- test[i].innerText=new Date(time).Format("hh:mm")
352
- }
353
- if(test[i].getAttribute('type') === 'DATE_TIME_PICKER'){
354
- let time=Number(test[i].innerText)*1000
355
- test[i].innerText=new Date(time).Format("yyyy-MM-dd hh:mm")
356
- }
357
- }
358
- },
359
- beforeMount() {
360
- if(this.disable===true)
361
- {
362
- this.disableds=true
363
-
364
- }
365
- else
366
- {
367
- this.disableds=false
368
-
369
- }
370
- if(this.submit===true)
371
- {
372
- this.submitValue='已确认'
373
- }
374
- else
375
- {
376
- this.submitValue='确认'
377
- }
378
- },
379
- methods:{
380
- dataclick(){
381
- if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
382
- {
383
- for (let i=0;i<this.values.length;i++)
384
- {
385
- if(this.values[i].key === this.checkValue.getAttribute('data'))
386
- {
387
- if(this.dateValue!=='')
388
- {
389
- this.checkValue.innerText=new Date(this.dateValue).Format('MM-dd')
390
- this.values[i].value=new Date(this.dateValue).getTime()
391
- }
392
- else
393
- {
394
- this.values[i].value=this.checkValue.innerText
395
- }
396
- }
397
- }
398
- }
399
- if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
400
- {
401
- for (let i=0;i<this.values.length;i++)
402
- {
403
- if(this.values[i].key === this.checkValue.getAttribute('data') )
404
- {
405
- if(this.timeValue!=='')
406
- {
407
-
408
- this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
409
- this.values[i].value=new Date(this.timeValue).getTime()
410
- }
411
- else
412
- {
413
- this.values[i].value=this.checkValue.innerText
414
- }
415
- }
416
- }
417
- }
418
- if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
419
- {
420
- for (let i=0;i<this.values.length;i++)
421
- {
422
- if(this.values[i].key === this.checkValue.getAttribute('data') )
423
- {
424
- if(this.dateTimeValue!=='')
425
- {
426
-
427
- this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
428
- this.values[i].value=new Date(this.dateTimeValue).getTime()
429
- }
430
- else
431
- {
432
- this.values[i].value=this.checkValue.innerText
433
- }
434
- }
435
- }
436
- }
437
- },
438
- clickClick(e){
439
- if(e.target.onclick!==null)
440
- {
441
- let that=this
442
- window._askEditValue=that._askEditValue;
443
- }
444
- },
445
- _askEditValue(a,b){
446
- let type=b.getAttribute('type')
447
- this.checkValue=b
448
- if(type === 'INPUT')
449
- {
450
- this.single=true
451
- this.date=false
452
- this.time=false
453
- this.dateTime=false
454
- this.input= b.innerText
455
- }
456
- if(type === 'DATE_PICKER')
457
- {
458
- this.single=false
459
- this.date=true
460
- this.time=false
461
- this.dateTime=false
462
- this.show=true
463
- for (let i=0;i<this.values.length;i++)
464
- {
465
- if(b.getAttribute('data') === this.values[i].key)
466
- {
467
- if(typeof this.values[i].value == 'string')
468
- {
469
- this.dateInnerText=Number(this.values[i].value)*1000
470
- }
471
- else
472
- {
473
- this.dateInnerText=Number(this.values[i].value)
474
- }
475
- this.dateValue=new Date(this.dateInnerText).Format("yyyy:MM-dd")
476
- this.defaultDate=new Date(this.dateInnerText)
477
- }
478
- return
479
- }
480
-
481
- }
482
- if(type === 'TIME_PICKER')
483
- {
484
- this.single=false
485
- this.date=false
486
- this.time=true
487
- this.dateTime=false
488
- this.showTimePicker=true
489
- for (let i=0;i<this.values.length;i++)
490
- {
491
- if(b.getAttribute('data') === this.values[i].key)
492
- {
493
- let time
494
- if(typeof this.values[i].value == 'string'){
495
- time=Number(this.values[i].value)*1000
496
- }
497
- else
498
- {
499
- time=Number(this.values[i].value)
500
- }
501
- if(this.isPhone ===true)
502
- {
503
- this.timeValue=new Date(time)
504
- }
505
- else
506
- {
507
- this.timeValue=new Date(time).Format("yyyy-MM-dd hh:mm")
508
- }
509
- }
510
- }
511
- }
512
- if(type === 'DATE_TIME_PICKER')
513
- {
514
- this.single=false
515
- this.date=false
516
- this.time=false
517
- this.dateTime=true
518
- this.showDateTimePicker=true
519
- for (let i=0;i<this.values.length;i++)
520
- {
521
- if(b.getAttribute('data') === this.values[i].key)
522
- {
523
- let time
524
- if(typeof this.values[i].value == 'string'){
525
- time=Number(this.values[i].value)*1000
526
- }
527
- else
528
- {
529
- time=Number(this.values[i].value)
530
- }
531
- if(this.isPhone===true)
532
- {
533
- this.dateTimeValue=new Date(time)
534
- }
535
- else
536
- {
537
- this.dateTimeValue=new Date(time).Format("yyyy-MM-dd hh:mm:ss")
538
- }
539
- }
540
- }
541
- }
542
-
543
- },
544
- formatter(type, value) {
545
- // 格式化选择器日期
546
- if (type === "year") {
547
- return `${value}年`;
548
- } else if (type === "month") {
549
- return `${value}月`;
550
- } else if (type === "day") {
551
- return `${value}日`;
552
- } else if (type === "hour") {
553
- return `${value}时`;
554
- } else if (type === "minute") {
555
- return `${value}分`;
556
- }
557
- return value;
558
- },
559
- //提交按钮
560
- submitClick(){
561
- this.single=false
562
- this.date=false
563
- this.time=false
564
- this.dateTime=false
565
- let infomation={}
566
- let obj = {}
567
- this.values.map(item => {
568
- obj[item.key] = item
569
- })
570
- let result = Object.values(obj)
571
- console.log(result)
572
- let text=this.$el
573
- console.log(text)
574
- let test=text.getElementsByClassName('ask-component-placeholder-span')
575
- for (let i=0;i<test.length;i++)
576
- {
577
- if(test[i].getAttribute('type')==='DATE_PICKER')
578
- {
579
- if(test[i].getAttribute('data')===result[i].key)
580
- {
581
- console.log(typeof result[i].value)
582
- if(typeof result[i].value =='number'){
583
- result[i].value/=1000
584
- let resu=String(result[i].value)
585
- result[i].value=resu
586
- }
587
- }
588
- }
589
- if(test[i].getAttribute('type')==='TIME_PICKER')
590
- {
591
- if(test[i].getAttribute('data')===result[i].key)
592
- {
593
- if(typeof result[i].value =='number')
594
- {
595
- result[i].value/=1000
596
- let resu=String(result[i].value)
597
- result[i].value=resu
598
- }
599
- }
600
- }
601
- if(test[i].getAttribute('type')==='DATE_TIME_PICKER')
602
- {
603
- if(test[i].getAttribute('data')===result[i].key)
604
- {
605
- if(typeof result[i].value =='number')
606
- {
607
- result[i].value/=1000
608
- let resu=String(result[i].value)
609
- result[i].value=resu
610
- }
611
- }
612
- }
613
- }
614
- infomation['values']=result
615
- infomation['goToAction']=this.text.goToAction
616
- let innerhtml=this.$el
617
- infomation['template']=innerhtml.querySelector('#html').innerHTML
618
- infomation['apiKey']=this.text.apiKey
619
- this.$emit('submitClick',infomation,this.text.apiKey)
620
- this.submitValue='已确认'
621
- this.disableds=true
622
- },
623
- addZero(i){
624
- if (i<10) {
625
- i="0" + i;
626
- }
627
- return i;
628
- },
629
- formatDate(date) {
630
- if(typeof date == 'object')
631
- {
632
- const dateTime = new Date(date[0])
633
- const dateTime1=new Date(date[1])
634
- return `${dateTime.getMonth() + 1}月${dateTime.getDate()}日 ${this.addZero(dateTime.getHours())} : ${this.addZero(dateTime.getMinutes())} - ${dateTime1.getMonth() + 1}月${dateTime1.getDate()}日 ${this.addZero(dateTime1.getHours())} : ${this.addZero(dateTime1.getMinutes())}`;
635
- }
636
- else
637
- {
638
- const dateTime = new Date(date)
639
- return `${dateTime.getMonth() + 1}月${dateTime.getDate()}日`;
640
- }
641
-
642
- },
643
- //格式成时间
644
- formatDate1(date){
645
- const dateTime = new Date(date)
646
- return `${this.addZero(dateTime.getHours())}:${this.addZero(dateTime.getMinutes())}`;
647
- },
648
- //格式成日期
649
- formatDate2(date){
650
- const dateTime = new Date(date)
651
- return `${dateTime.getMonth() + 1} - ${dateTime.getDate()}`;
652
- },
653
- //日期范围
654
- formatDate3(date){
655
- const dateTime = new Date(date[0])
656
- const dateTime1=new Date(date[1])
657
- return `${dateTime.getMonth() + 1}月 ${dateTime.getDate()}日 - ${dateTime1.getMonth() + 1}月 ${dateTime1.getDate()}日`;
658
- },
659
- //时间范围
660
- formatDate4(date){
661
- const dateTime = new Date(date[0])
662
- const dateTime1=new Date(date[1])
663
- return `${dateTime.getHours()}: ${dateTime.getMinutes()} - ${dateTime1.getHours()}: ${dateTime1.getMinutes()}`;
664
- },
665
- testClick(value){
666
- if(this.checkValue.getAttribute('type') === 'INPUT')
667
- {
668
- for (let i=0;i<this.values.length;i++)
669
- {
670
- if(this.values[i].key === this.checkValue.getAttribute('data') )
671
- {
672
- this.checkValue.innerText=value
673
- this.values[i].value=this.checkValue.innerText
674
- }
675
- }
676
- }
677
- },
678
- inputBlur(){
679
- this.single=false
680
- },
681
- quedingClick(){
682
- if(this.checkValue.getAttribute('type') === 'INPUT')
683
- {
684
- for (let i=0;i<this.values.length;i++)
685
- {
686
- if(this.values[i].key === this.checkValue.getAttribute('data') )
687
- {
688
- if(this.input!=='')
689
- {
690
- this.checkValue.innerText=this.input
691
- }
692
- console.log(this.checkValue.innerText)
693
- this.values[i].value=this.checkValue.innerText
694
- }
695
- }
696
- this.single = false
697
- this.input=''
698
- }
699
- if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
700
-
701
- {
702
- for (let i=0;i<this.values.length;i++)
703
- {
704
- if(this.values[i].key === this.checkValue.getAttribute('data'))
705
- {
706
- if(this.dateValue!=='')
707
- {
708
- this.checkValue.innerText=new Date(this.dateValue).Format('MM-dd')
709
- this.values[i].value=new Date(this.dateValue).getTime()
710
- }
711
- else
712
- {
713
- this.values[i].value=this.checkValue.innerText
714
- }
715
- }
716
- }
717
- this.date = false
718
- this.dateValue=''
719
- }
720
- if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
721
- {
722
- for (let i=0;i<this.values.length;i++)
723
- {
724
- if(this.values[i].key === this.checkValue.getAttribute('data') )
725
- {
726
- if(this.timeValue!=='')
727
- {
728
-
729
- this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
730
- this.values[i].value=new Date(this.timeValue).getTime()
731
- }
732
- else
733
- {
734
- this.values[i].value=this.checkValue.innerText
735
- }
736
- }
737
- }
738
- this.time = false
739
- this.timeValue=''
740
- }
741
- if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
742
- {
743
- for (let i=0;i<this.values.length;i++)
744
- {
745
- if(this.values[i].key === this.checkValue.getAttribute('data') )
746
- {
747
- if(this.dateTimeValue!=='')
748
- {
749
-
750
- this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
751
- this.values[i].value=new Date(this.dateTimeValue).getTime()
752
- }
753
- else
754
- {
755
- this.values[i].value=this.checkValue.innerText
756
- }
757
- }
758
- }
759
- this.dateTime = false
760
- this.dateTimeValue=''
761
- }
762
-
763
- },
764
- isMobile() {
765
- let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
766
- if (flag) {
767
- this.isPhone=true
768
- }
769
- else
770
- {
771
- this.isCompany=true
772
-
773
- }
774
- },
775
- onConfirmDateTime(date){
776
- console.log(date)
777
- if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
778
- {
779
- for (let i=0;i<this.values.length;i++)
780
- {
781
- if(this.values[i].key === this.checkValue.getAttribute('data') )
782
- {
783
- if(this.dateTimeValue!=='')
784
- {
785
-
786
- this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
787
- this.values[i].value=new Date(this.dateTimeValue).getTime()
788
- }
789
- else
790
- {
791
- this.values[i].value=this.checkValue.innerText
792
- }
793
- console.log(this.values[i].value)
794
- }
795
- }
796
- }
797
- this.showDateTimePicker = false;
798
- },
799
-
800
- onConfirm(date) {
801
- console.log(date)
802
- this.show = false;
803
- if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
804
-
805
- {
806
- for (let i=0;i<this.values.length;i++)
807
- {
808
- if(this.values[i].key === this.checkValue.getAttribute('data'))
809
- {
810
- if(date!=='')
811
- {
812
- this.checkValue.innerText=new Date(date).Format('MM-dd')
813
- this.values[i].value=new Date(date).getTime()
814
- }
815
- else
816
- {
817
- this.values[i].value=this.checkValue.innerText
818
- }
819
- }
820
- }
821
- this.date = false
822
- this.dateValue=''
823
- }
824
-
825
- },
826
- onConfirmTime(time){
827
- console.log(time)
828
- this.showTimePicker=false
829
- if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
830
- {
831
- for (let i=0;i<this.values.length;i++)
832
- {
833
- if(this.values[i].key === this.checkValue.getAttribute('data') )
834
- {
835
- if(this.timeValue!=='')
836
- {
837
-
838
- this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
839
- this.values[i].value=new Date(this.timeValue).getTime()
840
- }
841
- else
842
- {
843
- this.values[i].value=this.checkValue.innerText
844
- }
845
- }
846
- }
847
- }
848
- }
849
- }
850
- }
851
- </script>
852
-
853
-
854
- <style lang="less">
855
- @import "../../assets/less/common.css";
856
- .remPhoneClass{
857
- margin: 0 auto;
858
- width: 80vw;
859
- .inputClass{
860
- width: 100%;
861
- }
862
- .htmlClass{
863
- padding: 4px 0;
864
- }
865
- #submit{
866
- padding: 4px 0;
867
- }
868
-
869
- }
870
- .remCompanyClass{
871
-
872
- margin: 0 auto;
873
- width: 300px;
874
- .inputClass{
875
- padding: 10px 0 10px 0;
876
- width: 100%;
877
- }
878
- #submit{
879
- padding: 10px 0 4px 10px;
880
- }
881
- .editMessage{
882
- display: flex;
883
- justify-content: space-between;
884
- }
885
- }
886
- .van-cell::after{
887
- content: none!important;
888
- }
889
- i{
890
- cursor: pointer;
891
- }
892
- .notClickClass{
893
- pointer-events: none;
894
- }
895
- </style>
1
+ <!-- 消息记录容器 -->
2
+ <template>
3
+ <div class="media-body">
4
+ <div class="textMessage" id="textMessage" :class="{remPhoneClass:isPhone,remCompanyClass:isCompany}">
5
+ <div style="display: flex;height: auto;line-height: 2;" @mousemove="clickClick" class="htmlClass">
6
+ <div v-html="text.template" id="html" :class="{notClickClass:disableds === true}">
7
+ {{text.template}}
8
+ </div>
9
+ </div>
10
+ <div style="text-align: right;" id="submit">
11
+ <el-button type="primary" round style="color: white;background-color: #4C61E1;" size="small" @click="submitClick" :disabled="disableds" >{{submitValue}}</el-button>
12
+ </div>
13
+ <div v-if="isCompany">
14
+ <div v-if="single === true" style="border-top: 1px dashed #ebebeb;display: flex;justify-content: space-between" class="editMessage">
15
+ <el-input v-model="input" placeholder="请输入内容" class="inputClass" @input="testClick" @blur="inputBlur"></el-input>
16
+ <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
17
+ --> </div>
18
+ <div v-if="date" style="border-top: 1px dashed #ebebeb;display: flex;justify-content: space-between" class="editMessage">
19
+ <el-date-picker
20
+ v-model="dateValue"
21
+ type="date"
22
+ placeholder="选择日期"
23
+ style="width: 100%;margin: 10px 0 10px 0"
24
+ :clearable=false
25
+ @change="dataclick"
26
+
27
+ >
28
+ </el-date-picker>
29
+ <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
30
+ --> </div>
31
+ <div v-if="time" style="border-top: 1px dashed #ebebeb;display: flex;justify-content: space-between" class="editMessage">
32
+ <el-time-picker
33
+ v-model="timeValue"
34
+ placeholder="任意时间点"
35
+ style="margin: 10px 0 10px 0;width: 100%"
36
+ :clearable=false
37
+ @change="dataclick"
38
+ >
39
+ </el-time-picker>
40
+ <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
41
+ --> </div>
42
+ <div v-if="dateTime" style="border-top: 1px dashed #ebebeb;" class="editMessage">
43
+ <el-date-picker
44
+ v-model="dateTimeValue"
45
+ type="datetime"
46
+ placeholder="选择日期时间"
47
+ style="width: 100%;margin: 10px 0 10px 0"
48
+ @change="dataclick"
49
+ >
50
+ </el-date-picker>
51
+ <!-- <span @click="quedingClick(bianliangId)" style="display:flex;align-items:center;"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
52
+ --> </div>
53
+ <!--<div v-if="dateRange" style="border-top: 1px dashed #ebebeb;">
54
+ <el-date-picker
55
+ v-model="dateRangeValue"
56
+ type="daterange"
57
+ range-separator="至"
58
+ start-placeholder="开始日期"
59
+ end-placeholder="结束日期"
60
+ style="margin: 10px 16px;width: 80%"
61
+ >
62
+ </el-date-picker>
63
+ <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
64
+ </div>
65
+ <div v-if="timeRange" style="border-top: 1px dashed #ebebeb;">
66
+ <el-time-picker
67
+ is-range
68
+ v-model="timeRangeValue"
69
+ range-separator="至"
70
+ start-placeholder="开始时间"
71
+ end-placeholder="结束时间"
72
+ placeholder="选择时间范围"
73
+ style="margin: 10px 16px;width: 80%"
74
+ >
75
+ </el-time-picker>
76
+ <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
77
+
78
+ </div>
79
+ <div v-if="dateTimeRange" style="border-top: 1px dashed #ebebeb;">
80
+ <el-date-picker
81
+ v-model="dateTimeValue"
82
+ type="datetimerange"
83
+ range-separator="至"
84
+ start-placeholder="开始日期"
85
+ end-placeholder="结束日期"
86
+ style="width: 80%;margin: 10px 16px"
87
+
88
+ >
89
+ </el-date-picker>
90
+ <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
91
+ </div>-->
92
+ </div>
93
+ <div v-if="isPhone">
94
+ <div v-if="single" style="border-top: 1px dashed #ebebeb;" class="editMessage">
95
+ <el-input v-model="input" placeholder="请输入内容" class="inputClass" @input="testClick" @blur="inputBlur"></el-input>
96
+ <!-- <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
97
+ --> </div>
98
+ <div v-if="date">
99
+ <van-calendar v-model="show" @confirm="onConfirm" :default-date="defaultDate"/>
100
+ <!-- <el-date-picker
101
+ v-model="dateValue"
102
+ type="date"
103
+ placeholder="选择日期"
104
+ style="width: 80%;margin: 10px 10px 10px 0"
105
+ :editable=false
106
+ >
107
+ </el-date-picker>
108
+ <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
109
+ --></div>
110
+
111
+ <div v-if="time">
112
+ <van-popup v-model="showTimePicker" position="bottom">
113
+ <van-datetime-picker
114
+ v-model="timeValue"
115
+ type="datetime"
116
+ title="选择时间"
117
+ :min-date="minDate"
118
+ :formatter="formatter"
119
+ @cancel="showTimePicker = false"
120
+ @confirm="onConfirmTime"
121
+ />
122
+ </van-popup>
123
+ <!-- <el-time-picker
124
+ v-model="timeValue"
125
+ placeholder="任意时间点"
126
+ style="margin: 10px 10px 10px 0;width: 80%"
127
+ :editable=false
128
+ >
129
+ </el-time-picker>
130
+ <span @click="quedingClick" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
131
+ --> </div>
132
+ <div v-if="dateTime">
133
+ <van-popup v-model="showDateTimePicker" position="bottom">
134
+ <van-datetime-picker
135
+ v-model="dateTimeValue"
136
+ type="datetime"
137
+ title="选择日期时间"
138
+ :min-date="minDate"
139
+ :formatter="formatter"
140
+ @cancel="showDateTimePicker = false"
141
+ @confirm="onConfirmDateTime"
142
+ />
143
+ </van-popup>
144
+ <!-- <el-date-picker
145
+ v-model="dateTimeValue"
146
+ type="datetime"
147
+ placeholder="选择日期时间"
148
+ style="width: 80%;margin: 10px 10px 10px 0"
149
+ :editable=false
150
+
151
+ >
152
+ </el-date-picker>
153
+ <span @click="quedingClick(bianliangId)" style="display: flex;align-items: center"><i class="el-icon-success" style="color: #4C61E1;font-size: 32px;cursor: pointer"></i></span>
154
+ --></div>
155
+ <!-- <div v-if="dateRange" style="border-top: 1px dashed #ebebeb;display: flex">
156
+ &lt;!&ndash;<el-date-picker
157
+ v-model="dateRangeValue"
158
+ type="daterange"
159
+ range-separator="至"
160
+ start-placeholder="开始日期"
161
+ end-placeholder="结束日期"
162
+ style="margin: 10px 16px;width: 80%"
163
+ :editable=false
164
+
165
+ >
166
+ </el-date-picker>&ndash;&gt;
167
+ <div style="width: 90%">
168
+ <van-cell title="选择日期区间" :value="dateRangeValue" @click="show = true" />
169
+ <van-calendar v-model="show" type="range" @confirm="onConfirm" />
170
+ </div>
171
+ <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
172
+
173
+
174
+
175
+ </div>
176
+ <div v-if="timeRange" style="border-top: 1px dashed #ebebeb;">
177
+ <el-time-picker
178
+ is-range
179
+ v-model="timeRangeValue"
180
+ range-separator="至"
181
+ start-placeholder="开始时间"
182
+ end-placeholder="结束时间"
183
+ placeholder="选择时间范围"
184
+ style="margin: 10px 16px;width: 80%"
185
+
186
+ :editable=false
187
+ >
188
+ </el-time-picker>
189
+ <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
190
+
191
+ </div>
192
+ <div v-if="dateTimeRange" style="border-top: 1px dashed #ebebeb;display: flex">
193
+ &lt;!&ndash; <el-date-picker
194
+ v-model="dateTimeValue"
195
+ type="datetimerange"
196
+ range-separator="至"
197
+ start-placeholder="开始日期"
198
+ end-placeholder="结束日期"
199
+ style="width: 80%;margin: 10px 16px"
200
+ :editable=false
201
+
202
+
203
+ >
204
+ </el-date-picker>&ndash;&gt;
205
+ <div style="width: 90%">
206
+ <van-field
207
+ readonly
208
+ clickable
209
+ name="datetimePicker"
210
+ :value=dateTimeValue[0]
211
+ label='选择时间'
212
+ placeholder="点击选择开始日期时间"
213
+ @click="showDateTimePicker=true"
214
+ />
215
+ <van-popup v-model="showDateTimePicker" position="bottom">
216
+ <van-datetime-picker
217
+ v-model="currentDate"
218
+ type="datetime"
219
+ title="选择开始日期时间"
220
+ @confirm="onConfirmDateTime($event)"
221
+ @cancel="showDateTimePicker = false"
222
+ :min-date="minDate"
223
+ :formatter="formatter"
224
+ />
225
+ </van-popup>
226
+ <van-field
227
+ readonly
228
+ clickable
229
+ name="datetimePicker"
230
+ :value=dateTimeValue1[0]
231
+ label=" "
232
+ placeholder="点击选择结束日期时间"
233
+ @click="showDateTimePicker1=true"
234
+ />
235
+ <van-popup v-model="showDateTimePicker1" position="bottom">
236
+ <van-datetime-picker
237
+ v-model="currentDate"
238
+ type="datetime"
239
+ title="选择结束日期时间"
240
+ @confirm="onConfirmDateTime1($event)"
241
+ @cancel="showDateTimePicker1 = false"
242
+ :min-date="minDate"
243
+ :formatter="formatter"
244
+ />
245
+ </van-popup>
246
+ </div>
247
+
248
+ <span @click="quedingClick(bianliangId)" ><i class="el-icon-success" style="color: #409eff;font-size: 32px;text-align: center;vertical-align: middle;cursor: pointer"></i></span>
249
+ </div>-->
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </template>
254
+
255
+ <script>
256
+ /*import $ from 'jquery'*/
257
+ export default {
258
+ name: 'TextMessage',
259
+ data(){
260
+ return{
261
+ show:false,
262
+ single:false,
263
+ date:false,
264
+ time:false,
265
+ dateTime:false,
266
+ dateRange:false,
267
+ timeRange:false,
268
+ input:'',
269
+ bianliangId:'',
270
+ dateValue:'',
271
+ message:[{content:'王亚欣',type:'SINGLE',value:'',id:1},{content:['2020-11-18T07:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'DATE-RANGE',value:'',id:2},{content:'2020-11-18T07:25:16.000+0000',type:'TIME',value:'',id:3},{content:'2020-11-18T07:25:16.000+0000',type:'DATE',value:'',id:4},{content:['2020-11-18T07:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'DATERANGE',value:'',id:5},{content:['2020-11-18T08:25:16.000+0000','2020-11-21T07:25:16.000+0000'],type:'TIMERANGE',value:'',id:6},],
272
+ isPhone:false,
273
+ isCompany:false,
274
+ dateTimeValue:'',
275
+ timeValue:'',
276
+ dateRangeValue:'',
277
+ dateRangeValues:'',
278
+ timeRangeValue:[],
279
+ dateTimeValue1:[],
280
+ test:0,
281
+ currentDate:new Date(),
282
+ minDate: new Date(2020, 0, 1),
283
+ showDateTimePicker1:false,
284
+ showDateTimePicker:false,
285
+ values:[],
286
+ checkValue:'',
287
+ disableds:false,
288
+ submitValue:'确认',
289
+ dateInnerText:'',
290
+ defaultDate:'',
291
+ showTimePicker:false,
292
+
293
+ }
294
+ },
295
+ props:{
296
+ text:{
297
+ type:Object,
298
+ default(){
299
+ return {}
300
+ }
301
+ },
302
+ type:String,
303
+ disable:Boolean,
304
+ submit:Boolean
305
+ },
306
+ mounted() {
307
+ this.isMobile()
308
+ console.log(this.disable)
309
+ let span=this.$el
310
+ let defaults=span.getElementsByClassName('ask-component-placeholder-span')
311
+ for (let i=0;i<defaults.length;i++)
312
+ {
313
+ this.values.push({})
314
+ this.values[i]['key']=defaults[i].getAttribute('data')
315
+ this.values[i]['value']=defaults[i].innerText
316
+ this.values[i]['type']=defaults[i].getAttribute('type')
317
+ }
318
+ let text=this.$el
319
+ console.log('dom',text)
320
+ let test=text.getElementsByClassName('ask-component-placeholder-span')
321
+ let cpntain=text.getElementsByClassName('ask-component-placeholder-container')
322
+ let icon=text.getElementsByClassName('arsenalkebianji')
323
+ for (let i=0;i<icon.length;i++)
324
+ {
325
+ icon[i].style.color='#4C61E1'
326
+ }
327
+ for (let i=0;i<cpntain.length;i++)
328
+ {
329
+ if(this.type!==undefined)
330
+ {
331
+ cpntain[i].style.paddingRight=0.2+'rem'
332
+ cpntain[i].style.paddingLeft=0.2+'rem'
333
+ }
334
+ else
335
+ {
336
+ cpntain[i].style.paddingRight=4+'px'
337
+ cpntain[i].style.paddingLeft=4+'px'
338
+ }
339
+
340
+ }
341
+ for (let i=0;i<test.length;i++)
342
+ {
343
+ if(test[i].getAttribute('type')==='DATE_PICKER')
344
+ {
345
+ let date=Number(test[i].innerText)*1000
346
+ test[i].innerText=new Date(date).Format("MM-dd")
347
+ }
348
+ if(test[i].getAttribute('type')==='TIME_PICKER')
349
+ {
350
+ let time=Number(test[i].innerText)*1000
351
+ test[i].innerText=new Date(time).Format("hh:mm")
352
+ }
353
+ if(test[i].getAttribute('type') === 'DATE_TIME_PICKER'){
354
+ let time=Number(test[i].innerText)*1000
355
+ test[i].innerText=new Date(time).Format("yyyy-MM-dd hh:mm")
356
+ }
357
+ }
358
+ },
359
+ beforeMount() {
360
+ if(this.disable===true)
361
+ {
362
+ this.disableds=true
363
+
364
+ }
365
+ else
366
+ {
367
+ this.disableds=false
368
+
369
+ }
370
+ if(this.submit===true)
371
+ {
372
+ this.submitValue='已确认'
373
+ }
374
+ else
375
+ {
376
+ this.submitValue='确认'
377
+ }
378
+ },
379
+ methods:{
380
+ dataclick(){
381
+ if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
382
+ {
383
+ for (let i=0;i<this.values.length;i++)
384
+ {
385
+ if(this.values[i].key === this.checkValue.getAttribute('data'))
386
+ {
387
+ if(this.dateValue!=='')
388
+ {
389
+ this.checkValue.innerText=new Date(this.dateValue).Format('MM-dd')
390
+ this.values[i].value=new Date(this.dateValue).getTime()
391
+ }
392
+ else
393
+ {
394
+ this.values[i].value=this.checkValue.innerText
395
+ }
396
+ }
397
+ }
398
+ }
399
+ if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
400
+ {
401
+ for (let i=0;i<this.values.length;i++)
402
+ {
403
+ if(this.values[i].key === this.checkValue.getAttribute('data') )
404
+ {
405
+ if(this.timeValue!=='')
406
+ {
407
+
408
+ this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
409
+ this.values[i].value=new Date(this.timeValue).getTime()
410
+ }
411
+ else
412
+ {
413
+ this.values[i].value=this.checkValue.innerText
414
+ }
415
+ }
416
+ }
417
+ }
418
+ if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
419
+ {
420
+ for (let i=0;i<this.values.length;i++)
421
+ {
422
+ if(this.values[i].key === this.checkValue.getAttribute('data') )
423
+ {
424
+ if(this.dateTimeValue!=='')
425
+ {
426
+
427
+ this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
428
+ this.values[i].value=new Date(this.dateTimeValue).getTime()
429
+ }
430
+ else
431
+ {
432
+ this.values[i].value=this.checkValue.innerText
433
+ }
434
+ }
435
+ }
436
+ }
437
+ },
438
+ clickClick(e){
439
+ if(e.target.onclick!==null)
440
+ {
441
+ let that=this
442
+ window._askEditValue=that._askEditValue;
443
+ }
444
+ },
445
+ _askEditValue(a,b){
446
+ let type=b.getAttribute('type')
447
+ this.checkValue=b
448
+ if(type === 'INPUT')
449
+ {
450
+ this.single=true
451
+ this.date=false
452
+ this.time=false
453
+ this.dateTime=false
454
+ this.input= b.innerText
455
+ }
456
+ if(type === 'DATE_PICKER')
457
+ {
458
+ this.single=false
459
+ this.date=true
460
+ this.time=false
461
+ this.dateTime=false
462
+ this.show=true
463
+ for (let i=0;i<this.values.length;i++)
464
+ {
465
+ if(b.getAttribute('data') === this.values[i].key)
466
+ {
467
+ if(typeof this.values[i].value == 'string')
468
+ {
469
+ this.dateInnerText=Number(this.values[i].value)*1000
470
+ }
471
+ else
472
+ {
473
+ this.dateInnerText=Number(this.values[i].value)
474
+ }
475
+ this.dateValue=new Date(this.dateInnerText).Format("yyyy:MM-dd")
476
+ this.defaultDate=new Date(this.dateInnerText)
477
+ }
478
+ return
479
+ }
480
+
481
+ }
482
+ if(type === 'TIME_PICKER')
483
+ {
484
+ this.single=false
485
+ this.date=false
486
+ this.time=true
487
+ this.dateTime=false
488
+ this.showTimePicker=true
489
+ for (let i=0;i<this.values.length;i++)
490
+ {
491
+ if(b.getAttribute('data') === this.values[i].key)
492
+ {
493
+ let time
494
+ if(typeof this.values[i].value == 'string'){
495
+ time=Number(this.values[i].value)*1000
496
+ }
497
+ else
498
+ {
499
+ time=Number(this.values[i].value)
500
+ }
501
+ if(this.isPhone ===true)
502
+ {
503
+ this.timeValue=new Date(time)
504
+ }
505
+ else
506
+ {
507
+ this.timeValue=new Date(time).Format("yyyy-MM-dd hh:mm")
508
+ }
509
+ }
510
+ }
511
+ }
512
+ if(type === 'DATE_TIME_PICKER')
513
+ {
514
+ this.single=false
515
+ this.date=false
516
+ this.time=false
517
+ this.dateTime=true
518
+ this.showDateTimePicker=true
519
+ for (let i=0;i<this.values.length;i++)
520
+ {
521
+ if(b.getAttribute('data') === this.values[i].key)
522
+ {
523
+ let time
524
+ if(typeof this.values[i].value == 'string'){
525
+ time=Number(this.values[i].value)*1000
526
+ }
527
+ else
528
+ {
529
+ time=Number(this.values[i].value)
530
+ }
531
+ if(this.isPhone===true)
532
+ {
533
+ this.dateTimeValue=new Date(time)
534
+ }
535
+ else
536
+ {
537
+ this.dateTimeValue=new Date(time).Format("yyyy-MM-dd hh:mm:ss")
538
+ }
539
+ }
540
+ }
541
+ }
542
+
543
+ },
544
+ formatter(type, value) {
545
+ // 格式化选择器日期
546
+ if (type === "year") {
547
+ return `${value}年`;
548
+ } else if (type === "month") {
549
+ return `${value}月`;
550
+ } else if (type === "day") {
551
+ return `${value}日`;
552
+ } else if (type === "hour") {
553
+ return `${value}时`;
554
+ } else if (type === "minute") {
555
+ return `${value}分`;
556
+ }
557
+ return value;
558
+ },
559
+ //提交按钮
560
+ submitClick(){
561
+ this.single=false
562
+ this.date=false
563
+ this.time=false
564
+ this.dateTime=false
565
+ let infomation={}
566
+ let obj = {}
567
+ this.values.map(item => {
568
+ obj[item.key] = item
569
+ })
570
+ let result = Object.values(obj)
571
+ console.log(result)
572
+ let text=this.$el
573
+ console.log(text)
574
+ let test=text.getElementsByClassName('ask-component-placeholder-span')
575
+ for (let i=0;i<test.length;i++)
576
+ {
577
+ if(test[i].getAttribute('type')==='DATE_PICKER')
578
+ {
579
+ if(test[i].getAttribute('data')===result[i].key)
580
+ {
581
+ console.log(typeof result[i].value)
582
+ if(typeof result[i].value =='number'){
583
+ result[i].value/=1000
584
+ let resu=String(result[i].value)
585
+ result[i].value=resu
586
+ }
587
+ }
588
+ }
589
+ if(test[i].getAttribute('type')==='TIME_PICKER')
590
+ {
591
+ if(test[i].getAttribute('data')===result[i].key)
592
+ {
593
+ if(typeof result[i].value =='number')
594
+ {
595
+ result[i].value/=1000
596
+ let resu=String(result[i].value)
597
+ result[i].value=resu
598
+ }
599
+ }
600
+ }
601
+ if(test[i].getAttribute('type')==='DATE_TIME_PICKER')
602
+ {
603
+ if(test[i].getAttribute('data')===result[i].key)
604
+ {
605
+ if(typeof result[i].value =='number')
606
+ {
607
+ result[i].value/=1000
608
+ let resu=String(result[i].value)
609
+ result[i].value=resu
610
+ }
611
+ }
612
+ }
613
+ }
614
+ infomation['values']=result
615
+ infomation['goToAction']=this.text.goToAction
616
+ let innerhtml=this.$el
617
+ infomation['template']=innerhtml.querySelector('#html').innerHTML
618
+ infomation['apiKey']=this.text.apiKey
619
+ this.$emit('submitClick',infomation,this.text.apiKey)
620
+ this.submitValue='已确认'
621
+ this.disableds=true
622
+ },
623
+ addZero(i){
624
+ if (i<10) {
625
+ i="0" + i;
626
+ }
627
+ return i;
628
+ },
629
+ formatDate(date) {
630
+ if(typeof date == 'object')
631
+ {
632
+ const dateTime = new Date(date[0])
633
+ const dateTime1=new Date(date[1])
634
+ return `${dateTime.getMonth() + 1}月${dateTime.getDate()}日 ${this.addZero(dateTime.getHours())} : ${this.addZero(dateTime.getMinutes())} - ${dateTime1.getMonth() + 1}月${dateTime1.getDate()}日 ${this.addZero(dateTime1.getHours())} : ${this.addZero(dateTime1.getMinutes())}`;
635
+ }
636
+ else
637
+ {
638
+ const dateTime = new Date(date)
639
+ return `${dateTime.getMonth() + 1}月${dateTime.getDate()}日`;
640
+ }
641
+
642
+ },
643
+ //格式成时间
644
+ formatDate1(date){
645
+ const dateTime = new Date(date)
646
+ return `${this.addZero(dateTime.getHours())}:${this.addZero(dateTime.getMinutes())}`;
647
+ },
648
+ //格式成日期
649
+ formatDate2(date){
650
+ const dateTime = new Date(date)
651
+ return `${dateTime.getMonth() + 1} - ${dateTime.getDate()}`;
652
+ },
653
+ //日期范围
654
+ formatDate3(date){
655
+ const dateTime = new Date(date[0])
656
+ const dateTime1=new Date(date[1])
657
+ return `${dateTime.getMonth() + 1}月 ${dateTime.getDate()}日 - ${dateTime1.getMonth() + 1}月 ${dateTime1.getDate()}日`;
658
+ },
659
+ //时间范围
660
+ formatDate4(date){
661
+ const dateTime = new Date(date[0])
662
+ const dateTime1=new Date(date[1])
663
+ return `${dateTime.getHours()}: ${dateTime.getMinutes()} - ${dateTime1.getHours()}: ${dateTime1.getMinutes()}`;
664
+ },
665
+ testClick(value){
666
+ if(this.checkValue.getAttribute('type') === 'INPUT')
667
+ {
668
+ for (let i=0;i<this.values.length;i++)
669
+ {
670
+ if(this.values[i].key === this.checkValue.getAttribute('data') )
671
+ {
672
+ this.checkValue.innerText=value
673
+ this.values[i].value=this.checkValue.innerText
674
+ }
675
+ }
676
+ }
677
+ },
678
+ inputBlur(){
679
+ this.single=false
680
+ },
681
+ quedingClick(){
682
+ if(this.checkValue.getAttribute('type') === 'INPUT')
683
+ {
684
+ for (let i=0;i<this.values.length;i++)
685
+ {
686
+ if(this.values[i].key === this.checkValue.getAttribute('data') )
687
+ {
688
+ if(this.input!=='')
689
+ {
690
+ this.checkValue.innerText=this.input
691
+ }
692
+ console.log(this.checkValue.innerText)
693
+ this.values[i].value=this.checkValue.innerText
694
+ }
695
+ }
696
+ this.single = false
697
+ this.input=''
698
+ }
699
+ if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
700
+
701
+ {
702
+ for (let i=0;i<this.values.length;i++)
703
+ {
704
+ if(this.values[i].key === this.checkValue.getAttribute('data'))
705
+ {
706
+ if(this.dateValue!=='')
707
+ {
708
+ this.checkValue.innerText=new Date(this.dateValue).Format('MM-dd')
709
+ this.values[i].value=new Date(this.dateValue).getTime()
710
+ }
711
+ else
712
+ {
713
+ this.values[i].value=this.checkValue.innerText
714
+ }
715
+ }
716
+ }
717
+ this.date = false
718
+ this.dateValue=''
719
+ }
720
+ if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
721
+ {
722
+ for (let i=0;i<this.values.length;i++)
723
+ {
724
+ if(this.values[i].key === this.checkValue.getAttribute('data') )
725
+ {
726
+ if(this.timeValue!=='')
727
+ {
728
+
729
+ this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
730
+ this.values[i].value=new Date(this.timeValue).getTime()
731
+ }
732
+ else
733
+ {
734
+ this.values[i].value=this.checkValue.innerText
735
+ }
736
+ }
737
+ }
738
+ this.time = false
739
+ this.timeValue=''
740
+ }
741
+ if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
742
+ {
743
+ for (let i=0;i<this.values.length;i++)
744
+ {
745
+ if(this.values[i].key === this.checkValue.getAttribute('data') )
746
+ {
747
+ if(this.dateTimeValue!=='')
748
+ {
749
+
750
+ this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
751
+ this.values[i].value=new Date(this.dateTimeValue).getTime()
752
+ }
753
+ else
754
+ {
755
+ this.values[i].value=this.checkValue.innerText
756
+ }
757
+ }
758
+ }
759
+ this.dateTime = false
760
+ this.dateTimeValue=''
761
+ }
762
+
763
+ },
764
+ isMobile() {
765
+ let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
766
+ if (flag) {
767
+ this.isPhone=true
768
+ }
769
+ else
770
+ {
771
+ this.isCompany=true
772
+
773
+ }
774
+ },
775
+ onConfirmDateTime(date){
776
+ console.log(date)
777
+ if(this.checkValue.getAttribute('type') === 'DATE_TIME_PICKER')
778
+ {
779
+ for (let i=0;i<this.values.length;i++)
780
+ {
781
+ if(this.values[i].key === this.checkValue.getAttribute('data') )
782
+ {
783
+ if(this.dateTimeValue!=='')
784
+ {
785
+
786
+ this.checkValue.innerText=new Date(this.dateTimeValue).Format('yyyy-MM-dd hh:mm')
787
+ this.values[i].value=new Date(this.dateTimeValue).getTime()
788
+ }
789
+ else
790
+ {
791
+ this.values[i].value=this.checkValue.innerText
792
+ }
793
+ console.log(this.values[i].value)
794
+ }
795
+ }
796
+ }
797
+ this.showDateTimePicker = false;
798
+ },
799
+
800
+ onConfirm(date) {
801
+ console.log(date)
802
+ this.show = false;
803
+ if(this.checkValue.getAttribute('type') === 'DATE_PICKER')
804
+
805
+ {
806
+ for (let i=0;i<this.values.length;i++)
807
+ {
808
+ if(this.values[i].key === this.checkValue.getAttribute('data'))
809
+ {
810
+ if(date!=='')
811
+ {
812
+ this.checkValue.innerText=new Date(date).Format('MM-dd')
813
+ this.values[i].value=new Date(date).getTime()
814
+ }
815
+ else
816
+ {
817
+ this.values[i].value=this.checkValue.innerText
818
+ }
819
+ }
820
+ }
821
+ this.date = false
822
+ this.dateValue=''
823
+ }
824
+
825
+ },
826
+ onConfirmTime(time){
827
+ console.log(time)
828
+ this.showTimePicker=false
829
+ if(this.checkValue.getAttribute('type') === 'TIME_PICKER')
830
+ {
831
+ for (let i=0;i<this.values.length;i++)
832
+ {
833
+ if(this.values[i].key === this.checkValue.getAttribute('data') )
834
+ {
835
+ if(this.timeValue!=='')
836
+ {
837
+
838
+ this.checkValue.innerText=new Date(this.timeValue).Format('hh:mm')
839
+ this.values[i].value=new Date(this.timeValue).getTime()
840
+ }
841
+ else
842
+ {
843
+ this.values[i].value=this.checkValue.innerText
844
+ }
845
+ }
846
+ }
847
+ }
848
+ }
849
+ }
850
+ }
851
+ </script>
852
+
853
+
854
+ <style lang="less">
855
+ @import "../../assets/less/common.css";
856
+ .remPhoneClass{
857
+ margin: 0 auto;
858
+ width: 80vw;
859
+ .inputClass{
860
+ width: 100%;
861
+ }
862
+ .htmlClass{
863
+ padding: 4px 0;
864
+ }
865
+ #submit{
866
+ padding: 4px 0;
867
+ }
868
+
869
+ }
870
+ .remCompanyClass{
871
+
872
+ margin: 0 auto;
873
+ width: 300px;
874
+ .inputClass{
875
+ padding: 10px 0 10px 0;
876
+ width: 100%;
877
+ }
878
+ #submit{
879
+ padding: 10px 0 4px 10px;
880
+ }
881
+ .editMessage{
882
+ display: flex;
883
+ justify-content: space-between;
884
+ }
885
+ }
886
+ .van-cell::after{
887
+ content: none!important;
888
+ }
889
+ i{
890
+ cursor: pointer;
891
+ }
892
+ .notClickClass{
893
+ pointer-events: none;
894
+ }
895
+ </style>