apply-clients 3.3.71-4 → 3.3.73

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