askbot-dragon 0.7.56 → 0.7.57

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 (62) 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 -54
  5. package/public/index.html +30 -30
  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/js/AliyunlssUtil.js +92 -92
  11. package/src/assets/js/Base64Util.js +22 -22
  12. package/src/assets/js/script.js +36 -36
  13. package/src/assets/less/common.css +6773 -6773
  14. package/src/assets/less/converSationContainer/common.less +191 -191
  15. package/src/assets/less/converSationContainer/converSatonContainer.less +493 -493
  16. package/src/assets/less/iconfont.css +37 -37
  17. package/src/assets/less/ticketMessage.less +211 -211
  18. package/src/components/ActionAlertIframe.vue +112 -112
  19. package/src/components/AskIFrame.vue +15 -15
  20. package/src/components/ConversationContainer.vue +1185 -1185
  21. package/src/components/FileType.vue +86 -86
  22. package/src/components/Message.vue +27 -27
  23. package/src/components/actionSatisfaction.vue +107 -107
  24. package/src/components/actionSendToBot.vue +62 -62
  25. package/src/components/answerDissatisfaction.vue +62 -62
  26. package/src/components/answerRadio.vue +76 -76
  27. package/src/components/ask-components/DissatisfactionOptions.vue +57 -57
  28. package/src/components/ask-components/Msgloading.vue +37 -37
  29. package/src/components/ask-components/SatisfactionV2.vue +15 -15
  30. package/src/components/askVideo.vue +138 -138
  31. package/src/components/assetDetails.vue +370 -370
  32. package/src/components/assetMessage.vue +228 -228
  33. package/src/components/associationIntention.vue +121 -121
  34. package/src/components/botActionSatisfactor.vue +68 -68
  35. package/src/components/chatContent.vue +513 -513
  36. package/src/components/feedBack.vue +136 -136
  37. package/src/components/file/AliyunOssComponents.vue +108 -108
  38. package/src/components/formTemplate.vue +1958 -1949
  39. package/src/components/loadingProcess.vue +164 -164
  40. package/src/components/message/ActionAlertIframe.vue +112 -112
  41. package/src/components/message/ShopMessage.vue +164 -164
  42. package/src/components/message/TextMessage.vue +924 -924
  43. package/src/components/message/TicketMessage.vue +177 -177
  44. package/src/components/message/swiper/index.js +4 -4
  45. package/src/components/message/swiper/ticketSwiper.vue +502 -502
  46. package/src/components/message/swiper/ticketSwiperItem.vue +61 -61
  47. package/src/components/msgLoading.vue +231 -231
  48. package/src/components/recommend.vue +89 -89
  49. package/src/components/selector/hOption.vue +20 -20
  50. package/src/components/selector/hSelector.vue +199 -199
  51. package/src/components/selector/hWrapper.vue +216 -216
  52. package/src/components/source/BotMessage.vue +24 -24
  53. package/src/components/source/CustomMessage.vue +24 -24
  54. package/src/components/test.vue +260 -260
  55. package/src/components/utils/AliyunIssUtil.js +72 -72
  56. package/src/components/utils/ckeditor.js +124 -124
  57. package/src/components/utils/format_date.js +18 -18
  58. package/src/components/utils/index.js +6 -6
  59. package/src/components/utils/math_utils.js +15 -15
  60. package/src/components/voiceComponent.vue +119 -119
  61. package/src/main.js +44 -44
  62. package/vue.config.js +34 -34
package/src/components/formTemplate.vue CHANGED
@@ -1,1950 +1,1959 @@
1
- <template>
2
- <div class="media-body">
3
- <div class="formClass" :class="isPhone?'remPhoneClassForm':'remCompanyClassForm'" v-if="formShow.form">
4
- <div class="titleName" >
5
- {{formShow.form.name}}
6
- </div>
7
- <div class="title-link"></div>
8
- <div class="pcFormClass" v-if="isCompany">
9
- <div v-for="(item) in formShow.form.formFieldRelation"
10
- :key="item.formField.id"
11
- :class="{notClick:disableds === true}"
12
- >
13
- <div v-if="item.formField.type!=='CHAT_RECORD'&&item.formField.type!=='CHANNEL'&&item.display&&item.fieldId!=='workorder_name'" class="field-item">
14
- <div v-if="item.display&&item.fieldId!=='workorder_name'&&item.formField.type!=='EXPLANATION'&&item.formField.type!=='EXPLAIN'" class="field-item-name">
15
- <span v-if="item.fieldId!=='workorder_description'&&item.fieldId!=='workorder_clientId'">{{item.formField.name}}</span>
16
- <span v-if="item.fieldId==='workorder_description'">问题描述</span>
17
- <span v-if="item.fieldId==='workorder_clientId'">报单人</span>
18
- <span style="color: red;padding-left: 5px" v-if="item.required===true">*</span>
19
- </div>
20
- <el-input v-model=item.value
21
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
22
- :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
23
- v-if="item.formField.type==='INPUT'&&item.fieldId!=='workorder_name'"
24
- ></el-input>
25
- <div v-if="item.formField.type==='EXPLANATION'">
26
- <div class="explanation">
27
- <p class="explanation-p">
28
- <span class="el-icon-info"></span>
29
- {{item.formField.extInfo.descriptionText}}
30
- </p>
31
- </div>
32
- </div>
33
- <div v-if="item.formField.type==='EXPLAIN'">
34
- <div class="explanation">
35
- <p class="explanation-p">
36
- <span class="el-icon-info"></span>
37
- <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
38
- <span v-else>{{item.value}}</span>
39
- </p>
40
- </div>
41
- </div>
42
- <el-input type="textarea" :rows="2" v-model=item.value
43
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
44
- :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
45
- v-if="item.formField.type==='TEXTAREA'&& item.display&&item.fieldId!=='workorder_description'"
46
- ></el-input>
47
- <ckeditor
48
- :editor="ckeditor.editor"
49
- v-model="item.value"
50
- :config="ckeditor.editorConfig"
51
- v-else-if="item.display&&item.fieldId==='workorder_description'"
52
- ></ckeditor>
53
- <el-date-picker
54
- v-model=item.value
55
- type="date"
56
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
57
- style="width: 100%"
58
- v-if="item.formField.type==='DATE_PICKER'"
59
- >
60
- </el-date-picker>
61
- <el-time-picker
62
- v-model=item.value
63
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
64
- style="width: 100%"
65
- v-if="item.formField.type==='TIME_PICKER' && !item.formField.extInfo.mold"
66
- >
67
- </el-time-picker>
68
- <el-date-picker
69
- v-model=item.value
70
- type="date"
71
- style="width: 100%"
72
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
73
- v-if="item.formField.type==='TIME_PICKER' &&item.formField.extInfo.mold==='DATA'"
74
- >
75
- </el-date-picker>
76
- <el-date-picker
77
- v-model=item.value
78
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期时间'"
79
- clearable
80
- style="width: 100%"
81
- type="datetime"
82
- v-if="item.formField.type==='TIME_PICKER' &&item.formField.extInfo.mold==='DATA_TIME'"
83
- >
84
- </el-date-picker>
85
- <div v-if="item.formField.type==='RADIO' &&item.formField.extInfo.options">
86
- <el-radio-group v-model=item.value style="text-align:left">
87
- <el-radio v-for="(items,index) in item.formField.extInfo.options" :label=items.value :key="index">{{items.label}}</el-radio>
88
- </el-radio-group>
89
- </div>
90
- <div v-if="item.formField.type==='RADIO' &&item.formField.extInfo.option">
91
- <el-radio-group v-model=item.value style="text-align:left">
92
- <el-radio v-for="(items,index) in item.formField.extInfo.option" :label=items.value :key="index">{{items.label}}</el-radio>
93
- </el-radio-group>
94
- </div>
95
- <div v-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.option">
96
- <el-checkbox-group v-model=item.value style="text-align:left">
97
- <el-checkbox
98
- v-for="(items,index) in item.formField.extInfo.option"
99
- :label=items.value
100
- :key="index"
101
- >{{items.label}}</el-checkbox>
102
- </el-checkbox-group>
103
- </div>
104
- <div v-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.options">
105
- <el-checkbox-group v-model=item.value style="text-align:left">
106
- <el-checkbox
107
- v-for="(items,index) in item.formField.extInfo.options"
108
- :label=items.value
109
- :key="index"
110
- >{{items.label}}</el-checkbox>
111
- </el-checkbox-group>
112
- </div>
113
- <div v-if="item.formField.type==='SELECT' || item.formField.type==='OPTION'" >
114
- <el-select
115
- v-model=item.value
116
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
117
- style="width: 100%"
118
- filterable
119
- v-if="item.formField.extInfo && item.formField.extInfo.option"
120
- >
121
- <el-option
122
- v-for="(items,index) in item.formField.extInfo.option"
123
- :key="index"
124
- :label="items.label"
125
- :value="items.value">
126
- </el-option>
127
- </el-select>
128
- <el-select
129
- v-model=item.value
130
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
131
- style="width: 100%"
132
- filterable
133
- v-else-if="item.formField.extInfo && item.formField.extInfo.options"
134
- >
135
- <el-option
136
- v-for="(items,index) in item.formField.extInfo.options"
137
- :key="index"
138
- :label="items.label"
139
- :value="items.value">
140
- </el-option>
141
- </el-select>
142
- </div>
143
- <div v-if="item.formField.type==='CASCADER'">
144
- <el-cascader
145
- v-model=item.value
146
- :options=item.formField.extInfo.cascade
147
- style="width: 100%;"
148
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
149
- v-if="item.formField.extInfo.cascade"
150
- ></el-cascader>
151
- <el-cascader
152
- v-model=item.value
153
- :options=item.formField.extInfo.cascadeDown[0].options
154
- style="width: 100%;"
155
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
156
- v-else-if="item.formField.extInfo.cascadeDown"
157
- ></el-cascader>
158
- </div>
159
- <div v-if="item.formField.type==='FILE'">
160
- <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" @mouseover="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" style="flex: 0.75;display:flex;align-items: center;">
161
- <el-upload
162
- class="upload-demo"
163
- ref="upload"
164
- list-type="picture-card"
165
- accept="image/*"
166
- name="file"
167
- action="/open/media/file/upload"
168
- :multiple="false"
169
- :file-list="fileListList[item.fieldId]"
170
- :limit=item.formField.extInfo.limitNum?Number(item.formField.extInfo.limitNum):1
171
- :before-upload="beforeAvatarUpload"
172
- :on-exceed="exceedUpload"
173
- :on-remove="handleRemove"
174
- :http-request="aliyunOssRequest"
175
- :on-change="handleEditChange"
176
- :on-success="successUpload"
177
- >
178
- <i class="el-icon-plus"></i>
179
- </el-upload>
180
- </div>
181
- </div>
182
- </div>
183
- </div>
184
- </div>
185
- <div class="mobileFormClass" v-else style="padding: 10px 0;" :class="{notClick:disableds === true}">
186
- <div v-for="(item,index) in formFieldRelation"
187
- :key="item.formField.id"
188
- class="form-field-item"
189
- >
190
- <div v-if="item.formField.type==='INPUT'" class="form-field-item-value">
191
- <van-field v-model=item.value
192
- :label=item.formField.name
193
- :required="item.required===true"
194
- :disabled="disableds"
195
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
196
- :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
197
- />
198
- </div>
199
- <div v-else-if="item.formField.type==='EXPLANATION'||item.formField.type==='EXPLAIN'" class="explan-ation">
200
- <div class="explanation">
201
- <p class="explanation-p" v-if="item.formField.type==='EXPLANATION'">
202
- <span class="el-icon-info"></span>
203
- {{item.formField.extInfo.descriptionText}}
204
- </p>
205
- <p v-else class="explanation-p">
206
- <span class="el-icon-info"></span>
207
- <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
208
- <span v-else>{{item.value}}</span>
209
- </p>
210
- </div>
211
- </div>
212
- <div v-else-if="item.formField.type==='TEXTAREA'" class="form-field-item-value">
213
- <van-field v-model=item.value
214
- :label=item.formField.name
215
- :required="item.required===true"
216
- type="textarea"
217
- :disabled="disableds"
218
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
219
- :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
220
- v-if="item.fieldId!=='workorder_description'"
221
- />
222
- <div v-if="item.fieldId==='workorder_description'" class="workorder_description">
223
- <div class="field-name" :class="item.required?'required-name':''">
224
- <span v-if="item.required" style="color: red">*</span>
225
- {{item.formField.name}}
226
- </div>
227
- <ckeditor
228
- :editor="ckeditor.editor"
229
- v-model="item.value"
230
- :config="ckeditor.editorConfig"
231
- ></ckeditor>
232
- </div>
233
- </div>
234
- <div v-else-if="item.formField.type==='DATE_PICKER'" class="form-field-item-value">
235
- <van-field
236
- readonly
237
- clickable
238
- name="calendar"
239
- :value=dateValue[item.fieldId]
240
- :label=item.formField.name
241
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
242
- :required="item.required===true"
243
- @click="dateClick(item.fieldId)"
244
- :disabled="disableds"
245
- right-icon="van-icon van-icon-arrow van-cell__right-icon"
246
- />
247
- <van-calendar
248
- v-model="showCalendar"
249
- @confirm="onConfirmCalendar($event,dateId)"
250
- />
251
- </div>
252
- <div v-else-if="item.formField.type==='TIME_PICKER'&&(!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME')" class="form-field-item-value">
253
- <van-field
254
- readonly
255
- clickable
256
- name="datetimePicker"
257
- :required="item.required===true"
258
- :value=timeValue[item.fieldId]
259
- :label=item.formField.name
260
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
261
- @click="timeClick(item.fieldId,item)"
262
- :disabled="disableds"
263
- right-icon="van-icon van-icon-arrow van-cell__right-icon"
264
-
265
- />
266
- <van-popup v-model="showTimePicker" position="bottom">
267
- <van-datetime-picker
268
- v-model="currentDate"
269
- type="datetime"
270
- @confirm="onConfirm($event,timeId,item)"
271
- @cancel="showTimePicker = false"
272
- :min-date="minDate"
273
- :formatter="formatter"
274
- :max-date="maxDate"
275
- />
276
- </van-popup>
277
- </div>
278
- <div v-else-if="item.formField.type==='TIME_PICKER'&&item.formField.extInfo.mold==='DATA'" class="form-field-item-value">
279
- <van-field
280
- readonly
281
- clickable
282
- name="datetimePicker"
283
- :required="item.required===true"
284
- :value=timeValue[item.fieldId]
285
- :label=item.formField.name
286
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
287
- @click="timeClick(item.fieldId,item)"
288
- :disabled="disableds"
289
- right-icon="van-icon van-icon-arrow van-cell__right-icon"
290
-
291
- />
292
- <van-calendar v-model="showTimePickerd" :show-confirm="false" @confirm="onConfirm($event,timeId,item)" @cancel="showTimePickerd = false"/>
293
- </div>
294
- <div v-else-if="item.formField.type==='RADIO'" class="form-field-item-other">
295
- <van-field name="radio" :label="item.formField.name" :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.option">
296
- <template #input style="display: flex;align-items: center">
297
- <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
298
- <van-radio v-for="(items,index) in item.formField.extInfo.option" :name=items.value :key="index">{{items.label}}</van-radio>
299
- </van-radio-group>
300
- </template>
301
- </van-field>
302
- <van-field name="radio" :label="item.formField.name" :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.options">
303
- <template #input style="display: flex;align-items: center" >
304
- <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
305
- <van-radio v-for="(items,index) in item.formField.extInfo.options" :name=items.value :key="index">{{items.label}}</van-radio>
306
- </van-radio-group>
307
- </template>
308
- </van-field>
309
- </div>
310
- <div v-else-if="item.formField.type==='CHECKBOX'" class="form-field-item-other">
311
- <van-field name="checkbox" :label=item.formField.name :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.option">
312
- <template #input style="display: flex;align-items: center" >
313
- <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
314
- <van-checkbox
315
- v-for="(items,index) in item.formField.extInfo.option"
316
- shape="square"
317
- :key="index"
318
- :name=items.value>
319
- {{items.label}}
320
- </van-checkbox>
321
- </van-checkbox-group>
322
- </template>
323
- </van-field>
324
- <van-field name="checkbox" :label=item.formField.name :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.options">
325
- <template #input style="display: flex;align-items: center" >
326
- <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
327
- <van-checkbox
328
- v-for="(items,index) in item.formField.extInfo.options"
329
- shape="square"
330
- :key="index"
331
- :name=items.value>
332
- {{items.label}}
333
- </van-checkbox>
334
- </van-checkbox-group>
335
- </template>
336
- </van-field>
337
- </div>
338
- <div v-else-if="item.formField.type==='SELECT' || item.formField.type==='OPTION'" class="form-field-item-value">
339
- <van-field
340
- readonly
341
- clickable
342
- name="picker"
343
- :value=selectValues[item.fieldId]
344
- :label=item.formField.name
345
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
346
- @click="selectClick(item.fieldId)"
347
- :required="item.required===true"
348
- :disabled="disableds"
349
- v-if="item.fieldId!=='workorder_clientId'"
350
- right-icon="van-icon van-icon-arrow van-cell__right-icon"
351
- />
352
- <van-field
353
- readonly
354
- clickable
355
- name="picker"
356
- :value=selectValues[item.fieldId]
357
- label='报单人'
358
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
359
- @click="selectClick(item.fieldId)"
360
- :required="item.required===true"
361
- :disabled="disableds"
362
- v-if="item.fieldId==='workorder_clientId'"
363
- right-icon="van-icon van-icon-arrow van-cell__right-icon"
364
- />
365
- <van-popup v-model="showPicker" position="bottom">
366
- <van-picker
367
- show-toolbar
368
- :columns=selectValue
369
- @confirm="onConfirmSelect($event,selectId)"
370
- @cancel="showPicker = false"
371
- :key="selectKey"
372
-
373
- />
374
- </van-popup>
375
- </div>
376
- <div v-else-if="item.formField.type==='CASCADER'" class="form-field-item-value">
377
- <van-field
378
- readonly
379
- clickable
380
- name="area"
381
- :value=cascadeValue[item.fieldId]
382
- :label=item.formField.name
383
- :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
384
- @click="pickerClick(item.fieldId)"
385
- :required="item.required===true"
386
- :disabled="disableds"
387
- right-icon="van-icon van-icon-arrow van-cell__right-icon"
388
- />
389
-
390
- <van-popup v-model="showArea" position="bottom">
391
- <van-picker v-if="pageShow"
392
- show-toolbar
393
- :columns="column"
394
- @cancel="onCancel"
395
- @confirm="onConfirms($event,pickerId,index)"
396
- @change="onChange"
397
- :item-height="45"
398
- :key="keyValue"
399
- />
400
- </van-popup>
401
- </div>
402
- <div v-else-if="item.formField.type === 'FILE'" class="form-field-item-value">
403
- <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" class="form-field-item-file">
404
- <div class="fileName"><span style="color: red" v-if="item.required">*</span>{{item.formField.name}}</div>
405
- <van-uploader
406
- v-model="fileListList[item.fieldId]"
407
- :before-read="beforeRead"
408
- :max-count='item.formField.extInfo.limitNum!==undefined?item.formField.extInfo.limitNum:1'
409
- :after-read="afterRead"
410
- accept="image/*"
411
- :multiple=false
412
- >
413
- <div class="vant-upload--picture-card">
414
- <i class="el-icon-plus"></i>
415
- </div>
416
-
417
- </van-uploader>
418
- </div>
419
- </div>
420
- </div>
421
- <van-popup v-model="fileUpload" :close-on-click-overlay="false">
422
- <div style="background-color: black;height: 100px;width: 100px;display: flex;justify-content: center;align-items: center" >
423
- <van-loading type="spinner"/>
424
- </div>
425
- </van-popup>
426
- </div>
427
- <div class="bottom-link"></div>
428
- <div class="form-submit-btn" v-if="isCompany">
429
- <el-button style="border-color: #366aff;color: white;background-color: #366aff" round class="submitClass" size="small" @click="submitClick" :disabled="disableds">
430
- <i class="el-icon-check" v-if="!disableds"></i>
431
- {{submitValue}}
432
- </el-button>
433
- </div>
434
- <div class="form-submit-btn" v-else>
435
- <van-button round type="info" class="submitClass" @click="submitClick" :disabled="disableds">
436
- <i class="el-icon-check" v-if="!disableds"></i>
437
- {{submitValue}}
438
- </van-button>
439
- </div>
440
- </div>
441
- <el-dialog :visible.sync="dialogVisible">
442
- <img width="100%" :src="dialogImageUrl" alt="">
443
- </el-dialog>
444
-
445
- </div>
446
- </template>
447
-
448
- <script>
449
- let that
450
- import {multipartUpload,ossFileUrl} from "./utils/AliyunIssUtil";
451
- import {MyCustomUploadAdapterPlugin} from "./utils/ckeditor";
452
- import CKEDITOR from 'ckeditor'
453
- export default {
454
- name: "formTemplate",
455
- data() {
456
- return {
457
- isPhone: false,
458
- isCompany: false,
459
- checkboxGroup: [],
460
- currentDate: new Date(),
461
- timeValue: [],
462
- dateValue: [],
463
- showPicker: false,
464
- showTimePicker: false,
465
- showTimePickerd:false,
466
- showCalendar: false,
467
- radio: [],
468
- selectValue: [],
469
- pickerValue: [],
470
- showArea: false,
471
- dateTimeValue: [],
472
- dateTimeValue1: [],
473
- showDateTimePicker: false,
474
- showDateTimePicker1: false,
475
- pickerId: 0,
476
- dateId: 0,
477
- timeId: 0,
478
- selectId: 0,
479
- dateTimeId: 0,
480
- column: [
481
- {
482
- values: '', // 设置的页面初始值
483
- className: "column1"
484
- },
485
- {
486
- values: '',
487
- className: "column2",
488
- },
489
- {
490
- values: '',
491
- className: "column3",
492
- }
493
- ],
494
- pageShow: false, //省市区三级联动是否显示（因为是接口返回的数据，等三级数据渲染完毕之后，在显示三级联动）
495
- cityDates: '', //安联当前选中市的所有区所有数据
496
- data: [],//接口返回所有级联数据
497
- dateTimeRange: '',
498
- selectValues: [],
499
- cascadeValue: [],
500
- minDate: new Date(2020, 0, 1),
501
- maxDate: new Date(2025, 11, 31),
502
- disableds: false,
503
- submitValue: '提交',
504
- clickPicker: '',
505
- columns: [],
506
- copyForm: [],
507
- cascaderId:0,
508
- formShow:[],
509
-
510
- uploadAvatarParams: {
511
- token: "8c98087dfd2d48f856d8c95c09115def",
512
- },
513
- fileListList:[],
514
- keyValue:'',
515
- selectKey:'shuijiao',
516
- filedId:'',
517
- disabled:false,
518
- dialogVisible:false,
519
- dialogImageUrl:'',
520
- fileUpload:false,
521
- videoFlag:false,
522
- videoUploadPercent:false,
523
- fileType:['PICTURE','VIDEO','AUDIO'],
524
- loading:'',
525
- ossConfig: {
526
- region: "oss-cn-zhangjiakou",
527
- //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
528
- accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
529
- accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
530
- // stsToken: '<Your securityToken(STS)>',
531
- bucket: "guoranopen-zjk",
532
- },
533
- hideUploadEdit:false,
534
- limitNum:1,
535
- ckeditor: {
536
- editor: CKEDITOR.ClassicEditor,
537
- editorConfig: {
538
- extraPlugins: [MyCustomUploadAdapterPlugin],
539
- toolbar: [
540
- 'imageUpload'
541
- ]
542
- },
543
- },
544
-
545
- }
546
- },
547
- props: {
548
- formList: {
549
- type: Object,
550
- default() {
551
- return {}
552
- }
553
- },
554
- type:String,
555
- disable:Boolean,
556
- submit:Boolean,
557
- usePropStyleType:{
558
- type:Boolean,
559
- default() {
560
- return false;
561
- }
562
- },
563
- propIsPhone: {
564
- type:Boolean,
565
- default() {
566
- return false;
567
- }
568
- },
569
- propIsCompany: {
570
- type:Boolean,
571
- default() {
572
- return false;
573
- }
574
- },
575
- uploadUrl: {
576
- type:String,
577
- default(){
578
- return '/open/media/file/upload'
579
- }
580
- }
581
- },
582
- computed:{
583
- acceptType:function () {
584
- return '.jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF'
585
- },
586
- formFieldRelation:function (){
587
- let arr = [];
588
- this.formShow.form.formFieldRelation.forEach(item=> {
589
- if (item.fieldId!=='workorder_name'&&item.display) {
590
- arr.push(item);
591
- }
592
- })
593
- return arr;
594
- }
595
-
596
- },
597
- mounted() {
598
- this.isMobile()
599
- },
600
- beforeCreate() {
601
- // 等待dom渲染完毕之后，再去显示 三级联动。
602
- that=this
603
- this.$nextTick(function () {
604
- this.pageShow = true;
605
- })
606
- },
607
- created() {
608
-
609
- if(this.disable===true)
610
- {
611
- this.disableds=true
612
- this.submitValue = '已提交'
613
- }
614
- else
615
- {
616
- this.disableds=false
617
- this.submitValue = '提交'
618
- }
619
- },
620
- beforeMount() {
621
- that.defaultClick()
622
- },
623
- methods: {
624
- beforeRead(file){
625
- console.debug('file',file)
626
- console.debug('fileType',!Array.isArray(file))
627
- if (!Array.isArray(file)){
628
- const isLte2M = file.size / 1024 / 1024 <= 8;
629
- const isSupportedFormat =file.type.indexOf('image')!==-1
630
- if (!isSupportedFormat){
631
- this.$message.error("只能上传图片格式");
632
- return false
633
- }
634
- if (!isLte2M&&isSupportedFormat) {
635
- this.$message.error("上传图片大小不能超过 8MB!");
636
- return false
637
- }
638
- return true
639
- }
640
- else{
641
- let length = 0
642
- if (this.fileListList[this.filedId]){
643
- length = this.fileListList[this.filedId].length
644
- }
645
- if (file.length<=this.limitNum-length){
646
- for (let i=0;i<file.length;i++){
647
- const isLte2M = file[i].size / 1024 / 1024 <= 8;
648
- const isSupportedFormat =file[i].type.indexOf('image')!==-1
649
- if (!isSupportedFormat){
650
- this.$message.error("只能上传图片格式");
651
- return false
652
- }
653
- if (!isLte2M&&isSupportedFormat) {
654
- this.$message.error("上传图片大小不能超过 8MB!");
655
- return false
656
- }
657
- return true
658
- }
659
- }
660
- else {
661
- let num = 1
662
- if (this.limitNum){
663
- num = this.limitNum
664
- }
665
- let messageText = '仅支持上传'+num+'张图片'
666
- this.$message.error(messageText);
667
- return false
668
- }
669
-
670
- }
671
-
672
- },
673
- //文件上传至服务器
674
- afterRead(file){
675
- this.fileUpload=true
676
- console.debug(file)
677
- console.debug(!Array.isArray(file))
678
- if (!Array.isArray(file)){
679
- this.uploadImgFun(file.content,file.file.name,file,file.file);
680
- }
681
- else {
682
- let num = 1
683
- if (this.limitNum){
684
- num = this.limitNum
685
- }
686
- if (file.length >num){
687
- this.$message.warning('仅支持上传'+num+'张图片')
688
- return false
689
- }
690
- else {
691
- for (let i = 0; i < file.length; i++){
692
- this.uploadImgFun(file[i].content,file[i].file.name,file[i],file[i].file);
693
- }
694
- }
695
- }
696
- },
697
- uploadImgFun(content,name,fileCon,file){
698
- console.log(fileCon)
699
- let imageData = {
700
- urls:[]
701
- }
702
- let imageInfo = {
703
- name:"",
704
- status:'',
705
- url:''
706
- }
707
- let res = multipartUpload(
708
- this.ossConfig,
709
- file,
710
- null,
711
- imageInfo
712
- );
713
- res.then((res) => {
714
- console.log("upload result:", res);
715
- // let filePath = res.name;
716
- imageData.urls.push({
717
- name:res.name,
718
- url:ossFileUrl(this.ossConfig, res.name),
719
- status:'success'
720
- })
721
- imageInfo.url = ossFileUrl(this.ossConfig, res.name)
722
- imageInfo.status='success'
723
- imageInfo.name=res.name
724
- for (let j=0;j<this.fileListList[this.filedId].length;j++){
725
- if (this.fileListList[this.filedId][j].content&&this.fileListList[this.filedId][j].content===content){
726
- this.fileListList[this.filedId][j].name=res.name
727
- this.fileListList[this.filedId][j].status='success'
728
- this.fileListList[this.filedId][j].url=imageInfo.url
729
- delete this.fileListList[this.filedId][j].content
730
- }
731
- }
732
- this.fileUpload=false
733
- }).catch((err) => {
734
- console.debug("upload err", err);
735
- });
736
-
737
- },
738
- dataURLtoFileFun (dataurl, filename) {
739
- // 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
740
- let arr = dataurl.split(",");
741
- let mime = arr[0].match(/:(.*?);/)[1];
742
- let bstr = atob(arr[1]);
743
- let n = bstr.length;
744
- let u8arr = new Uint8Array(n);
745
- while (n--) {
746
- u8arr[n] = bstr.charCodeAt(n);
747
- }
748
- return new File([u8arr], filename, { type: mime });
749
- },
750
- //初始化默认值
751
- defaultClick() {
752
- for (let i = 0; i < this.formList.form.formFieldRelation.length; i++)
753
- {
754
- if(this.formList.form.formFieldRelation[i].formField.type ==='SELECT'||this.formList.form.formFieldRelation[i].formField.type ==='CHECKBOX' ||this.formList.form.formFieldRelation[i].formField.type==='RADIO' ||this.formList.form.formFieldRelation[i].formField.type==='OPTION')
755
- {
756
- if(this.formList.form.formFieldRelation[i].formField.extInfo && !this.formList.form.formFieldRelation[i].formField.extInfo.option)
757
- {
758
- if(this.formList.form.formFieldRelation[i].formField.extInfo.exinfo)
759
- {
760
- for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.exinfo.length;j++)
761
- {
762
- this.$set(this.formList.form.formFieldRelation[i].formField.extInfo.exinfo[j],'label',this.formList.form.formFieldRelation[i].formField.extInfo.exinfo[j].value)
763
- }
764
- this.$set(this.formList.form.formFieldRelation[i].formField.extInfo,'option',this.formList.form.formFieldRelation[i].formField.extInfo.exinfo)
765
- }
766
- if (this.formList.form.formFieldRelation[i].formField.extInfo.option){
767
- if (this.formList.form.formFieldRelation[i].formField.type === 'RADIO') {
768
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
769
- if(!this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value)
770
- {
771
- this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value=this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
772
- }
773
- }
774
- if(!this.formList.form.formFieldRelation[i].value)
775
- {
776
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
777
- if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
778
- this.formList.form.formFieldRelation[i].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
779
- }
780
- }
781
- }
782
- }
783
- if (this.formList.form.formFieldRelation[i].formField.type === 'CHECKBOX') {
784
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
785
- if (!this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value) {
786
- this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
787
- }
788
- }
789
-
790
- if (!this.formList.form.formFieldRelation[i].value||this.formList.form.formFieldRelation[i].value.length === 0)
791
- {
792
- this.formList.form.formFieldRelation[i].value=[]
793
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
794
- if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
795
- this.formList.form.formFieldRelation[i].value[0] = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
796
- }
797
- }
798
- }
799
- }
800
- }
801
-
802
- }
803
- else {
804
- if (this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.options){
805
- if (this.formList.form.formFieldRelation[i].formField.type === 'RADIO') {
806
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
807
- if(!this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value)
808
- {
809
- this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value=this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
810
- }
811
- }
812
- if(!this.formList.form.formFieldRelation[i].value)
813
- {
814
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
815
- if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
816
- this.formList.form.formFieldRelation[i].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
817
- }
818
- }
819
- }
820
- }
821
- if (this.formList.form.formFieldRelation[i].formField.type === 'CHECKBOX') {
822
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
823
- if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value === '') {
824
- this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
825
- }
826
- }
827
-
828
- if (this.formList.form.formFieldRelation[i].value === null||this.formList.form.formFieldRelation[i].value.length === 0)
829
- {
830
- this.formList.form.formFieldRelation[i].value=[]
831
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
832
- if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
833
- this.formList.form.formFieldRelation[i].value[0] = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
834
- }
835
- }
836
- }
837
- }
838
- }
839
- }
840
-
841
- }
842
- if (this.formList.form.formFieldRelation[i].formField.type ==='FILE'){
843
- if (this.formList.form.formFieldRelation[i].value!==undefined){
844
- if (this.formList.form.formFieldRelation[i].value===null||this.formList.form.formFieldRelation[i].value===''){
845
- this.formList.form.formFieldRelation[i].value=[]
846
- }
847
- else {
848
- let valueList=[]
849
- let bool=false
850
- if(this.formList.form.formFieldRelation[i].value.length > 0) {
851
- for (let file=0;file<this.formList.form.formFieldRelation[i].value.length;file++) {
852
- let type = typeof (this.formList.form.formFieldRelation[i].value[file])
853
- if (type === "string") {
854
- bool = true
855
- valueList[file] = {}
856
- valueList[file].url = this.formList.form.formFieldRelation[i].value[file]
857
- }
858
- if (type === 'object'&&JSON.stringify(this.formList.form.formFieldRelation[i].value[file])!=='{}') {
859
- this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=this.formList.form.formFieldRelation[i].value
860
- }
861
- else {
862
- this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=[]
863
- }
864
- }
865
- if (bool){
866
- this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=valueList
867
- }
868
- }
869
- }
870
- }
871
-
872
-
873
-
874
- }
875
-
876
- }
877
- let test = []
878
- for (let i = 0; i < this.formList.form.formFieldRelation.length; i++) {
879
- if (this.formList.form.formFieldRelation[i].formField.type === 'CASCADER') {
880
- test.push(this.formList.form.formFieldRelation[i])
881
- let cascader=''
882
- if(this.formList.form.formFieldRelation[i].value)
883
- {
884
- if(this.formList.form.formFieldRelation[i].value.length > 0)
885
- {
886
- for (let j = 0; j < this.formList.form.formFieldRelation[i].value.length; j++) {
887
- if (this.formList.form.formFieldRelation[i].value[j]) {
888
- cascader += this.formList.form.formFieldRelation[i].value[j] + '/'
889
- }
890
- }
891
- cascader = cascader.substr(0, cascader.length - 1)
892
-
893
- }
894
- this.cascadeValue[this.formList.form.formFieldRelation[i].fieldId]=cascader
895
- }
896
- else
897
- {
898
- this.formList.form.formFieldRelation[i].value=[]
899
- }
900
- }
901
- if (this.formList.form.formFieldRelation[i].formField.type === 'DATE_PICKER')
902
- {
903
- if(this.formList.form.formFieldRelation[i].value!==null && this.formList.form.formFieldRelation[i].value!=='' )
904
- {
905
-
906
- this.dateValue[this.formList.form.formFieldRelation[i].fieldId]=this.formatDate(this.formList.form.formFieldRelation[i].value)
907
- }
908
- }
909
- if (this.formList.form.formFieldRelation[i].formField.type === 'TIME_PICKER')
910
- {
911
- if(this.formList.form.formFieldRelation[i].value!==''&& this.formList.form.formFieldRelation[i].value!==null)
912
- {
913
- const dateTime = new Date(this.formList.form.formFieldRelation[i].value)
914
- this.timeValue[this.formList.form.formFieldRelation[i].fieldId]=this.addZero(dateTime.getHours()) + ':' + this.addZero(dateTime.getMinutes())
915
-
916
- }
917
- }
918
- if (this.formList.form.formFieldRelation[i].formField.type === 'SELECT' || this.formList.form.formFieldRelation[i].formField.type === 'OPTION') {
919
- if (this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option){
920
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
921
- if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value === '') {
922
- this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
923
- }
924
- }
925
- if(this.formList.form.formFieldRelation[i].value)
926
- {
927
- for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.option.length;j++)
928
- {
929
- if (this.formList.form.formFieldRelation[i].value === this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value)
930
- {
931
- this.selectValues[this.formList.form.formFieldRelation[i].fieldId] =this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
932
- }
933
- }
934
- /*this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].value*/
935
-
936
- }
937
- else
938
- {
939
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
940
- if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
941
- this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
942
- this.formList.form.formFieldRelation[i].value=this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
943
- }
944
- }
945
- }
946
- }
947
- else {
948
- if(this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option) {
949
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
950
- if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value === '') {
951
- this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
952
- }
953
- }
954
- }
955
- if(this.formList.form.formFieldRelation[i].value && this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option)
956
- {
957
- for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.options.length;j++)
958
- {
959
- if (this.formList.form.formFieldRelation[i].value === this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value)
960
- {
961
- this.selectValues[this.formList.form.formFieldRelation[i].fieldId] =this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
962
- }
963
- }
964
- /*this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].value*/
965
-
966
- }
967
- else
968
- {
969
- if(this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option) {
970
- for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
971
- if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
972
- this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
973
- this.formList.form.formFieldRelation[i].value=this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
974
- }
975
- }
976
- }
977
- }
978
- }
979
-
980
- }
981
- }
982
- this.formShow=this.formList
983
- },
984
- addZero(i) {
985
- if (i < 10) {
986
- i = "0" + i;
987
- }
988
- return i;
989
- },
990
- formatter(type, value) {
991
- // 格式化选择器日期
992
- if (type === "year") {
993
- return `${value}年`;
994
- } else if (type === "month") {
995
- return `${value}月`;
996
- } else if (type === "day") {
997
- return `${value}日`;
998
- } else if (type === "hour") {
999
- return `${value}时`;
1000
- } else if (type === "minute") {
1001
- return `${value}分`;
1002
- }
1003
- return value;
1004
- },
1005
-
1006
- isMobile() {
1007
- if (this.usePropStyleType === false){
1008
- 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);
1009
- if (flag) {
1010
- this.isPhone=true
1011
- }
1012
- else {
1013
- this.isCompany=true
1014
- }
1015
- }else {
1016
- this.isPhone=this.propIsPhone;
1017
- this.isCompany=this.propIsCompany;
1018
- }
1019
- },
1020
- //时间的选择器
1021
- onConfirm(value, id,item) {
1022
- for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1023
- if (this.formShow.form.formFieldRelation[i].fieldId=== id) {
1024
- this.formShow.form.formFieldRelation[i].value = value
1025
- if (!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME'){
1026
- this.timeValue[id] =this.formatDate(value) +" "+ this.addZero(value.getHours()) + ':' + this.addZero(value.getMinutes())
1027
- this.showTimePicker = false;
1028
- }
1029
- else {
1030
- this.timeValue[id] =this.formatDate(value)
1031
- this.showTimePickerd = false;
1032
- }
1033
- break
1034
- }
1035
- }
1036
- },
1037
- //转换日期的函数
1038
- formatDate(date) {
1039
- const dateTime = new Date(date)
1040
- return `${dateTime.getFullYear()}-${dateTime.getMonth() + 1}-${dateTime.getDate()}`;
1041
- },
1042
- //日期的选择器
1043
- onConfirmCalendar(date, id) {
1044
- for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1045
- if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1046
- this.dateValue[id] = this.formatDate(date)
1047
- this.formShow.form.formFieldRelation[i].value = date
1048
- this.showCalendar = false;
1049
- break
1050
- }
1051
- }
1052
- },
1053
- //下拉的选择器
1054
- onConfirmSelect(value, id) {
1055
- for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1056
- if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1057
- this.selectValues[this.formShow.form.formFieldRelation[i].fieldId] = value
1058
- if (this.formShow.form.formFieldRelation[i].formField.extInfo.option){
1059
- for (let j = 0; j < this.formShow.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
1060
- if(value ===this.formShow.form.formFieldRelation[i].formField.extInfo.option[j].label)
1061
- {
1062
- this.formShow.form.formFieldRelation[i].value = this.formShow.form.formFieldRelation[i].formField.extInfo.option[j].value
1063
- }
1064
- }
1065
- }
1066
- else {
1067
- for (let j = 0; j < this.formShow.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
1068
- if(value ===this.formShow.form.formFieldRelation[i].formField.extInfo.options[j].label)
1069
- {
1070
- this.formShow.form.formFieldRelation[i].value = this.formShow.form.formFieldRelation[i].formField.extInfo.options[j].value
1071
- }
1072
- }
1073
- }
1074
-
1075
- this.showPicker = false;
1076
- break
1077
- }
1078
- }
1079
- },
1080
- //时间日期的选择器
1081
- /* onConfirmDateTime(date,id){
1082
- for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
1083
- {
1084
-
1085
- if(this.formList.form.formFieldRelation[i].formField.id===id)
1086
- {
1087
- this.dateTimeValue[id]=this.addZero(date.getFullYear())+'-'+this.addZero(date.getMonth())+'-'+this.addZero(date.getDate())+' '+this.addZero(date.getHours())+':'+this.addZero(date.getMinutes())
1088
- this.formList.form.formFieldRelation[i].value[0]=date
1089
- this.showDateTimePicker = false;
1090
- break
1091
- }
1092
- }
1093
-
1094
- },
1095
- onConfirmDateTime1(date,id){
1096
- for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
1097
- {
1098
- if(this.formList.form.formFieldRelation[i].formField.id===id)
1099
- {
1100
-
1101
- this.dateTimeValue1[id]=this.addZero(date.getFullYear())+'-'+this.addZero(date.getMonth())+'-'+this.addZero(date.getDate())+' '+this.addZero(date.getHours())+':'+this.addZero(date.getMinutes())
1102
- this.formList.form.formFieldRelation[i].value[1]=date
1103
- this.showDateTimePicker1 = false;
1104
- break
1105
- }
1106
- }
1107
- },*/
1108
- //提交按钮事件
1109
- submitClick() {
1110
-
1111
- for (let i=0;i<this.formShow.form.formFieldRelation.length;i++)
1112
- {
1113
- if(this.formShow.form.formFieldRelation[i].formField.type==='CASCADER')
1114
- {
1115
- let cascader = this.formShow.form.formFieldRelation[i].formField.extInfo.cascade?this.formShow.form.formFieldRelation[i].formField.extInfo.cascade:this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options?this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options:[]
1116
- cascader.forEach(item=>{
1117
- if(item.children!==undefined)
1118
- {
1119
- if(item.children.length===0)
1120
- delete item.children
1121
- else {
1122
- item.children.forEach(items=>{
1123
- if(items.children)
1124
- {
1125
- if(items.children.length===0)
1126
- delete items.children
1127
- }
1128
- })
1129
- }
1130
- }
1131
- })
1132
- }
1133
- if (this.fileListList[this.formShow.form.formFieldRelation[i].fieldId]!==undefined){
1134
- let value=[]
1135
-
1136
- this.fileListList[this.formShow.form.formFieldRelation[i].fieldId].forEach(item=>{
1137
- let file={}
1138
- file.name=item.name
1139
- file.url=item.url
1140
- value.push(file)
1141
- })
1142
- this.formShow.form.formFieldRelation[i].value=value
1143
- }
1144
-
1145
- if(this.formShow.form.formFieldRelation[i].display===true && this.formShow.form.formFieldRelation[i].required === true&&this.formShow.form.formFieldRelation[i].fieldId!=='workorder_name'&& this.formShow.form.formFieldRelation[i].formField.type !== 'EXPLANATION')
1146
- {
1147
-
1148
- if(!this.formShow.form.formFieldRelation[i].value || (this.formShow.form.formFieldRelation[i].value&&this.formShow.form.formFieldRelation[i].value.length===0))
1149
- {
1150
- this.$message.error('请完善'+ this.formShow.form.formFieldRelation[i].formField.name)
1151
- return
1152
- }
1153
- }
1154
- }
1155
- this.$emit('submitClick',this.formShow)
1156
- this.disableds = true
1157
- this.submitValue = '已提交'
1158
- },
1159
- //日期的点击事件
1160
- dateClick(id) {
1161
- if(this.disableds === false)
1162
- {
1163
- for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1164
- if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1165
- this.dateId = id
1166
- this.showCalendar = true
1167
- break
1168
- }
1169
- }
1170
- }
1171
-
1172
- },
1173
- //时间的点击事件
1174
- timeClick(id,item) {
1175
- if(this.disableds === false){
1176
- for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1177
- if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1178
- this.timeId = id
1179
- if (!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME'){
1180
- this.showTimePicker = true
1181
- }
1182
- else {
1183
- this.showTimePickerd= true
1184
- }
1185
-
1186
- break
1187
- }
1188
-
1189
- }
1190
- }
1191
-
1192
- },
1193
- //下拉的点击事件
1194
- selectClick(id) {
1195
- if(this.disableds === false){
1196
- let selectOption
1197
- this.selectValue=[]
1198
- for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1199
- if(this.formShow.form.formFieldRelation[i].formField.type==='SELECT' || this.formShow.form.formFieldRelation[i].formField.type==='OPTION')
1200
- {
1201
- if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1202
- selectOption = this.formShow.form.formFieldRelation[i].formField.extInfo.option?this.formShow.form.formFieldRelation[i].formField.extInfo.option:this.formShow.form.formFieldRelation[i].formField.extInfo.options?this.formShow.form.formFieldRelation[i].formField.extInfo.options:[]
1203
- for (let j = 0; j < selectOption.length; j++) {
1204
- this.selectValue[j] = selectOption[j].label
1205
- }
1206
-
1207
- }
1208
- }
1209
- }
1210
- this.selectId = id
1211
- this.showPicker = true
1212
- }
1213
-
1214
- },
1215
- //级联的点击的事件
1216
- pickerClick(id) {
1217
- if(this.disableds === false)
1218
- {
1219
- if(this.pickerId!==id)
1220
- {
1221
- for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1222
- if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1223
- this.keyValue=''
1224
- if(this.formShow.form.formFieldRelation[i].value.length!==undefined)
1225
- {
1226
- for (let m=0;m<this.formShow.form.formFieldRelation[i].value.length;m++)
1227
- {
1228
- this.keyValue+=this.formShow.form.formFieldRelation[i].value[m]
1229
- }
1230
- }
1231
-
1232
- this.data = this.formShow.form.formFieldRelation[i].formField.extInfo.cascade?this.formShow.form.formFieldRelation[i].formField.extInfo.cascade:this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown?this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options:[]
1233
- this.column[0].values = Object.values(this.data).map(function (e) {
1234
- return {text: e.value, code: e.value}
1235
- })
1236
- if (this.data[0].children !== undefined) {
1237
- this.column[1].values = Object.values(this.data[0].children).map(function (e) {
1238
- return {text: e.value, code: e.value}
1239
- })
1240
- if (this.data[0].children[0].children !== undefined) {
1241
- this.column[2].values = Object.values(this.data[0].children[0].children).map(function (e) {
1242
- return {text: e.value, code: e.value}
1243
- })
1244
- }
1245
- else {
1246
- this.$set(this.data[0].children[0], 'children', [])
1247
- this.column[2].values=Object.values(this.data[0].children[0].children).map(function (res) {
1248
- return {text: res.value, code: res.value};
1249
- })
1250
- }
1251
- }
1252
- }
1253
- }
1254
- }
1255
-
1256
- this.pickerId = id
1257
- this.showArea = true
1258
- }
1259
-
1260
-
1261
- },
1262
-
1263
- onChange(picker, values,index) {
1264
- // 这里我有可能渲染的有问题，导致回调每次都修改了当前列，其他值没有修改，当前列？？（当前列什么鬼呀，什么垃圾啊？？？） 解释一下 ↓↓
1265
- // 因为vant的 van-picker 回调只会返回你修改的那一列，比如现在为 [北京，北京，东城区]，你修改了省为[天津市，天津市，和平区]，但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改，不知道我的渲染方法有问题还是什么问题。
1266
- // 所以我在这里判断change事件触发后，如果你修改了省份的话，回调里面省份会改变，但是市和区还是上一个省份的 市和区，这时我们执行回调修改省，市，区的时候，因为回调只有省改变了，市和区DOM改变了，但是回调里面没改变的问题（不晓得什么问题）,这时我们去找省下面的 市，我们取回调的市名称，如果在省下面没有找到这个市，默认展示第一个市，区也默认展示第一个市下面的区，如果遍历市能查到，就去展示对应的市。
1267
- // 回调时修改第2列数据
1268
- if (index == 0){
1269
- picker.setColumnValues(2, []); // 防止突然选中第一个，第二个是更新的，但第三个联级不更新，我暂时强制清空
1270
- }
1271
- let ColumnIndexss=picker.getIndexes()
1272
- let testValue=''
1273
- this.$nextTick(()=>{
1274
- if(index == 0)
1275
- {
1276
- if(this.data[ColumnIndexss[0]].children.length > 0)
1277
- {
1278
- if(this.data[ColumnIndexss[0]].children[0]!==undefined)
1279
- {
1280
- testValue=this.data[ColumnIndexss[0]].children[0].value
1281
- picker.setColumnValues(2, this.county(this.data, testValue));
1282
- }
1283
- }
1284
- else
1285
- picker.setColumnValues(2, []);
1286
- }
1287
- if(index == 1)
1288
- {
1289
- if(this.data[ColumnIndexss[0]].children.length > 0)
1290
- {
1291
- if(this.data[ColumnIndexss[0]].children[ColumnIndexss[1]]!==undefined)
1292
- {
1293
- testValue=this.data[ColumnIndexss[0]].children[ColumnIndexss[1]].value
1294
- picker.setColumnValues(2, this.county(this.data, testValue));
1295
- }
1296
- }
1297
- else
1298
- picker.setColumnValues(2, []);
1299
- }
1300
- })
1301
-
1302
- picker.setColumnValues(1, this.cityDate(this.data, values[0].text));
1303
- // 回调时修改第3列数据
1304
-
1305
-
1306
- },
1307
- // 修改级联第二级 这里不再多说什么了根据自己的数据格式来
1308
- cityDate(data, province) {
1309
- var that = this;
1310
- data.forEach(function (res) {
1311
- if (res.value == province) {
1312
- that.cityDates = res;
1313
- }
1314
- });
1315
- if (that.cityDates.children !== undefined&&that.cityDates.children.length > 0) {
1316
- return that.cityDates.children.map(function (res) {
1317
- return {text: res.value, code: res.value};
1318
- })
1319
- } else {
1320
- this.$set(that.cityDates, 'children', [])
1321
- return that.cityDates.children.map(function (res) {
1322
- return {text: res.value, code: res.value};
1323
- })
1324
- }
1325
- // return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
1326
- },
1327
- // 修改级联第三级 这里不再多说什么了根据自己的数据格式来
1328
- county(data, county) {
1329
- var that = this;
1330
- var countyDate = '';
1331
- // 因为vant的 van-picker 回调只会返回你修改的那一列，比如现在为 [北京，北京，东城区]，你修改了省为[天津市，天津市，和平区]，但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改，不知道我的渲染方法有问题还是什么问题。
1332
- // 所以我在这里判断change事件触发后，如果你修改了省份的话，回调里面省份会改变，但是市和区还是上一个省份的 市和区，这时我们执行回调修改省，市，区的时候，因为回调只有省改变了，市和区DOM改变了，但是回调里面没改变的问题（不晓得什么问题）,这时我们去找省下面的 市，我们取回调的市名称，如果在省下面没有找到这个市，默认展示第一个市，区也默认展示第一个市下面的区，如果遍历市能查到，就去展示对应的市。
1333
- that.cityDates.children.forEach(function (res) {
1334
- if (res.value == county) {
1335
- countyDate = res;
1336
- }
1337
- });
1338
- // 这里如果没有找到对应的县
1339
- if (countyDate == '') {
1340
- if(that.cityDates.children.length > 0)
1341
- {
1342
- countyDate = that.cityDates.children[0];
1343
- }
1344
-
1345
- }
1346
- // return 县
1347
- if (countyDate.children === undefined) {
1348
- this.$set(countyDate, 'children', [])
1349
- return countyDate.children.map(function (res) {
1350
- return {text: res.value, code: res.value};
1351
- })
1352
- } else {
1353
- return countyDate.children.map(function (res) {
1354
- return {text: res.value, code: res.value};
1355
- })
1356
- }
1357
-
1358
- // return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
1359
- },
1360
- //点击级联弹出框的确认按钮
1361
- onConfirms(val, id) {
1362
- let test = ''
1363
- for (let i = 0; i < val.length; i++) {
1364
- if (val[i] !== undefined) {
1365
- test += val[i].text + '/'
1366
- }
1367
- }
1368
- test = test.substr(0, test.length - 1)
1369
- for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1370
- if (this.formShow.form.formFieldRelation[i].fieldId=== id) {
1371
- this.cascadeValue[id] = test
1372
- for (let j = 0; j < val.length; j++) {
1373
- if (val[j] !== undefined) {
1374
- this.formShow.form.formFieldRelation[i].value[j] = val[j].text
1375
- }
1376
- }
1377
- break
1378
- }
1379
- }
1380
- this.showArea = false;
1381
- sessionStorage.setItem('cascader',test)
1382
- },
1383
- onCancel() {
1384
- this.showArea = false;
1385
- },
1386
- aliyunOssRequest(data){
1387
-
1388
- this.loading = this.$loading({
1389
- lock: true,
1390
- text: 'Loading',
1391
- spinner: 'el-icon-loading',
1392
- background: 'rgba(0, 0, 0, 0.8)'
1393
- });
1394
- let file = data.file;
1395
- console.debug("upload file:", file);
1396
- let imgInfo = {
1397
- status:'',
1398
- url:'',
1399
- name:''
1400
- }
1401
- /* let imageData = {
1402
- id:cid,
1403
- cid:cid,
1404
- type: "IMAGE",
1405
- content: {
1406
- urls: [],
1407
- progress: 0,
1408
- },
1409
- };*/
1410
- let res = multipartUpload(
1411
- this.ossConfig,
1412
- file,
1413
- null,
1414
- imgInfo
1415
- );
1416
- res.then((res) => {
1417
- console.debug("upload result:", res);
1418
- // let filePath = res.name;
1419
- /* imageData.content.progress = 1;
1420
- imageData.content.urls.push(
1421
- ossFileUrl(this.ossConfig, res.name)
1422
- );
1423
- console.log('imageData',imageData)*/
1424
- imgInfo.url = ossFileUrl(this.ossConfig, res.name)
1425
- imgInfo.status='success'
1426
- if (data.file){
1427
- imgInfo.name = data.file.name
1428
- imgInfo.uid = data.file.uid
1429
- }
1430
- if (!this.fileListList[this.filedId])
1431
- {
1432
- this.fileListList[this.filedId] = []
1433
- }
1434
- this.fileListList[this.filedId].push(imgInfo)
1435
- this.loading.close()
1436
- }).catch((err) => {
1437
- console.debug("upload err", err);
1438
- });
1439
- },
1440
- successUpload(response,file,fileList){
1441
- if (!this.fileListList[this.filedId]){
1442
- this.fileListList[this.filedId] = []
1443
- }
1444
- for (let i=0;i<fileList.length;i++){
1445
- if (!this.fileListList[this.filedId][i]){
1446
- this.fileListList[this.filedId][i]={}
1447
- }
1448
- this.fileListList[this.filedId][i].url=fileList[i].url
1449
- this.fileListList[this.filedId][i].name=fileList[i].name
1450
- this.fileListList[this.filedId][i].status=fileList[i].status
1451
- }
1452
- },
1453
- uploadProgress(){
1454
- this.loading = this.$loading({
1455
- lock: true,
1456
- text: 'Loading',
1457
- spinner: 'el-icon-loading',
1458
- background: 'rgba(0, 0, 0, 0.7)'
1459
- });
1460
- },
1461
- handleRemove(file) {
1462
- if (this.fileListList[this.filedId]){
1463
- for (let i=0;i<this.fileListList[this.filedId].length;i++)
1464
- {
1465
- if (this.fileListList[this.filedId][i].uid){
1466
- if (this.fileListList[this.filedId][i].uid===file.uid){
1467
- this.fileListList[this.filedId].splice(i,1)
1468
- return
1469
- }
1470
- }
1471
- else if (this.fileListList[this.filedId][i].url===file.url){
1472
- this.fileListList[this.filedId].splice(i,1)
1473
- return
1474
- }
1475
- }
1476
-
1477
- }
1478
- /*let value=[]
1479
- for (let i=0;i<fileList.length;i++){
1480
- value[i]={}
1481
- value[i].name=fileList[i].name
1482
- if(fileList[i].response){
1483
- value[i].url=fileList[i].response.data
1484
- }
1485
- else {
1486
- value[i].url=fileList[i].url
1487
- }
1488
- }
1489
- for (let i=0;i<this.formShow.form.formFieldRelation.length;i++){
1490
- if (this.formShow.form.formFieldRelation[i].fieldId===this.filedId){
1491
- this.fileListList[this.filedId]=value
1492
- }
1493
- }*/
1494
- /*this.fileListList = [...this.fileListList]*/
1495
- },
1496
- handleEditChange(file,fileList){
1497
- this.hideUploadEdit=fileList.length >= this.limitNum
1498
- },
1499
-
1500
- onUploadProgress: function (progress, point, file, videoData) {
1501
- console.debug("upload video progress", progress, point);
1502
- if (progress === 1) {
1503
- // this.loadingIns.close();
1504
- videoData.content.url = ossFileUrl(this.ossConfig, point.name);
1505
- // this.chooseVideo({data:url},file);
1506
-
1507
- } else {
1508
- videoData.content.progress = progress;
1509
-
1510
- }
1511
- },
1512
- checkUpload(id,limitNum){
1513
- this.filedId=id
1514
- this.limitNum = limitNum
1515
-
1516
- },
1517
- beforeAvatarUpload(file){
1518
- const isLte2M = file.size / 1024 / 1024 <= 8;
1519
- const isSupportedFormat =file.type.indexOf('image')!==-1
1520
- if (!isSupportedFormat){
1521
- this.$message.error("只能上传图片格式");
1522
- return false
1523
- }
1524
- if (!isLte2M) {
1525
- this.$message.error("上传图片大小不能超过 8MB!");
1526
- return false
1527
- }
1528
- return true
1529
- },
1530
- exceedUpload(){
1531
- this.$message.warning('上传文件数量达到上限')
1532
- },
1533
-
1534
- handlePictureCardPreview(file) {
1535
- this.videoFlag = true;
1536
- this.videoUploadPercent = file.percentage.toFixed(0);
1537
- },
1538
- },
1539
- //时间日期范围的点击事件
1540
- /* dateTimeClick(id){
1541
- for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
1542
- {
1543
- if(this.formList.form.formFieldRelation[i].formField.id===id)
1544
- {
1545
- this.dateTimeId=id
1546
- this.showDateTimePicker = true
1547
- break
1548
- }
1549
- }
1550
- },
1551
- dateTimeClick1(id){
1552
- if(this.dateTimeValue.length === 0)
1553
- {
1554
- this.$message.error('请先选择开始日期时间')
1555
- }
1556
- else
1557
- {
1558
- for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
1559
- {
1560
- if(this.formList.form.formFieldRelation[i].formField.id===id)
1561
- {
1562
- this.dateTimeId=id
1563
- this.showDateTimePicker1 = true
1564
- break
1565
- }
1566
- }
1567
- }
1568
-
1569
- },*/
1570
-
1571
-
1572
-
1573
- }
1574
- </script>
1575
-
1576
- <style lang="less" scoped>
1577
- .notClick {
1578
- pointer-events: none;
1579
- }
1580
- .formClass{
1581
- /* border: 1px solid #ebebeb;*/
1582
- font-family: "Avenir", Helvetica, Arial, sans-serif;
1583
- border-radius: 15px;
1584
- .explanation{
1585
- display: flex;
1586
- padding: 4px;
1587
- .explanation-p{
1588
- color: #366aff;
1589
- font-size: 14px;
1590
- margin: 10px 4px;
1591
- .el-icon-info{
1592
- margin-right: 8px;
1593
- }
1594
- }
1595
- }
1596
- .explain-url{
1597
- a{
1598
- color:#366aff ;
1599
- }
1600
- }
1601
- .titleName{
1602
- font-size: 1em;
1603
- text-align: center;
1604
- padding-bottom: 10px;
1605
- display: flex;
1606
- align-items: center;
1607
- justify-content: center;
1608
- /* border-bottom: 1px solid #EEEEEE;*/
1609
- }
1610
- .title-link{
1611
- height: 1px;
1612
- background-color: #EEEEEE;
1613
- }
1614
- .bottom-link{
1615
- margin-top: 14px;
1616
- height: 1px;
1617
- background-color: #EEEEEE;
1618
- }
1619
- .form-submit-btn{
1620
- padding: 14px 16px 0 16px;
1621
- text-align: center;
1622
- }
1623
- /deep/.ck.ck-editor{
1624
- padding: 0 8px;
1625
- }
1626
- /deep/.ck.ck-toolbar{
1627
- border-color:#E0E6F7;
1628
- border-top-left-radius: 9px!important;
1629
- border-top-right-radius: 9px!important;
1630
- }
1631
- /deep/.ck.ck-editor__editable_inline{
1632
- border-color:#E0E6F7;
1633
- min-height: 150px!important;
1634
- border-bottom-left-radius: 9px!important;
1635
- border-bottom-right-radius: 9px!important;
1636
- }
1637
- }
1638
- .pcFormClass{
1639
- width: 400px;
1640
- margin: 0 auto;
1641
- .field-item{
1642
- padding: 8px 0;
1643
- .field-item-name{
1644
- padding-bottom: 8px;
1645
- color: #A9B3C6;
1646
- /* color: #000000;*/
1647
- }
1648
- }
1649
- /deep/.el-input__inner{
1650
- border-color: #E0E6F7!important;
1651
- background-color: transparent!important;
1652
- border-radius: 9px!important;
1653
- }
1654
- /deep/.el-textarea__inner{
1655
- border-color: #E0E6F7!important;
1656
- background-color: transparent!important;
1657
- border-radius: 9px!important;
1658
- padding: 9px 15px!important;
1659
- }
1660
- /deep/.el-upload--picture-card{
1661
- background-color: #FFFFFF;
1662
- border: 1px solid #E0E6F7;
1663
- border-radius: 10px;
1664
- width: 74px;
1665
- height: 74px;
1666
- vertical-align: top;
1667
- cursor: pointer;
1668
- text-align: center;
1669
- font-size:28px;
1670
- color:#366AFF;
1671
- display: flex;
1672
- align-items: center;
1673
- justify-content: center;
1674
- i{
1675
- color: #366AFF;
1676
- }
1677
- }
1678
- /deep/.el-select-dropdown__item.selected{
1679
- color: #366aff;
1680
- }
1681
- /deep/.el-upload-list--picture-card{
1682
- .el-upload-list__item{
1683
- width: 74px;
1684
- height: 74px;
1685
- border-radius: 10px;
1686
- }
1687
- }
1688
- /deep/.el-upload-list__item-name{
1689
- max-width: 180px;
1690
- }
1691
- .hide .el-upload--picture-card {
1692
- display: none!important;
1693
- }
1694
- }
1695
- /deep/.van-radio__icon--checked .van-icon{
1696
- background-color: #366aff!important;
1697
- border-color: #366aff!important;
1698
- }
1699
- /deep/.van-checkbox__icon--checked .van-icon{
1700
- background-color: #366aff!important;
1701
- border-color: #366aff!important;
1702
- }
1703
- /deep/.vant-upload--picture-card{
1704
- background-color: #ffffff;
1705
- border: 1px solid #E0E6F7;
1706
- border-radius: 10px;
1707
- width: 74px;
1708
- height: 74px;
1709
- vertical-align: top;
1710
- cursor: pointer;
1711
- text-align: center;
1712
- font-size:28px;
1713
- color:#8c939d;
1714
- display: flex;
1715
- align-items: center;
1716
- justify-content: center;
1717
- i{
1718
- color: #366aff;
1719
- }
1720
- }
1721
- /deep/.van-popup{
1722
- border-radius: 5px;
1723
- }
1724
- .remPhoneClassForm{
1725
- .mobileFormClass{
1726
- width: calc(100vw - 110px);
1727
- .form-field-item{
1728
- .form-field-item-value{
1729
- /deep/.van-cell{
1730
- flex-direction: column;
1731
- padding: 8px 16px;
1732
- }
1733
- /deep/.van-cell__value{
1734
- border: 1px solid #E0E6F7;
1735
- border-radius: 9px;
1736
- min-height: 40px;
1737
- padding: 0 10px;
1738
- }
1739
- /deep/.van-cell__right-icon{
1740
- color: #999999!important;
1741
- }
1742
- .form-field-item-file{
1743
- padding: 8px;
1744
- .fileName{
1745
- padding-bottom: 8px;
1746
- color: #A9B3C6;
1747
- /* color: #000000;*/
1748
- }
1749
- }
1750
- .workorder_description{
1751
- /* padding: 8px 16px;*/
1752
- padding: 8px 0;
1753
- /*font-size: 14px;*/
1754
- .field-name{
1755
- width: 100%;
1756
- text-align: left;
1757
- color: #A9B3C6;
1758
- /* color: #000000;*/
1759
- line-height: 1;
1760
- padding-bottom: 8px;
1761
- }
1762
- /*.required-name{
1763
- margin-left: -6px;
1764
- }*/
1765
-
1766
- /* /deep/.ck-content .image img{
1767
- max-width: 200px!important;
1768
- }*/
1769
- }
1770
- }
1771
- .form-field-item-other{
1772
- /deep/.van-cell{
1773
- flex-direction: column;
1774
- }
1775
- /deep/.van-cell__value{
1776
- min-height: 40px;
1777
- }
1778
- }
1779
- .explan-ation{
1780
- .explan-ation-div{
1781
- display: flex;
1782
- /* padding: 4px 16px;*/
1783
- padding: 4px;
1784
- }
1785
- .explan-ation-p{
1786
- color: #366aff;font-size: 14px;margin: 16px 4px;
1787
- }
1788
- }
1789
- }
1790
- .upload-phone-demo{
1791
- /deep/.el-upload--picture-card{
1792
- background-color: #fbfdff;
1793
- border: 1px dashed #c0ccda;
1794
- border-radius: 6px;
1795
- width: 74px;
1796
- height: 74px;
1797
- vertical-align: top;
1798
- cursor: pointer;
1799
- text-align: center;
1800
- font-size:28px;
1801
- color:#8c939d;
1802
- display: flex;
1803
- align-items: center;
1804
- justify-content: center;
1805
- }
1806
- /deep/.el-upload-list--picture-card .el-upload-list__item{
1807
- height: 76px;
1808
- width: 76px;
1809
- }
1810
- }
1811
- /deep/.van-image__img{
1812
- border-radius: 10px;
1813
- }
1814
- }
1815
- .submitClass{
1816
- min-width: 100px;
1817
- background-color: #366aff;
1818
- color: white!important;
1819
- height: 32px;
1820
- i{
1821
- padding-right: 8px;
1822
- font-weight: 600;
1823
- }
1824
- }
1825
- /deep/.van-radio-group--horizontal{
1826
- .van-radio{
1827
- min-width: 100px;
1828
- max-width: 260px;
1829
- flex: none;
1830
- }
1831
- .van-radio--horizontal{
1832
- padding: 0.3rem 0;
1833
- margin-right: 6px;
1834
- }
1835
- }
1836
- /deep/.van-checkbox-group--horizontal{
1837
- .van-checkbox{
1838
- min-width: 100px;
1839
- max-width: 260px;
1840
- flex: none;
1841
- }
1842
- .van-checkbox--horizontal{
1843
- padding: 0.3rem 0;
1844
- margin-right: 6px;
1845
- }
1846
- }
1847
- /deep/.van-button--info{
1848
- border:1px solid #366aff;
1849
- }
1850
- /deep/.van-field__label{
1851
- width: 100%;
1852
- text-align: left;
1853
- color: #A9B3C6!important;
1854
- /* color: #000000!important;*/
1855
- display: flex;
1856
- align-items: center;
1857
- line-height: 1;
1858
- padding-bottom: 8px;
1859
- font-size: 1em;
1860
- }
1861
-
1862
- /deep/.van-field__control{
1863
- min-height: 40px;
1864
- }
1865
- /deep/textarea{
1866
- padding: 7px 0;
1867
- }
1868
- /deep/.van-dropdown-menu__bar{
1869
- box-shadow: none!important;
1870
- }
1871
- /deep/.van-overlay{
1872
- background-color: rgba(0,0,0,.4);
1873
- }
1874
- }
1875
-
1876
- .remCompanyClassForm{
1877
- width: 100%;
1878
- font-size: 1em;
1879
- .submitClass{
1880
- min-width: 100px;
1881
- color: white!important;
1882
- background-color:#366aff;
1883
- border-color: #366aff;
1884
- i{
1885
- padding-right: 8px;
1886
- font-weight: 600;
1887
- }
1888
- }
1889
- /deep/.el-checkbox-group{
1890
- display: flex;
1891
- align-items: center;
1892
- flex-wrap: wrap;
1893
- .el-checkbox{
1894
- padding: 8px 0;
1895
- min-width:150px;
1896
- max-width: 280px;
1897
- flex: none;
1898
- display: flex;
1899
- overflow: hidden;
1900
- margin-right: 0;
1901
- display: flex;
1902
- align-items:center;
1903
- }
1904
- .el-checkbox__label{
1905
- font-size: 1em;
1906
- overflow: hidden;
1907
- text-overflow: ellipsis;
1908
- white-space: nowrap;
1909
- }
1910
- }
1911
-
1912
- /deep/.el-radio-group{
1913
- display: flex;
1914
- align-items: center;
1915
- flex-wrap: wrap;
1916
- .el-radio{
1917
- padding: 8px 0;
1918
- min-width:150px;
1919
- max-width: 280px;
1920
- flex: none;
1921
- display: flex;
1922
- overflow: hidden;
1923
- margin-right: 0;
1924
- }
1925
- .el-radio__label{
1926
- overflow: hidden;
1927
- text-overflow: ellipsis;
1928
- white-space: nowrap;
1929
- font-size: 1em;
1930
- }
1931
- }
1932
-
1933
- /deep/.el-radio__input.is-checked+.el-radio__label{
1934
- color: #366aff!important;
1935
- }
1936
- /deep/.el-radio__input.is-checked .el-radio__inner{
1937
- color: #366aff!important;
1938
- border-color: #366aff!important;
1939
- background: #366aff!important;
1940
- }
1941
- /deep/.el-checkbox__input.is-checked+.el-checkbox__label{
1942
- color: #366aff!important;
1943
- }
1944
- /deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
1945
- background-color: #366aff!important;
1946
- border-color: #366aff!important;
1947
- }
1948
- }
1949
-
1
+ <template>
2
+ <div class="media-body">
3
+ <div class="formClass" :class="isPhone?'remPhoneClassForm':'remCompanyClassForm'" v-if="formShow.form">
4
+ <div class="titleName" >
5
+ {{formShow.form.name}}
6
+ </div>
7
+ <div class="title-link"></div>
8
+ <div class="pcFormClass" v-if="isCompany">
9
+ <div v-for="(item) in formShow.form.formFieldRelation"
10
+ :key="item.formField.id"
11
+ :class="{notClick:disableds === true}"
12
+ >
13
+ <div v-if="item.formField.type!=='CHAT_RECORD'&&item.formField.type!=='CHANNEL'&&item.display&&item.fieldId!=='workorder_name'" class="field-item">
14
+ <div v-if="item.display&&item.fieldId!=='workorder_name'&&item.formField.type!=='EXPLANATION'&&item.formField.type!=='EXPLAIN'" class="field-item-name">
15
+ <span v-if="item.fieldId!=='workorder_description'&&item.fieldId!=='workorder_clientId'">{{item.formField.name}}</span>
16
+ <span v-if="item.fieldId==='workorder_description'">问题描述</span>
17
+ <span v-if="item.fieldId==='workorder_clientId'">报单人</span>
18
+ <span style="color: red;padding-left: 5px" v-if="item.required===true">*</span>
19
+ </div>
20
+ <el-input v-model=item.value
21
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
22
+ :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
23
+ v-if="item.formField.type==='INPUT'&&item.fieldId!=='workorder_name'"
24
+ ></el-input>
25
+ <div v-if="item.formField.type==='EXPLANATION'">
26
+ <div class="explanation">
27
+ <p class="explanation-p">
28
+ <span class="el-icon-info"></span>
29
+ {{item.formField.extInfo.descriptionText}}
30
+ </p>
31
+ </div>
32
+ </div>
33
+ <div v-if="item.formField.type==='EXPLAIN'">
34
+ <div class="explanation">
35
+ <p class="explanation-p">
36
+ <span class="el-icon-info"></span>
37
+ <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
38
+ <span v-else>{{item.value}}</span>
39
+ </p>
40
+ </div>
41
+ </div>
42
+ <el-input type="textarea" :rows="2" v-model=item.value
43
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
44
+ :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
45
+ v-if="item.formField.type==='TEXTAREA'&& item.display&&item.fieldId!=='workorder_description'"
46
+ ></el-input>
47
+ <ckeditor
48
+ :editor="ckeditor.editor"
49
+ v-model="item.value"
50
+ :config="ckeditor.editorConfig"
51
+ v-else-if="item.display&&item.fieldId==='workorder_description'"
52
+ ></ckeditor>
53
+ <el-date-picker
54
+ v-model=item.value
55
+ type="date"
56
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
57
+ style="width: 100%"
58
+ v-if="item.formField.type==='DATE_PICKER'"
59
+ >
60
+ </el-date-picker>
61
+ <el-time-picker
62
+ v-model=item.value
63
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
64
+ style="width: 100%"
65
+ v-if="item.formField.type==='TIME_PICKER' && !item.formField.extInfo.mold"
66
+ >
67
+ </el-time-picker>
68
+ <el-date-picker
69
+ v-model=item.value
70
+ type="date"
71
+ style="width: 100%"
72
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
73
+ v-if="item.formField.type==='TIME_PICKER' &&item.formField.extInfo.mold==='DATA'"
74
+ >
75
+ </el-date-picker>
76
+ <el-date-picker
77
+ v-model=item.value
78
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期时间'"
79
+ clearable
80
+ style="width: 100%"
81
+ type="datetime"
82
+ v-if="item.formField.type==='TIME_PICKER' &&item.formField.extInfo.mold==='DATA_TIME'"
83
+ >
84
+ </el-date-picker>
85
+ <div v-if="item.formField.type==='RADIO' &&item.formField.extInfo.options">
86
+ <el-radio-group v-model=item.value style="text-align:left">
87
+ <el-radio v-for="(items,index) in item.formField.extInfo.options" :label=items.value :key="index">{{items.label}}</el-radio>
88
+ </el-radio-group>
89
+ </div>
90
+ <div v-if="item.formField.type==='RADIO' &&item.formField.extInfo.option">
91
+ <el-radio-group v-model=item.value style="text-align:left">
92
+ <el-radio v-for="(items,index) in item.formField.extInfo.option" :label=items.value :key="index">{{items.label}}</el-radio>
93
+ </el-radio-group>
94
+ </div>
95
+ <div v-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.option">
96
+ <el-checkbox-group v-model=item.value style="text-align:left">
97
+ <el-checkbox
98
+ v-for="(items,index) in item.formField.extInfo.option"
99
+ :label=items.value
100
+ :key="index"
101
+ >{{items.label}}</el-checkbox>
102
+ </el-checkbox-group>
103
+ </div>
104
+ <div v-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.options">
105
+ <el-checkbox-group v-model=item.value style="text-align:left">
106
+ <el-checkbox
107
+ v-for="(items,index) in item.formField.extInfo.options"
108
+ :label=items.value
109
+ :key="index"
110
+ >{{items.label}}</el-checkbox>
111
+ </el-checkbox-group>
112
+ </div>
113
+ <div v-if="item.formField.type==='SELECT' || item.formField.type==='OPTION'" >
114
+ <el-select
115
+ v-model=item.value
116
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
117
+ style="width: 100%"
118
+ filterable
119
+ v-if="item.formField.extInfo && item.formField.extInfo.option"
120
+ >
121
+ <el-option
122
+ v-for="(items,index) in item.formField.extInfo.option"
123
+ :key="index"
124
+ :label="items.label"
125
+ :value="items.value">
126
+ </el-option>
127
+ </el-select>
128
+ <el-select
129
+ v-model=item.value
130
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
131
+ style="width: 100%"
132
+ filterable
133
+ v-else-if="item.formField.extInfo && item.formField.extInfo.options"
134
+ >
135
+ <el-option
136
+ v-for="(items,index) in item.formField.extInfo.options"
137
+ :key="index"
138
+ :label="items.label"
139
+ :value="items.value">
140
+ </el-option>
141
+ </el-select>
142
+ </div>
143
+ <div v-if="item.formField.type==='CASCADER'">
144
+ <el-cascader
145
+ v-model=item.value
146
+ :options=item.formField.extInfo.cascade
147
+ style="width: 100%;"
148
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
149
+ v-if="item.formField.extInfo.cascade"
150
+ ></el-cascader>
151
+ <el-cascader
152
+ v-model=item.value
153
+ :options=item.formField.extInfo.cascadeDown[0].options
154
+ style="width: 100%;"
155
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
156
+ v-else-if="item.formField.extInfo.cascadeDown"
157
+ ></el-cascader>
158
+ </div>
159
+ <div v-if="item.formField.type==='FILE'">
160
+ <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" @mouseover="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" style="flex: 0.75;display:flex;align-items: center;">
161
+ <el-upload
162
+ class="upload-demo"
163
+ ref="upload"
164
+ list-type="picture-card"
165
+ accept="image/*"
166
+ name="file"
167
+ action="/open/media/file/upload"
168
+ :multiple="false"
169
+ :file-list="fileListList[item.fieldId]"
170
+ :limit=item.formField.extInfo.limitNum?Number(item.formField.extInfo.limitNum):1
171
+ :before-upload="beforeAvatarUpload"
172
+ :on-exceed="exceedUpload"
173
+ :on-remove="handleRemove"
174
+ :http-request="aliyunOssRequest"
175
+ :on-change="handleEditChange"
176
+ :on-success="successUpload"
177
+ >
178
+ <i class="el-icon-plus"></i>
179
+ </el-upload>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="mobileFormClass" v-else style="padding: 10px 0;" :class="{notClick:disableds === true}">
186
+ <div v-for="(item,index) in formFieldRelation"
187
+ :key="item.formField.id"
188
+ class="form-field-item"
189
+ >
190
+ <div v-if="item.formField.type==='INPUT'" class="form-field-item-value">
191
+ <van-field v-model=item.value
192
+ :label=item.formField.name
193
+ :required="item.required===true"
194
+ :disabled="disableds"
195
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
196
+ :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
197
+ />
198
+ </div>
199
+ <div v-else-if="item.formField.type==='EXPLANATION'||item.formField.type==='EXPLAIN'" class="explan-ation">
200
+ <div class="explanation">
201
+ <p class="explanation-p" v-if="item.formField.type==='EXPLANATION'">
202
+ <span class="el-icon-info"></span>
203
+ {{item.formField.extInfo.descriptionText}}
204
+ </p>
205
+ <p v-else class="explanation-p">
206
+ <span class="el-icon-info"></span>
207
+ <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
208
+ <span v-else>{{item.value}}</span>
209
+ </p>
210
+ </div>
211
+ </div>
212
+ <div v-else-if="item.formField.type==='TEXTAREA'" class="form-field-item-value">
213
+ <van-field v-model=item.value
214
+ :label=item.formField.name
215
+ :required="item.required===true"
216
+ type="textarea"
217
+ :disabled="disableds"
218
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
219
+ :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
220
+ v-if="item.fieldId!=='workorder_description'"
221
+ />
222
+ <div v-if="item.fieldId==='workorder_description'" class="workorder_description">
223
+ <div class="field-name" :class="item.required?'required-name':''">
224
+ <span v-if="item.required" style="color: red">*</span>
225
+ {{item.formField.name}}
226
+ </div>
227
+ <ckeditor
228
+ :editor="ckeditor.editor"
229
+ v-model="item.value"
230
+ :config="ckeditor.editorConfig"
231
+ ></ckeditor>
232
+ </div>
233
+ </div>
234
+ <div v-else-if="item.formField.type==='DATE_PICKER'" class="form-field-item-value">
235
+ <van-field
236
+ readonly
237
+ clickable
238
+ name="calendar"
239
+ :value=dateValue[item.fieldId]
240
+ :label=item.formField.name
241
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
242
+ :required="item.required===true"
243
+ @click="dateClick(item.fieldId)"
244
+ :disabled="disableds"
245
+ right-icon="van-icon van-icon-arrow van-cell__right-icon"
246
+ />
247
+ <van-calendar
248
+ v-model="showCalendar"
249
+ @confirm="onConfirmCalendar($event,dateId)"
250
+ />
251
+ </div>
252
+ <div v-else-if="item.formField.type==='TIME_PICKER'&&(!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME')" class="form-field-item-value">
253
+ <van-field
254
+ readonly
255
+ clickable
256
+ name="datetimePicker"
257
+ :required="item.required===true"
258
+ :value=timeValue[item.fieldId]
259
+ :label=item.formField.name
260
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
261
+ @click="timeClick(item.fieldId,item)"
262
+ :disabled="disableds"
263
+ right-icon="van-icon van-icon-arrow van-cell__right-icon"
264
+
265
+ />
266
+ <van-popup v-model="showTimePicker" position="bottom">
267
+ <van-datetime-picker
268
+ v-model="currentDate"
269
+ type="datetime"
270
+ @confirm="onConfirm($event,timeId,item)"
271
+ @cancel="showTimePicker = false"
272
+ :min-date="minDate"
273
+ :formatter="formatter"
274
+ :max-date="maxDate"
275
+ />
276
+ </van-popup>
277
+ </div>
278
+ <div v-else-if="item.formField.type==='TIME_PICKER'&&item.formField.extInfo.mold==='DATA'" class="form-field-item-value">
279
+ <van-field
280
+ readonly
281
+ clickable
282
+ name="datetimePicker"
283
+ :required="item.required===true"
284
+ :value=timeValue[item.fieldId]
285
+ :label=item.formField.name
286
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
287
+ @click="timeClick(item.fieldId,item)"
288
+ :disabled="disableds"
289
+ right-icon="van-icon van-icon-arrow van-cell__right-icon"
290
+
291
+ />
292
+ <van-calendar v-model="showTimePickerd" :show-confirm="false" @confirm="onConfirm($event,timeId,item)" @cancel="showTimePickerd = false"/>
293
+ </div>
294
+ <div v-else-if="item.formField.type==='RADIO'" class="form-field-item-other">
295
+ <van-field name="radio" :label="item.formField.name" :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.option">
296
+ <template #input style="display: flex;align-items: center">
297
+ <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
298
+ <van-radio v-for="(items,index) in item.formField.extInfo.option" :name=items.value :key="index">{{items.label}}</van-radio>
299
+ </van-radio-group>
300
+ </template>
301
+ </van-field>
302
+ <van-field name="radio" :label="item.formField.name" :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.options">
303
+ <template #input style="display: flex;align-items: center" >
304
+ <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
305
+ <van-radio v-for="(items,index) in item.formField.extInfo.options" :name=items.value :key="index">{{items.label}}</van-radio>
306
+ </van-radio-group>
307
+ </template>
308
+ </van-field>
309
+ </div>
310
+ <div v-else-if="item.formField.type==='CHECKBOX'" class="form-field-item-other">
311
+ <van-field name="checkbox" :label=item.formField.name :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.option">
312
+ <template #input style="display: flex;align-items: center" >
313
+ <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
314
+ <van-checkbox
315
+ v-for="(items,index) in item.formField.extInfo.option"
316
+ shape="square"
317
+ :key="index"
318
+ :name=items.value>
319
+ {{items.label}}
320
+ </van-checkbox>
321
+ </van-checkbox-group>
322
+ </template>
323
+ </van-field>
324
+ <van-field name="checkbox" :label=item.formField.name :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.options">
325
+ <template #input style="display: flex;align-items: center" >
326
+ <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
327
+ <van-checkbox
328
+ v-for="(items,index) in item.formField.extInfo.options"
329
+ shape="square"
330
+ :key="index"
331
+ :name=items.value>
332
+ {{items.label}}
333
+ </van-checkbox>
334
+ </van-checkbox-group>
335
+ </template>
336
+ </van-field>
337
+ </div>
338
+ <div v-else-if="item.formField.type==='SELECT' || item.formField.type==='OPTION'" class="form-field-item-value">
339
+ <van-field
340
+ readonly
341
+ clickable
342
+ name="picker"
343
+ :value=selectValues[item.fieldId]
344
+ :label=item.formField.name
345
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
346
+ @click="selectClick(item.fieldId)"
347
+ :required="item.required===true"
348
+ :disabled="disableds"
349
+ @click-right-icon.stop="SelectClear(item.fieldId)"
350
+ v-if="item.fieldId!=='workorder_clientId'"
351
+ :right-icon="selectValues[item.fieldId]? 'close' : 'van-icon van-icon-arrow van-cell__right-icon'"
352
+ />
353
+ <van-field
354
+ readonly
355
+ clickable
356
+ name="picker"
357
+ :value=selectValues[item.fieldId]
358
+ label='报单人'
359
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
360
+ @click="selectClick(item.fieldId)"
361
+ :required="item.required===true"
362
+ :disabled="disableds"
363
+ @click-right-icon.stop="SelectClear(item.fieldId)"
364
+ v-if="item.fieldId==='workorder_clientId'"
365
+ :right-icon="selectValues[item.fieldId]? 'close' : 'van-icon van-icon-arrow van-cell__right-icon'"
366
+ />
367
+ <van-popup v-model="showPicker" position="bottom">
368
+ <van-picker
369
+ show-toolbar
370
+ :columns=selectValue
371
+ @confirm="onConfirmSelect($event,selectId)"
372
+ @cancel="showPicker = false"
373
+ :key="selectKey"
374
+
375
+ />
376
+ </van-popup>
377
+ </div>
378
+ <div v-else-if="item.formField.type==='CASCADER'" class="form-field-item-value">
379
+ <van-field
380
+ readonly
381
+ clickable
382
+ name="area"
383
+ :value=cascadeValue[item.fieldId]
384
+ :label=item.formField.name
385
+ :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
386
+ @click="pickerClick(item.fieldId)"
387
+ :required="item.required===true"
388
+ :disabled="disableds"
389
+ right-icon="van-icon van-icon-arrow van-cell__right-icon"
390
+ />
391
+
392
+ <van-popup v-model="showArea" position="bottom">
393
+ <van-picker v-if="pageShow"
394
+ show-toolbar
395
+ :columns="column"
396
+ @cancel="onCancel"
397
+ @confirm="onConfirms($event,pickerId,index)"
398
+ @change="onChange"
399
+ :item-height="45"
400
+ :key="keyValue"
401
+ />
402
+ </van-popup>
403
+ </div>
404
+ <div v-else-if="item.formField.type === 'FILE'" class="form-field-item-value">
405
+ <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" class="form-field-item-file">
406
+ <div class="fileName"><span style="color: red" v-if="item.required">*</span>{{item.formField.name}}</div>
407
+ <van-uploader
408
+ v-model="fileListList[item.fieldId]"
409
+ :before-read="beforeRead"
410
+ :max-count='item.formField.extInfo.limitNum!==undefined?item.formField.extInfo.limitNum:1'
411
+ :after-read="afterRead"
412
+ accept="image/*"
413
+ :multiple=false
414
+ >
415
+ <div class="vant-upload--picture-card">
416
+ <i class="el-icon-plus"></i>
417
+ </div>
418
+
419
+ </van-uploader>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ <van-popup v-model="fileUpload" :close-on-click-overlay="false">
424
+ <div style="background-color: black;height: 100px;width: 100px;display: flex;justify-content: center;align-items: center" >
425
+ <van-loading type="spinner"/>
426
+ </div>
427
+ </van-popup>
428
+ </div>
429
+ <div class="bottom-link"></div>
430
+ <div class="form-submit-btn" v-if="isCompany">
431
+ <el-button style="border-color: #366aff;color: white;background-color: #366aff" round class="submitClass" size="small" @click="submitClick" :disabled="disableds">
432
+ <i class="el-icon-check" v-if="!disableds"></i>
433
+ {{submitValue}}
434
+ </el-button>
435
+ </div>
436
+ <div class="form-submit-btn" v-else>
437
+ <van-button round type="info" class="submitClass" @click="submitClick" :disabled="disableds">
438
+ <i class="el-icon-check" v-if="!disableds"></i>
439
+ {{submitValue}}
440
+ </van-button>
441
+ </div>
442
+ </div>
443
+ <el-dialog :visible.sync="dialogVisible">
444
+ <img width="100%" :src="dialogImageUrl" alt="">
445
+ </el-dialog>
446
+
447
+ </div>
448
+ </template>
449
+
450
+ <script>
451
+ let that
452
+ import {multipartUpload,ossFileUrl} from "./utils/AliyunIssUtil";
453
+ import {MyCustomUploadAdapterPlugin} from "./utils/ckeditor";
454
+ import CKEDITOR from 'ckeditor'
455
+ export default {
456
+ name: "formTemplate",
457
+ data() {
458
+ return {
459
+ isPhone: false,
460
+ isCompany: false,
461
+ checkboxGroup: [],
462
+ currentDate: new Date(),
463
+ timeValue: [],
464
+ dateValue: [],
465
+ showPicker: false,
466
+ showTimePicker: false,
467
+ showTimePickerd:false,
468
+ showCalendar: false,
469
+ radio: [],
470
+ selectValue: [],
471
+ pickerValue: [],
472
+ showArea: false,
473
+ dateTimeValue: [],
474
+ dateTimeValue1: [],
475
+ showDateTimePicker: false,
476
+ showDateTimePicker1: false,
477
+ pickerId: 0,
478
+ dateId: 0,
479
+ timeId: 0,
480
+ selectId: 0,
481
+ dateTimeId: 0,
482
+ column: [
483
+ {
484
+ values: '', // 设置的页面初始值
485
+ className: "column1"
486
+ },
487
+ {
488
+ values: '',
489
+ className: "column2",
490
+ },
491
+ {
492
+ values: '',
493
+ className: "column3",
494
+ }
495
+ ],
496
+ pageShow: false, //省市区三级联动是否显示（因为是接口返回的数据，等三级数据渲染完毕之后，在显示三级联动）
497
+ cityDates: '', //安联当前选中市的所有区所有数据
498
+ data: [],//接口返回所有级联数据
499
+ dateTimeRange: '',
500
+ selectValues: [],
501
+ cascadeValue: [],
502
+ minDate: new Date(2020, 0, 1),
503
+ maxDate: new Date(2025, 11, 31),
504
+ disableds: false,
505
+ submitValue: '提交',
506
+ clickPicker: '',
507
+ columns: [],
508
+ copyForm: [],
509
+ cascaderId:0,
510
+ formShow:[],
511
+
512
+ uploadAvatarParams: {
513
+ token: "8c98087dfd2d48f856d8c95c09115def",
514
+ },
515
+ fileListList:[],
516
+ keyValue:'',
517
+ selectKey:'shuijiao',
518
+ filedId:'',
519
+ disabled:false,
520
+ dialogVisible:false,
521
+ dialogImageUrl:'',
522
+ fileUpload:false,
523
+ videoFlag:false,
524
+ videoUploadPercent:false,
525
+ fileType:['PICTURE','VIDEO','AUDIO'],
526
+ loading:'',
527
+ ossConfig: {
528
+ region: "oss-cn-zhangjiakou",
529
+ //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
530
+ accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
531
+ accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
532
+ // stsToken: '<Your securityToken(STS)>',
533
+ bucket: "guoranopen-zjk",
534
+ },
535
+ hideUploadEdit:false,
536
+ limitNum:1,
537
+ ckeditor: {
538
+ editor: CKEDITOR.ClassicEditor,
539
+ editorConfig: {
540
+ extraPlugins: [MyCustomUploadAdapterPlugin],
541
+ toolbar: [
542
+ 'imageUpload'
543
+ ]
544
+ },
545
+ },
546
+
547
+ }
548
+ },
549
+ props: {
550
+ formList: {
551
+ type: Object,
552
+ default() {
553
+ return {}
554
+ }
555
+ },
556
+ type:String,
557
+ disable:Boolean,
558
+ submit:Boolean,
559
+ usePropStyleType:{
560
+ type:Boolean,
561
+ default() {
562
+ return false;
563
+ }
564
+ },
565
+ propIsPhone: {
566
+ type:Boolean,
567
+ default() {
568
+ return false;
569
+ }
570
+ },
571
+ propIsCompany: {
572
+ type:Boolean,
573
+ default() {
574
+ return false;
575
+ }
576
+ },
577
+ uploadUrl: {
578
+ type:String,
579
+ default(){
580
+ return '/open/media/file/upload'
581
+ }
582
+ }
583
+ },
584
+ computed:{
585
+ acceptType:function () {
586
+ return '.jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF'
587
+ },
588
+ formFieldRelation:function (){
589
+ let arr = [];
590
+ this.formShow.form.formFieldRelation.forEach(item=> {
591
+ if (item.fieldId!=='workorder_name'&&item.display) {
592
+ arr.push(item);
593
+ }
594
+ })
595
+ return arr;
596
+ }
597
+
598
+ },
599
+ mounted() {
600
+ this.isMobile()
601
+ },
602
+ beforeCreate() {
603
+ // 等待dom渲染完毕之后，再去显示 三级联动。
604
+ that=this
605
+ this.$nextTick(function () {
606
+ this.pageShow = true;
607
+ })
608
+ },
609
+ created() {
610
+
611
+ if(this.disable===true)
612
+ {
613
+ this.disableds=true
614
+ this.submitValue = '已提交'
615
+ }
616
+ else
617
+ {
618
+ this.disableds=false
619
+ this.submitValue = '提交'
620
+ }
621
+ },
622
+ beforeMount() {
623
+ that.defaultClick()
624
+ },
625
+ methods: {
626
+ beforeRead(file){
627
+ console.debug('file',file)
628
+ console.debug('fileType',!Array.isArray(file))
629
+ if (!Array.isArray(file)){
630
+ const isLte2M = file.size / 1024 / 1024 <= 8;
631
+ const isSupportedFormat =file.type.indexOf('image')!==-1
632
+ if (!isSupportedFormat){
633
+ this.$message.error("只能上传图片格式");
634
+ return false
635
+ }
636
+ if (!isLte2M&&isSupportedFormat) {
637
+ this.$message.error("上传图片大小不能超过 8MB!");
638
+ return false
639
+ }
640
+ return true
641
+ }
642
+ else{
643
+ let length = 0
644
+ if (this.fileListList[this.filedId]){
645
+ length = this.fileListList[this.filedId].length
646
+ }
647
+ if (file.length<=this.limitNum-length){
648
+ for (let i=0;i<file.length;i++){
649
+ const isLte2M = file[i].size / 1024 / 1024 <= 8;
650
+ const isSupportedFormat =file[i].type.indexOf('image')!==-1
651
+ if (!isSupportedFormat){
652
+ this.$message.error("只能上传图片格式");
653
+ return false
654
+ }
655
+ if (!isLte2M&&isSupportedFormat) {
656
+ this.$message.error("上传图片大小不能超过 8MB!");
657
+ return false
658
+ }
659
+ return true
660
+ }
661
+ }
662
+ else {
663
+ let num = 1
664
+ if (this.limitNum){
665
+ num = this.limitNum
666
+ }
667
+ let messageText = '仅支持上传'+num+'张图片'
668
+ this.$message.error(messageText);
669
+ return false
670
+ }
671
+
672
+ }
673
+
674
+ },
675
+ //文件上传至服务器
676
+ afterRead(file){
677
+ this.fileUpload=true
678
+ console.debug(file)
679
+ console.debug(!Array.isArray(file))
680
+ if (!Array.isArray(file)){
681
+ this.uploadImgFun(file.content,file.file.name,file,file.file);
682
+ }
683
+ else {
684
+ let num = 1
685
+ if (this.limitNum){
686
+ num = this.limitNum
687
+ }
688
+ if (file.length >num){
689
+ this.$message.warning('仅支持上传'+num+'张图片')
690
+ return false
691
+ }
692
+ else {
693
+ for (let i = 0; i < file.length; i++){
694
+ this.uploadImgFun(file[i].content,file[i].file.name,file[i],file[i].file);
695
+ }
696
+ }
697
+ }
698
+ },
699
+ uploadImgFun(content,name,fileCon,file){
700
+ console.log(fileCon)
701
+ let imageData = {
702
+ urls:[]
703
+ }
704
+ let imageInfo = {
705
+ name:"",
706
+ status:'',
707
+ url:''
708
+ }
709
+ let res = multipartUpload(
710
+ this.ossConfig,
711
+ file,
712
+ null,
713
+ imageInfo
714
+ );
715
+ res.then((res) => {
716
+ console.log("upload result:", res);
717
+ // let filePath = res.name;
718
+ imageData.urls.push({
719
+ name:res.name,
720
+ url:ossFileUrl(this.ossConfig, res.name),
721
+ status:'success'
722
+ })
723
+ imageInfo.url = ossFileUrl(this.ossConfig, res.name)
724
+ imageInfo.status='success'
725
+ imageInfo.name=res.name
726
+ for (let j=0;j<this.fileListList[this.filedId].length;j++){
727
+ if (this.fileListList[this.filedId][j].content&&this.fileListList[this.filedId][j].content===content){
728
+ this.fileListList[this.filedId][j].name=res.name
729
+ this.fileListList[this.filedId][j].status='success'
730
+ this.fileListList[this.filedId][j].url=imageInfo.url
731
+ delete this.fileListList[this.filedId][j].content
732
+ }
733
+ }
734
+ this.fileUpload=false
735
+ }).catch((err) => {
736
+ console.debug("upload err", err);
737
+ });
738
+
739
+ },
740
+ dataURLtoFileFun (dataurl, filename) {
741
+ // 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
742
+ let arr = dataurl.split(",");
743
+ let mime = arr[0].match(/:(.*?);/)[1];
744
+ let bstr = atob(arr[1]);
745
+ let n = bstr.length;
746
+ let u8arr = new Uint8Array(n);
747
+ while (n--) {
748
+ u8arr[n] = bstr.charCodeAt(n);
749
+ }
750
+ return new File([u8arr], filename, { type: mime });
751
+ },
752
+ //初始化默认值
753
+ defaultClick() {
754
+ for (let i = 0; i < this.formList.form.formFieldRelation.length; i++)
755
+ {
756
+ if(this.formList.form.formFieldRelation[i].formField.type ==='SELECT'||this.formList.form.formFieldRelation[i].formField.type ==='CHECKBOX' ||this.formList.form.formFieldRelation[i].formField.type==='RADIO' ||this.formList.form.formFieldRelation[i].formField.type==='OPTION')
757
+ {
758
+ if(this.formList.form.formFieldRelation[i].formField.extInfo && !this.formList.form.formFieldRelation[i].formField.extInfo.option)
759
+ {
760
+ if(this.formList.form.formFieldRelation[i].formField.extInfo.exinfo)
761
+ {
762
+ for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.exinfo.length;j++)
763
+ {
764
+ this.$set(this.formList.form.formFieldRelation[i].formField.extInfo.exinfo[j],'label',this.formList.form.formFieldRelation[i].formField.extInfo.exinfo[j].value)
765
+ }
766
+ this.$set(this.formList.form.formFieldRelation[i].formField.extInfo,'option',this.formList.form.formFieldRelation[i].formField.extInfo.exinfo)
767
+ }
768
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.option){
769
+ if (this.formList.form.formFieldRelation[i].formField.type === 'RADIO') {
770
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
771
+ if(!this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value)
772
+ {
773
+ this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value=this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
774
+ }
775
+ }
776
+ if(!this.formList.form.formFieldRelation[i].value)
777
+ {
778
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
779
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
780
+ this.formList.form.formFieldRelation[i].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
781
+ }
782
+ }
783
+ }
784
+ }
785
+ if (this.formList.form.formFieldRelation[i].formField.type === 'CHECKBOX') {
786
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
787
+ if (!this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value) {
788
+ this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
789
+ }
790
+ }
791
+
792
+ if (!this.formList.form.formFieldRelation[i].value||this.formList.form.formFieldRelation[i].value.length === 0)
793
+ {
794
+ this.formList.form.formFieldRelation[i].value=[]
795
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
796
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
797
+ this.formList.form.formFieldRelation[i].value[0] = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
798
+ }
799
+ }
800
+ }
801
+ }
802
+ }
803
+
804
+ }
805
+ else {
806
+ if (this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.options){
807
+ if (this.formList.form.formFieldRelation[i].formField.type === 'RADIO') {
808
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
809
+ if(!this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value)
810
+ {
811
+ this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value=this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
812
+ }
813
+ }
814
+ if(!this.formList.form.formFieldRelation[i].value)
815
+ {
816
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
817
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
818
+ this.formList.form.formFieldRelation[i].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
819
+ }
820
+ }
821
+ }
822
+ }
823
+ if (this.formList.form.formFieldRelation[i].formField.type === 'CHECKBOX') {
824
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
825
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value === '') {
826
+ this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
827
+ }
828
+ }
829
+
830
+ if (this.formList.form.formFieldRelation[i].value === null||this.formList.form.formFieldRelation[i].value.length === 0)
831
+ {
832
+ this.formList.form.formFieldRelation[i].value=[]
833
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
834
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
835
+ this.formList.form.formFieldRelation[i].value[0] = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
836
+ }
837
+ }
838
+ }
839
+ }
840
+ }
841
+ }
842
+
843
+ }
844
+ if (this.formList.form.formFieldRelation[i].formField.type ==='FILE'){
845
+ if (this.formList.form.formFieldRelation[i].value!==undefined){
846
+ if (this.formList.form.formFieldRelation[i].value===null||this.formList.form.formFieldRelation[i].value===''){
847
+ this.formList.form.formFieldRelation[i].value=[]
848
+ }
849
+ else {
850
+ let valueList=[]
851
+ let bool=false
852
+ if(this.formList.form.formFieldRelation[i].value.length > 0) {
853
+ for (let file=0;file<this.formList.form.formFieldRelation[i].value.length;file++) {
854
+ let type = typeof (this.formList.form.formFieldRelation[i].value[file])
855
+ if (type === "string") {
856
+ bool = true
857
+ valueList[file] = {}
858
+ valueList[file].url = this.formList.form.formFieldRelation[i].value[file]
859
+ }
860
+ if (type === 'object'&&JSON.stringify(this.formList.form.formFieldRelation[i].value[file])!=='{}') {
861
+ this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=this.formList.form.formFieldRelation[i].value
862
+ }
863
+ else {
864
+ this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=[]
865
+ }
866
+ }
867
+ if (bool){
868
+ this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=valueList
869
+ }
870
+ }
871
+ }
872
+ }
873
+
874
+
875
+
876
+ }
877
+
878
+ }
879
+ let test = []
880
+ for (let i = 0; i < this.formList.form.formFieldRelation.length; i++) {
881
+ if (this.formList.form.formFieldRelation[i].formField.type === 'CASCADER') {
882
+ test.push(this.formList.form.formFieldRelation[i])
883
+ let cascader=''
884
+ if(this.formList.form.formFieldRelation[i].value)
885
+ {
886
+ if(this.formList.form.formFieldRelation[i].value.length > 0)
887
+ {
888
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].value.length; j++) {
889
+ if (this.formList.form.formFieldRelation[i].value[j]) {
890
+ cascader += this.formList.form.formFieldRelation[i].value[j] + '/'
891
+ }
892
+ }
893
+ cascader = cascader.substr(0, cascader.length - 1)
894
+
895
+ }
896
+ this.cascadeValue[this.formList.form.formFieldRelation[i].fieldId]=cascader
897
+ }
898
+ else
899
+ {
900
+ this.formList.form.formFieldRelation[i].value=[]
901
+ }
902
+ }
903
+ if (this.formList.form.formFieldRelation[i].formField.type === 'DATE_PICKER')
904
+ {
905
+ if(this.formList.form.formFieldRelation[i].value!==null && this.formList.form.formFieldRelation[i].value!=='' )
906
+ {
907
+
908
+ this.dateValue[this.formList.form.formFieldRelation[i].fieldId]=this.formatDate(this.formList.form.formFieldRelation[i].value)
909
+ }
910
+ }
911
+ if (this.formList.form.formFieldRelation[i].formField.type === 'TIME_PICKER')
912
+ {
913
+ if(this.formList.form.formFieldRelation[i].value!==''&& this.formList.form.formFieldRelation[i].value!==null)
914
+ {
915
+ const dateTime = new Date(this.formList.form.formFieldRelation[i].value)
916
+ this.timeValue[this.formList.form.formFieldRelation[i].fieldId]=this.addZero(dateTime.getHours()) + ':' + this.addZero(dateTime.getMinutes())
917
+
918
+ }
919
+ }
920
+ if (this.formList.form.formFieldRelation[i].formField.type === 'SELECT' || this.formList.form.formFieldRelation[i].formField.type === 'OPTION') {
921
+ if (this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option){
922
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
923
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value === '') {
924
+ this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
925
+ }
926
+ }
927
+ if(this.formList.form.formFieldRelation[i].value)
928
+ {
929
+ for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.option.length;j++)
930
+ {
931
+ if (this.formList.form.formFieldRelation[i].value === this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value)
932
+ {
933
+ this.selectValues[this.formList.form.formFieldRelation[i].fieldId] =this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
934
+ }
935
+ }
936
+ /*this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].value*/
937
+
938
+ }
939
+ else
940
+ {
941
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
942
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
943
+ this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
944
+ this.formList.form.formFieldRelation[i].value=this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
945
+ }
946
+ }
947
+ }
948
+ }
949
+ else {
950
+ if(this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option) {
951
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
952
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value === '') {
953
+ this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
954
+ }
955
+ }
956
+ }
957
+ if(this.formList.form.formFieldRelation[i].value && this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option)
958
+ {
959
+ for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.options.length;j++)
960
+ {
961
+ if (this.formList.form.formFieldRelation[i].value === this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value)
962
+ {
963
+ this.selectValues[this.formList.form.formFieldRelation[i].fieldId] =this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
964
+ }
965
+ }
966
+ /*this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].value*/
967
+
968
+ }
969
+ else
970
+ {
971
+ if(this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option) {
972
+ for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
973
+ if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
974
+ this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
975
+ this.formList.form.formFieldRelation[i].value=this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
976
+ }
977
+ }
978
+ }
979
+ }
980
+ }
981
+
982
+ }
983
+ }
984
+ this.formShow=this.formList
985
+ },
986
+ addZero(i) {
987
+ if (i < 10) {
988
+ i = "0" + i;
989
+ }
990
+ return i;
991
+ },
992
+ formatter(type, value) {
993
+ // 格式化选择器日期
994
+ if (type === "year") {
995
+ return `${value}年`;
996
+ } else if (type === "month") {
997
+ return `${value}月`;
998
+ } else if (type === "day") {
999
+ return `${value}日`;
1000
+ } else if (type === "hour") {
1001
+ return `${value}时`;
1002
+ } else if (type === "minute") {
1003
+ return `${value}分`;
1004
+ }
1005
+ return value;
1006
+ },
1007
+
1008
+ isMobile() {
1009
+ if (this.usePropStyleType === false){
1010
+ 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);
1011
+ if (flag) {
1012
+ this.isPhone=true
1013
+ }
1014
+ else {
1015
+ this.isCompany=true
1016
+ }
1017
+ }else {
1018
+ this.isPhone=this.propIsPhone;
1019
+ this.isCompany=this.propIsCompany;
1020
+ }
1021
+ },
1022
+ //时间的选择器
1023
+ onConfirm(value, id,item) {
1024
+ for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1025
+ if (this.formShow.form.formFieldRelation[i].fieldId=== id) {
1026
+ this.formShow.form.formFieldRelation[i].value = value
1027
+ if (!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME'){
1028
+ this.timeValue[id] =this.formatDate(value) +" "+ this.addZero(value.getHours()) + ':' + this.addZero(value.getMinutes())
1029
+ this.showTimePicker = false;
1030
+ }
1031
+ else {
1032
+ this.timeValue[id] =this.formatDate(value)
1033
+ this.showTimePickerd = false;
1034
+ }
1035
+ break
1036
+ }
1037
+ }
1038
+ },
1039
+ //转换日期的函数
1040
+ formatDate(date) {
1041
+ const dateTime = new Date(date)
1042
+ return `${dateTime.getFullYear()}-${dateTime.getMonth() + 1}-${dateTime.getDate()}`;
1043
+ },
1044
+ //日期的选择器
1045
+ onConfirmCalendar(date, id) {
1046
+ for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1047
+ if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1048
+ this.dateValue[id] = this.formatDate(date)
1049
+ this.formShow.form.formFieldRelation[i].value = date
1050
+ this.showCalendar = false;
1051
+ break
1052
+ }
1053
+ }
1054
+ },
1055
+ //下拉的选择器
1056
+ onConfirmSelect(value, id) {
1057
+ for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1058
+ if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1059
+ this.selectValues[this.formShow.form.formFieldRelation[i].fieldId] = value
1060
+ if (this.formShow.form.formFieldRelation[i].formField.extInfo.option){
1061
+ for (let j = 0; j < this.formShow.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
1062
+ if(value ===this.formShow.form.formFieldRelation[i].formField.extInfo.option[j].label)
1063
+ {
1064
+ this.formShow.form.formFieldRelation[i].value = this.formShow.form.formFieldRelation[i].formField.extInfo.option[j].value
1065
+ }
1066
+ }
1067
+ }
1068
+ else {
1069
+ for (let j = 0; j < this.formShow.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
1070
+ if(value ===this.formShow.form.formFieldRelation[i].formField.extInfo.options[j].label)
1071
+ {
1072
+ this.formShow.form.formFieldRelation[i].value = this.formShow.form.formFieldRelation[i].formField.extInfo.options[j].value
1073
+ }
1074
+ }
1075
+ }
1076
+
1077
+ this.showPicker = false;
1078
+ break
1079
+ }
1080
+ }
1081
+ },
1082
+ //时间日期的选择器
1083
+ /* onConfirmDateTime(date,id){
1084
+ for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
1085
+ {
1086
+
1087
+ if(this.formList.form.formFieldRelation[i].formField.id===id)
1088
+ {
1089
+ this.dateTimeValue[id]=this.addZero(date.getFullYear())+'-'+this.addZero(date.getMonth())+'-'+this.addZero(date.getDate())+' '+this.addZero(date.getHours())+':'+this.addZero(date.getMinutes())
1090
+ this.formList.form.formFieldRelation[i].value[0]=date
1091
+ this.showDateTimePicker = false;
1092
+ break
1093
+ }
1094
+ }
1095
+
1096
+ },
1097
+ onConfirmDateTime1(date,id){
1098
+ for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
1099
+ {
1100
+ if(this.formList.form.formFieldRelation[i].formField.id===id)
1101
+ {
1102
+
1103
+ this.dateTimeValue1[id]=this.addZero(date.getFullYear())+'-'+this.addZero(date.getMonth())+'-'+this.addZero(date.getDate())+' '+this.addZero(date.getHours())+':'+this.addZero(date.getMinutes())
1104
+ this.formList.form.formFieldRelation[i].value[1]=date
1105
+ this.showDateTimePicker1 = false;
1106
+ break
1107
+ }
1108
+ }
1109
+ },*/
1110
+ //提交按钮事件
1111
+ submitClick() {
1112
+
1113
+ for (let i=0;i<this.formShow.form.formFieldRelation.length;i++)
1114
+ {
1115
+ if(this.formShow.form.formFieldRelation[i].formField.type==='CASCADER')
1116
+ {
1117
+ let cascader = this.formShow.form.formFieldRelation[i].formField.extInfo.cascade?this.formShow.form.formFieldRelation[i].formField.extInfo.cascade:this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options?this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options:[]
1118
+ cascader.forEach(item=>{
1119
+ if(item.children!==undefined)
1120
+ {
1121
+ if(item.children.length===0)
1122
+ delete item.children
1123
+ else {
1124
+ item.children.forEach(items=>{
1125
+ if(items.children)
1126
+ {
1127
+ if(items.children.length===0)
1128
+ delete items.children
1129
+ }
1130
+ })
1131
+ }
1132
+ }
1133
+ })
1134
+ }
1135
+ if (this.fileListList[this.formShow.form.formFieldRelation[i].fieldId]!==undefined){
1136
+ let value=[]
1137
+
1138
+ this.fileListList[this.formShow.form.formFieldRelation[i].fieldId].forEach(item=>{
1139
+ let file={}
1140
+ file.name=item.name
1141
+ file.url=item.url
1142
+ value.push(file)
1143
+ })
1144
+ this.formShow.form.formFieldRelation[i].value=value
1145
+ }
1146
+
1147
+ if(this.formShow.form.formFieldRelation[i].display===true && this.formShow.form.formFieldRelation[i].required === true&&this.formShow.form.formFieldRelation[i].fieldId!=='workorder_name'&& this.formShow.form.formFieldRelation[i].formField.type !== 'EXPLANATION')
1148
+ {
1149
+
1150
+ if(!this.formShow.form.formFieldRelation[i].value || (this.formShow.form.formFieldRelation[i].value&&this.formShow.form.formFieldRelation[i].value.length===0))
1151
+ {
1152
+ this.$message.error('请完善'+ this.formShow.form.formFieldRelation[i].formField.name)
1153
+ return
1154
+ }
1155
+ }
1156
+ }
1157
+ this.$emit('submitClick',this.formShow)
1158
+ this.disableds = true
1159
+ this.submitValue = '已提交'
1160
+ },
1161
+ //日期的点击事件
1162
+ dateClick(id) {
1163
+ if(this.disableds === false)
1164
+ {
1165
+ for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1166
+ if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1167
+ this.dateId = id
1168
+ this.showCalendar = true
1169
+ break
1170
+ }
1171
+ }
1172
+ }
1173
+
1174
+ },
1175
+ //时间的点击事件
1176
+ timeClick(id,item) {
1177
+ if(this.disableds === false){
1178
+ for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1179
+ if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1180
+ this.timeId = id
1181
+ if (!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME'){
1182
+ this.showTimePicker = true
1183
+ }
1184
+ else {
1185
+ this.showTimePickerd= true
1186
+ }
1187
+
1188
+ break
1189
+ }
1190
+
1191
+ }
1192
+ }
1193
+
1194
+ },
1195
+ //下拉的点击事件
1196
+ selectClick(id) {
1197
+ if(this.disableds === false){
1198
+ let selectOption
1199
+ this.selectValue=[]
1200
+ for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1201
+ if(this.formShow.form.formFieldRelation[i].formField.type==='SELECT' || this.formShow.form.formFieldRelation[i].formField.type==='OPTION')
1202
+ {
1203
+ if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1204
+ selectOption = this.formShow.form.formFieldRelation[i].formField.extInfo.option?this.formShow.form.formFieldRelation[i].formField.extInfo.option:this.formShow.form.formFieldRelation[i].formField.extInfo.options?this.formShow.form.formFieldRelation[i].formField.extInfo.options:[]
1205
+ for (let j = 0; j < selectOption.length; j++) {
1206
+ this.selectValue[j] = selectOption[j].label
1207
+ }
1208
+
1209
+ }
1210
+ }
1211
+ }
1212
+ this.selectId = id
1213
+ this.showPicker = true
1214
+ }
1215
+
1216
+ },
1217
+ SelectClear(fieldId) {
1218
+ if(this.disableds === false){
1219
+ let i = this.formShow.form.formFieldRelation.findIndex(item => { console.log(item.fieldId); return item.fieldId == fieldId })
1220
+ this.selectValues[this.formShow.form.formFieldRelation[i].fieldId] = ''
1221
+ this.$forceUpdate()
1222
+ }
1223
+ },
1224
+ //级联的点击的事件
1225
+ pickerClick(id) {
1226
+ if(this.disableds === false)
1227
+ {
1228
+ if(this.pickerId!==id)
1229
+ {
1230
+ for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1231
+ if (this.formShow.form.formFieldRelation[i].fieldId === id) {
1232
+ this.keyValue=''
1233
+ if(this.formShow.form.formFieldRelation[i].value.length!==undefined)
1234
+ {
1235
+ for (let m=0;m<this.formShow.form.formFieldRelation[i].value.length;m++)
1236
+ {
1237
+ this.keyValue+=this.formShow.form.formFieldRelation[i].value[m]
1238
+ }
1239
+ }
1240
+
1241
+ this.data = this.formShow.form.formFieldRelation[i].formField.extInfo.cascade?this.formShow.form.formFieldRelation[i].formField.extInfo.cascade:this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown?this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options:[]
1242
+ this.column[0].values = Object.values(this.data).map(function (e) {
1243
+ return {text: e.value, code: e.value}
1244
+ })
1245
+ if (this.data[0].children !== undefined) {
1246
+ this.column[1].values = Object.values(this.data[0].children).map(function (e) {
1247
+ return {text: e.value, code: e.value}
1248
+ })
1249
+ if (this.data[0].children[0].children !== undefined) {
1250
+ this.column[2].values = Object.values(this.data[0].children[0].children).map(function (e) {
1251
+ return {text: e.value, code: e.value}
1252
+ })
1253
+ }
1254
+ else {
1255
+ this.$set(this.data[0].children[0], 'children', [])
1256
+ this.column[2].values=Object.values(this.data[0].children[0].children).map(function (res) {
1257
+ return {text: res.value, code: res.value};
1258
+ })
1259
+ }
1260
+ }
1261
+ }
1262
+ }
1263
+ }
1264
+
1265
+ this.pickerId = id
1266
+ this.showArea = true
1267
+ }
1268
+
1269
+
1270
+ },
1271
+
1272
+ onChange(picker, values,index) {
1273
+ // 这里我有可能渲染的有问题，导致回调每次都修改了当前列，其他值没有修改，当前列？？（当前列什么鬼呀，什么垃圾啊？？？） 解释一下 ↓↓
1274
+ // 因为vant的 van-picker 回调只会返回你修改的那一列，比如现在为 [北京，北京，东城区]，你修改了省为[天津市，天津市，和平区]，但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改，不知道我的渲染方法有问题还是什么问题。
1275
+ // 所以我在这里判断change事件触发后，如果你修改了省份的话，回调里面省份会改变，但是市和区还是上一个省份的 市和区，这时我们执行回调修改省，市，区的时候，因为回调只有省改变了，市和区DOM改变了，但是回调里面没改变的问题（不晓得什么问题）,这时我们去找省下面的 市，我们取回调的市名称，如果在省下面没有找到这个市，默认展示第一个市，区也默认展示第一个市下面的区，如果遍历市能查到，就去展示对应的市。
1276
+ // 回调时修改第2列数据
1277
+ if (index == 0){
1278
+ picker.setColumnValues(2, []); // 防止突然选中第一个，第二个是更新的，但第三个联级不更新，我暂时强制清空
1279
+ }
1280
+ let ColumnIndexss=picker.getIndexes()
1281
+ let testValue=''
1282
+ this.$nextTick(()=>{
1283
+ if(index == 0)
1284
+ {
1285
+ if(this.data[ColumnIndexss[0]].children.length > 0)
1286
+ {
1287
+ if(this.data[ColumnIndexss[0]].children[0]!==undefined)
1288
+ {
1289
+ testValue=this.data[ColumnIndexss[0]].children[0].value
1290
+ picker.setColumnValues(2, this.county(this.data, testValue));
1291
+ }
1292
+ }
1293
+ else
1294
+ picker.setColumnValues(2, []);
1295
+ }
1296
+ if(index == 1)
1297
+ {
1298
+ if(this.data[ColumnIndexss[0]].children.length > 0)
1299
+ {
1300
+ if(this.data[ColumnIndexss[0]].children[ColumnIndexss[1]]!==undefined)
1301
+ {
1302
+ testValue=this.data[ColumnIndexss[0]].children[ColumnIndexss[1]].value
1303
+ picker.setColumnValues(2, this.county(this.data, testValue));
1304
+ }
1305
+ }
1306
+ else
1307
+ picker.setColumnValues(2, []);
1308
+ }
1309
+ })
1310
+
1311
+ picker.setColumnValues(1, this.cityDate(this.data, values[0].text));
1312
+ // 回调时修改第3列数据
1313
+
1314
+
1315
+ },
1316
+ // 修改级联第二级 这里不再多说什么了根据自己的数据格式来
1317
+ cityDate(data, province) {
1318
+ var that = this;
1319
+ data.forEach(function (res) {
1320
+ if (res.value == province) {
1321
+ that.cityDates = res;
1322
+ }
1323
+ });
1324
+ if (that.cityDates.children !== undefined&&that.cityDates.children.length > 0) {
1325
+ return that.cityDates.children.map(function (res) {
1326
+ return {text: res.value, code: res.value};
1327
+ })
1328
+ } else {
1329
+ this.$set(that.cityDates, 'children', [])
1330
+ return that.cityDates.children.map(function (res) {
1331
+ return {text: res.value, code: res.value};
1332
+ })
1333
+ }
1334
+ // return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
1335
+ },
1336
+ // 修改级联第三级 这里不再多说什么了根据自己的数据格式来
1337
+ county(data, county) {
1338
+ var that = this;
1339
+ var countyDate = '';
1340
+ // 因为vant的 van-picker 回调只会返回你修改的那一列，比如现在为 [北京，北京，东城区]，你修改了省为[天津市，天津市，和平区]，但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改，不知道我的渲染方法有问题还是什么问题。
1341
+ // 所以我在这里判断change事件触发后，如果你修改了省份的话，回调里面省份会改变，但是市和区还是上一个省份的 市和区，这时我们执行回调修改省，市，区的时候，因为回调只有省改变了，市和区DOM改变了，但是回调里面没改变的问题（不晓得什么问题）,这时我们去找省下面的 市，我们取回调的市名称，如果在省下面没有找到这个市，默认展示第一个市，区也默认展示第一个市下面的区，如果遍历市能查到，就去展示对应的市。
1342
+ that.cityDates.children.forEach(function (res) {
1343
+ if (res.value == county) {
1344
+ countyDate = res;
1345
+ }
1346
+ });
1347
+ // 这里如果没有找到对应的县
1348
+ if (countyDate == '') {
1349
+ if(that.cityDates.children.length > 0)
1350
+ {
1351
+ countyDate = that.cityDates.children[0];
1352
+ }
1353
+
1354
+ }
1355
+ // return 县
1356
+ if (countyDate.children === undefined) {
1357
+ this.$set(countyDate, 'children', [])
1358
+ return countyDate.children.map(function (res) {
1359
+ return {text: res.value, code: res.value};
1360
+ })
1361
+ } else {
1362
+ return countyDate.children.map(function (res) {
1363
+ return {text: res.value, code: res.value};
1364
+ })
1365
+ }
1366
+
1367
+ // return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
1368
+ },
1369
+ //点击级联弹出框的确认按钮
1370
+ onConfirms(val, id) {
1371
+ let test = ''
1372
+ for (let i = 0; i < val.length; i++) {
1373
+ if (val[i] !== undefined) {
1374
+ test += val[i].text + '/'
1375
+ }
1376
+ }
1377
+ test = test.substr(0, test.length - 1)
1378
+ for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
1379
+ if (this.formShow.form.formFieldRelation[i].fieldId=== id) {
1380
+ this.cascadeValue[id] = test
1381
+ for (let j = 0; j < val.length; j++) {
1382
+ if (val[j] !== undefined) {
1383
+ this.formShow.form.formFieldRelation[i].value[j] = val[j].text
1384
+ }
1385
+ }
1386
+ break
1387
+ }
1388
+ }
1389
+ this.showArea = false;
1390
+ sessionStorage.setItem('cascader',test)
1391
+ },
1392
+ onCancel() {
1393
+ this.showArea = false;
1394
+ },
1395
+ aliyunOssRequest(data){
1396
+
1397
+ this.loading = this.$loading({
1398
+ lock: true,
1399
+ text: 'Loading',
1400
+ spinner: 'el-icon-loading',
1401
+ background: 'rgba(0, 0, 0, 0.8)'
1402
+ });
1403
+ let file = data.file;
1404
+ console.debug("upload file:", file);
1405
+ let imgInfo = {
1406
+ status:'',
1407
+ url:'',
1408
+ name:''
1409
+ }
1410
+ /* let imageData = {
1411
+ id:cid,
1412
+ cid:cid,
1413
+ type: "IMAGE",
1414
+ content: {
1415
+ urls: [],
1416
+ progress: 0,
1417
+ },
1418
+ };*/
1419
+ let res = multipartUpload(
1420
+ this.ossConfig,
1421
+ file,
1422
+ null,
1423
+ imgInfo
1424
+ );
1425
+ res.then((res) => {
1426
+ console.debug("upload result:", res);
1427
+ // let filePath = res.name;
1428
+ /* imageData.content.progress = 1;
1429
+ imageData.content.urls.push(
1430
+ ossFileUrl(this.ossConfig, res.name)
1431
+ );
1432
+ console.log('imageData',imageData)*/
1433
+ imgInfo.url = ossFileUrl(this.ossConfig, res.name)
1434
+ imgInfo.status='success'
1435
+ if (data.file){
1436
+ imgInfo.name = data.file.name
1437
+ imgInfo.uid = data.file.uid
1438
+ }
1439
+ if (!this.fileListList[this.filedId])
1440
+ {
1441
+ this.fileListList[this.filedId] = []
1442
+ }
1443
+ this.fileListList[this.filedId].push(imgInfo)
1444
+ this.loading.close()
1445
+ }).catch((err) => {
1446
+ console.debug("upload err", err);
1447
+ });
1448
+ },
1449
+ successUpload(response,file,fileList){
1450
+ if (!this.fileListList[this.filedId]){
1451
+ this.fileListList[this.filedId] = []
1452
+ }
1453
+ for (let i=0;i<fileList.length;i++){
1454
+ if (!this.fileListList[this.filedId][i]){
1455
+ this.fileListList[this.filedId][i]={}
1456
+ }
1457
+ this.fileListList[this.filedId][i].url=fileList[i].url
1458
+ this.fileListList[this.filedId][i].name=fileList[i].name
1459
+ this.fileListList[this.filedId][i].status=fileList[i].status
1460
+ }
1461
+ },
1462
+ uploadProgress(){
1463
+ this.loading = this.$loading({
1464
+ lock: true,
1465
+ text: 'Loading',
1466
+ spinner: 'el-icon-loading',
1467
+ background: 'rgba(0, 0, 0, 0.7)'
1468
+ });
1469
+ },
1470
+ handleRemove(file) {
1471
+ if (this.fileListList[this.filedId]){
1472
+ for (let i=0;i<this.fileListList[this.filedId].length;i++)
1473
+ {
1474
+ if (this.fileListList[this.filedId][i].uid){
1475
+ if (this.fileListList[this.filedId][i].uid===file.uid){
1476
+ this.fileListList[this.filedId].splice(i,1)
1477
+ return
1478
+ }
1479
+ }
1480
+ else if (this.fileListList[this.filedId][i].url===file.url){
1481
+ this.fileListList[this.filedId].splice(i,1)
1482
+ return
1483
+ }
1484
+ }
1485
+
1486
+ }
1487
+ /*let value=[]
1488
+ for (let i=0;i<fileList.length;i++){
1489
+ value[i]={}
1490
+ value[i].name=fileList[i].name
1491
+ if(fileList[i].response){
1492
+ value[i].url=fileList[i].response.data
1493
+ }
1494
+ else {
1495
+ value[i].url=fileList[i].url
1496
+ }
1497
+ }
1498
+ for (let i=0;i<this.formShow.form.formFieldRelation.length;i++){
1499
+ if (this.formShow.form.formFieldRelation[i].fieldId===this.filedId){
1500
+ this.fileListList[this.filedId]=value
1501
+ }
1502
+ }*/
1503
+ /*this.fileListList = [...this.fileListList]*/
1504
+ },
1505
+ handleEditChange(file,fileList){
1506
+ this.hideUploadEdit=fileList.length >= this.limitNum
1507
+ },
1508
+
1509
+ onUploadProgress: function (progress, point, file, videoData) {
1510
+ console.debug("upload video progress", progress, point);
1511
+ if (progress === 1) {
1512
+ // this.loadingIns.close();
1513
+ videoData.content.url = ossFileUrl(this.ossConfig, point.name);
1514
+ // this.chooseVideo({data:url},file);
1515
+
1516
+ } else {
1517
+ videoData.content.progress = progress;
1518
+
1519
+ }
1520
+ },
1521
+ checkUpload(id,limitNum){
1522
+ this.filedId=id
1523
+ this.limitNum = limitNum
1524
+
1525
+ },
1526
+ beforeAvatarUpload(file){
1527
+ const isLte2M = file.size / 1024 / 1024 <= 8;
1528
+ const isSupportedFormat =file.type.indexOf('image')!==-1
1529
+ if (!isSupportedFormat){
1530
+ this.$message.error("只能上传图片格式");
1531
+ return false
1532
+ }
1533
+ if (!isLte2M) {
1534
+ this.$message.error("上传图片大小不能超过 8MB!");
1535
+ return false
1536
+ }
1537
+ return true
1538
+ },
1539
+ exceedUpload(){
1540
+ this.$message.warning('上传文件数量达到上限')
1541
+ },
1542
+
1543
+ handlePictureCardPreview(file) {
1544
+ this.videoFlag = true;
1545
+ this.videoUploadPercent = file.percentage.toFixed(0);
1546
+ },
1547
+ },
1548
+ //时间日期范围的点击事件
1549
+ /* dateTimeClick(id){
1550
+ for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
1551
+ {
1552
+ if(this.formList.form.formFieldRelation[i].formField.id===id)
1553
+ {
1554
+ this.dateTimeId=id
1555
+ this.showDateTimePicker = true
1556
+ break
1557
+ }
1558
+ }
1559
+ },
1560
+ dateTimeClick1(id){
1561
+ if(this.dateTimeValue.length === 0)
1562
+ {
1563
+ this.$message.error('请先选择开始日期时间')
1564
+ }
1565
+ else
1566
+ {
1567
+ for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
1568
+ {
1569
+ if(this.formList.form.formFieldRelation[i].formField.id===id)
1570
+ {
1571
+ this.dateTimeId=id
1572
+ this.showDateTimePicker1 = true
1573
+ break
1574
+ }
1575
+ }
1576
+ }
1577
+
1578
+ },*/
1579
+
1580
+
1581
+
1582
+ }
1583
+ </script>
1584
+
1585
+ <style lang="less" scoped>
1586
+ .notClick {
1587
+ pointer-events: none;
1588
+ }
1589
+ .formClass{
1590
+ /* border: 1px solid #ebebeb;*/
1591
+ font-family: "Avenir", Helvetica, Arial, sans-serif;
1592
+ border-radius: 15px;
1593
+ .explanation{
1594
+ display: flex;
1595
+ padding: 4px;
1596
+ .explanation-p{
1597
+ color: #366aff;
1598
+ font-size: 14px;
1599
+ margin: 10px 4px;
1600
+ .el-icon-info{
1601
+ margin-right: 8px;
1602
+ }
1603
+ }
1604
+ }
1605
+ .explain-url{
1606
+ a{
1607
+ color:#366aff ;
1608
+ }
1609
+ }
1610
+ .titleName{
1611
+ font-size: 1em;
1612
+ text-align: center;
1613
+ padding-bottom: 10px;
1614
+ display: flex;
1615
+ align-items: center;
1616
+ justify-content: center;
1617
+ /* border-bottom: 1px solid #EEEEEE;*/
1618
+ }
1619
+ .title-link{
1620
+ height: 1px;
1621
+ background-color: #EEEEEE;
1622
+ }
1623
+ .bottom-link{
1624
+ margin-top: 14px;
1625
+ height: 1px;
1626
+ background-color: #EEEEEE;
1627
+ }
1628
+ .form-submit-btn{
1629
+ padding: 14px 16px 0 16px;
1630
+ text-align: center;
1631
+ }
1632
+ /deep/.ck.ck-editor{
1633
+ padding: 0 8px;
1634
+ }
1635
+ /deep/.ck.ck-toolbar{
1636
+ border-color:#E0E6F7;
1637
+ border-top-left-radius: 9px!important;
1638
+ border-top-right-radius: 9px!important;
1639
+ }
1640
+ /deep/.ck.ck-editor__editable_inline{
1641
+ border-color:#E0E6F7;
1642
+ min-height: 150px!important;
1643
+ border-bottom-left-radius: 9px!important;
1644
+ border-bottom-right-radius: 9px!important;
1645
+ }
1646
+ }
1647
+ .pcFormClass{
1648
+ width: 400px;
1649
+ margin: 0 auto;
1650
+ .field-item{
1651
+ padding: 8px 0;
1652
+ .field-item-name{
1653
+ padding-bottom: 8px;
1654
+ color: #A9B3C6;
1655
+ /* color: #000000;*/
1656
+ }
1657
+ }
1658
+ /deep/.el-input__inner{
1659
+ border-color: #E0E6F7!important;
1660
+ background-color: transparent!important;
1661
+ border-radius: 9px!important;
1662
+ }
1663
+ /deep/.el-textarea__inner{
1664
+ border-color: #E0E6F7!important;
1665
+ background-color: transparent!important;
1666
+ border-radius: 9px!important;
1667
+ padding: 9px 15px!important;
1668
+ }
1669
+ /deep/.el-upload--picture-card{
1670
+ background-color: #FFFFFF;
1671
+ border: 1px solid #E0E6F7;
1672
+ border-radius: 10px;
1673
+ width: 74px;
1674
+ height: 74px;
1675
+ vertical-align: top;
1676
+ cursor: pointer;
1677
+ text-align: center;
1678
+ font-size:28px;
1679
+ color:#366AFF;
1680
+ display: flex;
1681
+ align-items: center;
1682
+ justify-content: center;
1683
+ i{
1684
+ color: #366AFF;
1685
+ }
1686
+ }
1687
+ /deep/.el-select-dropdown__item.selected{
1688
+ color: #366aff;
1689
+ }
1690
+ /deep/.el-upload-list--picture-card{
1691
+ .el-upload-list__item{
1692
+ width: 74px;
1693
+ height: 74px;
1694
+ border-radius: 10px;
1695
+ }
1696
+ }
1697
+ /deep/.el-upload-list__item-name{
1698
+ max-width: 180px;
1699
+ }
1700
+ .hide .el-upload--picture-card {
1701
+ display: none!important;
1702
+ }
1703
+ }
1704
+ /deep/.van-radio__icon--checked .van-icon{
1705
+ background-color: #366aff!important;
1706
+ border-color: #366aff!important;
1707
+ }
1708
+ /deep/.van-checkbox__icon--checked .van-icon{
1709
+ background-color: #366aff!important;
1710
+ border-color: #366aff!important;
1711
+ }
1712
+ /deep/.vant-upload--picture-card{
1713
+ background-color: #ffffff;
1714
+ border: 1px solid #E0E6F7;
1715
+ border-radius: 10px;
1716
+ width: 74px;
1717
+ height: 74px;
1718
+ vertical-align: top;
1719
+ cursor: pointer;
1720
+ text-align: center;
1721
+ font-size:28px;
1722
+ color:#8c939d;
1723
+ display: flex;
1724
+ align-items: center;
1725
+ justify-content: center;
1726
+ i{
1727
+ color: #366aff;
1728
+ }
1729
+ }
1730
+ /deep/.van-popup{
1731
+ border-radius: 5px;
1732
+ }
1733
+ .remPhoneClassForm{
1734
+ .mobileFormClass{
1735
+ width: calc(100vw - 110px);
1736
+ .form-field-item{
1737
+ .form-field-item-value{
1738
+ /deep/.van-cell{
1739
+ flex-direction: column;
1740
+ padding: 8px 16px;
1741
+ }
1742
+ /deep/.van-cell__value{
1743
+ border: 1px solid #E0E6F7;
1744
+ border-radius: 9px;
1745
+ min-height: 40px;
1746
+ padding: 0 10px;
1747
+ }
1748
+ /deep/.van-cell__right-icon{
1749
+ color: #999999!important;
1750
+ }
1751
+ .form-field-item-file{
1752
+ padding: 8px;
1753
+ .fileName{
1754
+ padding-bottom: 8px;
1755
+ color: #A9B3C6;
1756
+ /* color: #000000;*/
1757
+ }
1758
+ }
1759
+ .workorder_description{
1760
+ /* padding: 8px 16px;*/
1761
+ padding: 8px 0;
1762
+ /*font-size: 14px;*/
1763
+ .field-name{
1764
+ width: 100%;
1765
+ text-align: left;
1766
+ color: #A9B3C6;
1767
+ /* color: #000000;*/
1768
+ line-height: 1;
1769
+ padding-bottom: 8px;
1770
+ }
1771
+ /*.required-name{
1772
+ margin-left: -6px;
1773
+ }*/
1774
+
1775
+ /* /deep/.ck-content .image img{
1776
+ max-width: 200px!important;
1777
+ }*/
1778
+ }
1779
+ }
1780
+ .form-field-item-other{
1781
+ /deep/.van-cell{
1782
+ flex-direction: column;
1783
+ }
1784
+ /deep/.van-cell__value{
1785
+ min-height: 40px;
1786
+ }
1787
+ }
1788
+ .explan-ation{
1789
+ .explan-ation-div{
1790
+ display: flex;
1791
+ /* padding: 4px 16px;*/
1792
+ padding: 4px;
1793
+ }
1794
+ .explan-ation-p{
1795
+ color: #366aff;font-size: 14px;margin: 16px 4px;
1796
+ }
1797
+ }
1798
+ }
1799
+ .upload-phone-demo{
1800
+ /deep/.el-upload--picture-card{
1801
+ background-color: #fbfdff;
1802
+ border: 1px dashed #c0ccda;
1803
+ border-radius: 6px;
1804
+ width: 74px;
1805
+ height: 74px;
1806
+ vertical-align: top;
1807
+ cursor: pointer;
1808
+ text-align: center;
1809
+ font-size:28px;
1810
+ color:#8c939d;
1811
+ display: flex;
1812
+ align-items: center;
1813
+ justify-content: center;
1814
+ }
1815
+ /deep/.el-upload-list--picture-card .el-upload-list__item{
1816
+ height: 76px;
1817
+ width: 76px;
1818
+ }
1819
+ }
1820
+ /deep/.van-image__img{
1821
+ border-radius: 10px;
1822
+ }
1823
+ }
1824
+ .submitClass{
1825
+ min-width: 100px;
1826
+ background-color: #366aff;
1827
+ color: white!important;
1828
+ height: 32px;
1829
+ i{
1830
+ padding-right: 8px;
1831
+ font-weight: 600;
1832
+ }
1833
+ }
1834
+ /deep/.van-radio-group--horizontal{
1835
+ .van-radio{
1836
+ min-width: 100px;
1837
+ max-width: 260px;
1838
+ flex: none;
1839
+ }
1840
+ .van-radio--horizontal{
1841
+ padding: 0.3rem 0;
1842
+ margin-right: 6px;
1843
+ }
1844
+ }
1845
+ /deep/.van-checkbox-group--horizontal{
1846
+ .van-checkbox{
1847
+ min-width: 100px;
1848
+ max-width: 260px;
1849
+ flex: none;
1850
+ }
1851
+ .van-checkbox--horizontal{
1852
+ padding: 0.3rem 0;
1853
+ margin-right: 6px;
1854
+ }
1855
+ }
1856
+ /deep/.van-button--info{
1857
+ border:1px solid #366aff;
1858
+ }
1859
+ /deep/.van-field__label{
1860
+ width: 100%;
1861
+ text-align: left;
1862
+ color: #A9B3C6!important;
1863
+ /* color: #000000!important;*/
1864
+ display: flex;
1865
+ align-items: center;
1866
+ line-height: 1;
1867
+ padding-bottom: 8px;
1868
+ font-size: 1em;
1869
+ }
1870
+
1871
+ /deep/.van-field__control{
1872
+ min-height: 40px;
1873
+ }
1874
+ /deep/textarea{
1875
+ padding: 7px 0;
1876
+ }
1877
+ /deep/.van-dropdown-menu__bar{
1878
+ box-shadow: none!important;
1879
+ }
1880
+ /deep/.van-overlay{
1881
+ background-color: rgba(0,0,0,.4);
1882
+ }
1883
+ }
1884
+
1885
+ .remCompanyClassForm{
1886
+ width: 100%;
1887
+ font-size: 1em;
1888
+ .submitClass{
1889
+ min-width: 100px;
1890
+ color: white!important;
1891
+ background-color:#366aff;
1892
+ border-color: #366aff;
1893
+ i{
1894
+ padding-right: 8px;
1895
+ font-weight: 600;
1896
+ }
1897
+ }
1898
+ /deep/.el-checkbox-group{
1899
+ display: flex;
1900
+ align-items: center;
1901
+ flex-wrap: wrap;
1902
+ .el-checkbox{
1903
+ padding: 8px 0;
1904
+ min-width:150px;
1905
+ max-width: 280px;
1906
+ flex: none;
1907
+ display: flex;
1908
+ overflow: hidden;
1909
+ margin-right: 0;
1910
+ display: flex;
1911
+ align-items:center;
1912
+ }
1913
+ .el-checkbox__label{
1914
+ font-size: 1em;
1915
+ overflow: hidden;
1916
+ text-overflow: ellipsis;
1917
+ white-space: nowrap;
1918
+ }
1919
+ }
1920
+
1921
+ /deep/.el-radio-group{
1922
+ display: flex;
1923
+ align-items: center;
1924
+ flex-wrap: wrap;
1925
+ .el-radio{
1926
+ padding: 8px 0;
1927
+ min-width:150px;
1928
+ max-width: 280px;
1929
+ flex: none;
1930
+ display: flex;
1931
+ overflow: hidden;
1932
+ margin-right: 0;
1933
+ }
1934
+ .el-radio__label{
1935
+ overflow: hidden;
1936
+ text-overflow: ellipsis;
1937
+ white-space: nowrap;
1938
+ font-size: 1em;
1939
+ }
1940
+ }
1941
+
1942
+ /deep/.el-radio__input.is-checked+.el-radio__label{
1943
+ color: #366aff!important;
1944
+ }
1945
+ /deep/.el-radio__input.is-checked .el-radio__inner{
1946
+ color: #366aff!important;
1947
+ border-color: #366aff!important;
1948
+ background: #366aff!important;
1949
+ }
1950
+ /deep/.el-checkbox__input.is-checked+.el-checkbox__label{
1951
+ color: #366aff!important;
1952
+ }
1953
+ /deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
1954
+ background-color: #366aff!important;
1955
+ border-color: #366aff!important;
1956
+ }
1957
+ }
1958
+
1950
1959
  </style>