apply-clients 3.3.81 → 3.3.83

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.
@@ -1,683 +1,742 @@
1
- <template>
2
- <div class="form-horizontal select-overspread">
3
- <validator name='v' @valid="$emit('valid')" @invalid="$emit('invalid')">
4
- <form>
5
- <div v-for="(index,item) in data.fields">
6
- <!--input-->
7
- <div :style="item.style ? item.style : ''"
8
- v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'app' || !item.device) && (item.label != '证件号码')&&(item.label != '身份证') && (item.label != '用户电话')"
9
- :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
10
- <label class="control-label-justify">{{item.label}}</label>
11
- <div :style="item.value_style ? item.value_style:''"
12
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
13
- <input class="" style="width: 100%"
14
- :type="item.type"
15
- v-model="data.fields[index].value"
16
- :placeholder="item.placeholder"
17
- :value="data.fields[index].value"
18
- :readonly="item.readonly"
19
- :disabled="item.disabled"
20
- @change="onchange(index)"
21
- @blur="onblur(index)"
22
- @input="oninput(index)"
23
- />
24
- </div>
25
- </div>
26
-
27
- <div :style="item.style ? item.style : ''"
28
- v-if="(data.fields[index-1].value ==='营业执照'||data.fields[index-1].value ==='军官证')&& (item.label === '证件号码')"
29
- :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
30
- <label class="control-label-justify">{{item.label}}</label>
31
- <div :style="item.value_style ? item.value_style:''"
32
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
33
- <input class="" style="width: 100%"
34
- :type="item.type"
35
- v-model="data.fields[index].value"
36
- :placeholder="item.placeholder"
37
- :value="data.fields[index].value"
38
- :readonly="item.readonly"
39
- :disabled="item.disabled"
40
- @change="onchange(index)"
41
- @blur="onblur(index)"
42
- @input="oninput(index)"
43
- />
44
- </div>
45
- </div>
46
-
47
-
48
- <!--input身份证验证-->
49
- <div :style="item.style ? item.style : ''"
50
- v-if="(item.label==='身份证') || (item.label === '证件号码' && data.fields[index-1].value ==='身份证')"
51
- :class="[$v.f_idnumber2.identityCardValid ? 'apply-has-error' : '',item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
52
- <label class="control-label-justify">{{item.label}}</label>
53
- <div :style="item.value_style ? item.value_style:''"
54
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
55
- <input class="" style="width: 100%"
56
- :type="item.type"
57
- maxlength="18"
58
- v-model="data.fields[index].value"
59
- :placeholder="item.placeholder"
60
- :value="data.fields[index].value"
61
- onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
62
- :readonly="item.readonly"
63
- v-validate:f_idnumber2='{identityCardValid: true}'
64
- @change="onchange(index)"
65
- @blur="onblur(index)"
66
- @input="oninput(index)"
67
- />
68
- </div>
69
- </div>
70
-
71
-
72
- <!--input手机号验证-->
73
- <div :style="item.style ? item.style : ''"
74
- v-if="item.label === '用户电话'"
75
- :class="[$v.f_user_phone.minlength || $v.f_user_phone.maxlength ? 'apply-has-error' : '',item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
76
- <label class="control-label-justify">{{item.label}}</label>
77
- <div :style="item.value_style ? item.value_style:''"
78
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
79
- <input class="" style="width: 100%"
80
- maxlength="18"
81
- type="number"
82
- onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
83
- oninput="if(value.length > 11) value=value.slice(0,11)"
84
- v-validate:f_user_phone="{minlength: 7, maxlength: 11 }"
85
- v-model="data.fields[index].value"
86
- :placeholder="item.placeholder"
87
- :value="data.fields[index].value"
88
- :readonly="item.readonly"
89
- @change="onchange(index)"
90
- @blur="onblur(index)"
91
- @input="oninput(index)"
92
- />
93
- </div>
94
- </div>
95
-
96
- <!--select-->
97
- <div :style="item.style ? item.style : ''"
98
- v-if="item.type==='select' && !item.hidden && (item.device === 'app' || !item.device)"
99
- :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
100
- <label class="control-label-justify">{{item.label}}</label>
101
- <div :style="item.value_style ? item.value_style:''"
102
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
103
- <v-select
104
- class="select" width="100%" align="right"
105
- :placeholder="item.placeholder"
106
- :search="item.search"
107
- close-on-select value-single
108
- @select-search="selectSearch($arguments,index)"
109
- :options="data.fields[index].options"
110
- v-model="data.fields[index].value"
111
- :value.sync="data.fields[index].value"
112
- @blur="onblur(index)"
113
- @change="onchange(index)"
114
- :readonly="item.readonly"
115
- :disabled="item.disabled"
116
- ></v-select>
117
- </div>
118
- </div>
119
-
120
- <!--时间datepicker-->
121
- <div :style="item.style ? item.style : ''"
122
- v-if="item.type==='datepicker' && !item.hidden && (item.device === 'app' || !item.device)"
123
- :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
124
- <label class="control-label-justify">{{item.label}}</label>
125
- <div class="form-group" :style="item.value_style ? item.value_style:''"
126
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
127
- <datepicker
128
- @change="onchange(index)"
129
- @blur="onblur(index)"
130
- :placeholder="item.placeholder"
131
- :value.sync="data.fields[index].value"
132
- :format="item.format ? item.format : 'yyyy-MM-dd'"
133
- v-model="data.fields[index].value"
134
- :readonly="item.readonly"
135
- :disabled="item.disabled"
136
- :show-reset-button="true">
137
- </datepicker>
138
- </div>
139
- </div>
140
-
141
- <!--textarea-->
142
- <div :style="item.style ? item.style : ''"
143
- v-if="item.type==='textarea' && !item.hidden && (item.device === 'app' || !item.device)"
144
- :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
145
- <label class="control-label-justify">{{item.label}}</label>
146
- <div :style="item.value_style ? item.value_style:''"
147
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
148
- <textarea
149
- :readonly="item.readonly"
150
- :disabled="item.disabled"
151
- class="" rows="1"
152
- style="width: 100%;height: 100%"
153
- v-model="data.fields[index].value"
154
- :value="data.fields[index].value"
155
- @change="onchange(index)"
156
- @blur="onblur(index)"
157
- @input="oninput(index)"
158
- ></textarea>
159
- </div>
160
- </div>
161
-
162
- <!--checkbox-->
163
- <div :style="item.style ? item.style : ''"
164
- v-if="item.type==='checkbox' && !item.hidden && (item.device === 'app' || !item.device)"
165
- :class="[item.required && item.value.length === 0 ? 'apply-has-error' : '',item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
166
- <label class="control-label-justify">{{item.label}}</label>
167
- <div :style="item.value_style ? item.value_style:''"
168
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
169
- <label class="" v-for="(index2,row) in item.options">
170
- <input type="checkbox" class=""
171
- :readonly="data.fields[index].readonly"
172
- :disabled="data.fields[index].disabled"
173
- v-model="data.fields[index].value"
174
- :value="data.fields[index].options[index2].value"
175
- @change="onchange(index)"
176
- @blur="onblur(index)">
177
- {{row.label}}
178
- </label>
179
- </div>
180
- </div>
181
- </div>
182
-
183
- <div class="col-sm-12 col-xs-12" id="test11">
184
- <accordion one-at-a-time="true">
185
- <panel v-for="(i,item) in data.onetomany" :header="item.title" :is-open="false" type="primary">
186
- <app-onetomany :onetomany="item" :index="i"></app-onetomany>
187
- </panel>
188
- <panel v-for="(i,item) in data.components" :header="item.title" :is-open="false" type="primary" v-if="item.device === 'app' || !item.device">
189
- <component :is="item.name" :selectdata="data" :mark="item.mark"></component>
190
- </panel>
191
- </accordion>
192
- </div>
193
-
194
- <!--自定义组件-->
195
- <slot></slot>
196
-
197
- <!-- 按钮组 -->
198
- <div class="text-center">
199
- <button v-for="(index,button) in data.buttons"
200
- :disabled="button.disabled && disable_button"
201
- style="min-width:100px"
202
- :class="button.disabled && disable_button ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
203
- v-if="!button.hidden && button.button_name !=='提交'&& button.button_name !=='确认'"
204
- @click.prevent="click_but(button)"
205
- >
206
- {{button.button_name}}
207
- </button>
208
- <button v-for="(index,button) in data.buttons"
209
- :disabled="(button.disabled && disable_button) || (!$v.valid)"
210
- style="min-width:100px"
211
- :class="button.disabled && disable_button || (!$v.valid) ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
212
- v-if="!button.hidden && (button.button_name ==='提交'||button.button_name ==='确认')"
213
- @click.prevent="click_but(button)"
214
- >
215
- {{button.button_name}}
216
- </button>
217
- </div>
218
-
219
- <!-- 按钮模态框 -->
220
- <modal v-if="showButModal" :show.sync="showButModal" backdrop="false" large>
221
- <header slot="modal-header" class="modal-header">
222
- <button type="button" class="close" @click="closeModal()"><span>&times;</span></button>
223
- <span class="modal-title"><font
224
- size="3">{{data.button.button_name}}</font></span>
225
- </header>
226
- <article slot="modal-body" class="modal-body clearfix">
227
- <div class="form-group" >
228
- <div v-for="(index,item) in data.button.button_fields">
229
- <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group' : 'form-group']"
230
- v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'pc' || !item.device)">
231
- <label :style="item.label_style ? item.label_style : ''"
232
- :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label'">{{item.label}}</label>
233
- <div :style="item.value_style ? item.value_style : ''"
234
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
235
- <input class="form-control input_view"
236
- :placeholder="item.placeholder"
237
- :type="item.type"
238
- v-model="item.value"
239
- :value="item.value"
240
- :readonly="item.readonly"
241
- :disabled="item.disabled"
242
- @change="onbutchange(index)"
243
- @blur="onbutblur(index)"
244
- @input="onbutinput(index)"
245
- />
246
- </div>
247
- </div>
248
-
249
- <!--时间datepicker-->
250
- <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
251
- v-if="item.type==='datepicker' && !item.hidden && (item.device === 'pc' || !item.device)">
252
- <label :style="item.label_style ? item.label_style : ''"
253
- :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label'">{{item.label}}</label>
254
- <div :style="item.value_style ? item.value_style : ''"
255
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
256
- <datepicker
257
- :placeholder="item.placeholder"
258
- :value.sync="item.value"
259
- v-model="item.value"
260
- :readonly="item.readonly"
261
- :disabled="item.disabled"
262
- :format="item.format ? item.format : 'yyyy-MM-dd'"
263
- :show-reset-button="true"
264
- @change="onbutchange(index)"
265
- @blur="onbutblur(index)"
266
- ></datepicker>
267
- </div>
268
- </div>
269
-
270
- <!--select-->
271
- <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
272
- v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device)">
273
- <label :style="item.label_style ? item.label_style : ''"
274
- :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label'">{{item.label}}</label>
275
- <div :style="item.value_style ? item.value_style : ''"
276
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
277
- <input-select
278
- class="select select_list"
279
- :value.sync="item.value"
280
- v-model="item.value"
281
- :options='item.options'
282
- :readonly="item.readonly"
283
- :disable="item.disabled"
284
- :valueSingle="true"
285
- @blur="onbutblur(index)"
286
- @change="onbutchange(index)"
287
- ></input-select>
288
- </div>
289
- </div>
290
-
291
- <!--textarea-->
292
- <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
293
- v-if="item.type==='textarea' && !item.hidden && (item.device === 'pc' || !item.device)">
294
- <label :style="item.label_style ? item.label_style : ''"
295
- :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label'">{{item.label}}</label>
296
- <div :style="item.value_style ? item.value_style : ''"
297
- :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
298
- <textarea
299
- class="form-control input_view"
300
- style="width: 100%;height: 100%"
301
- v-model="item.value"
302
- :value="item.value"
303
- :rows="item.rows"
304
- :readonly="item.readonly"
305
- :disabled="item.disabled"
306
- @change="onbutchange(index)"
307
- @blur="onbutblur(index)"
308
- @input="onbutinput(index)"
309
- ></textarea>
310
- </div>
311
- </div>
312
- </div>
313
- </div>
314
- </article>
315
- <footer slot="modal-footer" class="modal-footer">
316
- <button :class="disable_modal_button ? 'btn btn-default':'btn btn-primary'"
317
- :disabled="disable_modal_button" type="button" @click="confirmModal()">
318
- 确认
319
- </button>
320
- </footer>
321
- </modal>
322
- </form>
323
- </div>
324
- </template>
325
- <script>
326
- import Vue from 'vue'
327
- import {isEmpty} from "../Util";
328
- // Date格式化
329
- Date.prototype.Format = function (fmt) {
330
- var o = {
331
- 'M+': this.getMonth() + 1, // 月份
332
- 'd+': this.getDate(), // 日
333
- 'H+': this.getHours(), // 小时
334
- 'm+': this.getMinutes(), // 分
335
- 's+': this.getSeconds(), // 秒
336
- 'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
337
- 'S': this.getMilliseconds() // 毫秒
338
- }
339
- if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
340
- for (var k in o) {
341
- if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
342
- }
343
- return fmt
344
- }
345
-
346
- export default {
347
- title: '报建业务通用组件',
348
- props: {
349
- data: {
350
- type: Object
351
- },
352
- showprint: {
353
- type: Boolean,
354
- default: true
355
- }
356
- },
357
- data () {
358
- return {
359
- model: {}, // 公司等属性
360
- disable_button: true, // 控制按钮禁用
361
- disable_modal_button: true, // 控制按钮禁用
362
- showButModal: false
363
- }
364
- },
365
- watch: {
366
- deep: true
367
- },
368
- computed: {
369
-
370
- },
371
- created () {
372
- // 初始化数据
373
- this.initializtion()
374
- if (this.data.readyEvent) {
375
- this.$dispatch(this.data.readyEvent)
376
- }
377
- this.$dispatch('initializtionView')
378
- },
379
- methods: {
380
- // 初始化数据
381
- initializtion () {
382
- for (const item of this.data.fields) {
383
- this.data[item.field] = item.value
384
- }
385
- // 是否禁用按钮
386
- this.disableButton()
387
- },
388
- // 是否禁用按钮
389
- disableButton () {
390
- let flag = false
391
-
392
- for (const field of this.data.fields) {
393
- if (field.required && !field.value && !field.hidden && field.value !== 0) {
394
- flag = true
395
- }
396
-
397
- // 任何选择框只要是否都不能提交
398
- if (field.type === 'select' && field.value === '否' && field.value_no_disable) {
399
- flag = true
400
- }
401
-
402
- if (field.type === 'checkbox' && field.required && field.value.length === 0) {
403
- flag = true
404
- }
405
- }
406
-
407
- this.disable_button = flag
408
- },
409
- // 失去焦点且值最终发生变化触发
410
- async onchange (index) {
411
- // 是否禁用按钮
412
- this.disableButton()
413
-
414
- if (!isEmpty(this.data.fields[index].value)) {
415
- // 前缀、后缀
416
- if (this.data.fields[index].prefix) {
417
- this.data.fields[index].value = this.data.fields[index].prefix + this.data.fields[index].value
418
- }
419
- if (this.data.fields[index].suffix) {
420
- this.data.fields[index].value = this.data.fields[index].value + this.data.fields[index].suffix
421
- }
422
- }
423
-
424
- // data赋值
425
- this.data[this.data.fields[index].field] = this.data.fields[index].value
426
-
427
- if (this.data.fields[index].type === 'datepicker') {
428
- this.check_datepicker(index)
429
- }
430
-
431
- if (this.data.fields[index].onchange) {
432
- this.$dispatch(this.data.fields[index].onchange, index)
433
- }
434
- this.$dispatch('onchange', index)
435
-
436
-
437
- },
438
- // 失去焦点触发,无论值是否发生变化
439
- onblur (index) {
440
- this.disableButton()
441
-
442
- if (this.data.fields[index].onblur) {
443
- this.$dispatch(this.data.fields[index].onblur, index)
444
- }
445
-
446
- this.$dispatch('onblur', index)
447
- },
448
- oninput (index) {
449
- // 是否禁用按钮
450
- this.disableButton()
451
-
452
- if (this.data.fields[index].oninput) {
453
- this.$dispatch(this.data.fields[index].oninput, index)
454
- }
455
- this.$dispatch('oninput', index)
456
- },
457
- // 点击按钮组按钮
458
- async click_but (button) {
459
- if (this.data.defname === '通气点火') {
460
-
461
- this.$showMessage(`请确认表号是否正确`).then((res) => {
462
-
463
-
464
- this.disable_button = true
465
-
466
- this.data.fields.forEach(item => {
467
- this.data[item.field] = item.value
468
- })
469
-
470
- this.data.button = button
471
-
472
- if (button.button_fields && button.button_fields.length > 0) {
473
- this.showButModal = true
474
- return
475
- }
476
-
477
- if (this.data.button.event) {
478
- this.$dispatch(this.data.button.event)
479
- } else {
480
- this.$dispatch('button')
481
- }
482
-
483
- })
484
-
485
- }
486
- else{
487
- this.disable_button = true
488
-
489
- this.data.fields.forEach(item => {
490
- this.data[item.field] = item.value
491
- })
492
-
493
- this.data.button = button
494
-
495
- if (button.button_fields && button.button_fields.length > 0) {
496
- this.showButModal = true
497
- return
498
- }
499
-
500
- if (this.data.button.event) {
501
- this.$dispatch(this.data.button.event)
502
- } else {
503
- this.$dispatch('button')
504
- }
505
- }
506
- },
507
- confirmModal () {
508
- this.closeModal()
509
-
510
- this.data.button.button_fields.forEach(item => {
511
- this.data.button[item.field] = item.value
512
- })
513
-
514
- if (this.data.button.event) {
515
- this.$dispatch(this.data.button.event)
516
- } else {
517
- this.$dispatch('button')
518
- }
519
- },
520
- // 关闭模态框
521
- closeModal () {
522
- this.showButModal = false
523
- this.disable_modal_button = true
524
- },
525
- onbutchange (index) {
526
- // 是否禁用按钮
527
- this.disableModalButton()
528
-
529
- if (this.data.button.button_fields[index].onchange) {
530
- this.$dispatch(this.data.button.button_fields[index].onchange, index)
531
- } else {
532
- this.$dispatch('onbutchange', index)
533
- }
534
-
535
- },
536
- onbutblur (index) {
537
- this.disableModalButton()
538
-
539
- if (this.data.button.button_fields[index].onblur) {
540
- this.$dispatch(this.data.button.button_fields[index].onblur, index)
541
- } else {
542
- this.$dispatch('onbutblur', index)
543
- }
544
- },
545
- onbutinput (index) {
546
- // 是否禁用按钮
547
- this.disableModalButton()
548
-
549
- if (this.data.button.button_fields[index].oninput) {
550
- this.$dispatch(this.data.button.button_fields[index].oninput, index)
551
- } else {
552
- this.$dispatch('onbutinput', index)
553
- }
554
- },
555
- disableModalButton () {
556
- let flag = false
557
-
558
-
559
- for (const item of this.data.button.button_fields) {
560
- if (item.required && !item.value) {
561
- if (item.value === 0) {
562
- flag = false
563
- } else {
564
- flag = true
565
- }
566
- }
567
- }
568
-
569
- this.disable_modal_button = flag
570
- },
571
- check_datepicker (index) {
572
- // 时间格式检测
573
- if (!isEmpty(this.data.fields[index].value)) {
574
-
575
- let dateReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
576
- let timeReg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
577
- let datetimeReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
578
- if (this.data.fields[index].format) {
579
- if (this.data.fields[index].format === 'yyyy-MM-dd') {
580
- if (!dateReg.test(this.data.fields[index].value)) {
581
- this.data.fields[index].value = ''
582
- this.$showAlert(this.data.fields[index].label + '格式错误如:2021-01-01', 'warning', 2000)
583
- }
584
- }
585
- if (this.data.fields[index].format === 'HH:mm:ss') {
586
- if (!timeReg.test(this.data.fields[index].value)) {
587
- this.data.fields[index].value = ''
588
- this.$showAlert(this.data.fields[index].label + '格式错误如:00:00:00', 'warning', 2000)
589
- }
590
- }
591
- if (this.data.fields[index].format === 'yyyy-MM-dd HH:mm:ss') {
592
- if (!datetimeReg.test(this.data.fields[index].value)) {
593
- this.data.fields[index].value = ''
594
- this.$showAlert(this.data.fields[index].label + '格式错误如:2021-01-01 00:00:00', 'warning', 2000)
595
- }
596
- }
597
- } else {
598
- if (!dateReg.test(this.data.fields[index].value)) {
599
- this.data.fields[index].value = ''
600
- this.$showAlert(this.data.fields[index].label + '格式错误如:2021-01-01', 'warning', 2000)
601
- }
602
- }
603
- }
604
- },
605
- selectSearch(event, index) {
606
- if (this.data.fields[index].selectSearch) {
607
- this.$dispatch(this.data.fields[index].selectSearch, event[0], index)
608
- }
609
- this.$dispatch('selectSearch', event[0], index)
610
- }
611
- },
612
- events: {
613
- }
614
- }
615
- </script>
616
- <style scoped>
617
- .control-label-justify {
618
- width: 30%;
619
- text-align: justify;
620
- text-align-last: justify;
621
- font-family: PingFang-SC-Bold;
622
- float: left;
623
- }
624
- .button_spacing{margin: 0px 0px 0px 10px;}
625
- </style>
626
- <style lang="less">
627
- .apply-has-error {
628
- border-bottom: 1px solid #a94442;
629
- }
630
- .app-input {
631
- label {
632
- float: left;
633
- }
634
- .select {
635
- button {
636
- border: none;
637
- outline: none;
638
- text-align: left;
639
- .btn-placeholder {
640
- color: #ACA899
641
- }
642
- }
643
- }
644
- .datepicker {
645
- .form-control:focus {
646
- border: none!important;
647
- outline: none!important;
648
- -webkit-box-shadow: none;
649
- box-shadow: none;
650
- }
651
- }
652
- textarea {
653
- padding: 8px 10px;
654
- border: none;
655
- outline: none;
656
- margin: 0px;
657
- }
658
- input[readonly]{
659
- color: #ACA899!important;
660
- background: #FFFFFF;
661
- border: none;
662
- outline: none;
663
- }
664
- input:disabled{
665
- color: #ACA899!important;
666
- background: #FFFFFF;
667
- border: none;
668
- outline: none;
669
- }
670
- textarea[readonly]{
671
- color: #ACA899!important;
672
- background: #FFFFFF;
673
- border: none;
674
- outline: none;
675
- }
676
- textarea:disabled{
677
- color: #ACA899!important;
678
- background: #FFFFFF;
679
- border: none;
680
- outline: none;
681
- }
682
- }
683
- </style>
1
+ <template>
2
+ <div class="form-horizontal select-overspread">
3
+ <validator name='v' @valid="$emit('valid')" @invalid="$emit('invalid')">
4
+ <form>
5
+ <div v-for="(index,item) in data.fields">
6
+ <!--input-->
7
+ <div :style="item.style ? item.style : ''"
8
+ v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'app' || !item.device) && (item.label != '证件号码')&&(item.label != '身份证') && (item.label != '用户电话')"
9
+ :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
10
+ <label class="control-label-justify">{{item.label}}</label>
11
+ <div :style="item.value_style ? item.value_style:''"
12
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
13
+ <input class="" style="width: 100%"
14
+ :type="item.type"
15
+ v-model="data.fields[index].value"
16
+ :placeholder="item.placeholder"
17
+ :value="data.fields[index].value"
18
+ :readonly="item.readonly"
19
+ :disabled="item.disabled"
20
+ @change="onchange(index)"
21
+ @blur="onblur(index)"
22
+ @input="oninput(index)"
23
+ />
24
+ </div>
25
+ </div>
26
+
27
+ <div :style="item.style ? item.style : ''"
28
+ v-if="(data.fields[index-1].value ==='营业执照'||data.fields[index-1].value ==='军官证')&& (item.label === '证件号码')"
29
+ :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
30
+ <label class="control-label-justify">{{item.label}}</label>
31
+ <div :style="item.value_style ? item.value_style:''"
32
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
33
+ <input class="" style="width: 100%"
34
+ :type="item.type"
35
+ v-model="data.fields[index].value"
36
+ :placeholder="item.placeholder"
37
+ :value="data.fields[index].value"
38
+ :readonly="item.readonly"
39
+ :disabled="item.disabled"
40
+ @change="onchange(index)"
41
+ @blur="onblur(index)"
42
+ @input="oninput(index)"
43
+ />
44
+ </div>
45
+ </div>
46
+
47
+
48
+ <!--input身份证验证-->
49
+ <div :style="item.style ? item.style : ''"
50
+ v-if="(item.label==='身份证') || (item.label === '证件号码' && data.fields[index-1].value ==='身份证')"
51
+ :class="[$v.f_idnumber2.identityCardValid ? 'apply-has-error' : '',item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
52
+ <label class="control-label-justify">{{item.label}}</label>
53
+ <div :style="item.value_style ? item.value_style:''"
54
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
55
+ <input class="" style="width: 100%"
56
+ :type="item.type"
57
+ maxlength="18"
58
+ v-model="data.fields[index].value"
59
+ :placeholder="item.placeholder"
60
+ :value="data.fields[index].value"
61
+ onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
62
+ :readonly="item.readonly"
63
+ v-validate:f_idnumber2='{identityCardValid: true}'
64
+ @change="onchange(index)"
65
+ @blur="onblur(index)"
66
+ @input="oninput(index)"
67
+ />
68
+ </div>
69
+ </div>
70
+
71
+
72
+ <!--input手机号验证-->
73
+ <div :style="item.style ? item.style : ''"
74
+ v-if="item.label === '用户电话'"
75
+ :class="[$v.f_user_phone.minlength || $v.f_user_phone.maxlength ? 'apply-has-error' : '',item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
76
+ <label class="control-label-justify">{{item.label}}</label>
77
+ <div :style="item.value_style ? item.value_style:''"
78
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
79
+ <input class="" style="width: 100%"
80
+ maxlength="18"
81
+ type="number"
82
+ onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
83
+ oninput="if(value.length > 11) value=value.slice(0,11)"
84
+ v-validate:f_user_phone="{minlength: 7, maxlength: 11 }"
85
+ v-model="data.fields[index].value"
86
+ :placeholder="item.placeholder"
87
+ :value="data.fields[index].value"
88
+ :readonly="item.readonly"
89
+ @change="onchange(index)"
90
+ @blur="onblur(index)"
91
+ @input="oninput(index)"
92
+ />
93
+ </div>
94
+ </div>
95
+
96
+ <!--select-->
97
+ <div :style="item.style ? item.style : ''"
98
+ v-if="item.type==='select' && !item.hidden && (item.device === 'app' || !item.device)"
99
+ :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
100
+ <label class="control-label-justify">{{item.label}}</label>
101
+ <div :style="item.value_style ? item.value_style:''"
102
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
103
+ <v-select
104
+ class="select" width="100%" align="right"
105
+ :placeholder="item.placeholder"
106
+ :search="item.search"
107
+ close-on-select value-single
108
+ @select-search="selectSearch($arguments,index)"
109
+ :options="data.fields[index].options"
110
+ v-model="data.fields[index].value"
111
+ :value.sync="data.fields[index].value"
112
+ @blur="onblur(index)"
113
+ @change="onchange(index)"
114
+ :readonly="item.readonly"
115
+ :disabled="item.disabled"
116
+ ></v-select>
117
+ </div>
118
+ </div>
119
+
120
+ <!--时间datepicker-->
121
+ <div :style="item.style ? item.style : ''"
122
+ v-if="item.type==='datepicker' && !item.hidden && (item.device === 'app' || !item.device)"
123
+ :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
124
+ <label class="control-label-justify">{{item.label}}</label>
125
+ <div class="form-group" :style="item.value_style ? item.value_style:''"
126
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
127
+ <datepicker
128
+ @change="onchange(index)"
129
+ @blur="onblur(index)"
130
+ :placeholder="item.placeholder"
131
+ :value.sync="data.fields[index].value"
132
+ :format="item.format ? item.format : 'yyyy-MM-dd'"
133
+ v-model="data.fields[index].value"
134
+ :readonly="item.readonly"
135
+ :disabled="item.disabled"
136
+ :show-reset-button="true">
137
+ </datepicker>
138
+ </div>
139
+ </div>
140
+
141
+ <!--textarea-->
142
+ <div :style="item.style ? item.style : ''"
143
+ v-if="item.type==='textarea' && !item.hidden && (item.device === 'app' || !item.device)"
144
+ :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
145
+ <label class="control-label-justify">{{item.label}}</label>
146
+ <div :style="item.value_style ? item.value_style:''"
147
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
148
+ <textarea
149
+ :readonly="item.readonly"
150
+ :disabled="item.disabled"
151
+ class="" rows="1"
152
+ style="width: 100%;height: 100%"
153
+ v-model="data.fields[index].value"
154
+ :value="data.fields[index].value"
155
+ @change="onchange(index)"
156
+ @blur="onblur(index)"
157
+ @input="oninput(index)"
158
+ ></textarea>
159
+ </div>
160
+ </div>
161
+
162
+ <!--checkbox-->
163
+ <div :style="item.style ? item.style : ''"
164
+ v-if="item.type==='checkbox' && !item.hidden && (item.device === 'app' || !item.device)"
165
+ :class="[item.required && item.value.length === 0 ? 'apply-has-error' : '',item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
166
+ <label class="control-label-justify">{{item.label}}</label>
167
+ <div :style="item.value_style ? item.value_style:''"
168
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
169
+ <label class="" v-for="(index2,row) in item.options">
170
+ <input type="checkbox" class=""
171
+ :readonly="data.fields[index].readonly"
172
+ :disabled="data.fields[index].disabled"
173
+ v-model="data.fields[index].value"
174
+ :value="data.fields[index].options[index2].value"
175
+ @change="onchange(index)"
176
+ @blur="onblur(index)">
177
+ {{row.label}}
178
+ </label>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <!--区域地址联动-->
183
+ <div>
184
+ <app-res-area-select-group
185
+ v-if="data.f_apply_type === '报警器报建' && data.defname === '工程施工' && data.title === '工程施工' && data.f_sub_state !='完工'"
186
+ labelstyle = "control-label"
187
+ @shiji-select = "getSelectShijiValue"
188
+ @xian-select = "getSelectXianValue"
189
+ @shequ-select = "getSelectShequValue"
190
+ >
191
+ </app-res-area-select-group>
192
+ </div>
193
+ <div class="col-sm-12 col-xs-12" id="test11">
194
+ <accordion one-at-a-time="true">
195
+ <panel v-for="(i,item) in data.onetomany" :header="item.title" :is-open="false" type="primary">
196
+ <app-onetomany :onetomany="item" :index="i" :selectdata="data"></app-onetomany>
197
+ </panel>
198
+ <panel v-for="(i,item) in data.components" :header="item.title" :is-open="false" type="primary" v-if="item.device === 'app' || !item.device">
199
+ <component :is="item.name" :selectdata="data" :mark="item.mark"></component>
200
+ </panel>
201
+ </accordion>
202
+ </div>
203
+
204
+ <!--自定义组件-->
205
+ <slot>
206
+ </slot>
207
+
208
+ <!-- 按钮组 -->
209
+ <div class="text-center">
210
+ <button v-for="(index,button) in data.buttons"
211
+ :disabled="button.disabled && disable_button"
212
+ style="min-width:100px"
213
+ :class="button.disabled && disable_button ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
214
+ v-if="!button.hidden && button.button_name !=='提交'&& button.button_name !=='确认'"
215
+ @click.prevent="click_but(button)"
216
+ >
217
+ {{button.button_name}}
218
+ </button>
219
+ <button v-for="(index,button) in data.buttons"
220
+ :disabled="(button.disabled && disable_button) || (!$v.valid)"
221
+ style="min-width:100px"
222
+ :class="button.disabled && disable_button || (!$v.valid) ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
223
+ v-if="!button.hidden && (button.button_name ==='提交'||button.button_name ==='确认')"
224
+ @click.prevent="click_but(button)"
225
+ >
226
+ {{button.button_name}}
227
+ </button>
228
+ </div>
229
+
230
+ <!-- 按钮模态框 -->
231
+ <modal v-if="showButModal" :show.sync="showButModal" backdrop="false" large>
232
+ <header slot="modal-header" class="modal-header">
233
+ <button type="button" class="close" @click="closeModal()"><span>&times;</span></button>
234
+ <span class="modal-title"><font
235
+ size="3">{{data.button.button_name}}</font></span>
236
+ </header>
237
+ <article slot="modal-body" class="modal-body clearfix">
238
+ <div class="form-group" >
239
+ <div v-for="(index,item) in data.button.button_fields">
240
+ <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group' : 'form-group']"
241
+ v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'pc' || !item.device)">
242
+ <label :style="item.label_style ? item.label_style : ''"
243
+ :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label'">{{item.label}}</label>
244
+ <div :style="item.value_style ? item.value_style : ''"
245
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
246
+ <input class="form-control input_view"
247
+ :placeholder="item.placeholder"
248
+ :type="item.type"
249
+ v-model="item.value"
250
+ :value="item.value"
251
+ :readonly="item.readonly"
252
+ :disabled="item.disabled"
253
+ @change="onbutchange(index)"
254
+ @blur="onbutblur(index)"
255
+ @input="onbutinput(index)"
256
+ />
257
+ </div>
258
+ </div>
259
+
260
+ <!--时间datepicker-->
261
+ <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
262
+ v-if="item.type==='datepicker' && !item.hidden && (item.device === 'pc' || !item.device)">
263
+ <label :style="item.label_style ? item.label_style : ''"
264
+ :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label'">{{item.label}}</label>
265
+ <div :style="item.value_style ? item.value_style : ''"
266
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
267
+ <datepicker
268
+ :placeholder="item.placeholder"
269
+ :value.sync="item.value"
270
+ v-model="item.value"
271
+ :readonly="item.readonly"
272
+ :disabled="item.disabled"
273
+ :format="item.format ? item.format : 'yyyy-MM-dd'"
274
+ :show-reset-button="true"
275
+ @change="onbutchange(index)"
276
+ @blur="onbutblur(index)"
277
+ ></datepicker>
278
+ </div>
279
+ </div>
280
+
281
+ <!--select-->
282
+ <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
283
+ v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device)">
284
+ <label :style="item.label_style ? item.label_style : ''"
285
+ :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label'">{{item.label}}</label>
286
+ <div :style="item.value_style ? item.value_style : ''"
287
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
288
+ <input-select
289
+ class="select select_list"
290
+ :value.sync="item.value"
291
+ v-model="item.value"
292
+ :options='item.options'
293
+ :readonly="item.readonly"
294
+ :disable="item.disabled"
295
+ :valueSingle="true"
296
+ @blur="onbutblur(index)"
297
+ @change="onbutchange(index)"
298
+ ></input-select>
299
+ </div>
300
+ </div>
301
+
302
+ <!--textarea-->
303
+ <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
304
+ v-if="item.type==='textarea' && !item.hidden && (item.device === 'pc' || !item.device)">
305
+ <label :style="item.label_style ? item.label_style : ''"
306
+ :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label'">{{item.label}}</label>
307
+ <div :style="item.value_style ? item.value_style : ''"
308
+ :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
309
+ <textarea
310
+ class="form-control input_view"
311
+ style="width: 100%;height: 100%"
312
+ v-model="item.value"
313
+ :value="item.value"
314
+ :rows="item.rows"
315
+ :readonly="item.readonly"
316
+ :disabled="item.disabled"
317
+ @change="onbutchange(index)"
318
+ @blur="onbutblur(index)"
319
+ @input="onbutinput(index)"
320
+ ></textarea>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </article>
326
+ <footer slot="modal-footer" class="modal-footer">
327
+ <button :class="disable_modal_button ? 'btn btn-default':'btn btn-primary'"
328
+ :disabled="disable_modal_button" type="button" @click="confirmModal()">
329
+ 确认
330
+ </button>
331
+ </footer>
332
+ </modal>
333
+ </form>
334
+ </div>
335
+ </template>
336
+ <script>
337
+ import Vue from 'vue'
338
+ import {isEmpty} from "../Util";
339
+ // Date格式化
340
+ Date.prototype.Format = function (fmt) {
341
+ var o = {
342
+ 'M+': this.getMonth() + 1, // 月份
343
+ 'd+': this.getDate(), // 日
344
+ 'H+': this.getHours(), // 小时
345
+ 'm+': this.getMinutes(), // 分
346
+ 's+': this.getSeconds(), // 秒
347
+ 'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
348
+ 'S': this.getMilliseconds() // 毫秒
349
+ }
350
+ if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
351
+ for (var k in o) {
352
+ if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
353
+ }
354
+ return fmt
355
+ }
356
+
357
+ export default {
358
+ title: '报建业务通用组件',
359
+ props: {
360
+ data: {
361
+ type: Object
362
+ },
363
+ showprint: {
364
+ type: Boolean,
365
+ default: true
366
+ }
367
+ },
368
+ data () {
369
+ return {
370
+ model: {}, // 公司等属性
371
+ disable_button: true, // 控制按钮禁用
372
+ disable_modal_button: true, // 控制按钮禁用
373
+ showButModal: false,
374
+ areaData:{
375
+ sjvalue:'',
376
+ xianvalue:'',
377
+ sqvalue:'',
378
+ }
379
+ }
380
+ },
381
+ watch: {
382
+ deep: true
383
+ },
384
+ computed: {
385
+
386
+ },
387
+ created () {
388
+ // 初始化数据
389
+ this.initializtion()
390
+ if (this.data.readyEvent) {
391
+ this.$dispatch(this.data.readyEvent)
392
+ }
393
+ this.$dispatch('initializtionView')
394
+ },
395
+ methods: {
396
+ // 初始化数据
397
+ initializtion () {
398
+ for (const item of this.data.fields) {
399
+ this.data[item.field] = item.value
400
+ }
401
+ // 是否禁用按钮
402
+ this.disableButton()
403
+ },
404
+ async getSelectShijiValue(sjvalue,sjlable) {
405
+
406
+ this.areaData.sjvalue = sjvalue
407
+ console.log("这是父级接收的市级值:",sjvalue,sjlable)
408
+ this.data.areaData = this.areaData
409
+ console.log(this.areaData)
410
+ // 是否禁用按钮
411
+ this.disableButton()
412
+ },
413
+ async getSelectXianValue(xianvalue,xianlable) {
414
+
415
+ this.areaData.xianvalue = xianvalue
416
+ this.data.areaData = this.areaData
417
+ console.log("这是父级接收的县级值:",xianvalue,xianlable)
418
+ console.log(this.areaData)
419
+
420
+ // 是否禁用按钮
421
+ this.disableButton()
422
+ },
423
+ async getSelectShequValue(sqvalue,sqlable) {
424
+ this.areaData.sqvalue = sqvalue
425
+ this.data.areaData = this.areaData
426
+ console.log(this.areaData)
427
+ console.log("这是父级接收的社区值:",sqvalue,sqlable)
428
+
429
+ // 是否禁用按钮
430
+ this.disableButton()
431
+ },
432
+ // 是否禁用按钮
433
+ disableButton () {
434
+ let flag = false
435
+
436
+ for (const field of this.data.fields) {
437
+ if (field.required && !field.value && !field.hidden && field.value !== 0) {
438
+ flag = true
439
+ }
440
+
441
+ // 任何选择框只要是否都不能提交
442
+ if (field.type === 'select' && field.value === '否' && field.value_no_disable) {
443
+ flag = true
444
+ }
445
+
446
+ if (field.type === 'checkbox' && field.required && field.value.length === 0) {
447
+ flag = true
448
+ }
449
+ }
450
+
451
+ //区域下拉框必选 流程模式为报警器报建
452
+ if (this.data.f_apply_type === '报警器报建' && this.data.defname === '工程施工' && this.data.title === '工程施工' && this.data.f_sub_state !='完工'){
453
+ if (!flag){
454
+ if (this.areaData.sjvalue ==null || this.areaData.sjvalue.length ==0 || this.areaData.sqvalue == null || this.areaData.sqvalue.length ==0
455
+ || this.areaData.xianvalue == null || this.areaData.xianvalue == 0){
456
+ console.log("区域为空禁止提交:",this.areaData)
457
+ flag = true
458
+ }
459
+ }
460
+ }
461
+
462
+ this.disable_button = flag
463
+ },
464
+ // 失去焦点且值最终发生变化触发
465
+ async onchange (index) {
466
+ // 是否禁用按钮
467
+ this.disableButton()
468
+
469
+ if (!isEmpty(this.data.fields[index].value)) {
470
+ // 前缀、后缀
471
+ if (this.data.fields[index].prefix) {
472
+ this.data.fields[index].value = this.data.fields[index].prefix + this.data.fields[index].value
473
+ }
474
+ if (this.data.fields[index].suffix) {
475
+ this.data.fields[index].value = this.data.fields[index].value + this.data.fields[index].suffix
476
+ }
477
+ }
478
+
479
+ // data赋值
480
+ this.data[this.data.fields[index].field] = this.data.fields[index].value
481
+
482
+ if (this.data.fields[index].type === 'datepicker') {
483
+ this.check_datepicker(index)
484
+ }
485
+
486
+ if (this.data.fields[index].onchange) {
487
+ this.$dispatch(this.data.fields[index].onchange, index)
488
+ }
489
+ this.$dispatch('onchange', index)
490
+
491
+
492
+ },
493
+ // 失去焦点触发,无论值是否发生变化
494
+ onblur (index) {
495
+ this.disableButton()
496
+
497
+ if (this.data.fields[index].onblur) {
498
+ this.$dispatch(this.data.fields[index].onblur, index)
499
+ }
500
+
501
+ this.$dispatch('onblur', index)
502
+ },
503
+ oninput (index) {
504
+ // 是否禁用按钮
505
+ this.disableButton()
506
+
507
+ if (this.data.fields[index].oninput) {
508
+ this.$dispatch(this.data.fields[index].oninput, index)
509
+ }
510
+ this.$dispatch('oninput', index)
511
+ },
512
+ // 点击按钮组按钮
513
+ async click_but (button) {
514
+ //报警器区域地址
515
+ this.data.areaData = this.areaData
516
+
517
+ if (this.data.defname === '通气点火') {
518
+
519
+ this.$showMessage(`请确认表号是否正确`).then((res) => {
520
+
521
+
522
+ this.disable_button = true
523
+
524
+ this.data.fields.forEach(item => {
525
+ this.data[item.field] = item.value
526
+ })
527
+
528
+ this.data.button = button
529
+
530
+ if (button.button_fields && button.button_fields.length > 0) {
531
+ this.showButModal = true
532
+ return
533
+ }
534
+
535
+ if (this.data.button.event) {
536
+ this.$dispatch(this.data.button.event)
537
+ } else {
538
+ this.$dispatch('button')
539
+ }
540
+
541
+ })
542
+
543
+ }
544
+ else{
545
+ this.disable_button = true
546
+
547
+ this.data.fields.forEach(item => {
548
+ this.data[item.field] = item.value
549
+ })
550
+
551
+ this.data.button = button
552
+
553
+ if (button.button_fields && button.button_fields.length > 0) {
554
+ this.showButModal = true
555
+ return
556
+ }
557
+
558
+ if (this.data.button.event) {
559
+ this.$dispatch(this.data.button.event)
560
+ } else {
561
+ this.$dispatch('button')
562
+ }
563
+ }
564
+
565
+ },
566
+ confirmModal () {
567
+ this.closeModal()
568
+
569
+ this.data.button.button_fields.forEach(item => {
570
+ this.data.button[item.field] = item.value
571
+ })
572
+
573
+ if (this.data.button.event) {
574
+ this.$dispatch(this.data.button.event)
575
+ } else {
576
+ this.$dispatch('button')
577
+ }
578
+ },
579
+ // 关闭模态框
580
+ closeModal () {
581
+ this.showButModal = false
582
+ this.disable_modal_button = true
583
+ },
584
+ onbutchange (index) {
585
+ // 是否禁用按钮
586
+ this.disableModalButton()
587
+
588
+ if (this.data.button.button_fields[index].onchange) {
589
+ this.$dispatch(this.data.button.button_fields[index].onchange, index)
590
+ } else {
591
+ this.$dispatch('onbutchange', index)
592
+ }
593
+
594
+ },
595
+ onbutblur (index) {
596
+ this.disableModalButton()
597
+
598
+ if (this.data.button.button_fields[index].onblur) {
599
+ this.$dispatch(this.data.button.button_fields[index].onblur, index)
600
+ } else {
601
+ this.$dispatch('onbutblur', index)
602
+ }
603
+ },
604
+ onbutinput (index) {
605
+ // 是否禁用按钮
606
+ this.disableModalButton()
607
+
608
+ if (this.data.button.button_fields[index].oninput) {
609
+ this.$dispatch(this.data.button.button_fields[index].oninput, index)
610
+ } else {
611
+ this.$dispatch('onbutinput', index)
612
+ }
613
+ },
614
+ disableModalButton () {
615
+ let flag = false
616
+
617
+
618
+ for (const item of this.data.button.button_fields) {
619
+ if (item.required && !item.value) {
620
+ if (item.value === 0) {
621
+ flag = false
622
+ } else {
623
+ flag = true
624
+ }
625
+ }
626
+ }
627
+
628
+ this.disable_modal_button = flag
629
+ },
630
+ check_datepicker (index) {
631
+ // 时间格式检测
632
+ if (!isEmpty(this.data.fields[index].value)) {
633
+
634
+ let dateReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
635
+ let timeReg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
636
+ let datetimeReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
637
+ if (this.data.fields[index].format) {
638
+ if (this.data.fields[index].format === 'yyyy-MM-dd') {
639
+ if (!dateReg.test(this.data.fields[index].value)) {
640
+ this.data.fields[index].value = ''
641
+ this.$showAlert(this.data.fields[index].label + '格式错误如:2021-01-01', 'warning', 2000)
642
+ }
643
+ }
644
+ if (this.data.fields[index].format === 'HH:mm:ss') {
645
+ if (!timeReg.test(this.data.fields[index].value)) {
646
+ this.data.fields[index].value = ''
647
+ this.$showAlert(this.data.fields[index].label + '格式错误如:00:00:00', 'warning', 2000)
648
+ }
649
+ }
650
+ if (this.data.fields[index].format === 'yyyy-MM-dd HH:mm:ss') {
651
+ if (!datetimeReg.test(this.data.fields[index].value)) {
652
+ this.data.fields[index].value = ''
653
+ this.$showAlert(this.data.fields[index].label + '格式错误如:2021-01-01 00:00:00', 'warning', 2000)
654
+ }
655
+ }
656
+ } else {
657
+ if (!dateReg.test(this.data.fields[index].value)) {
658
+ this.data.fields[index].value = ''
659
+ this.$showAlert(this.data.fields[index].label + '格式错误如:2021-01-01', 'warning', 2000)
660
+ }
661
+ }
662
+ }
663
+ },
664
+ selectSearch(event, index) {
665
+ if (this.data.fields[index].selectSearch) {
666
+ this.$dispatch(this.data.fields[index].selectSearch, event[0], index)
667
+ }
668
+ this.$dispatch('selectSearch', event[0], index)
669
+ }
670
+ },
671
+ events: {
672
+ }
673
+ }
674
+ </script>
675
+ <style scoped>
676
+ .control-label-justify {
677
+ width: 30%;
678
+ text-align: justify;
679
+ text-align-last: justify;
680
+ font-family: PingFang-SC-Bold;
681
+ float: left;
682
+ }
683
+ .button_spacing{margin: 0px 0px 0px 10px;}
684
+ </style>
685
+ <style lang="less">
686
+ .apply-has-error {
687
+ border-bottom: 1px solid #a94442;
688
+ }
689
+ .app-input {
690
+ label {
691
+ float: left;
692
+ }
693
+ .select {
694
+ button {
695
+ border: none;
696
+ outline: none;
697
+ text-align: left;
698
+ .btn-placeholder {
699
+ color: #ACA899
700
+ }
701
+ }
702
+ }
703
+ .datepicker {
704
+ .form-control:focus {
705
+ border: none!important;
706
+ outline: none!important;
707
+ -webkit-box-shadow: none;
708
+ box-shadow: none;
709
+ }
710
+ }
711
+ textarea {
712
+ padding: 8px 10px;
713
+ border: none;
714
+ outline: none;
715
+ margin: 0px;
716
+ }
717
+ input[readonly]{
718
+ color: #ACA899!important;
719
+ background: #FFFFFF;
720
+ border: none;
721
+ outline: none;
722
+ }
723
+ input:disabled{
724
+ color: #ACA899!important;
725
+ background: #FFFFFF;
726
+ border: none;
727
+ outline: none;
728
+ }
729
+ textarea[readonly]{
730
+ color: #ACA899!important;
731
+ background: #FFFFFF;
732
+ border: none;
733
+ outline: none;
734
+ }
735
+ textarea:disabled{
736
+ color: #ACA899!important;
737
+ background: #FFFFFF;
738
+ border: none;
739
+ outline: none;
740
+ }
741
+ }
742
+ </style>