askbot-dragon 0.6.16 → 0.6.20

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