askbot-dragon 0.7.87 → 0.7.91

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