gyj 2 лет назад
Родитель
Сommit
27232abf9c

+ 780
- 0
components/zxz-uni-data-select/zxz-uni-data-select.vue Просмотреть файл

@@ -0,0 +1,780 @@
1
+<template>
2
+	<view class="uni-stat__select">
3
+		<!-- hide-on-phone -->
4
+		<span v-if="label" class="uni-label-text">{{label + ':'}}</span>
5
+		<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
6
+			<view class="uni-select" :style="{height:multiple?'100%':' 35px'}"
7
+				:class="{'uni-select--disabled':disabled}">
8
+				<view class="uni-select__input-box" :style="{height:multiple?'100%':'35px'}" @click="toggleSelector">
9
+					<view class="" style="display: flex;flex-wrap: wrap;width: 100%;" v-if="multiple&&current.length>0">
10
+						<view class="tag-calss"
11
+							v-for="(item,index) in collapseTags?current.slice(0,collapseTagsNum):current"
12
+							:key="item[dataValue]">
13
+							<span class="text">{{item[dataKey]}}</span>
14
+							<view class="" @click.stop="delItem(item)">
15
+								<uni-icons type="clear" style="margin-left: 4px;" color="#c0c4cc" />
16
+							</view>
17
+						</view>
18
+						<view v-if="current.length>collapseTagsNum&&collapseTags" class="tag-calss">
19
+							<span class="text">+{{current.length-collapseTagsNum}}</span>
20
+						</view>
21
+						<input v-if="filterable&&!disabled" @input="inputChange" class="uni-select__input-text"
22
+							type="text" style="font-size: 12px;height: 52rpx;margin-left: 6px;width: auto;"
23
+							placeholder="请输入" v-model="filterInput">
24
+					</view>
25
+					<view v-else-if="current&&current.length>0&&!showSelector" class="uni-select__input-text">
26
+						{{current}}
27
+					</view>
28
+					<input v-else-if="filterable&&showSelector" :focus="isFocus" @input="inputChange"
29
+						:disabled="disabled" @click.stop="" class="uni-select__input-text" type="text"
30
+						style="font-size: 12px;position: absolute;z-index: 1;" :placeholder="placeholderOld"
31
+						v-model="filterInput">
32
+					<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
33
+					<uni-icons v-if="(current.length>0 && clear&&!disabled)||(currentArr.length>0&&clear&&!disabled)"
34
+						type="clear" color="#c0c4cc" size="24" style="position: absolute;right: 0;" @click="clearVal" />
35
+					<uni-icons style="right: 0;position: absolute;" v-else :type="showSelector? 'top' : 'bottom'"
36
+						size="14" color="#999" />
37
+				</view>
38
+				<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
39
+				<view class="uni-select__selector" v-if="showSelector">
40
+					<view class="uni-popper__arrow"></view>
41
+					<scroll-view scroll-y="true" class="uni-select__selector-scroll">
42
+						<view class="uni-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
43
+							<span>{{emptyTips}}</span>
44
+						</view>
45
+						<view v-else :class="['uni-select__selector-item', {'uni-select_selector-item_active' :multiple
46
+							&& currentArr.includes(item[dataValue])}]"
47
+							style="display: flex;justify-content: space-between;align-items: center;"
48
+							v-for="(item,index) in filterMixinDatacomResData" :key="index" @click="change(item)">
49
+							<span
50
+								:class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</span>
51
+							<uni-icons v-if="multiple&&currentArr.includes(item[dataValue])" type="checkmarkempty"
52
+								color="#007aff" />
53
+						</view>
54
+					</scroll-view>
55
+				</view>
56
+			</view>
57
+		</view>
58
+	</view>
59
+</template>
60
+
61
+<script>
62
+	/**
63
+	 * DataChecklist 数据选择器
64
+	 * @description 通过数据渲染的下拉框组件
65
+	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
66
+	 * @property {String} value 默认值
67
+	 * @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}]
68
+	 * @property {Boolean} clear 是否可以清空已选项
69
+	 * @property {Boolean} emptyText 没有数据时显示的文字 ,本地数据无效
70
+	 * @property {String} label 左侧标题
71
+	 * @property {String} placeholder 输入框的提示文字
72
+	 * @property {Boolean} disabled 是否禁用
73
+	 * @event {Function} change  选中发生变化触发
74
+	 */
75
+
76
+	export default {
77
+		name: "uni-stat-select",
78
+		mixins: [uniCloud.mixinDatacom || {}],
79
+		props: {
80
+			collapseTagsNum: {
81
+				type: Number,
82
+				default: 1
83
+			},
84
+			collapseTags: {
85
+				type: Boolean,
86
+				default: false
87
+			},
88
+			dataKey: {
89
+				type: [String],
90
+				default: 'text'
91
+			},
92
+			dataValue: {
93
+				type: [String],
94
+				default: 'value'
95
+			},
96
+			multiple: {
97
+				type: Boolean,
98
+				default: false
99
+			},
100
+			filterable: {
101
+				type: Boolean,
102
+				default: false
103
+			},
104
+			localdata: {
105
+				type: Array,
106
+				default () {
107
+					return []
108
+				}
109
+			},
110
+			// #ifndef VUE3
111
+			value: {
112
+				type: [String, Number, Array],
113
+				default: ''
114
+			},
115
+			// #endif
116
+			// #ifdef VUE3
117
+			modelValue: {
118
+				type: [String, Number, Array],
119
+				default: ''
120
+			},
121
+			// #endif
122
+			label: {
123
+				type: String,
124
+				default: ''
125
+			},
126
+			placeholder: {
127
+				type: String,
128
+				default: '请选择'
129
+			},
130
+			emptyTips: {
131
+				type: String,
132
+				default: '无选项'
133
+			},
134
+			clear: {
135
+				type: Boolean,
136
+				default: true
137
+			},
138
+			defItem: {
139
+				type: Number,
140
+				default: 0
141
+			},
142
+			disabled: {
143
+				type: Boolean,
144
+				default: false
145
+			},
146
+			// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
147
+			format: {
148
+				type: String,
149
+				default: ''
150
+			},
151
+		},
152
+		data() {
153
+			return {
154
+				showSelector: false,
155
+				current: [],
156
+				mixinDatacomResData: [],
157
+				apps: [],
158
+				channels: [],
159
+				cacheKey: "uni-data-select-lastSelectedValue",
160
+				placeholderOld: "",
161
+				currentArr: [],
162
+				filterInput: "",
163
+				isFocus: false
164
+			};
165
+		},
166
+		created() {
167
+			if (this.multiple) {
168
+				// #ifndef VUE3
169
+				this.currentArr = this.value || []
170
+				// #endif
171
+				// #ifdef VUE3
172
+				this.currentArr = this.modelValue || []
173
+				// #endif
174
+				if (this.current.length > 0) {
175
+					this.current = []
176
+				}
177
+				// #ifndef VUE3
178
+				if (this.value && this.value.length > 0 && this.filterMixinDatacomResData.length > 0) {
179
+					this.current = this.value.map(item => {
180
+						let current = this.mixinDatacomResData.find(e =>
181
+							e[this.dataValue] == item
182
+						)
183
+						return {
184
+							...current
185
+						}
186
+					})
187
+				}
188
+				// #endif
189
+				// #ifdef VUE3
190
+				if (this.modelValue && this.modelValue.length > 0 && this.filterMixinDatacomResData.length > 0) {
191
+					this.current = this.modelValue.map(item => {
192
+						let current = this.mixinDatacomResData.find(e =>
193
+							e[this.dataValue] == item
194
+						)
195
+						return {
196
+							...current
197
+						}
198
+					})
199
+				}
200
+				// #endif
201
+
202
+			} else {
203
+
204
+				// #ifndef VUE3
205
+				if (this.value || this.value == 0) {
206
+					this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
207
+						e[this.dataValue] == this.value
208
+					))
209
+				}
210
+				// #endif
211
+				// #ifdef VUE3
212
+				if (this.modelValue || this.value == 0) {
213
+					this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
214
+						e[this.dataValue] == this.modelValue
215
+					))
216
+				}
217
+				// #endif
218
+			}
219
+			this.placeholderOld = this.placeholder
220
+			this.debounceGet = this.debounce(() => {
221
+				this.query();
222
+			}, 300);
223
+			if (this.collection && !this.localdata.length) {
224
+				this.debounceGet();
225
+			}
226
+		},
227
+		computed: {
228
+			filterMixinDatacomResData() {
229
+				if (this.filterable && this.filterInput) {
230
+					return this.mixinDatacomResData.filter(e => e[this.dataKey].includes(this.filterInput))
231
+				} else {
232
+					return this.mixinDatacomResData
233
+				}
234
+			},
235
+			typePlaceholder() {
236
+				const text = {
237
+					'opendb-stat-app-versions': '版本',
238
+					'opendb-app-channels': '渠道',
239
+					'opendb-app-list': '应用'
240
+				}
241
+				const common = this.placeholder
242
+				const placeholder = text[this.collection]
243
+				return placeholder ?
244
+					common + placeholder :
245
+					common
246
+			},
247
+			valueCom() {
248
+				// #ifdef VUE3
249
+				return this.modelValue;
250
+				// #endif
251
+				// #ifndef VUE3
252
+				return this.value;
253
+				// #endif
254
+			}
255
+		},
256
+		watch: {
257
+			localdata: {
258
+				immediate: true,
259
+				handler(val, old) {
260
+					if (Array.isArray(val) && old !== val) {
261
+						this.mixinDatacomResData = val || []
262
+					}
263
+
264
+				}
265
+			},
266
+			valueCom: {
267
+				handler(newVal, oldVal) {
268
+					// console.log(newVal, oldVal);
269
+					this.initDefVal()
270
+				},
271
+				deep: true,
272
+				immediate: true
273
+			},
274
+			mixinDatacomResData: {
275
+				immediate: true,
276
+				handler(val) {
277
+					if (val.length) {
278
+						this.initDefVal()
279
+					}
280
+				}
281
+			},
282
+		},
283
+		methods: {
284
+			debounce(fn, time = 100) {
285
+				let timer = null
286
+				return function(...args) {
287
+					if (timer) clearTimeout(timer)
288
+					timer = setTimeout(() => {
289
+						fn.apply(this, args)
290
+					}, time)
291
+				}
292
+			},
293
+			// 执行数据库查询
294
+			query() {
295
+				this.mixinDatacomEasyGet();
296
+			},
297
+			// 监听查询条件变更事件
298
+			onMixinDatacomPropsChange() {
299
+				if (this.collection) {
300
+					this.debounceGet();
301
+				}
302
+			},
303
+			initDefVal() {
304
+				let defValue = ''
305
+				if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
306
+					defValue = this.valueCom
307
+				} else {
308
+					let strogeValue
309
+					if (this.collection) {
310
+						strogeValue = this.getCache()
311
+					}
312
+					if (strogeValue || strogeValue === 0) {
313
+						defValue = strogeValue
314
+					} else {
315
+						let defItem = ''
316
+						if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
317
+							defItem = this.mixinDatacomResData[this.defItem - 1][this.dataValue]
318
+						}
319
+						defValue = defItem
320
+					}
321
+					if (defValue || defValue === 0) {
322
+						this.emit(defValue)
323
+					}
324
+				}
325
+				if (this.multiple) {
326
+					const mixinDatacomResData = this.mixinDatacomResData || []
327
+					if (!defValue) defValue = []
328
+					this.current = defValue.map(item => {
329
+						const current = mixinDatacomResData.find(e => {
330
+							return e[this.dataValue] == item
331
+						})
332
+						return {
333
+							...current
334
+						}
335
+					})
336
+					this.currentArr = this.current.map(e => e[this.dataValue])
337
+					if (defValue.length < 1) {
338
+						this.currentArr = []
339
+					}
340
+				} else {
341
+					const def = this.mixinDatacomResData.find(item => item[this.dataValue] === defValue)
342
+					this.current = def ? this.formatItemName(def) : ''
343
+				}
344
+			},
345
+			/**
346
+			 * @param {[String, Number]} value
347
+			 * 判断用户给的 value 是否同时为禁用状态
348
+			 */
349
+			isDisabled(value) {
350
+				let isDisabled = false;
351
+
352
+				this.mixinDatacomResData.forEach(item => {
353
+					if (item[this.dataValue] === value) {
354
+						isDisabled = item.disable
355
+					}
356
+				})
357
+				return isDisabled;
358
+			},
359
+			inputChange(e) {
360
+				this.$emit('inputChange', e.detail.value)
361
+			},
362
+			clearVal() {
363
+				if (this.disabled) {
364
+					return
365
+				}
366
+				if (this.multiple) {
367
+					this.current = []
368
+					this.currentArr = []
369
+					this.emit([])
370
+				} else {
371
+					this.current = ""
372
+					this.currentArr = []
373
+					this.emit('')
374
+				}
375
+				if (this.collection) {
376
+					this.removeCache()
377
+				}
378
+				this.placeholderOld = this.placeholder
379
+				this.filterInput = ""
380
+			},
381
+			change(item) {
382
+				if (!item.disable) {
383
+					this.showSelector = false
384
+					if (this.multiple) {
385
+						if (!this.current) {
386
+							this.current = []
387
+						}
388
+						if (!this.currentArr) {
389
+							this.currentArr = []
390
+						}
391
+						if (this.currentArr.includes(item[this.dataValue])) {
392
+							let index = this.current.findIndex(e => {
393
+								return e[this.dataValue] == item[this.dataValue]
394
+							})
395
+							this.current.splice(index, 1)
396
+							this.currentArr.splice(index, 1)
397
+							this.emit(this.current)
398
+						} else {
399
+							this.current.push(item)
400
+							this.currentArr.push(item[this.dataValue])
401
+							this.emit(this.current)
402
+
403
+						}
404
+						this.filterInput = ""
405
+					} else {
406
+						this.current = this.formatItemName(item)
407
+						if (this.filterable) {
408
+							this.filterInput = item[this.dataKey]
409
+						}
410
+						this.emit(item[this.dataValue])
411
+					}
412
+				}
413
+			},
414
+			delItem(item) {
415
+				if (this.disabled) {
416
+					return
417
+				}
418
+				if (this.currentArr.includes(item[this.dataValue])) {
419
+					let index = this.current.findIndex(e => {
420
+						return e[this.dataValue] == item[this.dataValue]
421
+					})
422
+					this.current.splice(index, 1)
423
+					this.currentArr.splice(index, 1)
424
+					this.emit(this.current)
425
+				}
426
+			},
427
+			emit(val) {
428
+				if (this.multiple) {
429
+					this.$emit('input', this.currentArr)
430
+					this.$emit('update:modelValue', this.currentArr)
431
+					const currentArr = this.mixinDatacomResData.filter(item => this.currentArr.includes(item[this
432
+						.dataValue]))
433
+					this.$emit('change', currentArr)
434
+				} else {
435
+					this.$emit('input', val)
436
+					this.$emit('update:modelValue', val)
437
+					const current = this.mixinDatacomResData.find(item => val == item[this.dataValue])
438
+					console.log(current);
439
+					this.$emit('change', current)
440
+				}
441
+				if (this.collection) {
442
+					this.setCache(val);
443
+				}
444
+			},
445
+			toggleSelector() {
446
+				if (this.disabled) {
447
+					return
448
+				}
449
+				// if (this.filterable && this.filterInput && this.mixinDatacomResData.findIndex(e => {
450
+				// 		return e[this.dataKey] == this
451
+				// 			.filterInput
452
+				// 	}) < 0) {
453
+				// 	if (!this.multiple) {
454
+				// 		this.filterInput = ""
455
+				// 	}
456
+
457
+				// }
458
+				this.showSelector = !this.showSelector
459
+				this.isFocus = this.showSelector
460
+				if (this.filterable && this.current && this.showSelector) {
461
+					if (!this.multiple) {
462
+						this.placeholderOld = this.current
463
+						// this.filterInput = ""
464
+					}
465
+				} else if (this.filterable && !this.current && !this.showSelector) {
466
+					if (this.placeholderOld != this.placeholder) {
467
+						if (!this.multiple) {
468
+							this.current = this.placeholderOld
469
+						}
470
+					}
471
+				}
472
+				this.filterInput = ""
473
+
474
+			},
475
+			formatItemName(item) {
476
+				if (!item) {
477
+					return ""
478
+				}
479
+				let text = item[this.dataKey]
480
+				let value = item[this.dataValue]
481
+				let {
482
+					channel_code
483
+				} = item
484
+				channel_code = channel_code ? `(${channel_code})` : ''
485
+				if (this.format) {
486
+					// 格式化输出
487
+					let str = "";
488
+					str = this.format;
489
+					for (let key in item) {
490
+						str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
491
+					}
492
+					return str;
493
+				} else {
494
+					return this.collection.indexOf('app-list') > 0 ?
495
+						`${text}(${value})` :
496
+						(
497
+							text ?
498
+							text :
499
+							`未命名${channel_code}`
500
+						)
501
+				}
502
+			},
503
+			// 获取当前加载的数据
504
+			getLoadData() {
505
+				return this.mixinDatacomResData;
506
+			},
507
+			// 获取当前缓存key
508
+			getCurrentCacheKey() {
509
+				return this.collection;
510
+			},
511
+			// 获取缓存
512
+			getCache(name = this.getCurrentCacheKey()) {
513
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
514
+				return cacheData[name];
515
+			},
516
+			// 设置缓存
517
+			setCache(value, name = this.getCurrentCacheKey()) {
518
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
519
+				cacheData[name] = value;
520
+				uni.setStorageSync(this.cacheKey, cacheData);
521
+			},
522
+			// 删除缓存
523
+			removeCache(name = this.getCurrentCacheKey()) {
524
+				let cacheData = uni.getStorageSync(this.cacheKey) || {};
525
+				delete cacheData[name];
526
+				uni.setStorageSync(this.cacheKey, cacheData);
527
+			},
528
+		}
529
+	}
530
+</script>
531
+
532
+<style lang="scss">
533
+	$uni-base-color: #6a6a6a !default;
534
+	$uni-main-color: #333 !default;
535
+	$uni-secondary-color: #909399 !default;
536
+	$uni-border-3: #e5e5e5;
537
+
538
+
539
+	/* #ifndef APP-NVUE */
540
+	@media screen and (max-width: 500px) {
541
+		.hide-on-phone {
542
+			display: none;
543
+		}
544
+	}
545
+
546
+	/* #endif */
547
+	.uni-stat__select {
548
+		display: flex;
549
+		align-items: center;
550
+		// padding: 15px;
551
+		cursor: pointer;
552
+		width: 100%;
553
+		flex: 1;
554
+		box-sizing: border-box;
555
+	}
556
+
557
+	.uni-stat-box {
558
+		width: 100%;
559
+		flex: 1;
560
+	}
561
+
562
+	.uni-stat__actived {
563
+		width: 100%;
564
+		flex: 1;
565
+		// outline: 1px solid #2979ff;
566
+	}
567
+
568
+	.uni-label-text {
569
+		font-size: 14px;
570
+		font-weight: bold;
571
+		color: $uni-base-color;
572
+		margin: auto 0;
573
+		margin-right: 5px;
574
+	}
575
+
576
+	.uni-select {
577
+		font-size: 14px;
578
+		border: 1px solid $uni-border-3;
579
+		box-sizing: border-box;
580
+		border-radius: 4px;
581
+		padding: 0 5px;
582
+		padding-left: 10px;
583
+		position: relative;
584
+		/* #ifndef APP-NVUE */
585
+		display: flex;
586
+		user-select: none;
587
+		/* #endif */
588
+		flex-direction: row;
589
+		align-items: center;
590
+		border-bottom: solid 1px $uni-border-3;
591
+		width: 100%;
592
+		flex: 1;
593
+		height: 35px;
594
+		min-height: 35px;
595
+
596
+		&--disabled {
597
+			background-color: #f5f7fa;
598
+			cursor: not-allowed;
599
+		}
600
+	}
601
+
602
+	.uni-select__label {
603
+		font-size: 16px;
604
+		// line-height: 22px;
605
+		min-height: 35px;
606
+		height: 35px;
607
+		padding-right: 10px;
608
+		color: $uni-secondary-color;
609
+	}
610
+
611
+	.uni-select__input-box {
612
+		width: 100%;
613
+		height: 35px;
614
+		position: relative;
615
+		/* #ifndef APP-NVUE */
616
+		display: flex;
617
+		/* #endif */
618
+		flex: 1;
619
+		flex-direction: row;
620
+		align-items: center;
621
+
622
+		.tag-calss {
623
+			font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
624
+			font-weight: 400;
625
+			-webkit-font-smoothing: antialiased;
626
+			-webkit-tap-highlight-color: transparent;
627
+			font-size: 12px;
628
+			border: 1px solid #d9ecff;
629
+			border-radius: 4px;
630
+			white-space: nowrap;
631
+			height: 24px;
632
+			padding: 0 4px 0px 8px;
633
+			line-height: 22px;
634
+			box-sizing: border-box;
635
+			margin: 2px 0 2px 6px;
636
+			display: flex;
637
+			max-width: 100%;
638
+			align-items: center;
639
+			background-color: #f4f4f5;
640
+			border-color: #e9e9eb;
641
+			color: #909399;
642
+
643
+			.text {
644
+				font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
645
+				font-weight: 400;
646
+				-webkit-font-smoothing: antialiased;
647
+				-webkit-tap-highlight-color: transparent;
648
+				font-size: 12px;
649
+				white-space: nowrap;
650
+				line-height: 22px;
651
+				color: #909399;
652
+				overflow: hidden;
653
+				text-overflow: ellipsis;
654
+			}
655
+		}
656
+	}
657
+
658
+	.uni-select__input {
659
+		flex: 1;
660
+		font-size: 14px;
661
+		height: 22px;
662
+		line-height: 22px;
663
+	}
664
+
665
+	.uni-select__input-plac {
666
+		font-size: 14px;
667
+		color: $uni-secondary-color;
668
+	}
669
+
670
+	.uni-select__selector {
671
+		/* #ifndef APP-NVUE */
672
+		box-sizing: border-box;
673
+		/* #endif */
674
+		position: absolute;
675
+		top: calc(100% + 12px);
676
+		left: 0;
677
+		width: 100%;
678
+		background-color: #FFFFFF;
679
+		border: 1px solid #EBEEF5;
680
+		border-radius: 6px;
681
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
682
+		z-index: 3;
683
+		padding: 4px 0;
684
+	}
685
+
686
+	.uni-select__selector-scroll {
687
+		/* #ifndef APP-NVUE */
688
+		max-height: 200px;
689
+		box-sizing: border-box;
690
+		/* #endif */
691
+	}
692
+
693
+	.uni-select__selector-empty,
694
+	.uni-select__selector-item {
695
+		/* #ifndef APP-NVUE */
696
+		display: flex;
697
+		cursor: pointer;
698
+		/* #endif */
699
+		line-height: 35px;
700
+		font-size: 14px;
701
+		text-align: center;
702
+		/* border-bottom: solid 1px $uni-border-3; */
703
+		padding: 0px 10px;
704
+	}
705
+
706
+	.uni-select__selector-item:hover {
707
+		background-color: #f9f9f9;
708
+	}
709
+
710
+	.uni-select__selector-empty:last-child,
711
+	.uni-select__selector-item:last-child {
712
+		/* #ifndef APP-NVUE */
713
+		border-bottom: none;
714
+		/* #endif */
715
+	}
716
+
717
+	.uni-select_selector-item_active {
718
+		color: #409eff;
719
+		font-weight: bold;
720
+		background-color: #f5f7fa;
721
+		border-radius: 3px;
722
+	}
723
+
724
+	.uni-select__selector__disabled {
725
+		opacity: 0.4;
726
+		cursor: default;
727
+	}
728
+
729
+	/* picker 弹出层通用的指示小三角 */
730
+	.uni-popper__arrow,
731
+	.uni-popper__arrow::after {
732
+		position: absolute;
733
+		display: block;
734
+		width: 0;
735
+		height: 0;
736
+		border-color: transparent;
737
+		border-style: solid;
738
+		border-width: 6px;
739
+	}
740
+
741
+	.uni-popper__arrow {
742
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
743
+		top: -6px;
744
+		left: 10%;
745
+		margin-right: 3px;
746
+		border-top-width: 0;
747
+		border-bottom-color: #EBEEF5;
748
+	}
749
+
750
+	.uni-popper__arrow::after {
751
+		content: " ";
752
+		top: 1px;
753
+		margin-left: -6px;
754
+		border-top-width: 0;
755
+		border-bottom-color: #fff;
756
+	}
757
+
758
+	.uni-select__input-text {
759
+		// width: 280px;
760
+		width: 90%;
761
+		color: $uni-main-color;
762
+		white-space: nowrap;
763
+		text-overflow: ellipsis;
764
+		-o-text-overflow: ellipsis;
765
+		overflow: hidden;
766
+	}
767
+
768
+	.uni-select__input-placeholder {
769
+		color: $uni-base-color;
770
+		font-size: 12px;
771
+	}
772
+
773
+	.uni-select--mask {
774
+		position: fixed;
775
+		top: 0;
776
+		bottom: 0;
777
+		right: 0;
778
+		left: 0;
779
+	}
780
+</style>

+ 73
- 20
pages/handlecase/component/uploadEvidence.vue Просмотреть файл

@@ -1,6 +1,9 @@
1 1
 <template>
2 2
 	<view>
3
-		<uni-section title="  ">
3
+		<view>
4
+			
5
+			
6
+		</view>		<uni-section title="  ">
4 7
 			<!-- 选项卡 -->
5 8
 			<view>
6 9
 				<uni-segmented-control :current="current" :values="itemsT" :style-type="styleType"
@@ -81,7 +84,30 @@
81 84
 													<uni-data-checkbox class='checkbox' v-model="subnitForm.respondentIsWrittenHear"
82 85
 														:localdata="adjudicateRecord" @change='arbitrationmethod'></uni-data-checkbox>
83 86
 												</uni-forms-item>
84
-												
87
+												<uni-forms-item
88
+												v-if="sysType==2"
89
+												label="预约时间" 
90
+												label-width="120px" 
91
+												name="respondentIsWrittenHear" 
92
+												>
93
+													<view class="example-body">
94
+														<uni-datetime-picker type="date"   @maskClick="maskClick" />
95
+													</view>
96
+													<view class="example-body" style="margin-top:20rpx">
97
+														<uni-datetime-picker type="date"   @maskClick="maskClick" />
98
+													</view>
99
+													<view class="example-body" style="margin-top:20rpx">
100
+														<uni-datetime-picker type="date"   @maskClick="maskClick" />
101
+													</view>
102
+												</uni-forms-item>
103
+												<uni-forms-item
104
+												label="选择仲裁员" 
105
+												label-width="120px" 
106
+												required
107
+												v-if="sysType==2"
108
+												>
109
+												<multipleSelect @change="selectTJ" v-model="defaultSelected" multiple dataKey="label" dataValue="value" :localdata="selectData" ></multipleSelect>
110
+												</uni-forms-item>
85 111
 											</view>
86 112
 										</uni-forms>
87 113
 										<!-- 自定义弹窗层组件 -->
@@ -189,7 +215,8 @@
189 215
 	
190 216
 </template>
191 217
 
192
-<script>
218
+<script>
219
+	import multipleSelect from '../../../components/zxz-uni-data-select/zxz-uni-data-select.vue'
193 220
 	import {
194 221
 		respondentDetail,
195 222
 		arbitratorList,
@@ -203,11 +230,18 @@
203 230
 	} from '@/utils/auth'
204 231
 	import moment from 'moment'
205 232
 	import config from '@/config'
206
-	const baseUrl = config.baseUrl
233
+	const baseUrl = config.baseUrlZC
207 234
 	const app = getApp()
208
-	export default {
235
+	export default {
236
+		components:{
237
+			multipleSelect,
238
+		},
209 239
 		data() {
210 240
 			return {
241
+				sysType:null,//默认系统 1.仲裁2.调节
242
+				selectValue:null,
243
+				defaultSelected: [], //默认选中项
244
+				serviceList: ['1','2'],//传递给子组件的数据
211 245
 				current:0,
212 246
 				itemsT:['案件详情','案件资料'],
213 247
 				styleType:'button',
@@ -301,12 +335,40 @@
301 335
 					text: '否',
302 336
 					value: 0
303 337
 				}],
304
-				items: []
338
+				items: [],
339
+				selectData: [{
340
+					value: 0,
341
+					label: '黄金糕'
342
+				}, {
343
+					value: '选项2',
344
+					label: '双皮奶'
345
+				}, {
346
+					value: '选项3',
347
+					label: '蚵仔煎'
348
+				}, {
349
+					value: '选项4',
350
+					label: '龙须面'
351
+				}, {
352
+					value: '选项5',
353
+					label: '北京烤鸭'
354
+				}, {
355
+					value: '选项6',
356
+					label: '豆腐'
357
+				}, {
358
+					value: '选项7',
359
+					label: '油条'
360
+				}]
305 361
 			}
306
-		},
362
+		},
363
+		mounted() {
364
+			this.sysType = uni.getStorageSync('sysType')
365
+		},
307 366
 		methods: {
367
+			selectTJ(e){
368
+				// console.log(this.defaultSelected,'11111111')
369
+				// console.log(e,'2222222222’')
370
+			},
308 371
 			onClickItem(e){
309
-				console.log()
310 372
 				if (this.current !== e.currentIndex) {
311 373
 					this.current = e.currentIndex
312 374
 				}
@@ -333,8 +395,7 @@
333 395
 				}
334 396
 			},
335 397
 			arbitrationmethod() {},
336
-			uploadEvidenceChange(val) {
337
-				console.log(val)
398
+			uploadEvidenceChange(val) {
338 399
 				let flag = val.detail.value;
339 400
 				if (flag == 1) {
340 401
 					this.caseFlag = true;
@@ -353,7 +414,6 @@
353 414
 			},
354 415
 			checkboxChange(e) {
355 416
 				let params =  parseInt(e.detail.value);
356
-				console.log(params,"LLLLLLLLLL");
357 417
 				let result = "";
358 418
 				this.items.forEach(item=>{
359 419
 					if(item.userId == params){
@@ -361,8 +421,6 @@
361 421
 					}
362 422
 				})
363 423
 				let arbitrators = [{id: params,arbitratorName: result}];
364
-				
365
-				console.log(result,"KKKKKKKKKKKKKKKK");
366 424
 				// let idArr = e.detail.value;
367 425
 				// let numberArray = idArr.map(str => parseInt(str));
368 426
 				// const result = this.items.filter(item => numberArray.includes(item.userId));
@@ -383,8 +441,7 @@
383 441
 							item['fileName'] = names[names.length -1]
384 442
 							item.annexPath = baseUrl +  item.annexPath
385 443
 						})
386
-					}
387
-					console.log(res.data.evidenceMaterialList)
444
+					}
388 445
 					this.formData = res.data
389 446
 					this.formData.loanEndDate = moment(this.formData.loanEndDate).format('YYYY-MM-DD HH:mm:ss');
390 447
 					this.formData.loanStartDate = moment(this.formData.loanStartDate).format(
@@ -468,11 +525,7 @@
468 525
 			evidenceList(){
469 526
 				console.log(this.formData.evidenceMaterialList)
470 527
 				this.$tab.navigateTo(`/pages/handlecase/component/evidenceList?title=证据清单&evidenceList=${encodeURIComponent(JSON.stringify(this.formData.evidenceMaterialList))}`)
471
-			},
472
-			// 仲裁申请书
473
-			applicationArbitration(){
474
-				
475
-			}	
528
+			},
476 529
 		},
477 530
 		onLoad(data) {
478 531
 			this.getData(data.id);

+ 1
- 1
pages/login.vue Просмотреть файл

@@ -8,7 +8,7 @@
8 8
 		<view class="logo-content align-center justify-center flex" v-if="logSyste==2">
9 9
 			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
10 10
 			</image>
11
-			<text class="title">调平台</text>
11
+			<text class="title">调平台</text>
12 12
 		</view>
13 13
 		<view class="login-form-content">
14 14
 			<view class="input-item flex align-center">

+ 1
- 1
pages/personalInfoCollection.vue Просмотреть файл

@@ -1,5 +1,5 @@
1 1
 <template>
2
-	<view class="equityNotice">
2
+	<view class="equityNotice" style="margin:0 10rpx">
3 3
 		
4 4
 		<text>
5 5
 			关于“个人信息收集/使用”的同意书xxxxx公司业务管理系统需要收集与使用用户的个人信息,根据《中华人民共和国网络安全法》等相关法规,特告知如下请仔细阅读并理解文本件全部内容之后,决定是否同意并使用本公司业务管理系统的各项服务;如果您仍决定使用本公司业务管理系统的各项服务,则视为您同意执行本同意书

+ 39
- 0
pages/switchSystem.vue Просмотреть файл

@@ -0,0 +1,39 @@
1
+<template>
2
+	<view class="" style="margin:300rpx auto;width:80%;">
3
+		<view class="button-sp-area">
4
+			<button @tap="logarBitration(1)" class="login-btn cu-btn block bg-blue lg round">登录仲裁系统</button>
5
+		</view>
6
+		<view class="action-btn"style="margin-top:100rpx">
7
+			<button @tap="logarBitration(2)" class="login-btn cu-btn block bg-blue lg round">登录调节系统</button>	
8
+		</view>
9
+	</view>
10
+</template>
11
+
12
+<script>
13
+	export default {
14
+		data(){
15
+			return {
16
+				
17
+			}
18
+		},
19
+		methods:{
20
+			// 登录仲裁调节系统
21
+			logarBitration(val){
22
+				uni.setStorageSync('sysType',val)
23
+				let params ={values:val}
24
+				let url ='/pages/login?values='+encodeURIComponent(params.values)
25
+				uni.navigateTo({ url })
26
+			}
27
+	
28
+		},
29
+		onShow() {
30
+			uni.removeStorageSync('sysType')
31
+		}
32
+	}
33
+</script>
34
+
35
+<style lang="scss">
36
+	page {
37
+		background-color: #ffffff;
38
+	}
39
+</style>