@zscreate/zhxy-app-component 1.0.0

package/components/dying318-picker/Pickers.vue

@@ -0,0 +1,321 @@
+<template>
+	<view class="def-width">
+		<view @click.prevent.stop="showPicker">
+			<slot></slot>
+		</view>
+		<view ref="picker" class="picker-pop" v-show="show">
+			<view class="picker-mask" @click="cancel"></view>
+			<view class="picker-panel" :class="{'picker-panel-translate': show}">
+				<view class="sercc">
+					<view>
+						<navsearch @search="search" :placeholder="'请输入搜索项'">
+						</navsearch>
+					</view>
+				</view>
+				<view class="uni-list">
+					<checkbox-group @change="selectChange">
+						<template v-for="item in dataList">
+							<label class="uni-list-cell uni-list-cell-pd" :class="{notshow: !item.show}" @click="checkBox($event, item)"
+							 :key="item.value">
+								<view>
+									<checkbox :value="item.value" :checked="item.checked" color="#FFFFFF" style="transform: scale(0.7,0.7);" />
+								</view>
+								<view>{{item.label}}</view>
+							</label>
+						</template>
+
+					</checkbox-group>
+				</view>
+				<cover-view style="z-index: 10001;"  class="fixed">
+					<view class="select-fixed">
+						<text @click="cancel">取消</text>
+						<text></text>
+						<text @click="confirm">确定</text>
+					</view>
+				</cover-view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import navsearch from '../viewcomponents/navsearch.vue'
+	export default {
+		props: {
+			multiple: {
+				value: Boolean,
+				default: false
+			},
+			dictTable: {
+				value: String,
+				default: ''
+			},
+			dictCode: {
+				value: String,
+				default: ''
+			},
+			pickerList: {
+				value: Array,
+				require: true,
+				default () {
+					return []
+				}
+			},
+			pickerKey: {
+				value: Object,
+				default () {
+					return {
+						value: 'value',
+						label: 'label',
+						children: 'children'
+					}
+				}
+			},
+			pickerStyle: {
+				value: Object,
+				default () {
+					return {
+						cancel: {},
+						confirm: {},
+						column: []
+					}
+				}
+			},
+			defaultValue: {
+				value: Array,
+				default () {
+					return []
+				}
+			},
+			columnNum: {
+				value: Number,
+				default: 0
+			},
+			itemRotateDeg: {
+				value: Number,
+				default: 15
+			},
+			beforeSetColumn: {
+				value: Function,
+				default: null
+			},
+			speedUpRatio: {
+				value: Number,
+				default: 1
+			},
+		},
+		components: {
+			navsearch
+		},
+		data() {
+			return {
+				show: false,
+				reactModel: true,
+				columns: [],
+				pickerItemHeight: Math.floor(68 * uni.getSystemInfoSync().windowWidth / 750),
+				startScrollTop: 0,
+				startPickedIndex: 0,
+				scrollingColumnIndex: 0,
+				checkedValues: [],
+				dataList: []
+			}
+		},
+		watch: {
+			pickerList() {
+				console.log('change')
+			},
+			defaultValue() {},
+		},
+		mounted() {},
+		created() {
+			this.dataListInit()
+		},
+
+		methods: {
+			dataListInit() {
+				this.pickerList.forEach((item, index) => {
+					this.$set(item, 'checked', false);
+					this.$set(item, 'show', true);
+					this.$set(this.dataList, index, item);
+				})
+			},
+			selectChange(e) {
+				var items = this.dataList,
+					values = e.detail.value;
+				for (var i = 0, lenI = items.length; i < lenI; ++i) {
+					const item = items[i]
+					if (values.includes(item.value)) {
+						this.$set(item, 'checked', true);
+					} else {
+						this.$set(item, 'checked', false);
+					}
+				}
+			},
+			checkBox($event, item) {
+				console.log(item)
+				if (item.checked) {
+					if (!this.multiple && this.checkedValues.length >= 1) {
+						uni.showToast({
+							title: '只支持单选',
+							duration: 2000,
+							icon: 'none'
+						});
+						this.$set(item, 'checked', false);
+						var arr = this.dataList.map(item => {
+							return item;
+						})
+						this.dataList = arr;
+						console.log(this.checkedValues)
+						console.log(this.dataList)
+					} else {
+						this.checkedValues.push(item)
+					}
+				} else {
+					this.checkedValues = this.checkedValues.filter(checkedItem => {
+						return checkedItem.value != item.value
+					})
+				}
+
+			},
+			search(val) {
+				this.dataList.forEach(item => {
+					console.log(item.label.includes(val))
+					if (item.label.includes(val)) {
+						item.show = true;
+					} else {
+						item.show = false;
+					}
+				})
+				console.log(this.dataList)
+			},
+			showPicker() {
+				this.checkedValues = []
+				this.show = true;
+				this.dataInit();
+			},
+			dataInit() {
+				if (this.dictCode) {
+					//根据字典Code, 初始化字典数组
+					this.$httpwx.get({
+						url: `/sys/dict/getDictItems/${this.dictCode}`,
+						data
+					}).then(res => {
+						if (res.success) {
+							res.result.forEach((item,index) => {
+								this.$set(item, 'checked', false);
+								this.$set(item, 'show', true);
+								this.$set(item, 'label', item.text);
+								this.$set(this.dataList, index, item);
+							});
+							
+						}
+					})
+				} else if (this.dictTable) {
+					let params = {
+						tableName: this.dictTable
+					};
+					this.$httpwx.get({
+						url: `/form/formdesiger/getDataCenterDict`,
+						data: params
+					}).then(res => {
+						if (res.success) {
+							res.result.forEach((item,index) => {
+								this.$set(item, 'checked', false);
+								this.$set(item, 'show', true);
+								this.$set(item, 'value', item.dictValue);
+								this.$set(item, 'label', item.dictLabel);
+								this.$set(this.dataList, index, item);
+							});
+						}
+					})
+				}
+			},
+			confirm() {
+				this.$emit('confirm', this.checkedValues)
+				this.hide()
+			},
+			cancel() {
+				this.$emit('cancel')
+				this.hide()
+			},
+			hide() {
+				this.show = false
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	$fixedHeight: 120upx;
+	.def-width {
+		width: 100%;
+	}
+
+	.notshow {
+		width: 0;
+		height: 0;
+		overflow: hidden;
+		padding: 0;
+	}
+
+	.picker-pop {
+		.picker-mask {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 999;
+			width: 100vw;
+			height: 100vh;
+			background-color: rgba(0, 0, 0, .6);
+		}
+
+		.picker-panel {
+			position: fixed;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 999;
+			width: 100%;
+			height: 100vh;
+			background-color: #fff;
+			transform: translate(0, 100%);
+			transition: transform .3s;
+			padding-bottom: $fixedHeight;
+			
+			.select-fixed {
+				height:$fixedHeight;
+				background-color: #ffffff;
+				position: fixed;
+				bottom: 10vh;
+				left: 0;
+				width: 100%;
+				overflow: hidden;
+				z-index: 10;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				border-top: 1upx solid #eee;
+				text{
+					flex:1;
+					text-align: center;
+				}
+				text + text {
+					color: #539dfa;
+				}
+			}
+
+		}
+
+		.picker-panel-translate {
+			transform: translate(0, 0);
+		}
+	}
+	.uni-list{
+		height: 80vh;
+		overflow-y: scroll;
+	}
+</style>